❤Nebulae Populate M83

    npm

    Sign UpSign In

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

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

    PageContainer

    Page container component 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
    ref Ref<HTMLDivElement> ref to the page container component
    variant string theme variant
    wrapper ComponentType<{}> inner wrapper container
    sx ThemeUIStyleObject

    PageTypeTag

    PageTypeTag source code

    properties

    Name Type Description
    type* string page type
    raw string raw string - useful for highlighting in search results

    Pagination

    displays automatic pagination to the next/previous document of this same type.

    Pagination source code

    BasePlayground

    BasePlayground 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.
    source string playground source option - valid when a Story is not embedded inside the Playground.
    dark boolean whether to use the dark theme for the story source component.
    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 if plain, skip the border and spacing around the children
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    openTab ReactNode by default, which tab to have open.
    visibleTabs boolean if true, the tabs on the panels will be visible
    background BackgroundType background pattern type
    direction DirectionType direction type
    actions ActionItem[] optional actions provided to the component
    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<...>
    isDark boolean
    wrapper boolean

    Playground

    Component to display a live playground of component examples. Has custom actions for zooming, switch direction, review story source and configuration.

    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.
    source string playground source option - valid when a Story is not embedded inside the Playground.
    dark boolean whether to use the dark theme for the story source component.
    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 if plain, skip the border and spacing around the children
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    openTab ReactNode by default, which tab to have open.
    visibleTabs boolean if true, the tabs on the panels will be visible
    background BackgroundType background pattern type
    direction DirectionType direction type
    actions ActionItem[] optional actions provided to the component

    StoryPlayground

    StoryPlayground source code

    properties

    Name Type Description
    storyProps any
    scale number default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled.
    source string playground source option - valid when a Story is not embedded inside the Playground.
    dark boolean whether to use the dark theme for the story source component.
    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 if plain, skip the border and spacing around the children
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    openTab ReactNode by default, which tab to have open.
    visibleTabs boolean if true, the tabs on the panels will be visible
    background BackgroundType background pattern type
    direction DirectionType direction type
    actions ActionItem[] optional actions provided to the component

    PropsTable

    Displays the component's properties as well as configurable controls to interact with the component.

    PropsTable source code

    properties

    Name Type Description
    extraColumns Column<{}>[] extra custom columns passed to the PropsTable.
    flat boolean if true, will flatten the group by
    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

    useControlsActions

    useControlsActions source code

    properties

    Name Type Description
    controls ComponentControls<ComponentControl<any>>
    storyId string
    setControlValue SetControlValueFn

    Search

    Search source code

    properties

    Name Type Description
    onSelect (item: DocInfo) => void on select a search item.
    sx ThemeUIStyleObject
    children ((props: SearchBoxCallbackProps<DocInfo>) => ReactNode) | (((props: SearchBoxCallbackProps<DocInfo>) => ReactNode) & string) | ... 35 more ... | (((props: SearchBoxCallbackProps<...>) => ReactNode) & ... 1 more ... & ReactNodeArray) children is a render prop to allow custom rendering of items, one at a time
    popoverProps PopoverProps customize the popover
    render (rendered: ReactNode) => ReactNode custom renver of the search items popup

    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.
    id string optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
    name string
    storyProps any
    scale number default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled.
    source string playground source option - valid when a Story is not embedded inside the Playground.
    title string optional section title for the block.
    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
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    openTab ReactNode by default, which tab to have open.
    visibleTabs boolean if true, the tabs on the panels will be visible
    background BackgroundType background pattern type
    direction DirectionType direction type
    actions ActionItem[] optional actions provided to the component

    Story

    block component to render story function with decorators

    Story source code

    properties

    Name Type Description
    ref Ref<HTMLDivElement> ref can be used by blocks embedding Story - ie ally plugin
    onRender () => void used by other blocks ie ally plugin uses it launch a new ally test on re-render
    wrapper StoryWrapperType wrapper type - can be an iframe or just regular react
    iframeStyle CSSProperties if an iframe wrapper - this is additional iframe style
    id string optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
    name string
    title string optional section title for the block.
    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
    sx ThemeUIStyleObject

    StoryRender

    StoryRender 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<...>
    ref Ref<HTMLDivElement>
    wrapper StoryWrapperType
    iframeStyle CSSProperties

    StoryConfig

    Displays the configuration object of a story.

    StoryConfig 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>
    sourceProps SourceProps
    name string

    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
    viewStyle ViewStyle initial view mode
    sourceProps SourceProps source code options
    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

    Subtitle

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

    Subtitle source code

    properties

    Name Type Description
    id string
    name string
    children string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (string & ReactNodeArray) | (string & ReactPortal) text to be displayed in the component.
    as "h2" | "h1" | "h3" | "h4" | "h5" DOM node type to render as. By default h3.
    ref ((instance: HTMLHeadingElement) => void) | RefObject<HTMLHeadingElement>
    sx ThemeUIStyleObject

    TagsList

    displays a row of tags assigned to the current document, with links to their pages

    TagsList source code

    properties

    Name Type Description
    tags string[] string list of tag names
    raw string[] raw string values, useful for highlighting search results
    limit number limit the number of tags to display
    transparentAmount number transparent amount - 0 to 1
    borderSize number borderSize in pixels
    variant string theme variant additional

    ThemeProvider

    ThemeProvider source code

    properties

    Name Type Description
    components MarkdownComponentType components to customize the markdown display.

    Title

    displays a title as assigned to the story document

    Title source code

    properties

    Name Type Description
    contributors boolean
    id string
    name string
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

    BlockContextProvider

    BlockContextProvider source code

    properties

    Name Type Description
    storyId string current story id
    docId string current documentation page, if no story is selected
    store* Store store object
    activeTab string active page tab
    values any initial control values. usually passed from the url
    options object global options passed from container those are global parameters as well as decorators
    components MarkdownComponentType components to customize the markdown display.

    InvalidType

    error message when the control type is not found.

    InvalidType source code

    MDXContent

    MDXContent source code

    properties

    Name Type Description
    components* any

    MockContext

    MockContext source code

    properties

    Name Type Description
    storyId string
    component ComponentType<{}>

    getStoryBlockTitle

    getStoryBlockTitle 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<...>
    title string

    Keywords

    none

    Install

    npm i @component-controls/blocks@3.15.0

    Repository

    Gitgithub.com/ccontrols/component-controls

    Homepage

    github.com/ccontrols/component-controls

    Version

    3.15.0

    License

    MIT

    Unpacked Size

    583 kB

    Total Files

    228

    Last publish

    Collaborators

    • atanasster
    Try on RunKit
    Report malware