@component-controls/addon-catalog NPM

In action

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

react component

defined in @component-controls/addon-catalog/plugins/addon-catalog/src/Catalog/Catalog.tsx

properties

Name	Type	Parent	Description
`filter`	function (`props``story``name`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: function* (`controlValues`: `context`: ) => `Promise` \| `anydescription`: `stringarguments`: `StoryArgument`[]`locstart`: `end`: `source`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControl`<`P`>`smartControlssmart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringdoc`[`string`]: `anytitle`: `stringtype`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `stringroute`: `stringdate`: `stringdateModified`: `stringstatus`: `"draft"` \| `"published"tags`: `string`[]`keywords`: `string`[]`description`: `string` \| `JSX.Elementimage`: `stringauthor`: `stringorder`: `numbermenu`: `stringtemplatebind`: function (`props`: ) => `Example`<>`bind`: `source`: `id`: `storyName`: `rawId`: `doc`: `storyFn`: `description`: `loc`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `smartControls`: `decorators`: `plugins`: `category`: `controls`: `source`: `stringid`: `stringstoryName`: `stringrawId`: `stringdoc`: `stringstoryFn`: StoryRenderFn`description`: `stringloc`: CodeLocation`subtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`smartControls`: SmartControls`decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringcontrols`: ExampleControls`stories`: `string`[]`source`: `stringfileName`: `stringpackage`: `stringtestFiles`: `string`[]`testCoverage`: `string`[]`testData`: `stringrenderFn`: function (`props`: ) => `anydata`[`string`]: `componentsLookup`[`string`]: `stringMDXPage`: `anyisMDXComponent`: `booleanparameters`: `anycomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControl`<`P`>`smartControlssmart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringnavSidebar`: `booleancontextSidebar`: `booleanfullPage`: `boolean`) => `boolean`	`ComponentsCatalogProps`	filter stories/documents
`group`	function (`props``story``name`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: function* (`controlValues`: `context`: ) => `Promise` \| `anydescription`: `stringarguments`: `StoryArgument`[]`locstart`: `end`: `source`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControl`<`P`>`smartControlssmart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringdoc`[`string`]: `anytitle`: `stringtype`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `stringroute`: `stringdate`: `stringdateModified`: `stringstatus`: `"draft"` \| `"published"tags`: `string`[]`keywords`: `string`[]`description`: `string` \| `JSX.Elementimage`: `stringauthor`: `stringorder`: `numbermenu`: `stringtemplatebind`: `source`: `id`: `storyName`: `rawId`: `doc`: `storyFn`: `description`: `loc`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `smartControls`: `decorators`: `plugins`: `category`: `controls`: `stories`: `string`[]`source`: `stringfileName`: `stringpackage`: `stringtestFiles`: `string`[]`testCoverage`: `string`[]`testData`: `stringrenderFn`: function (`props`: ) => `anydata`[`string`]: `componentsLookup`[`string`]: `stringMDXPage`: `anyisMDXComponent`: `booleanparameters`: `anycomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControl`<`P`>`smartControlssmart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringnavSidebar`: `booleancontextSidebar`: `booleanfullPage`: `boolean`) => `string`	`ComponentsCatalogProps`	grouping function
`groupSort`	function (`groups`*: `string`[]) => `string`[]	`ComponentsCatalogProps`	group/category sorting
`slot`	`string` \| `undefined`	`HTMLAttributes`
`style`	`CSSProperties` \| `undefined`	`HTMLAttributes`
`title`	`string` \| `undefined`	`HTMLAttributes`
`key`	`Key` \| `null` \| `undefined`	`Attributes`
`sx`	`ThemeUICSSObject` \| `ThemeDerivedStyles`	`Attributes`	The `ThemeUIStyleObject` extends [style props](https://emotion.sh/docs/object-styles) such that properties that are part of the `Theme` will be transformed to their corresponding values. Other valid CSS properties are also allowed.
`defaultChecked`	`boolean` \| `undefined`	`HTMLAttributes`
`defaultValue`	`string` \| `number` \| `ReadonlyArray`<`string`> \| `undefined`	`HTMLAttributes`
`suppressContentEditableWarning`	`boolean` \| `undefined`	`HTMLAttributes`
`suppressHydrationWarning`	`boolean` \| `undefined`	`HTMLAttributes`
`accessKey`	`string` \| `undefined`