Delete @storybook/react (#40475)

* Delete @storybook/react

* Delete storybook__react paths from tsconfig

* Add esModuleInterop: true to tsconfig

* Fix errors

* Fix errors

* Fix errors

* Fix errors

* Fix errors

* Fix errors

* Fix errors

* Use @storybook/addons where appropriate

* Fix IStorybookStory import

* Prettify types

* Fix errors

* Fix errors

* Fix errors

* Fix errors

* Fix errors

* Fix errors
This commit is contained in:
Michaël De Boey
2019-11-22 18:19:32 +01:00
committed by Sheetal Nandi
parent a7318d23b1
commit 2b1d206cc1
23 changed files with 155 additions and 266 deletions

View File

@@ -4674,6 +4674,12 @@
"sourceRepoURL": "https://github.com/storybooks/storybook",
"asOfVersion": "5.2.1"
},
{
"libraryName": "@storybook/react",
"typingsPackageName": "storybook__react",
"sourceRepoURL": "https://github.com/storybooks/storybook",
"asOfVersion": "5.2.0"
},
{
"libraryName": "@storybook/react-native",
"typingsPackageName": "storybook__react-native",

View File

@@ -4,8 +4,8 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.1
import { ReactNode, ReactElement } from 'react';
import { StoryApi, DecoratorFunction, Parameters } from '@storybook/addons';
import { DecoratorFunction, Parameters, StoryApi } from '@storybook/addons';
import { ReactElement, ReactNode } from 'react';
export type displayNameFunc = (element: ReactElement) => string;
@@ -24,14 +24,10 @@ export type AddWithJSXFunc<StoryFnReturnType> = (
declare module '@storybook/addons' {
interface ClientStoryApi<StoryFnReturnType = unknown> {
storiesOf(
kind: string,
module: NodeModule
): StoryApi<StoryFnReturnType> & {
addWithJSX: AddWithJSXFunc<StoryFnReturnType>;
};
addParameters(parameter: Parameters & { jsx: AddonParameters }): StoryApi<StoryFnReturnType>;
storiesOf(kind: string, module: NodeModule): StoryApi<StoryFnReturnType> &
{ addWithJSX: AddWithJSXFunc<StoryFnReturnType> };
addDecorator(decorator: DecoratorFunction<StoryFnReturnType>): StoryApi<StoryFnReturnType>;
addParameters(parameter: Parameters & { jsx: AddonParameters }): StoryApi<StoryFnReturnType>;
}
}

View File

@@ -1,36 +1,34 @@
import * as React from 'react';
import { addParameters, storiesOf, addDecorator } from '@storybook/react';
import * as React from 'react';
import { jsxDecorator } from 'storybook-addon-jsx';
const { Component } = React;
// Test parameters as global options
addParameters({
jsx: {
skip: 3,
enableBeautify: false,
onBeforeRender: str => '',
onBeforeRender: () => '',
},
});
// Test `addWithJSX` function
storiesOf('Component', module).addWithJSX('simple info', () => (
<Component>Click the "?" mark at top-right to view the info.</Component>
<div>Click the "?" mark at top-right to view the info.</div>
));
storiesOf('Component with options', module).addWithJSX(
'simple info',
() => <Component>Click the "?" mark at top-right to view the info.</Component>,
() => <div>Click the "?" mark at top-right to view the info.</div>,
{
skip: 2,
enableBeautify: false,
onBeforeRender: str => '',
onBeforeRender: () => '',
}
);
storiesOf('Component with partial options', module).addWithJSX(
'simple info',
() => <Component>Click the "?" mark at top-right to view the info.</Component>,
() => <div>Click the "?" mark at top-right to view the info.</div>,
{
skip: 2,
}
@@ -39,8 +37,8 @@ storiesOf('Component with partial options', module).addWithJSX(
// Test `jsxDecorator` decorator
storiesOf('test', module)
.addDecorator(jsxDecorator)
.add('Paris', () => <Component>Hello</Component>)
.add('Orleans', () => <Component color="#236544">Hello</Component>);
.add('Paris', () => <div>Hello</div>)
.add('Orleans', () => <div color="#236544">Hello</div>);
// Test with global `jsxDecorator` decorator
addDecorator(jsxDecorator);

View File

@@ -2,8 +2,8 @@
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
"dom",
"es6"
],
"noImplicitAny": true,
"noImplicitThis": true,
@@ -11,9 +11,7 @@
"strictFunctionTypes": true,
"baseUrl": "../",
"jsx": "react",
"typeRoots": [
"../"
],
"typeRoots": ["../"],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true,

View File

@@ -2,18 +2,22 @@
// Project: https://github.com/gvaldambrini/storybook-router
// Definitions by: Alex Lomia <https://github.com/alexlomm>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
// TypeScript Version: 3.1
import * as React from 'react';
import { DecoratorFunction, StoryApi } from '@storybook/addons';
import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
import { ComponentType } from 'react';
import { MemoryRouterProps } from 'react-router';
import { Story, StoryDecorator } from '@storybook/react';
export const StoryRouter: React.ComponentType<{
story: Story;
export const StoryRouter: ComponentType<{
story: StoryApi;
links: object;
routerProps: MemoryRouterProps;
}>;
declare function storyRouterDecorator(links?: object, routerProps?: MemoryRouterProps): StoryDecorator;
declare function storyRouterDecorator(
links?: object,
routerProps?: MemoryRouterProps
): DecoratorFunction<StoryFnReactReturnType>;
export default storyRouterDecorator;

View File

@@ -0,0 +1,7 @@
{
"private": true,
"dependencies": {
"@storybook/addons": "^5.2.0",
"@storybook/react": "^5.2.0"
}
}

View File

@@ -1,30 +1,24 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"dom",
"es6"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"jsx": "react",
"typeRoots": [
"../"
],
"paths": {
"@storybook/react": [
"storybook__react"
]
},
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"files": [
"index.d.ts",
"storybook-react-router-tests.tsx"
]
"compilerOptions": {
"module": "commonjs",
"lib": [
"dom",
"es6"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"jsx": "react",
"typeRoots": ["../"],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true
},
"files": [
"index.d.ts",
"storybook-react-router-tests.tsx"
]
}

View File

@@ -1,3 +1 @@
import * as React from "react";
export default function Marked(props: { md: string }): JSX.Element;

View File

@@ -2,19 +2,19 @@
// Project: https://github.com/tuchk4/storybook-readme
// Definitions by: Taeheon Kim <https://github.com/lonyele>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
// TypeScript Version: 3.1
import { DecoratorFunction, StoryFn } from '@storybook/addons';
import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
import { ReactNode } from 'react';
// Shared Types
export type Renderable = React.ComponentType | JSX.Element;
export type RenderFunction = () => Renderable | Renderable[];
export type RenderFunction = StoryFn<StoryFnReactReturnType>;
export type Readme = string | string[];
export type DecoratorPattern = (
story: RenderFunction,
context: { kind: string; story: string }
) => Renderable | null;
export type DecoratorPattern = DecoratorFunction<StoryFnReactReturnType>;
export type HOCPattern = (story: RenderFunction) => Renderable | null;
export type HOCPattern = DecoratorFunction<StoryFnReactReturnType>;
export type MakeDecoratorResult = (...args: any[]) => any;
@@ -23,12 +23,12 @@ export const addReadme: MakeDecoratorResult;
export function addFooter(md: string): void;
export function addHeader(md: string): void;
export interface ConfigureReadmeConfig {
header?: string;
footer?: string;
StoryPreview?: (props: { children: React.ReactNode }) => React.ReactNode;
DocPreview?: (props: { children: React.ReactNode }) => React.ReactNode;
HeaderPreview?: (props: { children: React.ReactNode }) => React.ReactNode;
FooterPreview?: (props: { children: React.ReactNode }) => React.ReactNode;
header?: string;
footer?: string;
StoryPreview?: (props: { children: ReactNode }) => ReactNode;
DocPreview?: (props: { children: ReactNode }) => ReactNode;
HeaderPreview?: (props: { children: ReactNode }) => ReactNode;
FooterPreview?: (props: { children: ReactNode }) => ReactNode;
}
export function configureReadme(config: ConfigureReadmeConfig): void;

View File

@@ -0,0 +1,7 @@
{
"private": true,
"dependencies": {
"@storybook/addons": "^5.2.0",
"@storybook/react": "^5.2.0"
}
}

View File

@@ -1,9 +1,9 @@
import * as React from "react";
import { storiesOf, addDecorator } from "@storybook/react";
import React, { Fragment } from "react";
import { withDocs, withReadme, doc, addReadme, configureReadme, addFooter, addHeader } from "storybook-readme";
import Marked from "storybook-readme/components/Marked";
import registerWithPanelTitle from "storybook-readme/registerWithPanelTitle";
import { addReadme as addHtmlReadme } from "storybook-readme/html";
import registerWithPanelTitle from "storybook-readme/registerWithPanelTitle";
// Possibly any .md files or strings
const DocExample1 = `
@@ -87,7 +87,7 @@ storiesOf("Doc", module).add("StoryName Here", doc(DocExample1));
// Marked usage.
storiesOf("Custom Layout", module).add("StoryName Here", () => {
return (
<React.Fragment>
<Fragment>
<div>
<div>your react component</div>
</div>
@@ -100,6 +100,6 @@ storiesOf("Custom Layout", module).add("StoryName Here", () => {
<div>your react component</div>
</div>
<Marked md={"### OUTRO "} />
</React.Fragment>
</Fragment>
);
});

View File

@@ -1,26 +1,24 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": ["dom", "es6"],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"jsx": "react",
"typeRoots": ["../"],
"paths": {
"@storybook/react": ["storybook__react"]
},
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"files": [
"index.d.ts",
"components/Marked.d.ts",
"registerWithPanelTitle/index.d.ts",
"html/index.d.ts",
"storybook-readme-tests.tsx"
]
"compilerOptions": {
"module": "commonjs",
"lib": ["dom", "es6"],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"jsx": "react",
"typeRoots": ["../"],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true
},
"files": [
"index.d.ts",
"components/Marked.d.ts",
"registerWithPanelTitle/index.d.ts",
"html/index.d.ts",
"storybook-readme-tests.tsx"
]
}

View File

@@ -6,7 +6,7 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.1
import { ComponentType, ReactElement, ReactPortal } from 'react';
import { ComponentType, ReactElement } from 'react';
import { DecoratorFunction, StoryFn, StoryContext, Parameters, StoryApi } from '@storybook/addons';
export interface WrapStoryProps {
@@ -33,7 +33,9 @@ export interface Options {
propTables?: Array<ComponentType<any>> | false;
propTablesExclude?: Array<ComponentType<any>>;
styles?: object;
components?: { [key: string]: ComponentType<any> };
components?: {
[key: string]: ComponentType<any>
};
/**
* @deprecated "marksyConf" option has been renamed to "components"
*/
@@ -46,7 +48,10 @@ export interface Options {
excludedPropTypes?: string[];
}
export function withInfo<A = unknown>(story: StoryFn<A>, context: StoryContext): ReturnType<DecoratorFunction<A>>;
export function withInfo<A = unknown>(
story: StoryFn<A>,
context: StoryContext
): ReturnType<DecoratorFunction<A>>;
// Legacy, but supported
/**

View File

@@ -1,7 +1,10 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": ["dom", "es6"],
"lib": [
"dom",
"es6"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
@@ -10,12 +13,17 @@
"jsx": "react",
"typeRoots": ["../"],
"paths": {
"@storybook/addon-info": ["storybook__addon-info"]
"@storybook/addon-info": [
"storybook__addon-info"
]
},
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true
},
"files": ["index.d.ts", "storybook__addon-info-tests.tsx"]
"files": [
"index.d.ts",
"storybook__addon-info-tests.tsx"
]
}

View File

@@ -10,13 +10,13 @@ initStoryshots({
test: imageSnapshot({
storybookUrl: 'http://localhost:9002',
chromeExecutablePath: '/usr/local/bin/chrome',
getMatchOptions: context => ({
getMatchOptions: () => ({
failureThreshold: 0.2,
failureThresholdType: 'percent',
}),
getScreenshotOptions: ({ context, url }) => ({ path: '/foo' }),
beforeScreenshot: (page, context) => page.setViewport({ width: 300, height: 100 }),
getGotoOptions: ({ context, url }) => ({ timeout: 10 }),
getScreenshotOptions: () => ({ path: '/foo' }),
beforeScreenshot: page => page.setViewport({ width: 300, height: 100 }),
getGotoOptions: () => ({ timeout: 10 }),
customizePage: page => page.setViewport({ width: 300, height: 100 }),
getCustomBrowser: () => connect({ browserWSEndpoint: 'ws://yourUrl' }),
}),

View File

@@ -1,31 +1,25 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6"
],
"lib": ["es6"],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"typeRoots": [
"../"
],
"typeRoots": ["../"],
"paths": {
"@storybook/addon-storyshots-puppeteer": [
"storybook__addon-storyshots-puppeteer"
],
"@storybook/react": [
"storybook__react"
],
"@storybook/addon-storyshots": [
"storybook__addon-storyshots"
],
"@storybook/addon-storyshots-puppeteer": [
"storybook__addon-storyshots-puppeteer"
]
},
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true
},
"files": [
"index.d.ts",

View File

@@ -5,12 +5,10 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.1
import * as React from 'react';
import { StoryObject } from '@storybook/react';
import { Page, NavigationOptions, ScreenshotOptions } from "puppeteer";
import { IStorybookStory } from '@storybook/react/dist/client/preview/types';
export type Test = (options: {
story: StoryObject;
story: IStorybookStory;
context: StoryContext;
renderShallowTree: RenderTree;
renderTree: RenderTree;
@@ -18,9 +16,9 @@ export type Test = (options: {
}) => undefined | void | Promise<void>;
export type RenderTree = (
story: StoryObject,
story: IStorybookStory,
context: StoryContext,
options?: SnapshotOptions
options?: SnapshotOptions,
) => undefined | void | Promise<void>;
export interface SnapshotOptionsObject {
@@ -28,7 +26,7 @@ export interface SnapshotOptionsObject {
}
export interface SnapshotOptionsFn {
(story: StoryObject): SnapshotOptionsObject;
(story: IStorybookStory): SnapshotOptionsObject;
}
export type SnapshotOptions = SnapshotOptionsObject | SnapshotOptionsFn;
@@ -68,3 +66,5 @@ export interface InitOptions<Rendered = any> {
serializer?: (rendered: Rendered) => any;
integrityOptions?: {};
}
export {};

View File

@@ -0,0 +1,6 @@
{
"private": true,
"dependencies": {
"@storybook/react": "^5.2.0"
}
}

View File

@@ -2,6 +2,7 @@
"compilerOptions": {
"module": "commonjs",
"lib": [
"dom",
"es6"
],
"noImplicitAny": true,
@@ -9,20 +10,16 @@
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"typeRoots": [
"../"
],
"typeRoots": ["../"],
"paths": {
"@storybook/addon-storyshots": [
"storybook__addon-storyshots"
],
"@storybook/react": [
"storybook__react"
]
},
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true
},
"files": [
"index.d.ts",

View File

@@ -1,47 +0,0 @@
// Type definitions for @storybook/react 4.0
// Project: https://github.com/storybookjs/storybook, https://github.com/storybookjs/storybook/tree/master/app/react
// Definitions by: Joscha Feth <https://github.com/joscha>
// Anton Izmailov <https://github.com/wapgear>
// Dan Dean <https://github.com/dandean>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
/// <reference types="webpack-env" />
import * as React from 'react';
export type Renderable = React.ComponentType | JSX.Element;
export type RenderFunction = () => Renderable | Renderable[];
export interface DecoratorParameters {
[key: string]: any;
}
export type StoryDecorator = (story: RenderFunction, context: { kind: string, story: string }) => Renderable | null;
export interface Story {
readonly kind: string;
add(storyName: string, callback: RenderFunction, parameters?: DecoratorParameters): this;
addDecorator(decorator: StoryDecorator): this;
addParameters(parameters: DecoratorParameters): this;
}
export function addDecorator(decorator: StoryDecorator): void;
export function addParameters(parameters: DecoratorParameters): void;
export function clearDecorators(): void;
export function configure(fn: () => void, module: NodeModule): void;
export function setAddon(addon: object): void;
export function storiesOf(name: string, module: NodeModule): Story;
export function storiesOf<T>(name: string, module: NodeModule): Story & T;
export function forceReRender(): void;
export interface StoryObject {
name: string;
render: RenderFunction;
}
export interface StoryBucket {
kind: string;
stories: StoryObject[];
}
export function getStorybook(): StoryBucket[];

View File

@@ -1,44 +0,0 @@
import * as React from 'react';
import { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, RenderFunction, Story, forceReRender, DecoratorParameters, clearDecorators } from '@storybook/react';
const Decorator = (story: RenderFunction) => <div>{story()}</div>;
const parameters: DecoratorParameters = { parameter: 'foo' };
forceReRender();
storiesOf('Welcome', module)
// local addDecorator
.addDecorator(Decorator)
.add('to Storybook', () => <div/>)
.add('to Storybook as Array', () => [<div />, <div />])
.add('and a story with additional parameters', () => <div/>, parameters);
// global addDecorator
addDecorator(Decorator);
addParameters(parameters);
clearDecorators();
// setAddon
interface AnyAddon {
addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T;
}
const AnyAddon: AnyAddon = {
addWithSideEffect<T>(this: Story & T, storyName: string, storyFn: RenderFunction): Story & T {
console.log(this.kind === 'withAnyAddon');
return this.add(storyName, storyFn);
}
};
setAddon(AnyAddon);
storiesOf<AnyAddon>('withAnyAddon', module)
.addWithSideEffect('custom story', () => <div/>)
.addWithSideEffect('more', () => <div/>)
.add('another story', () => <div/>)
.add('to Storybook as Array', () => [<div />, <div />])
.add('and a story with additional parameters', () => <div/>, parameters)
.addWithSideEffect('even more', () => <div/>);
// configure
configure(() => undefined, module);
// getStorybook
getStorybook().forEach(({ kind, stories }) => stories.forEach(({ name, render }) => render()));

View File

@@ -1,30 +0,0 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"dom",
"es6"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"jsx": "react",
"typeRoots": [
"../"
],
"paths": {
"@storybook/react": [
"storybook__react"
]
},
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"files": [
"index.d.ts",
"storybook__react-tests.tsx"
]
}

View File

@@ -1,6 +0,0 @@
{
"extends": "dtslint/dt.json",
"rules": {
"no-unnecessary-generics": false
}
}