Overview

Type definitions of the component-controls specification and accompanying utility functions. Includes definitions for:

Story
Stories
Document
ControlTypes
ComponentControl
PropTypes
and more...

Installation

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

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

API

SourceIdentifier

interface

an identifier/variable.argument in the source code

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Description
`name*`	`string`
`loc`	`CodeLocation`	location in the source code of a story or part of it ie. arguments, usage of arguments

ArgUsageLocation

interface

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Description
`loc*`	`SourceLocation` `start`* `line`: `number` `column`: `number` `end`* `line`: `number` `column`: `number`	where in the story source code is the argument used code location is relative to the start of the story
`name`	`SourceIdentifier`	an identifier/variable.argument in the source code
`shorthand`	`boolean`	true if the property is a 'shorthand'. { prop: value } - not a shorthand. { prop } - a shorthand.

StoryArgument

interface

arguments passed to the 'story' function, extracted by an AST loader

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Description
`value*`	`string` \| `StoryArguments`	either the name used (or a variable alias), or an array of sub-arguments ({ name: alias })
`name`	`string`	the original name of the argument
`loc`	`CodeLocation`	location in the source code of a story or part of it ie. arguments, usage of arguments
`usage`	`ArgUsageLocation`[]	list of locations where the argument is used in the body of the story

StoryArguments

array

list of story arguments. Each argument can be a deconstructed argument of itself the first argument are the control 'values'

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Description
anonymous*	`StoryArgument`	arguments passed to the 'story' function, extracted by an AST loader

Story

type

Story interface - usually extracted by the AST instrumenting loader

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Parent	Description
`name*`	`string`		name of the Story.
`storyName`	`string`		alternative name prop
`id`	`string`		id of the story
`rawId`	`string`		raw id for the story as declared in ESM format
`doc`	`string`		title of the file/group of stories
`storyFn`	`StoryRenderFn`		story render function
`description`	`string`		story extended description. can use markdown.
`arguments`	`StoryArguments`		list of story arguments. Each argument can be a deconstructed argument of itself the first argument are the control 'values'
`loc`	`CodeLocation`		location in the source code of a story or part of it ie. arguments, usage of arguments
`source`	`string`		the source code of the story, extracted by the AST instrumenting loaders
`subtitle`	`string`		optional story subtitle property
`dynamic`	`boolean`		if set to true, the function is dynamically creating stories, returns a list of Story objects
`dynamicId`	`string`		if the story was created by a dynamic story (factory), this is the original story id. it is set internally and will be used to create a story URL
`component`	`type` `at`: function* ( `index`*: `number` ) => `T` \| `undefined`	`StoryProps`	id for component associated with the story
`subcomponents`	`Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>	`StoryProps`	multiple components option
`controls`	`ComponentControls`	`StoryProps`	ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl
`smartControls`	`SmartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn`	`StoryProps`	"smart" controls options
`decorators`	`StoryRenderFn`[]	`StoryProps`	array of wrapper functions (decorators) to be called when rendering each individual story.
`plugins`	`any`	`StoryProps`	plugins configuration settings
`category`	`string`	`StoryProps`	category string - can be used for cleanly separating stories/components

DynamicExamples

array

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Description
anonymous*	`Story`	Story interface - usually extracted by the AST instrumenting loader

ExampleControl

union

defined in @component-controls/core/core/core/src/document.ts

values

ComponentControl | any

ExampleControls

type

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type
`name*`	[`string`]: `ExampleControl`

Example

type

es named export function, excapsulates a contained example code.

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Parent	Description
`bind*`	function ( `props`: `Story` ) => `Example`
`source`	`string`	`Story`	the source code of the story, extracted by the AST instrumenting loaders
`storyName`	`string`	`Story`	alternative name prop
`id`	`string`	`Story`	id of the story
`rawId`	`string`	`Story`	raw id for the story as declared in ESM format
`doc`	`string`	`Story`	title of the file/group of stories
`storyFn`	`StoryRenderFn`	`Story`	story render function
`description`	`string`	`Story`	story extended description. can use markdown.
`loc`	`CodeLocation`	`Story`	location in the source code of a story or part of it ie. arguments, usage of arguments
`subtitle`	`string`	`Story`	optional story subtitle property
`dynamic`	`boolean`	`Story`	if set to true, the function is dynamically creating stories, returns a list of Story objects
`dynamicId`	`string`	`Story`	if the story was created by a dynamic story (factory), this is the original story id. it is set internally and will be used to create a story URL
`component`	`type` `at`: function* ( `index`*: `number` ) => `T` \| `undefined`	`StoryProps`	id for component associated with the story
`subcomponents`	`Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>	`StoryProps`	multiple components option
`smartControls`	`SmartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn`	`StoryProps`	"smart" controls options
`decorators`	`StoryRenderFn`[]	`StoryProps`	array of wrapper functions (decorators) to be called when rendering each individual story.
`plugins`	`any`	`StoryProps`	plugins configuration settings
`category`	`string`	`StoryProps`	category string - can be used for cleanly separating stories/components
`controls`	`ExampleControls`

DocumentData

type

records of storyid/data pairs, to be associated with documents

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type
anonymous	[`string`]: `ExampleControls`

StoryFactoryFn

function

dynamic story creator function type. returns an array of dynamically loaded stories

defined in @component-controls/core/core/core/src/document.ts

parameters

Name	Type	Description
`doc*`	`Document`
`returns`	`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`: function ( `index`*: `number` ) => `T` \| `undefined` `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)> `controls`: `ComponentControls` `smartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn` `decorators`: `StoryRenderFn`[] `plugins`: `any` `category`: `string`	Story interface - usually extracted by the AST instrumenting loader

defDocType

union = "story"

defined in @component-controls/core/core/core/src/document.ts

values

Document

type

A documentation file's metadata. For MDX files, fromtmatter is used to declare the document properties. For ESM (ES Modules) documentation files, the default export is used.

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Parent	Description
`key*`	[`string`]: `any`		custom document props
`title*`	`string`		title of the document. If no 'route' parameter is specifified, the title is used to generate the document url. This is the only required field, to show the document in the menu structures.
`type`	`DocType`		document type - blogs, pages, stories and even custom ones. By default - story
`route`	`string`		if provided, will be used as the route for the page. if not provided, the title in lowercase will be used as the route
`date`	`string`		optional date the document was created. If not assigned, the instrumentation process will use birthtime
`dateModified`	`string`		optional date the document was last modified. If not assigned, the instrumentation process will use mtime
`status`	`"draft"` \| `"published"`		if set to draft, the document will be hidden in production builds.
`tags`	`string`[]		comma-separated list of document tags, used for search and for SOE keywords unless keyswords are specified.
`keywords`	`string`[]		comma-separated list of SEO keywords
`description`	`string` \| `JSX.Element`		documentation file description
`image`	`string`		link to an image for the document, will be used for SEO
`author`	`string`		document author
`order`	`number`		document order, used to sort documents within the same parent
`menu`	`string`		to which static menu to attach the document compatibility with docz
`template`	`Example`		es named export function, excapsulates a contained example code.
`stories`	`string`[]		list of story ids contained in the document.
`source`	`string`		source code of the entire file of stories
`fileName`	`string`		file name of the file of stories
`package`	`string`		lookup into the global store of PackageInfo package.json
`testFiles`	`string`[]		optional specify which test files are asociated with the document
`testCoverage`	`string`[]		optional specify which files to use for test coverage
`testData`	`string`		optional test data file
`renderFn`	`FrameworkRenderFn`		render function by framework. By default 'react'
`data`	`DocumentData`		records of storyid/data pairs, to be associated with documents
`componentsLookup`	`type` [`string`]: `string`		lookup into the global store.components since multiple components of the same name can be used example: ['Button']: 'c:/myapp/Button.tsx'
`MDXPage`	`any`		for MDX documents, this is an MDXContent function, to be rendered inside a MDXProvider
`isMDXComponent`	`boolean`		custom prop set by mdxjs
`parameters`	`any`		storybook compatibility field
`component`	`type` `at`: function* ( `index`*: `number` ) => `T` \| `undefined`	`StoryProps`	id for component associated with the story
`subcomponents`	`Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>	`StoryProps`	multiple components option
`controls`	`ComponentControls`	`StoryProps`	ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl
`smartControls`	`SmartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn`	`StoryProps`	"smart" controls options
`decorators`	`StoryRenderFn`[]	`StoryProps`	array of wrapper functions (decorators) to be called when rendering each individual story.
`plugins`	`any`	`StoryProps`	plugins configuration settings
`category`	`string`	`StoryProps`	category string - can be used for cleanly separating stories/components
`navSidebar`	`boolean`	`PageLayoutProps`	whether to add navigation sidebar to the page
`contextSidebar`	`boolean`	`PageLayoutProps`	whether to add conext sidebar to navigate the sections of the current document
`fullPage`	`boolean`	`PageLayoutProps`	whether to take a fullpage theme option

dateToLocalString

react function

defined in @component-controls/core/core/core/src/document.ts

parameters

Name	Type
`date`	`Date`
`returns`	`string`

