@component-controls/blocks

Component controls core documentation blocks.

Usage no npm install needed!

<script type="module">
  import componentControlsBlocks from 'https://cdn.skypack.dev/@component-controls/blocks';
</script>

README

Table of contents

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