@component-controls/blocks

Table of contents

• Overview
• List of components
  • ComponentsBlockContainer
  • StoryBlockContainer
  • ComponentSource
  • ControlsTable
  • SingleControlsTable
  • Description
  • PageContainer
  • Playground
  • PropsTable
  • Stories
  • Story
  • StorySource
  • getArgumentsLocations
  • Subtitle
  • Title
  • InvalidType
  • MDXContent
  • getStoryBlockTitle

Overview

Some of the guiding design goals for this library:

• Most components should have a 'plain' and a 'block' version, where the block version adds a collapsible Box with a title.
• There are two main categories of components:
  • that display story data (i.e. story source, story render)
  • that display component(s) data (i.e. prop tables, component sources)
• Components accept a list of custom ActionItems to be extended.
• Compnents that deal with source code (story or component source) display actions to browse their respective repositories.

List of components

ComponentsBlockContainer

ComponentsBlockContainer source code

properties

Name	Type	Description
onSelect	(name: string, component: StoryComponent) => boolean | void	callback to be called when the tab changes if the function returns false, it can stop chabging to the new tab
of	any	Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab.
title	string	optional section title for the block.
id	string	optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible	boolean	if false, will nothave a collapsible frame.
sxStyle	SystemStyleObject	theme-ui styling object for Block Box

StoryBlockContainer

StoryBlockContainer source code

properties

Name	Type	Description
id	string	id of the story
name	string	alternatively you can use the name of a story to load from an external file
title	string	optional section title for the block.
collapsible	boolean	if false, will nothave a collapsible frame.
sxStyle	SystemStyleObject	theme-ui styling object for Block Box

ComponentSource

Displays import statement for a component as well as the component file source code Optionally also displays some repository information from the component's package.json

ComponentSource source code

properties

