@component-controls/addon-catalog

Component-controls addon to display a catalog of components

Usage no npm install needed!

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

README

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