DocInfo

type

short document information. used in search results, or index page

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Parent	Description
`title*`	`string`	`Document`	title of the document. If no 'route' parameter is specifified, the title is used to generate the document url. This is the only required field, to show the document in the menu structures.
`image`	`string`	`Document`	link to an image for the document, will be used for SEO
`description`	`string` \| `JSX.Element`	`Document`	documentation file description
`tags`	`string`[]	`Document`	comma-separated list of document tags, used for search and for SOE keywords unless keyswords are specified.
`author`	`string`	`Document`	document author
`type`	`DocType`	`Document`	document type - blogs, pages, stories and even custom ones. By default - story
`date`	`string`	`Document`	optional date the document was created. If not assigned, the instrumentation process will use birthtime
`link*`	`string`		following fields are useful for highlighting search results
`authorLink`	`string`
`rawTags`	`string`[]
`rawType`	`string`

Documents

type

list of story files, or groups

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type
anonymous	[`string`]: `Document`

Pages

array

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Description
anonymous*	`Document`	A documentation file's metadata. For MDX files, fromtmatter is used to declare the document properties. For ESM (ES Modules) documentation files, the default export is used.

Stories

type

list of stories

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type
anonymous	[`string`]: `Story`

Packages

type

list of repositories

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type
anonymous	[`string`]: `PackageInfo`

StoreObserver

function

defined in @component-controls/core/core/core/src/document.ts

parameters

Name	Type	Description
`story`	`Story`	Story interface - usually extracted by the AST instrumenting loader

CURRENT_STORY

string = "."

Shorthand id to denote the current story

defined in @component-controls/core/core/core/src/document.ts

Store

interface

Store of stories information in memory after the loader is applied

defined in @component-controls/core/core/core/src/document.ts

properties

Name	Type	Description
`error`	`string`	build-time error string
`config*`	`RunConfiguration`	global configuration for config file
`docs*`	`Documents`	list of documents (pages)
`stories*`	`Stories`	list of stories
`components*`	`Components`	list of components used in stories and documents
`packages*`	`Packages`	list of package.json files and their data used by the components and the stories of the project
`addObserver*`	function ( `observer`*: `StoreObserver` ) => `void`	storybook integration notifiers
`removeObserver*`	function ( `observer`*: `StoreObserver` ) => `void`
`updateStory*`	function ( `story`*: `Story` ) => `void`	update store, for example controls or state
`search`	function ( `store`: `Store` ) => `SearchResult` `items`: `SearchItem`[] `searchFn`: function* ( `search`: `string` ) => `void` `provider` `logo`: ReactNode `url`: `string` `name`: `string`

getDefaultStore

function

defined in @component-controls/core/core/core/src/document.ts

parameters

Name	Type	Description
`returns`	`Store`	Store of stories information in memory after the loader is applied

assignProps

react function

defined in @component-controls/core/core/core/src/document.ts

parameters

Name	Type
`obj*`	`Document`<> \| `Story`<>
anonymous*	`Document`<> \| `Story`<>
`returns`	`Document`<> \| `Story`<>

ComponentControlData

interface

defined in @component-controls/core/core/core/src/controls.ts

properties

Name	Type	Description
`name*`	`string`	'name' for generating random data from faker.js usually comprised of two parts, separated by a dot example 'internet.avatar'
`options`	`type` [`string`]: `any`	options to be passed to the random data generators example { min: 10, max: 20 }

ComponentControlBase

interface

Base inteface for creating control types All new property typs should extend this interface and support

defined in @component-controls/core/core/core/src/controls.ts

properties

Name	Type	Description
`type*`	`ControlTypes`	Control field types examples are provided for the different types:
`label`	`string`	label to display next to the field editor by default uses the property name itself
`value`	`T`	a default value for the property
`defaultValue`	`T`	default value is automatically set at run-time, from the value
`required`	`boolean`	visually display the control property as required
`description`	`string`	full text property description. can use markdown.
`hidden`	`boolean`	hide the property editor for this property will only use the value
`groupId`	`string`	allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ComponentControlText

interface

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`TEXT`	`ControlTypes`	`"text"`	userName: { type: ControlTypes.TEXT, label: 'Name', value: 'Storyteller', },
`placeholder`	`string`			placeholder for empty properties either undefined initial value or user clears the field
`rows`	`number`			number of rows for a TextArea field for longer text by default, only 1 row = means a Input field > 1 rows = an area field
`escapeValue`	`boolean`			allows to receive escaped string values to help prevent XSS attacks by default - false
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ComponentControlBoolean

interface

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`BOOLEAN`	`ControlTypes`	`"boolean"`	nice: { type: ControlTypes.BOOLEAN, label: 'Nice', value: true, },
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ColorPickerKind

union

defined in @component-controls/core/core/core/src/controls.ts

values

"hex" | "rgb" | "rgba" | "hsl" | "hsla"

ComponentControlColor

interface

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`COLOR`	`ControlTypes`	`"color"`	color: { type: ControlTypes.COLOR, value: '#000000', },
`kind`	`ColorPickerKind`			format to save the color as a string
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ComponentControlDate

interface

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`DATE`	`ControlTypes`	`"date"`	birthday: { type: ControlTypes.DATE, label: 'Birthday', value: new Date(), },
`datePicker`	`boolean`			whether to display a date picker (calendar). default: true
`timePicker`	`boolean`			whether to display a time picker (calendar). default: true
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ComponentControlFiles

