A next-generation tool to create blazing-fast documentation sites
API
created:12/8/2020
updated:3/5/2021

Introducing JSX stats

Addon stats

We just published the new jsx instrumenting feature and related cross/usage jsx components statistics for component-controls.
This unique feature allows you to view the jsx trees of your components and answer questions such as - which of my components is the most used as a building block, and which attributes of each component are most used.

JSX Tree display

This is displayed on the documentation page of each component, where you can see a tree of jsx nodes and the attributes used in each node.
Here is a live example of our BlockContainer component:

Addon-stats

The addon-stats package contains several api functions, react hooks, and ui elements to make it easy to display cross-usage statistics on the components in your documentation site.

Install

yarn add @component-controls/addon-stats --dev

Usage

stats-page.mdx

import {
ComponentUsage,
AttributeUsage,
ComponentUsageList,
AttributesUsageList,
} from '@component-controls/addon-stats';
## Attributes usage summary
Attributes usage - how many times an attribute is being set on a component, and on which component it is being set
<AttributeUsage />
## Components usage details
How many times a component is being used from another component, with a list of the components using it
<ComponentUsageList />
## Attributes usage details
How many times an attribute is being used on a component, with a list of those components
<AttributesUsageList />

Live examples

Components usage summary

Components usage - how many times a component is being used from another component and which of its properties are used

Components usage

component
attributes
#stories
#used in
Popover
sxtriggertooltipShownarrowVisibleonVisibilityChangetooltipplacement
1
5
Link
1
4
Value
1
3
Markdown
2
2
Collapsible
1
2
ActionContainer
3
2
Toggle
5
1
Tabs
4
1
SyntaxHighlighter
2
1
LinkHeading
1
1
GithubAvatar
1
1
ExternalLink
1
1
Description
1
1
ActionBar
6
1
Zoom
1
0
Tree
6
0
TitledImage
1
0
Tag
2
0
Table
8
0
Subtitle
1
0
Source
3
0
Sidebar
4
0
Shield
5
0
SearchInput
4
0
ProgressIndicator
1
0
PanelContainer
3
0
Pagination
3
0
Multiselect
1
0
InfoTip
1
0
HoverBox
1
0
Header
1
0
GithubAvatarList
2
0
Donut
1
0
CopyContainer
1
0
ColorMode
1
0
BlockContainer
4
0

Attributes usage summary

Attributes usage - how many times an attribute is being set on a component, and the component it is being set on

Components usage details

How many times a component is being used from another component, with a list of the components using it

Value

component
#used
GithubAvatar
3

ActionContainer

component
#used
Source
1
PanelContainer
1

Collapsible

Markdown

component
#used
InfoTip
1
Description
1

ActionBar

component
#used
ActionContainer
1

Description

component
#used
BlockContainer
1
component
#used
Link
1

GithubAvatar

component
#used
GithubAvatarList
1

LinkHeading

component
#used
BlockContainer
1

SyntaxHighlighter

component
#used
Source
1

Tabs

component
#used
PanelContainer
1

Toggle

component
#used
ColorMode
1

Attributes usage details

How many times an attribute is being used on a component, with a list of those components

trigger

component
#used
Popover
5

tooltip

component
#used
Popover
5

href

component
#used
Link
4

sx

component
#used
Popover
2
LinkHeading
1
Link
1

actions

component
#used
ActionContainer
2
ActionBar
1

variant

component
#used
Link
3

aria-label

component
#used
Link
2
Toggle
1

placement

component
#used
Popover
3

label

component
#used
Value
3

value

component
#used
Value
3

isOpen

component
#used
Collapsible
2

tooltipShown

component
#used
Popover
2

onVisibilityChange

component
#used
Popover
2

plain

component
#used
ActionContainer
1

key

component
#used
GithubAvatar
1

size

component
#used
GithubAvatar
1

githubAccessToken

component
#used
GithubAvatar
1

username

component
#used
GithubAvatar
1

useremail

component
#used
GithubAvatar
1

overlap

component
#used
GithubAvatar
1

fixedSize

component
#used
GithubAvatar
1

id

component
#used
LinkHeading
1

title

component
#used
LinkHeading
1

components

component
#used
Markdown
1

arrowVisible

component
#used
Popover
1

style

component
#used
SyntaxHighlighter
1

selectedIndex

component
#used
Tabs
1

onSelect

component
#used
Tabs
1

uncheckedIcon

component
#used
Toggle
1

checkedIcon

component
#used
Toggle
1

checked

component
#used
Toggle
1

onChange

component
#used
Toggle
1

onColor

component
#used
Toggle
1

offColor

component
#used
Toggle
1