4.0.3 • Published 4 years ago

@component-controls/store

Licence

MIT

Version

4.0.3

Deps

Size

501 kB

Vulns

Weekly

Stars

Summary Dependency Versions

Overview
Installation
API

Overview

Utility functions and hooks to abstract loading and using the store. Can also share the store across bundles using localStorage and broadcasting messages.

Store reference documentation

Installation

This package is usually installed as part of the @component-controls package, but you can also install it standalone:

$ npm install @component-controls/store --save-dev

Name	Type
`name*`	`string` \| `undefined`
`newValue*`	`any`

Name	Type	Parent
`Provider*`	`type` `propTypes`: `WeakValidationMap`<> \| `undefined` `$typeof`*:	`Context`
`Consumer*`	`type` `$typeof`*:	`Context`
`displayName`	`string` \| `undefined`	`Context`

Name	Type
`category*`	`string`
`returns`	`DocCountType`

Name	Type	Description
`of`	`any`	Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab.
`name`	`string`	some component-oriented ui components can also be driven by a story id (name). ie the PropsTable can display component props, or story controls

Name	Type	Description
`controls`	`ComponentControls`<> [`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<> \| `ComponentControlButton`<> \| `ComponentControlOptions`<> \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFiles`	ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl
`updateValue*`	`ControlUpdateFn`

Name	Type
`store*`	`Store` `error`: `string` `config`* `author`: `string` `controls` [`string`]: `ComponentControl`<`P`> `description`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `footer` `left`: `right`: `menu`: `StaticMenuItem`[] `title`: `string` `image`: `string` `logo`: `string` \| `ReactNode` `app` `propTypes`: `contextTypes`: `defaultProps`: `displayName`: `copyright`: `string` `language`: `string` `links`: (`DetailedHTMLProps`<>)[] `seo`: `ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined` `pages` [`string`]: `theme` [`string`]: `any` `storySort`: function* ( `a`: `string` `b`: `string` ) => `number` `toolbar` `left`: `right`: `sidebar`: `ActionItem`[] `components`: `Record`<`string`, `unknown`> `analytics`: `any` `renderFn`: function ( `props`* `story`: `doc`: `values`: `options`: ) => `any` `webpack`: `Configuration` \| `WebpackConfigFn` `finalWebpack`: `Configuration` \| `WebpackConfigFn` `presets`: `RuleType`[] `configPath`: `string` `distFolder`: `string` `bundleName`: `string` `staticFolder`: `string` `cssFileName`: `string` `logOptions`: `Partial`<`LogOptions`> `mode`: `"none"` \| `"development"` \| `"production"` `loaders` `at`: `module`: `ident`: `loader`: `options`: `stories`: `string` \| `string`[] `files`: `string` \| `string`[] `siteRoot`: `string` `ignore`: `string`[] `categories`: `DocType`[] `siteMap`: `type` \| `boolean` `siteUrl`: `string` `instrument`: `any` `search` `indexingModule`: `searchingModule`: `fields`: `emptySearchDocuments`: `hitsPerPage`: `options`: `tokens` `figmaAccessToken`: `githubAccessToken`: `docs` [`string`]: `type` [`string`]: `any` `title`: `string` `type`: DocType `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template`: `Example`<`Props`> `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: FrameworkRenderFn `data`: DocumentData `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean` `stories`* [`string`]: `type` `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `components`* [`string`]: `interface` `name`: `string` `importedName`: `"default"` \| `"namespace"` \| `string` `from`: `string` `request`: `string` `fileName`: `string` `propsInfoFile`: `string` `loc`: CodeLocation `package`: `string` `source`: `string` `info`: ComponentInfo `externalDependencies`: Imports `localDependencies`: Imports `jsx`: JSXTree `fileInfo`: FileInfo `jest`: JestTests `packages` [`string`]: `interface` `fileHash`: `string` `name`: `string` `version`: `string` `dependencies`: PackageDependencies `devDependencies`: PackageDependencies `peerDependencies`: PackageDependencies `privateNpm`: `boolean` `repository` `browse`: `docs`: `issues`: `addObserver`: function ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `removeObserver`: function* ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `updateStory`: function* ( `story`* `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` ) => `void` `search`: function* ( `store`* `error`: `config`: `docs`: `stories`: `components`: `packages`: `addObserver`: `removeObserver`: `updateStory`: `search`: ) => `SearchResult` `items`: `SearchItem`[] `searchFn`: function ( `search`: ) => `void` `provider` `logo`: `url`: `name`:

Name	Type	Description
`storyId`	`string`	current story id
`docId`	`string`	current documentation page, if no story is selected
`store*`	`Store` `error`: `string` `config`* `author`: `string` `controls` [`string`]: `ComponentControl`<`P`> `description`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `footer` `left`: `right`: `menu`: `StaticMenuItem`[] `title`: `string` `image`: `string` `logo`: `string` \| `ReactNode` `app` `propTypes`: `contextTypes`: `defaultProps`: `displayName`: `copyright`: `string` `language`: `string` `links`: (`DetailedHTMLProps`<>)[] `seo`: `ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined` `pages` [`string`]: `theme` [`string`]: `any` `storySort`: function* ( `a`: `string` `b`: `string` ) => `number` `toolbar` `left`: `right`: `sidebar`: `ActionItem`[] `components`: `Record`<`string`, `unknown`> `analytics`: `any` `renderFn`: function ( `props`* `story`: `doc`: `values`: `options`: ) => `any` `webpack`: `Configuration` \| `WebpackConfigFn` `finalWebpack`: `Configuration` \| `WebpackConfigFn` `presets`: `RuleType`[] `configPath`: `string` `distFolder`: `string` `bundleName`: `string` `staticFolder`: `string` `cssFileName`: `string` `logOptions`: `Partial`<`LogOptions`> `mode`: `"none"` \| `"development"` \| `"production"` `loaders` `at`: `module`: `stories`: `string` \| `string`[] `files`: `string` \| `string`[] `siteRoot`: `string` `ignore`: `string`[] `categories`: `DocType`[] `siteMap`: `type` \| `boolean` `siteUrl`: `string` `instrument`: `any` `search` `indexingModule`: `searchingModule`: `fields`: `emptySearchDocuments`: `hitsPerPage`: `options`: `tokens` `figmaAccessToken`: `githubAccessToken`: `docs`* [`string`]: `type` [`string`]: `any` `title`: `string` `type`: DocType `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template`: `Example`<`Props`> `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: FrameworkRenderFn `data`: DocumentData `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean` `stories`* [`string`]: `type` `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `components`* [`string`]: `interface` `name`: `string` `importedName`: `"default"` \| `"namespace"` \| `string` `from`: `string` `request`: `string` `fileName`: `string` `propsInfoFile`: `string` `loc`: CodeLocation `package`: `string` `source`: `string` `info`: ComponentInfo `externalDependencies`: Imports `localDependencies`: Imports `jsx`: JSXTree `fileInfo`: FileInfo `jest`: JestTests `packages` [`string`]: `interface` `fileHash`: `string` `name`: `string` `version`: `string` `dependencies`: PackageDependencies `devDependencies`: PackageDependencies `peerDependencies`: PackageDependencies `privateNpm`: `boolean` `repository` `browse`: `docs`: `issues`: `addObserver`: function ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `removeObserver`: function* ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `updateStory`: function* ( `story`* `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` ) => `void` `search`: function* ( `store`* `error`: `config`: `docs`: `stories`: `components`: `packages`: `addObserver`: `removeObserver`: `updateStory`: `search`: ) => `SearchResult` `items`: `SearchItem`[] `searchFn`: function ( `search`: ) => `void` `provider` `logo`: `url`: `name`:	store object
`activeTab`	`string`	active page tab
`values`	`any`	initial control values. usually passed from the url
`userData`	`Record`<`string`, `any`>	user options passed from container those can be global parameters as well as decorators

Name	Type
`docId*`	`string` \| `undefined`

Name	Type	Parent
`Provider*`	`type` `propTypes`: `WeakValidationMap`<> \| `undefined` `$typeof`*:	`Context`
`Consumer*`	`type` `$typeof`*:	`Context`
`displayName`	`string` \| `undefined`	`Context`

Name	Type	Description
`error`	`string`	build-time error
`config`	`RunConfiguration` `author`: `string` `controls` [`string`]: `ComponentControl`<`P`> `description`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `footer` `left`: `right`: `menu`: `StaticMenuItem`[] `title`: `string` `image`: `string` `logo`: `string` \| `ReactNode` `app` `propTypes`: `contextTypes`: `defaultProps`: `displayName`: `copyright`: `string` `language`: `string` `links`: (`DetailedHTMLProps`<>)[] `seo`: `ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined` `pages` [`string`]: `theme` [`string`]: `any` `storySort`: function* ( `a`: `string` `b`: `string` ) => `number` `toolbar` `left`: `right`: `sidebar`: `ActionItem`[] `components`: `Record`<`string`, `unknown`> `analytics`: `any` `renderFn`: function ( `props`* `story`: `doc`: `values`: `options`: ) => `any` `webpack`: `Configuration` \| `WebpackConfigFn` `finalWebpack`: `Configuration` \| `WebpackConfigFn` `presets`: `RuleType`[] `configPath`: `string` `distFolder`: `string` `bundleName`: `string` `staticFolder`: `string` `cssFileName`: `string` `logOptions`: `Partial`<`LogOptions`> `mode`: `"none"` \| `"development"` \| `"production"` `loaders` `at`: `module`: `stories`: `string` \| `string`[] `files`: `string` \| `string`[] `siteRoot`: `string` `ignore`: `string`[] `categories`: `DocType`[] `siteMap`: `type` \| `boolean` `siteUrl`: `string` `instrument`: `any` `search` `indexingModule`: `searchingModule`: `fields`: `emptySearchDocuments`: `hitsPerPage`: `options`: `tokens` `figmaAccessToken`: `githubAccessToken`:	global configuration from project config file
`buildConfig`	`BuildConfiguration` `webpack`: `Configuration` \| `WebpackConfigFn` `finalWebpack`: `Configuration` \| `WebpackConfigFn` `presets`: `RuleType`[] `configPath`: `string` `distFolder`: `string` `bundleName`: `string` `staticFolder`: `string` `cssFileName`: `string` `logOptions`: `Partial`<`LogOptions`> `mode`: `"none"` \| `"development"` \| `"production"` `loaders` `at`: `module`: `stories`: `string` \| `string`[] `files`: `string` \| `string`[] `siteRoot`: `string` `ignore`: `string`[] `pages` [`string`]: `categories`: `DocType`[] `siteMap`: `type` \| `boolean` `siteUrl`: `string` `instrument`: `any` `search` `indexingModule`: `searchingModule`: `fields`: `emptySearchDocuments`: `hitsPerPage`: `options`: `tokens` `figmaAccessToken`: `githubAccessToken`: `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls` [`string`]: `ComponentControl`<`P`> `smartControls` `smart`: `include`: `exclude`*: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string`	global configuration used at build time stored in a file named main.js/main.ts
`packages*`	`Packages` [`string`]: `interface` `fileHash`: `string` `name`: `string` `version`: `string` `dependencies` [`string`]: PackageDependency `devDependencies` [`string`]: PackageDependency `peerDependencies` [`string`]: PackageDependency `privateNpm`: `boolean` `repository` `browse`: `string` `docs`: `string` `issues`: `string`	global store of packages
`components*`	`Components` [`string`]: `interface` `name`: `string` `importedName`: `"default"` \| `"namespace"` \| `string` `from`: `string` `request`: `string` `fileName`: `string` `propsInfoFile`: `string` `loc` `start`: `end`: `package`: `string` `source`: `string` `info` `displayName`: `description`: `props`: `externalDependencies` [`string`]: (`Omit`<`ImportType`, `"from"`>)[] `localDependencies` [`string`]: (`Omit`<`ImportType`, `"from"`>)[] `jsx`: `JSXNode`[] `fileInfo` `dateCreated`: `dateModified`: `commits`: `sloc`: `jest` `results`: `coverage`:	global store of components
`stores*`	`type`[]	stores, loaded from each .stories.* file
`search`	function ( `store`* `error`: `string` `config`* `author`: `controls`: `description`: `component`: `subcomponents`: `smartControls`: `decorators`: `plugins`: `category`: `footer`: `menu`: `title`: `image`: `logo`: `app`: `copyright`: `language`: `links`: `seo`: `pages`: `theme`: `storySort`: `toolbar`: `sidebar`: `components`: `analytics`: `renderFn`: `webpack`: `finalWebpack`: `presets`: `configPath`: `distFolder`: `bundleName`: `staticFolder`: `cssFileName`: `logOptions`: `mode`: `loaders`: `stories`: `files`: `siteRoot`: `ignore`: `categories`: `siteMap`: `siteUrl`: `instrument`: `search`: `tokens`: `docs`* [`string`]: `stories`* [`string`]: `components`* [`string`]: `packages`* [`string`]: `addObserver`: function* ( `observer`: ) => `void` `removeObserver`: function ( `observer`: ) => `void` `updateStory`: function ( `story`: ) => `void` `search`: ) => `SearchResult` `items`: `SearchItem`[] `searchFn`: function ( `search`: ) => `void` `provider` `logo`: `url`: `name`:

Name	Type	Description
`store*`	`LoadingStore`
`building`	`boolean`
`returns`	`Store` `error`: `string` `config`* `author`: `string` `controls` [`string`]: `ComponentControl`<`P`> `description`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `footer` `left`: `right`: `menu`: `StaticMenuItem`[] `title`: `string` `image`: `string` `logo`: `string` \| `ReactNode` `app` `propTypes`: `contextTypes`: `defaultProps`: `displayName`: `copyright`: `string` `language`: `string` `links`: (`DetailedHTMLProps`<>)[] `seo`: `ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined` `pages` [`string`]: `theme` [`string`]: `any` `storySort`: function* ( `a`: `string` `b`: `string` ) => `number` `toolbar` `left`: `right`: `sidebar`: `ActionItem`[] `components`: `Record`<`string`, `unknown`> `analytics`: `any` `renderFn`: function ( `props`* `story`: `doc`: `values`: `options`: ) => `any` `webpack`: `Configuration` \| `WebpackConfigFn` `finalWebpack`: `Configuration` \| `WebpackConfigFn` `presets`: `RuleType`[] `configPath`: `string` `distFolder`: `string` `bundleName`: `string` `staticFolder`: `string` `cssFileName`: `string` `logOptions`: `Partial`<`LogOptions`> `mode`: `"none"` \| `"development"` \| `"production"` `loaders` `at`: `module`: `stories`: `string` \| `string`[] `files`: `string` \| `string`[] `siteRoot`: `string` `ignore`: `string`[] `categories`: `DocType`[] `siteMap`: `type` \| `boolean` `siteUrl`: `string` `instrument`: `any` `search` `indexingModule`: `searchingModule`: `fields`: `emptySearchDocuments`: `hitsPerPage`: `options`: `tokens` `figmaAccessToken`: `githubAccessToken`: `docs`* [`string`]: `type` [`string`]: `any` `title`: `string` `type`: DocType `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template`: `Example`<`Props`> `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: FrameworkRenderFn `data`: DocumentData `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean` `stories` [`string`]: `type` `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `components` [`string`]: `interface` `name`: `string` `importedName`: `"default"` \| `"namespace"` \| `string` `from`: `string` `request`: `string` `fileName`: `string` `propsInfoFile`: `string` `loc`: CodeLocation `package`: `string` `source`: `string` `info`: ComponentInfo `externalDependencies`: Imports `localDependencies`: Imports `jsx`: JSXTree `fileInfo`: FileInfo `jest`: JestTests `packages` [`string`]: `interface` `fileHash`: `string` `name`: `string` `version`: `string` `dependencies`: PackageDependencies `devDependencies`: PackageDependencies `peerDependencies`: PackageDependencies `privateNpm`: `boolean` `repository` `browse`: `docs`: `issues`: `addObserver`: function ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `removeObserver`: function* ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `updateStory`: function* ( `story`* `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` ) => `void` `search`: function ( `store`* `error`: `config`: `docs`: `stories`: `components`: `packages`: `addObserver`: `removeObserver`: `updateStory`: `search`: ) => `SearchResult` `items`: `SearchItem`[] `searchFn`: function ( `search`: ) => `void` `provider` `logo`: `url`: `name`:	Store of stories information in memory after the loader is applied

Name	Type
`storyId`	`string`
`values`	`any`

Name	Type	Description
`returns`	`Store` `error`: `string` `config`* `author`: `string` `controls` [`string`]: `ComponentControl`<`P`> `description`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `footer` `left`: `right`: `menu`: `StaticMenuItem`[] `title`: `string` `image`: `string` `logo`: `string` \| `ReactNode` `app` `propTypes`: `contextTypes`: `defaultProps`: `displayName`: `copyright`: `string` `language`: `string` `links`: (`DetailedHTMLProps`<>)[] `seo`: `ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined` `pages` [`string`]: `theme` [`string`]: `any` `storySort`: function* ( `a`: `string` `b`: `string` ) => `number` `toolbar` `left`: `right`: `sidebar`: `ActionItem`[] `components`: `Record`<`string`, `unknown`> `analytics`: `any` `renderFn`: function ( `props`* `story`: `doc`: `values`: `options`: ) => `any` `webpack`: `Configuration` \| `WebpackConfigFn` `finalWebpack`: `Configuration` \| `WebpackConfigFn` `presets`: `RuleType`[] `configPath`: `string` `distFolder`: `string` `bundleName`: `string` `staticFolder`: `string` `cssFileName`: `string` `logOptions`: `Partial`<`LogOptions`> `mode`: `"none"` \| `"development"` \| `"production"` `loaders` `at`: `module`: `stories`: `string` \| `string`[] `files`: `string` \| `string`[] `siteRoot`: `string` `ignore`: `string`[] `categories`: `DocType`[] `siteMap`: `type` \| `boolean` `siteUrl`: `string` `instrument`: `any` `search` `indexingModule`: `searchingModule`: `fields`: `emptySearchDocuments`: `hitsPerPage`: `options`: `tokens` `figmaAccessToken`: `githubAccessToken`: `docs`* [`string`]: `type` [`string`]: `any` `title`: `string` `type`: DocType `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template`: `Example`<`Props`> `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: FrameworkRenderFn `data`: DocumentData `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean` `stories`* [`string`]: `type` `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `components`* [`string`]: `interface` `name`: `string` `importedName`: `"default"` \| `"namespace"` \| `string` `from`: `string` `request`: `string` `fileName`: `string` `propsInfoFile`: `string` `loc`: CodeLocation `package`: `string` `source`: `string` `info`: ComponentInfo `externalDependencies`: Imports `localDependencies`: Imports `jsx`: JSXTree `fileInfo`: FileInfo `jest`: JestTests `packages` [`string`]: `interface` `fileHash`: `string` `name`: `string` `version`: `string` `dependencies`: PackageDependencies `devDependencies`: PackageDependencies `peerDependencies`: PackageDependencies `privateNpm`: `boolean` `repository` `browse`: `docs`: `issues`: `addObserver`: function ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `removeObserver`: function* ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `updateStory`: function* ( `story`* `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` ) => `void` `search`: function* ( `store`* `error`: `config`: `docs`: `stories`: `components`: `packages`: `addObserver`: `removeObserver`: `updateStory`: `search`: ) => `SearchResult` `items`: `SearchItem`[] `searchFn`: function ( `search`: ) => `void` `provider` `logo`: `url`: `name`:	Store of stories information in memory after the loader is applied

Name	Type
`docId*`	`string`
`returns`	`Document`<> \| `undefined`

Name	Type	Parent
`Provider*`	`type` `propTypes`: `WeakValidationMap`<> \| `undefined` `$typeof`*:	`Context`
`Consumer*`	`type` `$typeof`*:	`Context`
`displayName`	`string` \| `undefined`	`Context`

Name	Type	Parent	Description
`storyId`	`string`	`StateRootProps`	current story id
`docId`	`string`	`StateRootProps`	current documentation page, if no story is selected
`store*`	`Store` `error`: `string` `config`* `author`: `string` `controls` [`string`]: `ComponentControl`<`P`> `description`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `footer` `left`: `right`: `menu`: `StaticMenuItem`[] `title`: `string` `image`: `string` `logo`: `string` \| `ReactNode` `app` `propTypes`: `contextTypes`: `defaultProps`: `displayName`: `copyright`: `string` `language`: `string` `links`: (`DetailedHTMLProps`<>)[] `seo`: `ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined` `pages` [`string`]: `theme` [`string`]: `any` `storySort`: function* ( `a`: `string` `b`: `string` ) => `number` `toolbar` `left`: `right`: `sidebar`: `ActionItem`[] `components`: `Record`<`string`, `unknown`> `analytics`: `any` `renderFn`: function ( `props`* `story`: `doc`: `values`: `options`: ) => `any` `webpack`: `Configuration` \| `WebpackConfigFn` `finalWebpack`: `Configuration` \| `WebpackConfigFn` `presets`: `RuleType`[] `configPath`: `string` `distFolder`: `string` `bundleName`: `string` `staticFolder`: `string` `cssFileName`: `string` `logOptions`: `Partial`<`LogOptions`> `mode`: `"none"` \| `"development"` \| `"production"` `loaders` `at`: `module`: `stories`: `string` \| `string`[] `files`: `string` \| `string`[] `siteRoot`: `string` `ignore`: `string`[] `categories`: `DocType`[] `siteMap`: `type` \| `boolean` `siteUrl`: `string` `instrument`: `any` `search` `indexingModule`: `searchingModule`: `fields`: `emptySearchDocuments`: `hitsPerPage`: `options`: `tokens` `figmaAccessToken`: `githubAccessToken`: `docs`* [`string`]: `type` [`string`]: `any` `title`: `string` `type`: DocType `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template`: `Example`<`Props`> `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: FrameworkRenderFn `data`: DocumentData `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean` `stories`* [`string`]: `type` `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component` `at`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `components`* [`string`]: `interface` `name`: `string` `importedName`: `"default"` \| `"namespace"` \| `string` `from`: `string` `request`: `string` `fileName`: `string` `propsInfoFile`: `string` `loc`: CodeLocation `package`: `string` `source`: `string` `info`: ComponentInfo `externalDependencies`: Imports `localDependencies`: Imports `jsx`: JSXTree `fileInfo`: FileInfo `jest`: JestTests `packages` [`string`]: `interface` `fileHash`: `string` `name`: `string` `version`: `string` `dependencies`: PackageDependencies `devDependencies`: PackageDependencies `peerDependencies`: PackageDependencies `privateNpm`: `boolean` `repository` `browse`: `docs`: `issues`: `addObserver`: function ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `removeObserver`: function* ( `observer`: function* ( `story`: Story ) => `void` ) => `void` `updateStory`: function* ( `story`* `name`: `string` `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `arguments`: StoryArguments `loc`: CodeLocation `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` ) => `void` `search`: function* ( `store`* `error`: `config`: `docs`: `stories`: `components`: `packages`: `addObserver`: `removeObserver`: `updateStory`: `search`: ) => `SearchResult` `items`: `SearchItem`[] `searchFn`: function ( `search`: ) => `void` `provider` `logo`: `url`: `name`:		store object
`activeTab`	`string`	`StateRootProps`	active page tab
`values`	`any`	`StateRootProps`	initial control values. usually passed from the url
`userData`	`Record`<`string`, `any`>	`StateRootProps`	user options passed from container those can be global parameters as well as decorators

Name	Type
`returns`	function ( `docId`*: `string` ) => `Document`<> \| `undefined`

Name	Type
`category*`	`string`
`value`	`string` \| `number`
`returns`	(`Document`<>)[]

If the `of` property is specified, will return the listed components, if `of` is not specified, will return the components specified in the component and subcomponent properties of the document or the story.

defined in @component-controls/store/core/store/src/state/context/components.ts

parameters

Name	Type	Description
anonymous*	`ComponentInputProps`
`returns`	`Components` [`string`]: `interface` `name`: `string` `importedName`: `"default"` \| `"namespace"` \| `string` `from`: `string` `request`: `string` `fileName`: `string` `propsInfoFile`: `string` `loc` `start`: `end`: `package`: `string` `source`: `string` `info` `displayName`: `description`: `props`: `externalDependencies` [`string`]: (`Omit`<`ImportType`, `"from"`>)[] `localDependencies` [`string`]: (`Omit`<`ImportType`, `"from"`>)[] `jsx`: `JSXNode`[] `fileInfo` `dateCreated`: `dateModified`: `commits`: `sloc`: `jest` `results`: `coverage`:	list of components used in store

useCurrentDocument

react component

Returns the currently selected document

defined in @component-controls/store/core/store/src/state/context/document.tsx

useStoryControls

react function

Returns the controls associated with a story

defined in @component-controls/store/core/store/src/state/context/controls.tsx

parameters

Name	Type
`storyId*`	`string`
`returns`	`ComponentControls`<> \| `undefined`

useDocPackage

react component

Returns the package information for the currently selected document

defined in @component-controls/store/core/store/src/state/context/document.tsx

ControlsStateProviderProps

interface

defined in @component-controls/store/core/store/src/state/context/controls.tsx

properties

Name	Type	Description
`onChange*`	`ControlUpdateFn`
`controls`	`ComponentControls`<> [`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<> \| `ComponentControlButton`<> \| `ComponentControlOptions`<> \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFiles`	ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl

useConfigState

react component

Returns a configuration object and the setter method

defined in @component-controls/store/core/store/src/state/context/store.tsx

ControlsStateProvider

react component

defined in @component-controls/store/core/store/src/state/context/controls.tsx

properties

Name	Type	Parent	Description
`onChange*`	`ControlUpdateFn`	`ControlsStateProviderProps`
`controls`	`ComponentControls`<> [`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<> \| `ComponentControlButton`<> \| `ComponentControlOptions`<> \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFiles`	`ControlsStateProviderProps`	ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl

useDocs

function

Returns a key-value object of all documents in the store

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type	Description
`returns`	`Documents` [`string`]: `type` [`string`]: `any` `title`: `string` `type`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string` `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template` `bind`: `storyName`: `id`: `rawId`: `doc`: `storyFn`: `description`: `loc`: `source`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `smartControls`: `decorators`: `plugins`: `category`: `controls`: `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: function ( `props`: ) => `any` `data` [`string`]: `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component` `at`: function ( `index`: ) => `T` \| `undefined` `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls` [`string`]: `ComponentControl`<`P`> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean`	list of story files, or groups

useConfig

function

Returns the configuration object part of the store

defined in @component-controls/store/core/store/src/state/context/store.tsx

parameters

Name	Type	Description
`returns`	`RunConfiguration` `author`: `string` `controls` [`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<`P`> \| `ComponentControlButton` \| `ComponentControlOptions` \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFiles` `description`: `string` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `smartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn` `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `footer` `left`: ActionItems `right`: ActionItems `menu`: `StaticMenuItem`[] `title`: `string` `image`: `string` `logo`: `string` \| `ReactNode` `app` `propTypes`: `WeakValidationMap`<`P`> \| `undefined` `contextTypes`: `ValidationMap`<`any`> \| `undefined` `defaultProps`: `Partial`<`P`> \| `undefined` `displayName`: `string` \| `undefined` `copyright`: `string` `language`: `string` `links`: (`DetailedHTMLProps`<>)[] `seo`: `ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined` `pages` [`string`]: `type` `basePath`: `sideNav`: `label`: `indexHome`: `topMenu`: `container`: `tabs`: `navSidebar`: `contextSidebar`: `fullPage`: `theme` [`string`]: `any` `storySort`: function ( `a`: `string` `b`: `string` ) => `number` `toolbar` `left`: ActionItems `right`: ActionItems `sidebar`: `ActionItem`[] `components`: `Record`<`string`, `unknown`> `analytics`: `any` `renderFn`: function ( `props`* `story`* `name`: `storyName`: `id`: `rawId`: `doc`: `storyFn`: `description`: `arguments`: `loc`: `source`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `controls`: `smartControls`: `decorators`: `plugins`: `category`: `doc` `title`: `type`: `route`: `date`: `dateModified`: `status`: `tags`: `keywords`: `description`: `image`: `author`: `order`: `menu`: `template`: `stories`: `source`: `fileName`: `package`: `testFiles`: `testCoverage`: `testData`: `renderFn`: `data`: `componentsLookup`: `MDXPage`: `isMDXComponent`: `parameters`: `component`: `subcomponents`: `controls`: `smartControls`: `decorators`: `plugins`: `category`: `navSidebar`: `contextSidebar`: `fullPage`: `values`: ExampleControls `options`: `any` ) => `any` `webpack`: `Configuration` \| `WebpackConfigFn` `finalWebpack`: `Configuration` \| `WebpackConfigFn` `presets`: `RuleType`[] `configPath`: `string` `distFolder`: `string` `bundleName`: `string` `staticFolder`: `string` `cssFileName`: `string` `logOptions`: `Partial`<`LogOptions`> `mode`: `"none"` \| `"development"` \| `"production"` `loaders` `at`: function ( `index`: ) => `T` \| `undefined` `module`: `string` `stories`: `string` \| `string`[] `files`: `string` \| `string`[] `siteRoot`: `string` `ignore`: `string`[] `categories`: `DocType`[] `siteMap`: `type` \| `boolean` `siteUrl`: `string` `instrument`: `any` `search` `indexingModule`: `string` `searchingModule`: `string` `fields`: `SearchFields`[] `emptySearchDocuments`: `string`[] `hitsPerPage`: `number` `options`: `any` `tokens` `figmaAccessToken`: `string` `githubAccessToken`: `string`	global configuration for config file

usePages

function

Returns an array of all documents in the store

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type
`returns`	(`Document`<>)[]

DocSortOrder

union

defined in @component-controls/store/core/store/src/state/context/document.tsx

values

"date" | "dateModified" | "title"

useThemeState

react component

Returns the current theme configuration and a setter method

defined in @component-controls/store/core/store/src/state/context/store.tsx

useControl

react function

Retruns a controls and a setter function from the current controls context, given a control name

defined in @component-controls/store/core/store/src/state/context/controls.tsx

parameters

Name	Type
`name`	`string`
`returns`	[`T`, `function`]

docSortFn

function

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name Type

sort* DocSortOrder

Name	Type
`sort*`	`DocSortOrder`
`returns`	`component` [`string`]: `any` `title`: `string` `type`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string` `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template` `bind`: function ( `props`: `Story`<`Props`> ) => `Example`<`Props`> `storyName`: `string` `id`: `string` `rawId`: `string` `doc`: `string` `storyFn`: StoryRenderFn `description`: `string` `loc` `start`: `end`: `source`: `string` `subtitle`: `string` `dynamic`: `boolean` `dynamicId`: `string` `component` `at`: function* ( `index`: `number` ) => `T` \| `undefined` `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `controls` [`string`]: `ComponentControl`<`ExampleControls`> \| `any` `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: function* ( `props`* `story`* `name`: `storyName`: `id`: `rawId`: `doc`: `storyFn`: `description`: `arguments`: `loc`: `source`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `controls`: `smartControls`: `decorators`: `plugins`: `category`: `doc`: Document `values`: ExampleControls `options`: `any` ) => `any` `data` [`string`]: `type` [`string`]: `ComponentControl`<`ExampleControls`> \| `any` `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls` [`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<> \| `ComponentControlButton`<> \| `ComponentControlOptions`<> \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFiles` `smartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn` `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean`

returns

component

[string]: any
title*: string
type: "story" | "blog" | "page" | "tags" | "author" | string
route: string
date: string
dateModified: string
status: "draft" | "published"
tags: string[]
keywords: string[]
description: string | JSX.Element
image: string
author: string
order: number
menu: string
template
bind*: function (
props: Story<Props>
) => Example<Props>
storyName: string
id: string
rawId: string
doc: string
storyFn: StoryRenderFn
description: string
loc
start*:
end*:
source: string
subtitle: string
dynamic: boolean
dynamicId: string
component
at*: function (
index*: number
) => T | undefined
subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>
smartControls: SmartControls
decorators: StoryRenderFn[]
plugins: any
category: string
controls
[string]: ComponentControl<ExampleControls> | any
stories: string[]
source: string
fileName: string
package: string
testFiles: string[]
testCoverage: string[]
testData: string
renderFn: function (
props*
story*
name*:
storyName*:
id*:
rawId*:
doc*:
storyFn*:
description*:
arguments*:
loc*:
source*:
subtitle*:
dynamic*:
dynamicId*:
component*:
subcomponents*:
controls*:
smartControls*:
decorators*:
plugins*:
category*:
doc: Document
values: ExampleControls
options: any
) => any
data
[string]:
type
[string]: ComponentControl<ExampleControls> | any
componentsLookup
[string]: string
MDXPage: any
isMDXComponent: boolean
parameters: any
component: string | Record<string, unknown> | ElementType<Props>
subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>
controls
[string]: ComponentControlText | ComponentControlBoolean | ComponentControlColor | ComponentControlDate | ComponentControlObject<> | ComponentControlButton<> | ComponentControlOptions<> | ComponentControlNumber | ComponentControlArray | ComponentControlFiles
smartControls
smart: boolean
include: string[] | IncludeFn
exclude: string[] | IncludeFn
decorators: StoryRenderFn[]
plugins: any
category: string
navSidebar: boolean
contextSidebar: boolean
fullPage: boolean

useCurrentStory

react component

Returns the currently selected story

defined in @component-controls/store/core/store/src/state/context/story.tsx

useTheme

react component

returns current theme object

defined in @component-controls/store/core/store/src/state/context/store.tsx

useStoryById

react function

Retrieves a Story object from a story id

defined in @component-controls/store/core/store/src/state/context/story.tsx

parameters

Name	Type
`storyId*`	`string`
`returns`	`Story`<> \| `undefined`

ActiveTabContextProvider

react component

defined in @component-controls/store/core/store/src/state/context/store.tsx

properties

Name	Type
`activeTab*`	`string` \| `undefined`

useStoryIdFromName

react function

given a story name, will go through the store to find a story that matches it

defined in @component-controls/store/core/store/src/state/context/story.tsx

parameters

Name	Type
`name`	`string`
`returns`	`string` \| `undefined`

DocsSortContextProvider

react component

defined in @component-controls/store/core/store/src/state/context/document.tsx

useActiveTab

function

Returns the current active tab for documenta that have multiple tabs/pages

defined in @component-controls/store/core/store/src/state/context/store.tsx

parameters

Name	Type
`returns`	`string` \| `undefined`

usePackage

react function

packageId Returns a package object from a package package id. The package id can come from a Document or a Component object.

defined in @component-controls/store/core/store/src/state/context/store.tsx

parameters

Name	Type
`packageId`	`string`
`returns`	`PackageInfo` \| `undefined`

StoryInputProps

interface

defined in @component-controls/store/core/store/src/state/context/story.tsx

properties

Name	Type
`id`	`string`
`name`	`string`

useDocSort

react function

Returns the doc sort order and a setter to update the sort order for a specific doc type

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type
`type*`	`"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string`
`returns`	[`DocSortOrder`, `function`]

useStoryId

react component

Returns a story id from an input id or story name. The id can be '.', which means the current story.

defined in @component-controls/store/core/store/src/state/context/story.tsx

properties

Name	Type	Parent
`id`	`string`	`StoryInputProps`
`name`	`string`	`StoryInputProps`

OptionsContextProvider

react component

defined in @component-controls/store/core/store/src/state/context/store.tsx

properties

Name	Type
`userData*`	`Record`<`string`, `any`>

useUserData

react component

defined in @component-controls/store/core/store/src/state/context/store.tsx

useStory

react component

Returns a story from an input id or story name. The id can be '.', which means the current story.

defined in @component-controls/store/core/store/src/state/context/story.tsx

properties

Name	Type	Parent
`id`	`string`	`StoryInputProps`
`name`	`string`	`StoryInputProps`

useDocByType

function

Returns an array of all documents of a specific doc type

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type
`type*`	`"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string`
`returns`	(`Document`<>)[]

useGetDocByType

function

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type
`returns`	function ( `type`*: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string` ) => (`Document`<>)[]

useComponent

react component

If the `of` property is specified, will return the listed component, if `of` is not specified, will return the component specified in the component property of the document or the story.

defined in @component-controls/store/core/store/src/state/context/components.ts

properties

Name	Type	Parent	Description
`of`	`any`	`ComponentInputProps`	Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab.
`name`	`string`	`ComponentInputProps`	some component-oriented ui components can also be driven by a story id (name). ie the PropsTable can display component props, or story controls

useSortedDocByType

function

Returns a sorted list of documents of a specific doc type. Uses the sort order state.

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type
`type*`	`"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string`
`returns`	(`Document`<>)[]

useStoryComponent

react component

Returns a story's component from an input id or story name. The id can be '.', which means the current story.

defined in @component-controls/store/core/store/src/state/context/story.tsx

properties

Name	Type	Parent
`id`	`string`	`StoryInputProps`
`name`	`string`	`StoryInputProps`

DocCountType

type

defined in @component-controls/store/core/store/src/state/context/document.tsx

properties

Name Type

Name	Type
anonymous	[`string`]: `type` `count`: `number` `home` [`string`]: `any` `title`: `string` `type`: DocType `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template`: `Example`<`Props`> `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: FrameworkRenderFn `data`: DocumentData `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component` `at`*: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: ComponentControls `smartControls`: SmartControls `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean`

anonymous

[string]:

type

count*: number
home
[string]: any
title*: string
type: DocType
route: string
date: string
dateModified: string
status: "draft" | "published"
tags: string[]
keywords: string[]
description: string | JSX.Element
image: string
author: string
order: number
menu: string
template: Example<Props>
stories: string[]
source: string
fileName: string
package: string
testFiles: string[]
testCoverage: string[]
testData: string
renderFn: FrameworkRenderFn
data: DocumentData
componentsLookup
[string]: string
MDXPage: any
isMDXComponent: boolean
parameters: any
component
at*:
subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>
controls: ComponentControls
smartControls: SmartControls
decorators: StoryRenderFn[]
plugins: any
category: string
navSidebar: boolean
contextSidebar: boolean
fullPage: boolean

useDocTypeCount

function

Returns a global object of key/value pairs with counts of documents per doc type

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type
`returns`	`DocCountType`

useCurrentPropsCount

react component

returns the number of prop-info properties count for the current document if the current document has more than one component assigned - will return the sum

defined in @component-controls/store/core/store/src/state/context/components.ts

useStoryPath

react function

Returns a link to a story from a story id.

defined in @component-controls/store/core/store/src/state/context/story.tsx

parameters

Name	Type
`storyId*`	`string`
`returns`	`string`

useGetStoryPath

function

defined in @component-controls/store/core/store/src/state/context/story.tsx

parameters

Name	Type
`returns`	function ( `storyId`*: `string` `activeTab`: `string` ) => `string`

useNavigationInfo

function

Returns the next/previous page objects for the current document

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name Type

Name	Type
`returns`	`NavigationResult` `nextPage` `link`: `string` `title`: `string` `type`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string` `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template` `bind`: `storyName`: `id`: `rawId`: `doc`: `storyFn`: `description`: `loc`: `source`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `smartControls`: `decorators`: `plugins`: `category`: `controls`: `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: function* ( `props`: ) => `any` `data` [`string`]: `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls` [`string`]: `ComponentControl`<`P`> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean` `prevPage` `link`: `string` `title`: `string` `type`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string` `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template` `bind`: `storyName`: `id`: `rawId`: `doc`: `storyFn`: `description`: `loc`: `source`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `smartControls`: `decorators`: `plugins`: `category`: `controls`: `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: function* ( `props`: ) => `any` `data` [`string`]: `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`> `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls` [`string`]: `ComponentControl`<`P`> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean`

returns

NavigationResult

nextPage
link*: string
title*: string
type: "story" | "blog" | "page" | "tags" | "author" | string
route: string
date: string
dateModified: string
status: "draft" | "published"
tags: string[]
keywords: string[]
description: string | JSX.Element
image: string
author: string
order: number
menu: string
template
bind*:
storyName*:
id*:
rawId*:
doc*:
storyFn*:
description*:
loc*:
source*:
subtitle*:
dynamic*:
dynamicId*:
component*:
subcomponents*:
smartControls*:
decorators*:
plugins*:
category*:
controls*:
stories: string[]
source: string
fileName: string
package: string
testFiles: string[]
testCoverage: string[]
testData: string
renderFn: function (
props*:
) => any
data
[string]:
componentsLookup
[string]: string
MDXPage: any
isMDXComponent: boolean
parameters: any
component: string | Record<string, unknown> | ElementType<Props>
subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>
controls
[string]: ComponentControl<P>
smartControls
smart*:
include*:
exclude*:
decorators: StoryRenderFn[]
plugins: any
category: string
navSidebar: boolean
contextSidebar: boolean
fullPage: boolean
prevPage
link*: string
title*: string
type: "story" | "blog" | "page" | "tags" | "author" | string
route: string
date: string
dateModified: string
status: "draft" | "published"
tags: string[]
keywords: string[]
description: string | JSX.Element
image: string
author: string
order: number
menu: string
template
bind*:
storyName*:
id*:
rawId*:
doc*:
storyFn*:
description*:
loc*:
source*:
subtitle*:
dynamic*:
dynamicId*:
component*:
subcomponents*:
smartControls*:
decorators*:
plugins*:
category*:
controls*:
stories: string[]
source: string
fileName: string
package: string
testFiles: string[]
testCoverage: string[]
testData: string
renderFn: function (
props*:
) => any
data
[string]:
componentsLookup
[string]: string
MDXPage: any
isMDXComponent: boolean
parameters: any
component: string | Record<string, unknown> | ElementType<Props>
subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>
controls
[string]: ComponentControl<P>
smartControls
smart*:
include*:
exclude*:
decorators: StoryRenderFn[]
plugins: any
category: string
navSidebar: boolean
contextSidebar: boolean
fullPage: boolean

useDocumentPath

react function

Returns a link to a document from a DocType, document id and active tab

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type
`type*`
`docId*`	`string`
`activeTab*`
`returns`	`string`

useGetDocumentPath

function

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type
`returns`	function ( `type`: `DocType` \| `undefined` `docId`: `string` `activeTab`: `string` ) => `string`

useDocDescription

react function

Returns the descript for a document page. It uses the doc.description property if available, or if there is a component assigned to the document will return the component's name.

defined in @component-controls/store/core/store/src/state/context/document.tsx

parameters

Name	Type	Description
`doc`	`Document`<> [`string`]: `any` `title`: `string` `type`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string` `route`: `string` `date`: `string` `dateModified`: `string` `status`: `"draft"` \| `"published"` `tags`: `string`[] `keywords`: `string`[] `description`: `string` \| `JSX.Element` `image`: `string` `author`: `string` `order`: `number` `menu`: `string` `template` `bind`: `storyName`: `id`: `rawId`: `doc`: `storyFn`: `description`: `loc`: `source`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `smartControls`: `decorators`: `plugins`: `category`: `controls`: `stories`: `string`[] `source`: `string` `fileName`: `string` `package`: `string` `testFiles`: `string`[] `testCoverage`: `string`[] `testData`: `string` `renderFn`: function ( `props`: ) => `any` `data` [`string`]: `componentsLookup` [`string`]: `string` `MDXPage`: `any` `isMDXComponent`: `boolean` `parameters`: `any` `component` `at`: function ( `index`: ) => `T` \| `undefined` `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls` [`string`]: `ComponentControl`<`P`> `smartControls` `smart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string` `navSidebar`: `boolean` `contextSidebar`: `boolean` `fullPage`: `boolean`	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.
`returns`	`string` \| `JSX.Element` \| `undefined`

useSearch

react component

defined in @component-controls/store/core/store/src/state/context/document.tsx