Narnia's Poofy Meatcleaver

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

    3.15.0 • Public • Published

    Table of contents

    In action

    Example site

    Overview

    Addon to collect and display a grid-like list of component cards. Each card displays some component statistics - like the dates the component file was created and last committed, the number of commits as well as the component contributors, the number of lines and comments as well as a preview of the first story in the components' document ESM or MDX file.

    Getting Started

    Install

    yarn add @component-controls/addon-catalog --dev

    Usage

    ---
    title: Components/index
    ---
    import { Catalog } from '@component-controls/addon-catalog';
    
    
    # Components
    
    <Catalog
      filter={({ doc }) => doc.title.startsWith('Components')} <-- filter which components to display
      group={({ story }) => story.category} <- grouping of the filtered components by the category field of the document
    />
    

    API

    Catalog

    Catalog source code

    properties

    Name Type Description
    filter (props: FilterProps) => boolean filter stories/documents
    group (props: FilterProps) => string grouping function
    groupSort (groups: string[]) => string[] group/category sorting
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

    ComponentCard

    Table to display the components usage, with a % progress indicator

    ComponentCard source code

    properties

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

    ComponentFilter

    ComponentFilter source code

    properties

    Name Type Description
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

    ComponentList

    Grid display of component cards

    ComponentList source code

    properties

    Name Type Description
    minWidth number minimum card width in pixels. defaults to 420px
    stories* string[] story ids
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

    ComponentsCatalog

    Selection of components from stories, to be displayed in a ComponentList

    ComponentsCatalog source code

    properties

    Name Type Description
    filter (props: FilterProps) => boolean filter stories/documents
    group (props: FilterProps) => string grouping function
    groupSort (groups: string[]) => string[] group/category sorting

    ComponentCatalogContextProvider

    ComponentCatalogContextProvider source code

    properties

    Name Type Description
    sort ComponentCatalogOrder
    search string
    
    

    Install

    npm i @component-controls/addon-catalog@3.15.0

    Version

    3.15.0

    License

    MIT

    Unpacked Size

    489 kB

    Total Files

    41

    Last publish

    Collaborators

    • atanasster