Introducing Component Catalogs
Fresh off the oven, the addon-catalog is meant to collect and display a grid-like list of component cards.
You can include the new component catalogs in your MDX documentation files, along with other general information about your components library.
For a quick preview, you can check this live example of our library of theme-ui based components:
The
addon-catalog is not installed by default when using component-controls, and you will need to add it to your projectyarn add @component-controls/addon-catalog
Components/index.mdx
import { Catalog } from '@component-controls/addon-catalog';# Components<Catalogfilter={({ 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 -->/>
The
<Catalog /> component comes with search and filter features and allows for custom grouping of the selected components:sort by:
Containers
created:1 year ago
updated:8 months ago
loc
75
comments
33%
passed
16
coverage
50%
Collapsible block container with a title. The title creates also an attribute id and an octicon for github style navigation.
created:1 year ago
updated:2 weeks ago
loc
81
comments
7%
passed
10
coverage
17%
Popover container that is triggered by a click/hover event, using react-popper-tooltip.
Display
created:10 months ago
updated:8 months ago
loc
136
comments
18%
passed
10
coverage
50%
avatar to be used in an AvatarList container
created:1 year ago
updated:8 months ago
loc
46
comments
43%
passed
12
coverage
67%
A container component to display text in a colored box, with a semi-transparent background.
some text
You can also include single component cards in your documentation by specifying the story-id to use. Each card displays some component statistics -
- component name and description
- component package name and version
- preview rendered component
- dates created and last committed
- commits on component's file
- component's contributors
- number of lines, todos and comments
created:10 months ago
updated:10 months ago
loc
57
comments
19%
passed
4
coverage
80%
Avatar list that links to github profiles using rest api
Enjoy and let us know what you think!