From 8c783f48df15b3a9dd8edd7b03ccde34db4b1ae9 Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 26 Mar 2020 11:16:28 -0400 Subject: [PATCH] feat: update react-docgen-typescript to use props table bock --- .../insert-react-docgen-typescript.ts | 36 +- ui/blocks/README.md | 327 ++++++------------ ui/components/README.md | 246 +++++-------- ui/editors/README.md | 200 ++++------- 4 files changed, 279 insertions(+), 530 deletions(-) diff --git a/scripts/react-docgen-typescript/insert-react-docgen-typescript.ts b/scripts/react-docgen-typescript/insert-react-docgen-typescript.ts index 9abdfbd03..b1e7e514d 100644 --- a/scripts/react-docgen-typescript/insert-react-docgen-typescript.ts +++ b/scripts/react-docgen-typescript/insert-react-docgen-typescript.ts @@ -3,10 +3,11 @@ import remark from 'remark'; import { withDefaultConfig, ComponentDoc, - PropItem, + PropItem as RDPropItem, ParserOptions, } from 'react-docgen-typescript'; -import { Settings, Node, NodeChildren } from '../common/types'; +import { PropItem, createPropsTable } from '../blocks/props-table'; +import { Settings, Node } from '../common/types'; import { extractCustomTag, inlineNewContent, traverseDirs }from '../common/utils'; const propsToMDNodes = (propTable: ComponentDoc, repoFileName: string) => { @@ -37,35 +38,26 @@ const propsToMDNodes = (propTable: ComponentDoc, repoFileName: string) => { ]} ] }); - if (Object.keys(propTable.props).length) { - nodes.push({type: 'paragraph', children: [ {type: 'strong', children: [{ type: 'text', value: 'Properties:' }]} ]}); - const list: NodeChildren = { type: 'list', children: [] } - nodes.push(list); - Object.keys(propTable.props).forEach(propName => { + if (Object.keys(propTable.props).length) { + const props: PropItem[] = Object.keys(propTable.props).map(propName => { const prop = propTable.props[propName]; - const listItem: NodeChildren = { type: 'listItem', children: [] }; - const listItems: Node[] = listItem.children; - list.children.push(listItem); - const propTitle: NodeChildren = {type: 'paragraph', children: [{type: 'strong', children: [{ type: 'text', value: propName }]}]} - listItems.push(propTitle) - propTitle.children.push({ type: 'text', value : `${prop.required ? '' : '?'} : ` }); - propTitle.children.push({ type: 'emphasis', children: [{ type: 'text', value: prop.type.raw || prop.type.name }]}); - remark() - .use(() => (node: Node) => { - if (node.children) { - listItems.push.apply(listItems, [...node.children]); - } - }) - .process(prop.description); + return { + name: propName, + isOptional: !prop.required, + type: [{ type: 'emphasis', children: [{ type: 'text', value: prop.type.raw || prop.type.name }]}], + description: prop.description, + } }); + const { propsTable } = createPropsTable('properties', props); + nodes.push.apply(nodes, propsTable); } return nodes; } export const insertReactDocgenTypescript = (settings: Settings = { path: './src' }) =>{ return (node: Node ) => { const { - propFilter = (prop: PropItem) => { + propFilter = (prop: RDPropItem) => { // Currently not working, prop.parent is always null. if (prop.parent) { return !prop.parent.fileName.includes('node_modules'); diff --git a/ui/blocks/README.md b/ui/blocks/README.md index 17b91ea6b..2297358eb 100644 --- a/ui/blocks/README.md +++ b/ui/blocks/README.md @@ -40,39 +40,19 @@ Optionally also displays some repository information from the component's packag _BlockComponentSource [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/ComponentSource/block/BlockComponentSource.tsx)_ -**Properties:** - -- **of**? : _any_ - - Specify the component(s), for which to have information displayed. - The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). - If an array of components is specified, each component will be displayed in a separate tab. -- **actions**? : _ActionItem\[]_ - - optional actions provided to the component -- **theme**? : _PrismTheme_ - - optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`. -- **language**? : _Language_ - - source lnguage used, by default "jsx". -- **renderFn**? : _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ - - custom function to render the source code. -- **dark**? : _boolean_ - - used to specify a "dark" color theme - applcable only if no custom theme prop is provided. - if dark: true, duotoneDark theme is used. - if dark: false, duotoneLight theme is used. -- **style**? : _any_ - - css styles for the container. -- **as**? : _any_ - - syntax container as element. Can be used as `div` or `span`. -- **title**? : _string_ - - optional section title for the block +### properties + +| Name | Type | Description | +| ---------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `of` | _any_ | Specify the component(s), for which to have information displayed. The default, a value of \`"."\` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. | +| `actions` | _ActionItem\[]_ | optional actions provided to the component | +| `theme` | _PrismTheme_ | optional \`PrismTheme\` theme provided to the component. Themes can be imported from \`prism-react-renderer/themes\`. | +| `language` | _Language_ | source lnguage used, by default "jsx". | +| `renderFn` | _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ | custom function to render the source code. | +| `dark` | _boolean_ | used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used. | +| `style` | _any_ | css styles for the container. | +| `as` | _any_ | syntax container as element. Can be used as \`div\` or \`span\`. | +| `title` | _string_ | optional section title for the block | ## ComponentSource @@ -81,36 +61,18 @@ Optionally also displays some repository information from the component's packag _ComponentSource [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/ComponentSource/plain/ComponentSource.tsx)_ -**Properties:** - -- **of**? : _any_ - - Specify the component(s), for which to have information displayed. - The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). - If an array of components is specified, each component will be displayed in a separate tab. -- **actions**? : _ActionItem\[]_ - - optional actions provided to the component -- **theme**? : _PrismTheme_ - - optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`. -- **language**? : _Language_ - - source lnguage used, by default "jsx". -- **renderFn**? : _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ - - custom function to render the source code. -- **dark**? : _boolean_ - - used to specify a "dark" color theme - applcable only if no custom theme prop is provided. - if dark: true, duotoneDark theme is used. - if dark: false, duotoneLight theme is used. -- **style**? : _any_ +### properties - css styles for the container. -- **as**? : _any_ - - syntax container as element. Can be used as `div` or `span`. +| Name | Type | Description | +| ---------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `of` | _any_ | Specify the component(s), for which to have information displayed. The default, a value of \`"."\` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. | +| `actions` | _ActionItem\[]_ | optional actions provided to the component | +| `theme` | _PrismTheme_ | optional \`PrismTheme\` theme provided to the component. Themes can be imported from \`prism-react-renderer/themes\`. | +| `language` | _Language_ | source lnguage used, by default "jsx". | +| `renderFn` | _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ | custom function to render the source code. | +| `dark` | _boolean_ | used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used. | +| `style` | _any_ | css styles for the container. | +| `as` | _any_ | syntax container as element. Can be used as \`div\` or \`span\`. | ## BlockControlsTable @@ -118,18 +80,13 @@ Table block component to display a story's controls and their editors _BlockControlsTable [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/ControlsTable/block/BlockControlsTable.tsx)_ -**Properties:** - -- **id**? : _string_ - - id of the story -- **name**? : _string_ - - or - name of the story if in an external file - will be used to find the story -- **title**? : _string_ +### properties - optional section title for the block +| Name | Type | Description | +| ------- | -------- | ---------------------------------------------------------------------------- | +| `id` | _string_ | id of the story | +| `name` | _string_ | or - name of the story if in an external file will be used to find the story | +| `title` | _string_ | optional section title for the block | ## ControlsTable @@ -138,15 +95,12 @@ Can adapt to multiple groups of controls, displaying them in their own tabs. _ControlsTable [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/ControlsTable/plain/ControlsTable.tsx)_ -**Properties:** +### properties -- **id**? : _string_ - - id of the story -- **name**? : _string_ - - or - name of the story if in an external file - will be used to find the story +| Name | Type | Description | +| ------ | -------- | ---------------------------------------------------------------------------- | +| `id` | _string_ | id of the story | +| `name` | _string_ | or - name of the story if in an external file will be used to find the story | ## SingleControlsTable @@ -155,20 +109,14 @@ The controls and storyId are already set in priops; _SingleControlsTable [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/ControlsTable/plain/SingleControlsTable.tsx)_ -**Properties:** - -- **controls**? : _ComponentControls_ - - component controls to display in the table. -- **storyId**? : _string_ +### properties - storyId, will be used to update the values of the controls -- **setControlValue**? : _SetControlValueFn_ - - generic function to update the values of component controls. -- **clickControl**? : _ClickControlFn_ - - generic function to propagate a click event for component controls. +| Name | Type | Description | +| ----------------- | ------------------- | ------------------------------------------------------------------- | +| `controls` | _ComponentControls_ | component controls to display in the table. | +| `storyId` | _string_ | storyId, will be used to update the values of the controls | +| `setControlValue` | _SetControlValueFn_ | generic function to update the values of component controls. | +| `clickControl` | _ClickControlFn_ | generic function to propagate a click event for component controls. | ## Description @@ -177,131 +125,68 @@ The 'of' property can specify which component's description to display. _Description [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/Description/Description.tsx)_ -**Properties:** - -- **components**? : _{ \[key: string]: ComponentOverride<any, any>; a?: ComponentOverride<any, any>; br?: ComponentOverride<any, any>; button?: ComponentOverride<any, any>; ... 27 more ...; ul?: ComponentOverride<...>; }_ - - components to customize the markdown display. -- **of**? : _any_ +### properties - Specify the component(s), for which to have information displayed. - The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). - If an array of components is specified, each component will be displayed in a separate tab. +| Name | Type | Description | +| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `components` | _{ \[key: string]: ComponentOverride<any, any>; a?: ComponentOverride<any, any>; br?: ComponentOverride<any, any>; button?: ComponentOverride<any, any>; ... 27 more ...; ul?: ComponentOverride<...>; }_ | components to customize the markdown display. | +| `of` | _any_ | Specify the component(s), for which to have information displayed. The default, a value of \`"."\` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. | ## BlockPropsTable _BlockPropsTable [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/PropsTable/block/BlockPropsTable.tsx)_ -**Properties:** - -- **extraColumns**? : _Column<{}>\[]_ - - extra custom columns passed to the PropsTable. -- **of**? : _any_ - - Specify the component(s), for which to have information displayed. - The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). - If an array of components is specified, each component will be displayed in a separate tab. -- **header**? : _boolean_ - - show or hide the header element. -- **sorting**? : _boolean_ - - enable.disable sorting. -- **filtering**? : _boolean_ - - enable/disable filtering. -- **itemsLabel**? : _string_ - - string label for 'items' - used in the filter placeholder and grouping header. -- **groupBy**? : _string\[]_ - - field to be grouped by. -- **hiddenColumns**? : _string\[]_ - - list of columns to hide. -- **expanded**? : _{ \[key: string]: boolean; }_ - - object listing the initially expanded rows. -- **actions**? : _ActionItem\[]_ - - optional actions provided to the component +### properties + +| Name | Type | Description | +| --------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `extraColumns` | _Column<{}>\[]_ | extra custom columns passed to the PropsTable. | +| `of` | _any_ | Specify the component(s), for which to have information displayed. The default, a value of \`"."\` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. | +| `header` | _boolean_ | show or hide the header element. | +| `sorting` | _boolean_ | enable.disable sorting. | +| `filtering` | _boolean_ | enable/disable filtering. | +| `itemsLabel` | _string_ | string label for 'items' - used in the filter placeholder and grouping header. | +| `groupBy` | _string\[]_ | field to be grouped by. | +| `hiddenColumns` | _string\[]_ | list of columns to hide. | +| `expanded` | _{ \[key: string]: boolean; }_ | object listing the initially expanded rows. | +| `actions` | _ActionItem\[]_ | optional actions provided to the component | ## PropsTable _PropsTable [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/PropsTable/plain/PropsTable.tsx)_ -**Properties:** - -- **extraColumns**? : _Column<{}>\[]_ - - extra custom columns passed to the PropsTable. -- **of**? : _any_ +### properties - Specify the component(s), for which to have information displayed. - The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). - If an array of components is specified, each component will be displayed in a separate tab. -- **header**? : _boolean_ - - show or hide the header element. -- **sorting**? : _boolean_ - - enable.disable sorting. -- **filtering**? : _boolean_ - - enable/disable filtering. -- **itemsLabel**? : _string_ - - string label for 'items' - used in the filter placeholder and grouping header. -- **groupBy**? : _string\[]_ - - field to be grouped by. -- **hiddenColumns**? : _string\[]_ - - list of columns to hide. -- **expanded**? : _{ \[key: string]: boolean; }_ - - object listing the initially expanded rows. +| Name | Type | Description | +| --------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `extraColumns` | _Column<{}>\[]_ | extra custom columns passed to the PropsTable. | +| `of` | _any_ | Specify the component(s), for which to have information displayed. The default, a value of \`"."\` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. | +| `header` | _boolean_ | show or hide the header element. | +| `sorting` | _boolean_ | enable.disable sorting. | +| `filtering` | _boolean_ | enable/disable filtering. | +| `itemsLabel` | _string_ | string label for 'items' - used in the filter placeholder and grouping header. | +| `groupBy` | _string\[]_ | field to be grouped by. | +| `hiddenColumns` | _string\[]_ | list of columns to hide. | +| `expanded` | _{ \[key: string]: boolean; }_ | object listing the initially expanded rows. | ## BlockStorySource _BlockStorySource [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/StorySource/block/BlockStorySource.tsx)_ -**Properties:** - -- **id**? : _string_ - - id of the story -- **name**? : _string_ - - or - name of the story if in an external file - will be used to find the story -- **actions**? : _ActionItem\[]_ - - optional actions provided to the component -- **theme**? : _PrismTheme_ - - optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`. -- **language**? : _Language_ - - source lnguage used, by default "jsx". -- **renderFn**? : _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ - - custom function to render the source code. -- **dark**? : _boolean_ - - used to specify a "dark" color theme - applcable only if no custom theme prop is provided. - if dark: true, duotoneDark theme is used. - if dark: false, duotoneLight theme is used. -- **style**? : _any_ - - css styles for the container. -- **as**? : _any_ - - syntax container as element. Can be used as `div` or `span`. -- **title**? : _string_ - - optional section title for the block +### properties + +| Name | Type | Description | +| ---------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `id` | _string_ | id of the story | +| `name` | _string_ | or - name of the story if in an external file will be used to find the story | +| `actions` | _ActionItem\[]_ | optional actions provided to the component | +| `theme` | _PrismTheme_ | optional \`PrismTheme\` theme provided to the component. Themes can be imported from \`prism-react-renderer/themes\`. | +| `language` | _Language_ | source lnguage used, by default "jsx". | +| `renderFn` | _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ | custom function to render the source code. | +| `dark` | _boolean_ | used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used. | +| `style` | _any_ | css styles for the container. | +| `as` | _any_ | syntax container as element. Can be used as \`div\` or \`span\`. | +| `title` | _string_ | optional section title for the block | ## StorySource @@ -319,19 +204,14 @@ or story.subtitle _Subtitle [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/Subtitle/Subtitle.tsx)_ -**Properties:** - -- **id**? : _string_ - - id of the story -- **name**? : _string_ +### properties - or - name of the story if in an external file - will be used to find the story -- **children**? : _string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)_ - - text to be displayed in the component. -- **ref**? : _((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>_ +| Name | Type | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | +| `id` | _string_ | id of the story | +| `name` | _string_ | or - name of the story if in an external file will be used to find the story | +| `children` | _string \| (string & {}) \| (string & ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)_ | text to be displayed in the component. | +| `ref` | _((instance: HTMLHeadingElement) => void) \| RefObject<HTMLHeadingElement>_ | | ## Title @@ -339,19 +219,14 @@ displays a title as assigned to the story document _Title [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/Title/Title.tsx)_ -**Properties:** - -- **id**? : _string_ - - id of the story -- **name**? : _string_ - - or - name of the story if in an external file - will be used to find the story -- **children**? : _string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)_ +### properties - text to be displayed in the component. -- **ref**? : _((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>_ +| Name | Type | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | +| `id` | _string_ | id of the story | +| `name` | _string_ | or - name of the story if in an external file will be used to find the story | +| `children` | _string \| (string & {}) \| (string & ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)_ | text to be displayed in the component. | +| `ref` | _((instance: HTMLHeadingElement) => void) \| RefObject<HTMLHeadingElement>_ | | ## InvalidType diff --git a/ui/components/README.md b/ui/components/README.md index 64e2076a3..929ba6e7d 100644 --- a/ui/components/README.md +++ b/ui/components/README.md @@ -55,9 +55,11 @@ actions can accept an order prop, and can also be superimposed _ActionBar [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/ActionBar/ActionBar.tsx)_ -**Properties:** +### properties -- **actions**? : _ActionItem\[]_ +| Name | Type | Description | +| --------- | --------------- | ----------- | +| `actions` | _ActionItem\[]_ | | ## ActionContainer @@ -65,14 +67,12 @@ a boxed container with actions. _ActionContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/ActionContainer/ActionContainer.tsx)_ -**Properties:** +### properties -- **actions**? : _ActionItem\[]_ - - optional actions provided to the component -- **paddingTop**? : _string | number_ - - padding at the top, to account for the absolute position of the ActionBar +| Name | Type | Description | +| ------------ | ------------------ | ------------------------------------------------------------------------- | +| `actions` | _ActionItem\[]_ | optional actions provided to the component | +| `paddingTop` | _string \| number_ | padding at the top, to account for the absolute position of the ActionBar | ## BlockContainer @@ -80,11 +80,11 @@ a collapsible block with a title. The title creates also an attribute id and an _BlockContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/BlockContainer/BlockContainer.tsx)_ -**Properties:** - -- **title**? : _string_ +### properties - optional section title for the block +| Name | Type | Description | +| ------- | -------- | ------------------------------------ | +| `title` | _string_ | optional section title for the block | ## Collapsible @@ -92,21 +92,21 @@ Animated expand/collapse container component _Collapsible [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/Collapsible/Collapsible.tsx)_ -**Properties:** - -- **isOpen** : _boolean_ - - controlled open state -- **animateOpacity**? : _boolean_ -- **animationStateClasses**? : _AnimationStateClasses_ -- **applyInlineTransitions**? : _boolean_ -- **contentClassName**? : _string_ -- **delay**? : _number_ -- **duration**? : _number_ -- **easing**? : _string_ -- **height**? : _ReactText_ -- **onAnimationEnd**? : _(props: { newHeight: number; }) => void_ -- **onAnimationStart**? : _(props: { newHeight: number; }) => void_ +### properties + +| Name | Type | Description | +| ------------------------ | ----------------------------------------- | --------------------- | +| `isOpen*` | _boolean_ | controlled open state | +| `animateOpacity` | _boolean_ | | +| `animationStateClasses` | _AnimationStateClasses_ | | +| `applyInlineTransitions` | _boolean_ | | +| `contentClassName` | _string_ | | +| `delay` | _number_ | | +| `duration` | _number_ | | +| `easing` | _string_ | | +| `height` | _ReactText_ | | +| `onAnimationEnd` | _(props: { newHeight: number; }) => void_ | | +| `onAnimationStart` | _(props: { newHeight: number; }) => void_ | | ## ExternalLink @@ -115,37 +115,27 @@ adds the default `target="_blank" rel="noopener noreferrer"` props _ExternalLink [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/ExternalLink/ExternalLink.tsx)_ -**Properties:** - -- **download**? : _any_ - - specifies that the target will be downloaded when a user clicks on the hyperlink. -- **href**? : _string_ - - specifies the URL of the page the link goes to. -- **hrefLang**? : _string_ - - specifies the language of the linked document. -- **media**? : _string_ - - specifies what media/device the linked document is optimized for. -- **ping**? : _string_ - - specifies a list of URLs to be notified if the user follows the hyperlink. -- **type**? : _string_ +### properties - specifies the media type of the linked document. -- **referrerPolicy**? : _"no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "unsafe-url"_ - - specifies which referrer to send. +| Name | Type | Description | +| ---------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | +| `download` | _any_ | specifies that the target will be downloaded when a user clicks on the hyperlink. | +| `href` | _string_ | specifies the URL of the page the link goes to. | +| `hrefLang` | _string_ | specifies the language of the linked document. | +| `media` | _string_ | specifies what media/device the linked document is optimized for. | +| `ping` | _string_ | specifies a list of URLs to be notified if the user follows the hyperlink. | +| `type` | _string_ | specifies the media type of the linked document. | +| `referrerPolicy` | _"no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "unsafe-url"_ | specifies which referrer to send. | ## FlexContainer _FlexContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/FlexContainer/FlexContainer.tsx)_ -**Properties:** +### properties -- **align**? : _string_ +| Name | Type | Description | +| ------- | -------- | ----------- | +| `align` | _string_ | | ## Markdown @@ -154,14 +144,12 @@ Uses `markdown-to-jsx` to compile the markdown. _Markdown [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/Markdown/Markdown.tsx)_ -**Properties:** - -- **children** : _string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)_ - - the markdown source code is passed as a children pro. -- **components**? : _{ \[key: string]: ComponentOverride<any, any>; a?: ComponentOverride<any, any>; br?: ComponentOverride<any, any>; button?: ComponentOverride<any, any>; ... 27 more ...; ul?: ComponentOverride<...>; }_ +### properties - components to customize the markdown display. +| Name | Type | Description | +| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | +| `children*` | _string \| (string & {}) \| (string & ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)_ | the markdown source code is passed as a children pro. | +| `components` | _{ \[key: string]: ComponentOverride<any, any>; a?: ComponentOverride<any, any>; br?: ComponentOverride<any, any>; button?: ComponentOverride<any, any>; ... 27 more ...; ul?: ComponentOverride<...>; }_ | components to customize the markdown display. | ## Popover @@ -176,34 +164,18 @@ Syntax highliting source code component. Uses [prism](https://prismjs.com) for t _Source [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/Source/Source.tsx)_ -**Properties:** - -- **actions**? : _ActionItem\[]_ - - optional actions provided to the component -- **children**? : _string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)_ - - source code to be displayed. -- **theme**? : _PrismTheme_ - - optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`. -- **language**? : _Language_ - - source lnguage used, by default "jsx". -- **renderFn**? : _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ - - custom function to render the source code. -- **dark**? : _boolean_ - - used to specify a "dark" color theme - applcable only if no custom theme prop is provided. - if dark: true, duotoneDark theme is used. - if dark: false, duotoneLight theme is used. -- **style**? : _any_ +### properties - css styles for the container. -- **as**? : _any_ - - syntax container as element. Can be used as `div` or `span`. +| Name | Type | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `actions` | _ActionItem\[]_ | optional actions provided to the component | +| `children` | _string \| (string & {}) \| (string & ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)_ | source code to be displayed. | +| `theme` | _PrismTheme_ | optional \`PrismTheme\` theme provided to the component. Themes can be imported from \`prism-react-renderer/themes\`. | +| `language` | _Language_ | source lnguage used, by default "jsx". | +| `renderFn` | _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ | custom function to render the source code. | +| `dark` | _boolean_ | used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used. | +| `style` | _any_ | css styles for the container. | +| `as` | _any_ | syntax container as element. Can be used as \`div\` or \`span\`. | ## Subtitle @@ -211,12 +183,12 @@ _Source [source code](https:/github.com/ccontrols/component-controls/tree/master _Subtitle [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/Subtitle/Subtitle.tsx)_ -**Properties:** - -- **children**? : _string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)_ +### properties - text to be displayed in the component. -- **ref**? : _((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>_ +| Name | Type | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------- | +| `children` | _string \| (string & {}) \| (string & ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)_ | text to be displayed in the component. | +| `ref` | _((instance: HTMLHeadingElement) => void) \| RefObject<HTMLHeadingElement>_ | | ## SyntaxHighlighter @@ -224,31 +196,17 @@ Syntax highlighter component. Uses [prism](https://prismjs.com) for the actual s _SyntaxHighlighter [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx)_ -**Properties:** - -- **children**? : _string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)_ - - source code to be displayed. -- **theme**? : _PrismTheme_ - - optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`. -- **language**? : _Language_ +### properties - source lnguage used, by default "jsx". -- **renderFn**? : _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ - - custom function to render the source code. -- **dark**? : _boolean_ - - used to specify a "dark" color theme - applcable only if no custom theme prop is provided. - if dark: true, duotoneDark theme is used. - if dark: false, duotoneLight theme is used. -- **style**? : _any_ - - css styles for the container. -- **as**? : _any_ - - syntax container as element. Can be used as `div` or `span`. +| Name | Type | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `children` | _string \| (string & {}) \| (string & ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)_ | source code to be displayed. | +| `theme` | _PrismTheme_ | optional \`PrismTheme\` theme provided to the component. Themes can be imported from \`prism-react-renderer/themes\`. | +| `language` | _Language_ | source lnguage used, by default "jsx". | +| `renderFn` | _(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode_ | custom function to render the source code. | +| `dark` | _boolean_ | used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used. | +| `style` | _any_ | css styles for the container. | +| `as` | _any_ | syntax container as element. Can be used as \`div\` or \`span\`. | ## Table @@ -257,35 +215,19 @@ Can be grouped, filtered, sorted. Themed with theme-ui for consistency. _Table [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/Table/Table.tsx)_ -**Properties:** - -- **columns** : _Column<{}>\[]_ +### properties - the colmns object as an array. -- **data**? : _any\[]_ - - array of data rows. -- **header**? : _boolean_ - - show or hide the header element. -- **sorting**? : _boolean_ - - enable.disable sorting. -- **filtering**? : _boolean_ - - enable/disable filtering. -- **itemsLabel**? : _string_ - - string label for 'items' - used in the filter placeholder and grouping header. -- **groupBy**? : _string\[]_ - - field to be grouped by. -- **hiddenColumns**? : _string\[]_ - - list of columns to hide. -- **expanded**? : _{ \[key: string]: boolean; }_ - - object listing the initially expanded rows. +| Name | Type | Description | +| --------------- | ------------------------------ | ------------------------------------------------------------------------------ | +| `columns*` | _Column<{}>\[]_ | the colmns object as an array. | +| `data` | _any\[]_ | array of data rows. | +| `header` | _boolean_ | show or hide the header element. | +| `sorting` | _boolean_ | enable.disable sorting. | +| `filtering` | _boolean_ | enable/disable filtering. | +| `itemsLabel` | _string_ | string label for 'items' - used in the filter placeholder and grouping header. | +| `groupBy` | _string\[]_ | field to be grouped by. | +| `hiddenColumns` | _string\[]_ | list of columns to hide. | +| `expanded` | _{ \[key: string]: boolean; }_ | object listing the initially expanded rows. | ## Tab @@ -315,12 +257,12 @@ _Tabs [source code](https:/github.com/ccontrols/component-controls/tree/master/u _Title [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/Title/Title.tsx)_ -**Properties:** +### properties -- **children**? : _string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)_ - - text to be displayed in the component. -- **ref**? : _((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>_ +| Name | Type | Description | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------- | +| `children` | _string \| (string & {}) \| (string & ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>) \| (string & ReactNodeArray) \| (string & ReactPortal)_ | text to be displayed in the component. | +| `ref` | _((instance: HTMLHeadingElement) => void) \| RefObject<HTMLHeadingElement>_ | | ## Toggle @@ -328,10 +270,10 @@ Toggle components can be used to edit boolean values. Uses [react-switch](https: _Toggle [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/Toggle/Toggle.tsx)_ -**Properties:** - -- **label**? : _string_ +### properties - optional label to be displayed alongside the toggle +| Name | Type | Description | +| ------- | -------- | --------------------------------------------------- | +| `label` | _string_ | optional label to be displayed alongside the toggle | diff --git a/ui/editors/README.md b/ui/editors/README.md index 15afb8b7c..9849fd07f 100644 --- a/ui/editors/README.md +++ b/ui/editors/README.md @@ -49,20 +49,14 @@ Array control editor. _ArrayEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/ArrayEditor/ArrayEditor.tsx)_ -**Properties:** +### properties -- **prop** : _ComponentControlArray_ - - the array property that is being edited. -- **name** : _string_ - - name of the control. -- **onChange** : _(name: string, prop: any) => void_ - - onChange event called when the propery is changing -- **onClick**? : _PropertyOnClick_ - - onClick event handler for Button type property editors. +| Name | Type | Description | +| ----------- | ----------------------------------- | ------------------------------------------------------- | +| `prop*` | _ComponentControlArray_ | the array property that is being edited. | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | +| `onClick` | _PropertyOnClick_ | onClick event handler for Button type property editors. | ## BooleanEditor @@ -70,20 +64,14 @@ Boolean control editor. Uses the Toggle component. _BooleanEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/BooleanEditor/BooleanEditor.tsx)_ -**Properties:** - -- **prop** : _ComponentControlBoolean_ +### properties - the property that is being edited. -- **name** : _string_ - - name of the control. -- **onChange** : _(name: string, prop: any) => void_ - - onChange event called when the propery is changing -- **onClick**? : _PropertyOnClick_ - - onClick event handler for Button type property editors. +| Name | Type | Description | +| ----------- | ----------------------------------- | ------------------------------------------------------- | +| `prop*` | _ComponentControlBoolean_ | the property that is being edited. | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | +| `onClick` | _PropertyOnClick_ | onClick event handler for Button type property editors. | ## ButtonEditor @@ -91,20 +79,14 @@ Button control editor. _ButtonEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/ButtonEditor/ButtonEditor.tsx)_ -**Properties:** - -- **prop** : _ComponentControlButton<() => void>_ - - the button property that is being edited. -- **onClick** : _PropertyOnClick_ +### properties - the onClick event handler for the button -- **name** : _string_ - - name of the control. -- **onChange** : _(name: string, prop: any) => void_ - - onChange event called when the propery is changing +| Name | Type | Description | +| ----------- | --------------------------------------- | -------------------------------------------------- | +| `prop*` | _ComponentControlButton<() => void>_ | the button property that is being edited. | +| `onClick*` | _PropertyOnClick_ | the onClick event handler for the button | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | ## ColorEditor @@ -112,20 +94,14 @@ Color control editor. _ColorEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/ColorEditor/ColorEditor.tsx)_ -**Properties:** - -- **prop** : _ComponentControlColor_ - - the color property that is being edited. -- **name** : _string_ - - name of the control. -- **onChange** : _(name: string, prop: any) => void_ +### properties - onChange event called when the propery is changing -- **onClick**? : _PropertyOnClick_ - - onClick event handler for Button type property editors. +| Name | Type | Description | +| ----------- | ----------------------------------- | ------------------------------------------------------- | +| `prop*` | _ComponentControlColor_ | the color property that is being edited. | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | +| `onClick` | _PropertyOnClick_ | onClick event handler for Button type property editors. | ## DateEditor @@ -133,20 +109,14 @@ Date control editor. _DateEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/DateEditor/DateEditor.tsx)_ -**Properties:** - -- **prop** : _ComponentControlDate_ - - the date property that is being edited. -- **name** : _string_ - - name of the control. -- **onChange** : _(name: string, prop: any) => void_ - - onChange event called when the propery is changing -- **onClick**? : _PropertyOnClick_ +### properties - onClick event handler for Button type property editors. +| Name | Type | Description | +| ----------- | ----------------------------------- | ------------------------------------------------------- | +| `prop*` | _ComponentControlDate_ | the date property that is being edited. | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | +| `onClick` | _PropertyOnClick_ | onClick event handler for Button type property editors. | ## FilesEditor @@ -154,20 +124,14 @@ Files control editor. _FilesEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/FilesEditor/FilesEditor.tsx)_ -**Properties:** +### properties -- **prop** : _ComponentControlFiles_ - - the files property that is being edited. -- **name** : _string_ - - name of the control. -- **onChange** : _(name: string, prop: any) => void_ - - onChange event called when the propery is changing -- **onClick**? : _PropertyOnClick_ - - onClick event handler for Button type property editors. +| Name | Type | Description | +| ----------- | ----------------------------------- | ------------------------------------------------------- | +| `prop*` | _ComponentControlFiles_ | the files property that is being edited. | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | +| `onClick` | _PropertyOnClick_ | onClick event handler for Button type property editors. | ## NumberEditor @@ -175,20 +139,14 @@ Number control editor. _NumberEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/NumberEditor/NumberEditor.tsx)_ -**Properties:** - -- **prop** : _ComponentControlNumber_ +### properties - the number property that is being edited. -- **name** : _string_ - - name of the control. -- **onChange** : _(name: string, prop: any) => void_ - - onChange event called when the propery is changing -- **onClick**? : _PropertyOnClick_ - - onClick event handler for Button type property editors. +| Name | Type | Description | +| ----------- | ----------------------------------- | ------------------------------------------------------- | +| `prop*` | _ComponentControlNumber_ | the number property that is being edited. | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | +| `onClick` | _PropertyOnClick_ | onClick event handler for Button type property editors. | ## ObjectEditor @@ -196,20 +154,14 @@ Object control editor. _ObjectEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/ObjectEditor/ObjectEditor.tsx)_ -**Properties:** - -- **prop** : _ComponentControlObject_ - - the object property that is being edited. -- **name** : _string_ +### properties - name of the control. -- **onChange** : _(name: string, prop: any) => void_ - - onChange event called when the propery is changing -- **onClick**? : _PropertyOnClick_ - - onClick event handler for Button type property editors. +| Name | Type | Description | +| ----------- | ----------------------------------- | ------------------------------------------------------- | +| `prop*` | _ComponentControlObject_ | the object property that is being edited. | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | +| `onClick` | _PropertyOnClick_ | onClick event handler for Button type property editors. | ## OptionsEditor @@ -217,20 +169,14 @@ Options control editor. _OptionsEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/OptionsEditor/OptionsEditor.tsx)_ -**Properties:** - -- **prop** : _ComponentControlOptions<unknown>_ - - the options property that is being edited. -- **name** : _string_ - - name of the control. -- **onChange** : _(name: string, prop: any) => void_ +### properties - onChange event called when the propery is changing -- **onClick**? : _PropertyOnClick_ - - onClick event handler for Button type property editors. +| Name | Type | Description | +| ----------- | ------------------------------------- | ------------------------------------------------------- | +| `prop*` | _ComponentControlOptions<unknown>_ | the options property that is being edited. | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | +| `onClick` | _PropertyOnClick_ | onClick event handler for Button type property editors. | ## TextEditor @@ -238,19 +184,13 @@ Text control editor. _TextEditor [source code](https:/github.com/ccontrols/component-controls/tree/master/core/specification/src/TextEditor/TextEditor.tsx)_ -**Properties:** - -- **prop** : _ComponentControlText_ - - the text property that is being edited. -- **name** : _string_ - - name of the control. -- **onChange** : _(name: string, prop: any) => void_ - - onChange event called when the propery is changing -- **onClick**? : _PropertyOnClick_ +### properties - onClick event handler for Button type property editors. +| Name | Type | Description | +| ----------- | ----------------------------------- | ------------------------------------------------------- | +| `prop*` | _ComponentControlText_ | the text property that is being edited. | +| `name*` | _string_ | name of the control. | +| `onChange*` | _(name: string, prop: any) => void_ | onChange event called when the propery is changing | +| `onClick` | _PropertyOnClick_ | onClick event handler for Button type property editors. |