From e51a5f6cd78f2df5508052e27aa0e9f5afcca96f Mon Sep 17 00:00:00 2001 From: Declan Warn Date: Thu, 25 Mar 2021 15:57:44 +1100 Subject: [PATCH] Major API changes --- .../src/HybridLayout/PropEntry.js | 127 ------------------ .../src/HybridLayout/index.js | 97 ------------- .../pretty-proptypes/src/PrettyProps/index.js | 91 +++++++++++++ packages/pretty-proptypes/src/Prop/index.js | 42 ------ .../pretty-proptypes/src/PropType/index.js | 69 +++++----- .../pretty-proptypes/src/Props/Wrapper.js | 39 ------ packages/pretty-proptypes/src/Props/index.js | 77 ----------- .../src/PropsTable/PropRow.js | 71 ---------- .../pretty-proptypes/src/PropsTable/index.js | 92 ------------- .../src/{Prop => components}/Heading.js | 0 .../pretty-proptypes/src/components/index.js | 4 +- packages/pretty-proptypes/src/index.js | 14 +- .../src/layouts/DefaultLayout.js | 100 ++++++++++++++ .../src/layouts/HybridLayout.js | 127 ++++++++++++++++++ .../src/layouts/TableLayout.js | 42 ++++++ stories/Props.stories.js | 18 ++- stories/layout/Default.stories.js | 30 ++++- stories/layout/Hybrid.stories.js | 24 +++- stories/layout/Table.stories.js | 50 ++++++- 19 files changed, 509 insertions(+), 605 deletions(-) delete mode 100644 packages/pretty-proptypes/src/HybridLayout/PropEntry.js delete mode 100644 packages/pretty-proptypes/src/HybridLayout/index.js create mode 100644 packages/pretty-proptypes/src/PrettyProps/index.js delete mode 100644 packages/pretty-proptypes/src/Prop/index.js delete mode 100644 packages/pretty-proptypes/src/Props/Wrapper.js delete mode 100644 packages/pretty-proptypes/src/Props/index.js delete mode 100644 packages/pretty-proptypes/src/PropsTable/PropRow.js delete mode 100644 packages/pretty-proptypes/src/PropsTable/index.js rename packages/pretty-proptypes/src/{Prop => components}/Heading.js (100%) create mode 100644 packages/pretty-proptypes/src/layouts/DefaultLayout.js create mode 100644 packages/pretty-proptypes/src/layouts/HybridLayout.js create mode 100644 packages/pretty-proptypes/src/layouts/TableLayout.js diff --git a/packages/pretty-proptypes/src/HybridLayout/PropEntry.js b/packages/pretty-proptypes/src/HybridLayout/PropEntry.js deleted file mode 100644 index c0c5761a..00000000 --- a/packages/pretty-proptypes/src/HybridLayout/PropEntry.js +++ /dev/null @@ -1,127 +0,0 @@ -// @flow -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; -import { Fragment, Component, type ComponentType, type Node } from 'react'; -import md from 'react-markings'; -import PrettyPropType from '../PrettyConvert'; -import { HeadingType, HeadingDefault, Heading, HeadingRequired } from '../Prop/Heading'; -import type { CommonProps } from '../types'; -import { colors } from '../components/constants'; - -type PropProps = CommonProps & { - shapeComponent: ComponentType -}; - -export default class PropEntry extends Component { - static defaultProps = { - shapeComponent: (props: CommonProps) => - }; - - render() { - let { shapeComponent: ShapeComponent, ...commonProps } = this.props; - - let { defaultValue, description, name, required, type, components } = commonProps; - - return ( - - - - - - - - - {defaultValue !== undefined && ( - - - - - )} - - - - - -
- - - {name} - - {required && defaultValue === undefined && ( - - required - - )} - -
Description - {description && ( - {md([description])} - )} -
Default - {defaultValue} -
Type - - {type} - - - - -
- - ); - } -} diff --git a/packages/pretty-proptypes/src/HybridLayout/index.js b/packages/pretty-proptypes/src/HybridLayout/index.js deleted file mode 100644 index ebeacbc7..00000000 --- a/packages/pretty-proptypes/src/HybridLayout/index.js +++ /dev/null @@ -1,97 +0,0 @@ -// @flow - -/* eslint-disable no-underscore-dangle */ - -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; -import React, { Component, type ComponentType } from 'react'; - -import type { Components } from '../components'; -import type { CommonProps } from '../types'; -import PropsWrapper from '../Props/Wrapper'; -import getPropTypes from '../getPropTypes'; -import renderPropType from '../PropType'; -import PropEntry from './PropEntry'; - -type Obj = { - kind: 'object', - members: Array -}; - -type Gen = { - kind: 'generic', - value: any -}; - -type Inter = { - kind: 'intersection', - types: Array -}; - -type DynamicPropsProps = { - components?: Components, - heading?: string, - shouldCollapseProps?: boolean, - overrides?: { - [string]: ComponentType - }, - props?: { - component?: Obj | Inter - }, - component?: ComponentType -}; - -const getProps = props => { - if (props && props.component) { - return getPropTypes(props.component); - } - return null; -}; - -export default class HybridLayout extends Component { - render() { - let { props, heading, component, components, ...rest } = this.props; - if (component) { - /* $FlowFixMe the component prop is typed as a component because - that's what people pass to Props and the ___types property shouldn't - exist in the components types so we're just going to ignore this error */ - if (component.___types) { - props = { type: 'program', component: component.___types }; - } else { - /* eslint-disable-next-line no-console */ - console.error( - 'A component was passed to but it does not have types attached.\n' + - 'babel-plugin-extract-react-types may not be correctly installed.\n' + - ' will fallback to the props prop to display types.' - ); - } - } - - if (!components || !components.Description) { - components = components || {}; - components.Description = ({ children }) => ( -
- {children} -
- ); - } - - let propTypes = getProps(props); - if (!propTypes) return null; - - return ( - - {propTypes.map(propType => renderPropType(propType, { ...rest, components }, PropEntry))} - - ); - } -} diff --git a/packages/pretty-proptypes/src/PrettyProps/index.js b/packages/pretty-proptypes/src/PrettyProps/index.js new file mode 100644 index 00000000..d661928a --- /dev/null +++ b/packages/pretty-proptypes/src/PrettyProps/index.js @@ -0,0 +1,91 @@ +// @flow +import React, { ComponentType, ReactNode, FunctionComponent } from 'react'; + +import { CommonProps } from '../types'; + +import getPropTypes from '../getPropTypes'; +import { renderProp, extract } from '../PropType'; + +import { type RawProps } from '../types'; + +import DefaultLayout from '../layouts/DefaultLayout'; + +type Components = {}; + +type LayoutProps = { + components: Components +}; + +type Obj = { + kind: 'object', + members: Array +}; + +type Gen = { + kind: 'generic', + value: any +}; + +type Inter = { + kind: 'intersection', + types: Array +}; + +type DynamicPropsProps = { + components?: Components, + heading?: string, + shouldCollapseProps?: boolean, + overrides?: { + [key: string]: ComponentType + }, + props?: { + component?: Obj | Inter + }, + component?: ComponentType +}; + +// TODO: figure out a better name +export type IPrettyProps = { + Layout: LayoutProps => ReactNode, + props?: RawProps, + component?: ComponentType +}; + +const getProps = (props: RawProps) => { + if (props && props.component) { + return getPropTypes(props.component); + } + return null; +}; + +const PrettyProps: FunctionComponent = ({ + layout: Layout = DefaultLayout, + props, + component +}) => { + let propTypes; + + if (component) { + /* $FlowFixMe the component prop is typed as a component because + that's what people pass to Props and the ___types property shouldn't + exist in the components types so we're just going to ignore this error */ + if (component.___types) { + propTypes = getProps({ type: 'program', component: component.___types }); + } else { + /* eslint-disable-next-line no-console */ + console.error( + 'A component was passed to but it does not have types attached.\n' + + 'babel-plugin-extract-react-types may not be correctly installed.\n' + + ' will fallback to the props prop to display types.' + ); + } + } + + propTypes = propTypes || getProps(props); + + if (!propTypes) return null; + + return propTypes.map(renderProp(Layout)); +}; + +export default PrettyProps; diff --git a/packages/pretty-proptypes/src/Prop/index.js b/packages/pretty-proptypes/src/Prop/index.js deleted file mode 100644 index bf04f598..00000000 --- a/packages/pretty-proptypes/src/Prop/index.js +++ /dev/null @@ -1,42 +0,0 @@ -// @flow -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; -import { Component, type ComponentType, type Node } from 'react'; -import md from 'react-markings'; -import { gridSize } from '../components/constants'; -import PrettyPropType from '../PrettyConvert'; -import PropTypeHeading from './Heading'; -import type { CommonProps } from '../types'; - -const PropTypeWrapper = (props: { children: Node }) => ( -
-); - -type PropProps = CommonProps & { - shapeComponent: ComponentType -}; - -export default class Prop extends Component { - static defaultProps = { - shapeComponent: (props: CommonProps) => - }; - - render() { - let { shapeComponent: ShapeComponent, ...commonProps } = this.props; - - let { defaultValue, description, name, required, type, components } = commonProps; - - return ( - - - {description && {md([description])}} - - - ); - } -} diff --git a/packages/pretty-proptypes/src/PropType/index.js b/packages/pretty-proptypes/src/PropType/index.js index 75011636..c4f58d33 100644 --- a/packages/pretty-proptypes/src/PropType/index.js +++ b/packages/pretty-proptypes/src/PropType/index.js @@ -1,36 +1,45 @@ // @flow +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; /* eslint-disable no-param-reassign */ -import React from 'react'; +import React, { type StatelessFunctionalComponent } from 'react'; import convert, { getKind, reduceToObj } from 'kind2string'; import allComponents from '../components'; +import PrettyPropType from '../PrettyConvert'; -const renderPropType = ( - propType: any, - { overrides = {}, shouldCollapseProps, components }: any, - PropComponent -) => { - if (!components) { - components = allComponents; - } else { - components = { ...allComponents, ...components }; +const getName = propType => (propType.kind === 'spread' ? '...' : convert(propType.key)); +const getIsRequired = propType => !propType.optional; +const getDescription = propType => { + if (propType.leadingComments) { + return propType.leadingComments.reduce((acc, { value }) => acc.concat(`\n${value}`), ''); } +}; + +const getDefaultValue = propType => propType.default && convert(propType.default); + +const extract = propType => ({ + name: getName(propType), + isRequired: getIsRequired(propType), + description: getDescription(propType), + defaultValue: getDefaultValue(propType), + type: getKind(propType.value), + typeValue: propType.value, + components: allComponents +}); + +type PropData = $Diff<$Call, { typeValue: any }>; + +export const renderProp = (Layout: StatelessFunctionalComponent) => propType => { if (propType.kind === 'spread') { const furtherProps = reduceToObj(propType.value); if (Array.isArray(furtherProps) && furtherProps.length > 0) { /* Only render the spread contents if they are a non-empty value, otherwise render the * spread itself so we can see the spread of generics and other types that have not been * converted into an object */ - return furtherProps.map(p => - renderPropType(p, { overrides, shouldCollapseProps, components }) - ); + return furtherProps.map(renderProp(Layout)); } } - let description; - if (propType.leadingComments) { - description = propType.leadingComments.reduce((acc, { value }) => acc.concat(`\n${value}`), ''); - } - if (!propType.value) { // eslint-disable-next-line no-console console.error( @@ -41,25 +50,9 @@ const renderPropType = ( return null; } - const name = propType.kind === 'spread' ? '...' : convert(propType.key); - const OverrideComponent = overrides[name]; - const commonProps = { - components, - name, - key: name, - required: !propType.optional, - type: getKind(propType.value), - defaultValue: propType.default && convert(propType.default), - description, - shouldCollapse: shouldCollapseProps, - typeValue: propType.value - }; + const { typeValue, ...propData } = extract(propType); - return overrides[name] ? ( - - ) : ( - - ); -}; + const TypeShape = ({ shouldCollapse, components }) => ; -export default renderPropType; + return ; +}; diff --git a/packages/pretty-proptypes/src/Props/Wrapper.js b/packages/pretty-proptypes/src/Props/Wrapper.js deleted file mode 100644 index 9d29af09..00000000 --- a/packages/pretty-proptypes/src/Props/Wrapper.js +++ /dev/null @@ -1,39 +0,0 @@ -// @flow -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; -import { type Node } from 'react'; -import { gridSize } from '../components/constants'; - -export const Wrapper = (props: { children: Node }) => ( -
-); - -export const H2 = ({ children, ...rest }: { children: Node }) => ( -

- {children} -

-); - -const PropsWrapper = ({ children, heading }: { children: Node, heading?: string }) => ( - - {typeof heading === 'string' && heading.length === 0 ? null :

{heading || 'Props'}

} - {children} - -); - -export default PropsWrapper; diff --git a/packages/pretty-proptypes/src/Props/index.js b/packages/pretty-proptypes/src/Props/index.js deleted file mode 100644 index e212eb82..00000000 --- a/packages/pretty-proptypes/src/Props/index.js +++ /dev/null @@ -1,77 +0,0 @@ -// @flow - -/* eslint-disable no-underscore-dangle */ - -import React, { Component, type ComponentType } from 'react'; - -import type { Components } from '../components'; -import type { CommonProps } from '../types'; -import PropsWrapper from './Wrapper'; -import getPropTypes from '../getPropTypes'; -import renderPropType from '../PropType'; - -import Prop from '../Prop'; - -type Obj = { - kind: 'object', - members: Array -}; - -type Gen = { - kind: 'generic', - value: any -}; - -type Inter = { - kind: 'intersection', - types: Array -}; - -type DynamicPropsProps = { - components?: Components, - heading?: string, - shouldCollapseProps?: boolean, - overrides?: { - [string]: ComponentType - }, - props?: { - component?: Obj | Inter - }, - component?: ComponentType -}; - -const getProps = props => { - if (props && props.component) { - return getPropTypes(props.component); - } - return null; -}; - -export default class Props extends Component { - render() { - let { props, heading, component, ...rest } = this.props; - if (component) { - /* $FlowFixMe the component prop is typed as a component because - that's what people pass to Props and the ___types property shouldn't - exist in the components types so we're just going to ignore this error */ - if (component.___types) { - props = { type: 'program', component: component.___types }; - } else { - /* eslint-disable-next-line no-console */ - console.error( - 'A component was passed to but it does not have types attached.\n' + - 'babel-plugin-extract-react-types may not be correctly installed.\n' + - ' will fallback to the props prop to display types.' - ); - } - } - let propTypes = getProps(props); - if (!propTypes) return null; - - return ( - - {propTypes.map(propType => renderPropType(propType, rest, Prop))} - - ); - } -} diff --git a/packages/pretty-proptypes/src/PropsTable/PropRow.js b/packages/pretty-proptypes/src/PropsTable/PropRow.js deleted file mode 100644 index 14dcc80f..00000000 --- a/packages/pretty-proptypes/src/PropsTable/PropRow.js +++ /dev/null @@ -1,71 +0,0 @@ -// @flow -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import { Fragment, Component, type ComponentType, type Node } from 'react'; -import md from 'react-markings'; -import PrettyPropType from '../PrettyConvert'; -import { HeadingName, HeadingType, HeadingDefault } from '../Prop/Heading'; -import type { CommonProps } from '../types'; - -type PropProps = CommonProps & { - shapeComponent: ComponentType -}; - -export default class Prop extends Component { - static defaultProps = { - shapeComponent: (props: CommonProps) => - }; - - render() { - let { shapeComponent: ShapeComponent, ...commonProps } = this.props; - - let { defaultValue, description, name, required, type, components } = commonProps; - - return ( - - - td': { - padding: '14px 0px', - } - }}> - - - {name} - - - - - - {type} - - - - - - - - {defaultValue !== undefined && ( - - {defaultValue} - - )} - - - {description && - ( - {md([description])} - ) - } - - - - - ); - } -} - - diff --git a/packages/pretty-proptypes/src/PropsTable/index.js b/packages/pretty-proptypes/src/PropsTable/index.js deleted file mode 100644 index 4e1d08c5..00000000 --- a/packages/pretty-proptypes/src/PropsTable/index.js +++ /dev/null @@ -1,92 +0,0 @@ -// @flow - -/* eslint-disable no-underscore-dangle */ - -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import React, { Component, type ComponentType } from 'react'; - -import type { Components } from '../components'; -import type { CommonProps } from '../types'; -import PropsWrapper from '../Props/Wrapper'; -import getPropTypes from '../getPropTypes'; -import renderPropType from '../PropType'; -import PropRow from './PropRow'; - -type Obj = { - kind: 'object', - members: Array -}; - -type Gen = { - kind: 'generic', - value: any -}; - -type Inter = { - kind: 'intersection', - types: Array -}; - -type DynamicPropsProps = { - components?: Components, - heading?: string, - shouldCollapseProps?: boolean, - overrides?: { - [string]: ComponentType - }, - props?: { - component?: Obj | Inter - }, - component?: ComponentType -}; - -const getProps = props => { - if (props && props.component) { - return getPropTypes(props.component); - } - return null; -}; - -export default class PropsTable extends Component { - render() { - let { props, heading, component, ...rest } = this.props; - if (component) { - /* $FlowFixMe the component prop is typed as a component because - that's what people pass to Props and the ___types property shouldn't - exist in the components types so we're just going to ignore this error */ - if (component.___types) { - props = { type: 'program', component: component.___types }; - } else { - /* eslint-disable-next-line no-console */ - console.error( - 'A component was passed to but it does not have types attached.\n' + - 'babel-plugin-extract-react-types may not be correctly installed.\n' + - ' will fallback to the props prop to display types.' - ); - } - } - let propTypes = getProps(props); - if (!propTypes) return null; - - return ( - - - - - - - - - - - {propTypes.map(propType => renderPropType(propType, rest, PropRow))} -
NameTypeDefaultsDescription
- - ); - } -} diff --git a/packages/pretty-proptypes/src/Prop/Heading.js b/packages/pretty-proptypes/src/components/Heading.js similarity index 100% rename from packages/pretty-proptypes/src/Prop/Heading.js rename to packages/pretty-proptypes/src/components/Heading.js diff --git a/packages/pretty-proptypes/src/components/index.js b/packages/pretty-proptypes/src/components/index.js index 2754c683..8438f511 100644 --- a/packages/pretty-proptypes/src/components/index.js +++ b/packages/pretty-proptypes/src/components/index.js @@ -6,6 +6,7 @@ import Required from './Required'; import Description from './Description'; import Button from './Button'; import Type, { StringType, TypeMeta, FunctionType } from './Type'; +import * as Heading from './Heading'; const components = { Indent, @@ -16,7 +17,8 @@ const components = { TypeMeta, Description, Button, - FunctionType + FunctionType, + ...Heading }; export default components; diff --git a/packages/pretty-proptypes/src/index.js b/packages/pretty-proptypes/src/index.js index de0504d9..1cbc1aa7 100644 --- a/packages/pretty-proptypes/src/index.js +++ b/packages/pretty-proptypes/src/index.js @@ -1,5 +1,11 @@ -export { default as Prop } from './Prop'; -export { default } from './Props'; -export { default as PropsTable } from './PropsTable'; +// @flow + export { default as components } from './components'; -export { default as HybridLayout } from './HybridLayout'; + +export { default as PrettyProps } from './PrettyProps'; + +export { default as PrettyPropType } from './PrettyConvert'; + +export { default as DefaultLayout } from './layouts/DefaultLayout'; +export { default as TableLayout } from './layouts/TableLayout'; +export { default as HybridLayout } from './layouts/HybridLayout'; diff --git a/packages/pretty-proptypes/src/layouts/DefaultLayout.js b/packages/pretty-proptypes/src/layouts/DefaultLayout.js new file mode 100644 index 00000000..bc6b956f --- /dev/null +++ b/packages/pretty-proptypes/src/layouts/DefaultLayout.js @@ -0,0 +1,100 @@ +// @flow +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; +import { Component, type ComponentType, type Node, type StatelessFunctionalComponent } from 'react'; +import md from 'react-markings'; +import { gridSize, colors, borderRadius } from '../components/constants'; +import PrettyPropType from '../PrettyConvert'; +import type { CommonProps } from '../types'; + +export default ({ name, isRequired, description, defaultValue, type, TypeShape, components }) => ( + + + {name} + + {type} + {defaultValue !== undefined && = {defaultValue}} + {isRequired && defaultValue === undefined ? ( + required + ) : null} + + {description && {md([description])}} + + +); + +const Whitespace = () => ' '; + +const Wrapper = ({ children }: { children: Node }) => ( +
+ {children} +
+); + +const Heading = ({ children }: { children: Node }) => ( +

+ {children} +

+); + +const HeadingDefault = ({ children }: { children: Node }) => ( + + {children} + +); + +const HeadingRequired = ({ children }: { children: Node }) => ( + + {children} + +); + +const HeadingType = ({ children }: { children: Node }) => ( + + {children} + +); + +const HeadingName = ({ children }: { children: Node }) => ( + + {children} + +); diff --git a/packages/pretty-proptypes/src/layouts/HybridLayout.js b/packages/pretty-proptypes/src/layouts/HybridLayout.js new file mode 100644 index 00000000..359d816a --- /dev/null +++ b/packages/pretty-proptypes/src/layouts/HybridLayout.js @@ -0,0 +1,127 @@ +// @flow +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; +import { Component, type ComponentType, type Node, type StatelessFunctionalComponent } from 'react'; +import md from 'react-markings'; +import { gridSize, colors, borderRadius } from '../components/constants'; +import PrettyPropType from '../PrettyConvert'; +import type { CommonProps } from '../types'; + +import { + Heading, + HeadingRequired, + HeadingName, + HeadingType, + HeadingDefault +} from '../components/Heading'; + +export default ({ name, isRequired, description, defaultValue, type, TypeShape }) => ( + + + + + + + + {defaultValue !== undefined && ( + + + + + )} + + + + + +
+ + + {name} + + {isRequired && defaultValue === undefined && ( + + required + + )} + +
Description{description && {md([description])}}
Default + {defaultValue} +
Type + + {type} + + + + +
+); + +const Description = ({ children }) => ( +
+ {children} +
+); diff --git a/packages/pretty-proptypes/src/layouts/TableLayout.js b/packages/pretty-proptypes/src/layouts/TableLayout.js new file mode 100644 index 00000000..fbd062b8 --- /dev/null +++ b/packages/pretty-proptypes/src/layouts/TableLayout.js @@ -0,0 +1,42 @@ +// @flow +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; +import { Component, type ComponentType, type Node, type StatelessFunctionalComponent } from 'react'; +import md from 'react-markings'; +import { gridSize, colors, borderRadius } from '../components/constants'; +import PrettyPropType from '../PrettyConvert'; +import type { CommonProps } from '../types'; + +import { HeadingName, HeadingType, HeadingDefault } from '../components/Heading'; + +export default ({ name, isRequired, description, defaultValue, type, TypeShape, components }) => ( + + td': { + padding: '14px 0px' + } + }} + > + + {name} + + + + {type} + + + + + + {defaultValue !== undefined && {defaultValue}} + {description && {md([description])}} + + +); diff --git a/stories/Props.stories.js b/stories/Props.stories.js index c15d93b0..7609134a 100644 --- a/stories/Props.stories.js +++ b/stories/Props.stories.js @@ -1,13 +1,13 @@ // @flow import React from 'react'; -import Props from 'pretty-proptypes'; +import { PrettyProps } from 'pretty-proptypes'; import FlowComponent from './FlowComponent'; import TypeScriptComponent from './TypeScriptComponent'; export default { title: 'Example/Props', - component: Props + component: PrettyProps }; const Template = args => args.component; @@ -15,11 +15,21 @@ const Template = args => args.component; export const Flow = Template.bind({}); Flow.args = { - component: + component: ( + <> +

