diff --git a/core/config/README.md b/core/config/README.md index 6288e1cf1..942ecd790 100644 --- a/core/config/README.md +++ b/core/config/README.md @@ -3,6 +3,12 @@ - [Overview](#overview) - [Installation](#installation) - [API](#api) + - [ConfigrationResult](#configrationresult) + - [buildConfigFileNames](#buildconfigfilenames) + - [optionsFileNames](#optionsfilenames) + - [extractStories](#extractstories) + - [getConfigurationArg](#getconfigurationarg) + - [loadConfiguration](#loadconfiguration) # Overview @@ -22,4 +28,80 @@ $ npm install @component-controls/config --save-dev +## ConfigrationResult + +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L10)_ + + + +### properties + +| Name | Type | Description | +| ----------------- | ----------------------------------------- | ----------- | +| `config*` | [BuildConfiguration](#buildconfiguration) | | +| `configPath*` | string | | +| `optionsFilePath` | string | | + +## buildConfigFileNames + +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L7)_ + + + +## optionsFileNames + +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L9)_ + + + +## extractStories + +find the story files out of a configuration file +using glob for the regex file search + +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L74)_ + +**function** extractStories(`__namedParameters`\*: **config**: [BuildConfiguration](#buildconfiguration)**configPath**: string): string\[] | undefined; + +### parameters + +| Name | Type | Description | +| -------------------- | --------------------------------------------------------------------------- | ----------- | +| `__namedParameters*` | **config**: [BuildConfiguration](#buildconfiguration)**configPath**: string | | +| `returns` | string\[] \| undefined | | + +## getConfigurationArg + +return the configration folder from command-line parameters +command line accepts -c/ -config parameter for config path +the config file is assumed named main.js/main.ts + +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L21)_ + +**function** getConfigurationArg(`args`\*: string\[]): string | undefined; + +### parameters + +| Name | Type | Description | +| --------- | ------------------- | ----------- | +| `args*` | string\[] | | +| `returns` | string \| undefined | | + +## loadConfiguration + + given a base project folder and a configuration folder, returns the configuration file + +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L42)_ + +**function** loadConfiguration(`baseFolder`\*: string, `configFolder`: string, `args`: string\[]): [ConfigrationResult](#configrationresult) | undefined; + +### parameters + +| Name | Type | Description | +| -------------- | ------------------------------------------------------ | ---------------------------------------------- | +| `baseFolder*` | string | project folder to start the search with | +| `configFolder` | string | folder where the configuration file is located | +| `args` | string\[] | optional arguments | +| `returns` | [ConfigrationResult](#configrationresult) \| undefined | | + diff --git a/core/core/README.md b/core/core/README.md index d81e3c1f9..c29973e48 100644 --- a/core/core/README.md +++ b/core/core/README.md @@ -3,6 +3,84 @@ - [Overview](#overview) - [Installation](#installation) - [API](#api) + - [ArgUsageLocation](#argusagelocation) + - [Document](#document) + - [Documents](#documents) + - [SourceIdentifier](#sourceidentifier) + - [Stories](#stories) + - [StoriesStore](#storiesstore) + - [Story](#story) + - [StoryArgument](#storyargument) + - [StoryComponents](#storycomponents) + - [StoryPackages](#storypackages) + - [StoryParameters](#storyparameters) + - [StoryStories](#storystories) + - [Pages](#pages) + - [StoryArguments](#storyarguments) + - [defPageType](#defpagetype) + - [dateToLocalString](#datetolocalstring) + - [getDocPath](#getdocpath) + - [getStoryPath](#getstorypath) + - [ControlTypes](#controltypes) + - [ComponentControlArray](#componentcontrolarray) + - [ComponentControlBase](#componentcontrolbase) + - [ComponentControlBoolean](#componentcontrolboolean) + - [ComponentControlButton](#componentcontrolbutton) + - [ComponentControlColor](#componentcontrolcolor) + - [ComponentControlData](#componentcontroldata) + - [ComponentControlDate](#componentcontroldate) + - [ComponentControlFiles](#componentcontrolfiles) + - [ComponentControlNumber](#componentcontrolnumber) + - [ComponentControlObject](#componentcontrolobject) + - [ComponentControlOptions](#componentcontroloptions) + - [ComponentControlText](#componentcontroltext) + - [ComponentControls](#componentcontrols) + - [ComponentControl](#componentcontrol) + - [OptionsListType](#optionslisttype) + - [OptionsValueType](#optionsvaluetype) + - [ComponentInfo](#componentinfo) + - [PropType](#proptype) + - [PropTypes](#proptypes) + - [StoryComponent](#storycomponent) + - [TypeInformation](#typeinformation) + - [TypeValue](#typevalue) + - [getComponentName](#getcomponentname) + - [PropsInfoExtractorFunction](#propsinfoextractorfunction) + - [CodeLocation](#codelocation) + - [CodePosition](#codeposition) + - [ImportName](#importname) + - [Imports](#imports) + - [PackageDependencies](#packagedependencies) + - [PackageInfo](#packageinfo) + - [PackageRepository](#packagerepository) + - [PackageDependency](#packagedependency) + - [StoryRenderFn](#storyrenderfn) + - [BuildConfiguration](#buildconfiguration) + - [PageConfiguration](#pageconfiguration) + - [RunOnlyConfiguration](#runonlyconfiguration) + - [TabConfiguration](#tabconfiguration) + - [PageTabs](#pagetabs) + - [PageType](#pagetype) + - [PagesConfiguration](#pagesconfiguration) + - [PagesOnlyRoutes](#pagesonlyroutes) + - [RunConfiguration](#runconfiguration) + - [WebpackConfig](#webpackconfig) + - [WebpackConfigFn](#webpackconfigfn) + - [defaultBuildConfig](#defaultbuildconfig) + - [defaultRunConfig](#defaultrunconfig) + - [StoryRenderFn](#storyrenderfn-1) + - [PageType](#pagetype-1) + - [RunConfiguration](#runconfiguration-1) + - [StoryArguments](#storyarguments-1) + - [PagesOnlyRoutes](#pagesonlyroutes-1) + - [ComponentControl](#componentcontrol-1) + - [TypeValue](#typevalue-1) + - [PackageDependency](#packagedependency-1) + - [WebpackConfig](#webpackconfig-1) + - [PageTabs](#pagetabs-1) + - [PagesConfiguration](#pagesconfiguration-1) + - [WebpackConfigFn](#webpackconfigfn-1) + - [PageType](#pagetype-2) # Overview @@ -30,4 +108,1151 @@ $ npm install @component-controls/core --save-dev +## ArgUsageLocation + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L12)_ + + + +### properties + +| Name | Type | Description | +| ----------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `loc*` | [CodeLocation](#codelocation) | where in the story source code is the argument used code location is relative to the start of the story | +| `name` | [SourceIdentifier](#sourceidentifier) | optional name for the usage of the argument example: export const story = ({ value }) => <Story value={{ age: value }} />; in this example the name will be 'age' | +| `shorthand` | boolean | true if the property is a 'shorthand'. { prop: value } - not a shorthand. { prop } - a shorthand. | + +## Document + +a group of stories. Usually multiple stories are in one csf file +and the 'group' is the default export +in the case of MDX stories, the doc is created using a <Meta /> tag + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L158)_ + + + +### properties + +| Name | Type | Description | +| ------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| `MDXPage` | any | for MDX pages, this is an MDXContent function, to be rendered inside a MDXProvider | +| `author` | string | document author | +| `component` | string \| object | id for component associated with the stories file | +| `componentsLookup*` | \[name: string]: string | lookup into the global store.components since multiple components of the same name can be used example: \['Button']: 'c:/myapp/Button.tsx' | +| `controls` | [ComponentControls](#componentcontrols) | object of key/value pairs specifying the controls for the stories file this will apply to all the stories in the file | +| `date` | [Date](#date) | optional date the document was created. If not assigned, the instrumentation process will use birthtime | +| `dateModified` | [Date](#date) | optional date the document was last modified. If not assigned, the instrumentation process will use mtime | +| `decorators` | [StoryRenderFn](#storyrenderfn)\[] | story decorators (or wrappers) | +| `description` | string | documentation file description | +| `fileName` | string | file name of the file of stories | +| `fullPage` | boolean | if true, will display the documentation page full size (pagecontainer.full theme variant) the default value is from the page type configuration | +| `package` | string | lookup into the global store of PackageInfo package.json | +| `parameters` | [StoryParameters](#storyparameters) | configuration parameters passed to the story groups configured either as CSF default export or MDX <Meta /> tag | +| `route` | string | if provided, will be used as the route for the page if not provided, the title in lowercase will be used as the route | +| `sidebars` | boolean | whether to add navigation sidebars to the page the default value is from the page type configuration | +| `source` | string | source code of the entire file of stories | +| `stories` | string\[] | list of stories contained in the file/groups | +| `subcomponents` | string\[] \| object\[] | multiple components option | +| `tags` | string\[] | comma-separated list of document tags, used for search | +| `title*` | string | title of the groups of stories contained in the doc file. used to generate story ids | +| `type` | [PageType](#pagetype) | document type - blogs a and stories. By default - storie | + +## Documents + +list of story files, or groups + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L290)_ + +`title`\*: string: [Document](#document) + +## SourceIdentifier + +an identifier/variable.argument in the source code + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L8)_ + + + +### properties + +| Name | Type | Description | +| ------- | ----------------------------- | ----------- | +| `loc` | [CodeLocation](#codelocation) | | +| `name*` | string | | + +## Stories + +map of stories. The id is compatible with CSF story ids + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L148)_ + +`id`\*: string: [Story](#story) + +## StoriesStore + +store of stories information in memory after the loader is applied + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L313)_ + + + +### properties + +| Name | Type | Description | +| ------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------- | +| `components*` | [StoryComponents](#storycomponents) | list of components used in stories | +| `config` | [RunConfiguration](#runconfiguration) | global configuration for config file | +| `docs*` | [Documents](#documents) | list of story files, or groups | +| `packages*` | [StoryPackages](#storypackages) | list of package.json files and their data used by the components and the stories of the project | +| `stories*` | [StoryStories](#storystories) | list of stories | + +## Story + +Story interface - usually extracted by the AST instrumenting loader + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L73)_ + + + +### properties + +| Name | Type | Description | +| --------------- | --------------------------------------- | ------------------------------------------------------------------------------------------- | +| `arguments` | [StoryArguments](#storyarguments) | arguments pass to a CSF story eg \`export const story = props => <Story {...props} />;\` | +| `component` | string \| object | id for component associated with the story | +| `controls` | [ComponentControls](#componentcontrols) | object of key/value pairs specifying the controls for the story | +| `decorators` | [StoryRenderFn](#storyrenderfn)\[] | story decorators (or wrappers) | +| `description` | string | story extended description. can use markdown. | +| `doc` | string | title of the file/group of stories | +| `id` | string | csf id of the story | +| `loc` | [CodeLocation](#codelocation) | location in the source file of the story definition | +| `name*` | string | name of the Story. | +| `parameters` | [StoryParameters](#storyparameters) | configuration parameters passed to the story - either CSF or MDX | +| `renderFn` | [StoryRenderFn](#storyrenderfn) | render function for the story | +| `source` | string | the source code of the story, extracted byt the AST instrumenting loaders | +| `subcomponents` | \[key: string]: string \| object | multiple components option | +| `subtitle` | string | optional story subtitle property | + +## StoryArgument + +arguments passed to the 'story' function, extracted by an AST loader + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L36)_ + + + +### properties + +| Name | Type | Description | +| -------- | ------------------------------------------- | ------------------------------------------------------------------------------------------ | +| `loc` | [CodeLocation](#codelocation) | location of the argument declaration, relative to the story source code | +| `name` | string | the original name of the argument | +| `usage` | [ArgUsageLocation](#argusagelocation)\[] | list of locations where the argument is used in the body of the story | +| `value*` | string \| [StoryArguments](#storyarguments) | either the name used (or a variable alias), or an array of sub-arguments ({ name: alias }) | + +## StoryComponents + +list of components used in stories + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L283)_ + +`fileName`\*: string: [StoryComponent](#storycomponent) + +## StoryPackages + +list of repositories + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L306)_ + +`id`\*: string: [PackageInfo](#packageinfo) + +## StoryParameters + +list of configuration parameters for indivudual stories and docs files +can be specified either through CSF or MDX tags + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L66)_ + +`name`\*: string: any + +## StoryStories + +list of stories + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L299)_ + +`id`\*: string: [Story](#story) + +## Pages + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L294)_ + +[Document](#document)\[] + +## StoryArguments + +list of story arguments. Each argument can be a deconstructed argument of itself +the first argument are the control 'values' + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L60)_ + +[StoryArgument](#storyargument)\[] + +## defPageType + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L152)_ + + + +## dateToLocalString + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L273)_ + +**function** dateToLocalString(`date`: [Date](#date)): string; + +### parameters + +| Name | Type | Description | +| --------- | ------------- | ----------- | +| `date` | [Date](#date) | | +| `returns` | string | | + +## getDocPath + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L338)_ + +**function** getDocPath(`pageType`\*: [PageType](#pagetype), `doc`: [Document](#document), `pagesConfig`: [PagesOnlyRoutes](#pagesonlyroutes), `name`\*: string, `activeTab`: string): string; + +### parameters + +| Name | Type | Description | +| ------------- | ----------------------------------- | ----------- | +| `pageType*` | [PageType](#pagetype) | | +| `doc` | [Document](#document) | | +| `pagesConfig` | [PagesOnlyRoutes](#pagesonlyroutes) | | +| `name*` | string | | +| `activeTab` | string | | +| `returns` | string | | + +## getStoryPath + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L355)_ + +**function** getStoryPath(`story`: [Story](#story), `doc`: [Document](#document), `pagesConfig`: [PagesOnlyRoutes](#pagesonlyroutes), `activeTab`: string): string; + +### parameters + +| Name | Type | Description | +| ------------- | ----------------------------------- | ----------- | +| `story` | [Story](#story) | | +| `doc` | [Document](#document) | | +| `pagesConfig` | [PagesOnlyRoutes](#pagesonlyroutes) | | +| `activeTab` | string | | +| `returns` | string | | + +## ControlTypes + +Control field types +examples are provided for the different types: + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L6)_ + + + +### properties + +| Name | Type | Description | +| ---------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ARRAY*` | **function** ARRAY | arrayItems: { type: ControlTypes.ARRAY, label: 'Items', rowType: { name: { type: ControlTypes.TEXT }, }, value: \[{ name: 'Laptop' }, { name: 'Book' }, { name: 'Whiskey' }], }, | +| `BOOLEAN*` | **function** BOOLEAN | nice: { type: ControlTypes.BOOLEAN, label: 'Nice', value: true, }, | +| `BUTTON*` | **function** BUTTON | button: { type: ControlTypes.BUTTON, onClick: () => { ... code to modify some variables } }, | +| `COLOR*` | **function** COLOR | color: { type: 'color', value: '#000000', }, | +| `DATE*` | **function** DATE | birthday: { type: ControlTypes.DATE, label: 'Birthday', value: new Date(), }, | +| `FILES*` | **function** FILES | images: { type: ControlTypes.FILES, label: 'Happy Picture', accept: 'image/\*', value: \[ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=', ], }, | +| `NUMBER*` | **function** NUMBER | age: { type: ControlTypes.NUMBER, label: 'Age', value: 78, range: true, min: 0, max: 90, step: 5, }, | +| `OBJECT*` | **function** OBJECT | style: { type: ControlTypes.OBJECT, label: 'Styles', value: { // do not randomize the border style border: { type: ControlTypes.TEXT, value: '2px dashed silver', data: null }, borderRadius: { type: ControlTypes.NUMBER, value: 10 }, padding: { type: ControlTypes.NUMBER, value: 10 }, }, } | +| `OPTIONS*` | **function** OPTIONS | fruit: { type: ControlTypes.OPTIONS, label: 'Fruit', value: 'apple', options: { Apple: 'apple', Banana: 'banana', Cherry: 'cherry', }, }, | +| `TEXT*` | **function** TEXT | userName: { type: ControlTypes.TEXT, label: 'Name', value: 'Storyteller', }, | + +## ComponentControlArray + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L263)_ + +** extends ComponentControlBase<\[key: string]: any\[]>** + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | \[key: string]: any\[] | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `editLabel` | string | the label for the editor button | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `required` | boolean | visually display the control property as required | +| `resetValue` | \[key: string]: any\[] | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `rowType*` | [ComponentControls](#componentcontrols) | type of the items in each row of the array | +| `type*` | [ARRAY](#array) | | +| `value` | \[key: string]: any\[] | a default value for the property | + +## ComponentControlBase + +Base inteface for creating control types +All new property typs should extend this interface and support + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L140)_ + + + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `required` | boolean | visually display the control property as required | +| `resetValue` | | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `type*` | [ControlTypes](#controltypes) | | +| `value` | | a default value for the property | + +## ComponentControlBoolean + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L230)_ + +** extends ComponentControlBase<boolean>** + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | boolean | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `required` | boolean | visually display the control property as required | +| `resetValue` | boolean | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `type*` | [BOOLEAN](#boolean) | | +| `value` | boolean | a default value for the property | + +## ComponentControlButton + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L285)_ + +** extends ComponentControlBase<>** + +### properties + +| Name | Type | Description | +| -------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `onClick` | **function** (`prop`\*: [ComponentControlButton](#componentcontrolbutton)): void; | for button type fields, an onClick handler | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `required` | boolean | visually display the control property as required | +| `resetValue` | | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `type*` | [BUTTON](#button) | | +| `value` | | a default value for the property | + +## ComponentControlColor + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L234)_ + +** extends ComponentControlBase<string>** + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | string | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `required` | boolean | visually display the control property as required | +| `resetValue` | string | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `type*` | [COLOR](#color) | | +| `value` | string | a default value for the property | + +## ComponentControlData + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L118)_ + + + +### properties + +| Name | Type | Description | +| --------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| `name*` | string | 'name' for generating random data from faker.js usually comprised of two parts, separated by a dot example 'internet.avatar' | +| `options` | \[key: string]: any | options to be passe to the random data generators example { min: 10, max: 20 } | + +## ComponentControlDate + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L238)_ + +** extends ComponentControlBase<[Date](#date)>** + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `datePicker` | boolean | whether to display a date picker (calendar). default: true | +| `defaultValue` | [Date](#date) | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `required` | boolean | visually display the control property as required | +| `resetValue` | [Date](#date) | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `timePicker` | boolean | whether to display a time picker (calendar). default: true | +| `type*` | [DATE](#date) | | +| `value` | [Date](#date) | a default value for the property | + +## ComponentControlFiles + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L254)_ + +** extends ComponentControlBase<string\[]>** + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `accept` | string | type of files to accept user to open ex 'image/\*', | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | string\[] | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `required` | boolean | visually display the control property as required | +| `resetValue` | string\[] | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `type*` | [FILES](#files) | | +| `value` | string\[] | a default value for the property | + +## ComponentControlNumber + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L335)_ + +** extends ComponentControlBase<number>** + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | number | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `max` | number | maximum allowed value for numeric property | +| `min` | number | minimum allowed value for numeric property | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `range` | boolean | if true, will display a range type slider editor | +| `required` | boolean | visually display the control property as required | +| `resetValue` | number | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `step` | number | stepper for numeric editor /i nc/dec value | +| `type*` | [NUMBER](#number) | | +| `value` | number | a default value for the property | + +## ComponentControlObject + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L276)_ + +** extends ComponentControlBase<[ComponentControls](#componentcontrols)>** + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | [ComponentControls](#componentcontrols) | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `editLabel` | string | the label for the editor button | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `required` | boolean | visually display the control property as required | +| `resetValue` | [ComponentControls](#componentcontrols) | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `type*` | [OBJECT](#object) | | +| `value` | [ComponentControls](#componentcontrols) | a default value for the property | + +## ComponentControlOptions + +list of options can be +1\. key-value pair object: in format { label: value } +2\. array of strings +3\. array of key-value pair objects + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L316)_ + +** extends ComponentControlBase<OptionsValueType<>>** + +### properties + +| Name | Type | Description | +| -------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | OptionsValueType<> | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `display` | 'select' \| 'multi-select' \| 'radio' \| 'inline-radio' \| 'check' \| 'inline-check' | how to render selecting the options: default is 'select' | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `options*` | OptionsListType<> | | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `required` | boolean | visually display the control property as required | +| `resetValue` | OptionsValueType<> | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `type*` | [OPTIONS](#options) | | +| `value` | OptionsValueType<> | a default value for the property | + +## ComponentControlText + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L205)_ + +** extends ComponentControlBase<string>** + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `data` | [ComponentControlData](#componentcontroldata) \| null \| false | helper information to generate random data will be used in conjunction with faker.js datacan be set to false, if the control should not be randomized | +| `defaultValue` | string | default value is usually set at run-time, from the value | +| `description` | string | full text property description. can use markdown. | +| `escapeValue` | boolean | allows to receive escaped string values to help prevent XSS attacks by default - false | +| `groupId` | string | allows grouping of the properties in a property editor for example different editor tabs | +| `hidden` | boolean | hide the property editor for this property will only use the value | +| `label` | string | label to display next to the field editor by default uses the property name itself | +| `order` | number | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | +| `placeholder` | string | placeholder for empty properties either undefined initial value or user clears the field | +| `required` | boolean | visually display the control property as required | +| `resetValue` | string | reset value - this is automatically saved as the initial 'value' used when user wants to click rest and go back to the initial values | +| `rows` | number | number of rows for a TextArea field for longer text by default, only 1 row = means a Input field \> 1 rows = an area field | +| `type*` | [TEXT](#text) | | +| `value` | string | a default value for the property | + +## ComponentControls + +ComponentControls are defined in key value pairs +the name of the property is the key +and the value is the ComponentControl + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L388)_ + +`name`\*: string: [ComponentControl](#componentcontrol) + +## ComponentControl + +ComponentControl is a either an object of property settings +or a shortcut can be used: + properties: { + text: 'Hello', +}, + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L371)_ + +[ComponentControlText](#componentcontroltext) \| [ComponentControlBoolean](#componentcontrolboolean) \| [ComponentControlColor](#componentcontrolcolor) \| [ComponentControlDate](#componentcontroldate) \| [ComponentControlObject](#componentcontrolobject) \| [ComponentControlButton](#componentcontrolbutton) \| [ComponentControlOptions](#componentcontroloptions) \| [ComponentControlNumber](#componentcontrolnumber) \| [ComponentControlArray](#componentcontrolarray) \| [ComponentControlFiles](#componentcontrolfiles) + +## OptionsListType + +value/label pairs or array of OptionsValueType + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L305)_ + +\[key: string]: \| OptionsValueType<>\[] + +## OptionsValueType + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L295)_ + + | number | string\[] \| number\[] \| **label**: string**value**: any + +## ComponentInfo + +DocGen type onfo generated for a compoennt + +_defined in [@component-controls/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L76)_ + + + +### properties + +| Name | Type | Description | +| -------------- | ----------------------- | --------------------- | +| `description` | string | optional description | +| `displayName*` | string | name of the component | +| `props*` | [PropTypes](#proptypes) | component props | + +## PropType + +docgen generated property types +mapped to common types to be consumed by component-controls +check props-info packages for implementations + +_defined in [@component-controls/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L47)_ + + + +### properties + +| Name | Type | Description | +| -------------- | ----------------------------------- | ------------------------------------- | +| `defaultValue` | any | default value for the property | +| `description` | string | description of the property | +| `parentName` | string | name of the parent/inherited property | +| `type*` | [TypeInformation](#typeinformation) | propertty type | + +## PropTypes + +list of properties of the component + +_defined in [@component-controls/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L69)_ + +`key`\*: string: [PropType](#proptype) + +## StoryComponent + +component specified for stories or story files + +_defined in [@component-controls/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L96)_ + + + +### properties + +| Name | Type | Description | +| -------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `from` | string | imported from | +| `importedName` | 'default' \| 'namespace' \| string | imported name ex: \- default import import Button from 'buttons'; \- namespace import import \* as Button from 'buttons'; \- named import import { Button } from 'buttons'; \- named alias import import { Btn as Button } from 'buttons'; | +| `imports` | [Imports](#imports) | list of external imports | +| `info` | [ComponentInfo](#componentinfo) | docgen generated component info | +| `loc` | [CodeLocation](#codelocation) | location of the import statement in the source code file | +| `name*` | string | name of the component as used in the fiel | +| `package` | string | lookup into the global store of PackageInfo package.json | +| `request` | string | resolved import request | +| `source` | string | the source code of the component file, extracted byt the AST instrumenting loaders | + +## TypeInformation + +_defined in [@component-controls/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L17)_ + + + +### properties + +| Name | Type | Description | +| ----------- | --------------------------------------------- | ----------------------------------------------------------------------------- | +| `arguments` | [TypeInformation](#typeinformation)\[] \| any | argument types of function | +| `name*` | [TypeValue](#typevalue) | | +| `raw` | string | raw type code | +| `required` | boolean | is the property required | +| `value` | [TypeInformation](#typeinformation)\[] \| any | type value elements of enum, array, fields of object return value of function | + +## TypeValue + +_defined in [@component-controls/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L3)_ + +'any' | 'boolean' | 'number' | 'string' | 'array' | 'object' | 'enum' | 'union' | 'literal' | 'symbol' | 'function' | string + +## getComponentName + +given a component, return its name + +_defined in [@component-controls/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L147)_ + +**function** getComponentName(`component`\*: any): string | undefined; + +### parameters + +| Name | Type | Description | +| ------------ | ------------------- | ------------------------------------------------------------------------------------------ | +| `component*` | any | a string component name, or a component class, with a name or displayName static property | +| `returns` | string \| undefined | | + +## PropsInfoExtractorFunction + +callback function to extract props info table - ie docgen type libraries +used to extract displayName, and props tables for a component + +_defined in [@component-controls/core/src/propsInfo.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/propsInfo.ts#L13)_ + +**function** (`fileName`\*: string, `componentName`: string, `source`: string): Promise<[ComponentInfo](#componentinfo) | undefined> | [ComponentInfo](#componentinfo) | undefined; + +### parameters + +| Name | Type | Description | +| --------------- | -------------------------------------------------------------------------------------------------------- | ----------- | +| `fileName*` | string | | +| `componentName` | string | | +| `source` | string | | +| `returns` | Promise<[ComponentInfo](#componentinfo) \| undefined> \| [ComponentInfo](#componentinfo) \| undefined | | + +## CodeLocation + +location in the source code of a story or part of it +ie. arguments, usage of arguments + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L16)_ + + + +### properties + +| Name | Type | Description | +| -------- | ----------------------------- | ----------- | +| `end*` | [CodePosition](#codeposition) | | +| `start*` | [CodePosition](#codeposition) | | + +## CodePosition + +position in the stories source code +usually taken from AST traverse loaders + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L6)_ + + + +### properties + +| Name | Type | Description | +| --------- | ------ | ----------- | +| `column*` | number | | +| `line*` | number | | + +## ImportName + +an import name + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L106)_ + + + +### properties + +| Name | Type | Description | +| --------------- | ------ | --------------------------------------------------------------------- | +| `importedName*` | string | alias imported as. If a default import, the string 'default' is here. | +| `name*` | string | the imported name from the import file | + +## Imports + +imports - library/file as key and the imported names as an array + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L120)_ + +`key`\*: string: [ImportName](#importname)\[] + +## PackageDependencies + +list of dependencies - package name as the key and the version as the value + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L49)_ + +`name`\*: string: [PackageDependency](#packagedependency) + +## PackageInfo + +package.json +information about the repository of the stories and components + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L57)_ + + + +### properties + +| Name | Type | Description | +| ------------------ | ------------------------------------------- | ----------------------------------------------------------------------------- | +| `dependencies` | [PackageDependencies](#packagedependencies) | extracted package.json 'dependencies' section | +| `devDependencies` | [PackageDependencies](#packagedependencies) | extracted package.json 'devDependencies' section | +| `fileHash*` | string | file name hash of package.json | +| `name` | string | package name | +| `peerDependencies` | [PackageDependencies](#packagedependencies) | extracted package.json 'peerDependencies' section | +| `repository*` | [PackageRepository](#packagerepository) | repository information extracted from the "repository" field in package.json. | +| `version` | string | package version | + +## PackageRepository + +repository information from package.json + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L24)_ + + + +### properties + +| Name | Type | Description | +| -------- | ------ | --------------------------------------- | +| `browse` | string | link for browsing the file | +| `docs` | string | link for project readme | +| `issues` | string | link for filing issues with the project | + +## PackageDependency + +dependecy string - the package version number + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L44)_ + +string + +## StoryRenderFn + +story render function + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L98)_ + +**function** (`controlValues`\*: \[key: string]: any, `context`: any): any; + +### parameters + +| Name | Type | Description | +| ---------------- | ------------------- | ----------- | +| `controlValues*` | \[key: string]: any | | +| `context` | any | | +| `returns` | any | | + +## BuildConfiguration + +global configuration used at build time +stored in a file named main.js/main.ts + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L86)_ + + + +### properties + +| Name | Type | Description | +| -------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| `categories` | [PageType](#pagetype)\[] | page types that are considred as categories fields as well | +| `finalWebpack` | [WebpackConfig](#webpackconfig) | | +| `pages` | [PagesOnlyRoutes](#pagesonlyroutes) | base url path for API documentation pages. Default is "docs/" | +| `stories` | string\[] | wild card search string for the stories internally using \`glob\` for the search: https://www.npmjs.com/package/glob example: "./stories/ | +| `webpack` | [WebpackConfig](#webpackconfig) | custom webpack fonfigurations setup. One or the other will be used | + +## PageConfiguration + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L31)_ + + + +### properties + +| Name | Type | Description | +| ----------- | --------------------------------------- | ---------------------------------------------- | +| `basePath` | string | base url path for the page | +| `container` | [ComponentType](#componenttype) \| null | page container react component | +| `fullPage` | boolean | whether to take a fullpage theme option | +| `label` | string | label - used for menu labels | +| `sidebars` | boolean | whether to add navigation sidebars to the page | +| `tabs` | [PageTabs](#pagetabs) | tabs configuration for story-type pages | +| `topMenu` | boolean | whether to add to the top navigation menu | + +## RunOnlyConfiguration + +global configuration used at build time +stored in a file named main.js/main.ts + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L113)_ + + + +### properties + +| Name | Type | Description | +| ----------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `author` | string | author: Default is "@component-controls" | +| `decorators` | [StoryRenderFn](#storyrenderfn)\[] | story decorator functions - used to wrap stories example: \[story => <ThemeProvider>{story()}</ThemeProvider>] | +| `pages` | [PagesConfiguration](#pagesconfiguration) | page types configurations | +| `siteDescription` | string | site description. siteDescription: Default is "Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site." | +| `siteHeadline` | string | Site headline. Default is "Component controls gatsby" | +| `siteImage` | string | link to site image | +| `siteLanguage` | string | site language, Deault is "en" | +| `siteTitle` | string | standalone site title. Default is "Component controls" | +| `siteTitleAlt` | string | site alt for images. Default is "Component controls - https://github.com/ccontrols/component-controls" | +| `siteUrl` | string | Deployed site url. Default is "https://component-controls-gatsby.netlify.app" | +| `storySort` | **function** (`a`\*: string, `b`\*: string): number; | story sorting function | +| `theme` | \[key: string]: any | theme-ui theme configuration | + +## TabConfiguration + +story type pages can have multiple tabs with separate page configurations. + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L8)_ + + + +### properties + +| Name | Type | Description | +| -------- | ------------------------------------------------------- | --------------------------------------------------------------------- | +| `render` | **function** (`props`\*: any): [ReactNode](#reactnode); | render function, returns a react component | +| `route` | string | tab route string | +| `title*` | string | title will be used as tab caption | +| `type` | string | page container type - a key into the component-controls/pages package | + +## PageTabs + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L27)_ + +[TabConfiguration](#tabconfiguration)\[] + +## PageType + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L29)_ + +'story' | 'blog' | 'page' | 'tags' | 'author' + +## PagesConfiguration + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L68)_ + +Record< + +[PageType](#pagetype) + +, + +[PageConfiguration](#pageconfiguration) + +> + +## PagesOnlyRoutes + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L76)_ + +Record< + +[PageType](#pagetype) + +, + +### properties + +| Name | Type | Description | +| ------ | ------------------------------------------------------------ | ----------- | +| `Pick` | Pick<[PageConfiguration](#pageconfiguration), 'basePath'> | | +| `tabs` | Pick<[TabConfiguration](#tabconfiguration), 'route'>\[] | | + +> + +## RunConfiguration + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L174)_ + +### properties + +| Name | Type | Description | +| ---------------------- | ----------------------------------------------------------- | ----------- | +| `RunOnlyConfiguration` | [RunOnlyConfiguration](#runonlyconfiguration) | | +| `Omit` | Omit<[BuildConfiguration](#buildconfiguration), 'pages'> | | + +## WebpackConfig + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L74)_ + +[WebpackConfiguration](#webpackconfiguration) \| [WebpackConfigFn](#webpackconfigfn) + +## WebpackConfigFn + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L70)_ + +**function** (`config`\*: [WebpackConfiguration](#webpackconfiguration), `options`: any): [WebpackConfiguration](#webpackconfiguration); + +### parameters + +| Name | Type | Description | +| --------- | --------------------------------------------- | ----------- | +| `config*` | [WebpackConfiguration](#webpackconfiguration) | | +| `options` | any | | +| `returns` | [WebpackConfiguration](#webpackconfiguration) | | + +## defaultBuildConfig + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L215)_ + + + +### properties + +| Name | Type | Description | +| ------------- | --------------------- | ----------- | +| `categories*` | 'tags' \| 'author'\[] | | +| `pages*` | object | | + +## defaultRunConfig + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L177)_ + + + +### properties + +| Name | Type | Description | +| ------------------ | ------ | ----------- | +| `author*` | string | | +| `siteDescription*` | string | | +| `siteHeadline*` | string | | +| `siteLanguage*` | string | | +| `siteTitle*` | string | | +| `siteTitleAlt*` | string | | +| `siteUrl*` | string | | +| `pages*` | object | | + +## StoryRenderFn + +story render function + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L98)_ + +**function** (`controlValues`\*: \[key: string]: any, `context`: any): any; + +### parameters + +| Name | Type | Description | +| ---------------- | ------------------- | ----------- | +| `controlValues*` | \[key: string]: any | | +| `context` | any | | +| `returns` | any | | + +## PageType + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L29)_ + +'story' | 'blog' | 'page' | 'tags' | 'author' + +## RunConfiguration + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L174)_ + +### properties + +| Name | Type | Description | +| ---------------------- | ----------------------------------------------------------- | ----------- | +| `RunOnlyConfiguration` | [RunOnlyConfiguration](#runonlyconfiguration) | | +| `Omit` | Omit<[BuildConfiguration](#buildconfiguration), 'pages'> | | + +## StoryArguments + +list of story arguments. Each argument can be a deconstructed argument of itself +the first argument are the control 'values' + +_defined in [@component-controls/core/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/stories.ts#L60)_ + +[StoryArgument](#storyargument)\[] + +## PagesOnlyRoutes + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L76)_ + +Record< + +[PageType](#pagetype) + +, + +### properties + +| Name | Type | Description | +| ------ | ------------------------------------------------------------ | ----------- | +| `Pick` | Pick<[PageConfiguration](#pageconfiguration), 'basePath'> | | +| `tabs` | Pick<[TabConfiguration](#tabconfiguration), 'route'>\[] | | + +> + +## ComponentControl + +ComponentControl is a either an object of property settings +or a shortcut can be used: + properties: { + text: 'Hello', +}, + +_defined in [@component-controls/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L371)_ + +[ComponentControlText](#componentcontroltext) \| [ComponentControlBoolean](#componentcontrolboolean) \| [ComponentControlColor](#componentcontrolcolor) \| [ComponentControlDate](#componentcontroldate) \| [ComponentControlObject](#componentcontrolobject) \| [ComponentControlButton](#componentcontrolbutton) \| [ComponentControlOptions](#componentcontroloptions) \| [ComponentControlNumber](#componentcontrolnumber) \| [ComponentControlArray](#componentcontrolarray) \| [ComponentControlFiles](#componentcontrolfiles) + +## TypeValue + +_defined in [@component-controls/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L3)_ + +'any' | 'boolean' | 'number' | 'string' | 'array' | 'object' | 'enum' | 'union' | 'literal' | 'symbol' | 'function' | string + +## PackageDependency + +dependecy string - the package version number + +_defined in [@component-controls/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L44)_ + +string + +## WebpackConfig + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L74)_ + +[WebpackConfiguration](#webpackconfiguration) \| [WebpackConfigFn](#webpackconfigfn) + +## PageTabs + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L27)_ + +[TabConfiguration](#tabconfiguration)\[] + +## PagesConfiguration + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L68)_ + +Record< + +[PageType](#pagetype) + +, + +[PageConfiguration](#pageconfiguration) + +> + +## WebpackConfigFn + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L70)_ + +**function** (`config`\*: [WebpackConfiguration](#webpackconfiguration), `options`: any): [WebpackConfiguration](#webpackconfiguration); + +### parameters + +| Name | Type | Description | +| --------- | --------------------------------------------- | ----------- | +| `config*` | [WebpackConfiguration](#webpackconfiguration) | | +| `options` | any | | +| `returns` | [WebpackConfiguration](#webpackconfiguration) | | + +## PageType + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L29)_ + +'story' | 'blog' | 'page' | 'tags' | 'author' + diff --git a/core/store/README.md b/core/store/README.md index db5ed1782..3e4d88504 100644 --- a/core/store/README.md +++ b/core/store/README.md @@ -3,6 +3,9 @@ - [Overview](#overview) - [Installation](#installation) - [API](#api) + - [Store](#store) + - [StoreOptions](#storeoptions) + - [StoreObserver](#storeobserver) # Overview @@ -22,4 +25,67 @@ $ npm install @component-controls/store --save-dev +## Store + +Store class used to query the stories and exchange information between processes + +_defined in [@component-controls/store/src/Store/Store.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/Store/Store.ts#L36)_ + + + +### properties + +| Name | Type | Description | +| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | +| `constructor*` | **function** constructor | create a store with options | +| `config*` | **function** config | returns the run time configuration object. | +| `pages*` | **function** pages | returns all pages(documents) in the store | +| `addObserver*` | **function** addObserver(`observer`\*: [StoreObserver](#storeobserver)): number; | add observer callback function | +| `getFirstDocument*` | **function** getFirstDocument(`pageType`\*: [PageType](#pagetype)): string \| undefined; | | +| `getNextPage*` | **function** getNextPage(`type`\*: [PageType](#pagetype) \| undefined, `docId`\*: string): [Document](#document) \| undefined; | returns the next page of the same type. | +| `getPageList*` | **function** getPageList(`type`\*: [PageType](#pagetype)): [Pages](#pages); | returns all the documents/pages of a certain type. | +| `getPagePath*` | **function** getPagePath(`pageType`\*: [PageType](#pagetype) \| undefined, `name`\*: string, `activeTab`: string): string; | returns the url path to a document. | +| `getPagesByCategory*` | **function** getPagesByCategory(`category`\*: string, `value`: any): [Pages](#pages); | returns all the documents/pages of a certain category value. | +| `getPrevPage*` | **function** getPrevPage(`type`\*: [PageType](#pagetype) \| undefined, `docId`\*: string): [Document](#document) \| undefined; | returns the previous page of the same type. | +| `getStore*` | **function** getStore(): [StoriesStore](#storiesstore); | returns an instance of the store | +| `getStory*` | **function** getStory(`storyId`\*: string): [Story](#story); | given a story id return a story from the store | +| `getStoryDoc*` | **function** getStoryDoc(`name`\*: string): [Document](#document); | given a story doc file title, return a story doc file from the store | +| `getStoryPath*` | **function** getStoryPath(`storyId`\*: string, `activeTab`: string): string; | returns the url path to a story. | +| `getUniquesByCategory*` | **function** getUniquesByCategory(`category`\*: string): \[key: string]: number; | returns all the unique category values (and their cound) for a category field. | +| `initDocs*` | **function** initDocs(): void; | sort documents if a sortfunction is provided. separate docs and blogs | +| `removeObserver*` | **function** removeObserver(`observer`\*: [StoreObserver](#storeobserver)): **function** (`storyId`: string, `propName`: string): void;\[]; | remove installed observer callback function | +| `setStore*` | **function** setStore(`store`: [StoriesStore](#storiesstore)): void; | internal set store, use for testing with mockup store. | +| `updateStoryProp*` | **function** updateStoryProp(`storyId`\*: string, `propName`\*: string, `newValue`\*: any): [StoriesStore](#storiesstore) \| undefined; | modify story properties, for example controls values. will notify all installed store observers of the changed story. | + +## StoreOptions + +_defined in [@component-controls/store/src/Store/Store.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/Store/Store.ts#L23)_ + + + +### properties + +| Name | Type | Description | +| -------------------- | ----------------------------- | ------------------------------------------------------------------- | +| `store` | [StoriesStore](#storiesstore) | optional store initializer | +| `updateLocalStorage` | boolean | set to false to prevent the Store from updating localStorage values | + +## StoreObserver + +store on change observer. +when updateStoryProp is called on the store, the store observers will be notified +so they can re-load the stories + +_defined in [@component-controls/store/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/types.ts#L15)_ + +**function** (`storyId`: string, `propName`: string): void; + +### parameters + +| Name | Type | Description | +| ---------- | ------ | ----------- | +| `storyId` | string | | +| `propName` | string | | +| `returns` | void | | + diff --git a/core/webpack-compile/README.md b/core/webpack-compile/README.md index 316c60dda..176dbf192 100644 --- a/core/webpack-compile/README.md +++ b/core/webpack-compile/README.md @@ -4,6 +4,11 @@ - [Installation](#installation) - [Usage](#usage) - [API](#api) + - [compile](#compile) + - [watch](#watch) + - [CompileProps](#compileprops) + - [CompileResults](#compileresults) + - [WatchProps](#watchprops) # Overview @@ -30,4 +35,81 @@ $ npm install @component-controls/webpack-compile --save-dev +## compile + +compile the stories with webpack +returns the stories store object + +_defined in [@component-controls/webpack-compile/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/index.ts#L8)_ + +**function** compile(`__namedParameters`\*: **bundleAnalyzer**: boolean**configPath**: string**presets**: string | [RuleOptions](#ruleoptions)\[]**webPack**: [Configuration](#configuration)): Promise<[CompileResults](#compileresults)>; + +### parameters + +| Name | Type | Description | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `__namedParameters*` | **bundleAnalyzer**: boolean**configPath**: string**presets**: string \| [RuleOptions](#ruleoptions)\[]**webPack**: [Configuration](#configuration) | | +| `returns` | Promise<[CompileResults](#compileresults)> | | + +## watch + +compile the stories with webpack and launch watching for changes +returns the stories store object + +_defined in [@component-controls/webpack-compile/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/index.ts#L27)_ + +**function** watch(`__namedParameters`\*: **bundleAnalyzer**: boolean**configPath**: string**presets**: string | [RuleOptions](#ruleoptions)\[]**watchOptions**: [WatchOptions](#watchoptions)**webPack**: [Configuration](#configuration)): Promise<[CompileResults](#compileresults)>; + +### parameters + +| Name | Type | Description | +| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `__namedParameters*` | **bundleAnalyzer**: boolean**configPath**: string**presets**: string \| [RuleOptions](#ruleoptions)\[]**watchOptions**: [WatchOptions](#watchoptions)**webPack**: [Configuration](#configuration) | | +| `returns` | Promise<[CompileResults](#compileresults)> | | + +## CompileProps + +configuration properties for compile and run + +_defined in [@component-controls/webpack-compile/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/types.ts#L8)_ + + + +### properties + +| Name | Type | Description | +| ---------------- | ------------------------------- | --------------------------------------------------------------------- | +| `bundleAnalyzer` | boolean | if true, will display webpack analyzer results | +| `configPath` | string | path to the configuration file e.g : '.storybook' | +| `presets` | [RuleTypes](#ruletypes) | a list of webpack configuration presets from webpack-configs packages | +| `webPack` | [Configuration](#configuration) | webpack configuration object | + +## CompileResults + +return type from compile and watch functions + +_defined in [@component-controls/webpack-compile/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/types.ts#L31)_ + + + +### properties + +| Name | Type | Description | +| -------- | ----------------------------- | ------------------------ | +| `stats*` | [Stats](#stats) | the webpack stats object | +| `store*` | [LoadingStore](#loadingstore) | the stories store | + +## WatchProps + +adds webpack WatchOptions to the Compiler options + +_defined in [@component-controls/webpack-compile/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/types.ts#L45)_ + +### properties + +| Name | Type | Description | +| -------------- | ----------------------------- | ----------- | +| `watchOptions` | [WatchOptions](#watchoptions) | | +| `CompileProps` | [CompileProps](#compileprops) | | + diff --git a/props-info/react-docgen-typescript/README.md b/props-info/react-docgen-typescript/README.md index 156b88e41..3f7621101 100644 --- a/props-info/react-docgen-typescript/README.md +++ b/props-info/react-docgen-typescript/README.md @@ -3,6 +3,21 @@ - [Overview](#overview) - [Installation](#installation) - [API](#api) + - [run](#run) + - [RectDocgenTypescriptOptions](#rectdocgentypescriptoptions) + - [ComponentDoc](#componentdoc) + - [ParserOptions](#parseroptions) + - [Method](#method) + - [Props](#props) + - [ComponentNameResolver](#componentnameresolver) + - [StaticPropFilter](#staticpropfilter) + - [PropFilter](#propfilter) + - [MethodParameter](#methodparameter) + - [PropItem](#propitem) + - [Component](#component) + - [MethodParameterType](#methodparametertype) + - [ParentType](#parenttype) + - [PropItemType](#propitemtype) # Overview @@ -24,4 +39,210 @@ $ npm install @component-controls/react-docgen-typescript-info --save-dev +## run + +run API to generate react-docgen-typescript props information tables. + +_defined in [@component-controls/react-docgen-typescript-info/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen-typescript/src/index.ts#L14)_ + +**function** run(`options`: [RectDocgenTypescriptOptions](#rectdocgentypescriptoptions)): [PropsInfoExtractorFunction](#propsinfoextractorfunction); + +### parameters + +| Name | Type | Description | +| --------- | ----------------------------------------------------------- | ------------------------------------------------------- | +| `options` | [RectDocgenTypescriptOptions](#rectdocgentypescriptoptions) | configuration options | +| `returns` | [PropsInfoExtractorFunction](#propsinfoextractorfunction) | a callable function of type PropsInfoExtractorFunction | + +## RectDocgenTypescriptOptions + +a callback to transfor them props table and the options to be passd to react-docgen-typescript. + +_defined in [@component-controls/react-docgen-typescript-info/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen-typescript/src/types.ts#L6)_ + +### properties + +| Name | Type | Description | +| ---------------- | ------------------------------------------------------------------------------------------ | ------------------------------------- | +| `transformProps` | **function** (`props`\*: [ComponentDoc](#componentdoc)\[]): [ComponentDoc](#componentdoc); | callback to transform the props table | +| `ParserOptions` | [ParserOptions](#parseroptions) | | + +## ComponentDoc + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| -------------- | -------------------- | ----------- | +| `description*` | string | | +| `displayName*` | string | | +| `methods*` | [Method](#method)\[] | | +| `props*` | [Props](#props) | | + +## ParserOptions + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| ------------------------------------ | ------------------------------------------------------------------ | ----------- | +| `componentNameResolver` | [ComponentNameResolver](#componentnameresolver) | | +| `propFilter` | [StaticPropFilter](#staticpropfilter) \| [PropFilter](#propfilter) | | +| `savePropValueAsString` | boolean | | +| `shouldExtractLiteralValuesFromEnum` | boolean | | +| `shouldExtractValuesFromUnion` | boolean | | +| `shouldRemoveUndefinedFromOptional` | boolean | | + +## Method + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| -------------- | ------------------------------------------------------- | ----------- | +| `description*` | string | | +| `docblock*` | string | | +| `modifiers*` | string\[] | | +| `name*` | string | | +| `params*` | [MethodParameter](#methodparameter)\[] | | +| `returns` | **description**: string \| null**type**: string \| null | | + +## Props + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + +** extends StringIndexedObject<[PropItem](#propitem)>**`key`\*: string: [PropItem](#propitem) + +## ComponentNameResolver + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + +**function** (`exp`\*: [Symbol](#symbol), `source`\*: [SourceFile](#sourcefile)): string | undefined | null | false; + +### parameters + +| Name | Type | Description | +| --------- | ------------------------------------ | ----------- | +| `exp*` | [Symbol](#symbol) | | +| `source*` | [SourceFile](#sourcefile) | | +| `returns` | string \| undefined \| null \| false | | + +## StaticPropFilter + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| --------------------- | ------------------- | ----------- | +| `skipPropsWithName` | string\[] \| string | | +| `skipPropsWithoutDoc` | boolean | | + +## PropFilter + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + +**function** (`props`\*: [PropItem](#propitem), `component`\*: [Component](#component)): boolean; + +### parameters + +| Name | Type | Description | +| ------------ | ----------------------- | ----------- | +| `props*` | [PropItem](#propitem) | | +| `component*` | [Component](#component) | | +| `returns` | boolean | | + +## MethodParameter + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| ------------- | ------------------------------------------- | ----------- | +| `description` | string \| null | | +| `name*` | string | | +| `type*` | [MethodParameterType](#methodparametertype) | | + +## PropItem + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| --------------- | ----------------------------- | ----------- | +| `defaultValue*` | any | | +| `description*` | string | | +| `name*` | string | | +| `parent` | [ParentType](#parenttype) | | +| `required*` | boolean | | +| `type*` | [PropItemType](#propitemtype) | | + +## Component + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| ------- | ------ | ----------- | +| `name*` | string | | + +## MethodParameterType + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| ------- | ------ | ----------- | +| `name*` | string | | + +## ParentType + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| ----------- | ------ | ----------- | +| `fileName*` | string | | +| `name*` | string | | + +## PropItemType + +_defined in [react-docgen-typescript/lib/parser.d.ts](https://github.com/styleguidist/react-docgen-typescript)_ + + + +### properties + +| Name | Type | Description | +| ------- | ------ | ----------- | +| `name*` | string | | +| `raw` | string | | +| `value` | any | | + diff --git a/props-info/react-docgen/README.md b/props-info/react-docgen/README.md index 010c350b5..93d8e729a 100644 --- a/props-info/react-docgen/README.md +++ b/props-info/react-docgen/README.md @@ -3,6 +3,21 @@ - [Overview](#overview) - [Installation](#installation) - [API](#api) + - [run](#run) + - [RectDocgenOptions](#rectdocgenoptions) + - [HandlerType](#handlertype) + - [OptionsType](#optionstype) + - [ResolverType](#resolvertype) + - [Documentation](#documentation) + - [NodePath](#nodepath) + - [ASTNode](#astnode) + - [ParserOptions](#parseroptions) + - [Scope](#scope) + - [ParserPlugin](#parserplugin) + - [ParserPluginWithOptions](#parserpluginwithoptions) + - [DecoratorsPluginOptions](#decoratorspluginoptions) + - [PipelineOperatorPluginOptions](#pipelineoperatorpluginoptions) + - [FlowPluginOptions](#flowpluginoptions) # Overview @@ -24,4 +39,203 @@ $ npm install @component-controls/react-docgen-info --save-dev +## run + +run API to generate react-docgen props information tables. + +_defined in [@component-controls/react-docgen-info/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen/src/index.ts#L15)_ + +**function** run(`options`: [RectDocgenOptions](#rectdocgenoptions)): [PropsInfoExtractorFunction](#propsinfoextractorfunction); + +### parameters + +| Name | Type | Description | +| --------- | --------------------------------------------------------- | ------------------------------------------------------- | +| `options` | [RectDocgenOptions](#rectdocgenoptions) | configuration options | +| `returns` | [PropsInfoExtractorFunction](#propsinfoextractorfunction) | a callable function of type PropsInfoExtractorFunction | + +## RectDocgenOptions + +_defined in [@component-controls/react-docgen-info/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen/src/types.ts#L49)_ + + + +### properties + +| Name | Type | Description | +| ---------- | ------------------------------ | ----------- | +| `handlers` | [HandlerType](#handlertype)\[] | | +| `options` | [OptionsType](#optionstype) | | +| `resolver` | [ResolverType](#resolvertype) | | + +## HandlerType + +_defined in [@component-controls/react-docgen-info/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen/src/types.ts#L43)_ + +**function** (`documentation`\*: [Documentation](#documentation), `definition`\*: [NodePath](#nodepath), `parser`\*: **parse**: **function** (`source`\*: string): [ASTNode](#astnode);): void; + +### parameters + +| Name | Type | Description | +| ---------------- | ------------------------------------------------------------------ | ----------- | +| `documentation*` | [Documentation](#documentation) | | +| `definition*` | [NodePath](#nodepath) | | +| `parser*` | **parse**: **function** (`source`\*: string): [ASTNode](#astnode); | | +| `returns` | void | | + +## OptionsType + +_defined in [@component-controls/react-docgen-info/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen/src/types.ts#L32)_ + + + +### properties + +| Name | Type | Description | +| --------------- | ------------------------------- | ----------- | +| `babelrc` | boolean | | +| `babelrcRoots` | boolean | | +| `configFile` | boolean | | +| `cwd` | string | | +| `envName` | boolean | | +| `filename` | string | | +| `parserOptions` | [ParserOptions](#parseroptions) | | +| `root` | boolean | | +| `rootMode` | boolean | | + +## ResolverType + +_defined in [@component-controls/react-docgen-info/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen/src/types.ts#L27)_ + +**function** (`ast`\*: [ASTNode](#astnode), `parser`\*: **parse**: **function** (`srource`\*: string): [ASTNode](#astnode);): [NodePath](#nodepath) \| [NodePath](#nodepath)\[]; + +### parameters + +| Name | Type | Description | +| --------- | ------------------------------------------------------------------- | ----------- | +| `ast*` | [ASTNode](#astnode) | | +| `parser*` | **parse**: **function** (`srource`\*: string): [ASTNode](#astnode); | | +| `returns` | [NodePath](#nodepath) \| [NodePath](#nodepath)\[] | | + +## Documentation + +_defined in [@component-controls/react-docgen-info/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen/src/types.ts#L25)_ + +any + +## NodePath + +_defined in [@component-controls/react-docgen-info/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen/src/types.ts#L13)_ + + + +### properties + +| Name | Type | Description | +| ------------- | ------------------------------------------------------------------------------------------------------------ | ----------- | +| `node*` | [ASTNode](#astnode) | | +| `parent*` | [NodePath](#nodepath) | | +| `parentPath*` | [NodePath](#nodepath) | | +| `scope*` | [Scope](#scope) | | +| `value*` | [ASTNode](#astnode) \| [ASTNode](#astnode)\[] | | +| `each*` | **function** each(`f`\*: **function** (`p`\*: [NodePath](#nodepath)): any;): any; | | +| `filter*` | **function** filter(`f`\*: **function** (`p`\*: [NodePath](#nodepath)): boolean;): [NodePath](#nodepath)\[]; | | +| `get*` | **function** get(`x`\*: string \| number\[]): [NodePath](#nodepath); | | +| `map*` | **function** map(`f`\*: **function** (`p`\*: [NodePath](#nodepath)): ;): \[]; | | +| `push*` | **function** push(`node`\*: [ASTNode](#astnode)): void; | | + +## ASTNode + +_defined in [@component-controls/react-docgen-info/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen/src/types.ts#L3)_ + +object + +## ParserOptions + +_defined in [@babel/parser/typings/babel-parser.d.ts](https://github.com/babel/babel/tree/master/packages/babel-parser)_ + + + +### properties + +| Name | Type | Description | +| -------------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `allowAwaitOutsideFunction` | boolean | By default, await use is not allowed outside of an async function. Set this to true to accept such code. | +| `allowImportExportEverywhere` | boolean | By default, import and export declarations can only appear at a program's top level. Setting this option to true allows them anywhere where a statement is allowed. | +| `allowReturnOutsideFunction` | boolean | By default, a return statement at the top level raises an error. Set this to true to accept such code. | +| `allowSuperOutsideMethod` | boolean | | +| `allowUndeclaredExports` | boolean | By default, exported identifiers must refer to a declared variable. Set this to true to allow export statements to reference undeclared variables. | +| `createParenthesizedExpressions` | boolean | By default, the parser adds information about parentheses by setting \`extra.parenthesized\` to \`true\` as needed. When this option is \`true\` the parser creates \`ParenthesizedExpression\` AST nodes instead of using the \`extra\` property. | +| `plugins` | [ParserPlugin](#parserplugin)\[] | Array containing the plugins that you want to enable. | +| `ranges` | boolean | Adds a ranges property to each node: \[node.start, node.end] | +| `sourceFilename` | string | Correlate output AST nodes with their source filename. Useful when generating code and source maps from the ASTs of multiple input files. | +| `sourceType` | 'script' \| 'module' \| 'unambiguous' | Indicate the mode the code should be parsed in. Can be one of "script", "module", or "unambiguous". Defaults to "script". "unambiguous" will make @babel/parser attempt to guess, based on the presence of ES6 import or export statements. Files with ES6 imports and exports are considered "module" and are otherwise "script". | +| `startLine` | number | By default, the first line of code parsed is treated as line 1. You can provide a line number to alternatively start with. Useful for integration with other source tools. | +| `strictMode` | boolean | Should the parser work in strict mode. Defaults to true if sourceType === 'module'. Otherwise, false. | +| `tokens` | boolean | Adds all parsed tokens to a tokens property on the File node. | + +## Scope + +_defined in [@component-controls/react-docgen-info/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/props-info/react-docgen/src/types.ts#L5)_ + + + +### properties + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------- | ----------- | +| `getBindings*` | **function** (): \[key: string]: [NodePath](#nodepath)\[]; | | +| `getTypes*` | **function** (): \[key: string]: [NodePath](#nodepath)\[]; | | +| `lookup*` | **function** (`name`\*: string): [Scope](#scope) \| undefined; | | +| `lookupType*` | **function** (`name`\*: string): [Scope](#scope) \| undefined; | | +| `node*` | [NodePath](#nodepath) | | + +## ParserPlugin + +_defined in [@babel/parser/typings/babel-parser.d.ts](https://github.com/babel/babel/tree/master/packages/babel-parser)_ + +'asyncGenerators' | 'bigInt' | 'classPrivateMethods' | 'classPrivateProperties' | 'classProperties' | 'decorators' | 'decorators-legacy' | 'doExpressions' | 'dynamicImport' | 'estree' | 'exportDefaultFrom' | 'exportNamespaceFrom' | 'flow' | 'flowComments' | 'functionBind' | 'functionSent' | 'importMeta' | 'jsx' | 'logicalAssignment' | 'moduleAttributes' | 'nullishCoalescingOperator' | 'numericSeparator' | 'objectRestSpread' | 'optionalCatchBinding' | 'optionalChaining' | 'partialApplication' | 'pipelineOperator' | 'placeholders' | 'privateIn' | 'throwExpressions' | 'topLevelAwait' | 'typescript' | 'v8intrinsic' | [ParserPluginWithOptions](#parserpluginwithoptions) + +## ParserPluginWithOptions + +_defined in [@babel/parser/typings/babel-parser.d.ts](https://github.com/babel/babel/tree/master/packages/babel-parser)_ + +\['decorators', [DecoratorsPluginOptions](#decoratorspluginoptions)] \| \['pipelineOperator', [PipelineOperatorPluginOptions](#pipelineoperatorpluginoptions)] \| \['flow', [FlowPluginOptions](#flowpluginoptions)] + +## DecoratorsPluginOptions + +_defined in [@babel/parser/typings/babel-parser.d.ts](https://github.com/babel/babel/tree/master/packages/babel-parser)_ + + + +### properties + +| Name | Type | Description | +| ------------------------ | ------- | ----------- | +| `decoratorsBeforeExport` | boolean | | + +## PipelineOperatorPluginOptions + +_defined in [@babel/parser/typings/babel-parser.d.ts](https://github.com/babel/babel/tree/master/packages/babel-parser)_ + + + +### properties + +| Name | Type | Description | +| ----------- | -------------------- | ----------- | +| `proposal*` | 'minimal' \| 'smart' | | + +## FlowPluginOptions + +_defined in [@babel/parser/typings/babel-parser.d.ts](https://github.com/babel/babel/tree/master/packages/babel-parser)_ + + + +### properties + +| Name | Type | Description | +| ----- | ------- | ----------- | +| `all` | boolean | | +