A next-generation tool to create blazing-fast documentation sites
API
created:3/23/2021
updated:3/23/2021

index

Overview

@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.

Installation

This package is installed as part of component-controls and you should never need to install it manually.

Cross-usage

You can view a table with the cross-usage of the included components

Components

sort by:

Component

CommitsPopover
avatar of atanasster
@component-controls/blocks
3.14.5
commits:
1
created:2 months ago
updated:2 months ago
loc
46
comments
17%
passed
2
coverage
50%

link displaying the total commits on a component with a popover on click that will display the list of commits

ComponentCommits
avatar of atanasster
avatar of martin-stoyanov
created:2 months ago
updated:2 months ago
loc
32
comments
16%
passed
12
coverage
73%

Displays commit history for a component

Date
Author
Commit Message
2/23/2021

martin-stoyanov

avatar of martin-stoyanov
third commit
2/22/2021

martin-stoyanov

avatar of martin-stoyanov
(งツ)ว
2/21/2021

atanasster

avatar of atanasster
first commit!
2/21/2021

atanasster

avatar of atanasster
first commit!
2/21/2021

atanasster

avatar of atanasster
first commit!
2/21/2021

atanasster

avatar of atanasster
first commit!
2/21/2021

atanasster

avatar of atanasster
first commit!
2/21/2021

atanasster

avatar of atanasster
first commit!
2/21/2021

atanasster

avatar of atanasster
first commit!
2/21/2021

martin-stoyanov

avatar of martin-stoyanov
first commit!
12 commits
created:3 months ago
updated:2 months ago
loc
61
comments
2%
passed
4
coverage
68%
avatar of martin-stoyanov
avatar of atanasster
created:5 months ago
updated:5 months ago
loc
27
comments
11%
passed
2
coverage
70%

Displays external dependencies for a component

created:1 year ago
updated:9 months ago
loc
21
comments
19%
passed
12
coverage
100%

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

import ArrowButton from '@component-controls/blocks';
created:3 months ago
updated:1 week ago
loc
106
comments
1%
passed
2
coverage
75%
loc
25
comments
4%
todos
5
passed
7
failed
1
coverage
67%
created:5 months ago
updated:3 months ago
loc
27
comments
11%
passed
2
coverage
67%

Displays external dependencies for a component

package
imports
peer
Table
react
^16.13.1
ReactFC
*
created:5 months ago
updated:3 months ago
loc
27
comments
11%
passed
2
coverage
67%

Displays local dependencies for a component

file
imports
"./Button"
ButtonButtonProps
"@component-controls/components"
Table
created:3 weeks ago
updated:1 week ago
loc
32
comments
16%
passed
12
coverage
75%

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%
created:4 weeks ago
updated:1 week ago
loc
39
comments
13%
passed
12
coverage
69%

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
total 12 tests

Component

created:1 year ago
updated:1 day ago
loc
51
comments
22%
passed
14
coverage
75%

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

created:10 months ago
updated:3 days ago
loc
93
comments
11%
passed
2
coverage
67%

displays a single doument item

created: 1/1/2020
,byatanasster
created:10 months ago
updated:2 months ago
loc
36
comments
17%
passed
2
coverage
67%
created:10 months ago
updated:3 weeks ago
loc
68
comments
6%
passed
2
coverage
13%

search input component connected to the store

created:10 months ago
updated:2 months ago
loc
69
comments
19%
passed
2
coverage
56%

displays a row of tags assigned to the current document, with links to their pages

Page

created:11 months ago
updated:2 weeks ago
loc
58
comments
7%
passed
2
coverage
79%

page inner container. will display a like to edit the page and a last updated date.

created:1/1/2020
updated:3/31/2020

Story

story subtitle

created:1 year ago
updated:6 months ago
loc
37
comments
11%
passed
4
coverage
64%

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

created:1 year ago
updated:6 months ago
loc
24
comments
25%
passed
2
coverage
80%
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
.
created:1 year ago
updated:4 months ago
loc
65
comments
25%
passed
4
coverage
0%

Page container component If the page is an MDX page, will display the MDX components. Otherwise, the page elements are passed as children

Story

created:11 months ago
updated:9 months ago
loc
23
comments
17%
passed
2
coverage
33%

displays automatic pagination to the next/previous document of this same type.

created:1 year ago
updated:9 months ago
loc
15
comments
33%
passed
2
coverage
50%

displays a subtitle as assigned to the story parameters: or story.subtitle

story subtitle

created:1 year ago
updated:2 months ago
loc
47
comments
9%
passed
2
coverage
65%

displays a title as assigned to the story document

Story

Stories

created:1 year ago
updated:8 months ago
loc
18
comments
17%
passed
28
coverage
83%

Component to display a live playground of component examples. Has custom actions for zooming, switch direction, review story source and configuration.

created:1 year ago
updated:1 week ago
loc
54
comments
13%
passed
8
coverage
75%

displays multiple stories in ther own Playground components

Stories

button

controls

story

Components

created:1 year ago
updated:3 weeks ago
loc
44
comments
39%
passed
12
coverage
71%

block component to render story function with decorators

created:1 year ago
updated:3 weeks ago
loc
37
comments
16%
passed
12
coverage
75%

Displays the configuration object of a story.

{
"id": "id-of-story",
"doc": "Story",
"component": "ArrowButton",
"description": "description of story",
"name": "story",
"subcomponents": {
"My Button Tab": "Button"
},
"subtitle": "story subtitle"
}
created:1 year ago
updated:3 weeks ago
loc
42
comments
26%
passed
12
coverage
75%

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.

({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

Story

created:1 week ago
updated:1 week ago
loc
38
comments
13%
passed
12
coverage
79%

Displays document data associated with a story

select
#
name
age
1
Cecelia Langosh
16
2
Murl Green I
26
3
Lela McClure
24
4
Ms. Jean Barrows
23
5
Tanya Sanford
19
5 data rows