Name	Type	Description
onSelect	(name: string, component: StoryComponent) => boolean | void	callback to be called when the tab changes if the function returns false, it can stop chabging to the new tab
of	any	Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab.
title	string	optional section title for the block.
id	string	optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible	boolean	if false, will nothave a collapsible frame.
sxStyle	SystemStyleObject	theme-ui styling object for Block Box
actions	ActionItem[]	optional actions provided to the component
paddingTop	string | number	padding at the top, to account for the absolute position of the ActionBar
plain	boolean	if plain, skip the border and spacing around the children
theme	PrismTheme	optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`.
language	Language	source lnguage used, by default "jsx".
renderFn	(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode	custom function to render the source code.
dark	boolean	used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used.
style	any	css styles for the container.
as	any	syntax container as element. Can be used as `div` or `span`.

ControlsTable

Table component to display a story's controls and their editors. Can adapt to multiple groups of controls, displaying them in their own tabs.

ControlsTable source code

properties

Name	Type	Description
id	string	id of the story
name	string	alternatively you can use the name of a story to load from an external file
title	string	optional section title for the block.
collapsible	boolean	if false, will nothave a collapsible frame.
sxStyle	SystemStyleObject	theme-ui styling object for Block Box

SingleControlsTable

Single table of controls, without specific handliong of groups. The controls and storyId are already set in priops;

SingleControlsTable source code

properties

Name	Type	Description
data	any[]	component controls to display in the table.
storyId	string	storyId, will be used to update the values of the controls
setControlValue	SetControlValueFn	generic function to update the values of component controls.
clickControl	ClickControlFn	generic function to propagate a click event for component controls.

Description

Description component with markdown. The 'of' property can specify which component's description to display.

Description source code

properties

Name	Type	Description
components	{ [key: string]: ComponentOverride<any, any>; a?: ComponentOverride<any, any>; br?: ComponentOverride<any, any>; button?: ComponentOverride<any, any>; ... 27 more ...; ul?: ComponentOverride<...>; }	components to customize the markdown display.
of	any	Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab.

PageContainer

If the page is an MDX page, will display the MDX components. Otherwise, the page elements are passed as children

PageContainer source code

properties

Name	Type	Description
storyId	string	story to display in the page
dark	boolean	dark/light theme for the page
options	any	global options passed from container those are global parameters as well as decorators
components	MDXProviderComponents	components to customize the markdown display.
theme	Theme	optional custom theme
store	StoryStore	store object

Playground

Playground source code

properties

Name	Type	Description
scale	number	default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled.
openTab	any	by default, which tab to have open.
dark	boolean	whether to use the dark theme for the story source component.
id	string	id of the story
name	string	alternatively you can use the name of a story to load from an external file
title	string	optional section title for the block.
collapsible	boolean	if false, will nothave a collapsible frame.
sxStyle	SystemStyleObject	theme-ui styling object for Block Box
actions	ActionItem[]	optional actions provided to the component
paddingTop	string | number	padding at the top, to account for the absolute position of the ActionBar
plain	boolean	if plain, skip the border and spacing around the children

PropsTable

PropsTable source code

properties

Name	Type	Description
extraColumns	Column<{}>[]	extra custom columns passed to the PropsTable.
onSelect	((name: string, component: StoryComponent) => boolean | void) & ((event: SyntheticEvent<HTMLDivElement, Event>) => void)	callback to be called when the tab changes if the function returns false, it can stop chabging to the new tab
of	any	Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab.
title	string	optional section title for the block.
id	string	optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible	boolean	if false, will nothave a collapsible frame.
sxStyle	SystemStyleObject	theme-ui styling object for Block Box
header	boolean	show or hide the header element.
sorting	boolean	enable.disable sorting.
filtering	boolean	enable/disable filtering.
itemsLabel	string	string label for 'items' - used in the filter placeholder and grouping header.
groupBy	string[]	field to be grouped by.
hiddenColumns	string[]	list of columns to hide.
expanded	{ [key: string]: boolean; }	object listing the initially expanded rows.
skipPageReset	boolean	reset state update while update table data

Stories

displays multiple stories in ther own Playground components

Stories source code

properties

Name	Type	Description
dark	boolean	whether to display the dark theme storysource code component whether to use the dark theme for the story source component.
scale	number	default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled.
openTab	any	by default, which tab to have open.
id	string	id of the story
name	string	alternatively you can use the name of a story to load from an external file
title	string	optional section title for the block.
collapsible	boolean	if false, will nothave a collapsible frame.
sxStyle	SystemStyleObject	theme-ui styling object for Block Box
actions	ActionItem[]	optional actions provided to the component
paddingTop	string | number	padding at the top, to account for the absolute position of the ActionBar
plain	boolean	if plain, skip the border and spacing around the children

Story

Story source code

properties

Name	Type	Description
id	string	id of the story
name	string	alternatively you can use the name of a story to load from an external file
title	string	optional section title for the block.
collapsible	boolean	if false, will nothave a collapsible frame.
sxStyle	SystemStyleObject	theme-ui styling object for Block Box

StorySource

Display source code of a story. If controls are used, all story arguments will be highlighted. Additional commands are made available if the repository data of the story is available.

StorySource source code

properties

Name	Type	Description
viewStype	ViewStyle	initial view mode
id	string	id of the story
name	string	alternatively you can use the name of a story to load from an external file
title	string	optional section title for the block.
collapsible	boolean	if false, will nothave a collapsible frame.
sxStyle	SystemStyleObject	theme-ui styling object for Block Box
actions	ActionItem[]	optional actions provided to the component
paddingTop	string | number	padding at the top, to account for the absolute position of the ActionBar
plain	boolean	if plain, skip the border and spacing around the children
children	string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)	source code to be displayed.
theme	PrismTheme	optional `PrismTheme` theme provided to the component. Themes can be imported from `prism-react-renderer/themes`.
language	Language	source lnguage used, by default "jsx".
renderFn	(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode	custom function to render the source code.
dark	boolean	used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used.
style	any	css styles for the container.
as	any	syntax container as element. Can be used as `div` or `span`.

getArgumentsLocations

getArgumentsLocations source code

Subtitle

displays a subtitle as assigned to the story parameters: story.parameters.componentSubtitle or story.subtitle

Subtitle source code

properties

Name	Type	Description
id	string	id of the story
name	string	alternatively you can use the name of a story to load from an external file
children	string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)	text to be displayed in the component.
as	"h1" | "h2" | "h3" | "h4" | "h5"	DOM node type to render as. By default h3.
ref	((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>

Title

displays a title as assigned to the story document

Title source code

properties

Name	Type	Description
id	string	id of the story
name	string	alternatively you can use the name of a story to load from an external file
children	string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)	text to be displayed in the component.
ref	((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>

InvalidType

error message when the control type is not found.

InvalidType source code

MDXContent

MDXContent source code

properties

Name	Type	Description
components*	any

getStoryBlockTitle

getStoryBlockTitle source code

properties

Name	Type	Description
story	Story
title	string