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 project
yarn 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:
Containers
Collapsible block container with a title. The title creates also an attribute id and an octicon for github style navigation.
Popover container that is triggered by a click/hover event, using react-popper-tooltip.
Display
avatar to be used in an AvatarList container
A container component to display text in a colored box, with a semi-transparent background.
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
Avatar list that links to github profiles using rest api
Enjoy and let us know what you think!