From f25ed2def552911932d1e1da8ae399d59fd9ba7f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 Jun 2020 05:21:38 +0800 Subject: [PATCH 1/7] ArgsTable: Clean up related stories --- .../src/blocks/ArgsTable/ArgRow.stories.tsx | 63 ++++- .../blocks/ArgsTable/ArgsTable.stories.tsx | 30 ++- .../ArgsTable/TabbedArgsTable.stories.tsx | 25 ++ .../src/blocks/Description.stories.tsx | 10 +- .../src/blocks/DocsPage.stories.tsx | 90 ++++---- lib/components/src/blocks/DocsPage.tsx | 4 +- lib/components/src/blocks/Preview.stories.tsx | 36 +-- .../src/blocks/PropsTable/PropDef.ts | 31 --- .../src/blocks/PropsTable/PropJsDoc.tsx | 98 -------- .../src/blocks/PropsTable/PropRow.stories.tsx | 116 ---------- .../src/blocks/PropsTable/PropRow.tsx | 97 -------- .../src/blocks/PropsTable/PropValue.tsx | 114 ---------- .../blocks/PropsTable/PropsTable.stories.tsx | 18 -- .../src/blocks/PropsTable/PropsTable.tsx | 215 ------------------ .../blocks/PropsTable/SectionRow.stories.tsx | 20 -- .../src/blocks/PropsTable/SectionRow.tsx | 26 --- lib/components/src/blocks/PropsTable/index.ts | 1 - lib/components/src/blocks/Source.stories.tsx | 28 ++- lib/components/src/blocks/Story.stories.tsx | 6 +- 19 files changed, 193 insertions(+), 835 deletions(-) create mode 100644 lib/components/src/blocks/ArgsTable/TabbedArgsTable.stories.tsx delete mode 100644 lib/components/src/blocks/PropsTable/PropDef.ts delete mode 100644 lib/components/src/blocks/PropsTable/PropJsDoc.tsx delete mode 100644 lib/components/src/blocks/PropsTable/PropRow.stories.tsx delete mode 100644 lib/components/src/blocks/PropsTable/PropRow.tsx delete mode 100644 lib/components/src/blocks/PropsTable/PropValue.tsx delete mode 100644 lib/components/src/blocks/PropsTable/PropsTable.stories.tsx delete mode 100644 lib/components/src/blocks/PropsTable/PropsTable.tsx delete mode 100644 lib/components/src/blocks/PropsTable/SectionRow.stories.tsx delete mode 100644 lib/components/src/blocks/PropsTable/SectionRow.tsx delete mode 100644 lib/components/src/blocks/PropsTable/index.ts diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx index 7cba89c4724c..c3434ba8b966 100644 --- a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx @@ -122,15 +122,54 @@ const withArgs = { updateArgs: action('updateArgs'), }; -export const String = () => ; -export const LongName = () => ; -export const LongDesc = () => ; -export const Number = () => ; -export const ObjectOf = () => ; -export const ArrayOf = () => ; -export const ComplexObject = () => ; -export const Func = () => ; -export const Markdown = () => ; -export const StringCompact = () => ; -export const Args = () => ; -export const ArgsCompact = () => ; +export const String = (args) => ; +String.args = { + row: stringType, +}; +export const LongName = (args) => ; +LongName.args = { + row: longNameType, +}; +export const LongDesc = (args) => ; +LongDesc.args = { + row: longDescType, +}; +export const Number = (args) => ; +Number.args = { + row: numberType, +}; +export const ObjectOf = (args) => ; +ObjectOf.args = { + row: objectType, +}; +export const ArrayOf = (args) => ; +ArrayOf.args = { + row: arrayType, +}; +export const ComplexObject = (args) => ; +ComplexObject.args = { + row: complexType, +}; +export const Func = (args) => ; +Func.args = { + row: funcType, +}; +export const Markdown = (args) => ; +Markdown.args = { + row: markdownType, +}; +export const StringCompact = (args) => ; +StringCompact.args = { + ...String.args, + compact: true, +}; +export const Args = (args) => ; +Args.args = { + ...String.args, + ...withArgs, +}; +export const ArgsCompact = (args) => ; +ArgsCompact.args = { + ...Args.args, + compact: true, +}; diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx index 49a71e38799f..ca62fbcb9558 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx @@ -10,9 +10,16 @@ export default { const propsSection = { category: 'props ' }; const eventsSection = { category: 'events ' }; -export const Normal = () => ; +export const Normal = (args) => ; +Normal.args = { + rows: { stringType, numberType }, +}; -export const Compact = () => ; +export const Compact = (args) => ; +Compact.args = { + ...Normal.args, + compact: true, +}; const sectionRows = { a: { ...stringType, table: { ...stringType.table, ...propsSection } }, @@ -20,10 +27,21 @@ const sectionRows = { c: { ...stringType, table: { ...stringType.table, ...eventsSection } }, }; -export const Sections = () => ; +export const Sections = (args) => ; +Sections.args = { + rows: sectionRows, +}; -export const SectionsCompact = () => ; +export const SectionsCompact = (args) => ; +SectionsCompact.args = { + ...Sections.args, + compact: true, +}; -export const Error = () => ; +export const Error = (args) => ; +Error.args = { + error: ArgsTableError.NO_COMPONENT, +}; -export const Empty = () => ; +export const Empty = (args) => ; +Empty.args = { rows: {} }; diff --git a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.stories.tsx new file mode 100644 index 000000000000..86618e3ff17f --- /dev/null +++ b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.stories.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { TabbedArgsTable } from './TabbedArgsTable'; +import { Normal, Compact, Sections } from './ArgsTable.stories'; + +export default { + component: TabbedArgsTable, + title: 'Docs/TabbedArgsTable', +}; + +const propsSection = { category: 'props ' }; +const eventsSection = { category: 'events ' }; + +export const Tabs = (args) => ; +Tabs.args = { + tabs: { + Normal: Normal.args, + Compact: Compact.args, + Sections: Sections.args, + }, +}; + +export const Empty = Tabs.bind(); +Empty.args = { + tabs: {}, +}; diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx index 547773c39825..ed350cc40834 100644 --- a/lib/components/src/blocks/Description.stories.tsx +++ b/lib/components/src/blocks/Description.stories.tsx @@ -10,6 +10,12 @@ export default { const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`; -export const text = () => ; +export const Text = (args) => ; +Text.args = { + markdown: textCaption, +}; -export const markdown = () => ; +export const Markdown = (args) => ; +Markdown.args = { + markdown: markdownCaption, +}; diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx index 61280d1875ee..15a4c6c56449 100644 --- a/lib/components/src/blocks/DocsPage.stories.tsx +++ b/lib/components/src/blocks/DocsPage.stories.tsx @@ -1,74 +1,64 @@ import React from 'react'; -import { Title, Subtitle, DocsWrapper, DocsContent } from './DocsPage'; -import * as storyStories from './Story.stories'; -import * as previewStories from './Preview.stories'; -import * as propsTableStories from './PropsTable/PropsTable.stories'; -import * as sourceStories from './Source.stories'; -import * as descriptionStories from './Description.stories'; +import { Title, Subtitle, DocsPageWrapper } from './DocsPage'; +import * as Story from './Story.stories'; +import * as Preview from './Preview.stories'; +import * as ArgsTable from './ArgsTable/ArgsTable.stories'; +import * as Source from './Source.stories'; +import * as Description from './Description.stories'; export default { title: 'Docs/DocsPage', - component: DocsWrapper, + component: DocsPageWrapper, parameters: { layout: 'fullscreen', }, - decorators: [ - (storyFn) => ( - - {storyFn()} - - ), - ], }; - -export const withSubtitle = () => ( - <> +export const WithSubtitle = () => ( + DocsPage What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab. - {descriptionStories.text()} - {previewStories.single()} - {propsTableStories.normal()} - {sourceStories.jsx()} - + + + + + ); -withSubtitle.storyName = 'with subtitle'; -export const empty = () => ( - <> - {storyStories.error()} - {propsTableStories.error()} - {sourceStories.sourceUnavailable()} - +export const Empty = () => ( + + + + + ); -export const noText = () => ( - <> +export const NoText = () => ( + no text - {previewStories.single()} - {propsTableStories.normal()} - {sourceStories.jsx()} - + + + + ); -noText.storyName = 'no text'; -export const text = () => ( - <> +export const Text = () => ( + Sensorium - {descriptionStories.text()} - {previewStories.single()} - {propsTableStories.normal()} - {sourceStories.jsx()} - + + + + + ); -export const markdown = () => ( - <> +export const Markdown = () => ( + markdown - {descriptionStories.markdown()} - {previewStories.single()} - {propsTableStories.normal()} - {sourceStories.jsx()} - + + + + + ); diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/components/src/blocks/DocsPage.tsx index e6897e7d23f4..1bc70960a584 100644 --- a/lib/components/src/blocks/DocsPage.tsx +++ b/lib/components/src/blocks/DocsPage.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react'; +import React, { FC } from 'react'; import { styled, Theme } from '@storybook/theming'; import { transparentize } from 'polished'; @@ -54,7 +54,7 @@ export const DocsWrapper = styled.div<{}>(({ theme }) => ({ [`@media (min-width: ${breakpoint}px)`]: {}, })); -export const DocsPageWrapper: FunctionComponent = ({ children }) => ( +export const DocsPageWrapper: FC = ({ children }) => ( {children} diff --git a/lib/components/src/blocks/Preview.stories.tsx b/lib/components/src/blocks/Preview.stories.tsx index 95259b8b0177..e2a7bac40789 100644 --- a/lib/components/src/blocks/Preview.stories.tsx +++ b/lib/components/src/blocks/Preview.stories.tsx @@ -5,38 +5,38 @@ import { Spaced } from '../spaced/Spaced'; import { Preview } from './Preview'; import { Story } from './Story'; import { Button } from '../Button/Button'; -import * as sourceStories from './Source.stories'; +import * as Source from './Source.stories'; export default { title: 'Docs/Preview', component: Preview, }; -export const codeCollapsed = () => ( - +export const CodeCollapsed = () => ( + ); -export const codeExpanded = () => ( - +export const CodeExpanded = () => ( + ); -export const codeError = () => ( - +export const CodeError = () => ( + ); -export const single = () => ( +export const Single = () => ( ); -export const row = () => ( +export const Row = () => ( @@ -48,7 +48,7 @@ export const row = () => ( ); -export const column = () => ( +export const Column = () => ( @@ -56,7 +56,7 @@ export const column = () => ( ); -export const gridWith3Columns = () => ( +export const GridWith3Columns = () => ( @@ -83,7 +83,7 @@ export const gridWith3Columns = () => ( const buttonFn = () => ; -export const withToolbar = () => ( +export const WithToolbar = () => ( @@ -94,7 +94,7 @@ const Horizontal = styled((props) => )({ gridTemplateColumns: '100px calc(100vw + 100px) 100px', }); -export const wide = () => ( +export const Wide = () => (
START
@@ -104,33 +104,33 @@ export const wide = () => ( ); -export const withToolbarMulti = () => ( +export const WithToolbarMulti = () => ( ); -export const withFullscreenSingle = () => ( +export const WithFullscreenSingle = () => ( ); -export const withFullscreenMulti = () => ( +export const WithFullscreenMulti = () => ( ); -export const withCenteredSingle = () => ( +export const WithCenteredSingle = () => ( ); -export const withCenteredMulti = () => ( +export const WithCenteredMulti = () => ( diff --git a/lib/components/src/blocks/PropsTable/PropDef.ts b/lib/components/src/blocks/PropsTable/PropDef.ts deleted file mode 100644 index d81a85334e20..000000000000 --- a/lib/components/src/blocks/PropsTable/PropDef.ts +++ /dev/null @@ -1,31 +0,0 @@ -export interface JsDocParam { - name: string; - description?: string; -} - -export interface JsDocReturns { - description?: string; -} - -export interface JsDocTags { - params?: JsDocParam[]; - returns?: JsDocReturns; -} - -export interface PropSummaryValue { - summary: string; - detail?: string; -} - -export type PropType = PropSummaryValue; -export type PropDefaultValue = PropSummaryValue; - -export interface PropDef { - name: string; - type: PropType; - sbType?: any; - required: boolean; - description?: string; - defaultValue?: PropDefaultValue; - jsDocTags?: JsDocTags; -} diff --git a/lib/components/src/blocks/PropsTable/PropJsDoc.tsx b/lib/components/src/blocks/PropsTable/PropJsDoc.tsx deleted file mode 100644 index e0080dc4e2b4..000000000000 --- a/lib/components/src/blocks/PropsTable/PropJsDoc.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { FC } from 'react'; -import { styled } from '@storybook/theming'; -import { JsDocTags } from './PropDef'; -import { codeCommon } from '../../typography/shared'; - -interface PropJsDocProps { - tags: JsDocTags; -} - -export const Table = styled.table(({ theme }) => ({ - '&&': { - // Escape default table styles - borderCollapse: 'collapse', - borderSpacing: 0, - border: 'none', - - tr: { - border: 'none !important', - background: 'none', - }, - - 'td, th': { - padding: 0, - border: 'none', - width: 'auto!important', - }, - // End escape - - marginTop: 0, - marginBottom: 0, - - 'th:first-of-type, td:first-of-type': { - paddingLeft: 0, - }, - - 'th:last-of-type, td:last-of-type': { - paddingRight: 0, - }, - - td: { - paddingTop: 0, - paddingBottom: 4, - - '&:not(:first-of-type)': { - paddingLeft: 10, - paddingRight: 0, - }, - }, - - tbody: { - boxShadow: 'none', - border: 'none', - }, - - code: codeCommon({ theme }), - - '& code': { - margin: 0, - display: 'inline-block', - }, - }, -})); - -export const PropJsDoc: FC = ({ tags }) => { - const params = (tags.params || []).filter((x) => x.description); - const hasDisplayableParams = params.length !== 0; - const hasDisplayableReturns = tags.returns != null && tags.returns.description != null; - - if (!hasDisplayableParams && !hasDisplayableReturns) { - return null; - } - - return ( - - - {hasDisplayableParams && - params.map((x) => { - return ( - - - - - ); - })} - {hasDisplayableReturns && ( - - - - - )} - -
- {x.name} - {x.description}
- Returns - {tags.returns.description}
- ); -}; diff --git a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx deleted file mode 100644 index d67799621a66..000000000000 --- a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react'; -import { PropRow } from './PropRow'; -import { Table } from './PropsTable'; -import { ResetWrapper } from '../../typography/DocumentFormatting'; - -export default { - component: PropRow, - title: 'Docs/PropRow', - excludeStories: /.*Def$/, - decorators: [ - (getStory) => ( - - - {getStory()} -
- - ), - ], -}; - -export const stringDef = { - name: 'someString', - type: { summary: 'string' }, - required: true, - description: 'someString description', - defaultValue: { summary: 'fixme' }, -}; - -export const longNameDef = { - ...stringDef, - name: 'reallyLongStringThatTakesUpSpace', -}; - -export const longDescDef = { - ...stringDef, - description: 'really long description that takes up a lot of space. sometimes this happens.', -}; - -export const numberDef = { - name: 'someNumber', - type: { summary: 'number' }, - required: false, - description: 'someNumber description', - defaultValue: { summary: '0' }, -}; - -export const objectDef = { - name: 'someObject', - type: { summary: 'objectOf(number)' }, - required: false, - description: 'A simple `objectOf` propType.', - defaultValue: { summary: '{ key: 1 }' }, -}; - -export const arrayDef = { - name: 'someOArray', - type: { summary: 'number[]' }, - required: false, - description: 'array of a certain type', - defaultValue: { summary: '[1, 2, 3]' }, -}; - -export const complexDef = { - name: 'someComplex', - type: { - summary: 'object', - detail: `[{ - id: number, - func: func, - arr: [{ index: number }] -}]`, - }, - required: false, - description: 'A very complex `objectOf` propType.', - defaultValue: { - summary: 'object', - detail: `[{ - id: 1, - func: () => {}, - arr: [{ index: 1 }] -}]`, - }, -}; - -export const funcDef = { - name: 'concat', - type: { summary: '(a: string, b: string) => string' }, - required: true, - description: 'concat 2 string values.', - defaultValue: { summary: 'func', detail: '(a, b) => { return a + b; }' }, - jsDocTags: { - params: [ - { name: 'a', description: 'The first string' }, - { name: 'b', description: 'The second string' }, - ], - returns: { description: 'The concatenation of both strings' }, - }, -}; - -export const markdownDef = { - name: 'someString', - type: { summary: 'string' }, - required: false, - description: - 'A `prop` can *support* __markdown__ syntax. This was ship in ~~5.2~~ 5.3. [Find more info in the storybook docs.](https://storybook.js.org/)', -}; - -export const string = () => ; -export const longName = () => ; -export const longDesc = () => ; -export const number = () => ; -export const objectOf = () => ; -export const arrayOf = () => ; -export const complexObject = () => ; -export const func = () => ; -export const markdown = () => ; diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx deleted file mode 100644 index 47aff1e268b4..000000000000 --- a/lib/components/src/blocks/PropsTable/PropRow.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { FC } from 'react'; -import Markdown from 'markdown-to-jsx'; -import { transparentize } from 'polished'; -import { styled } from '@storybook/theming'; -import { PropDef } from './PropDef'; -import { PropJsDoc } from './PropJsDoc'; -import { PropValue } from './PropValue'; -import { codeCommon } from '../../typography/shared'; - -export interface PropRowProps { - row: PropDef; -} - -const Name = styled.span({ fontWeight: 'bold' }); - -const Required = styled.span(({ theme }) => ({ - color: theme.color.negative, - fontFamily: theme.typography.fonts.mono, - cursor: 'help', -})); - -const Description = styled.div(({ theme }) => ({ - '&&': { - p: { - margin: '0 0 10px 0', - }, - - a: { - textDecoration: 'underline', - - '&:hover': { - textDecoration: 'none', - }, - }, - }, - - code: codeCommon({ theme }), - - '& code': { - margin: 0, - display: 'inline-block', - }, -})); - -const Type = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription }) => ({ - color: - theme.base === 'light' - ? transparentize(0.1, theme.color.defaultText) - : transparentize(0.2, theme.color.defaultText), - marginTop: hasDescription ? 4 : 0, -})); - -const TypeWithJsDoc = styled.div<{ hasDescription: boolean }>(({ theme, hasDescription }) => ({ - color: - theme.base === 'light' - ? transparentize(0.1, theme.color.defaultText) - : transparentize(0.2, theme.color.defaultText), - marginTop: hasDescription ? 12 : 0, - marginBottom: 12, -})); - -export const PropRow: FC = ({ - row: { name, type, required, description, defaultValue, jsDocTags }, -}) => { - const hasDescription = description != null && description !== ''; - - return ( - - - {name} - {required ? * : null} - - - {hasDescription && ( - - {description} - - )} - {jsDocTags != null ? ( - <> - - - - - - ) : ( - - - - )} - - - - - - ); -}; diff --git a/lib/components/src/blocks/PropsTable/PropValue.tsx b/lib/components/src/blocks/PropsTable/PropValue.tsx deleted file mode 100644 index 4984c0d70075..000000000000 --- a/lib/components/src/blocks/PropsTable/PropValue.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React, { FC, useState } from 'react'; -import { styled } from '@storybook/theming'; -import memoize from 'memoizerific'; -import { PropSummaryValue } from './PropDef'; -import { WithTooltipPure } from '../../tooltip/WithTooltip'; -import { Icons } from '../../icon/icon'; -import { SyntaxHighlighter } from '../../syntaxhighlighter/syntaxhighlighter'; -import { codeCommon } from '../../typography/shared'; - -interface PropValueProps { - value?: PropSummaryValue; -} - -interface PropTextProps { - text: string; -} - -interface PropSummaryProps { - value: PropSummaryValue; -} - -const Text = styled.span(({ theme }) => ({ - fontFamily: theme.typography.fonts.mono, - fontSize: theme.typography.size.s2 - 1, -})); - -const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({ - fontFamily: theme.typography.fonts.mono, - color: theme.color.secondary, - margin: 0, - whiteSpace: 'nowrap', - display: 'flex', - alignItems: 'center', -})); - -const Detail = styled.div<{ width: string }>(({ theme, width }) => ({ - width, - minWidth: 200, - maxWidth: 800, - padding: 15, - // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit. - fontFamily: theme.typography.fonts.mono, - fontSize: theme.typography.size.s2 - 1, - // Most custom stylesheet will reset the box-sizing to "border-box" and will break the tooltip. - boxSizing: 'content-box', - - '& code': { - padding: '0 !important', - }, -})); - -const ArrowIcon = styled(Icons)({ - height: 10, - width: 10, - minWidth: 10, - marginLeft: 4, -}); - -const EmptyProp = () => { - return -; -}; - -const PropText: FC = ({ text }) => { - return {text}; -}; - -const calculateDetailWidth = memoize(1000)((detail: string): string => { - const lines = detail.split(/\r?\n/); - - return `${Math.max(...lines.map((x) => x.length))}ch`; -}); - -const PropSummary: FC = ({ value }) => { - const { summary, detail } = value; - - const [isOpen, setIsOpen] = useState(false); - // summary is used for the default value - // below check fixes not displaying default values for boolean typescript vars - const summaryAsString = - summary !== undefined && summary !== null && typeof summary.toString === 'function' - ? summary.toString() - : summary; - if (detail == null) { - return ; - } - - return ( - { - setIsOpen(isVisible); - }} - tooltip={ - - - {detail} - - - } - > - - {summaryAsString} - - - - ); -}; - -export const PropValue: FC = ({ value }) => { - return value == null ? : ; -}; diff --git a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx deleted file mode 100644 index 8d05d74ab77f..000000000000 --- a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { PropsTable, PropsTableError } from './PropsTable'; -import { stringDef, numberDef } from './PropRow.stories'; - -export default { - component: PropsTable, - title: 'Docs/PropTable', -}; - -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 deleted file mode 100644 index f9af83a95dc6..000000000000 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ /dev/null @@ -1,215 +0,0 @@ -import React, { FC } from 'react'; -import { styled, ignoreSsrWarning } from '@storybook/theming'; -import { opacify, transparentize, darken, lighten } from 'polished'; -import { PropRow, PropRowProps } from './PropRow'; -import { SectionRow, SectionRowProps } from './SectionRow'; -import { PropDef } from './PropDef'; -import { EmptyBlock } from '../EmptyBlock'; -import { ResetWrapper } from '../../typography/DocumentFormatting'; - -export const Table = styled.table<{}>(({ theme }) => ({ - '&&': { - // Resets for cascading/system styles - borderCollapse: 'collapse', - borderSpacing: 0, - color: theme.color.defaultText, - tr: { - border: 'none', - background: 'none', - }, - - 'td, th': { - padding: 0, - border: 'none', - verticalAlign: 'top', - }, - // End Resets - - fontSize: theme.typography.size.s2, - lineHeight: '20px', - textAlign: 'left', - width: '100%', - - // Margin collapse - marginTop: 25, - marginBottom: 40, - - 'th:first-of-type, td:first-of-type': { - paddingLeft: 20, - }, - - 'th:last-of-type, td:last-of-type': { - paddingRight: 20, - width: '20%', - }, - - th: { - color: - theme.base === 'light' - ? transparentize(0.25, theme.color.defaultText) - : transparentize(0.45, theme.color.defaultText), - paddingTop: 10, - paddingBottom: 10, - - '&:not(:first-of-type)': { - paddingLeft: 15, - paddingRight: 15, - }, - }, - - td: { - paddingTop: '16px', - paddingBottom: '16px', - - '&:not(:first-of-type)': { - paddingLeft: 15, - paddingRight: 15, - }, - - '&:last-of-type': { - paddingRight: 20, - }, - }, - - // Table "block" styling - // Emphasize tbody's background and set borderRadius - // Calling out because styling tables is finicky - - // Makes border alignment consistent w/other DocBlocks - marginLeft: 1, - marginRight: 1, - - [`tr:first-child${ignoreSsrWarning}`]: { - [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: { - borderTopLeftRadius: theme.appBorderRadius, - }, - [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: { - borderTopRightRadius: theme.appBorderRadius, - }, - }, - - [`tr:last-child${ignoreSsrWarning}`]: { - [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: { - borderBottomLeftRadius: theme.appBorderRadius, - }, - [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: { - borderBottomRightRadius: theme.appBorderRadius, - }, - }, - - tbody: { - // slightly different than the other DocBlock shadows to account for table styling gymnastics - boxShadow: - theme.base === 'light' - ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px, - ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px` - : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px, - ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`, - borderRadius: theme.appBorderRadius, - - tr: { - background: 'transparent', - overflow: 'hidden', - '&:not(:first-child)': { - borderTopWidth: 1, - borderTopStyle: 'solid', - borderTopColor: - theme.base === 'light' - ? darken(0.1, theme.background.content) - : lighten(0.05, theme.background.content), - }, - }, - - td: { - background: theme.background.content, - }, - }, - // End finicky table styling - }, -})); - -export enum PropsTableError { - NO_COMPONENT = 'No component found', - PROPS_UNSUPPORTED = 'Props unsupported. See Props documentation for your framework.', -} - -export interface PropsTableRowsProps { - rows: PropDef[]; -} - -export interface PropsTableSectionsProps { - sections?: Record; -} - -export interface PropsTableErrorProps { - error: PropsTableError; -} - -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: FC = (props) => { - const { error } = props as PropsTableErrorProps; - if (error) { - return {error}; - } - - let allRows: any[] = []; - const { sections } = props as PropsTableSectionsProps; - const { rows } = props as PropsTableRowsProps; - if (sections) { - Object.keys(sections).forEach((section) => { - const sectionRows = sections[section]; - if (sectionRows && sectionRows.length > 0) { - allRows.push({ key: section, value: { section } }); - sectionRows.forEach((row) => { - allRows.push({ - key: `${section}_${row.name}`, - value: { row }, - }); - }); - } - }); - } else if (rows) { - allRows = rows.map((row) => ({ - key: row.name, - value: { row }, - })); - } - - if (allRows.length === 0) { - return No props found for this component; - } - return ( - - - - - - - - - - - {allRows.map((row) => ( - - ))} - -
NameDescriptionDefault
- - ); -}; - -export { PropsTable, PropDef }; diff --git a/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx b/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx deleted file mode 100644 index 74fc1c0aca06..000000000000 --- a/lib/components/src/blocks/PropsTable/SectionRow.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { SectionRow } from './SectionRow'; -import { Table } from './PropsTable'; -import { ResetWrapper } from '../../typography/DocumentFormatting'; - -export default { - component: SectionRow, - title: 'Docs/SectionRow/Props', - decorators: [ - (getStory) => ( - - - {getStory()} -
- - ), - ], -}; - -export const props = () => ; diff --git a/lib/components/src/blocks/PropsTable/SectionRow.tsx b/lib/components/src/blocks/PropsTable/SectionRow.tsx deleted file mode 100644 index faebc6651cf8..000000000000 --- a/lib/components/src/blocks/PropsTable/SectionRow.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { FC } from 'react'; -import { transparentize } from 'polished'; -import { styled } from '@storybook/theming'; - -export interface SectionRowProps { - section: string; -} - -const SectionTh = styled.th<{}>(({ theme }) => ({ - letterSpacing: '0.35em', - textTransform: 'uppercase', - fontWeight: theme.typography.weight.black, - fontSize: theme.typography.size.s1 - 1, - lineHeight: '24px', - color: - theme.base === 'light' - ? transparentize(0.4, theme.color.defaultText) - : transparentize(0.6, theme.color.defaultText), - background: `${theme.background.app} !important`, -})); - -export const SectionRow: FC = ({ section }) => ( - - {section} - -); diff --git a/lib/components/src/blocks/PropsTable/index.ts b/lib/components/src/blocks/PropsTable/index.ts deleted file mode 100644 index 165798d44676..000000000000 --- a/lib/components/src/blocks/PropsTable/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PropsTable'; diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx index 78bab5b10ece..5af0dfe0710d 100644 --- a/lib/components/src/blocks/Source.stories.tsx +++ b/lib/components/src/blocks/Source.stories.tsx @@ -12,7 +12,12 @@ const jsxCode = ` `; -export const jsx = () => ; +export const JSX = (args) => ; +JSX.args = { + code: jsxCode, + language: 'jsx', + format: false, +}; const cssCode = ` @-webkit-keyframes blinker { @@ -28,10 +33,21 @@ const cssCode = ` } `; -export const css = () => ; +export const CSS = (args) => ; +CSS.args = { + code: cssCode, + language: 'css', + format: false, +}; -export const noStory = () => ; +export const NoStory = (args) => ; +NoStory.args = { + error: SourceError.NO_STORY, + format: false, +}; -export const sourceUnavailable = () => ( - -); +export const SourceUnavailable = (args) => ; +SourceUnavailable.args = { + error: SourceError.SOURCE_UNAVAILABLE, + format: false, +}; diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx index 189b91697dbc..3d2bacc90cec 100644 --- a/lib/components/src/blocks/Story.stories.tsx +++ b/lib/components/src/blocks/Story.stories.tsx @@ -18,8 +18,8 @@ const buttonHookFn = () => { ); }; -export const inline = () => ; +export const Inline = () => ; -export const error = () => ; +export const Error = () => ; -export const reactHook = () => ; +export const ReactHook = () => ; From d52bdfaac73803eb5a6ff17e48a9eda65c579b1e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 Jun 2020 05:41:45 +0800 Subject: [PATCH 2/7] Remove PropsTable --- lib/components/src/blocks/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/components/src/blocks/index.ts b/lib/components/src/blocks/index.ts index 1c17ed6d2374..9866fbd5dbbb 100644 --- a/lib/components/src/blocks/index.ts +++ b/lib/components/src/blocks/index.ts @@ -1,7 +1,6 @@ export * from './Description'; export * from './DocsPage'; export * from './Preview'; -export * from './PropsTable'; export * from './ArgsTable'; export * from './Source'; export * from './Story'; From 5a943f8f84b329507177dc6a2139bf59ae2b8dd9 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 Jun 2020 07:25:01 +0800 Subject: [PATCH 3/7] Finish PropTable removal by creating temporary PropDef type --- .../docs/src/frameworks/angular/compodoc.ts | 3 -- .../src/frameworks/react/extractArgTypes.ts | 6 ++-- .../docs/src/frameworks/react/extractProps.ts | 9 +++-- .../defaultValues/createFromRawDefaultProp.ts | 3 +- .../react/propTypes/handleProp.test.tsx | 8 +++-- .../frameworks/react/propTypes/handleProp.ts | 3 +- .../frameworks/react/propTypes/sortProps.ts | 2 +- .../react/typeScript/handleProp.test.tsx | 8 +++-- .../frameworks/react/typeScript/handleProp.ts | 3 +- addons/docs/src/lib/docgen/PropDef.ts | 33 +++++++++++++++++++ addons/docs/src/lib/docgen/createPropDef.ts | 4 +-- .../docs/src/lib/docgen/extractDocgenProps.ts | 3 +- addons/docs/src/lib/docgen/types.ts | 6 ++-- lib/api/src/version.ts | 2 +- lib/cli/versions.json | 30 ++++++++--------- 15 files changed, 82 insertions(+), 41 deletions(-) create mode 100644 addons/docs/src/lib/docgen/PropDef.ts diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 8810a8a799f2..4298a2e2ed2b 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -1,7 +1,6 @@ /* eslint-disable no-underscore-dangle */ /* global window */ -import { PropDef } from '@storybook/components'; import { ArgType, ArgTypes } from '@storybook/api'; import { logger } from '@storybook/client-logger'; import { @@ -16,8 +15,6 @@ import { Directive, } from './types'; -type Sections = Record; - export const isMethod = (methodOrProp: Method | Property): methodOrProp is Method => { return (methodOrProp as Method).args !== undefined; }; diff --git a/addons/docs/src/frameworks/react/extractArgTypes.ts b/addons/docs/src/frameworks/react/extractArgTypes.ts index fa35147a79ad..925b9d34a70d 100644 --- a/addons/docs/src/frameworks/react/extractArgTypes.ts +++ b/addons/docs/src/frameworks/react/extractArgTypes.ts @@ -1,12 +1,10 @@ -import { PropDef, PropsTableRowsProps } from '@storybook/components'; import { ArgTypes } from '@storybook/api'; -import { ArgTypesExtractor } from '../../lib/docgen'; +import { PropDef, ArgTypesExtractor } from '../../lib/docgen'; import { extractProps } from './extractProps'; export const extractArgTypes: ArgTypesExtractor = (component) => { if (component) { - const props = extractProps(component); - const { rows } = props as PropsTableRowsProps; + const { rows } = extractProps(component); if (rows) { return rows.reduce((acc: ArgTypes, row: PropDef) => { const { type, sbType, defaultValue: defaultSummary, jsDocTags, required } = row; diff --git a/addons/docs/src/frameworks/react/extractProps.ts b/addons/docs/src/frameworks/react/extractProps.ts index e087abbfa380..be03ff06f9ba 100644 --- a/addons/docs/src/frameworks/react/extractProps.ts +++ b/addons/docs/src/frameworks/react/extractProps.ts @@ -1,7 +1,12 @@ import PropTypes from 'prop-types'; import { isForwardRef, isMemo } from 'react-is'; -import { PropDef } from '@storybook/components'; -import { hasDocgen, extractComponentProps, PropsExtractor, TypeSystem } from '../../lib/docgen'; +import { + PropDef, + hasDocgen, + extractComponentProps, + PropsExtractor, + TypeSystem, +} from '../../lib/docgen'; import { Component } from '../../blocks/types'; import { enhancePropTypesProps } from './propTypes/handleProp'; import { enhanceTypeScriptProps } from './typeScript/handleProp'; diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts index e9caa16b9fac..cf20749ff8d6 100644 --- a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts +++ b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts @@ -1,10 +1,11 @@ -import { PropDefaultValue, PropDef } from '@storybook/components'; +import { PropDefaultValue } from '@storybook/components'; import isPlainObject from 'lodash/isPlainObject'; import isFunction from 'lodash/isFunction'; import isString from 'lodash/isString'; // @ts-ignore import reactElementToJSXString from 'react-element-to-jsx-string'; import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib'; +import { PropDef } from '../../../../lib/docgen'; import { inspectValue, InspectionFunction } from '../inspection'; import { generateObject } from './generateObject'; import { generateArray } from './generateArray'; diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx index cd0f24000ac5..39edeb405242 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx @@ -1,10 +1,14 @@ /* eslint-disable no-underscore-dangle */ -import { PropDef } from '@storybook/components'; import PropTypes from 'prop-types'; import React from 'react'; import { Component } from '../../../blocks/types'; -import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen'; +import { + PropDef, + extractComponentProps, + DocgenInfo, + DocgenPropDefaultValue, +} from '../../../lib/docgen'; import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp'; const DOCGEN_SECTION = 'props'; diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.ts index f85b1ccb5605..232c1d0cf89c 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.ts +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.ts @@ -1,5 +1,4 @@ -import { PropDef } from '@storybook/components'; -import { ExtractedProp } from '../../../lib/docgen'; +import { PropDef, ExtractedProp } from '../../../lib/docgen'; import { createType } from './createType'; import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues'; import { Component } from '../../../blocks/types'; diff --git a/addons/docs/src/frameworks/react/propTypes/sortProps.ts b/addons/docs/src/frameworks/react/propTypes/sortProps.ts index b676481edd18..4cc5720a1345 100644 --- a/addons/docs/src/frameworks/react/propTypes/sortProps.ts +++ b/addons/docs/src/frameworks/react/propTypes/sortProps.ts @@ -1,4 +1,4 @@ -import { PropDef } from '@storybook/components'; +import { PropDef } from '../../../lib/docgen'; import { Component } from '../../../blocks/types'; // react-docgen doesn't returned the props in the order they were defined in the "propTypes" object of the component. diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx index 4cbfe60f5345..a2357b7de818 100644 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx +++ b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx @@ -1,9 +1,13 @@ /* eslint-disable no-underscore-dangle */ -import { PropDef } from '@storybook/components'; import React from 'react'; import { Component } from '../../../blocks/types'; -import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen'; +import { + PropDef, + extractComponentProps, + DocgenInfo, + DocgenPropDefaultValue, +} from '../../../lib/docgen'; import { enhanceTypeScriptProp } from './handleProp'; const DOCGEN_SECTION = 'props'; diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.ts b/addons/docs/src/frameworks/react/typeScript/handleProp.ts index a63a4f2e3724..eeecb2db81f0 100644 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.ts +++ b/addons/docs/src/frameworks/react/typeScript/handleProp.ts @@ -1,5 +1,4 @@ -import { PropDef } from '@storybook/components'; -import { ExtractedProp } from '../../../lib/docgen'; +import { PropDef, ExtractedProp } from '../../../lib/docgen'; import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues'; export function enhanceTypeScriptProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef { diff --git a/addons/docs/src/lib/docgen/PropDef.ts b/addons/docs/src/lib/docgen/PropDef.ts new file mode 100644 index 000000000000..b204085397b8 --- /dev/null +++ b/addons/docs/src/lib/docgen/PropDef.ts @@ -0,0 +1,33 @@ +// FIXME: this is legacy code that needs to be updated & simplified with ArgType refactor + +export interface JsDocParam { + name: string; + description?: string; +} + +export interface JsDocReturns { + description?: string; +} + +export interface JsDocTags { + params?: JsDocParam[]; + returns?: JsDocReturns; +} + +export interface PropSummaryValue { + summary: string; + detail?: string; +} + +export type PropType = PropSummaryValue; +export type PropDefaultValue = PropSummaryValue; + +export interface PropDef { + name: string; + type: PropType; + sbType?: any; + required: boolean; + description?: string; + defaultValue?: PropDefaultValue; + jsDocTags?: JsDocTags; +} diff --git a/addons/docs/src/lib/docgen/createPropDef.ts b/addons/docs/src/lib/docgen/createPropDef.ts index 2fb88bd66d78..4e2b1a6bd3c4 100644 --- a/addons/docs/src/lib/docgen/createPropDef.ts +++ b/addons/docs/src/lib/docgen/createPropDef.ts @@ -1,5 +1,5 @@ -import { PropDef, PropDefaultValue } from '@storybook/components'; -import { TypeSystem, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types'; +import { PropDefaultValue } from '@storybook/components'; +import { PropDef, TypeSystem, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types'; import { JsDocParsingResult } from '../jsdocParser'; import { createSummaryValue } from '../utils'; import { createFlowPropDef } from './flow/createPropDef'; diff --git a/addons/docs/src/lib/docgen/extractDocgenProps.ts b/addons/docs/src/lib/docgen/extractDocgenProps.ts index e66468b02b90..099e75f3abd5 100644 --- a/addons/docs/src/lib/docgen/extractDocgenProps.ts +++ b/addons/docs/src/lib/docgen/extractDocgenProps.ts @@ -1,7 +1,6 @@ -import { PropDef } from '@storybook/components'; import { Component } from '../../blocks/types'; import { ExtractedJsDoc, parseJsDoc } from '../jsdocParser'; -import { DocgenInfo, TypeSystem } from './types'; +import { PropDef, DocgenInfo, TypeSystem } from './types'; import { getDocgenSection, isValidDocgenSection, getDocgenDescription } from './utils'; import { getPropDefFactory, PropDefFactory } from './createPropDef'; diff --git a/addons/docs/src/lib/docgen/types.ts b/addons/docs/src/lib/docgen/types.ts index f95a54e84641..f48dd0e3a6e0 100644 --- a/addons/docs/src/lib/docgen/types.ts +++ b/addons/docs/src/lib/docgen/types.ts @@ -1,8 +1,8 @@ -import { PropsTableProps } from '@storybook/components'; import { ArgTypes } from '@storybook/api'; +import { PropDef } from './PropDef'; import { Component } from '../../blocks/types'; -export type PropsExtractor = (component: Component) => PropsTableProps | null; +export type PropsExtractor = (component: Component) => { rows?: PropDef[] } | null; export type ArgTypesExtractor = (component: Component) => ArgTypes | null; @@ -49,3 +49,5 @@ export enum TypeSystem { TYPESCRIPT = 'TypeScript', UNKNOWN = 'Unknown', } + +export { PropDef }; diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts index 1962fbb87428..13111751726a 100644 --- a/lib/api/src/version.ts +++ b/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '6.0.0-beta.22'; +export const version = '6.0.0-beta.23'; diff --git a/lib/cli/versions.json b/lib/cli/versions.json index 12aa22d7684a..484f75880689 100644 --- a/lib/cli/versions.json +++ b/lib/cli/versions.json @@ -1,17 +1,17 @@ { - "@storybook/angular": "6.0.0-beta.22", - "@storybook/aurelia": "6.0.0-beta.22", - "@storybook/ember": "6.0.0-beta.22", - "@storybook/html": "6.0.0-beta.22", - "@storybook/marionette": "6.0.0-beta.22", - "@storybook/marko": "6.0.0-beta.22", - "@storybook/mithril": "6.0.0-beta.22", - "@storybook/preact": "6.0.0-beta.22", - "@storybook/rax": "6.0.0-beta.22", - "@storybook/react": "6.0.0-beta.22", - "@storybook/riot": "6.0.0-beta.22", - "@storybook/server": "6.0.0-beta.22", - "@storybook/svelte": "6.0.0-beta.22", - "@storybook/vue": "6.0.0-beta.22", - "@storybook/web-components": "6.0.0-beta.22" + "@storybook/angular": "6.0.0-beta.23", + "@storybook/aurelia": "6.0.0-beta.23", + "@storybook/ember": "6.0.0-beta.23", + "@storybook/html": "6.0.0-beta.23", + "@storybook/marionette": "6.0.0-beta.23", + "@storybook/marko": "6.0.0-beta.23", + "@storybook/mithril": "6.0.0-beta.23", + "@storybook/preact": "6.0.0-beta.23", + "@storybook/rax": "6.0.0-beta.23", + "@storybook/react": "6.0.0-beta.23", + "@storybook/riot": "6.0.0-beta.23", + "@storybook/server": "6.0.0-beta.23", + "@storybook/svelte": "6.0.0-beta.23", + "@storybook/vue": "6.0.0-beta.23", + "@storybook/web-components": "6.0.0-beta.23" } \ No newline at end of file From d61f7dfd6c3c44cfd6a0351bdcad116b1db2ac1f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 Jun 2020 08:04:36 +0800 Subject: [PATCH 4/7] Fix typo --- lib/components/src/blocks/DocsPage.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx index 15a4c6c56449..d7975e6b9164 100644 --- a/lib/components/src/blocks/DocsPage.stories.tsx +++ b/lib/components/src/blocks/DocsPage.stories.tsx @@ -56,7 +56,7 @@ export const Text = () => ( export const Markdown = () => ( markdown - + From 538f7c9cd606fb833f167d6385750abc62640f81 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 Jun 2020 10:48:58 +0800 Subject: [PATCH 5/7] ArgsTable stories: Respond to review comments --- .../blocks/ArgsTable/ArgsTable.stories.tsx | 22 +++++++----- .../src/blocks/Description.stories.tsx | 4 +-- .../src/blocks/DocsPage.stories.tsx | 36 +++++++++---------- lib/components/src/blocks/Source.stories.tsx | 8 ++--- 4 files changed, 38 insertions(+), 32 deletions(-) diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx index ca62fbcb9558..a2de4239c1bb 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { ArgsTable, ArgsTableError } from './ArgsTable'; -import { stringType, numberType } from './ArgRow.stories'; +import * as ArgRow from './ArgRow.stories'; export default { component: ArgsTable, @@ -10,12 +10,18 @@ export default { const propsSection = { category: 'props ' }; const eventsSection = { category: 'events ' }; -export const Normal = (args) => ; +const stringType = ArgRow.String.args.row; +const numberType = ArgRow.Number.args.row; + +export const Normal = (args = Normal.args) => ; Normal.args = { - rows: { stringType, numberType }, + rows: { + stringType, + numberType, + }, }; -export const Compact = (args) => ; +export const Compact = (args = Compact.args) => ; Compact.args = { ...Normal.args, compact: true, @@ -27,21 +33,21 @@ const sectionRows = { c: { ...stringType, table: { ...stringType.table, ...eventsSection } }, }; -export const Sections = (args) => ; +export const Sections = (args = Sections.args) => ; Sections.args = { rows: sectionRows, }; -export const SectionsCompact = (args) => ; +export const SectionsCompact = (args = SectionsCompact.args) => ; SectionsCompact.args = { ...Sections.args, compact: true, }; -export const Error = (args) => ; +export const Error = (args = Error.args) => ; Error.args = { error: ArgsTableError.NO_COMPONENT, }; -export const Empty = (args) => ; +export const Empty = (args = Empty.args) => ; Empty.args = { rows: {} }; diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx index ed350cc40834..b687e2284c9c 100644 --- a/lib/components/src/blocks/Description.stories.tsx +++ b/lib/components/src/blocks/Description.stories.tsx @@ -10,12 +10,12 @@ export default { const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`; -export const Text = (args) => ; +export const Text = (args = Text.args) => ; Text.args = { markdown: textCaption, }; -export const Markdown = (args) => ; +export const Markdown = (args = Markdown.args) => ; Markdown.args = { markdown: markdownCaption, }; diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx index d7975e6b9164..4d8aa2ea207e 100644 --- a/lib/components/src/blocks/DocsPage.stories.tsx +++ b/lib/components/src/blocks/DocsPage.stories.tsx @@ -19,46 +19,46 @@ export const WithSubtitle = () => ( What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab. - - - - + + + + ); export const Empty = () => ( - - - + + + ); export const NoText = () => ( no text - - - + + + ); export const Text = () => ( Sensorium - - - - + + + + ); export const Markdown = () => ( markdown - - - - + + + + ); diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx index 5af0dfe0710d..8471be8be496 100644 --- a/lib/components/src/blocks/Source.stories.tsx +++ b/lib/components/src/blocks/Source.stories.tsx @@ -12,7 +12,7 @@ const jsxCode = ` `; -export const JSX = (args) => ; +export const JSX = (args = JSX.args) => ; JSX.args = { code: jsxCode, language: 'jsx', @@ -33,20 +33,20 @@ const cssCode = ` } `; -export const CSS = (args) => ; +export const CSS = (args = CSS.args) => ; CSS.args = { code: cssCode, language: 'css', format: false, }; -export const NoStory = (args) => ; +export const NoStory = (args = NoStory.args) => ; NoStory.args = { error: SourceError.NO_STORY, format: false, }; -export const SourceUnavailable = (args) => ; +export const SourceUnavailable = (args = SourceUnavailable.args) => ; SourceUnavailable.args = { error: SourceError.SOURCE_UNAVAILABLE, format: false, From 4aa74d2aeeaf8f8f7833f0a961f9185b8421b6cf Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 Jun 2020 11:22:25 +0800 Subject: [PATCH 6/7] Fix DocsPage stories --- .../blocks/ArgsTable/ArgsTable.stories.tsx | 20 +++++++++++++------ .../src/blocks/Description.stories.tsx | 12 +++++++++-- lib/components/src/blocks/Source.stories.tsx | 14 +++++++++---- 3 files changed, 34 insertions(+), 12 deletions(-) diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx index a2de4239c1bb..074186a45614 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx @@ -13,7 +13,7 @@ const eventsSection = { category: 'events ' }; const stringType = ArgRow.String.args.row; const numberType = ArgRow.Number.args.row; -export const Normal = (args = Normal.args) => ; +export const Normal = (args) => ; Normal.args = { rows: { stringType, @@ -21,7 +21,7 @@ Normal.args = { }, }; -export const Compact = (args = Compact.args) => ; +export const Compact = (args) => ; Compact.args = { ...Normal.args, compact: true, @@ -33,21 +33,29 @@ const sectionRows = { c: { ...stringType, table: { ...stringType.table, ...eventsSection } }, }; -export const Sections = (args = Sections.args) => ; +export const Sections = (args) => ; Sections.args = { rows: sectionRows, }; -export const SectionsCompact = (args = SectionsCompact.args) => ; +export const SectionsCompact = (args) => ; SectionsCompact.args = { ...Sections.args, compact: true, }; -export const Error = (args = Error.args) => ; +export const Error = (args) => ; Error.args = { error: ArgsTableError.NO_COMPONENT, }; -export const Empty = (args = Empty.args) => ; +export const Empty = (args) => ; Empty.args = { rows: {} }; + +// For story-reuse, need a better way to do this +Normal.defaultProps = Normal.args; +Compact.defaultProps = Compact.args; +Sections.defaultProps = Sections.args; +SectionsCompact.defaultProps = SectionsCompact.args; +Error.defaultProps = Error.args; +Empty.defaultProps = Empty.args; diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx index b687e2284c9c..d55e833d24f6 100644 --- a/lib/components/src/blocks/Description.stories.tsx +++ b/lib/components/src/blocks/Description.stories.tsx @@ -10,12 +10,20 @@ export default { const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`; -export const Text = (args = Text.args) => ; +export const Text = (args) => { + console.log({ args }); + return ; +}; Text.args = { markdown: textCaption, }; +Text.defaultProps = Text.args; -export const Markdown = (args = Markdown.args) => ; +export const Markdown = (args) => ; Markdown.args = { markdown: markdownCaption, }; + +// For story-reuse, need a better way to do this +Text.defaultProps = Text.args; +Markdown.defaultProps = Markdown.args; diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx index 8471be8be496..788319497ccb 100644 --- a/lib/components/src/blocks/Source.stories.tsx +++ b/lib/components/src/blocks/Source.stories.tsx @@ -12,7 +12,7 @@ const jsxCode = ` `; -export const JSX = (args = JSX.args) => ; +export const JSX = (args) => ; JSX.args = { code: jsxCode, language: 'jsx', @@ -33,21 +33,27 @@ const cssCode = ` } `; -export const CSS = (args = CSS.args) => ; +export const CSS = (args) => ; CSS.args = { code: cssCode, language: 'css', format: false, }; -export const NoStory = (args = NoStory.args) => ; +export const NoStory = (args) => ; NoStory.args = { error: SourceError.NO_STORY, format: false, }; -export const SourceUnavailable = (args = SourceUnavailable.args) => ; +export const SourceUnavailable = (args) => ; SourceUnavailable.args = { error: SourceError.SOURCE_UNAVAILABLE, format: false, }; + +// For story-reuse, need a better way to do this +JSX.defaultProps = JSX.args; +CSS.defaultProps = CSS.args; +NoStory.defaultProps = NoStory.args; +SourceUnavailable.defaultProps = SourceUnavailable.args; From 51e94df178f40339fc51a10124dfb54e4e7c8193 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 10 Jun 2020 17:35:22 +0800 Subject: [PATCH 7/7] ArgsTable: revert tricky "story reuse" pattern --- .../blocks/ArgsTable/ArgsTable.stories.tsx | 8 ----- .../src/blocks/Description.stories.tsx | 5 --- .../src/blocks/DocsPage.stories.tsx | 33 ++++++++++--------- lib/components/src/blocks/Source.stories.tsx | 6 ---- 4 files changed, 17 insertions(+), 35 deletions(-) diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx index 074186a45614..466994002b9b 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx @@ -51,11 +51,3 @@ Error.args = { export const Empty = (args) => ; Empty.args = { rows: {} }; - -// For story-reuse, need a better way to do this -Normal.defaultProps = Normal.args; -Compact.defaultProps = Compact.args; -Sections.defaultProps = Sections.args; -SectionsCompact.defaultProps = SectionsCompact.args; -Error.defaultProps = Error.args; -Empty.defaultProps = Empty.args; diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx index d55e833d24f6..8d9bf916aba1 100644 --- a/lib/components/src/blocks/Description.stories.tsx +++ b/lib/components/src/blocks/Description.stories.tsx @@ -17,13 +17,8 @@ export const Text = (args) => { Text.args = { markdown: textCaption, }; -Text.defaultProps = Text.args; export const Markdown = (args) => ; Markdown.args = { markdown: markdownCaption, }; - -// For story-reuse, need a better way to do this -Text.defaultProps = Text.args; -Markdown.defaultProps = Markdown.args; diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx index 4d8aa2ea207e..bf4b4d30d596 100644 --- a/lib/components/src/blocks/DocsPage.stories.tsx +++ b/lib/components/src/blocks/DocsPage.stories.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { Title, Subtitle, DocsPageWrapper } from './DocsPage'; +import { ArgsTable, Source, Description } from './index'; import * as Story from './Story.stories'; import * as Preview from './Preview.stories'; -import * as ArgsTable from './ArgsTable/ArgsTable.stories'; -import * as Source from './Source.stories'; -import * as Description from './Description.stories'; +import * as argsTable from './ArgsTable/ArgsTable.stories'; +import * as source from './Source.stories'; +import * as description from './Description.stories'; export default { title: 'Docs/DocsPage', @@ -19,18 +20,18 @@ export const WithSubtitle = () => ( What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab. - + - - + + ); export const Empty = () => ( - - + + ); @@ -38,27 +39,27 @@ export const NoText = () => ( no text - - + + ); export const Text = () => ( Sensorium - + - - + + ); export const Markdown = () => ( markdown - + - - + + ); diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx index 788319497ccb..5af0dfe0710d 100644 --- a/lib/components/src/blocks/Source.stories.tsx +++ b/lib/components/src/blocks/Source.stories.tsx @@ -51,9 +51,3 @@ SourceUnavailable.args = { error: SourceError.SOURCE_UNAVAILABLE, format: false, }; - -// For story-reuse, need a better way to do this -JSX.defaultProps = JSX.args; -CSS.defaultProps = CSS.args; -NoStory.defaultProps = NoStory.args; -SourceUnavailable.defaultProps = SourceUnavailable.args;