index
@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.
component-controls
and you should never need to install it manually.Component
link displaying the total commits on a component with a popover on click that will display the list of commits
Displays commit history for a component
Date | Author | Commit Message |
---|---|---|
2/23/2021 | martin-stoyanov | third commit |
2/22/2021 | martin-stoyanov | (งツ)ว |
2/21/2021 | atanasster | first commit! |
2/21/2021 | atanasster | first commit! |
2/21/2021 | atanasster | first commit! |
2/21/2021 | atanasster | first commit! |
2/21/2021 | atanasster | first commit! |
2/21/2021 | atanasster | first commit! |
2/21/2021 | atanasster | first commit! |
2/21/2021 | martin-stoyanov | first commit! |
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 |
Displays jest tests coverage for a component, within a block
Kind | Total | Covered | Skipped | % | |
---|---|---|---|---|---|
Table.tsx | |||||
lines | 51 | 50 | 0 | 98.04% | |
functions | 10 | 7 | 0 | 70% | |
statements | 56 | 55 | 0 | 98.21% | |
branches | 49 | 40 | 0 | 81.63% | |
TableFilter.tsx | |||||
lines | 6 | 5 | 0 | 83.33% | |
functions | 2 | 1 | 0 | 50% | |
statements | 6 | 5 | 0 | 83.33% | |
branches | 4 | 1 | 0 | 25% |
Displays tests results details for a component, within a block
Status | Full name | Title | Time(ms) | |
---|---|---|---|---|
Table.test.ts(12 tests) | ||||
passed | Table | overview | 196 | |
passed | Table | noHeader | 91 | |
failed | Table | editing | 33 | |
disabled | Table | disable | 33 | |
pending | Table | pending | 33 | |
skipped | Table | skipped | 33 | |
todo | Table | todo | 33 | |
passed | Table | rowSelect | 144 | |
passed | Table | pagination | 169 |
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
search input component connected to the store
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.
Markdown descripton for component. # With a heading and some bold text
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.
Story
Displays document data associated with a story