# @component-controls/core > Component controls core types and utility functions Latest version **4.0.3** (published 2022-01-14) · MIT license · 0 weekly downloads ## Install ```sh npm install @component-controls/core pnpm add @component-controls/core yarn add @component-controls/core bun add @component-controls/core ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.0.3 | | Published | 2022-01-14 | | First published | 2020-02-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 12 | | Unpacked size | 570.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 82 | | Maintainers | atanasster | ## Links - npm: https://www.npmjs.com/package/@component-controls/core - Repository: https://github.com/ccontrols/component-controls - Issues: https://github.com/ccontrols/component-controls/issues - npm.io page: https://npm.io/package/@component-controls/core ## Dependencies (12) - [esm](https://npm.io/package/esm.md) ^3.2.25 - [tmp](https://npm.io/package/tmp.md) ^0.2.1 - [path](https://npm.io/package/path.md) ^0.12.7 - [faker](https://npm.io/package/faker.md) ^4.1.0 - [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2 - [typescript](https://npm.io/package/typescript.md) ^4.2.4 - [escape-html](https://npm.io/package/escape-html.md) ^1.0.3 - [@babel/types](https://npm.io/package/@babel/types.md) ^7.12.6 - [@storybook/csf](https://npm.io/package/@storybook/csf.md) ^0.0.1 - [@component-controls/logger](https://npm.io/package/@component-controls/logger.md) ^4.0.3 - [@component-controls/follow-imports](https://npm.io/package/@component-controls/follow-imports.md) ^4.0.3 - [@structured-types/typescript-config](https://npm.io/package/@structured-types/typescript-config.md) ^3.16.2 ## Recent versions - 4.0.3 (latest) — 2022-01-14 - 3.14.6 — 2021-05-20 - 3.14.5 — 2021-05-19 - 3.14.2 — 2021-05-18 - 3.14.0 — 2021-05-17 - 3.13.0 — 2021-05-17 - 3.12.0 — 2021-05-13 - 3.11.4 — 2021-05-11 - 3.11.0 — 2021-05-10 - 3.10.3 — 2021-05-09 - 3.10.2 — 2021-05-09 - 3.10.0 — 2021-05-08 - 3.9.0 — 2021-04-30 - 3.8.2 — 2021-04-30 - 3.8.0 — 2021-04-29 - … 110 more at https://npm.io/package/@component-controls/core/versions ## README # Table of contents - [Overview](#overview) - [Installation](#installation) - [API](#api) - [SourceIdentifier](#sourceidentifier) - [ArgUsageLocation](#argusagelocation) - [StoryArgument](#storyargument) - [StoryArguments](#storyarguments) - [Story](#story) - [DynamicExamples](#dynamicexamples) - [ExampleControl](#examplecontrol) - [ExampleControls](#examplecontrols) - [Example](#example) - [DocumentData](#documentdata) - [StoryFactoryFn](#storyfactoryfn) - [defDocType](#defdoctype) - [Document](#document) - [dateToLocalString](#datetolocalstring) - [DocInfo](#docinfo) - [Documents](#documents) - [Pages](#pages) - [Stories](#stories) - [Packages](#packages) - [StoreObserver](#storeobserver) - [CURRENT_STORY](#current_story) - [Store](#store) - [getDefaultStore](#getdefaultstore) - [assignProps](#assignprops) - [ComponentControlData](#componentcontroldata) - [ComponentControlBase](#componentcontrolbase) - [ComponentControlText](#componentcontroltext) - [ComponentControlBoolean](#componentcontrolboolean) - [ColorPickerKind](#colorpickerkind) - [ComponentControlColor](#componentcontrolcolor) - [ComponentControlDate](#componentcontroldate) - [ComponentControlFiles](#componentcontrolfiles) - [ComponentControlArray](#componentcontrolarray) - [ComponentControlObject](#componentcontrolobject) - [ComponentControlButton](#componentcontrolbutton) - [OptionsValueType](#optionsvaluetype) - [OptionsListType](#optionslisttype) - [ComponentControlOptions](#componentcontroloptions) - [ComponentControlNumber](#componentcontrolnumber) - [ComponentControl](#componentcontrol) - [ComponentControls](#componentcontrols) - [ControlTypes](#controltypes) - [TypeValue](#typevalue) - [TypeInformation](#typeinformation) - [PropType](#proptype) - [PropTypes](#proptypes) - [ComponentInfo](#componentinfo) - [JSXNode](#jsxnode) - [JSXTree](#jsxtree) - [Component](#component) - [Components](#components) - [getComponentName](#getcomponentname) - [PropsInfoExtractorFunction](#propsinfoextractorfunction) - [ImportType](#importtype) - [ImportTypes](#importtypes) - [CodePosition](#codeposition) - [CodeLocation](#codelocation) - [PackageRepository](#packagerepository) - [PackageDependency](#packagedependency) - [PackageDependencies](#packagedependencies) - [PackageInfo](#packageinfo) - [StoryRenderFn](#storyrenderfn) - [Imports](#imports) - [defaultExport](#defaultexport) - [ActionItem](#actionitem) - [ActionItems](#actionitems) - [AsyncFnReturn](#asyncfnreturn) - [useAsync](#useasync) - [isLocalImport](#islocalimport) - [FrameworkRenderFn](#frameworkrenderfn) - [TabConfiguration](#tabconfiguration) - [PageTab](#pagetab) - [PageTabs](#pagetabs) - [loadDefaultExport](#loaddefaultexport) - [loadPageTab](#loadpagetab) - [DocType](#doctype) - [PageLayoutProps](#pagelayoutprops) - [SideNavConfiguration](#sidenavconfiguration) - [PageConfiguration](#pageconfiguration) - [PagesConfiguration](#pagesconfiguration) - [PagesOnlyRoutes](#pagesonlyroutes) - [SitemapConfigPage](#sitemapconfigpage) - [SitemapConfig](#sitemapconfig) - [BuildConfiguration](#buildconfiguration) - [ToolbarConfig](#toolbarconfig) - [StaticMenuItem](#staticmenuitem) - [StaticMenuItems](#staticmenuitems) - [RuntimeConfiguration](#runtimeconfiguration) - [RunConfiguration](#runconfiguration) - [defaultBuildConfig](#defaultbuildconfig) - [defaultRunConfig](#defaultrunconfig) - [convertConfig](#convertconfig) - [RuleOptions](#ruleoptions) - [RuleType](#ruletype) - [RuleTypes](#ruletypes) - [PresetCallback](#presetcallback) - [PresetType](#presettype) - [WebpackLoader](#webpackloader) - [WebpackLoaderConfig](#webpackloaderconfig) - [BuildProps](#buildprops) - [customLoaderOptions](#customloaderoptions) - [defaultCompileProps](#defaultcompileprops) - [WatchOptions](#watchoptions) - [WatchProps](#watchprops) - [defBundleName](#defbundlename) - [defCssFileName](#defcssfilename) # Overview Type definitions of the component-controls specification and accompanying utility functions. Includes definitions for: - [Story](#story) - [Stories](#stories) - [Document](#document) - [ControlTypes](#controltypes) - [ComponentControl](#componentcontrol) - [PropTypes](#proptypes) - and more... # Installation This package is usually installed as part of the @component-controls package, but you can also install it standalone: ```bash $ npm install @component-controls/core --save-dev ``` # API ## SourceIdentifier **`interface`** an identifier/variable.argument in the source code _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L17)_ **properties** | Name | Type | Description | | ------- | ------------------------------- | -------------------------------------------------------------------------------------- | | `name*` | `string` | | | `loc` | [`CodeLocation`](#codelocation) | location in the source code of a story or part of it ie. arguments, usage of arguments | ## ArgUsageLocation **`interface`** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L21)_ **properties** | Name | Type | Description | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | `loc*` |
`SourceLocation`
`start`\*
`line`\*: `number`
`column`\*: `number`
`end`\*
`line`\*: `number`
`column`\*: `number`
| where in the story source code is the argument used code location is relative to the start of the story | | `name` | [`SourceIdentifier`](#sourceidentifier) | an identifier/variable.argument in the source code | | `shorthand` | `boolean` | true if the property is a 'shorthand'. { prop: value } - not a shorthand. { prop } - a shorthand. | ## StoryArgument **`interface`** arguments passed to the 'story' function, extracted by an AST loader _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L45)_ **properties** | Name | Type | Description | | -------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------ | | `value*` | `string` \| [`StoryArguments`](#storyarguments) | either the name used (or a variable alias), or an array of sub-arguments ({ name: alias }) | | `name` | `string` | the original name of the argument | | `loc` | [`CodeLocation`](#codelocation) | location in the source code of a story or part of it ie. arguments, usage of arguments | | `usage` | [`ArgUsageLocation`](#argusagelocation)\[] | list of locations where the argument is used in the body of the story | ## StoryArguments **`array`** 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/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L69)_ **properties** | Name | Type | Description | | ------------- | --------------------------------- | -------------------------------------------------------------------- | | _anonymous\*_ | [`StoryArgument`](#storyargument) | arguments passed to the 'story' function, extracted by an AST loader | ## Story **`type`** Story interface - usually extracted by the AST instrumenting loader _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L74)_ **properties** | Name | Type | Parent | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `name*` | `string` | | name of the Story. | | `storyName` | `string` | | alternative name prop | | `id` | `string` | | id of the story | | `rawId` | `string` | | raw id for the story as declared in ESM format | | `doc` | `string` | | title of the file/group of stories | | `storyFn` | [`StoryRenderFn`](#storyrenderfn) | | story render function | | `description` | `string` | | story extended description. can use markdown. | | `arguments` | [`StoryArguments`](#storyarguments) | | list of story arguments. Each argument can be a deconstructed argument of itself the first argument are the control 'values' | | `loc` | [`CodeLocation`](#codelocation) | | location in the source code of a story or part of it ie. arguments, usage of arguments | | `source` | `string` | | the source code of the story, extracted by the AST instrumenting loaders | | `subtitle` | `string` | | optional story subtitle property | | `dynamic` | `boolean` | | if set to true, the function is dynamically creating stories, returns a list of Story objects | | `dynamicId` | `string` | | if the story was created by a dynamic story (factory), this is the original story id. it is set internally and will be used to create a story URL | | `component` |
`type`
`at`\*: **function** (
`index`\*: `number`
) => `T` \| `undefined`
| `StoryProps` | id for component associated with the story | | `subcomponents` | `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> | `StoryProps` | multiple components option | | `controls` | [`ComponentControls`](#componentcontrols) | `StoryProps` | ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl | | `smartControls` |
`SmartControls`
`smart`: `boolean`
`include`: `string`\[] \| `IncludeFn`
`exclude`: `string`\[] \| `IncludeFn`
| `StoryProps` | "smart" controls options | | `decorators` | [`StoryRenderFn`](#storyrenderfn)\[] | `StoryProps` | array of wrapper functions (decorators) to be called when rendering each individual story. | | `plugins` | `any` | `StoryProps` | plugins configuration settings | | `category` | `string` | `StoryProps` | category string - can be used for cleanly separating stories/components | ## DynamicExamples **`array`** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L138)_ **properties** | Name | Type | Description | | ------------- | ----------------- | ------------------------------------------------------------------- | | _anonymous\*_ | [`Story`](#story) | Story interface - usually extracted by the AST instrumenting loader | ## ExampleControl **`union`** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L140)_ **values** [`ComponentControl`](#componentcontrol) \| `any` ## ExampleControls **`type`** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L142)_ **properties** | Name | Type | | ------- | ------------------------------------------------------ | | `name*` | \[`string`]: [`ExampleControl`](#examplecontrol)
| ## Example **`type`** es named export function, excapsulates a contained example code. _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L149)_ **properties** | Name | Type | Parent | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `bind*` | **function** (
`props`: [`Story`](#story)
) => [`Example`](#example) | | | | `source` | `string` | [`Story`](#story) | the source code of the story, extracted by the AST instrumenting loaders | | `storyName` | `string` | [`Story`](#story) | alternative name prop | | `id` | `string` | [`Story`](#story) | id of the story | | `rawId` | `string` | [`Story`](#story) | raw id for the story as declared in ESM format | | `doc` | `string` | [`Story`](#story) | title of the file/group of stories | | `storyFn` | [`StoryRenderFn`](#storyrenderfn) | [`Story`](#story) | story render function | | `description` | `string` | [`Story`](#story) | story extended description. can use markdown. | | `loc` | [`CodeLocation`](#codelocation) | [`Story`](#story) | location in the source code of a story or part of it ie. arguments, usage of arguments | | `subtitle` | `string` | [`Story`](#story) | optional story subtitle property | | `dynamic` | `boolean` | [`Story`](#story) | if set to true, the function is dynamically creating stories, returns a list of Story objects | | `dynamicId` | `string` | [`Story`](#story) | if the story was created by a dynamic story (factory), this is the original story id. it is set internally and will be used to create a story URL | | `component` |
`type`
`at`\*: **function** (
`index`\*: `number`
) => `T` \| `undefined`
| `StoryProps` | id for component associated with the story | | `subcomponents` | `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> | `StoryProps` | multiple components option | | `smartControls` |
`SmartControls`
`smart`: `boolean`
`include`: `string`\[] \| `IncludeFn`
`exclude`: `string`\[] \| `IncludeFn`
| `StoryProps` | "smart" controls options | | `decorators` | [`StoryRenderFn`](#storyrenderfn)\[] | `StoryProps` | array of wrapper functions (decorators) to be called when rendering each individual story. | | `plugins` | `any` | `StoryProps` | plugins configuration settings | | `category` | `string` | `StoryProps` | category string - can be used for cleanly separating stories/components | | `controls` | [`ExampleControls`](#examplecontrols) | | | ## DocumentData **`type`** records of storyid/data pairs, to be associated with documents _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L159)_ **properties** | Name | Type | | ----------- | -------------------------------------------------------- | | _anonymous_ | \[`string`]: [`ExampleControls`](#examplecontrols)
| ## StoryFactoryFn **`function`** dynamic story creator function type. returns an array of dynamically loaded stories _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L164)_ **parameters** | Name | Type | Description | | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | `doc*` | [`Document`](#document) | | | `returns` |
`type`
`name`\*: `string`
`storyName`: `string`
`id`: `string`
`rawId`: `string`
`doc`: `string`
`storyFn`: [`StoryRenderFn`](#storyrenderfn)
`description`: `string`
`arguments`: [`StoryArguments`](#storyarguments)
`loc`: [`CodeLocation`](#codelocation)
`source`: `string`
`subtitle`: `string`
`dynamic`: `boolean`
`dynamicId`: `string`
`component`
`at`\*: **function** (
`index`\*: `number`
) => `T` \| `undefined`
`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>
`controls`: [`ComponentControls`](#componentcontrols)
`smartControls`
`smart`: `boolean`
`include`: `string`\[] \| `IncludeFn`
`exclude`: `string`\[] \| `IncludeFn`
`decorators`: [`StoryRenderFn`](#storyrenderfn)\[]
`plugins`: `any`
`category`: `string`
| Story interface - usually extracted by the AST instrumenting loader | ## defDocType **`union` = "story"** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L166)_ **values** `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string` ## Document **`type`** A documentation file's metadata. For MDX files, fromtmatter is used to declare the document properties. For ESM (ES Modules) documentation files, the default export is used. _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L172)_ **properties** | Name | Type | Parent | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `key*` | \[`string`]: `any`
| | custom document props | | `title*` | `string` | | title of the document. If no 'route' parameter is specifified, the title is used to generate the document url. This is the only required field, to show the document in the menu structures. | | `type` | [`DocType`](#doctype) | | document type - blogs, pages, stories and even custom ones. By default - story | | `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 | | `date` | `string` | | optional date the document was created. If not assigned, the instrumentation process will use birthtime | | `dateModified` | `string` | | optional date the document was last modified. If not assigned, the instrumentation process will use mtime | | `status` | `"draft"` \| `"published"` | | if set to draft, the document will be hidden in production builds. | | `tags` | `string`\[] | | comma-separated list of document tags, used for search and for SOE keywords unless keyswords are specified. | | `keywords` | `string`\[] | | comma-separated list of SEO keywords | | `description` | `string` \| `JSX.Element` | | documentation file description | | `image` | `string` | | link to an image for the document, will be used for SEO | | `author` | `string` | | document author | | `order` | `number` | | document order, used to sort documents within the same parent | | `menu` | `string` | | to which static menu to attach the document compatibility with docz | | `template` | [`Example`](#example) | | es named export function, excapsulates a contained example code. | | `stories` | `string`\[] | | list of story ids contained in the document. | | `source` | `string` | | source code of the entire file of stories | | `fileName` | `string` | | file name of the file of stories | | `package` | `string` | | lookup into the global store of PackageInfo package.json | | `testFiles` | `string`\[] | | optional specify which test files are asociated with the document | | `testCoverage` | `string`\[] | | optional specify which files to use for test coverage | | `testData` | `string` | | optional test data file | | `renderFn` | [`FrameworkRenderFn`](#frameworkrenderfn) | | render function by framework. By default 'react' | | `data` | [`DocumentData`](#documentdata) | | records of storyid/data pairs, to be associated with documents | | `componentsLookup` |
`type`
\[`string`]: `string`
| | lookup into the global store.components since multiple components of the same name can be used example: \['Button']: 'c:/myapp/Button.tsx' | | `MDXPage` | `any` | | for MDX documents, this is an MDXContent function, to be rendered inside a MDXProvider | | `isMDXComponent` | `boolean` | | custom prop set by mdxjs | | `parameters` | `any` | | storybook compatibility field | | `component` |
`type`
`at`\*: **function** (
`index`\*: `number`
) => `T` \| `undefined`
| `StoryProps` | id for component associated with the story | | `subcomponents` | `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> | `StoryProps` | multiple components option | | `controls` | [`ComponentControls`](#componentcontrols) | `StoryProps` | ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl | | `smartControls` |
`SmartControls`
`smart`: `boolean`
`include`: `string`\[] \| `IncludeFn`
`exclude`: `string`\[] \| `IncludeFn`
| `StoryProps` | "smart" controls options | | `decorators` | [`StoryRenderFn`](#storyrenderfn)\[] | `StoryProps` | array of wrapper functions (decorators) to be called when rendering each individual story. | | `plugins` | `any` | `StoryProps` | plugins configuration settings | | `category` | `string` | `StoryProps` | category string - can be used for cleanly separating stories/components | | `navSidebar` | `boolean` | [`PageLayoutProps`](#pagelayoutprops) | whether to add navigation sidebar to the page | | `contextSidebar` | `boolean` | [`PageLayoutProps`](#pagelayoutprops) | whether to add conext sidebar to navigate the sections of the current document | | `fullPage` | `boolean` | [`PageLayoutProps`](#pagelayoutprops) | whether to take a fullpage theme option | ## dateToLocalString **`react function`** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L315)_ **parameters** | Name | Type | | --------- | -------- | | `date` | `Date` | | `returns` | `string` | ## DocInfo **`type`** short document information. used in search results, or index page _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L324)_ **properties** | Name | Type | Parent | Description | | ------------- | ------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `title*` | `string` | [`Document`](#document) | title of the document. If no 'route' parameter is specifified, the title is used to generate the document url. This is the only required field, to show the document in the menu structures. | | `image` | `string` | [`Document`](#document) | link to an image for the document, will be used for SEO | | `description` | `string` \| `JSX.Element` | [`Document`](#document) | documentation file description | | `tags` | `string`\[] | [`Document`](#document) | comma-separated list of document tags, used for search and for SOE keywords unless keyswords are specified. | | `author` | `string` | [`Document`](#document) | document author | | `type` | [`DocType`](#doctype) | [`Document`](#document) | document type - blogs, pages, stories and even custom ones. By default - story | | `date` | `string` | [`Document`](#document) | optional date the document was created. If not assigned, the instrumentation process will use birthtime | | `link*` | `string` | | following fields are useful for highlighting search results | | `authorLink` | `string` | | | | `rawTags` | `string`\[] | | | | `rawType` | `string` | | | ## Documents **`type`** list of story files, or groups _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L340)_ **properties** | Name | Type | | ----------- | ------------------------------------------ | | _anonymous_ | \[`string`]: [`Document`](#document)
| ## Pages **`array`** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L342)_ **properties** | Name | Type | Description | | ------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | _anonymous\*_ | [`Document`](#document) | A documentation file's metadata. For MDX files, fromtmatter is used to declare the document properties. For ESM (ES Modules) documentation files, the default export is used. | ## Stories **`type`** list of stories _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L347)_ **properties** | Name | Type | | ----------- | ------------------------------------ | | _anonymous_ | \[`string`]: [`Story`](#story)
| ## Packages **`type`** list of repositories _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L352)_ **properties** | Name | Type | | ----------- | ------------------------------------------------ | | _anonymous_ | \[`string`]: [`PackageInfo`](#packageinfo)
| ## StoreObserver **`function`** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L354)_ **parameters** | Name | Type | Description | | ------- | ----------------- | ------------------------------------------------------------------- | | `story` | [`Story`](#story) | Story interface - usually extracted by the AST instrumenting loader | ## CURRENT_STORY **`string` = "."** Shorthand id to denote the current story _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L359)_ ## Store **`interface`** Store of stories information in memory after the loader is applied _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L363)_ **properties** | Name | Type | Description | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | | `error` | `string` | build-time error string | | `config*` | [`RunConfiguration`](#runconfiguration) | global configuration for config file | | `docs*` | [`Documents`](#documents) | list of documents (pages) | | `stories*` | [`Stories`](#stories) | list of stories | | `components*` | [`Components`](#components) | list of components used in stories and documents | | `packages*` | [`Packages`](#packages) | list of package.json files and their data used by the components and the stories of the project | | `addObserver*` | **function** (
`observer`\*: [`StoreObserver`](#storeobserver)
) => `void` | storybook integration notifiers | | `removeObserver*` | **function** (
`observer`\*: [`StoreObserver`](#storeobserver)
) => `void` | | | `updateStory*` | **function** (
`story`\*: [`Story`](#story)
) => `void` | update store, for example controls or state | | `search` | **function** (
`store`\*: [`Store`](#store)
) =>
`SearchResult`
`items`\*: `SearchItem`\[]
`searchFn`\*: **function** (
`search`\*: `string`
) => `void`
`provider`
`logo`\*: ReactNode
`url`\*: `string`
`name`\*: `string`
| | ## getDefaultStore **`function`** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L429)_ **parameters** | Name | Type | Description | | --------- | ----------------- | ------------------------------------------------------------------ | | `returns` | [`Store`](#store) | Store of stories information in memory after the loader is applied | ## assignProps **`react function`** _defined in [@component-controls/core/core/core/src/document.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/document.ts#L431)_ **parameters** | Name | Type | | ------------- | ------------------------------------------------------ | | `obj*` | [`Document`](#document)<> \| [`Story`](#story)<> | | _anonymous\*_ | [`Document`](#document)<> \| [`Story`](#story)<> | | `returns` | [`Document`](#document)<> \| [`Story`](#story)<> | ## ComponentControlData **`interface`** _defined in [@component-controls/core/core/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` |
`type`
\[`string`]: `any`
| options to be passed to the random data generators example { min: 10, max: 20 } | ## ComponentControlBase **`interface`** Base inteface for creating control types All new property typs should extend this interface and support _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L140)_ **properties** | Name | Type | Description | | -------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `type*` | [`ControlTypes`](#controltypes) | Control field types examples are provided for the different types: | | `label` | `string` | label to display next to the field editor by default uses the property name itself | | `value` | `T` | a default value for the property | | `defaultValue` | `T` | default value is automatically set at run-time, from the value | | `required` | `boolean` | visually display the control property as required | | `description` | `string` | full text property description. can use markdown. | | `hidden` | `boolean` | hide the property editor for this property will only use the value | | `groupId` | `string` | allows grouping of the properties in a property editor for example different editor tabs | | `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) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ComponentControlText **`interface`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L198)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | -------------------------------------------------------------------- | ----------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `type*` | `TEXT` | [`ControlTypes`](#controltypes) | `"text"` | userName: { type: ControlTypes.TEXT, label: 'Name', value: 'Storyteller', }, | | `placeholder` | `string` | | | placeholder for empty properties either undefined initial value or user clears the field | | `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 | | `escapeValue` | `boolean` | | | allows to receive escaped string values to help prevent XSS attacks by default - false | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ComponentControlBoolean **`interface`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L223)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | -------------------------------------------------------------------- | ----------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `type*` | `BOOLEAN` | [`ControlTypes`](#controltypes) | `"boolean"` | nice: { type: ControlTypes.BOOLEAN, label: 'Nice', value: true, }, | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ColorPickerKind **`union`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L227)_ **values** `"hex"` \| `"rgb"` \| `"rgba"` \| `"hsl"` \| `"hsla"` ## ComponentControlColor **`interface`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L229)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | -------------------------------------------------------------------- | ----------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `type*` | `COLOR` | [`ControlTypes`](#controltypes) | `"color"` | color: { type: ControlTypes.COLOR, value: '#000000', }, | | `kind` | [`ColorPickerKind`](#colorpickerkind) | | | format to save the color as a string | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ComponentControlDate **`interface`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L237)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | -------------------------------------------------------------------- | ----------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `type*` | `DATE` | [`ControlTypes`](#controltypes) | `"date"` | birthday: { type: ControlTypes.DATE, label: 'Birthday', value: new Date(), }, | | `datePicker` | `boolean` | | | whether to display a date picker (calendar). default: true | | `timePicker` | `boolean` | | | whether to display a time picker (calendar). default: true | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ComponentControlFiles **`interface`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L253)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | -------------------------------------------------------------------- | ----------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `type*` | `FILES` | [`ControlTypes`](#controltypes) | `"files"` | images: { type: ControlTypes.FILES, label: 'Happy Picture', accept: 'image/\*', value: \[ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=', ], }, | | `accept` | `string` | | | type of files to accept user to open ex 'image/\*', | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ComponentControlArray **`interface`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L262)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | -------------------------------------------------------------------- | ----------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `type*` | `ARRAY` | [`ControlTypes`](#controltypes) | `"array"` | arrayItems: { type: ControlTypes.ARRAY, label: 'Items', rowType: { name: { type: ControlTypes.TEXT }, }, value: \[{ name: 'Laptop' }, { name: 'Book' }, { name: 'Whiskey' }], }, | | `rowType*` | [`ComponentControls`](#componentcontrols) | | | type of the items in each row of the array | | `editLabel` | `string` | | | the label for the editor button | | `inline` | `boolean` | | | if true, the editor will be rendered inline instead of a popup | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ComponentControlObject **`interface`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L279)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | -------------------------------------------------------------------- | ----------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `type*` | `OBJECT` | [`ControlTypes`](#controltypes) | `"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 }, }, } | | `editLabel` | `string` | | | the label for the editor button | | `inline` | `boolean` | | | if true, the editor will be rendered inline instead of a popup | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ComponentControlButton **`interface`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L292)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `type*` | `BUTTON` | [`ControlTypes`](#controltypes) | `"button"` | button: { type: ControlTypes.BUTTON, onClick: () => { ... code to modify some variables } }, | | `onClick` | **function** (
`prop`\*: [`ComponentControlButton`](#componentcontrolbutton)
) => `void` | | | for button type fields, an onClick handler | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## OptionsValueType **`union`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L302)_ **values** `T` \| `number` \| `string`\[] | `number`\[] | `type` ## OptionsListType **`union`** value/label pairs or array of OptionsValueType _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L312)_ **values** `type` \| [`OptionsValueType`](#optionsvaluetype)\[] ## ComponentControlOptions **`interface`** 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/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L323)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `type*` | `OPTIONS` | [`ControlTypes`](#controltypes) | `"options"` | fruit: { type: ControlTypes.OPTIONS, label: 'Fruit', value: 'apple', options: { Apple: 'apple', Banana: 'banana', Cherry: 'cherry', }, }, | | `options*` | [`OptionsListType`](#optionslisttype) | | | value/label pairs or array of OptionsValueType | | `display` | `"select"` \| `"multi-select"` \| `"radio"` \| `"inline-radio"` \| `"check"` \| `"inline-check"` | | | how to render selecting the options: default is 'select' | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ComponentControlNumber **`interface`** _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L342)_ **extends** [`ComponentControlBase`](#componentcontrolbase) **properties** | Name | Type | Parent | Default | Description | | -------------- | -------------------------------------------------------------------- | ----------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `type*` | `NUMBER` | [`ControlTypes`](#controltypes) | `"number"` | age: { type: ControlTypes.NUMBER, label: 'Age', value: 78, range: true, min: 0, max: 90, step: 5, }, | | `range` | `boolean` | | | for numeric type fieldsif true, will display a range type slider editor | | `min` | `number` | | | minimum allowed value for numeric property | | `max` | `number` | | | maximum allowed value for numeric property | | `step` | `number` | | | stepper for numeric editor /i nc/dec value | | `label` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | label to display next to the field editor by default uses the property name itself | | `value` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | a default value for the property | | `defaultValue` | `T` | [`ComponentControlBase`](#componentcontrolbase) | | default value is automatically set at run-time, from the value | | `required` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | visually display the control property as required | | `description` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | full text property description. can use markdown. | | `hidden` | `boolean` | [`ComponentControlBase`](#componentcontrolbase) | | hide the property editor for this property will only use the value | | `groupId` | `string` | [`ComponentControlBase`](#componentcontrolbase) | | allows grouping of the properties in a property editor for example different editor tabs | | `order` | `number` | [`ComponentControlBase`](#componentcontrolbase) | | allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable) | | `data` | [`ComponentControlData`](#componentcontroldata) \| `null` \| `false` | [`ComponentControlBase`](#componentcontrolbase) | | helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized | ## ComponentControl **`union`** ComponentControl is a either an object of property settings or a shortcut can be used: properties: { text: 'Hello', }, _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L378)_ **values** [`ComponentControlText`](#componentcontroltext) \| [`ComponentControlBoolean`](#componentcontrolboolean) \| [`ComponentControlColor`](#componentcontrolcolor) \| [`ComponentControlDate`](#componentcontroldate) \| [`ComponentControlObject`](#componentcontrolobject)<> | [`ComponentControlButton`](#componentcontrolbutton)<> | [`ComponentControlOptions`](#componentcontroloptions)<> | [`ComponentControlNumber`](#componentcontrolnumber) \| [`ComponentControlArray`](#componentcontrolarray) \| [`ComponentControlFiles`](#componentcontrolfiles) ## ComponentControls **`interface`** 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/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L395)_ **properties** | Name | Type | | ------- | ---------------------------------------------------------- | | `name*` | \[`string`]: [`ComponentControl`](#componentcontrol)
| ## ControlTypes **`enum`** Control field types examples are provided for the different types: _defined in [@component-controls/core/core/core/src/controls.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/controls.ts#L6)_ **properties** | Name | Type | Value | Description | | ---------- | -------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `TEXT*` | `string` | `"text"` | userName: { type: ControlTypes.TEXT, label: 'Name', value: 'Storyteller', }, | | `NUMBER*` | `string` | `"number"` | age: { type: ControlTypes.NUMBER, label: 'Age', value: 78, range: true, min: 0, max: 90, step: 5, }, | | `BOOLEAN*` | `string` | `"boolean"` | nice: { type: ControlTypes.BOOLEAN, label: 'Nice', value: true, }, | | `OPTIONS*` | `string` | `"options"` | fruit: { type: ControlTypes.OPTIONS, label: 'Fruit', value: 'apple', options: { Apple: 'apple', Banana: 'banana', Cherry: 'cherry', }, }, | | `DATE*` | `string` | `"date"` | birthday: { type: ControlTypes.DATE, label: 'Birthday', value: new Date(), }, | | `COLOR*` | `string` | `"color"` | color: { type: ControlTypes.COLOR, value: '#000000', }, | | `BUTTON*` | `string` | `"button"` | button: { type: ControlTypes.BUTTON, onClick: () => { ... code to modify some variables } }, | | `OBJECT*` | `string` | `"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 }, }, } | | `ARRAY*` | `string` | `"array"` | arrayItems: { type: ControlTypes.ARRAY, label: 'Items', rowType: { name: { type: ControlTypes.TEXT }, }, value: \[{ name: 'Laptop' }, { name: 'Book' }, { name: 'Whiskey' }], }, | | `FILES*` | `string` | `"files"` | images: { type: ControlTypes.FILES, label: 'Happy Picture', accept: 'image/\*', value: \[ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=', ], }, | ## TypeValue **`union`** _defined in [@component-controls/core/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L6)_ **values** `"any"` \| `"boolean"` \| `"number"` \| `"string"` \| `"array"` \| `"object"` \| `"enum"` \| `"union"` \| `"literal"` \| `"symbol"` \| `"function"` \| `string` ## TypeInformation **`interface`** _defined in [@component-controls/core/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L20)_ **properties** | Name | Type | Description | | ----------- | ------------------------------------------------- | ----------------------------------------------------------------------------- | | `name*` | [`TypeValue`](#typevalue) | | | `value` | [`TypeInformation`](#typeinformation)\[] \| `any` | type value elements of enum, array, fields of object return value of function | | `raw` | `string` | raw type code | | `arguments` | [`TypeInformation`](#typeinformation)\[] \| `any` | argument types of function | | `required` | `boolean` | is the property required | ## PropType **`interface`** 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/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L50)_ **properties** | Name | Type | Description | | -------------- | ------------------------------------- | ------------------------------------------------ | | `defaultValue` | `any` | default value for the property | | `type*` | [`TypeInformation`](#typeinformation) | propertty type | | `description` | `string` | description of the property | | `parentName` | `string` | name of the parent/inherited property | | `deprecated` | `string` | if the property is deprecated, contains a string | ## PropTypes **`interface`** list of properties of the component _defined in [@component-controls/core/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L77)_ **properties** | Name | Type | | ------ | ------------------------------------------ | | `key*` | \[`string`]: [`PropType`](#proptype)
| ## ComponentInfo **`interface`** DocGen type onfo generated for a compoennt _defined in [@component-controls/core/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L84)_ **properties** | Name | Type | Description | | -------------- | ------------------------- | --------------------- | | `displayName*` | `string` | name of the component | | `description` | `string` | optional description | | `props*` | [`PropTypes`](#proptypes) | component props | ## JSXNode **`type`** _defined in [@component-controls/core/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L101)_ **properties** | Name | Type | Parent | Description | | --------------- | --------------------- | --------------------------- | --------------------------------------------------------------------------------- | | `name*` | `string` | [`ImportType`](#importtype) | component name | | `importedName*` | `string` | [`ImportType`](#importtype) | importedName - the original named import that was aliased | | `from*` | `string` | [`ImportType`](#importtype) | imported from | | `typesFile` | `string` | [`ImportType`](#importtype) | imported from alias file name ie '/component-controls/core/store/dist/index.d.ts' | | `componentKey` | `string` | [`ImportType`](#importtype) | key into components table | | `attributes` | `string`\[] | | | | `children` | [`JSXTree`](#jsxtree) | | jsx tree of elements for the component | ## JSXTree **`array`** jsx tree of elements for the component _defined in [@component-controls/core/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L108)_ **properties** | Name | Type | | ------------- | --------------------- | | _anonymous\*_ | [`JSXNode`](#jsxnode) | ## Component **`interface`** component specified for stories or story files _defined in [@component-controls/core/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L113)_ **properties** | Name | Type | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `name*` | `string` | name of the component as used in the fiel | | `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'; | | `from` | `string` | imported from | | `request` | `string` | resolved import request | | `fileName` | `string` | file name with extension | | `propsInfoFile` | `string` | file containing the component's props info sometimes different from the component source file for example external libraries that have a separate index.d.ts file | | `loc` | [`CodeLocation`](#codelocation) | location in the source code of a story or part of it ie. arguments, usage of arguments | | `package` | `string` | lookup into the global store of PackageInfo package.json | | `source` | `string` | the source code of the component file, extracted by the AST instrumenting loaders. Can also be overriden manually. | | `info` | [`ComponentInfo`](#componentinfo) | DocGen type onfo generated for a compoennt | | `externalDependencies` | [`Imports`](#imports) | list of component's file imports from external libraries | | `localDependencies` | [`Imports`](#imports) | list of component's file imports from local (imported via relative import) files | | `jsx` | [`JSXTree`](#jsxtree) | jsx tree of elements for the component | | `fileInfo` |
`FileInfo`
`dateCreated`: `string`
`dateModified`: `string`
`commits`: `Commit`\[]
`sloc`
`block`\*: `number`
`blockEmpty`\*: `number`
`comment`\*: `number`
`empty`\*: `number`
`mixed`\*: `number`
`single`\*: `number`
`source`\*: `number`
`todo`\*: `number`
`total`\*: `number`
| source file info | | `jest` |
`JestTests`
`results`\*: `JestResult`\[]
`coverage`\*: `Record`<`string`, `Record`<`CoverageKind`, `CoverageMetrics`>>
| jest test and coverage results for the component | ## Components **`type`** list of components used in store _defined in [@component-controls/core/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L197)_ **properties** | Name | Type | | ----------- | -------------------------------------------- | | _anonymous_ | \[`string`]: [`Component`](#component)
| ## getComponentName **`react function`** given a component, return its name _defined in [@component-controls/core/core/core/src/components.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/components.ts#L203)_ **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 **`function`** 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/core/core/src/propsInfo.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/propsInfo.ts#L13)_ **parameters** | Name | Type | Description | | --------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | `fileName*` | `string` | full name and path of the component path react-docgen needs it to extract babel configurations. | | `componentName` | `string` | optional component name react-docgen-typescript supports multiple exports for a file react-docgne does not use it. | | `source` | `string` | optional soure, saves time if its already loaded react-docgen accepts source as input parameter react-docgen-typescript does not use it. | | `returns` | `Promise` \| [`ComponentInfo`](#componentinfo) \| `undefined` | async or normal function that loads ComponentInfo props info. | ## ImportType **`interface`** _defined in [@component-controls/follow-imports/misc/follow-imports/dist/consts.d.ts](https://github.com/ccontrols/component-controls/tree/master/misc/follow-imports/dist/consts.d.ts#L28)_ **properties** | Name | Type | Description | | --------------- | -------- | --------------------------------------------------------------------------------- | | `name*` | `string` | component name | | `importedName*` | `string` | importedName - the original named import that was aliased | | `from*` | `string` | imported from | | `typesFile` | `string` | imported from alias file name ie '/component-controls/core/store/dist/index.d.ts' | | `componentKey` | `string` | key into components table | ## ImportTypes **`interface`** _defined in [@component-controls/follow-imports/misc/follow-imports/dist/consts.d.ts](https://github.com/ccontrols/component-controls/tree/master/misc/follow-imports/dist/consts.d.ts#L50)_ **properties** | Name | Type | | ------ | ---------------------------------------------- | | `key*` | \[`string`]: [`ImportType`](#importtype)
| ## CodePosition **`type`** position in the source file of a token usually taken from AST traverse loaders _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L11)_ **properties** | Name | Type | Parent | | --------- | -------- | ------- | | `line*` | `number` | `start` | | `column*` | `number` | `start` | ## CodeLocation **`interface`** location in the source code of a story or part of it ie. arguments, usage of arguments _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L17)_ **properties** | Name | Type | Parent | | -------- | ----------------------------------------------------------------------------------------------------------------- | ---------------- | | `start*` |
`type`
`line`\*: `number`
`column`\*: `number`
| `SourceLocation` | | `end*` |
`type`
`line`\*: `number`
`column`\*: `number`
| `SourceLocation` | ## PackageRepository **`interface`** repository information from package.json _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L22)_ **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 **`string`** dependecy string - the package version number _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L42)_ ## PackageDependencies **`interface`** list of dependencies - package name as the key and the version as the value _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L47)_ **properties** | Name | Type | | ------- | ------------------------------------------------------------ | | `name*` | \[`string`]: [`PackageDependency`](#packagedependency)
| ## PackageInfo **`interface`** package.json information about the repository of the stories and components _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L55)_ **properties** | Name | Type | Description | | ------------------ | --------------------------------------------- | ----------------------------------------------------------------------------- | | `fileHash*` | `string` | file name hash of package.json | | `name` | `string` | package name | | `version` | `string` | package version | | `dependencies` | [`PackageDependencies`](#packagedependencies) | list of dependencies - package name as the key and the version as the value | | `devDependencies` | [`PackageDependencies`](#packagedependencies) | list of dependencies - package name as the key and the version as the value | | `peerDependencies` | [`PackageDependencies`](#packagedependencies) | list of dependencies - package name as the key and the version as the value | | `privateNpm` | `boolean` | if false, the package is not published to npm | | `repository*` | [`PackageRepository`](#packagerepository) | repository information extracted from the "repository" field in package.json. | ## StoryRenderFn **`function`** story render function _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L101)_ **parameters** | Name | Type | Description | | --------------- | --------------------------------------------------------------------------------------- | --------------------------------------------- | | `controlValues` |
`type`
\[`string`]: `any`
| props values passed by controls | | `context` | `any` | context parameters passed as second parameter | | `returns` | `Promise` \| `any` | | ## Imports **`interface`** _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L106)_ **properties** | Name | Type | | ------ | ------------------------------------------------------------------------ | | `key*` | \[`string`]: (`Omit`<[`ImportType`](#importtype), `"from"`>)\[]
| ## defaultExport **`string` = "default"** default export keyword _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L113)_ ## ActionItem **`interface`** an item in the ActionBar component _defined in [@component-controls/core/core/core/src/utility.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/utility.ts#L118)_ **properties** | Name | Type | Description | | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `id` | `string` | optional id, used if title is not set | | `node*` | `ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined` | title - if a string, will use the built-in components, else can prvide custom React component | | `href` | `string` | if the title is a string and href is set will use a default `` component | | `onClick` | **function** (
`e`\*
`altKey`\*: `boolean`
`button`\*: `number`
`buttons`\*: `number`
`clientX`\*: `number`
`clientY`\*: `number`
`ctrlKey`\*: `boolean`
`getModifierState`\*: **function** (
`key`\*: `string`
) => `boolean`
`metaKey`\*: `boolean`
`movementX`\*: `number`
`movementY`\*: `number`
`pageX`\*: `number`
`pageY`\*: `number`
`relatedTarget`\*: `EventTarget` \| `null`
`screenX`\*: `number`
`screenY`\*: `number`
`shiftKey`\*: `boolean`
`detail`\*: `number`
`view`\*
`styleMedia`\*: StyleMedia
`document`\*: [`Document`](#document)
`nativeEvent`\*: `MouseEvent`
`currentTarget`\*:
`target`\*: `EventTarget`
`bubbles`\*: `boolean`
`cancelable`\*: `boolean`
`defaultPrevented`\*: `boolean`
`eventPhase`\*: `number`
`isTrusted`\*: `boolean`
`preventDefault`\*: preventDefault
`isDefaultPrevented`\*: isDefaultPrevented
`stopPropagation`\*: stopPropagation
`isPropagationStopped`\*: isPropagationStopped
`persist`\*: persist
`timeStamp`\*: `number`
`type`\*: `string`
) => `void` \| `boolean` | if the title is a string and href is not set, onClick will be used on a `