Primitive types

+ + + ) }; export const TypeScript = Template.bind({}); TypeScript.args = { - component: + component: ( + <> +

Primitive types

+ + + ) }; diff --git a/stories/layout/Default.stories.js b/stories/layout/Default.stories.js index 4b36b82f..2acf3304 100644 --- a/stories/layout/Default.stories.js +++ b/stories/layout/Default.stories.js @@ -1,6 +1,11 @@ +// @flow +/** @jsx jsx */ +import { jsx, css, Global } from '@emotion/core'; +import { type Node } from 'react'; + import React from 'react'; -import Props from 'pretty-proptypes'; +import { PrettyProps } from 'pretty-proptypes'; import TypeScriptComponent from '../TypeScriptComponent'; export default { @@ -10,8 +15,25 @@ export default { const Template = args => args.component; -export const Default = Template.bind({}); +export const Base = Template.bind({}); -Default.args = { - component: +Base.args = { + component: ( + <> +

Primitive types

+ + + ) }; + +export const WithReset = () => ( + <> + +

Primitive types

+ + +); diff --git a/stories/layout/Hybrid.stories.js b/stories/layout/Hybrid.stories.js index ca72c465..6b8be211 100644 --- a/stories/layout/Hybrid.stories.js +++ b/stories/layout/Hybrid.stories.js @@ -1,7 +1,9 @@ +// @flow +/** @jsx jsx */ +import { jsx, css, Global } from '@emotion/core'; import React from 'react'; -import { HybridLayout } from 'pretty-proptypes'; -import { css, Global } from '@emotion/core'; +import { HybridLayout, PrettyProps } from 'pretty-proptypes'; import TypeScriptComponent from '../TypeScriptComponent'; import { colors } from '../../packages/pretty-proptypes/src/components/constants'; @@ -16,7 +18,16 @@ const Template = args => args.component; export const Base = Template.bind({}); Base.args = { - component: + component: ( + <> +

