README
Table of contents
- Overview
- List of components
- ComponentsBlockContainer
- ComponentsContainer
- StoryBlockContainer
- CommitsPopover
- BaseComponentCommits
- ComponentCommits
- ComponentContributors
- ComponentExternalDependencies
- ComponentLocalDependencies
- ExternalDependencies
- LocalDependencies
- ComponentJSX
- ComponentJSXTree
- ImportLabel
- JSXTreeNode
- BaseComponentSource
- ComponentSource
- ComponentStats
- Container
- Description
- DocumentItem
- EditPage
- LocalImport
- PackageLink
- PackageVersion
- PageContainer
- PageTypeTag
- Pagination
- BasePlayground
- Playground
- StoryPlayground
- PropsTable
- useControlsActions
- Search
- Stories
- Story
- StoryRender
- StoryConfig
- StorySource
- Subtitle
- TagsList
- ThemeProvider
- Title
- BlockContextProvider
- InvalidType
- MDXContent
- MockContext
- 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.
- Components 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 |
---|---|---|
visibility |
ComponentVisibility | by default will show both controls and props tables user setting can display only props table or only controls |
onSelect |
((name: string, component: Component) => 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. |
name |
string | some component-oriented ui components can also be driven by a story id (name). ie the PropsTable can display component props, or story controls |
title |
string | optional section title for the block. |
description |
string | optional markdown description. |
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. |
data-testid |
string | testing id |
plain |
boolean | inner container variant or plain |
sx |
ThemeUIStyleObject | |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> |
ComponentsContainer
ComponentsContainer source code
properties
Name | Type | Description |
---|---|---|
components* |
Record<string, Component> | |
onSelect |
(name: string, component: Component) => boolean | void | callback to be called when the tab changes if the function returns false, it can stop chabging to the new tab |
StoryBlockContainer
StoryBlockContainer source code
properties
Name | Type | Description |
---|---|---|
story |
{ name: string; storyName?: string; id?: string; doc?: string; renderFn?: StoryRenderFn; description?: string; arguments?: StoryArguments; loc?: CodeLocation; source?: string; subtitle?: string; dynamic?: boolean; dynamicId?: string; } & StoryProps<...> | |
useStoryDescription |
boolean | |
title |
string | optional section title for the block. |
description |
string | optional markdown description. |
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. |
data-testid |
string | testing id |
plain |
boolean | inner container variant or plain |
sx |
ThemeUIStyleObject | |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> |
CommitsPopover
link displaying the total commits on a component with a popover on click that will display the list of commits
CommitsPopover source code
properties
Name | Type | Description |
---|---|---|
component |
Component | component that will be displayed the commits |
BaseComponentCommits
Displays commit history for a component
BaseComponentCommits source code
properties
Name | Type | Description |
---|---|---|
component |
Component | |
pagination |
boolean | TablePaginationProps |
ComponentCommits
Displays commit history for a component
ComponentCommits source code
properties
Name | Type | Description |
---|---|---|
title |
string | optional section title for the block. |
description |
string | optional markdown description. |
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. |
data-testid |
string | testing id |
plain |
boolean | inner container variant or plain |
sx |
ThemeUIStyleObject | |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> | |
name |
string | |
pagination |
boolean | TablePaginationProps |
ComponentContributors
ComponentContributors source code
properties
Name | Type | Description |
---|---|---|
caption |
string | |
component |
Component | |
tooltip |
ReactNode | on hover profile box |
overlap |
number | overlap % of the avatars in a list |
size |
number | size in pixels |
fixedSize |
boolean | whether to fix the size of the avataro on hover |
githubAccessToken |
string | to increase access rate for github user profile info |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> | |
sx |
ThemeUIStyleObject | |
maxItems |
number | max number of avatars, then use a '...' |
ComponentExternalDependencies
base component dependencies
ComponentExternalDependencies source code
properties
Name | Type | Description |
---|---|---|
component |
Component |
ComponentLocalDependencies
base component dependencies
ComponentLocalDependencies source code
properties
Name | Type | Description |
---|---|---|
component |
Component |
ExternalDependencies
Displays external dependencies for a component
ExternalDependencies source code
properties
Name | Type | Description |
---|---|---|
onSelect |
((name: string, component: Component) => 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 |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> | |
title |
string | optional section title for the block. |
sx |
ThemeUIStyleObject | |
id |
string | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
visibility |
ComponentVisibility | by default will show both controls and props tables user setting can display only props table or only controls |
of |
any | Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. |
name |
string | some component-oriented ui components can also be driven by a story id (name). ie the PropsTable can display component props, or story controls |
description |
string | optional markdown description. |
collapsible |
boolean | if false, will nothave a collapsible frame. |
data-testid |
string | testing id |
plain |
boolean | inner container variant or plain |
LocalDependencies
Displays local dependencies for a component
LocalDependencies source code
properties
Name | Type | Description |
---|---|---|
onSelect |
((name: string, component: Component) => 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 |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> | |
title |
string | optional section title for the block. |
sx |
ThemeUIStyleObject | |
id |
string | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
visibility |
ComponentVisibility | by default will show both controls and props tables user setting can display only props table or only controls |
of |
any | Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. |
name |
string | some component-oriented ui components can also be driven by a story id (name). ie the PropsTable can display component props, or story controls |
description |
string | optional markdown description. |
collapsible |
boolean | if false, will nothave a collapsible frame. |
data-testid |
string | testing id |
plain |
boolean | inner container variant or plain |
ComponentJSX
Displays external dependencies for a component
ComponentJSX source code
properties
Name | Type | Description |
---|---|---|
onSelect |
((name: string, component: Component) => 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 |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> | |
title |
string | optional section title for the block. |
sx |
ThemeUIStyleObject | |
id |
string | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
visibility |
ComponentVisibility | by default will show both controls and props tables user setting can display only props table or only controls |
of |
any | Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. |
name |
string | some component-oriented ui components can also be driven by a story id (name). ie the PropsTable can display component props, or story controls |
description |
string | optional markdown description. |
collapsible |
boolean | if false, will nothave a collapsible frame. |
data-testid |
string | testing id |
plain |
boolean | inner container variant or plain |
ComponentJSXTree
base component dependencies
ComponentJSXTree source code
properties
Name | Type | Description |
---|---|---|
component |
Component |
ImportLabel
ImportLabel source code
properties
Name | Type | Description |
---|---|---|
node* |
JSXNode |
JSXTreeNode
JSXTreeNode source code
properties
Name | Type | Description |
---|---|---|
node* |
JSXNode | |
isExpanded* |
boolean |
BaseComponentSource
BaseComponentSource source code
properties
Name | Type | Description |
---|---|---|
component* |
Component | |
actions |
ActionItem[] | optional actions provided to the component |
plain |
boolean | if plain, skip the border and spacing around the children |
children |
string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (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`. |
title |
string | optional title to display for the code block. Usually used from MDX |
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 |
CSSProperties | css styles for the container. |
as |
ElementType<any> | syntax container as element. Can be used as `div` or `span`. |
metastring |
string | code configuration string passed from MDX |
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: Component) => 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 |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> | |
title |
string | optional section title for the block. optional title to display for the code block. Usually used from MDX |
sx |
ThemeUIStyleObject | |
id |
string | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
visibility |
ComponentVisibility | by default will show both controls and props tables user setting can display only props table or only controls |
of |
any | Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. |
name |
string | some component-oriented ui components can also be driven by a story id (name). ie the PropsTable can display component props, or story controls |
description |
string | optional markdown description. |
collapsible |
boolean | if false, will nothave a collapsible frame. |
data-testid |
string | testing id |
plain |
boolean | inner container variant or plain if plain, skip the border and spacing around the children |
actions |
ActionItem[] | optional actions provided to the component |
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. |
metastring |
string | code configuration string passed from MDX |
ComponentStats
ComponentStats source code
properties
Name | Type | Description |
---|---|---|
component |
Component | |
variant |
"responsive" | "fixed" | |
sx |
ThemeUIStyleObject | |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> |
Container
page inner container. will display a like to edit the page and a last updated date.
Container source code
properties
Name | Type | Description |
---|---|---|
author |
ReactNode | |
secondRow |
ReactNode |
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. |
name |
string | some component-oriented ui components can also be driven by a story id (name). ie the PropsTable can display component props, or story controls |
DocumentItem
displays a single doument item
DocumentItem source code
properties
Name | Type | Description |
---|---|---|
item* |
DocInfo | document to be displayed |
highlight |
SearchFields | when search results, the search fields can be highlighted |
sx |
ThemeUIStyleObject | |
ref |
((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement> |
EditPage
Display a Edit this page link to the page source repository.
In order for this to work, you need to set up the repository
field in package.json
.
EditPage source code
LocalImport
LocalImport source code
properties
Name | Type | Description |
---|---|---|
componentHash |
string | |
name* |
string |
PackageLink
displays a package npm link and version
PackageLink source code
properties
Name | Type | Description |
---|---|---|
name* |
string | package name |
version |
string | optional version - if not provided will be lookup into dependencies |
dependencies |
PackageDependencies | package dependencies |
devDependencies |
PackageDependencies | package devDependencies |
PackageVersion
Display a label with the component's package version. extracted from package.json
PackageVersion source code
properties
Name | Type | Description |
---|