From f551061587166f8ed858da2f91b2244df67fc1f8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 20 Oct 2019 19:16:42 +0800 Subject: [PATCH 01/11] Addon-docs: Generalized PropsTable with sections --- .../src/blocks/PropsTable/PropRow.tsx | 10 ++-- .../blocks/PropsTable/PropsTable.stories.tsx | 4 ++ .../src/blocks/PropsTable/PropsTable.tsx | 53 ++++++++++++++++--- .../blocks/PropsTable/SectionRow.stories.tsx | 20 +++++++ .../src/blocks/PropsTable/SectionRow.tsx | 17 ++++++ 5 files changed, 91 insertions(+), 13 deletions(-) create mode 100644 lib/components/src/blocks/PropsTable/SectionRow.stories.tsx create mode 100644 lib/components/src/blocks/PropsTable/SectionRow.tsx diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx index c88052055342..2f040a0c8eaa 100644 --- a/lib/components/src/blocks/PropsTable/PropRow.tsx +++ b/lib/components/src/blocks/PropsTable/PropRow.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; import { styled } from '@storybook/theming'; import { transparentize } from 'polished'; import { PropDef } from './PropDef'; @@ -20,7 +20,7 @@ interface PrettyPropValProps { value: any; } -interface PropRowProps { +export interface PropRowProps { row: PropDef; // FIXME: row options } @@ -75,15 +75,15 @@ const prettyPrint = (type: any): string => { } }; -export const PrettyPropType: FunctionComponent = ({ type }) => ( +export const PrettyPropType: FC = ({ type }) => ( {prettyPrint(type)} ); -export const PrettyPropVal: FunctionComponent = ({ value }) => ( +export const PrettyPropVal: FC = ({ value }) => ( {JSON.stringify(value)} ); -export const PropRow: FunctionComponent = ({ +export const PropRow: FC = ({ row: { name, type, required, description, defaultValue }, }) => ( diff --git a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx index 3a43436ae02b..9fa0e0032a1d 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx @@ -9,6 +9,10 @@ export default { export const normal = () => ; +export const sections = () => ( + +); + export const error = () => ; export const empty = () => ; diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index 9aa8c48a9df1..43ecb9de059f 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -1,7 +1,8 @@ -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; import { styled } from '@storybook/theming'; import { opacify, transparentize } from 'polished'; -import { PropRow } from './PropRow'; +import { PropRow, PropRowProps } from './PropRow'; +import { SectionRow, SectionRowProps } from './SectionRow'; import { PropDef } from './PropDef'; import { EmptyBlock } from '../EmptyBlock'; import { ResetWrapper } from '../../typography/DocumentFormatting'; @@ -126,24 +127,60 @@ export interface PropsTableRowsProps { rows: PropDef[]; } +export interface PropsTableSectionsProps { + sections?: Record; +} + export interface PropsTableErrorProps { error: PropsTableError; } -export type PropsTableProps = PropsTableRowsProps | PropsTableErrorProps; +export type PropsTableProps = PropsTableRowsProps | PropsTableSectionsProps | PropsTableErrorProps; + +const PropsTableRow: FC = props => { + const { section } = props as SectionRowProps; + if (section) { + return ; + } + const { row } = props as PropRowProps; + return ; +}; /** * Display the props for a component as a props table. Each row is a collection of * PropDefs, usually derived from docgen info for the component. */ -const PropsTable: FunctionComponent = props => { +const PropsTable: FC = props => { const { error } = props as PropsTableErrorProps; if (error) { return {error}; } - const { rows } = props as PropsTableRowsProps; - if (rows.length === 0) { + let allRows: any[]; + const { sections } = props as PropsTableSectionsProps; + if (sections) { + allRows = []; + Object.keys(sections).forEach(section => { + const rows = sections[section]; + if (rows && rows.length > 0) { + allRows.push({ key: section, value: { section } }); + rows.forEach(row => { + allRows.push({ + key: `${section}_${row.name}`, + value: { row }, + }); + }); + } + }); + } else { + const { rows } = props as PropsTableRowsProps; + allRows = rows.map(row => ({ + key: row.name, + value: { row }, + })); + } + + if (allRows.length === 0) { return No props found for this component; } return ( @@ -157,8 +194,8 @@ const PropsTable: FunctionComponent = props => { - {rows.map(row => ( - + {allRows.map(row => ( + ))} diff --git a/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx b/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx new file mode 100644 index 000000000000..1113e2609aa5 --- /dev/null +++ b/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { SectionRow } from './SectionRow'; +import { Table } from './PropsTable'; +import { ResetWrapper } from '../../typography/DocumentFormatting'; + +export default { + component: SectionRow, + title: 'Docs|SectionRow', + decorators: [ + getStory => ( + + + {getStory()} +
+ + ), + ], +}; + +export const props = () => ; diff --git a/lib/components/src/blocks/PropsTable/SectionRow.tsx b/lib/components/src/blocks/PropsTable/SectionRow.tsx new file mode 100644 index 000000000000..04a6b57f77ed --- /dev/null +++ b/lib/components/src/blocks/PropsTable/SectionRow.tsx @@ -0,0 +1,17 @@ +import React, { FC } from 'react'; +import { styled } from '@storybook/theming'; + +export interface SectionRowProps { + section: string; +} + +const SectionTd = styled.td({ + fontWeight: 'bold', + textTransform: 'uppercase', +}); + +export const SectionRow: FC = ({ section }) => ( + + {section} + +); From 4c8699dd3c3cdacc2be61eb180c16bbb6db0508b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 20 Oct 2019 19:32:09 +0800 Subject: [PATCH 02/11] Addon-docs: Split React / Vue Props extraction --- addons/docs/README.md | 4 +- addons/docs/package.json | 3 +- addons/docs/src/blocks/Props.tsx | 21 ++++--- addons/docs/src/frameworks/react/config.js | 2 + .../react/extractProps.ts} | 60 +++++++------------ addons/docs/src/frameworks/vue/config.js | 2 + .../docs/src/frameworks/vue/extractProps.ts | 15 +++++ addons/docs/src/lib/propsUtils.ts | 38 ++++++++++++ 8 files changed, 94 insertions(+), 51 deletions(-) rename addons/docs/src/{lib/getPropDefs.ts => frameworks/react/extractProps.ts} (52%) create mode 100644 addons/docs/src/frameworks/vue/extractProps.ts create mode 100644 addons/docs/src/lib/propsUtils.ts diff --git a/addons/docs/README.md b/addons/docs/README.md index d46737f42cd3..323e5aeba01b 100644 --- a/addons/docs/README.md +++ b/addons/docs/README.md @@ -97,10 +97,10 @@ First add the package. Make sure that the versions for your `@storybook/*` packa yarn add -D @storybook/addon-docs ``` -Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well: +Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well: ```sh -yarn add -D react babel-loader +yarn add -D react react-is babel-loader ``` Then add the following to your `.storybook/presets.js` exports: diff --git a/addons/docs/package.json b/addons/docs/package.json index 0aa29944ff9d..f14cb8c26799 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -61,7 +61,8 @@ }, "peerDependencies": { "babel-loader": "^8.0.0", - "react": "^16.8.0" + "react": "^16.8.0", + "react-is": "^16.8.0" }, "publishConfig": { "access": "public" diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx index ab4769476adf..871c901cda65 100644 --- a/addons/docs/src/blocks/Props.tsx +++ b/addons/docs/src/blocks/Props.tsx @@ -1,19 +1,24 @@ import React, { FunctionComponent } from 'react'; -import { PropsTable, PropsTableError, PropsTableProps, PropDef } from '@storybook/components'; +import { PropsTable, PropsTableError, PropsTableProps } from '@storybook/components'; import { DocsContext, DocsContextProps } from './DocsContext'; import { Component, CURRENT_SELECTION } from './shared'; -import { getPropDefs as autoPropDefs, PropDefGetter } from '../lib/getPropDefs'; + +import { PropsExtractor } from '../lib/propsUtils'; +import { extractProps as reactExtractProps } from '../frameworks/react/extractProps'; +import { extractProps as vueExtractProps } from '../frameworks/vue/extractProps'; interface PropsProps { exclude?: string[]; of: '.' | Component; } -const inferPropDefs = (framework: string): PropDefGetter | null => { +// FIXME: remove in SB6.0 & require config +const inferPropsExtractor = (framework: string): PropsExtractor | null => { switch (framework) { case 'react': + return reactExtractProps; case 'vue': - return autoPropDefs; + return vueExtractProps; default: return null; } @@ -32,13 +37,11 @@ export const getPropsTableProps = ( throw new Error(PropsTableError.NO_COMPONENT); } - const { getPropDefs = inferPropDefs(framework) } = params.docs || {}; - if (!getPropDefs) { + const { extractProps = inferPropsExtractor(framework) } = params.docs || {}; + if (!extractProps) { throw new Error(PropsTableError.PROPS_UNSUPPORTED); } - const allRows = getPropDefs(target); - const rows = !exclude ? allRows : allRows.filter((row: PropDef) => !exclude.includes(row.name)); - return { rows }; + return extractProps(target, { exclude }); } catch (err) { return { error: err.message }; } diff --git a/addons/docs/src/frameworks/react/config.js b/addons/docs/src/frameworks/react/config.js index 0fb8a2a764df..d8ba373774cd 100644 --- a/addons/docs/src/frameworks/react/config.js +++ b/addons/docs/src/frameworks/react/config.js @@ -1,6 +1,7 @@ /* eslint-disable import/no-extraneous-dependencies */ import { addParameters } from '@storybook/react'; import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; +import { extractProps } from './extractProps'; addParameters({ docs: { @@ -9,5 +10,6 @@ addParameters({ // react is Storybook's "native" framework, so it's stories are inherently prepared to be rendered inline // NOTE: that the result is a react element. Hooks support is provided by the outer code. prepareForInline: storyFn => storyFn(), + extractProps, }, }); diff --git a/addons/docs/src/lib/getPropDefs.ts b/addons/docs/src/frameworks/react/extractProps.ts similarity index 52% rename from addons/docs/src/lib/getPropDefs.ts rename to addons/docs/src/frameworks/react/extractProps.ts index 6d591d204df0..fac66c418b49 100644 --- a/addons/docs/src/lib/getPropDefs.ts +++ b/addons/docs/src/frameworks/react/extractProps.ts @@ -1,15 +1,13 @@ /* eslint-disable no-underscore-dangle,react/forbid-foreign-prop-types */ - import PropTypes from 'prop-types'; +import { isForwardRef, isMemo } from 'react-is'; import { PropDef } from '@storybook/components'; -import { Component } from '../blocks/shared'; +import { PropDefGetter, PropsExtractor, propsFromDocgen, hasDocgen } from '../../lib/propsUtils'; -interface PropDefMap { +export interface PropDefMap { [p: string]: PropDef; } -export type PropDefGetter = (type: Component) => PropDef[] | null; - const propTypesMap = new Map(); Object.keys(PropTypes).forEach(typeName => { @@ -20,30 +18,7 @@ Object.keys(PropTypes).forEach(typeName => { propTypesMap.set(type.isRequired, typeName); }); -const hasDocgen = (obj: any) => obj && obj.props && Object.keys(obj.props).length > 0; - -const propsFromDocgen: PropDefGetter = type => { - const props: PropDefMap = {}; - const docgenInfoProps = type.__docgenInfo.props; - - Object.keys(docgenInfoProps).forEach(property => { - const docgenInfoProp = docgenInfoProps[property]; - const defaultValueDesc = docgenInfoProp.defaultValue || {}; - const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other'; - - props[property] = { - name: property, - type: propType, - required: docgenInfoProp.required, - description: docgenInfoProp.description, - defaultValue: defaultValueDesc.value, - }; - }); - - return Object.values(props); -}; - -const propsFromPropTypes: PropDefGetter = type => { +const propsFromPropTypes: PropDefGetter = (type, section) => { const props: PropDefMap = {}; if (type.propTypes) { @@ -51,7 +26,7 @@ const propsFromPropTypes: PropDefGetter = type => { const typeInfo = type.propTypes[property]; const required = typeInfo.isRequired === undefined; const docgenInfo = - type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property]; + type.__docgenInfo && type.__docgenInfo[section] && type.__docgenInfo[section][property]; const description = docgenInfo ? docgenInfo.description : null; let propType = propTypesMap.get(typeInfo) || 'other'; @@ -84,15 +59,22 @@ const propsFromPropTypes: PropDefGetter = type => { return Object.values(props); }; -export const getPropDefs: PropDefGetter = type => { +export const getPropDefs: PropDefGetter = (type, section) => { let processedType = type; - if (type.render) { - processedType = type.render().type; + if (!hasDocgen(type)) { + if (isForwardRef(type) || type.render) { + processedType = type.render().type; + } + if (isMemo(type)) { + // (typeof type.type === 'function')? + processedType = type.type().type; + } } - if (typeof type.type === 'function') { - processedType = type.type().type; - } - return hasDocgen(processedType.__docgenInfo) - ? propsFromDocgen(processedType) - : propsFromPropTypes(processedType); + return hasDocgen(processedType) + ? propsFromDocgen(processedType, section) + : propsFromPropTypes(processedType, section); }; + +export const extractProps: PropsExtractor = component => ({ + rows: getPropDefs(component, 'props'), +}); diff --git a/addons/docs/src/frameworks/vue/config.js b/addons/docs/src/frameworks/vue/config.js index 6ca833d0e0d2..eab1a5836071 100644 --- a/addons/docs/src/frameworks/vue/config.js +++ b/addons/docs/src/frameworks/vue/config.js @@ -3,6 +3,7 @@ import React from 'react'; import toReact from '@egoist/vue-to-react'; import { addParameters } from '@storybook/vue'; import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; +import { extractProps } from './extractProps'; addParameters({ docs: { @@ -12,5 +13,6 @@ addParameters({ const Story = toReact(storyFn()); return ; }, + extractProps, }, }); diff --git a/addons/docs/src/frameworks/vue/extractProps.ts b/addons/docs/src/frameworks/vue/extractProps.ts new file mode 100644 index 000000000000..b90d5b85f53e --- /dev/null +++ b/addons/docs/src/frameworks/vue/extractProps.ts @@ -0,0 +1,15 @@ +import { PropDef } from '@storybook/components'; +import { PropsExtractor, propsFromDocgen, hasDocgen } from '../../lib/propsUtils'; + +const SECTIONS = ['props', 'events', 'slots']; + +export const extractProps: PropsExtractor = component => { + if (!hasDocgen(component)) { + return null; + } + const sections: Record = {}; + SECTIONS.forEach(section => { + sections[section] = propsFromDocgen(component, section); + }); + return { sections }; +}; diff --git a/addons/docs/src/lib/propsUtils.ts b/addons/docs/src/lib/propsUtils.ts new file mode 100644 index 000000000000..1f75438a5a64 --- /dev/null +++ b/addons/docs/src/lib/propsUtils.ts @@ -0,0 +1,38 @@ +/* eslint-disable no-underscore-dangle */ +import { PropDef, PropsTableProps } from '@storybook/components'; +import { Component } from '../blocks/shared'; + +export type PropsExtractor = (component: Component) => PropsTableProps | null; + +export type PropDefGetter = (type: Component, section: string) => PropDef[] | null; + +export const hasDocgen = (obj: any) => !!obj.__docgenInfo; + +export const hasDocgenSection = (obj: any, section: string) => + obj.__docgenInfo && + obj.__docgenInfo[section] && + Object.keys(obj.__docgenInfo[section]).length > 0; + +export const propsFromDocgen: PropDefGetter = (type, section) => { + const props: Record = {}; + const docgenInfoProps = type.__docgenInfo[section]; + if (!docgenInfoProps) { + return null; + } + + Object.keys(docgenInfoProps).forEach(property => { + const docgenInfoProp = docgenInfoProps[property]; + const defaultValueDesc = docgenInfoProp.defaultValue || {}; + const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other'; + + props[property] = { + name: property, + type: propType, + required: docgenInfoProp.required, + description: docgenInfoProp.description, + defaultValue: defaultValueDesc.value, + }; + }); + + return Object.values(props); +}; From d8b188febc6437fec3513ac98bbd726d6adb135f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 20 Oct 2019 19:33:03 +0800 Subject: [PATCH 03/11] Examples/Vue: Inline stories --- examples/vue-kitchen-sink/.storybook/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js index daf145445510..a62e64d421e5 100644 --- a/examples/vue-kitchen-sink/.storybook/config.js +++ b/examples/vue-kitchen-sink/.storybook/config.js @@ -14,7 +14,7 @@ addParameters({ hierarchyRootSeparator: /\|/, }, docs: { - // inlineStories: true, + inlineStories: true, iframeHeight: '60px', }, }); From 8ca6bc86f822295bc082242b092aa4c21450a403 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 20 Oct 2019 19:34:17 +0800 Subject: [PATCH 04/11] Official-storybook: Clean up ForwardRef/Memo stories --- __mocks__/inject-decorator.stories.txt | 2 +- .../components/DocgenButton.js | 4 +--- .../components/ForwardRefButton.js | 6 ++++++ .../components/ImportedPropsButton.js | 2 +- .../components/MemoButton.js | 4 ++++ .../stories/addon-docs/addon-docs.stories.js | 2 +- .../stories/addon-docs/addon-docs.stories.mdx | 2 +- .../stories/addon-docs/forward-ref.stories.js | 12 ------------ .../stories/addon-docs/props.stories.mdx | 18 ++++++++++++++++++ .../stories/addon-docs/react-memo.stories.js | 12 ------------ .../stories/addon-info/react-docgen.stories.js | 2 +- .../inject-decorator.test.js.snap | 4 ++-- 12 files changed, 36 insertions(+), 34 deletions(-) create mode 100644 examples/official-storybook/components/ForwardRefButton.js create mode 100644 examples/official-storybook/components/MemoButton.js delete mode 100644 examples/official-storybook/stories/addon-docs/forward-ref.stories.js create mode 100644 examples/official-storybook/stories/addon-docs/props.stories.mdx delete mode 100644 examples/official-storybook/stories/addon-docs/react-memo.stories.js diff --git a/__mocks__/inject-decorator.stories.txt b/__mocks__/inject-decorator.stories.txt index c4f0c4d53e5d..a8eb61d2f221 100644 --- a/__mocks__/inject-decorator.stories.txt +++ b/__mocks__/inject-decorator.stories.txt @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { action } from '@storybook/addon-actions'; -import DocgenButton from '../components/DocgenButton'; +import { DocgenButton } from '../components/DocgenButton'; import FlowTypeButton from '../components/FlowTypeButton'; import BaseButton from '../components/BaseButton'; import TableComponent from '../components/TableComponent'; diff --git a/examples/official-storybook/components/DocgenButton.js b/examples/official-storybook/components/DocgenButton.js index 9267c473b11d..3abebb2bf3a9 100644 --- a/examples/official-storybook/components/DocgenButton.js +++ b/examples/official-storybook/components/DocgenButton.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; /** DocgenButton component description imported from comments inside the component file */ -const DocgenButton = ({ disabled, label, onClick }) => ( +export const DocgenButton = ({ disabled, label, onClick }) => ( @@ -145,5 +145,3 @@ DocgenButton.propTypes = { */ optionalString: PropTypes.string, }; - -export default DocgenButton; diff --git a/examples/official-storybook/components/ForwardRefButton.js b/examples/official-storybook/components/ForwardRefButton.js new file mode 100644 index 000000000000..70b7ee88f555 --- /dev/null +++ b/examples/official-storybook/components/ForwardRefButton.js @@ -0,0 +1,6 @@ +import React from 'react'; +import { DocgenButton } from './DocgenButton'; + +export const ForwardRefButton = React.forwardRef((props, ref) => ( + +)); diff --git a/examples/official-storybook/components/ImportedPropsButton.js b/examples/official-storybook/components/ImportedPropsButton.js index a394f33a777d..b8a1e7e88cd6 100644 --- a/examples/official-storybook/components/ImportedPropsButton.js +++ b/examples/official-storybook/components/ImportedPropsButton.js @@ -1,5 +1,5 @@ import React from 'react'; -import DocgenButton from './DocgenButton'; +import { DocgenButton } from './DocgenButton'; /** Button component description */ const ImportedPropsButton = ({ disabled, label, onClick }) => ( diff --git a/examples/official-storybook/components/MemoButton.js b/examples/official-storybook/components/MemoButton.js new file mode 100644 index 000000000000..98288ec6ab6f --- /dev/null +++ b/examples/official-storybook/components/MemoButton.js @@ -0,0 +1,4 @@ +import React from 'react'; +import { DocgenButton } from './DocgenButton'; + +export const MemoButton = React.memo(props => ); diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js index 5cd3bd8892f2..6a2f2ae2e0fd 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import notes from '../notes/notes.md'; import mdxNotes from '../notes/notes.mdx'; -import DocgenButton from '../../components/DocgenButton'; +import { DocgenButton } from '../../components/DocgenButton'; export default { title: 'Addons|Docs/stories', diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx index b0a0a94ca1ba..c5d7a313653d 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx @@ -11,7 +11,7 @@ import { import { action } from '@storybook/addon-actions'; import { Button } from '@storybook/react/demo'; import FlowTypeButton from '../../components/FlowTypeButton'; -import DocgenButton from '../../components/DocgenButton'; +import { DocgenButton } from '../../components/DocgenButton'; ); - -export default { - title: 'Addons|Docs/ForwardRef', - component: ForwardedButton, -}; - -export const displaysCorrectly = () => Hello World!; -displaysCorrectly.story = { name: 'Displays forwarded ref components correctly' }; diff --git a/examples/official-storybook/stories/addon-docs/props.stories.mdx b/examples/official-storybook/stories/addon-docs/props.stories.mdx new file mode 100644 index 000000000000..d6a03b4ee0ac --- /dev/null +++ b/examples/official-storybook/stories/addon-docs/props.stories.mdx @@ -0,0 +1,18 @@ +import { Meta, Props } from '@storybook/addon-docs/blocks'; +import { DocgenButton } from '../../components/DocgenButton'; +import { ForwardRefButton } from '../../components/ForwardRefButton'; +import { MemoButton } from '../../components/MemoButton'; + + + +## Docgen + + + +## React.forwardRef + + + +## React.memo + + diff --git a/examples/official-storybook/stories/addon-docs/react-memo.stories.js b/examples/official-storybook/stories/addon-docs/react-memo.stories.js deleted file mode 100644 index 2acf981529e1..000000000000 --- a/examples/official-storybook/stories/addon-docs/react-memo.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import DocgenButton from '../../components/DocgenButton'; - -const ButtonWithMemo = React.memo(props => ); - -export default { - title: 'Addons|Docs/ButtonWithMemo', - component: ButtonWithMemo, -}; - -export const displaysCorrectly = () => Hello World!; -displaysCorrectly.story = { name: 'Displays components with memo correctly' }; diff --git a/examples/official-storybook/stories/addon-info/react-docgen.stories.js b/examples/official-storybook/stories/addon-info/react-docgen.stories.js index 91400f9e18a4..a3002b07df2c 100644 --- a/examples/official-storybook/stories/addon-info/react-docgen.stories.js +++ b/examples/official-storybook/stories/addon-info/react-docgen.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { withInfo } from '@storybook/addon-info'; import { action } from '@storybook/addon-actions'; -import DocgenButton from '../../components/DocgenButton'; +import { DocgenButton } from '../../components/DocgenButton'; import FlowTypeButton from '../../components/FlowTypeButton'; import BaseButton from '../../components/BaseButton'; import { NamedExportButton } from '../../components/NamedExportButton'; diff --git a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap b/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap index 43d321042705..5d08bb94bf33 100644 --- a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap +++ b/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap @@ -99,7 +99,7 @@ import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { action } from '@storybook/addon-actions'; -import DocgenButton from '../components/DocgenButton'; +import { DocgenButton } from '../components/DocgenButton'; import FlowTypeButton from '../components/FlowTypeButton'; import BaseButton from '../components/BaseButton'; import TableComponent from '../components/TableComponent'; @@ -654,7 +654,7 @@ import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { action } from '@storybook/addon-actions'; -import DocgenButton from '../components/DocgenButton'; +import { DocgenButton } from '../components/DocgenButton'; import FlowTypeButton from '../components/FlowTypeButton'; import BaseButton from '../components/BaseButton'; import TableComponent from '../components/TableComponent'; From 492f1ae7edfe8dc93264ad6e854f07b45b37b0f3 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 20 Oct 2019 19:40:08 +0800 Subject: [PATCH 05/11] Addon-docs: Fix typescript errors --- addons/docs/common/index.js | 3 +-- addons/docs/src/frameworks/common/index.ts | 2 +- addons/docs/src/typings.d.ts | 1 + 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/addons/docs/common/index.js b/addons/docs/common/index.js index ab2313695b6d..ac54d6be1af0 100644 --- a/addons/docs/common/index.js +++ b/addons/docs/common/index.js @@ -1,2 +1 @@ -// FIXME: move this to typescript and src/react folder -module.exports = require('../dist/lib/getPropDefs'); +module.exports = require('../dist/frameworks/common'); diff --git a/addons/docs/src/frameworks/common/index.ts b/addons/docs/src/frameworks/common/index.ts index 5a17df8d247b..d4a985d89fab 100644 --- a/addons/docs/src/frameworks/common/index.ts +++ b/addons/docs/src/frameworks/common/index.ts @@ -1 +1 @@ -export * from '../../lib/getPropDefs'; +export * from '../../lib/propsUtils'; diff --git a/addons/docs/src/typings.d.ts b/addons/docs/src/typings.d.ts index ab6a2ebd1cca..7250049e8436 100644 --- a/addons/docs/src/typings.d.ts +++ b/addons/docs/src/typings.d.ts @@ -1,3 +1,4 @@ declare module '@mdx-js/react'; declare module '@storybook/addon-docs/mdx-compiler-plugin'; declare module 'global'; +declare module 'react-is'; From f5a839055e8439a4e63d1da09fd80b0d3eb07b02 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 20 Oct 2019 20:05:36 +0800 Subject: [PATCH 06/11] Vue-kitchen-sink: Update snapshots --- .../src/stories/__snapshots__/core.stories.storyshot | 2 +- .../stories/__snapshots__/custom-decorators.stories.storyshot | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot index 0f3b9843dbc2..96b6616e0723 100644 --- a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot @@ -2,6 +2,6 @@ exports[`Storyshots Core|Parameters Passed To Story 1`] = `
- Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"} + Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"inlineStories":true,"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
`; diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot index f7ff2ea1852e..007058a46fbb 100644 --- a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot @@ -53,6 +53,7 @@ exports[`Storyshots Custom|Decorator for Vue With Data 1`] = ` "hierarchySeparator": {} }, "docs": { + "inlineStories": true, "iframeHeight": "60px" }, "globalParameter": "globalParameter", From 73b13ba107b01059267cd17a5b865bed785278e2 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 22 Oct 2019 13:43:13 +0800 Subject: [PATCH 07/11] Vue-kitchen-sink: Borrow example from addon-vue-info --- .../src/stories/components/InfoButton.vue | 66 +++++++++++++++++++ .../stories/components/info-button.stories.js | 11 ++++ 2 files changed, 77 insertions(+) create mode 100644 examples/vue-kitchen-sink/src/stories/components/InfoButton.vue create mode 100644 examples/vue-kitchen-sink/src/stories/components/info-button.stories.js diff --git a/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue b/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue new file mode 100644 index 000000000000..a4f8668aa39a --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue @@ -0,0 +1,66 @@ + + + + + \ No newline at end of file diff --git a/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js b/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js new file mode 100644 index 000000000000..fb62af728e0b --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js @@ -0,0 +1,11 @@ +import InfoButton from './InfoButton.vue'; + +export default { + title: 'InfoButton', + component: InfoButton, +}; + +export const simple = () => ({ + components: { InfoButton }, + template: '', +}); From 26f4fe9f703096a7e45403876b2d3f733cd59d3d Mon Sep 17 00:00:00 2001 From: Aaron Pool Date: Tue, 22 Oct 2019 19:48:10 -0400 Subject: [PATCH 08/11] Vue-kitchen-sink: changed callback props to be vue events --- .../vue-kitchen-sink/src/stories/Button.vue | 36 ++++++++++++++----- .../vue-kitchen-sink/src/stories/Welcome.vue | 12 ++++--- .../src/stories/addon-actions.stories.js | 8 ++--- .../src/stories/addon-docs.stories.mdx | 4 +-- .../src/stories/addon-links.stories.js | 3 +- .../src/stories/components/welcome.stories.js | 2 +- .../src/stories/custom-rendering.stories.js | 6 ++-- 7 files changed, 47 insertions(+), 24 deletions(-) diff --git a/examples/vue-kitchen-sink/src/stories/Button.vue b/examples/vue-kitchen-sink/src/stories/Button.vue index 940ce7b11004..eb637acd722e 100644 --- a/examples/vue-kitchen-sink/src/stories/Button.vue +++ b/examples/vue-kitchen-sink/src/stories/Button.vue @@ -1,21 +1,42 @@ @@ -31,5 +52,4 @@ background-color: white; outline: none; } - \ No newline at end of file diff --git a/examples/vue-kitchen-sink/src/stories/Welcome.vue b/examples/vue-kitchen-sink/src/stories/Welcome.vue index 6c5258652043..d3ec62eac551 100644 --- a/examples/vue-kitchen-sink/src/stories/Welcome.vue +++ b/examples/vue-kitchen-sink/src/stories/Welcome.vue @@ -16,7 +16,7 @@

See these sample - stories + stories for a component called Button . @@ -55,9 +55,13 @@