interface

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`FILES`	`ControlTypes`	`"files"`	images: { type: ControlTypes.FILES, label: 'Happy Picture', accept: 'image/*', value: [ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=', ], },
`accept`	`string`			type of files to accept user to open ex 'image/*',
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ComponentControlArray

interface

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`ARRAY`	`ControlTypes`	`"array"`	arrayItems: { type: ControlTypes.ARRAY, label: 'Items', rowType: { name: { type: ControlTypes.TEXT }, }, value: [{ name: 'Laptop' }, { name: 'Book' }, { name: 'Whiskey' }], },
`rowType*`	`ComponentControls`			type of the items in each row of the array
`editLabel`	`string`			the label for the editor button
`inline`	`boolean`			if true, the editor will be rendered inline instead of a popup
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ComponentControlObject

interface

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`OBJECT`	`ControlTypes`	`"object"`	style: { type: ControlTypes.OBJECT, label: 'Styles', value: { // do not randomize the border style border: { type: ControlTypes.TEXT, value: '2px dashed silver', data: null }, borderRadius: { type: ControlTypes.NUMBER, value: 10 }, padding: { type: ControlTypes.NUMBER, value: 10 }, }, }
`editLabel`	`string`			the label for the editor button
`inline`	`boolean`			if true, the editor will be rendered inline instead of a popup
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ComponentControlButton

interface

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`BUTTON`	`ControlTypes`	`"button"`	button: { type: ControlTypes.BUTTON, onClick: () => { ... code to modify some variables } },
`onClick`	function ( `prop`*: `ComponentControlButton` ) => `void`			for button type fields, an onClick handler
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

OptionsValueType

union

defined in @component-controls/core/core/core/src/controls.ts

values

T | number | string[] | number[] | type

OptionsListType

union

value/label pairs or array of OptionsValueType

defined in @component-controls/core/core/core/src/controls.ts

values

type | OptionsValueType[]

ComponentControlOptions

interface

list of options can be 1. key-value pair object: in format { label: value } 2. array of strings 3. array of key-value pair objects

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`OPTIONS`	`ControlTypes`	`"options"`	fruit: { type: ControlTypes.OPTIONS, label: 'Fruit', value: 'apple', options: { Apple: 'apple', Banana: 'banana', Cherry: 'cherry', }, },
`options*`	`OptionsListType`			value/label pairs or array of OptionsValueType
`display`	`"select"` \| `"multi-select"` \| `"radio"` \| `"inline-radio"` \| `"check"` \| `"inline-check"`			how to render selecting the options: default is 'select'
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ComponentControlNumber

interface

defined in @component-controls/core/core/core/src/controls.ts

extends

ComponentControlBase

properties

Name	Type	Parent	Default	Description
`type*`	`NUMBER`	`ControlTypes`	`"number"`	age: { type: ControlTypes.NUMBER, label: 'Age', value: 78, range: true, min: 0, max: 90, step: 5, },
`range`	`boolean`			for numeric type fieldsif true, will display a range type slider editor
`min`	`number`			minimum allowed value for numeric property
`max`	`number`			maximum allowed value for numeric property
`step`	`number`			stepper for numeric editor /i nc/dec value
`label`	`string`	`ComponentControlBase`		label to display next to the field editor by default uses the property name itself
`value`	`T`	`ComponentControlBase`		a default value for the property
`defaultValue`	`T`	`ComponentControlBase`		default value is automatically set at run-time, from the value
`required`	`boolean`	`ComponentControlBase`		visually display the control property as required
`description`	`string`	`ComponentControlBase`		full text property description. can use markdown.
`hidden`	`boolean`	`ComponentControlBase`		hide the property editor for this property will only use the value
`groupId`	`string`	`ComponentControlBase`		allows grouping of the properties in a property editor for example different editor tabs
`order`	`number`	`ComponentControlBase`		allows custom sorting of the properties if 'order' is not provided, the props will be sorted by the order/key of the object (unreliable)
`data`	`ComponentControlData` \| `null` \| `false`	`ComponentControlBase`		helper information to generate random data will be used in conjunction with faker.js data can be set to false, if the control should not be randomized

ComponentControl

union

ComponentControl is a either an object of property settings or a shortcut can be used: properties: { text: 'Hello', },

defined in @component-controls/core/core/core/src/controls.ts

values

ComponentControls

interface

ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl

defined in @component-controls/core/core/core/src/controls.ts

properties

Name	Type
`name*`	[`string`]: `ComponentControl`

ControlTypes

enum

Control field types examples are provided for the different types:

defined in @component-controls/core/core/core/src/controls.ts

properties

Name	Type	Value	Description
`TEXT*`	`string`	`"text"`	userName: { type: ControlTypes.TEXT, label: 'Name', value: 'Storyteller', },
`NUMBER*`	`string`	`"number"`	age: { type: ControlTypes.NUMBER, label: 'Age', value: 78, range: true, min: 0, max: 90, step: 5, },
`BOOLEAN*`	`string`	`"boolean"`	nice: { type: ControlTypes.BOOLEAN, label: 'Nice', value: true, },
`OPTIONS*`	`string`	`"options"`	fruit: { type: ControlTypes.OPTIONS, label: 'Fruit', value: 'apple', options: { Apple: 'apple', Banana: 'banana', Cherry: 'cherry', }, },
`DATE*`	`string`	`"date"`	birthday: { type: ControlTypes.DATE, label: 'Birthday', value: new Date(), },
`COLOR*`	`string`	`"color"`	color: { type: ControlTypes.COLOR, value: '#000000', },
`BUTTON*`	`string`	`"button"`	button: { type: ControlTypes.BUTTON, onClick: () => { ... code to modify some variables } },
`OBJECT*`	`string`	`"object"`	style: { type: ControlTypes.OBJECT, label: 'Styles', value: { // do not randomize the border style border: { type: ControlTypes.TEXT, value: '2px dashed silver', data: null }, borderRadius: { type: ControlTypes.NUMBER, value: 10 }, padding: { type: ControlTypes.NUMBER, value: 10 }, }, }
`ARRAY*`	`string`	`"array"`	arrayItems: { type: ControlTypes.ARRAY, label: 'Items', rowType: { name: { type: ControlTypes.TEXT }, }, value: [{ name: 'Laptop' }, { name: 'Book' }, { name: 'Whiskey' }], },
`FILES*`	`string`	`"files"`	images: { type: ControlTypes.FILES, label: 'Happy Picture', accept: 'image/*', value: [ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=', ], },

TypeValue

union

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

values

TypeInformation

interface

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

properties

Name	Type	Description
`name*`	`TypeValue`
`value`	`TypeInformation`[] \| `any`	type value elements of enum, array, fields of object return value of function
`raw`	`string`	raw type code
`arguments`	`TypeInformation`[] \| `any`	argument types of function
`required`	`boolean`	is the property required

PropType

interface

docgen generated property types mapped to common types to be consumed by component-controls check props-info packages for implementations

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

properties

Name	Type	Description
`defaultValue`	`any`	default value for the property
`type*`	`TypeInformation`	propertty type
`description`	`string`	description of the property
`parentName`	`string`	name of the parent/inherited property
`deprecated`	`string`	if the property is deprecated, contains a string

PropTypes

interface

list of properties of the component

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

properties

Name	Type
`key*`	[`string`]: `PropType`

ComponentInfo

interface

DocGen type onfo generated for a compoennt

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

properties

Name	Type	Description
`displayName*`	`string`	name of the component
`description`	`string`	optional description
`props*`	`PropTypes`	component props

JSXNode

type

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

properties

Name	Type	Parent	Description
`name*`	`string`	`ImportType`	component name
`importedName*`	`string`	`ImportType`	importedName - the original named import that was aliased
`from*`	`string`	`ImportType`	imported from
`typesFile`	`string`	`ImportType`	imported from alias file name ie '/component-controls/core/store/dist/index.d.ts'
`componentKey`	`string`	`ImportType`	key into components table
`attributes`	`string`[]
`children`	`JSXTree`		jsx tree of elements for the component

JSXTree

array

jsx tree of elements for the component

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

properties

Name	Type
anonymous*	`JSXNode`

Component

interface

component specified for stories or story files

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

properties

Name	Type	Description
`name*`	`string`	name of the component as used in the fiel
`importedName`	`"default"` \| `"namespace"` \| `string`	imported name ex: - default import import Button from 'buttons'; - namespace import import * as Button from 'buttons'; - named import import { Button } from 'buttons'; - named alias import import { Btn as Button } from 'buttons';
`from`	`string`	imported from
`request`	`string`	resolved import request
`fileName`	`string`	file name with extension
`propsInfoFile`	`string`	file containing the component's props info sometimes different from the component source file for example external libraries that have a separate index.d.ts file
`loc`	`CodeLocation`	location in the source code of a story or part of it ie. arguments, usage of arguments
`package`	`string`	lookup into the global store of PackageInfo package.json
`source`	`string`	the source code of the component file, extracted by the AST instrumenting loaders. Can also be overriden manually.
`info`	`ComponentInfo`	DocGen type onfo generated for a compoennt
`externalDependencies`	`Imports`	list of component's file imports from external libraries
`localDependencies`	`Imports`	list of component's file imports from local (imported via relative import) files
`jsx`	`JSXTree`	jsx tree of elements for the component
`fileInfo`	`FileInfo` `dateCreated`: `string` `dateModified`: `string` `commits`: `Commit`[] `sloc` `block`: `number` `blockEmpty`: `number` `comment`: `number` `empty`: `number` `mixed`: `number` `single`: `number` `source`: `number` `todo`: `number` `total`*: `number`	source file info
`jest`	`JestTests` `results`: `JestResult`[] `coverage`: `Record`<`string`, `Record`<`CoverageKind`, `CoverageMetrics`>>	jest test and coverage results for the component

Components

type

list of components used in store

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

properties

Name	Type
anonymous	[`string`]: `Component`

getComponentName

react function

given a component, return its name

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

parameters

Name	Type	Description
`component*`	`any`	a string component name, or a component class, with a name or displayName static property
`returns`	`string` \| `undefined`

PropsInfoExtractorFunction

function

callback function to extract props info table - ie docgen type libraries used to extract displayName, and props tables for a component

defined in @component-controls/core/core/core/src/propsInfo.ts

parameters

Name	Type	Description
`fileName*`	`string`	full name and path of the component path react-docgen needs it to extract babel configurations.
`componentName`	`string`	optional component name react-docgen-typescript supports multiple exports for a file react-docgne does not use it.
`source`	`string`	optional soure, saves time if its already loaded react-docgen accepts source as input parameter react-docgen-typescript does not use it.
`returns`	`Promise` \| `ComponentInfo` \| `undefined`	async or normal function that loads ComponentInfo props info.

ImportType

interface

defined in @component-controls/follow-imports/misc/follow-imports/dist/consts.d.ts

properties

Name	Type	Description
`name*`	`string`	component name
`importedName*`	`string`	importedName - the original named import that was aliased
`from*`	`string`	imported from
`typesFile`	`string`	imported from alias file name ie '/component-controls/core/store/dist/index.d.ts'
`componentKey`	`string`	key into components table

ImportTypes

interface

defined in @component-controls/follow-imports/misc/follow-imports/dist/consts.d.ts

properties

Name	Type
`key*`	[`string`]: `ImportType`

CodePosition

type

position in the source file of a token usually taken from AST traverse loaders

defined in @component-controls/core/core/core/src/utility.ts

properties

Name	Type	Parent
`line*`	`number`	`start`
`column*`	`number`	`start`

CodeLocation

interface

location in the source code of a story or part of it ie. arguments, usage of arguments

defined in @component-controls/core/core/core/src/utility.ts

properties

Name	Type	Parent
`start*`	`type` `line`: `number` `column`: `number`	`SourceLocation`
`end*`	`type` `line`: `number` `column`: `number`	`SourceLocation`

PackageRepository

interface

repository information from package.json

defined in @component-controls/core/core/core/src/utility.ts

properties

Name	Type	Description
`browse`	`string`	link for browsing the file
`docs`	`string`	link for project readme
`issues`	`string`	link for filing issues with the project

PackageDependency

string

dependecy string - the package version number

defined in @component-controls/core/core/core/src/utility.ts

PackageDependencies

interface

list of dependencies - package name as the key and the version as the value

defined in @component-controls/core/core/core/src/utility.ts

properties

Name	Type
`name*`	[`string`]: `PackageDependency`

PackageInfo

interface

package.json information about the repository of the stories and components

defined in @component-controls/core/core/core/src/utility.ts

properties

Name	Type	Description
`fileHash*`	`string`	file name hash of package.json
`name`	`string`	package name
`version`	`string`	package version
`dependencies`	`PackageDependencies`	list of dependencies - package name as the key and the version as the value
`devDependencies`	`PackageDependencies`	list of dependencies - package name as the key and the version as the value
`peerDependencies`	`PackageDependencies`	list of dependencies - package name as the key and the version as the value
`privateNpm`	`boolean`	if false, the package is not published to npm
`repository*`	`PackageRepository`	repository information extracted from the "repository" field in package.json.

StoryRenderFn

function

story render function

defined in @component-controls/core/core/core/src/utility.ts

parameters

Name	Type	Description
`controlValues`	`type` [`string`]: `any`	props values passed by controls
`context`	`any`	context parameters passed as second parameter
`returns`	`Promise` \| `any`

Imports

interface

defined in @component-controls/core/core/core/src/utility.ts

properties

Name	Type
`key*`	[`string`]: (`Omit`<`ImportType`, `"from"`>)[]

defaultExport

string = "default"

default export keyword

defined in @component-controls/core/core/core/src/utility.ts

ActionItem

interface

an item in the ActionBar component

defined in @component-controls/core/core/core/src/utility.ts

properties

Name	Type	Description
`id`	`string`	optional id, used if title is not set
`node*`	`ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined`	title - if a string, will use the built-in components, else can prvide custom React component
`href`	`string`	if the title is a string and href is set will use a default `<Link />` component
`onClick`	function ( `e`* `altKey`: `boolean` `button`: `number` `buttons`: `number` `clientX`: `number` `clientY`: `number` `ctrlKey`: `boolean` `getModifierState`: function* ( `key`: `string` ) => `boolean` `metaKey`: `boolean` `movementX`: `number` `movementY`: `number` `pageX`: `number` `pageY`: `number` `relatedTarget`: `EventTarget` \| `null` `screenX`: `number` `screenY`: `number` `shiftKey`: `boolean` `detail`: `number` `view` `styleMedia`: StyleMedia `document`: `Document` `nativeEvent`: `MouseEvent` `currentTarget`: `target`: `EventTarget` `bubbles`: `boolean` `cancelable`: `boolean` `defaultPrevented`: `boolean` `eventPhase`: `number` `isTrusted`: `boolean` `preventDefault`: preventDefault `isDefaultPrevented`: isDefaultPrevented `stopPropagation`: stopPropagation `isPropagationStopped`: isPropagationStopped `persist`: persist `timeStamp`: `number` `type`*: `string` ) => `void` \| `boolean`	if the title is a string and href is not set, onClick will be used on a `<Button />` component
`hidden`	`boolean`	hide an action item
`order`	`number`	optional order, if not provided will use the natural order of items from right to left
`group`	`string` \| `number`	optional group. ActionItems in the same group will not be separated by horizonal margin
`aria-label`	`string`	optional label visible to screen readers for aria accessibility.
`panel`	`ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined`	panel for Tab-enabled UI, where an action item can open up a panel with tabs in this case, the onClick function can return true/false whether to open up the panel

ActionItems

array

defined in @component-controls/core/core/core/src/utility.ts

properties

Name	Type	Description
anonymous*	`ActionItem`	an item in the ActionBar component

AsyncFnReturn

type

defined in @component-controls/core/core/core/src/utility.ts

properties

Name	Type
`execute*`	function ( ) => `Promise`<`void`>
`status*`	`"idle"` \| `"pending"` \| `"success"` \| `"error"`
`value*`	`T` \| `null`
`error*`	`E` \| `null`

useAsync

function

defined in @component-controls/core/core/core/src/utility.ts

parameters

Name	Type	Default
`asyncFunction*`	function ( ) => `Promise`<`T`>
`immediate*`	`boolean`	`true`
`returns`	`AsyncFnReturn`

isLocalImport

react function

defined in @component-controls/core/core/core/src/utility.ts

parameters

Name	Type
`filePath*`	`string`
`returns`	`boolean`

FrameworkRenderFn

function

render function by framework. By default 'react'

defined in @component-controls/core/core/core/src/configuration.ts

parameters

Name	Type
`props*`	`type` `story`*: `Story` `doc`: `Document` `values`: `ExampleControls` `options`: `any`
`returns`	`any`

TabConfiguration

interface

story type pages can have multiple tabs with separate page configurations.

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Description
`option*`	[`string`]: `any`	any custom page options
`title`	`string`	title will be used as tab caption
`component*`	`FC`<`any`> `propTypes`: `WeakValidationMap`<> \| `undefined` `contextTypes`: `ValidationMap`<> \| `undefined` `defaultProps`: `Partial`<`P`> \| `undefined` `displayName`: `string` \| `undefined`	page template - can be a package default export
`container`	`ComponentType` \| `null`	page container react component
`variant`	`string`	variant key in the pagecontainer theme value
`isVisible`	function ( `props`* `config`: `RunConfiguration` `story`: `Story` `doc`*: `Document` ) => `boolean`	callback to determine if the tab is visible

PageTab

union

defined in @component-controls/core/core/core/src/configuration.ts

values

string | TabConfiguration | tuple

PageTabs

type

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type
anonymous	[`string`]: `PageTab`

loadDefaultExport

function

defined in @component-controls/core/core/core/src/configuration.ts

parameters

Name	Type	Description
`imported`	`type` \| `TabConfiguration`
`returns`	`TabConfiguration`	story type pages can have multiple tabs with separate page configurations.

loadPageTab

function

defined in @component-controls/core/core/core/src/configuration.ts

parameters

Name	Type	Description
`tab*`	`PageTab`
`imported`	`TabConfiguration`	story type pages can have multiple tabs with separate page configurations.
`returns`	`TabConfiguration`	story type pages can have multiple tabs with separate page configurations.

DocType

union

defined in @component-controls/core/core/core/src/configuration.ts

values

PageLayoutProps

interface

page layout - sidebars, full width

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Description
`navSidebar`	`boolean`	whether to add navigation sidebar to the page
`contextSidebar`	`boolean`	whether to add conext sidebar to navigate the sections of the current document
`fullPage`	`boolean`	whether to take a fullpage theme option

SideNavConfiguration

interface

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Description
`storyPaths`	`boolean`	if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories.
`collapseSingle`	`boolean`	if a single story in the document, and storyPaths is true= will only generate a single menu item for the doc itself

PageConfiguration

type

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Parent	Description
`basePath`	`string`		base url path for the page
`sideNav`	`SideNavConfiguration`		side navigation configuration
`label`	`string`		label - used for menu labels
`indexHome`	`boolean`		whether to have an index home page for the doc type. if false, will show the first document of the doc type as the home page.
`topMenu`	`boolean`		whether to add to the top navigation menu
`container`	`ComponentType` \| `null`		page container react component
`tabs`	`Record`<`string`, `TabConfiguration`>		tabs configuration for story-type pages
`navSidebar`	`boolean`	`PageLayoutProps`	whether to add navigation sidebar to the page
`contextSidebar`	`boolean`	`PageLayoutProps`	whether to add conext sidebar to navigate the sections of the current document
`fullPage`	`boolean`	`PageLayoutProps`	whether to take a fullpage theme option

PagesConfiguration

type

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type
anonymous	[`string`]: `PageConfiguration`

PagesOnlyRoutes

type

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type
anonymous	[`string`]:

SitemapConfigPage

interface

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type
`priority*`	`number`

SitemapConfig

union

defined in @component-controls/core/core/core/src/configuration.ts

values

type | boolean

BuildConfiguration

type

global configuration used at build time stored in a file named main.js/main.ts

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Parent	Description
`webpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`	webpack configuration object
`finalWebpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`
`presets`	`RuleTypes`	`BuildProps`	a list of webpack configuration presets from webpack-configs packages
`configPath`	`string`	`BuildProps`	path to the configuration file e.g : '.storybook'
`distFolder`	`string`	`BuildProps`	public output folder for the bundle
`bundleName`	`string`	`BuildProps`	public file name the bundle, by default 'component-controls.js'
`staticFolder`	`string`	`BuildProps`	public output folder for the assets like images
`cssFileName`	`string`	`BuildProps`	file name where css styles are exported to load for ssr
`logOptions`	`Partial`<`LogOptions`>	`BuildProps`	logger options
`mode`	`"none"` \| `"development"` \| `"production"`	`BuildProps`	Enable production optimizations or development hints.
`loaders`	`WebpackLoaderConfig`	`BuildProps`	loaders custom options shortcut. This can be used for quick options setup instead of using the webpack hook
`stories`	`string` \| `string`[]		wild card search string for the stories internally using `glob` for the search: https://www.npmjs.com/package/glob example: "./stories/*
`files`	`string` \| `string`[]		alternative naming for docz compatibility
`siteRoot`	`string`		the site base url, by default the site starts at /
`ignore`	`string`[]		files to ignore. by default ['readme.md', 'changelog.md', 'code_of_conduct.md', 'contributing.md', 'license.md']
`pages`	`PagesOnlyRoutes`		base url path for API documentation pages. Default is "docs/"
`categories`	`DocType`[]		page types that are considered as categories fields as well
`siteMap`	`SitemapConfig`		if false, disable automatic sitemap generation
`siteUrl`	`string`		Deployed site url. Also used for auto generated sitemap.
`instrument`	`any`		instrumentation configuration
`search`	`SearchOptions` `indexingModule`: `string` `searchingModule`*: `string` `fields`: `SearchFields`[] `emptySearchDocuments`: `string`[] `hitsPerPage`: `number` `options`: `any`		search options
`tokens`	`TokenOptions` `figmaAccessToken`: `string` `githubAccessToken`: `string`
`component`	`string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>	`StoryProps`	id for component associated with the story
`subcomponents`	`Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>	`StoryProps`	multiple components option
`controls`	`ComponentControls`	`StoryProps`	ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl
`smartControls`	`SmartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn`	`StoryProps`	"smart" controls options
`decorators`	`StoryRenderFn`[]	`StoryProps`	array of wrapper functions (decorators) to be called when rendering each individual story.
`plugins`	`any`	`StoryProps`	plugins configuration settings
`category`	`string`	`StoryProps`	category string - can be used for cleanly separating stories/components

ToolbarConfig

interface

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Description
`left`	`ActionItems`	left side toolbar items
`right`	`ActionItems`	right side toolbar items

StaticMenuItem

union

static menu items

defined in @component-controls/core/core/core/src/configuration.ts

values

string | type

StaticMenuItems

array

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Description
anonymous*	`StaticMenuItem`	static menu items

RuntimeConfiguration

type

global configuration used at build time stored in a file named main.js/main.ts

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Parent	Description
`renderFn`	`FrameworkRenderFn`		render function by framework. By default 'react'
`title`	`string`		standalone site title. Default is "Component controls"
`logo`	`string` \| `ReactNode`		logo for the site - can be a string link to an image, or a react node
`app`	`FC`<> `propTypes`: `WeakValidationMap`<> \| `undefined` `contextTypes`: `ValidationMap`<> \| `undefined` `defaultProps`: `Partial`<`P`> \| `undefined` `displayName`: `string` \| `undefined`		application wrapper, can be used to insert tags or styles. The application will be passed as children
`description`	`string`		site description. Default is "Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site."
`copyright`	`string`		copyright notice displayed in the footer
`language`	`string`		site language, Default is "en"
`author`	`string`		author: Default is "@component-controls"
`image`	`string`		link to site image
`links`	(`DetailedHTMLProps`<>)[]		meta links for seo header
`seo`	`ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined`		custom seo rendering.
`pages`	`PagesConfiguration`		page types configurations
`theme`	`type` [`string`]: `any`		theme-ui theme configuration
`storySort`	function ( `a`: `string` `b`: `string` ) => `number`		story sorting function
`toolbar`	`ToolbarConfig`		custom toolbar items
`footer`	`ToolbarConfig`		custom footer items
`sidebar`	`ActionItems`		custom sidebar items
`menu`	`StaticMenuItems`		static menu items, can be used in conjunction with the menu prop on the document provides compatibility with docz
`components`	`Record`<`string`, `unknown`>		custom props to components ex: components: { story:{ wrapper: 'iframe' } },
`analytics`	`any`		analytics options
`component`	`string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>	`StoryProps`	id for component associated with the story
`subcomponents`	`Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>	`StoryProps`	multiple components option
`controls`	`ComponentControls`	`StoryProps`	ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl
`smartControls`	`SmartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn`	`StoryProps`	"smart" controls options
`decorators`	`StoryRenderFn`[]	`StoryProps`	array of wrapper functions (decorators) to be called when rendering each individual story.
`plugins`	`any`	`StoryProps`	plugins configuration settings
`category`	`string`	`StoryProps`	category string - can be used for cleanly separating stories/components

RunConfiguration

type

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Parent	Description
`footer`	`ToolbarConfig`	`RuntimeConfiguration`	custom footer items
`menu`	`StaticMenuItems`	`RuntimeConfiguration`	static menu items, can be used in conjunction with the menu prop on the document provides compatibility with docz
`title`	`string`	`RuntimeConfiguration`	standalone site title. Default is "Component controls"
`image`	`string`	`RuntimeConfiguration`	link to site image
`controls`	`ComponentControls`	`StoryProps`	ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl
`description`	`string`	`RuntimeConfiguration`	site description. Default is "Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site."
`component`	`string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>	`StoryProps`	id for component associated with the story
`subcomponents`	`Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>	`StoryProps`	multiple components option
`smartControls`	`SmartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn`	`StoryProps`	"smart" controls options
`decorators`	`StoryRenderFn`[]	`StoryProps`	array of wrapper functions (decorators) to be called when rendering each individual story.
`plugins`	`any`	`StoryProps`	plugins configuration settings
`category`	`string`	`StoryProps`	category string - can be used for cleanly separating stories/components
`author`	`string`	`RuntimeConfiguration`	author: Default is "@component-controls"
`logo`	`string` \| `ReactNode`	`RuntimeConfiguration`	logo for the site - can be a string link to an image, or a react node
`app`	`FC`<> `propTypes`: `WeakValidationMap`<> \| `undefined` `contextTypes`: `ValidationMap`<> \| `undefined` `defaultProps`: `Partial`<`P`> \| `undefined` `displayName`: `string` \| `undefined`	`RuntimeConfiguration`	application wrapper, can be used to insert tags or styles. The application will be passed as children
`copyright`	`string`	`RuntimeConfiguration`	copyright notice displayed in the footer
`language`	`string`	`RuntimeConfiguration`	site language, Default is "en"
`links`	(`DetailedHTMLProps`<>)[]	`RuntimeConfiguration`	meta links for seo header
`seo`	`ReactChild` \| `ReactFragment` \| `ReactPortal` \| `boolean` \| `null` \| `undefined`	`RuntimeConfiguration`	custom seo rendering.
`pages`	`PagesConfiguration`	`RuntimeConfiguration`	page types configurations
`theme`	`type` [`string`]: `any`	`RuntimeConfiguration`	theme-ui theme configuration
`storySort`	function ( `a`: `string` `b`: `string` ) => `number`	`RuntimeConfiguration`	story sorting function
`toolbar`	`ToolbarConfig`	`RuntimeConfiguration`	custom toolbar items
`sidebar`	`ActionItems`	`RuntimeConfiguration`	custom sidebar items
`components`	`Record`<`string`, `unknown`>	`RuntimeConfiguration`	custom props to components ex: components: { story:{ wrapper: 'iframe' } },
`analytics`	`any`	`RuntimeConfiguration`	analytics options
`renderFn`	`FrameworkRenderFn`	`RuntimeConfiguration`	framework-specific render function. By default react render
`webpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`	webpack configuration object
`finalWebpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`
`presets`	`RuleTypes`	`BuildProps`	a list of webpack configuration presets from webpack-configs packages
`configPath`	`string`	`BuildProps`	path to the configuration file e.g : '.storybook'
`distFolder`	`string`	`BuildProps`	public output folder for the bundle
`bundleName`	`string`	`BuildProps`	public file name the bundle, by default 'component-controls.js'
`staticFolder`	`string`	`BuildProps`	public output folder for the assets like images
`cssFileName`	`string`	`BuildProps`	file name where css styles are exported to load for ssr
`logOptions`	`Partial`<`LogOptions`>	`BuildProps`	logger options
`mode`	`"none"` \| `"development"` \| `"production"`	`BuildProps`	Enable production optimizations or development hints.
`loaders`	`WebpackLoaderConfig`	`BuildProps`	loaders custom options shortcut. This can be used for quick options setup instead of using the webpack hook
`stories`	`string` \| `string`[]	`BuildConfiguration`	wild card search string for the stories internally using `glob` for the search: https://www.npmjs.com/package/glob example: "./stories/*
`files`	`string` \| `string`[]	`BuildConfiguration`	alternative naming for docz compatibility
`siteRoot`	`string`	`BuildConfiguration`	the site base url, by default the site starts at /
`ignore`	`string`[]	`BuildConfiguration`	files to ignore. by default ['readme.md', 'changelog.md', 'code_of_conduct.md', 'contributing.md', 'license.md']
`categories`	`DocType`[]	`BuildConfiguration`	page types that are considered as categories fields as well
`siteMap`	`SitemapConfig`	`BuildConfiguration`	if false, disable automatic sitemap generation
`siteUrl`	`string`	`BuildConfiguration`	Deployed site url. Also used for auto generated sitemap.
`instrument`	`any`	`BuildConfiguration`	instrumentation configuration
`search`	`SearchOptions` `indexingModule`: `string` `searchingModule`*: `string` `fields`: `SearchFields`[] `emptySearchDocuments`: `string`[] `hitsPerPage`: `number` `options`: `any`	`BuildConfiguration`	search options
`tokens`	`TokenOptions` `figmaAccessToken`: `string` `githubAccessToken`: `string`	`BuildConfiguration`

defaultBuildConfig

type

defined in @component-controls/core/core/core/src/configuration.ts

properties

Name	Type	Parent	Default	Description
`webpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`		webpack configuration object
`finalWebpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`
`presets`	`RuleTypes`	`BuildProps`		a list of webpack configuration presets from webpack-configs packages
`configPath`	`string`	`BuildProps`		path to the configuration file e.g : '.storybook'
`distFolder`	`string`	`BuildProps`		public output folder for the bundle
`bundleName`	`string`	`BuildProps`		public file name the bundle, by default 'component-controls.js'
`staticFolder`	`string`	`BuildProps`		public output folder for the assets like images
`cssFileName`	`string`	`BuildProps`		file name where css styles are exported to load for ssr
`logOptions`	`Partial`<`LogOptions`>	`BuildProps`		logger options
`mode`	`"none"` \| `"development"` \| `"production"`	`BuildProps`		Enable production optimizations or development hints.
`loaders`	`WebpackLoaderConfig`	`BuildProps`		loaders custom options shortcut. This can be used for quick options setup instead of using the webpack hook
`stories`	`string` \| `string`[]	`BuildConfiguration`		wild card search string for the stories internally using `glob` for the search: https://www.npmjs.com/package/glob example: "./stories/*
`files`	`string` \| `string`[]	`BuildConfiguration`		alternative naming for docz compatibility
`siteRoot`	`string`	`BuildConfiguration`	`"/"`	the site base url, by default the site starts at /
`ignore`	`string`[]	`BuildConfiguration`		files to ignore. by default ['readme.md', 'changelog.md', 'code_of_conduct.md', 'contributing.md', 'license.md']
`pages`	`PagesOnlyRoutes`	`BuildConfiguration`		base url path for API documentation pages. Default is "docs/"
`categories`	`DocType`[]	`BuildConfiguration`		page types that are considered as categories fields as well
`siteMap`	`SitemapConfig`	`BuildConfiguration`		if false, disable automatic sitemap generation
`siteUrl`	`string`	`BuildConfiguration`		Deployed site url. Also used for auto generated sitemap.
`instrument`	`any`	`BuildConfiguration`		instrumentation configuration
`search`	`SearchOptions` `indexingModule`: `string` `searchingModule`*: `string` `fields`: `SearchFields`[] `emptySearchDocuments`: `string`[] `hitsPerPage`: `number` `options`: `any`	`BuildConfiguration`		search options
`tokens`	`TokenOptions` `figmaAccessToken`: `string` `githubAccessToken`: `string`	`BuildConfiguration`
`component`	`string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>	`StoryProps`		id for component associated with the story
`subcomponents`	`Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>	`StoryProps`		multiple components option
`controls`	`ComponentControls`	`StoryProps`		ComponentControls are defined in key value pairs the name of the property is the key and the value is the ComponentControl
`smartControls`	`SmartControls` `smart`: `boolean` `include`: `string`[] \| `IncludeFn` `exclude`: `string`[] \| `IncludeFn`	`StoryProps`		"smart" controls options
`decorators`	`StoryRenderFn`[]	`StoryProps`		array of wrapper functions (decorators) to be called when rendering each individual story.
`plugins`	`any`	`StoryProps`		plugins configuration settings
`category`	`string`	`StoryProps`		category string - can be used for cleanly separating stories/components

defaultRunConfig

defined in @component-controls/core/core/core/src/configuration.ts

convertConfig

function

defined in @component-controls/core/core/core/src/configuration.ts

parameters

Name	Type
`config*`	`RunConfiguration`
`returns`	`RunConfiguration`

RuleOptions

interface

defined in @component-controls/core/core/core/src/build.ts

properties

Name Type

name* string

config*

Configuration

amd: false | type
bail: boolean
cache: boolean | MemoryCacheOptions | FileCacheOptions
context: string
dependencies: string[]
devtool: string | false
entry: string | function | EntryObject | string[]
experiments
asyncWebAssembly: boolean
backCompat: boolean
cacheUnaffected: boolean
css: boolean
futureDefaults: boolean
layers: boolean
outputModule: boolean
syncWebAssembly: boolean
topLevelAwait: boolean
buildHttp: HttpUriOptions | ((string, RegExp, function))[]
lazyCompilation: boolean | LazyCompilationOptions
externals: string | RegExp | ExternalItem[] | ExternalItemObjectUnknown | function | function
externalsPresets
electron: boolean
electronMain: boolean
electronPreload: boolean
electronRenderer: boolean
node: boolean
nwjs: boolean
web: boolean
webAsync: boolean
externalsType: "var" | "module" | "assign" | "this" | "window" | "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd" | "amd-require" | "umd" | "umd2" | "jsonp" | "system" | "promise" | "import" | "script" | "node-commonjs"
ignoreWarnings: ((RegExp, type, function))[]
infrastructureLogging
appendOnly: boolean
colors: boolean
console: Console
debug: string | boolean | RegExp | FilterItemTypes[] | function
level: "none" | "error" | "warn" | "info" | "log" | "verbose"
stream: NodeJS.WritableStream
loader
[string]: any
mode: "none" | "development" | "production"
module
defaultRules: ((RuleSetRule, string))[]
exprContextCritical: boolean
exprContextRecursive: boolean
exprContextRegExp: boolean | RegExp
exprContextRequest: string
generator
asset*:
asset/inline*:
asset/resource*:
javascript*:
javascript/auto*:
javascript/dynamic*:
javascript/esm*:
noParse: string | Function | RegExp | ((string, Function, RegExp))[]
parser
asset*:
asset/inline*:
asset/resource*:
asset/source*:
javascript*:
javascript/auto*:
javascript/dynamic*:
javascript/esm*:
rules: ((RuleSetRule, string))[]
strictExportPresence: boolean
strictThisContextOnImports: boolean
unknownContextCritical: boolean
unknownContextRecursive: boolean
unknownContextRegExp: boolean | RegExp
unknownContextRequest: string
unsafeCache: boolean | Function
wrappedContextCritical: boolean
wrappedContextRecursive: boolean
wrappedContextRegExp: RegExp
name: string
node: false | NodeOptions
optimization
checkWasmTypes: boolean
chunkIds: false | "natural" | "named" | "deterministic" | "size" | "total-size"
concatenateModules: boolean
emitOnErrors: boolean
flagIncludedChunks: boolean
innerGraph: boolean
mangleExports: boolean | "deterministic" | "size"
mangleWasmImports: boolean
mergeDuplicateChunks: boolean
minimize: boolean
minimizer: ((function, WebpackPluginInstance, string))[]
moduleIds: false | "natural" | "named" | "deterministic" | "size" | "hashed"
noEmitOnErrors: boolean
nodeEnv: string | false
portableRecords: boolean
providedExports: boolean
realContentHash: boolean
removeAvailableModules: boolean
removeEmptyChunks: boolean
runtimeChunk: boolean | "single" | "multiple" | type
sideEffects: boolean | "flag"
splitChunks: false | OptimizationSplitChunksOptions
usedExports: boolean | "global"
output
assetModuleFilename: string | function
asyncChunks: boolean
auxiliaryComment: string | LibraryCustomUmdCommentObject
charset: boolean
chunkFilename: string | function
chunkFormat: string | false
chunkLoadTimeout: number
chunkLoading: string | false
chunkLoadingGlobal: string
clean: boolean | CleanOptions
compareBeforeEmit: boolean
crossOriginLoading: false | "anonymous" | "use-credentials"
cssChunkFilename: string | function
cssFilename: string | function
devtoolFallbackModuleFilenameTemplate: string | Function
devtoolModuleFilenameTemplate: string | Function
devtoolNamespace: string
enabledChunkLoadingTypes: string[]
enabledLibraryTypes: string[]
enabledWasmLoadingTypes: string[]
environment: Environment
filename: string | function
globalObject: string
hashDigest: string
hashDigestLength: number
hashFunction: string |
hashSalt: string
hotUpdateChunkFilename: string
hotUpdateGlobal: string
hotUpdateMainFilename: string
iife: boolean
importFunctionName: string
importMetaName: string
library: string | string[] | LibraryOptions | LibraryCustomUmdObject
libraryExport: string | string[]
libraryTarget: string
module: boolean
path: string
pathinfo: boolean | "verbose"
publicPath: string | function
scriptType: false | "module" | "text/javascript"
sourceMapFilename: string
sourcePrefix: string
strictModuleErrorHandling: boolean
strictModuleExceptionHandling: boolean
trustedTypes: string | true | TrustedTypes
umdNamedDefine: boolean
uniqueName: string
wasmLoading: string | false
webassemblyModuleFilename: string
workerChunkLoading: string | false
workerWasmLoading: string | false
parallelism: number
performance: false | PerformanceOptions
plugins: ((function, WebpackPluginInstance))[]
profile: boolean
recordsInputPath: string | false
recordsOutputPath: string | false
recordsPath: string | false
resolve
alias: type[] | type
aliasFields: ((string, string[]))[]
byDependency
[string]: ResolveOptionsWebpackOptions
cache: boolean
cachePredicate: function (
request*:
) => boolean
cacheWithContext: boolean
conditionNames: string[]
descriptionFiles: string[]
enforceExtension: boolean
exportsFields: string[]
extensions: string[]
fallback: type[] | type
fileSystem: InputFileSystem
fullySpecified: boolean
importsFields: string[]
mainFields: ((string, string[]))[]
mainFiles: string[]
modules: string[]
plugins: ((ResolvePluginInstance, string))[]
preferAbsolute: boolean
preferRelative: boolean
resolver: Resolver
restrictions: ((string, RegExp))[]
roots: string[]
symlinks: boolean
unsafeCache: boolean | type
useSyncFileSystemCalls: boolean
resolveLoader
alias: type[] | type
aliasFields: ((string, string[]))[]
byDependency
[string]: ResolveOptionsWebpackOptions
cache: boolean
cachePredicate: function (
request*:
) => boolean
cacheWithContext: boolean
conditionNames: string[]
descriptionFiles: string[]
enforceExtension: boolean
exportsFields: string[]
extensions: string[]
fallback: type[] | type
fileSystem: InputFileSystem
fullySpecified: boolean
importsFields: string[]
mainFields: ((string, string[]))[]
mainFiles: string[]
modules: string[]
plugins: ((ResolvePluginInstance, string))[]
preferAbsolute: boolean
preferRelative: boolean
resolver: Resolver
restrictions: ((string, RegExp))[]
roots: string[]
symlinks: boolean
unsafeCache: boolean | type
useSyncFileSystemCalls: boolean
snapshot

buildDependencies
hash*:
timestamp*:
immutablePaths: ((string, RegExp))[]
managedPaths: ((string, RegExp))[]
module
hash*:
timestamp*:
resolve
hash*:
timestamp*:
resolveBuildDependencies
hash*:
timestamp*:

stats: boolean | StatsOptions | "none" | "verbose" | "summary" | "errors-only" | "errors-warnings" | "minimal" | "normal" | "detailed"
target: string | false | string[]
watch: boolean
watchOptions: WatchOptions

RuleType

union

defined in @component-controls/core/core/core/src/build.ts

values

string | RuleOptions

RuleTypes

array

defined in @component-controls/core/core/core/src/build.ts

properties

Name	Type
anonymous*	`RuleType`

PresetCallback

function

defined in @component-controls/core/core/core/src/build.ts

parameters

Name	Type	Description
`options*`	`BuildProps`
`returns`	`Configuration` `amd`: `false` \| `type` `bail`: `boolean` `cache`: `boolean` \| `MemoryCacheOptions` \| `FileCacheOptions` `context`: `string` `dependencies`: `string`[] `devtool`: `string` \| `false` `entry`: `string` \| `function` \| `EntryObject` \| `string`[] `experiments` `asyncWebAssembly`: `boolean` `backCompat`: `boolean` `cacheUnaffected`: `boolean` `css`: `boolean` `futureDefaults`: `boolean` `layers`: `boolean` `outputModule`: `boolean` `syncWebAssembly`: `boolean` `topLevelAwait`: `boolean` `buildHttp`: `HttpUriOptions` \| ((`string`, `RegExp`, `function`))[] `lazyCompilation`: `boolean` \| `LazyCompilationOptions` `externals`: `string` \| `RegExp` \| `ExternalItem`[] \| `ExternalItemObjectUnknown` \| `function` \| `function` `externalsPresets` `electron`: `boolean` `electronMain`: `boolean` `electronPreload`: `boolean` `electronRenderer`: `boolean` `node`: `boolean` `nwjs`: `boolean` `web`: `boolean` `webAsync`: `boolean` `externalsType`: `"var"` \| `"module"` \| `"assign"` \| `"this"` \| `"window"` \| `"self"` \| `"global"` \| `"commonjs"` \| `"commonjs2"` \| `"commonjs-module"` \| `"commonjs-static"` \| `"amd"` \| `"amd-require"` \| `"umd"` \| `"umd2"` \| `"jsonp"` \| `"system"` \| `"promise"` \| `"import"` \| `"script"` \| `"node-commonjs"` `ignoreWarnings`: ((`RegExp`, `type`, `function`))[] `infrastructureLogging` `appendOnly`: `boolean` `colors`: `boolean` `console`: Console `debug`: `string` \| `boolean` \| `RegExp` \| `FilterItemTypes`[] \| `function` `level`: `"none"` \| `"error"` \| `"warn"` \| `"info"` \| `"log"` \| `"verbose"` `stream`: NodeJS.WritableStream `loader` [`string`]: `any` `mode`: `"none"` \| `"development"` \| `"production"` `module` `defaultRules`: ((`RuleSetRule`, `string`))[] `exprContextCritical`: `boolean` `exprContextRecursive`: `boolean` `exprContextRegExp`: `boolean` \| `RegExp` `exprContextRequest`: `string` `generator`: GeneratorOptionsByModuleType `noParse`: `string` \| `Function` \| `RegExp` \| ((`string`, `Function`, `RegExp`))[] `parser`: ParserOptionsByModuleType `rules`: ((`RuleSetRule`, `string`))[] `strictExportPresence`: `boolean` `strictThisContextOnImports`: `boolean` `unknownContextCritical`: `boolean` `unknownContextRecursive`: `boolean` `unknownContextRegExp`: `boolean` \| `RegExp` `unknownContextRequest`: `string` `unsafeCache`: `boolean` \| `Function` `wrappedContextCritical`: `boolean` `wrappedContextRecursive`: `boolean` `wrappedContextRegExp`: `RegExp` `name`: `string` `node`: `false` \| `NodeOptions` `optimization` `checkWasmTypes`: `boolean` `chunkIds`: `false` \| `"natural"` \| `"named"` \| `"deterministic"` \| `"size"` \| `"total-size"` `concatenateModules`: `boolean` `emitOnErrors`: `boolean` `flagIncludedChunks`: `boolean` `innerGraph`: `boolean` `mangleExports`: `boolean` \| `"deterministic"` \| `"size"` `mangleWasmImports`: `boolean` `mergeDuplicateChunks`: `boolean` `minimize`: `boolean` `minimizer`: ((`function`, `WebpackPluginInstance`, `string`))[] `moduleIds`: `false` \| `"natural"` \| `"named"` \| `"deterministic"` \| `"size"` \| `"hashed"` `noEmitOnErrors`: `boolean` `nodeEnv`: `string` \| `false` `portableRecords`: `boolean` `providedExports`: `boolean` `realContentHash`: `boolean` `removeAvailableModules`: `boolean` `removeEmptyChunks`: `boolean` `runtimeChunk`: `boolean` \| `"single"` \| `"multiple"` \| `type` `sideEffects`: `boolean` \| `"flag"` `splitChunks`: `false` \| `OptimizationSplitChunksOptions` `usedExports`: `boolean` \| `"global"` `output` `assetModuleFilename`: `string` \| `function` `asyncChunks`: `boolean` `auxiliaryComment`: `string` \| `LibraryCustomUmdCommentObject` `charset`: `boolean` `chunkFilename`: `string` \| `function` `chunkFormat`: `string` \| `false` `chunkLoadTimeout`: `number` `chunkLoading`: `string` \| `false` `chunkLoadingGlobal`: `string` `clean`: `boolean` \| `CleanOptions` `compareBeforeEmit`: `boolean` `crossOriginLoading`: `false` \| `"anonymous"` \| `"use-credentials"` `cssChunkFilename`: `string` \| `function` `cssFilename`: `string` \| `function` `devtoolFallbackModuleFilenameTemplate`: `string` \| `Function` `devtoolModuleFilenameTemplate`: `string` \| `Function` `devtoolNamespace`: `string` `enabledChunkLoadingTypes`: `string`[] `enabledLibraryTypes`: `string`[] `enabledWasmLoadingTypes`: `string`[] `environment`: Environment `filename`: `string` \| `function` `globalObject`: `string` `hashDigest`: `string` `hashDigestLength`: `number` `hashFunction`: `string` \| `hashSalt`: `string` `hotUpdateChunkFilename`: `string` `hotUpdateGlobal`: `string` `hotUpdateMainFilename`: `string` `iife`: `boolean` `importFunctionName`: `string` `importMetaName`: `string` `library`: `string` \| `string`[] \| `LibraryOptions` \| `LibraryCustomUmdObject` `libraryExport`: `string` \| `string`[] `libraryTarget`: `string` `module`: `boolean` `path`: `string` `pathinfo`: `boolean` \| `"verbose"` `publicPath`: `string` \| `function` `scriptType`: `false` \| `"module"` \| `"text/javascript"` `sourceMapFilename`: `string` `sourcePrefix`: `string` `strictModuleErrorHandling`: `boolean` `strictModuleExceptionHandling`: `boolean` `trustedTypes`: `string` \| `true` \| `TrustedTypes` `umdNamedDefine`: `boolean` `uniqueName`: `string` `wasmLoading`: `string` \| `false` `webassemblyModuleFilename`: `string` `workerChunkLoading`: `string` \| `false` `workerWasmLoading`: `string` \| `false` `parallelism`: `number` `performance`: `false` \| `PerformanceOptions` `plugins`: ((`function`, `WebpackPluginInstance`))[] `profile`: `boolean` `recordsInputPath`: `string` \| `false` `recordsOutputPath`: `string` \| `false` `recordsPath`: `string` \| `false` `resolve` `alias`: `type`[] \| `type` `aliasFields`: ((`string`, `string`[]))[] `byDependency` [`string`]: ResolveOptionsWebpackOptions `cache`: `boolean` `cachePredicate`: function ( `request`: ) => `boolean` `cacheWithContext`: `boolean` `conditionNames`: `string`[] `descriptionFiles`: `string`[] `enforceExtension`: `boolean` `exportsFields`: `string`[] `extensions`: `string`[] `fallback`: `type`[] \| `type` `fileSystem`: InputFileSystem `fullySpecified`: `boolean` `importsFields`: `string`[] `mainFields`: ((`string`, `string`[]))[] `mainFiles`: `string`[] `modules`: `string`[] `plugins`: ((`ResolvePluginInstance`, `string`))[] `preferAbsolute`: `boolean` `preferRelative`: `boolean` `resolver`: Resolver `restrictions`: ((`string`, `RegExp`))[] `roots`: `string`[] `symlinks`: `boolean` `unsafeCache`: `boolean` \| `type` `useSyncFileSystemCalls`: `boolean` `resolveLoader` `alias`: `type`[] \| `type` `aliasFields`: ((`string`, `string`[]))[] `byDependency` [`string`]: ResolveOptionsWebpackOptions `cache`: `boolean` `cachePredicate`: function* ( `request`: ) => `boolean` `cacheWithContext`: `boolean` `conditionNames`: `string`[] `descriptionFiles`: `string`[] `enforceExtension`: `boolean` `exportsFields`: `string`[] `extensions`: `string`[] `fallback`: `type`[] \| `type` `fileSystem`: InputFileSystem `fullySpecified`: `boolean` `importsFields`: `string`[] `mainFields`: ((`string`, `string`[]))[] `mainFiles`: `string`[] `modules`: `string`[] `plugins`: ((`ResolvePluginInstance`, `string`))[] `preferAbsolute`: `boolean` `preferRelative`: `boolean` `resolver`: Resolver `restrictions`: ((`string`, `RegExp`))[] `roots`: `string`[] `symlinks`: `boolean` `unsafeCache`: `boolean` \| `type` `useSyncFileSystemCalls`: `boolean` `snapshot` `buildDependencies` `hash`: `timestamp`: `immutablePaths`: ((`string`, `RegExp`))[] `managedPaths`: ((`string`, `RegExp`))[] `module` `hash`: `timestamp`: `resolve` `hash`: `timestamp`: `resolveBuildDependencies` `hash`: `timestamp`*: `stats`: `boolean` \| `StatsOptions` \| `"none"` \| `"verbose"` \| `"summary"` \| `"errors-only"` \| `"errors-warnings"` \| `"minimal"` \| `"normal"` \| `"detailed"` `target`: `string` \| `false` \| `string`[] `watch`: `boolean` `watchOptions`: `WatchOptions`	Options object as provided by the user.

PresetType

union

defined in @component-controls/core/core/core/src/build.ts

values

Configuration | PresetCallback

WebpackLoader

union

defined in @component-controls/core/core/core/src/build.ts

values

WebpackLoaderConfig

type

defined in @component-controls/core/core/core/src/build.ts

properties

Name	Type	Parent	Description
`at*`	function ( `index`*: `number` ) => `T` \| `undefined`	`RelativeIndexable`	Takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.
`module`	`string`

BuildProps

interface

configuration properties for compile and run

defined in @component-controls/core/core/core/src/build.ts

properties

Name	Type	Description
`webpack`	`Configuration` \| `WebpackConfigFn`	webpack configuration object
`finalWebpack`	`Configuration` \| `WebpackConfigFn`
`presets`	`RuleTypes`	a list of webpack configuration presets from webpack-configs packages
`configPath`	`string`	path to the configuration file e.g : '.storybook'
`distFolder`	`string`	public output folder for the bundle
`bundleName`	`string`	public file name the bundle, by default 'component-controls.js'
`staticFolder`	`string`	public output folder for the assets like images
`cssFileName`	`string`	file name where css styles are exported to load for ssr
`logOptions`	`Partial`<`LogOptions`>	logger options
`mode`	`"none"` \| `"development"` \| `"production"`	Enable production optimizations or development hints.
`loaders`	`WebpackLoaderConfig`	loaders custom options shortcut. This can be used for quick options setup instead of using the webpack hook

customLoaderOptions

function

defined in @component-controls/core/core/core/src/build.ts

parameters

Name	Type
`config*`	`BuildProps`
`loader*`	`WebpackLoader`
`defaultOptions`	`string` \| `type`
`returns`	`WebpackLoaderConfig`

defaultCompileProps

interface

defined in @component-controls/core/core/core/src/build.ts

properties

Name	Type	Parent	Description
`webpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`	webpack configuration object
`finalWebpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`
`presets`	`RuleTypes`	`BuildProps`	a list of webpack configuration presets from webpack-configs packages
`configPath`	`string`	`BuildProps`	path to the configuration file e.g : '.storybook'
`distFolder`	`string`	`BuildProps`	public output folder for the bundle
`bundleName`	`string`	`BuildProps`	public file name the bundle, by default 'component-controls.js'
`staticFolder`	`string`	`BuildProps`	public output folder for the assets like images
`cssFileName`	`string`	`BuildProps`	file name where css styles are exported to load for ssr
`logOptions`	`Partial`<`LogOptions`>	`BuildProps`	logger options
`mode`	`"none"` \| `"development"` \| `"production"`	`BuildProps`	Enable production optimizations or development hints.
`loaders`	`WebpackLoaderConfig`	`BuildProps`	loaders custom options shortcut. This can be used for quick options setup instead of using the webpack hook

WatchOptions

interface

defined in @component-controls/core/core/core/src/build.ts

properties

Name	Type	Description
`aggregateTimeout`	`number`	Delay the rebuilt after the first change. Value is a time in ms.
`followSymlinks`	`boolean`	Resolve symlinks and watch symlink and real file. This is usually not needed as webpack already resolves symlinks ('resolve.symlinks').
`ignored`	`string` \| `RegExp` \| `string`[]	Ignore some files from watching (glob pattern or regexp).
`poll`	`number` \| `boolean`	Enable polling mode for watching.
`stdin`	`boolean`	Stop watching when stdin stream has ended.

WatchProps

type

adds webpack WatchOptions to the Compiler options

defined in @component-controls/core/core/core/src/build.ts

properties

Name	Type	Parent	Description
`watchOptions`	`WatchOptions`
`webpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`	webpack configuration object
`finalWebpack`	`Configuration` \| `WebpackConfigFn`	`BuildProps`
`presets`	`RuleTypes`	`BuildProps`	a list of webpack configuration presets from webpack-configs packages
`configPath`	`string`	`BuildProps`	path to the configuration file e.g : '.storybook'
`distFolder`	`string`	`BuildProps`	public output folder for the bundle
`bundleName`	`string`	`BuildProps`	public file name the bundle, by default 'component-controls.js'
`staticFolder`	`string`	`BuildProps`	public output folder for the assets like images
`cssFileName`	`string`	`BuildProps`	file name where css styles are exported to load for ssr
`logOptions`	`Partial`<`LogOptions`>	`BuildProps`	logger options
`mode`	`"none"` \| `"development"` \| `"production"`	`BuildProps`	Enable production optimizations or development hints.
`loaders`	`WebpackLoaderConfig`	`BuildProps`	loaders custom options shortcut. This can be used for quick options setup instead of using the webpack hook

defBundleName

string = "component-controls.js"

defined in @component-controls/core/core/core/src/build.ts

defCssFileName

string = "component-controls.css"

defined in @component-controls/core/core/core/src/build.ts

@component-controls/core

Table of contents

Overview

Installation

API

SourceIdentifier

ArgUsageLocation

StoryArgument

StoryArguments

Story

DynamicExamples

ExampleControl

ExampleControls

Example

DocumentData

StoryFactoryFn

defDocType

Document

dateToLocalString

DocInfo

Documents

Pages

Stories

Packages

StoreObserver

CURRENT_STORY

Store

getDefaultStore

assignProps

ComponentControlData

ComponentControlBase

ComponentControlText

ComponentControlBoolean

ColorPickerKind

ComponentControlColor

ComponentControlDate

ComponentControlFiles

ComponentControlArray

ComponentControlObject

ComponentControlButton

OptionsValueType

OptionsListType

ComponentControlOptions

ComponentControlNumber

ComponentControl

ComponentControls

ControlTypes

TypeValue

TypeInformation

PropType

PropTypes

ComponentInfo

JSXNode

JSXTree

Component

Components

getComponentName

PropsInfoExtractorFunction

ImportType

ImportTypes

CodePosition

CodeLocation

PackageRepository

PackageDependency

PackageDependencies

PackageInfo

StoryRenderFn

Imports

defaultExport

ActionItem

ActionItems

AsyncFnReturn

useAsync

isLocalImport

FrameworkRenderFn

TabConfiguration

PageTab

PageTabs

loadDefaultExport

loadPageTab

Weekly Downloads