Primitive types

+ + + ) }; export const WithReset = Template.bind({}); @@ -29,7 +40,12 @@ WithReset.args = { @import 'https://unpkg.com/@atlaskit/css-reset@6.0.5/dist/bundle.css'; `} /> - +

Primitive types

+ ) }; diff --git a/stories/layout/Table.stories.js b/stories/layout/Table.stories.js index ab9fb012..eee312a1 100644 --- a/stories/layout/Table.stories.js +++ b/stories/layout/Table.stories.js @@ -1,17 +1,57 @@ +// @flow +/** @jsx jsx */ +import { jsx, css, Global } from '@emotion/core'; import React from 'react'; -import { PropsTable } from 'pretty-proptypes'; +import { TableLayout, PrettyProps } from 'pretty-proptypes'; import TypeScriptComponent from '../TypeScriptComponent'; export default { title: 'Example/Layouts/Table', - component: PropsTable + component: PrettyProps }; const Template = args => args.component; -export const Table = Template.bind({}); +export const Base = Template.bind({}); -Table.args = { - component: +Base.args = { + component: ( + <> +

Primitive types

+ + + + + + + + + + +
NameTypeDefaultsDescription
+ + ) }; + +export const WithReset = () => ( + <> + +

Primitive types

+ + + + + + + + + + +
NameTypeDefaultsDescription
+ +);