@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
  • DocType
  • PageLayoutProps
  • SideNavConfiguration
  • PageConfiguration
  • PagesConfiguration
  • PagesOnlyRoutes
  • SitemapConfigPage
  • SitemapConfig
  • BuildConfiguration
  • ToolbarConfig
  • StaticMenuItem
  • StaticMenuItems
  • RuntimeConfiguration
  • RunConfiguration
  • defaultBuildConfig
  • defaultRunConfig
  • convertConfig
  • RuleOptions
  • RuleType
  • RuleTypes
  • PresetCallback
  • PresetType
  • WebpackLoader
  • WebpackLoaderConfig
  • BuildProps
  • customLoaderOptions
  • defaultCompileProps
  • WatchOptions
  • WatchProps
  • defBundleName
  • defCssFileName

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

"story" | "blog" | "page" | "tags" | "author" | string

Document

type

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

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

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

ComponentControlText | ComponentControlBoolean | ComponentControlColor | ComponentControlDate | ComponentControlObject<> | ComponentControlButton<> | ComponentControlOptions<> | ComponentControlNumber | ComponentControlArray | ComponentControlFiles

ComponentControls

interface

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

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

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

"any" | "boolean" | "number" | "string" | "array" | "object" | "enum" | "union" | "literal" | "symbol" | "function" | string

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

"story" | "blog" | "page" | "tags" | "author" | string

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

"mini-css-extract-plugin" | "babel-loader" | "css-minimizer-webpack-plugin" | "css-loader" | "postcss-loader" | "sass-loader" | "less-loader" | "stylus-loader" | "url-loader" | "raw-loader" | "file-loader"

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