@component-controls/store

Table of contents

• Overview
• Installation
• API
  • ControlUpdateFn
  • StoreContext
  • useDocPropCount
  • ComponentInputProps
  • ControlsContextProps
  • StoreContextProvider
  • StateRootProps
  • DocumentContextProvider
  • StoryContext
  • LoadingStore
  • loadStore
  • ControlsContextStoryProvider
  • StoryContextProvider
  • useStore
  • useDocument
  • ConfigContext
  • StateRoot
  • useGetDocument
  • ConfigContextProvider
  • useDocsByCategory
  • useComponents
  • useCurrentDocument
  • useStoryControls
  • useDocPackage
  • ControlsStateProviderProps
  • useConfigState
  • ControlsStateProvider
  • useDocs
  • useConfig
  • usePages
  • DocSortOrder
  • useThemeState
  • useControl
  • docSortFn
  • useCurrentStory
  • useTheme
  • useStoryById
  • ActiveTabContextProvider
  • useStoryIdFromName
  • DocsSortContextProvider
  • useActiveTab
  • usePackage
  • StoryInputProps
  • useDocSort
  • useStoryId
  • OptionsContextProvider
  • useUserData
  • useStory
  • useDocByType
  • useGetDocByType
  • useComponent
  • useSortedDocByType
  • useStoryComponent
  • DocCountType
  • useDocTypeCount
  • useCurrentPropsCount
  • useStoryPath
  • useGetStoryPath
  • useNavigationInfo
  • useDocumentPath
  • useGetDocumentPath
  • useDocDescription
  • useSearch

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

API

ControlUpdateFn

function

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

parameters

Name	Type
name*	string | undefined
newValue*	any

StoreContext

interface

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

properties

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

useDocPropCount

function

Returns the number of documents by unique values in their `category` field

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

parameters

Name	Type
category*	string
returns	DocCountType

ComponentInputProps

interface

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

properties

Name	Type	Description
of	any	Specify the component(s), for which to have information displayed. The default, a value of "." will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab.
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

ControlsContextProps

interface

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

properties

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

StoreContextProvider

react component

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

properties

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*:

StateRootProps

interface

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

properties

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

DocumentContextProvider

react component

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

properties

Name	Type
docId*	string | undefined

StoryContext

interface

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

properties

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

LoadingStore

interface

defined in @component-controls/loader/core/loader/dist/store.d.ts

properties

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*:

loadStore

function

defined in @component-controls/store/core/store/src/serialization/load-store.ts

parameters

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

ControlsContextStoryProvider

react component

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

StoryContextProvider

react component

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

properties

Name	Type
storyId	string
values	any

useStore

function

Returns the global store object

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

parameters

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

useDocument

react function

Retrieves a Document object from a document id

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

parameters

Name	Type
docId*	string
returns	Document<> | undefined

ConfigContext

interface

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

properties

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

StateRoot

react component

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

properties

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

useGetDocument

function

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

parameters

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

ConfigContextProvider

react component

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

useDocsByCategory

function

Returns an array of documents that have a specific value in their `category` field

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

parameters

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

useComponents

function

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
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

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

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