From e6e9df2f22de1184e28a543201b5a82cec552d05 Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 20 May 2021 11:46:39 +0300 Subject: [PATCH] docs: update starter example with api --- core/webpack-compile/tests/draft.test.ts | 231 +++++++++++++++--- examples/starter/.config/buildtime.js | 3 +- examples/starter/src/api/sum/index.ts | 1 + examples/starter/src/api/sum/sum.docs.ts | 17 ++ examples/starter/src/api/sum/sum.ts | 7 + .../src/components/Button/Button.docs.tsx | 17 ++ .../src/components/{ => Button}/Button.tsx | 0 .../starter/src/components/Button/index.ts | 1 + .../src/components/Spinner/Spinner.docs.jsx | 16 ++ .../src/components/{ => Spinner}/Spinner.js | 0 .../starter/src/components/Spinner/index.js | 1 + .../external/external-component.docs.tsx} | 2 +- ...irst-story.stories.mdx => first-story.mdx} | 0 .../starter/src/docs/first-story.stories.tsx | 15 -- examples/starter/tsconfig.json | 7 +- 15 files changed, 263 insertions(+), 55 deletions(-) create mode 100644 examples/starter/src/api/sum/index.ts create mode 100644 examples/starter/src/api/sum/sum.docs.ts create mode 100644 examples/starter/src/api/sum/sum.ts create mode 100644 examples/starter/src/components/Button/Button.docs.tsx rename examples/starter/src/components/{ => Button}/Button.tsx (100%) create mode 100644 examples/starter/src/components/Button/index.ts create mode 100644 examples/starter/src/components/Spinner/Spinner.docs.jsx rename examples/starter/src/components/{ => Spinner}/Spinner.js (100%) create mode 100644 examples/starter/src/components/Spinner/index.js rename examples/starter/src/{docs/external-component.stories.tsx => components/external/external-component.docs.tsx} (81%) rename examples/starter/src/docs/{first-story.stories.mdx => first-story.mdx} (100%) delete mode 100644 examples/starter/src/docs/first-story.stories.tsx diff --git a/core/webpack-compile/tests/draft.test.ts b/core/webpack-compile/tests/draft.test.ts index cb1053be9..ceb28fb98 100644 --- a/core/webpack-compile/tests/draft.test.ts +++ b/core/webpack-compile/tests/draft.test.ts @@ -29,16 +29,62 @@ describe('test draft', () => { expect(store1).toMatchObject({ stories: { overview: { + loc: { + start: { + column: 46, + line: 12, + }, + end: { + column: 1, + line: 15, + }, + }, name: 'overview', id: 'overview', - source: '() => ', + arguments: [ + { + value: 'props', + name: 'props', + loc: { + start: { + line: 0, + column: 0, + }, + end: { + line: 0, + column: 5, + }, + }, + usage: [ + { + loc: { + start: { + line: 2, + column: 21, + }, + end: { + line: 2, + column: 26, + }, + }, + }, + ], + }, + ], + source: + 'props => {\n const store = useStore();\n return ;\n}', }, }, doc: { title: 'Library/Components/Button', - order: 2, + order: 1, component: 'Button', + componentsLookup: { + Button: '32c6d3f71db0fda6722d189b0f5ec521', + }, + package: 'd72114b7ae981de6861b0078b15f453e', }, + hash: undefined, }); const store2 = store.stores.find(store => store.doc.title === 'First blog'); @@ -48,7 +94,9 @@ describe('test draft', () => { isMDXComponent: true, type: 'blog', title: 'First blog', + componentsLookup: {}, }, + hash: undefined, }); const store3 = store.stores.find(store => store.doc.title === 'First Page'); expect(store3).toMatchObject({ @@ -130,13 +178,17 @@ describe('test draft', () => { isMDXComponent: true, order: 0, title: 'Library/Components/MDX', + componentsLookup: { + Spinner: '65aa3f665b0cda214f97cbe81c526f01', + }, + package: 'ce8a8a0a3e4b3ec426dcfbb2bd237ae3', }, }); expect(store.components).toMatchObject({ - ef6966a6426a2258b8bb2a8cd8daf14e: { + '65aa3f665b0cda214f97cbe81c526f01': { name: 'Spinner', - from: '../components/Spinner', + from: './Spinner', externalDependencies: { react: [ { @@ -157,6 +209,7 @@ describe('test draft', () => { }, ], }, + localDependencies: {}, importedName: 'Spinner', jsx: [ { @@ -168,6 +221,17 @@ describe('test draft', () => { fileName: 'Spinner.js', source: "import React from 'react';\nimport { lighten } from 'polished';\nimport PropTypes from 'prop-types';\n\n/**\n * Spinner with react PropTypes\n */\nexport const Spinner = ({\n disabled,\n children,\n onClick,\n style,\n backgroundColor,\n color,\n type,\n padding,\n}) => (\n \n {children}\n \n);\n\nSpinner.defaultProps = {\n disabled: false,\n children: 'default',\n onClick: () => {},\n style: {},\n backgroundColor: '#fefefe',\n color: 'black',\n type: 'button',\n padding: 5,\n};\n\nSpinner.propTypes = {\n /**\n * Boolean indicating whether the button should render as disabled\n */\n disabled: PropTypes.bool,\n\n /**\n * button label\n */\n children: PropTypes.string,\n\n /**\n * onClick handler\n */\n onClick: PropTypes.func,\n\n /**\n * Custom styles\n */\n style: PropTypes.shape({}),\n\n /**\n * Background color\n */\n backgroundColor: PropTypes.string,\n\n /**\n * Text color, default black\n */\n color: PropTypes.string,\n\n /**\n * Button type\n */\n type: PropTypes.oneOf(['button', 'reset', 'submit']),\n\n /**\n * Numeric field type\n */\n padding: PropTypes.number,\n};\n", + loc: { + start: { + line: 8, + column: 23, + }, + end: { + line: 31, + column: 1, + }, + }, + package: '65aa3f665b0cda214f97cbe81c526f01', info: { description: 'Spinner with react PropTypes', displayName: 'Spinner', @@ -264,23 +328,11 @@ describe('test draft', () => { todo: 0, blockEmpty: 0, }, - commits: [ - { - hash: '3e9724f3d740da33bd277b03f8a83017159be114', - subject: 'docs: added starter example', - authorName: 'atanasster', - authorDate: '2020-07-19T04:05:43.000Z', - authorEmail: 'atanasster@gmail.com', - committerName: 'atanasster', - committerDate: '2020-07-19T04:05:43.000Z', - committerEmail: 'atanasster@gmail.com', - }, - ], }, }, - '5a3b7658720a0f4b8c0fd61ba5fb8c34': { + '32c6d3f71db0fda6722d189b0f5ec521': { name: 'Button', - from: '../components/Button', + from: './Button', externalDependencies: { react: [ { @@ -305,6 +357,17 @@ describe('test draft', () => { fileName: 'Button.tsx', source: "import React, { FC } from 'react';\n\nexport interface ButtonProps {\n /**\n * Boolean indicating whether the button should render as disabled\n */\n disabled?: boolean;\n\n /**\n * Background color\n */\n backgroundColor?: string;\n\n /**\n * Text color, default black\n */\n color?: string;\n\n /**\n * Numeric field type\n */\n padding?: number;\n\n /**\n * Button type\n */\n type?: 'button' | 'reset' | 'submit';\n\n /**\n * Custom styles\n */\n style?: object;\n /**\n * button label\n */\n children?: string;\n\n /**\n * onClick handler\n */\n onClick?: () => void;\n}\n\n/**\n * Button with react Typescript properties\n */\nexport const Button: FC = ({\n disabled,\n children,\n onClick,\n style,\n backgroundColor,\n color,\n type,\n padding,\n}) => (\n \n {children}\n \n);\n\nButton.defaultProps = {\n disabled: false,\n children: 'default',\n onClick: () => {},\n style: {},\n backgroundColor: '#fefefe',\n color: 'black',\n type: 'button',\n padding: 5,\n};\n", + loc: { + start: { + line: 47, + column: 39, + }, + end: { + line: 70, + column: 1, + }, + }, + package: '32c6d3f71db0fda6722d189b0f5ec521', info: { tags: {}, description: 'Button with react Typescript properties', @@ -417,28 +480,111 @@ describe('test draft', () => { todo: 0, blockEmpty: 0, }, - commits: [ + }, + }, + '98b2111b08fbab8e38c938acaf3e129a': { + name: 'Button', + from: 'theme-ui', + externalDependencies: { + react: [ + { + name: 'React', + importedName: 'namespace', + }, + ], + '@emotion/styled': [ { - hash: 'e9fc88d90f6f9541d8744530b49c8c595fbe7b99', - subject: 'docs: update tutorial stories', - authorName: 'atanasster', - authorDate: '2020-07-20T04:41:19.000Z', - authorEmail: 'atanasster@gmail.com', - committerName: 'atanasster', - committerDate: '2020-07-20T04:41:19.000Z', - committerEmail: 'atanasster@gmail.com', + name: 'StyledComponent', + importedName: 'StyledComponent', }, + ], + '@emotion/react': [ { - hash: '3e9724f3d740da33bd277b03f8a83017159be114', - subject: 'docs: added starter example', - authorName: 'atanasster', - authorDate: '2020-07-19T04:05:43.000Z', - authorEmail: 'atanasster@gmail.com', - committerName: 'atanasster', - committerDate: '2020-07-19T04:05:43.000Z', - committerEmail: 'atanasster@gmail.com', + name: 'Interpolation', + importedName: 'Interpolation', }, ], + 'styled-system': [ + { + name: 'SpaceProps', + importedName: 'SpaceProps', + }, + { + name: 'ColorProps', + importedName: 'ColorProps', + }, + { + name: 'MarginProps', + importedName: 'MarginProps', + }, + ], + '@theme-ui/css': [ + { + name: 'ResponsiveStyleValue', + importedName: 'ResponsiveStyleValue', + }, + { + name: 'ThemeUIStyleObject', + importedName: 'ThemeUIStyleObject', + }, + ], + }, + localDependencies: {}, + importedName: 'Button', + jsx: [], + fileName: 'index.d.ts', + source: + "import * as React from 'react'\nimport { StyledComponent } from '@emotion/styled'\nimport { Interpolation } from '@emotion/react'\nimport { SpaceProps, ColorProps, MarginProps } from 'styled-system'\nimport { ResponsiveStyleValue, ThemeUIStyleObject } from '@theme-ui/css'\n\ntype Omit = Pick>\n\ntype Assign = {\n [P in keyof (T & U)]: P extends keyof T\n ? T[P]\n : P extends keyof U\n ? U[P]\n : never\n}\n\ntype ForwardRef = React.ForwardRefExoticComponent<\n React.PropsWithoutRef

& React.RefAttributes\n>\n\nexport interface BoxOwnProps extends SpaceProps, ColorProps {\n as?: React.ElementType\n variant?: string\n css?: Interpolation\n sx?: ThemeUIStyleObject\n}\nexport interface BoxProps\n extends Assign, BoxOwnProps> {}\n/**\n * Use the Box component as a layout primitive to add margin, padding, and colors to content.\n * @see https://theme-ui.com/components/box\n */\nexport const Box: StyledComponent\n\nexport type FlexOwnProps = BoxOwnProps\nexport type FlexProps = BoxProps\n/**\n * Use the Flex component to create flexbox layouts.\n * @see https://theme-ui.com/components/flex\n */\nexport const Flex: StyledComponent\n\nexport interface GridProps extends BoxProps {\n /**\n * Minimum width of child elements\n */\n width?: ResponsiveStyleValue\n /**\n * \tNumber of columns to use for the layout (cannot be used in conjunction with the width prop)\n */\n columns?: ResponsiveStyleValue\n /**\n * Space between child elements\n */\n gap?: ResponsiveStyleValue\n}\n/**\n * CSS grid layout component to arrange direct child elements in a tiled grid layout.\n * @see https://theme-ui.com/components/grid\n */\nexport const Grid: ForwardRef\n\nexport interface ButtonProps\n extends Assign, BoxOwnProps> {}\n/**\n * Primitive button component with variants\n * @see https://theme-ui.com/components/button\n */\nexport const Button: ForwardRef\n\nexport interface LinkProps\n extends Assign, BoxOwnProps> {}\n/**\n * Link variants can be defined in the `theme.links` object.\n * By default the Link component will use styles defined in `theme.styles.a`.\n * @see https://theme-ui.com/components/link\n */\nexport const Link: ForwardRef\n\nexport type TextProps = BoxProps\n/**\n * Primitive typographic component.\n *\n * Text style variants can be defined in the theme.text object.\n * @see https://theme-ui.com/components/text\n */\nexport const Text: ForwardRef\n\nexport interface ParagraphProps\n extends Assign, BoxOwnProps> {}\n/**\n * Primitive typographic component.\n *\n * Text style variants can be defined in the theme.text object.\n * The Paragraph component uses theme.text.default as its default variant style.\n * @see https://theme-ui.com/components/paragraph\n */\nexport const Paragraph: ForwardRef\n\nexport interface HeadingProps\n extends Assign, BoxOwnProps> {}\n/**\n * Primitive heading component, defaults to

.\n *\n * Text style variants can be defined in the theme.text object.\n * The Heading component uses theme.text.heading as its default variant style.\n * @see https://theme-ui.com/components/heading\n */\nexport const Heading: ForwardRef\n\nexport interface ImageProps\n extends Assign, BoxOwnProps> {}\n/**\n * Image style variants can be defined in the theme.images object.\n * @see https://theme-ui.com/components/image/\n */\nexport const Image: ForwardRef\n\nexport type CardProps = BoxProps\n/**\n * Card style variants can be defined in the `theme.cards` object.\n * By default the Card component uses the `theme.cards.primary` variant.\n * @see https://theme-ui.com/components/card\n */\nexport const Card: ForwardRef\n\nexport interface LabelProps\n extends Assign, BoxOwnProps> {}\n/**\n * Label variants can be defined in `theme.forms`\n * and the component uses the `theme.forms.label` variant by default.\n * @see https://theme-ui.com/components/label/\n */\nexport const Label: ForwardRef\n\nexport interface InputProps\n extends Assign, BoxOwnProps> {}\n/**\n * Input variants can be defined in `theme.forms`\n * and the component uses the `theme.forms.input` variant by default.\n * @see https://theme-ui.com/components/input/\n */\nexport const Input: ForwardRef\n\nexport interface SelectProps\n extends Assign, BoxOwnProps> {\n arrow?: React.ReactElement\n}\n/**\n * Select variants can be defined in `theme.forms`\n * and the component uses the `theme.forms.select` variant by default.\n * @see https://theme-ui.com/components/select/\n */\nexport const Select: ForwardRef\n\nexport interface TextareaProps\n extends Assign, BoxOwnProps> {}\n/**\n * Form textarea component\n *\n * Textarea variants can be defined in `theme.forms`\n * and the component uses the `theme.forms.textarea` variant by default.\n * @see https://theme-ui.com/components/textarea/\n */\nexport const Textarea: ForwardRef\n\nexport interface RadioProps\n extends Assign, BoxOwnProps> {}\n/**\n * Form radio input component\n *\n * Radio variants can be defined in `theme.forms` and the\n * component uses the `theme.forms.radio variant` by default.\n * @see https://theme-ui.com/components/radio/\n */\nexport const Radio: ForwardRef\n\nexport interface CheckboxProps\n extends Assign, BoxOwnProps> {}\n/**\n * Form checkbox input component\n *\n * Checkbox variants can be defined in `theme.forms` and the\n * component uses the `theme.forms.checkbox` variant by default.\n * @see https://theme-ui.com/components/checkbox/\n */\nexport const Checkbox: ForwardRef\n\nexport interface SliderProps\n extends Assign, BoxOwnProps> {}\n/**\n * Range input element\n *\n * Slider variants can be defined in the `theme.forms` object.\n * The Slider component uses `theme.forms.slider` as its default variant style.\n * @see https://theme-ui.com/components/slider/\n */\nexport const Slider: ForwardRef\n\nexport interface FieldOwnProps extends MarginProps {\n /**\n * Text for Label component\n */\n label: string\n /**\n * Used for the for, id, and name attributes\n */\n name: string\n}\nexport type FieldProps = FieldOwnProps &\n Omit, 'as' | keyof FieldOwnProps> & {\n /**\n * form control to render, default Input\n */\n as?: T\n }\n\n// `T` is far from unnecessary. We derive component props from it.\n// tslint:disable-next-line no-unnecessary-generics\nexport function Field<\n T extends React.ElementType = React.ComponentType\n>(props: FieldProps): JSX.Element\n\nexport interface ProgressProps\n extends Assign, BoxOwnProps> {}\n/**\n * @see https://theme-ui.com/components/progress/\n */\nexport const Progress: ForwardRef\n\nexport interface DonutProps\n extends Assign<\n Omit<\n React.ComponentPropsWithRef<'svg'>,\n 'opacity' | 'color' | 'css' | 'sx' | 'max' | 'min'\n >,\n BoxOwnProps\n > {\n value: number\n min?: number\n max?: number\n title?: string\n size?: string | number\n}\n/**\n * Single value SVG donut chart\n * @see https://theme-ui.com/components/donut/\n */\nexport const Donut: ForwardRef\n\nexport interface SpinnerProps\n extends Assign<\n Omit<\n React.ComponentPropsWithRef<'svg'>,\n 'opacity' | 'color' | 'css' | 'sx'\n >,\n BoxOwnProps\n > {\n size?: number | string\n}\nexport const Spinner: ForwardRef\n\nexport interface AvatarProps extends ImageProps {\n size?: number | string\n}\nexport const Avatar: ForwardRef\n\nexport type BadgeProps = BoxProps\nexport const Badge: ForwardRef\n\nexport interface CloseProps extends Omit {}\n/**\n * Button with close (×) icon.\n *\n * The Close component renders as a ; +}; + +export default doc; \ No newline at end of file diff --git a/examples/starter/src/components/Button.tsx b/examples/starter/src/components/Button/Button.tsx similarity index 100% rename from examples/starter/src/components/Button.tsx rename to examples/starter/src/components/Button/Button.tsx diff --git a/examples/starter/src/components/Button/index.ts b/examples/starter/src/components/Button/index.ts new file mode 100644 index 000000000..8b166a86e --- /dev/null +++ b/examples/starter/src/components/Button/index.ts @@ -0,0 +1 @@ +export * from './Button'; diff --git a/examples/starter/src/components/Spinner/Spinner.docs.jsx b/examples/starter/src/components/Spinner/Spinner.docs.jsx new file mode 100644 index 000000000..ca66385f0 --- /dev/null +++ b/examples/starter/src/components/Spinner/Spinner.docs.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { useStore } from '@component-controls/store'; +import { Spinner } from './Spinner'; + +const doc = { + title: 'Library/Components/Spinner', + order: 1, + component: Spinner, +}; + +export const overview = props => { + const store = useStore(); + return {store.config.title}; +}; + +export default doc; diff --git a/examples/starter/src/components/Spinner.js b/examples/starter/src/components/Spinner/Spinner.js similarity index 100% rename from examples/starter/src/components/Spinner.js rename to examples/starter/src/components/Spinner/Spinner.js diff --git a/examples/starter/src/components/Spinner/index.js b/examples/starter/src/components/Spinner/index.js new file mode 100644 index 000000000..b259397be --- /dev/null +++ b/examples/starter/src/components/Spinner/index.js @@ -0,0 +1 @@ +export * from './Spinner'; diff --git a/examples/starter/src/docs/external-component.stories.tsx b/examples/starter/src/components/external/external-component.docs.tsx similarity index 81% rename from examples/starter/src/docs/external-component.stories.tsx rename to examples/starter/src/components/external/external-component.docs.tsx index 59e32448b..985456540 100644 --- a/examples/starter/src/docs/external-component.stories.tsx +++ b/examples/starter/src/components/external/external-component.docs.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button } from 'theme-ui'; export default { - title: 'Library/Components/Button', + title: 'Library/Components/External', order: 2, component: Button, }; diff --git a/examples/starter/src/docs/first-story.stories.mdx b/examples/starter/src/docs/first-story.mdx similarity index 100% rename from examples/starter/src/docs/first-story.stories.mdx rename to examples/starter/src/docs/first-story.mdx diff --git a/examples/starter/src/docs/first-story.stories.tsx b/examples/starter/src/docs/first-story.stories.tsx deleted file mode 100644 index f5b33b196..000000000 --- a/examples/starter/src/docs/first-story.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { useStore } from '@component-controls/store'; -import { Button, ButtonProps } from '../components/Button'; - -export default { - title: 'Library/Components/ESM', - order: 1, -}; - -export const overview = (props: ButtonProps) => { - const store = useStore(); - return ; -}; - -overview.component = Button; diff --git a/examples/starter/tsconfig.json b/examples/starter/tsconfig.json index a32b96596..b03d93f01 100644 --- a/examples/starter/tsconfig.json +++ b/examples/starter/tsconfig.json @@ -16,5 +16,10 @@ "resolveJsonModule": true }, "exclude": ["node_modules", "public", ".cache"], - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + "src/components/Spinner/Spinner.docs.jsx" + ] }