@component-controls/addon-catalog
v4.0.3
Published
Component-controls addon to display a catalog of components
Downloads
104
Readme
Table of contents
In action
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
react component
defined in @component-controls/addon-catalog/plugins/addon-catalog/src/Catalog/Catalog.tsx
properties
| Name | Type | Parent | Description |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| filter
| function (props
*story
*name
*: string
storyName
: string
id
: string
rawId
: string
doc
: string
storyFn
: function (controlValues
*: context
*: ) => Promise
| any
description
: string
arguments
: StoryArgument
[]loc
start
*: end
*: source
: string
subtitle
: string
dynamic
: boolean
dynamicId
: string
component
: string
| Record
<string
, unknown
> | ElementType
<Props
>subcomponents
: Record
<string
, (string
, Record
<string
, unknown
>, ElementType
<Props
>)>controls
[string
]: ComponentControl
<P
>smartControls
smart
*: include
*: exclude
*: decorators
: StoryRenderFn
[]plugins
: any
category
: string
doc
*[string
]: any
title
*: string
type
: "story"
| "blog"
| "page"
| "tags"
| "author"
| string
route
: string
date
: string
dateModified
: string
status
: "draft"
| "published"
tags
: string
[]keywords
: string
[]description
: string
| JSX.Element
image
: string
author
: string
order
: number
menu
: string
template
bind
*: function (props
*: ) => Example
<>bind
*: source
*: id
*: storyName
*: rawId
*: doc
*: storyFn
*: description
*: loc
*: subtitle
*: dynamic
*: dynamicId
*: component
*: subcomponents
*: smartControls
*: decorators
*: plugins
*: category
*: controls
*: source
: string
id
: string
storyName
: string
rawId
: string
doc
: string
storyFn
: StoryRenderFndescription
: string
loc
: CodeLocationsubtitle
: string
dynamic
: boolean
dynamicId
: string
component
: string
| Record
<string
, unknown
> | ElementType
<Props
>subcomponents
: Record
<string
, (string
, Record
<string
, unknown
>, ElementType
<Props
>)>smartControls
: SmartControlsdecorators
: StoryRenderFn
[]plugins
: any
category
: string
controls
: ExampleControlsstories
: string
[]source
: string
fileName
: string
package
: string
testFiles
: string
[]testCoverage
: string
[]testData
: string
renderFn
: function (props
*: ) => any
data
[string
]: componentsLookup
[string
]: string
MDXPage
: any
isMDXComponent
: boolean
parameters
: any
component
: string
| Record
<string
, unknown
> | ElementType
<Props
>subcomponents
: Record
<string
, (string
, Record
<string
, unknown
>, ElementType
<Props
>)>controls
[string
]: ComponentControl
<P
>smartControls
smart
*: include
*: exclude
*: decorators
: StoryRenderFn
[]plugins
: any
category
: string
navSidebar
: boolean
contextSidebar
: boolean
fullPage
: boolean
) => boolean
| ComponentsCatalogProps
| filter stories/documents |
| group
| function (props
*story
*name
*: string
storyName
: string
id
: string
rawId
: string
doc
: string
storyFn
: function (controlValues
*: context
*: ) => Promise
| any
description
: string
arguments
: StoryArgument
[]loc
start
*: end
*: source
: string
subtitle
: string
dynamic
: boolean
dynamicId
: string
component
: string
| Record
<string
, unknown
> | ElementType
<Props
>subcomponents
: Record
<string
, (string
, Record
<string
, unknown
>, ElementType
<Props
>)>controls
[string
]: ComponentControl
<P
>smartControls
smart
*: include
*: exclude
*: decorators
: StoryRenderFn
[]plugins
: any
category
: string
doc
*[string
]: any
title
*: string
type
: "story"
| "blog"
| "page"
| "tags"
| "author"
| string
route
: string
date
: string
dateModified
: string
status
: "draft"
| "published"
tags
: string
[]keywords
: string
[]description
: string
| JSX.Element
image
: string
author
: string
order
: number
menu
: string
template
bind
*: source
*: id
*: storyName
*: rawId
*: doc
*: storyFn
*: description
*: loc
*: subtitle
*: dynamic
*: dynamicId
*: component
*: subcomponents
*: smartControls
*: decorators
*: plugins
*: category
*: controls
*: stories
: string
[]source
: string
fileName
: string
package
: string
testFiles
: string
[]testCoverage
: string
[]testData
: string
renderFn
: function (props
*: ) => any
data
[string
]: componentsLookup
[string
]: string
MDXPage
: any
isMDXComponent
: boolean
parameters
: any
component
: string
| Record
<string
, unknown
> | ElementType
<Props
>subcomponents
: Record
<string
, (string
, Record
<string
, unknown
>, ElementType
<Props
>)>controls
[string
]: ComponentControl
<P
>smartControls
smart
*: include
*: exclude
*: decorators
: StoryRenderFn
[]plugins
: any
category
: string
navSidebar
: boolean
contextSidebar
: boolean
fullPage
: boolean
) => string
| ComponentsCatalogProps
| grouping function |
| groupSort
| function (groups
*: string
[]) => string
[] | ComponentsCatalogProps
| group/category sorting |
| slot
| string
| undefined
| HTMLAttributes
| |
| style
| CSSProperties
| undefined
| HTMLAttributes
| |
| title
| string
| undefined
| HTMLAttributes
| |
| key
| Key
| null
| undefined
| Attributes
| |
| sx
| ThemeUICSSObject
| ThemeDerivedStyles
| Attributes
| The ThemeUIStyleObject
extends [style props](https://emotion.sh/docs/object-styles) such that properties that are part of the Theme
will be transformed to their corresponding values. Other valid CSS properties are also allowed. |
| defaultChecked
| boolean
| undefined
| HTMLAttributes
| |
| defaultValue
| string
| number
| ReadonlyArray
<string
> | undefined
| HTMLAttributes
| |
| suppressContentEditableWarning
| boolean
| undefined
| HTMLAttributes
| |
| suppressHydrationWarning
| boolean
| undefined
| HTMLAttributes
| |
| accessKey
| string
| undefined