@component-controls/blocks
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    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.
    • 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

    Keywords

    none

    Install

    npm i @component-controls/blocks@1.0.3

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    176 kB

    Total Files

    70

    Last publish

    Collaborators

    • atanasster