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* | typepropTypes: 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* | Storeerror: stringconfig*author: stringcontrols[string]: ComponentControl<P>description: stringcomponent: string | Record<string, unknown> | ElementType<Props>subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>smartControlssmart*: include*: exclude*: decorators: StoryRenderFn[]plugins: anycategory: stringfooterleft*: right*: menu: StaticMenuItem[]title: stringimage: stringlogo: string | ReactNodeapppropTypes*: contextTypes*: defaultProps*: displayName*: copyright: stringlanguage: stringlinks: (DetailedHTMLProps<>)[]seo: ReactChild | ReactFragment | ReactPortal | boolean | null | undefinedpages[string]: theme[string]: anystorySort: function (a*: stringb*: string) => numbertoolbarleft*: right*: sidebar: ActionItem[]components: Record<string, unknown>analytics: anyrenderFn: function (props*story*: doc*: values*: options*: ) => anywebpack: Configuration | WebpackConfigFnfinalWebpack: Configuration | WebpackConfigFnpresets: RuleType[]configPath: stringdistFolder: stringbundleName: stringstaticFolder: stringcssFileName: stringlogOptions: Partial<LogOptions>mode: "none" | "development" | "production"loadersat*: module*: ident*: loader*: options*: stories: string | string[]files: string | string[]siteRoot: stringignore: string[]categories: DocType[]siteMap: type | booleansiteUrl: stringinstrument: anysearchindexingModule*: searchingModule*: fields*: emptySearchDocuments*: hitsPerPage*: options*: tokensfigmaAccessToken*: githubAccessToken*: docs*[string]: type[string]: anytitle*: stringtype: DocTyperoute: stringdate: stringdateModified: stringstatus: "draft" | "published"tags: string[]keywords: string[]description: string | JSX.Elementimage: stringauthor: stringorder: numbermenu: stringtemplate: Example<Props>stories: string[]source: stringfileName: stringpackage: stringtestFiles: string[]testCoverage: string[]testData: stringrenderFn: FrameworkRenderFndata: DocumentDatacomponentsLookup[string]: stringMDXPage: anyisMDXComponent: booleanparameters: anycomponentat*: subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>controls: ComponentControlssmartControls: SmartControlsdecorators: StoryRenderFn[]plugins: anycategory: stringnavSidebar: booleancontextSidebar: booleanfullPage: booleanstories*[string]: typename*: stringstoryName: stringid: stringrawId: stringdoc: stringstoryFn: StoryRenderFndescription: stringarguments: StoryArgumentsloc: CodeLocationsource: stringsubtitle: stringdynamic: booleandynamicId: stringcomponentat*: subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>controls: ComponentControlssmartControls: SmartControlsdecorators: StoryRenderFn[]plugins: anycategory: stringcomponents*[string]: interfacename*: stringimportedName: "default" | "namespace" | stringfrom: stringrequest: stringfileName: stringpropsInfoFile: stringloc: CodeLocationpackage: stringsource: stringinfo: ComponentInfoexternalDependencies: ImportslocalDependencies: Importsjsx: JSXTreefileInfo: FileInfojest: JestTestspackages*[string]: interfacefileHash*: stringname: stringversion: stringdependencies: PackageDependenciesdevDependencies: PackageDependenciespeerDependencies: PackageDependenciesprivateNpm: booleanrepository*browse*: docs*: issues*: addObserver*: function (observer*: function (story: Story) => void) => voidremoveObserver*: function (observer*: function (story: Story) => void) => voidupdateStory*: function (story*name*: stringstoryName: stringid: stringrawId: stringdoc: stringstoryFn: StoryRenderFndescription: stringarguments: StoryArgumentsloc: CodeLocationsource: stringsubtitle: stringdynamic: booleandynamicId: stringcomponent: string | Record<string, unknown> | ElementType<Props>subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>controls: ComponentControlssmartControls: SmartControlsdecorators: StoryRenderFn[]plugins: anycategory: string) => voidsearch: function (store*error*: config*: docs*: stories*: components*: packages*: addObserver*: removeObserver*: updateStory*: search*: ) => SearchResultitems*: SearchItem[]searchFn*: function (search*: ) => voidproviderlogo*: 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