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

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
@component-controls/blocks
3.6.1
commits:
1

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

created:3 weeks ago
updated:3 weeks ago
source lines:46
comments %:17
ComponentCommits

Displays commit history for a component

Date
Author
Commit Message
2/23/2021

hasparus

third commit
2/22/2021

lachlanjc

(งツ)ว
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

atanasster

first commit!
12 commits
created:1 month ago
updated:3 weeks ago
source lines:32
comments %:16
created:1 month ago
updated:1 month ago
source lines:61
comments %:2

Displays external dependencies for a component

created:4 months ago
updated:3 months ago
source lines:27
comments %:11

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:1 year ago
updated:8 months ago
source lines:21
comments %:19
source lines:25
comments %:4
todo lines:5
created:1 month ago
updated:3 weeks ago
source lines:29
comments %:3

Displays external dependencies for a component

package
imports
peer
Table
react
^16.13.1
ReactFC
*
created:4 months ago
updated:1 month ago
source lines:27
comments %:11

Displays local dependencies for a component

file
imports
"./Button"
ButtonButtonProps
"@component-controls/components"
Table
created:4 months ago
updated:1 month ago
source lines:27
comments %:11

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
-
created:1 year ago
updated:3 months ago
source lines:51
comments %:22

Document

displays a single doument item

created: 1/1/2020
,byatanasster
created:9 months ago
updated:1 month ago
source lines:83
comments %:12
created:9 months ago
updated:3 weeks ago
source lines:36
comments %:17
created:9 months ago
updated:3 months ago
source lines:68
comments %:1

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

created:9 months ago
updated:1 month ago
source lines:69
comments %:19

Page

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:9 months ago
updated:3 weeks ago
source lines:61
comments %:7

Description component with markdown. The 'of' property can specify which component's description to display.

Markdown descripton for component.

With a heading

and a link

created:1 year ago
updated:4 months ago
source lines:37
comments %:11

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:11 months ago
updated:4 months ago
source lines:24
comments %:25

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:3 months ago
source lines:65
comments %:25

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

created:9 months ago
updated:8 months ago
source lines:23
comments %:17

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

story subtitle

created:1 year ago
updated:8 months ago
source lines:15
comments %:33

displays a title as assigned to the story document

Story

created:1 year ago
updated:1 month ago
source lines:47
comments %:9

Stories

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:6 months ago
source lines:18
comments %:17

displays multiple stories in ther own Playground components

Stories

story

Components

button

controls

created:1 year ago
updated:5 months ago
source lines:49
comments %:14

block component to render story function with decorators

created:1 year ago
updated:3 months ago
source lines:44
comments %:39

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:10 months ago
updated:5 months ago
source lines:37
comments %:16

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>
);
created:1 year ago
updated:5 months ago
source lines:42
comments %:26