@component-controls/addon-catalog
TypeScript icon, indicating that this package has built-in type declarations

4.0.3 • Public • Published

Table of contents

In action

Example site

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: StoryRenderFn
description: string
loc: CodeLocation
subtitle: string
dynamic: boolean
dynamicId: string
component: string | Record<string, unknown> | ElementType<Props>
subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>
smartControls: SmartControls
decorators: StoryRenderFn[]
plugins: any
category: string
controls: ExampleControls
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
) => 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 HTMLAttributes
className string | undefined HTMLAttributes
contentEditable Booleanish | "inherit" | undefined HTMLAttributes
contextMenu string | undefined HTMLAttributes
dir string | undefined HTMLAttributes
draggable Booleanish | undefined HTMLAttributes
hidden boolean | undefined HTMLAttributes
id string | undefined HTMLAttributes
lang string | undefined HTMLAttributes
placeholder string | undefined HTMLAttributes
spellCheck Booleanish | undefined HTMLAttributes
tabIndex number | undefined HTMLAttributes
translate "yes" | "no" | undefined HTMLAttributes
radioGroup string | undefined HTMLAttributes
role AriaRole | undefined HTMLAttributes
about string | undefined HTMLAttributes
datatype string | undefined HTMLAttributes
inlist any HTMLAttributes
prefix string | undefined HTMLAttributes
property string | undefined HTMLAttributes
resource string | undefined HTMLAttributes
typeof string | undefined HTMLAttributes
vocab string | undefined HTMLAttributes
autoCapitalize string | undefined HTMLAttributes
autoCorrect string | undefined HTMLAttributes
autoSave string | undefined HTMLAttributes
color string | undefined HTMLAttributes
itemProp string | undefined HTMLAttributes
itemScope boolean | undefined HTMLAttributes
itemType string | undefined HTMLAttributes
itemID string | undefined HTMLAttributes
itemRef string | undefined HTMLAttributes
results number | undefined HTMLAttributes
security string | undefined HTMLAttributes
unselectable "on" | "off" | undefined HTMLAttributes
inputMode "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined HTMLAttributes Hints at the type of data that might be entered by the user while editing the element or its contents
is string | undefined HTMLAttributes Specify that a standard HTML element should behave like a defined custom built-in element
aria-activedescendant string | undefined AriaAttributes Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic boolean | "false" | "true" | undefined AriaAttributes Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete "none" | "inline" | "list" | "both" | undefined AriaAttributes Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-busy boolean | "false" | "true" | undefined AriaAttributes Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked boolean | "false" | "mixed" | "true" | undefined AriaAttributes Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
aria-colcount number | undefined AriaAttributes Defines the total number of columns in a table, grid, or treegrid.
aria-colindex number | undefined AriaAttributes Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
aria-colspan number | undefined AriaAttributes Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
aria-controls string | undefined AriaAttributes Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-current boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined AriaAttributes Indicates the element that represents the current item within a container or set of related elements.
aria-describedby string | undefined AriaAttributes Identifies the element (or elements) that describes the object.
aria-details string | undefined AriaAttributes Identifies the element that provides a detailed, extended description for the object.
aria-disabled boolean | "false" | "true" | undefined AriaAttributes Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
aria-dropeffect "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined AriaAttributes Indicates what functions can be performed when a dragged object is released on the drop target.
aria-errormessage string | undefined AriaAttributes Identifies the element that provides an error message for the object.
aria-expanded boolean | "false" | "true" | undefined AriaAttributes Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto string | undefined AriaAttributes Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed boolean | "false" | "true" | undefined AriaAttributes Indicates an element's "grabbed" state in a drag-and-drop operation.
aria-haspopup boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined AriaAttributes Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden boolean | "false" | "true" | undefined AriaAttributes Indicates whether the element is exposed to an accessibility API.
aria-invalid boolean | "false" | "true" | "grammar" | "spelling" | undefined AriaAttributes Indicates the entered value does not conform to the format expected by the application.
aria-keyshortcuts string | undefined AriaAttributes Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label string | undefined AriaAttributes Defines a string value that labels the current element.
aria-labelledby string | undefined AriaAttributes Identifies the element (or elements) that labels the current element.
aria-level number | undefined AriaAttributes Defines the hierarchical level of an element within a structure.
aria-live "off" | "assertive" | "polite" | undefined AriaAttributes Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal boolean | "false" | "true" | undefined AriaAttributes Indicates whether an element is modal when displayed.
aria-multiline boolean | "false" | "true" | undefined AriaAttributes Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable boolean | "false" | "true" | undefined AriaAttributes Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation "horizontal" | "vertical" | undefined AriaAttributes Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns string | undefined AriaAttributes Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-placeholder string | undefined AriaAttributes Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset number | undefined AriaAttributes Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-pressed boolean | "false" | "mixed" | "true" | undefined AriaAttributes Indicates the current "pressed" state of toggle buttons.
aria-readonly boolean | "false" | "true" | undefined AriaAttributes Indicates that the element is not editable, but is otherwise operable.
aria-relevant "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined AriaAttributes Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
aria-required boolean | "false" | "true" | undefined AriaAttributes Indicates that user input is required on the element before a form may be submitted.
aria-roledescription string | undefined AriaAttributes Defines a human-readable, author-localized description for the role of an element.
aria-rowcount number | undefined AriaAttributes Defines the total number of rows in a table, grid, or treegrid.
aria-rowindex number | undefined

Readme

Keywords

Package Sidebar

Install

npm i @component-controls/addon-catalog

Weekly Downloads

6

Version

4.0.3

License

MIT

Unpacked Size

2.02 MB

Total Files

29

Last publish

Collaborators

  • atanasster