From 4a7858a81fbe16a4ddb60800a234363571146c70 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 9 Dec 2019 23:28:27 -0500 Subject: [PATCH 01/18] typescript inherited prop types --- addons/docs/src/blocks/Props.tsx | 33 ++++++++- .../docs/src/frameworks/react/extractProps.ts | 1 - .../frameworks/react/propTypes/handleProp.ts | 6 +- addons/docs/src/lib/docgen/types.ts | 3 +- .../components/TypescriptButton.tsx | 25 +++++++ examples/official-storybook/main.js | 5 ++ examples/official-storybook/package.json | 3 +- .../addon-docs-typescript.stories.tsx | 11 +++ .../src/blocks/PropsTable/PropDef.ts | 7 ++ .../src/blocks/PropsTable/PropsTable.tsx | 74 +++++++++++-------- .../src/blocks/PropsTable/SectionRow.tsx | 50 +++++++++++-- yarn.lock | 13 ++++ 12 files changed, 189 insertions(+), 42 deletions(-) create mode 100644 examples/official-storybook/components/TypescriptButton.tsx create mode 100644 examples/official-storybook/stories/addon-docs/addon-docs-typescript.stories.tsx diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx index 21a4d573852a..cef3543afcfb 100644 --- a/addons/docs/src/blocks/Props.tsx +++ b/addons/docs/src/blocks/Props.tsx @@ -71,7 +71,38 @@ export const getComponentProps = ( }); } } - + if ((props as PropsTableRowsProps).rows) { + const propSections = (props as PropsTableRowsProps).rows.reduce( + (acc: { [key: string]: PropDef[] }, prop) => { + if (prop.parent && prop.parent.name) { + if (!acc[prop.parent.name]) { + return { ...acc, [prop.parent.name]: [prop] }; + } + return { ...acc, [prop.parent.name]: [...acc[prop.parent.name], prop] }; + } + return acc; + }, + {} + ); + const propSectionsArray = Object.keys(propSections); + if (propSectionsArray.length) { + // the props are with sections (inherited interfaces in typescript) + + // find out what section is the components own props + // by default just use the first listed interface of props + let expanded = propSectionsArray[0]; + if (component.displayName) { + // find all sections that contain the component name + const nameMatch = propSectionsArray.filter( + section => section.indexOf(component.displayName) >= 0 + ); + if (nameMatch.length) { + [expanded] = nameMatch; + } + } + props = { sections: propSections, expanded: [expanded] }; + } + } return props; } catch (err) { return { error: err.message }; diff --git a/addons/docs/src/frameworks/react/extractProps.ts b/addons/docs/src/frameworks/react/extractProps.ts index 20d3032054c6..40f7c378d68e 100644 --- a/addons/docs/src/frameworks/react/extractProps.ts +++ b/addons/docs/src/frameworks/react/extractProps.ts @@ -37,7 +37,6 @@ function getPropDefs(component: Component, section: string): PropDef[] { if (extractedProps.length === 0) { return []; } - switch (extractedProps[0].typeSystem) { case TypeSystem.JAVASCRIPT: return enhancePropTypesProps(extractedProps, component); diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.ts index 819b223cbdbb..f76470f3c1ad 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.ts +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.ts @@ -34,6 +34,11 @@ export function enhancePropTypesProp(extractedProp: ExtractedProp, rawDefaultPro } } + const { parent } = extractedProp.docgenInfo; + if (parent) { + propDef.parent = parent; + } + return propDef; } @@ -45,6 +50,5 @@ export function enhancePropTypesProps( const enhancedProps = extractedProps.map(x => enhancePropTypesProp(x, rawDefaultProps[x.propDef.name]) ); - return keepOriginalDefinitionOrder(enhancedProps, component); } diff --git a/addons/docs/src/lib/docgen/types.ts b/addons/docs/src/lib/docgen/types.ts index b59af2b3ec99..ac1d039f84ff 100644 --- a/addons/docs/src/lib/docgen/types.ts +++ b/addons/docs/src/lib/docgen/types.ts @@ -1,4 +1,4 @@ -import { PropsTableProps } from '@storybook/components'; +import { PropsTableProps, PropParent } from '@storybook/components'; import { Component } from '../../blocks/shared'; export type PropsExtractor = (component: Component) => PropsTableProps | null; @@ -38,6 +38,7 @@ export interface DocgenInfo { required: boolean; description?: string; defaultValue?: DocgenPropDefaultValue; + parent?: PropParent; } export enum TypeSystem { diff --git a/examples/official-storybook/components/TypescriptButton.tsx b/examples/official-storybook/components/TypescriptButton.tsx new file mode 100644 index 000000000000..a539a8bb207d --- /dev/null +++ b/examples/official-storybook/components/TypescriptButton.tsx @@ -0,0 +1,25 @@ +import React, { FC } from 'react'; + +interface ButtonProps { + /** Own ButtonProps label */ + label: string; + + /** Another property */ + property1?: number; +} + +/** Component description imported from comments inside the component file + * This React component has its own properties but also accepts all the html `button` attributes. + */ +export const TypescriptButton: FC = ({ + label, + ...rest +}) => ( + +); + +TypescriptButton.defaultProps = { + label: 'label', +}; diff --git a/examples/official-storybook/main.js b/examples/official-storybook/main.js index 74dadf2bd338..a173076201ba 100644 --- a/examples/official-storybook/main.js +++ b/examples/official-storybook/main.js @@ -66,6 +66,11 @@ module.exports = { ], exclude: [/node_modules/, /dist/], }, + { + test: /\.(ts|tsx)$/, + exclude: [/node_modules/, /dist/, /\.(story|stories).(ts|tsx)$/], + loader: require.resolve('webpack-react-docgen-typescript'), + }, ], }, resolve: { diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 0d21cb204144..16649ea15c85 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -62,6 +62,7 @@ "terser-webpack-plugin": "^2.1.2", "ts-loader": "^6.0.0", "uuid": "^3.3.2", - "webpack": "^4.33.0" + "webpack": "^4.33.0", + "webpack-react-docgen-typescript": "^0.9.5" } } diff --git a/examples/official-storybook/stories/addon-docs/addon-docs-typescript.stories.tsx b/examples/official-storybook/stories/addon-docs/addon-docs-typescript.stories.tsx new file mode 100644 index 000000000000..cd63ddc62991 --- /dev/null +++ b/examples/official-storybook/stories/addon-docs/addon-docs-typescript.stories.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { TypescriptButton } from '../../components/TypescriptButton'; + +export default { + title: `Addons/Docs/typescript`, + component: TypescriptButton, +}; + +export const Basic = () => ; + +export const AnotherStory = () => ; diff --git a/lib/components/src/blocks/PropsTable/PropDef.ts b/lib/components/src/blocks/PropsTable/PropDef.ts index 441f2da2540a..146f12b021c3 100644 --- a/lib/components/src/blocks/PropsTable/PropDef.ts +++ b/lib/components/src/blocks/PropsTable/PropDef.ts @@ -20,6 +20,12 @@ export interface PropSummaryValue { export type PropType = PropSummaryValue; export type PropDefaultValue = PropSummaryValue; +// the parent interface in case of typescript +export interface PropParent { + fileName?: string; + name: string; +} + export interface PropDef { name: string; type: PropType; @@ -27,4 +33,5 @@ export interface PropDef { description?: string; defaultValue?: PropDefaultValue; jsDocTags?: JsDocTags; + parent?: PropParent; } diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index ca2ac3246354..def7325a86b3 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -2,8 +2,8 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; import { opacify, transparentize, darken, lighten } from 'polished'; import { PropRow, PropRowProps } from './PropRow'; -import { SectionRow, SectionRowProps } from './SectionRow'; -import { PropDef, PropType, PropDefaultValue, PropSummaryValue } from './PropDef'; +import { SectionRow, SectionContext } from './SectionRow'; +import { PropDef, PropType, PropDefaultValue, PropSummaryValue, PropParent } from './PropDef'; import { EmptyBlock } from '../EmptyBlock'; import { ResetWrapper } from '../../typography/DocumentFormatting'; @@ -139,6 +139,7 @@ export interface PropsTableRowsProps { export interface PropsTableSectionsProps { sections?: Record; + expanded?: [string]; } export interface PropsTableErrorProps { @@ -147,15 +148,39 @@ export interface PropsTableErrorProps { export type PropsTableProps = PropsTableRowsProps | PropsTableSectionsProps | PropsTableErrorProps; -const PropsTableRow: FC = props => { - const { section } = props as SectionRowProps; - if (section) { - return ; - } +const PropsTableRow: FC = props => { const { row } = props as PropRowProps; return ; }; +interface SectionTableRowProps { + section: string; + rows: PropDef[]; + expanded?: string[]; +} + +const SectionRows: FC = ({ section, rows }) => { + const isExpanded = React.useContext(SectionContext); + if (!isExpanded) { + return null; + } + return ( + <> + {rows.map(row => ( + + ))} + + ); +}; + +const SectionTableRow: FC = ({ section, rows, expanded }) => { + return ( + = 0 : undefined}> + + + ); +}; + /** * 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. @@ -167,26 +192,19 @@ const PropsTable: FC = props => { } let allRows: any[] = []; - const { sections } = props as PropsTableSectionsProps; + const { sections, expanded } = 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 }, - }); - }); - } - }); + allRows = Object.keys(sections).map(section => ( + + )); } else if (rows) { - allRows = rows.map(row => ({ - key: row.name, - value: { row }, - })); + allRows = rows.map(row => ); } if (allRows.length === 0) { @@ -202,14 +220,10 @@ const PropsTable: FC = props => { Default - - {allRows.map(row => ( - - ))} - + {allRows} ); }; -export { PropsTable, PropDef, PropType, PropDefaultValue, PropSummaryValue }; +export { PropsTable, PropDef, PropType, PropDefaultValue, PropSummaryValue, PropParent }; diff --git a/lib/components/src/blocks/PropsTable/SectionRow.tsx b/lib/components/src/blocks/PropsTable/SectionRow.tsx index faebc6651cf8..ae345539d6ce 100644 --- a/lib/components/src/blocks/PropsTable/SectionRow.tsx +++ b/lib/components/src/blocks/PropsTable/SectionRow.tsx @@ -1,14 +1,28 @@ import React, { FC } from 'react'; import { transparentize } from 'polished'; import { styled } from '@storybook/theming'; +import { IconButton } from '../../bar/button'; +import { Icons } from '../../icon/icon'; + +const ExpanderButton = styled(IconButton)<{}>(() => ({ + marginRight: 6, + height: 'auto', + border: 'none', +})); + +const SectionFlexContainer = styled.div<{}>(() => ({ + display: 'flex', + alignItems: 'center', +})); export interface SectionRowProps { section: string; + expanded?: boolean; } -const SectionTh = styled.th<{}>(({ theme }) => ({ +const SectionTh = styled.th<{ expandable?: boolean }>(({ theme, expandable }) => ({ letterSpacing: '0.35em', - textTransform: 'uppercase', + textTransform: expandable ? 'unset' : 'uppercase', fontWeight: theme.typography.weight.black, fontSize: theme.typography.size.s1 - 1, lineHeight: '24px', @@ -19,8 +33,30 @@ const SectionTh = styled.th<{}>(({ theme }) => ({ background: `${theme.background.app} !important`, })); -export const SectionRow: FC = ({ section }) => ( - - {section} - -); +export const SectionContext = React.createContext(true); + +export const SectionRow: FC = ({ section, expanded, children }) => { + const [isExpanded, setIsExpanded] = React.useState(expanded !== undefined ? expanded : true); + const expandable = expanded !== undefined; + return ( + + + + {expandable ? ( + + setIsExpanded(!isExpanded)} + > + {isExpanded ? : } + + {section} + + ) : ( + section + )} + + + {children} + + ); +}; diff --git a/yarn.lock b/yarn.lock index a4a07047f72c..4769ee6d11c8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25434,6 +25434,11 @@ react-docgen-typescript@^1.15.0: resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.15.1.tgz#1648aa422940d9850bc5433c1d179e440d8401f6" integrity sha512-/6yjmJJBqJ1fu721gMrCCF3zu4290S03f/EM75w4ZrjU84Bi/lZ096fARdjSWYCUgIPrwRlwZvziTnXUhjalIw== +react-docgen-typescript@^1.16.1: + version "1.16.1" + resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.16.1.tgz#3c4570601b2e765280adf570a0f344b35111604d" + integrity sha512-r2FyrOa9ynupwKzufHn8IqhWt8aYts3TZz/LWzJGFMyH8AaHQ/Z4LY+fbaI5Gs46DmeyNJvzg2dDELV2k/bL0A== + react-docgen@^5.0.0-beta.1: version "5.0.0-beta.1" resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.0.0-beta.1.tgz#3654ab8f5cb7abacbfc122c1950c45d8e77048da" @@ -32114,6 +32119,14 @@ webpack-merge@^4.2.1: dependencies: lodash "^4.17.15" +webpack-react-docgen-typescript@^0.9.5: + version "0.9.5" + resolved "https://registry.yarnpkg.com/webpack-react-docgen-typescript/-/webpack-react-docgen-typescript-0.9.5.tgz#607835802df47a8b3b93c23bd02f86d22ff1b11e" + integrity sha512-XhSYQWmkS22WkvOdj1WS+NYDs27yZU20kfz4uLED9lFW69oH1ImRpidXF70YhvCcdQYER9YH5/C/8arf8HZfJg== + dependencies: + fs-extra "^8.1.0" + react-docgen-typescript "^1.16.1" + webpack-sources@1.4.3, webpack-sources@^1.0.1, webpack-sources@^1.0.2, webpack-sources@^1.1.0, webpack-sources@^1.2.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3: version "1.4.3" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933" From 0d1b13254a5fa2d54657c6e69f8bdf30e9b15287 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 10 Dec 2019 09:43:09 -0500 Subject: [PATCH 02/18] remove context, simplify code --- .../src/blocks/PropsTable/PropsTable.tsx | 18 +++--------------- .../src/blocks/PropsTable/SectionRow.tsx | 8 +++----- 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index def7325a86b3..ca1eb5f411bf 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; import { opacify, transparentize, darken, lighten } from 'polished'; import { PropRow, PropRowProps } from './PropRow'; -import { SectionRow, SectionContext } from './SectionRow'; +import { SectionRow } from './SectionRow'; import { PropDef, PropType, PropDefaultValue, PropSummaryValue, PropParent } from './PropDef'; import { EmptyBlock } from '../EmptyBlock'; import { ResetWrapper } from '../../typography/DocumentFormatting'; @@ -159,24 +159,12 @@ interface SectionTableRowProps { expanded?: string[]; } -const SectionRows: FC = ({ section, rows }) => { - const isExpanded = React.useContext(SectionContext); - if (!isExpanded) { - return null; - } +const SectionTableRow: FC = ({ section, rows, expanded }) => { return ( - <> + = 0 : undefined}> {rows.map(row => ( ))} - - ); -}; - -const SectionTableRow: FC = ({ section, rows, expanded }) => { - return ( - = 0 : undefined}> - ); }; diff --git a/lib/components/src/blocks/PropsTable/SectionRow.tsx b/lib/components/src/blocks/PropsTable/SectionRow.tsx index ae345539d6ce..a3b27a4549af 100644 --- a/lib/components/src/blocks/PropsTable/SectionRow.tsx +++ b/lib/components/src/blocks/PropsTable/SectionRow.tsx @@ -33,13 +33,11 @@ const SectionTh = styled.th<{ expandable?: boolean }>(({ theme, expandable }) => background: `${theme.background.app} !important`, })); -export const SectionContext = React.createContext(true); - export const SectionRow: FC = ({ section, expanded, children }) => { const [isExpanded, setIsExpanded] = React.useState(expanded !== undefined ? expanded : true); const expandable = expanded !== undefined; return ( - + <> {expandable ? ( @@ -56,7 +54,7 @@ export const SectionRow: FC = ({ section, expanded, children }) )} - {children} - + {(!expandable || isExpanded) && children} + ); }; From 2bb144651152ea6e1a44a37deef37adfdce480b8 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 10 Dec 2019 10:54:27 -0500 Subject: [PATCH 03/18] make sections look like rows --- .../src/blocks/PropsTable/PropRow.tsx | 14 ++++++-- .../src/blocks/PropsTable/PropsTable.tsx | 5 +-- .../src/blocks/PropsTable/SectionRow.tsx | 36 ++++++++++++------- 3 files changed, 38 insertions(+), 17 deletions(-) diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx index 425b1d462983..e0ee34eabb13 100644 --- a/lib/components/src/blocks/PropsTable/PropRow.tsx +++ b/lib/components/src/blocks/PropsTable/PropRow.tsx @@ -10,9 +10,18 @@ import { codeCommon } from '../../typography/shared'; export interface PropRowProps { row: PropDef; + expandable?: boolean; } -const Name = styled.span({ fontWeight: 'bold' }); +const Name = styled.span(({ expandable }) => { + const style = { + fontWeight: 'bold', + }; + if (expandable) { + style.paddingLeft = 20; + } + return style; +}); const Required = styled.span(({ theme }) => ({ color: theme.color.negative, @@ -53,6 +62,7 @@ const TypeWithJsDoc = styled.div<{ hasDescription: boolean }>(({ theme, hasDescr })); export const PropRow: FC = ({ + expandable, row: { name, type, required, description, defaultValue, jsDocTags }, }) => { const hasDescription = !isNil(description) && description !== ''; @@ -60,7 +70,7 @@ export const PropRow: FC = ({ return ( - {name} + {name} {required ? * : null} diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index ca1eb5f411bf..816d52457dda 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -150,7 +150,8 @@ export type PropsTableProps = PropsTableRowsProps | PropsTableSectionsProps | Pr const PropsTableRow: FC = props => { const { row } = props as PropRowProps; - return ; + const { expanded } = props as PropsTableSectionsProps; + return ; }; interface SectionTableRowProps { @@ -163,7 +164,7 @@ const SectionTableRow: FC = ({ section, rows, expanded }) return ( = 0 : undefined}> {rows.map(row => ( - + ))} ); diff --git a/lib/components/src/blocks/PropsTable/SectionRow.tsx b/lib/components/src/blocks/PropsTable/SectionRow.tsx index a3b27a4549af..ba3011048ad6 100644 --- a/lib/components/src/blocks/PropsTable/SectionRow.tsx +++ b/lib/components/src/blocks/PropsTable/SectionRow.tsx @@ -20,18 +20,23 @@ export interface SectionRowProps { expanded?: boolean; } -const SectionTh = styled.th<{ expandable?: boolean }>(({ theme, expandable }) => ({ - letterSpacing: '0.35em', - textTransform: expandable ? 'unset' : '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`, -})); +const SectionTh = styled.th<{ expandable?: boolean }>(({ theme, expandable }) => { + const style = { + letterSpacing: '0.35em', + 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), + }; + if (!expandable) { + style.textTransform = 'uppercase'; + style.background = `${theme.background.app} !important`; + } + return style; +}); export const SectionRow: FC = ({ section, expanded, children }) => { const [isExpanded, setIsExpanded] = React.useState(expanded !== undefined ? expanded : true); @@ -39,7 +44,7 @@ export const SectionRow: FC = ({ section, expanded, children }) return ( <> - + {expandable ? ( = ({ section, expanded, children }) section )} + {expandable && !isExpanded && ( + + {`${children.length} prop${children.length !== 1 ? 's' : ''}`} + + )} {(!expandable || isExpanded) && children} From 6c76c6b5cc098732e421795fc69eb4d7b8fb4d39 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 10 Dec 2019 12:01:07 -0500 Subject: [PATCH 04/18] design changes with dom --- .../src/blocks/PropsTable/CollapsibleRow.tsx | 47 +++++++++++ .../src/blocks/PropsTable/PropRow.tsx | 14 +--- .../src/blocks/PropsTable/PropsTable.tsx | 31 +++++--- .../src/blocks/PropsTable/SectionRow.tsx | 78 ++++--------------- 4 files changed, 86 insertions(+), 84 deletions(-) create mode 100644 lib/components/src/blocks/PropsTable/CollapsibleRow.tsx diff --git a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx new file mode 100644 index 000000000000..5b6a16255a9b --- /dev/null +++ b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx @@ -0,0 +1,47 @@ +import React, { FC } from 'react'; +import { styled } from '@storybook/theming'; +import { IconButton } from '../../bar/button'; +import { Icons } from '../../icon/icon'; + +const ExpanderButton = styled(IconButton)<{}>(() => ({ + marginRight: 6, + height: 'auto', + border: 'none', +})); + +export interface SectionRowProps { + section: string; + expanded?: boolean; +} + +const NameTh = styled.th<{}>(() => ({ + fontWeight: 'bold', + display: 'flex', + alignItems: 'center', +})); + +const Th = styled.th<{}>(() => ({ + fontWeight: 'normal', +})); + +export const CollapsibleRow: FC = ({ section, expanded, children }) => { + const [isExpanded, setIsExpanded] = React.useState(expanded); + return ( + <> + + + setIsExpanded(!isExpanded)} + > + {isExpanded ? : } + + {section} + + {!expanded && Array.isArray(children) && ( + {`${children.length} prop${children.length !== 1 ? 's' : ''}`} + )} + + {isExpanded && children} + + ); +}; diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx index e0ee34eabb13..425b1d462983 100644 --- a/lib/components/src/blocks/PropsTable/PropRow.tsx +++ b/lib/components/src/blocks/PropsTable/PropRow.tsx @@ -10,18 +10,9 @@ import { codeCommon } from '../../typography/shared'; export interface PropRowProps { row: PropDef; - expandable?: boolean; } -const Name = styled.span(({ expandable }) => { - const style = { - fontWeight: 'bold', - }; - if (expandable) { - style.paddingLeft = 20; - } - return style; -}); +const Name = styled.span({ fontWeight: 'bold' }); const Required = styled.span(({ theme }) => ({ color: theme.color.negative, @@ -62,7 +53,6 @@ const TypeWithJsDoc = styled.div<{ hasDescription: boolean }>(({ theme, hasDescr })); export const PropRow: FC = ({ - expandable, row: { name, type, required, description, defaultValue, jsDocTags }, }) => { const hasDescription = !isNil(description) && description !== ''; @@ -70,7 +60,7 @@ export const PropRow: FC = ({ return ( - {name} + {name} {required ? * : null} diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index 816d52457dda..d1607f3bdd30 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -3,11 +3,12 @@ import { styled } from '@storybook/theming'; import { opacify, transparentize, darken, lighten } from 'polished'; import { PropRow, PropRowProps } from './PropRow'; import { SectionRow } from './SectionRow'; +import { CollapsibleRow } from './CollapsibleRow'; import { PropDef, PropType, PropDefaultValue, PropSummaryValue, PropParent } from './PropDef'; import { EmptyBlock } from '../EmptyBlock'; import { ResetWrapper } from '../../typography/DocumentFormatting'; -export const Table = styled.table<{}>(({ theme }) => ({ +export const Table = styled.table<{ expandable: boolean }>(({ theme, expandable }) => ({ '&&': { // Resets for cascading/system styles borderCollapse: 'collapse', @@ -35,7 +36,7 @@ export const Table = styled.table<{}>(({ theme }) => ({ marginBottom: '40px', 'th:first-of-type, td:first-of-type': { - paddingLeft: 20, + paddingLeft: '20px', }, 'th:last-of-type, td:last-of-type': { @@ -60,7 +61,9 @@ export const Table = styled.table<{}>(({ theme }) => ({ td: { paddingTop: '16px', paddingBottom: '16px', - + ':first-of-type': { + paddingLeft: expandable ? '40px' : '20px', + }, '&:not(:first-of-type)': { paddingLeft: 15, paddingRight: 15, @@ -150,8 +153,7 @@ export type PropsTableProps = PropsTableRowsProps | PropsTableSectionsProps | Pr const PropsTableRow: FC = props => { const { row } = props as PropRowProps; - const { expanded } = props as PropsTableSectionsProps; - return ; + return ; }; interface SectionTableRowProps { @@ -161,12 +163,19 @@ interface SectionTableRowProps { } const SectionTableRow: FC = ({ section, rows, expanded }) => { + const rowsNode = rows.map(row => ); + if (expanded) { + return ( + = 0}> + {rowsNode} + + ); + } return ( - = 0 : undefined}> - {rows.map(row => ( - - ))} - + <> + + {rowsNode} + ); }; @@ -201,7 +210,7 @@ const PropsTable: FC = props => { } return ( - +
diff --git a/lib/components/src/blocks/PropsTable/SectionRow.tsx b/lib/components/src/blocks/PropsTable/SectionRow.tsx index ba3011048ad6..faebc6651cf8 100644 --- a/lib/components/src/blocks/PropsTable/SectionRow.tsx +++ b/lib/components/src/blocks/PropsTable/SectionRow.tsx @@ -1,70 +1,26 @@ import React, { FC } from 'react'; import { transparentize } from 'polished'; import { styled } from '@storybook/theming'; -import { IconButton } from '../../bar/button'; -import { Icons } from '../../icon/icon'; - -const ExpanderButton = styled(IconButton)<{}>(() => ({ - marginRight: 6, - height: 'auto', - border: 'none', -})); - -const SectionFlexContainer = styled.div<{}>(() => ({ - display: 'flex', - alignItems: 'center', -})); export interface SectionRowProps { section: string; - expanded?: boolean; } -const SectionTh = styled.th<{ expandable?: boolean }>(({ theme, expandable }) => { - const style = { - letterSpacing: '0.35em', - 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), - }; - if (!expandable) { - style.textTransform = 'uppercase'; - style.background = `${theme.background.app} !important`; - } - return style; -}); +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, expanded, children }) => { - const [isExpanded, setIsExpanded] = React.useState(expanded !== undefined ? expanded : true); - const expandable = expanded !== undefined; - return ( - <> - - - {expandable ? ( - - setIsExpanded(!isExpanded)} - > - {isExpanded ? : } - - {section} - - ) : ( - section - )} - - {expandable && !isExpanded && ( - - {`${children.length} prop${children.length !== 1 ? 's' : ''}`} - - )} - - {(!expandable || isExpanded) && children} - - ); -}; +export const SectionRow: FC = ({ section }) => ( + + {section} + +); From 4f60b20a571665a42ae0fcb700a5cb676b9058f6 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 10 Dec 2019 12:35:06 -0500 Subject: [PATCH 05/18] fixes to row colSpa to style the entire row --- .../src/blocks/PropsTable/CollapsibleRow.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx index 5b6a16255a9b..19bfc100de05 100644 --- a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx +++ b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx @@ -9,9 +9,9 @@ const ExpanderButton = styled(IconButton)<{}>(() => ({ border: 'none', })); -export interface SectionRowProps { +export interface CollapsibleRowProps { section: string; - expanded?: boolean; + expanded: boolean; } const NameTh = styled.th<{}>(() => ({ @@ -24,12 +24,12 @@ const Th = styled.th<{}>(() => ({ fontWeight: 'normal', })); -export const CollapsibleRow: FC = ({ section, expanded, children }) => { +export const CollapsibleRow: FC = ({ section, expanded, children }) => { const [isExpanded, setIsExpanded] = React.useState(expanded); return ( <> - + setIsExpanded(!isExpanded)} > @@ -37,8 +37,8 @@ export const CollapsibleRow: FC = ({ section, expanded, childre {section} - {!expanded && Array.isArray(children) && ( - + {!isExpanded && Array.isArray(children) && ( + )} {isExpanded && children} From cc929c3db17bfffa5cf139650d2914f61ae96666 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 10 Dec 2019 12:38:42 -0500 Subject: [PATCH 06/18] revert file --- addons/docs/src/frameworks/react/extractProps.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/docs/src/frameworks/react/extractProps.ts b/addons/docs/src/frameworks/react/extractProps.ts index 40f7c378d68e..20d3032054c6 100644 --- a/addons/docs/src/frameworks/react/extractProps.ts +++ b/addons/docs/src/frameworks/react/extractProps.ts @@ -37,6 +37,7 @@ function getPropDefs(component: Component, section: string): PropDef[] { if (extractedProps.length === 0) { return []; } + switch (extractedProps[0].typeSystem) { case TypeSystem.JAVASCRIPT: return enhancePropTypesProps(extractedProps, component); From 2c3070623776a0bfffbb321e025173770e97535d Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 10 Dec 2019 12:43:07 -0500 Subject: [PATCH 07/18] cleanup code --- addons/docs/src/frameworks/react/propTypes/handleProp.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.ts b/addons/docs/src/frameworks/react/propTypes/handleProp.ts index f76470f3c1ad..5a519b06643c 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.ts +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.ts @@ -33,11 +33,8 @@ export function enhancePropTypesProp(extractedProp: ExtractedProp, rawDefaultPro propDef.defaultValue = newDefaultValue; } } - - const { parent } = extractedProp.docgenInfo; - if (parent) { - propDef.parent = parent; - } + // typescript information for types inheritance + propDef.parent = extractedProp.docgenInfo.parent; return propDef; } @@ -50,5 +47,6 @@ export function enhancePropTypesProps( const enhancedProps = extractedProps.map(x => enhancePropTypesProp(x, rawDefaultProps[x.propDef.name]) ); + return keepOriginalDefinitionOrder(enhancedProps, component); } From ae01eac52160f5e9517183cbcbaa112af3e85a11 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 10 Dec 2019 14:05:32 -0500 Subject: [PATCH 08/18] optimize not render collapsed rows --- .../src/blocks/PropsTable/CollapsibleRow.tsx | 17 +++++++++------ .../src/blocks/PropsTable/PropsTable.tsx | 21 ++++++++++++++----- 2 files changed, 27 insertions(+), 11 deletions(-) diff --git a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx index 19bfc100de05..ab364f888b6a 100644 --- a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx +++ b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx @@ -12,6 +12,8 @@ const ExpanderButton = styled(IconButton)<{}>(() => ({ export interface CollapsibleRowProps { section: string; expanded: boolean; + children: (isExpanded: boolean) => React.ReactNode; + numRows: number; } const NameTh = styled.th<{}>(() => ({ @@ -24,12 +26,17 @@ const Th = styled.th<{}>(() => ({ fontWeight: 'normal', })); -export const CollapsibleRow: FC = ({ section, expanded, children }) => { +export const CollapsibleRow: FC = ({ + section, + expanded, + numRows, + children, +}) => { const [isExpanded, setIsExpanded] = React.useState(expanded); return ( <> - + setIsExpanded(!isExpanded)} > @@ -37,11 +44,9 @@ export const CollapsibleRow: FC = ({ section, expanded, chi {section} - {!isExpanded && Array.isArray(children) && ( - - )} + - {isExpanded && children} + {children(isExpanded)} ); }; diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index 05914adc04f3..c7ddec008de8 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -156,6 +156,14 @@ const PropsTableRow: FC = props => { return ; }; +const PropsTableRows: FC = ({ section, rows }) => ( + <> + {rows.map(row => ( + + ))} + +); + interface SectionTableRowProps { section: string; rows: PropDef[]; @@ -163,18 +171,21 @@ interface SectionTableRowProps { } const SectionTableRow: FC = ({ section, rows, expanded }) => { - const rowsNode = rows.map(row => ); if (expanded) { return ( - = 0}> - {rowsNode} + = 0} + numRows={rows.length} + > + {isExpanded => isExpanded && } ); } return ( <> - {rowsNode} + ); }; @@ -202,7 +213,7 @@ const PropsTable: FC = props => { /> )); } else if (rows) { - allRows = rows.map(row => ); + allRows = ; } if (allRows.length === 0) { From 952161943b6ff0bba21d77c9d9cd34dfa177ea78 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 10 Dec 2019 14:24:09 -0500 Subject: [PATCH 09/18] CollapsibleRow self-containing with rows as props --- .../src/blocks/PropsTable/CollapsibleRow.tsx | 13 +++----- .../src/blocks/PropsTable/PropRows.tsx | 16 ++++++++++ .../src/blocks/PropsTable/PropsTable.tsx | 32 ++++--------------- 3 files changed, 28 insertions(+), 33 deletions(-) create mode 100644 lib/components/src/blocks/PropsTable/PropRows.tsx diff --git a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx index ab364f888b6a..959f7c76980b 100644 --- a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx +++ b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx @@ -1,5 +1,7 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; +import { PropDef } from './PropDef'; +import { PropRows } from './PropRows'; import { IconButton } from '../../bar/button'; import { Icons } from '../../icon/icon'; @@ -12,7 +14,7 @@ const ExpanderButton = styled(IconButton)<{}>(() => ({ export interface CollapsibleRowProps { section: string; expanded: boolean; - children: (isExpanded: boolean) => React.ReactNode; + rows: PropDef[]; numRows: number; } @@ -26,12 +28,7 @@ const Th = styled.th<{}>(() => ({ fontWeight: 'normal', })); -export const CollapsibleRow: FC = ({ - section, - expanded, - numRows, - children, -}) => { +export const CollapsibleRow: FC = ({ section, expanded, numRows, rows }) => { const [isExpanded, setIsExpanded] = React.useState(expanded); return ( <> @@ -46,7 +43,7 @@ export const CollapsibleRow: FC = ({ - {children(isExpanded)} + {isExpanded && } ); }; diff --git a/lib/components/src/blocks/PropsTable/PropRows.tsx b/lib/components/src/blocks/PropsTable/PropRows.tsx new file mode 100644 index 000000000000..39f8736ed8d3 --- /dev/null +++ b/lib/components/src/blocks/PropsTable/PropRows.tsx @@ -0,0 +1,16 @@ +import React, { FC } from 'react'; +import { PropDef } from './PropDef'; +import { PropRow } from './PropRow'; + +export interface PropRowsProps { + rows: PropDef[]; + section?: string; +} + +export const PropRows: FC = ({ section, rows }) => ( + <> + {rows.map(row => ( + + ))} + +); diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index c7ddec008de8..4ee0bc9fc258 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; import { opacify, transparentize, darken, lighten } from 'polished'; -import { PropRow, PropRowProps } from './PropRow'; +import { PropRows, PropRowsProps } from './PropRows'; import { SectionRow } from './SectionRow'; import { CollapsibleRow } from './CollapsibleRow'; import { PropDef, PropType, PropDefaultValue, PropSummaryValue, PropParent } from './PropDef'; @@ -136,10 +136,6 @@ export enum PropsTableError { PROPS_UNSUPPORTED = 'Props unsupported. See Props documentation for your framework.', } -export interface PropsTableRowsProps { - rows: PropDef[]; -} - export interface PropsTableSectionsProps { sections?: Record; expanded?: [string]; @@ -149,20 +145,7 @@ export interface PropsTableErrorProps { error: PropsTableError; } -export type PropsTableProps = PropsTableRowsProps | PropsTableSectionsProps | PropsTableErrorProps; - -const PropsTableRow: FC = props => { - const { row } = props as PropRowProps; - return ; -}; - -const PropsTableRows: FC = ({ section, rows }) => ( - <> - {rows.map(row => ( - - ))} - -); +export type PropsTableProps = PropRowsProps | PropsTableSectionsProps | PropsTableErrorProps; interface SectionTableRowProps { section: string; @@ -176,16 +159,15 @@ const SectionTableRow: FC = ({ section, rows, expanded }) = 0} + rows={rows} numRows={rows.length} - > - {isExpanded => isExpanded && } - + /> ); } return ( <> - + ); }; @@ -202,7 +184,7 @@ const PropsTable: FC = props => { let allRows: any[] = []; const { sections, expanded } = props as PropsTableSectionsProps; - const { rows } = props as PropsTableRowsProps; + const { rows } = props as PropRowsProps; if (sections) { allRows = Object.keys(sections).map(section => ( = props => { /> )); } else if (rows) { - allRows = ; + allRows = ; } if (allRows.length === 0) { From 6586954216c4bc7a9734ed62adb3cdf2b5698800 Mon Sep 17 00:00:00 2001 From: atanasster Date: Wed, 11 Dec 2019 10:01:11 -0500 Subject: [PATCH 10/18] make SourceCodeProps display first in collapsible --- lib/components/src/blocks/Source.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx index 582801087ed6..f5fdc88a9643 100644 --- a/lib/components/src/blocks/Source.tsx +++ b/lib/components/src/blocks/Source.tsx @@ -37,7 +37,7 @@ interface SourceCodeProps { // FIXME: Using | causes a typescript error, so stubbing it with & for now // and making `error` optional -export type SourceProps = SourceErrorProps & SourceCodeProps; +export type SourceProps = SourceCodeProps & SourceErrorProps; /** * Syntax-highlighted source code for a component (or anything!) From ef957c042c255c15e6641f23f2a309769c95c667 Mon Sep 17 00:00:00 2001 From: atanasster Date: Wed, 11 Dec 2019 15:06:35 -0500 Subject: [PATCH 11/18] default expand sections with 1 row and by name --- addons/docs/src/blocks/Props.tsx | 29 ++++++++++++------- addons/docs/src/lib/docgen/types.ts | 2 +- lib/api/src/version.ts | 2 +- .../src/blocks/PropsTable/PropRow.tsx | 2 +- .../src/blocks/PropsTable/PropsTable.tsx | 20 ++++++++++--- 5 files changed, 38 insertions(+), 17 deletions(-) diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx index cef3543afcfb..2f00c5612507 100644 --- a/addons/docs/src/blocks/Props.tsx +++ b/addons/docs/src/blocks/Props.tsx @@ -5,8 +5,8 @@ import { PropsTable, PropsTableError, PropsTableProps, - PropsTableRowsProps, PropsTableSectionsProps, + PropRowsProps, PropDef, TabsState, } from '@storybook/components'; @@ -46,7 +46,7 @@ export const getComponentProps = ( component: Component, { exclude }: PropsProps, { parameters }: DocsContextProps -): PropsTableProps => { +): PropsTableProps | PropsTableSectionsProps => { if (!component) { return null; } @@ -59,9 +59,9 @@ export const getComponentProps = ( if (!extractProps) { throw new Error(PropsTableError.PROPS_UNSUPPORTED); } - let props = extractProps(component); + let props: PropsTableProps | PropsTableSectionsProps = extractProps(component); if (!isNil(exclude)) { - const { rows } = props as PropsTableRowsProps; + const { rows } = props as PropRowsProps; const { sections } = props as PropsTableSectionsProps; if (rows) { props = { rows: filterRows(rows, exclude) }; @@ -71,9 +71,9 @@ export const getComponentProps = ( }); } } - if ((props as PropsTableRowsProps).rows) { - const propSections = (props as PropsTableRowsProps).rows.reduce( - (acc: { [key: string]: PropDef[] }, prop) => { + if ((props as PropRowsProps).rows) { + const propSections = (props as PropRowsProps).rows.reduce( + (acc: { [key: string]: PropDef[] }, prop: PropDef) => { if (prop.parent && prop.parent.name) { if (!acc[prop.parent.name]) { return { ...acc, [prop.parent.name]: [prop] }; @@ -90,17 +90,26 @@ export const getComponentProps = ( // find out what section is the components own props // by default just use the first listed interface of props - let expanded = propSectionsArray[0]; + let expanded: string[] = [propSectionsArray[0]]; + + // if any section names contain the componnet name, expand them by default if (component.displayName) { // find all sections that contain the component name const nameMatch = propSectionsArray.filter( section => section.indexOf(component.displayName) >= 0 ); + // if (nameMatch.length) { - [expanded] = nameMatch; + expanded = nameMatch; } + // if any section have only 1 prop, expand them by default + propSectionsArray.forEach(section => { + if (propSections[section].length === 1 && expanded.indexOf(section) < 0) { + expanded.push(section); + } + }); } - props = { sections: propSections, expanded: [expanded] }; + props = { sections: propSections, expanded }; } } return props; diff --git a/addons/docs/src/lib/docgen/types.ts b/addons/docs/src/lib/docgen/types.ts index ac1d039f84ff..900a1fd8bb21 100644 --- a/addons/docs/src/lib/docgen/types.ts +++ b/addons/docs/src/lib/docgen/types.ts @@ -1,4 +1,4 @@ -import { PropsTableProps, PropParent } from '@storybook/components'; +import { PropsTableSectionsProps, PropsTableProps, PropParent } from '@storybook/components'; import { Component } from '../../blocks/shared'; export type PropsExtractor = (component: Component) => PropsTableProps | null; diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts index f5777decde65..9b8b82faf11b 100644 --- a/lib/api/src/version.ts +++ b/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '5.3.0-beta.20'; +export const version = '5.3.0-beta.21'; diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx index 83d45fb841eb..c659aafc8b86 100644 --- a/lib/components/src/blocks/PropsTable/PropRow.tsx +++ b/lib/components/src/blocks/PropsTable/PropRow.tsx @@ -60,7 +60,7 @@ export const PropRow: FC = ({ return ( + - setIsExpanded(!isExpanded)} > - {isExpanded ? : } - + Expand + + {isExpanded ? : } {section} - - + + {isExpanded && } ); diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index 62db4ff07a56..f7ba8966a88a 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -65,7 +65,7 @@ export const Table = styled.table<{ expandable: boolean }>(({ theme, expandable paddingTop: '16px', paddingBottom: '16px', ':first-of-type': { - paddingLeft: expandable ? '40px' : '20px', + paddingLeft: expandable ? '45px' : '20px', }, '&:not(:first-of-type)': { paddingLeft: 15, From 666488576bd20fba14e82f6162b856cea2d56fcd Mon Sep 17 00:00:00 2001 From: domyen Date: Fri, 13 Dec 2019 18:20:00 -0500 Subject: [PATCH 15/18] More helpful `title` attr and hidden button text --- .../src/blocks/PropsTable/CollapsibleRow.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx index 53cfce071ee8..c989b8526dc8 100644 --- a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx +++ b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx @@ -73,22 +73,33 @@ const Tr = styled.tr(({ theme }) => ({ export const CollapsibleRow: FC = ({ section, expanded, numRows, rows }) => { const [isExpanded, setIsExpanded] = React.useState(expanded); + + let titleHelperText = `Show ${section}'s ${numRows} prop${numRows !== 1 ? 's' : ''}`; + if (isExpanded) { + titleHelperText = `Hide ${section}'s ${numRows} prop${numRows !== 1 ? 's' : ''}`; + } + return ( <> setIsExpanded(!isExpanded)} + title={titleHelperText} > - Expand + {titleHelperText} + {isExpanded ? : } {section} From 992c98edd70b1bf536bf5ce69f796aad2d82bad5 Mon Sep 17 00:00:00 2001 From: domyen Date: Thu, 23 Jan 2020 15:03:02 -0500 Subject: [PATCH 16/18] PropsTable set width of first column --- lib/components/src/blocks/PropsTable/PropsTable.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index f7ba8966a88a..63167697f483 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -38,8 +38,13 @@ export const Table = styled.table<{ expandable: boolean }>(({ theme, expandable marginTop: 25, marginBottom: 40, + 'thead th:first-of-type': { + width: '30%', + }, + 'th:first-of-type, td:first-of-type': { paddingLeft: '20px', + wordBreak: 'break-all', }, 'th:last-of-type, td:last-of-type': { From 435d785e36f5358146e5fce732e79c79f7e29317 Mon Sep 17 00:00:00 2001 From: domyen Date: Thu, 23 Jan 2020 15:04:47 -0500 Subject: [PATCH 17/18] PropsTable make more compact --- lib/components/src/blocks/PropsTable/CollapsibleRow.tsx | 4 ++-- lib/components/src/blocks/PropsTable/PropsTable.tsx | 4 ++-- lib/components/src/blocks/PropsTable/SectionRow.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx index c989b8526dc8..37197fc453a6 100644 --- a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx +++ b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx @@ -62,8 +62,8 @@ const Th = styled.th(({ theme }) => ({ const Tr = styled.tr(({ theme }) => ({ '&& > th': { - paddingTop: 16, - paddingBottom: 16, + paddingTop: 10, + paddingBottom: 10, }, '&:hover > th': { backgroundColor: theme.background.hoverable, diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index 63167697f483..06394b575e0e 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -67,8 +67,8 @@ export const Table = styled.table<{ expandable: boolean }>(({ theme, expandable }, td: { - paddingTop: '16px', - paddingBottom: '16px', + paddingTop: '10px', + paddingBottom: '10px', ':first-of-type': { paddingLeft: expandable ? '45px' : '20px', }, diff --git a/lib/components/src/blocks/PropsTable/SectionRow.tsx b/lib/components/src/blocks/PropsTable/SectionRow.tsx index faebc6651cf8..f464f31871a2 100644 --- a/lib/components/src/blocks/PropsTable/SectionRow.tsx +++ b/lib/components/src/blocks/PropsTable/SectionRow.tsx @@ -11,7 +11,7 @@ const SectionTh = styled.th<{}>(({ theme }) => ({ textTransform: 'uppercase', fontWeight: theme.typography.weight.black, fontSize: theme.typography.size.s1 - 1, - lineHeight: '24px', + lineHeight: '20px', color: theme.base === 'light' ? transparentize(0.4, theme.color.defaultText) From 01284e6df0bc4243e0826d61b39187bc0799814f Mon Sep 17 00:00:00 2001 From: domyen Date: Thu, 23 Jan 2020 16:09:47 -0500 Subject: [PATCH 18/18] PropsTable set width of first TD column explicitly --- lib/components/src/blocks/PropsTable/PropsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index 06394b575e0e..144f12ba4b69 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -38,7 +38,7 @@ export const Table = styled.table<{ expandable: boolean }>(({ theme, expandable marginTop: 25, marginBottom: 40, - 'thead th:first-of-type': { + 'thead th:first-of-type, td:first-of-type': { width: '30%', },
Name
{`${children.length} prop${children.length !== 1 ? 's' : ''}`}{`${children.length} prop${children.length !== 1 ? 's' : ''}`}
{`${children.length} prop${children.length !== 1 ? 's' : ''}`}{!isExpanded && `${numRows} prop${numRows !== 1 ? 's' : ''}`}
{!isExpanded && `${numRows} prop${numRows !== 1 ? 's' : ''}`}
- {name} + {name} {required ? * : null} diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index 4ee0bc9fc258..a01cbb5cc75a 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -12,6 +12,7 @@ export const Table = styled.table<{ expandable: boolean }>(({ theme, expandable '&&': { // Resets for cascading/system styles borderCollapse: 'collapse', + tableLayout: 'fixed', borderSpacing: 0, color: theme.color.defaultText, tr: { @@ -23,6 +24,9 @@ export const Table = styled.table<{ expandable: boolean }>(({ theme, expandable padding: 0, border: 'none', verticalAlign: 'top', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', }, // End Resets @@ -138,7 +142,7 @@ export enum PropsTableError { export interface PropsTableSectionsProps { sections?: Record; - expanded?: [string]; + expanded?: string[]; } export interface PropsTableErrorProps { @@ -182,7 +186,7 @@ const PropsTable: FC = props => { return {error}; } - let allRows: any[] = []; + let allRows: React.ReactNode[] | React.ReactNode; const { sections, expanded } = props as PropsTableSectionsProps; const { rows } = props as PropRowsProps; if (sections) { @@ -198,7 +202,7 @@ const PropsTable: FC = props => { allRows = ; } - if (allRows.length === 0) { + if (Array.isArray(allRows) && allRows.length === 0) { return No props found for this component; } return ( @@ -217,4 +221,12 @@ const PropsTable: FC = props => { ); }; -export { PropsTable, PropDef, PropType, PropDefaultValue, PropSummaryValue, PropParent }; +export { + PropsTable, + PropDef, + PropType, + PropDefaultValue, + PropSummaryValue, + PropParent, + PropRowsProps, +}; From ad586d435b4c178592cad869868fdd3f3c6fdc24 Mon Sep 17 00:00:00 2001 From: atanasster Date: Wed, 11 Dec 2019 15:08:48 -0500 Subject: [PATCH 12/18] row styling --- lib/components/src/blocks/PropsTable/PropsTable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index a01cbb5cc75a..62db4ff07a56 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -25,7 +25,6 @@ export const Table = styled.table<{ expandable: boolean }>(({ theme, expandable border: 'none', verticalAlign: 'top', overflow: 'hidden', - whiteSpace: 'nowrap', textOverflow: 'ellipsis', }, // End Resets From a8a84d1ba08ebafad1641648db83f856afec6c7f Mon Sep 17 00:00:00 2001 From: atanasster Date: Wed, 11 Dec 2019 18:30:03 -0500 Subject: [PATCH 13/18] limit sections one 1+ --- addons/docs/src/blocks/Props.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx index 2f00c5612507..1604313d839e 100644 --- a/addons/docs/src/blocks/Props.tsx +++ b/addons/docs/src/blocks/Props.tsx @@ -85,7 +85,7 @@ export const getComponentProps = ( {} ); const propSectionsArray = Object.keys(propSections); - if (propSectionsArray.length) { + if (propSectionsArray.length > 1) { // the props are with sections (inherited interfaces in typescript) // find out what section is the components own props From 7ee5c4afeb2492deb9effcc69ed4c9f92e43b4db Mon Sep 17 00:00:00 2001 From: domyen Date: Fri, 13 Dec 2019 18:04:29 -0500 Subject: [PATCH 14/18] Style refinements for collapsible row and indentation --- .../src/blocks/PropsTable/CollapsibleRow.tsx | 77 +++++++++++++++---- .../src/blocks/PropsTable/PropsTable.tsx | 2 +- 2 files changed, 64 insertions(+), 15 deletions(-) diff --git a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx index 959f7c76980b..53cfce071ee8 100644 --- a/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx +++ b/lib/components/src/blocks/PropsTable/CollapsibleRow.tsx @@ -1,16 +1,44 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; +import { transparentize } from 'polished'; +import { relative } from 'path'; import { PropDef } from './PropDef'; import { PropRows } from './PropRows'; -import { IconButton } from '../../bar/button'; import { Icons } from '../../icon/icon'; -const ExpanderButton = styled(IconButton)<{}>(() => ({ - marginRight: 6, - height: 'auto', +const ExpanderIcon = styled(Icons)(({ theme }) => ({ + marginRight: 8, + marginLeft: -10, + marginTop: -2, // optical alignment + height: 12, + width: 12, + color: + theme.base === 'light' + ? transparentize(0.25, theme.color.defaultText) + : transparentize(0.3, theme.color.defaultText), border: 'none', })); +const ClickIntercept = styled.button<{}>(() => ({ + // reset button style + background: 'none', + border: 'none', + padding: '0', + font: 'inherit', + outline: 'inherit', + + // add custom style + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + right: 0, + height: '100%', + width: '100%', + color: 'transparent', + cursor: 'row-resize !important', +})); + export interface CollapsibleRowProps { section: string; expanded: boolean; @@ -18,31 +46,52 @@ export interface CollapsibleRowProps { numRows: number; } -const NameTh = styled.th<{}>(() => ({ - fontWeight: 'bold', +const NameTh = styled.th(({ theme }) => ({ + fontWeight: theme.typography.weight.bold, + color: `${theme.color.defaultText} !important`, // overrides the default th style display: 'flex', alignItems: 'center', + position: 'relative', })); -const Th = styled.th<{}>(() => ({ - fontWeight: 'normal', +const Th = styled.th(({ theme }) => ({ + fontWeight: theme.typography.weight.regular, + color: transparentize(0.2, theme.color.defaultText), + position: 'relative', +})); + +const Tr = styled.tr(({ theme }) => ({ + '&& > th': { + paddingTop: 16, + paddingBottom: 16, + }, + '&:hover > th': { + backgroundColor: theme.background.hoverable, + boxShadow: `${theme.color.mediumlight} 0 - 1px 0 0 inset`, + }, })); export const CollapsibleRow: FC = ({ section, expanded, numRows, rows }) => { const [isExpanded, setIsExpanded] = React.useState(expanded); return ( <> -
{!isExpanded && `${numRows} prop${numRows !== 1 ? 's' : ''}`}
+ setIsExpanded(!isExpanded)} + /> + {!isExpanded && `${numRows} prop${numRows !== 1 ? 's' : ''}`} +
setIsExpanded(!isExpanded)} - /> + title={titleHelperText} + > + {titleHelperText} + {!isExpanded && `${numRows} prop${numRows !== 1 ? 's' : ''}`}