@component-controls/blocks is a library of context-sensitive components to display specific bits of information
about the pages, documents, components and stories in your documentation site.
- There are thre main categories of components:
- that display information about a page/document.
- that display story data (i.e. story source, story render)
- that display component(s) data (i.e. prop tables, component sources)
- Many of the block components should have a 'plain' and a 'block' version, where the block version adds a collapsible box with a title.
- Some components accept a list of custom ActionItems to be extended.
- Components that deal with source code (story or component source) display actions to browse their respective repositories.
This package is installed as part of component-controls and you should never need to install it manually.
You can view a table with the cross-usage of the included components
Component
Displays external dependencies for a component
- ArrowButton
- My Button Tab
Displays import statement for a component as well as the component file source code Optionally also displays some repository information from the component's package.json
Displays external dependencies for a component
- ArrowButton
- My Button Tab
package | imports | peer |
|---|---|---|
Table | ||
react ^16.13.1 | ReactFC | * |
Displays local dependencies for a component
- ArrowButton
- My Button Tab
file | imports |
|---|---|
| "./Button" | ButtonButtonProps |
| "@component-controls/components" | Table |
Component
Displays the component's properties as well as configurable controls to interact with the component.
Name | Description | Default |
|---|---|---|
| optionalArray | any[] | - |
| optionalArrayOf | number[] | - |
| optionalBool | boolean | - |
| optionalElement | any | - |
| optionalElementType | Element | - |
| optionalEnum | NewsPhotos | - |
| optionalFunc | (args: any) => any | - |
| optionalMessage | Message | - |
| optionalNode | any | - |
| optionalNumber | number | 21 |
| optionalObject | object | - |
| optionalObjectOf | { [key: string]: number; } | - |
| optionalObjectWithShape | { optionalProperty?: string; requiredProperty: number; } | - |
| optionalObjectWithStrictShape | { optionalProperty?: string; requiredProperty: number; } | - |
| optionalString | string | - |
| optionalSymbol | symbol | - |
| optionalUnion | stringnumberMessage | - |
| requiredAny | any | - |
| requiredFunc | (prop: any) => any | - |
Document
displays a single doument item
displays a row of tags assigned to the current document, with links to their pages
Page
page inner container. will display a like to edit the page and a last updated date.
Description component with markdown. The 'of' property can specify which component's description to display.
Display a Edit this page link to the page source repository. In order for this to work, you need to set up the
repository field in package.json.Page container component If the page is an MDX page, will display the MDX components. Otherwise, the page elements are passed as children
Story
displays automatic pagination to the next/previous document of this same type.
displays a subtitle as assigned to the story parameters: or story.subtitle
story subtitle
displays a title as assigned to the story document
Story
Stories
Component to display a live playground of component examples. Has custom actions for zooming, switch direction, review story source and configuration.
displays multiple stories in ther own Playground components
block component to render story function with decorators
Displays the configuration object of a story.
Display source code of a story. If controls are used, all story arguments will be highlighted. Additional commands are made available if the repository data of the story is available.