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/lib/components/src/blocks/PropsTable/PropDef.ts b/addons/docs/src/lib/docgen/PropDef.ts similarity index 86% rename from lib/components/src/blocks/PropsTable/PropDef.ts rename to addons/docs/src/lib/docgen/PropDef.ts index d81a85334e20..b204085397b8 100644 --- a/lib/components/src/blocks/PropsTable/PropDef.ts +++ b/addons/docs/src/lib/docgen/PropDef.ts @@ -1,3 +1,5 @@ +// FIXME: this is legacy code that needs to be updated & simplified with ArgType refactor + export interface JsDocParam { name: string; description?: string; 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 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..466994002b9b 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,9 +10,22 @@ export default { const propsSection = { category: 'props ' }; const eventsSection = { category: 'events ' }; -export const Normal = () => ; +const stringType = ArgRow.String.args.row; +const numberType = ArgRow.Number.args.row; -export const Compact = () => ; +export const Normal = (args) => ; +Normal.args = { + rows: { + stringType, + numberType, + }, +}; + +export const Compact = (args) => ; +Compact.args = { + ...Normal.args, + compact: true, +}; const sectionRows = { a: { ...stringType, table: { ...stringType.table, ...propsSection } }, @@ -20,10 +33,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..8d9bf916aba1 100644 --- a/lib/components/src/blocks/Description.stories.tsx +++ b/lib/components/src/blocks/Description.stories.tsx @@ -10,6 +10,15 @@ 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) => { + console.log({ args }); + return ; +}; +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..bf4b4d30d596 100644 --- a/lib/components/src/blocks/DocsPage.stories.tsx +++ b/lib/components/src/blocks/DocsPage.stories.tsx @@ -1,74 +1,65 @@ 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 { 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'; 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/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 = () => ; 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';