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

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
@component-controls/components
2.11.3

Collapsible block container with a title. The title creates also an attribute id and an octicon for github style navigation.

Block title

created:11 months ago
updated:1 week ago
commits:39
source lines:77
comments %:32

Popover container that is triggered by a click/hover event, using react-popper-tooltip.

created:1 year ago
updated:1 week ago
commits:11
source lines:85
comments %:7

Display

avatar to be used in an AvatarList container

created:2 weeks ago
updated:1 week ago
source lines:129
comments %:19

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

some text
created:9 months ago
updated:1 week ago
commits:15
source lines:46
comments %:43

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

Avatar list that links to github profiles using rest api

created:1 week ago
updated:1 week ago
commits:4
source lines:57
comments %:19

Enjoy and let us know what you think!