A next-generation tool to create blazing-fast documentation sites
API
created:2/19/2021
updated:5/16/2021

Introducing Component Catalogs

Introducing addon-catalog

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.

Live example

For a quick preview, you can check this live example of our library of theme-ui based components:

Installation

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

Catalog usage

Components/index.mdx

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 -->
/>
The <Catalog /> component comes with search and filter features and allows for custom grouping of the selected components:
sort by:

Containers

BlockContainer
avatar of atanasster
@component-controls/components
3.13.1
commits:
40
created:1 year ago
updated:2 weeks 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.

Block title

created:1 year ago
updated:2 months ago
loc
85
comments
7%
passed
10
coverage
17%
Popover container that is triggered by a click/hover event, using react-popper-tooltip.

Display

created:2 months ago
updated:2 weeks ago
loc
136
comments
18%
passed
10
coverage
50%

avatar to be used in an AvatarList container

avatar of Atanas Stoyanov
created:1 year ago
updated:3 weeks ago
loc
46
comments
43%
passed
12
coverage
71%

A container component to display text in a colored box, with a semi-transparent background.

some text

Single Card

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:2 months ago
updated:2 months ago
loc
57
comments
19%
passed
4
coverage
80%

Avatar list that links to github profiles using rest api

avatar of martin-stoyanov
avatar of atanasster
Enjoy and let us know what you think!