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	varianthrefaria-labelsx	1	4
Value	labelvalue	1	3
Markdown	components	2	2
Collapsible	isOpen	1	2
ActionContainer	plainactions	3	2
Toggle	aria-labeluncheckedIconcheckedIconcheckedonChangeonColoroffColor	5	1
Tabs	selectedIndexonSelect	4	1
SyntaxHighlighter	asstyle	2	1
LinkHeading	asidtitlesx	1	1
GithubAvatar	keysizegithubAccessTokenusernameuseremailoverlapfixedSize	1	1
ExternalLink		1	1
Description		1	1
ActionBar	actions	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

Attributes usage

attribute	components	#used	#total used
tooltip	Popover	1	5
trigger	Popover	1	5
sx	LinkLinkHeadingPopover	3	4
href	Link	1	4
value	Value	1	3
label	Value	1	3
placement	Popover	1	3
aria-label	LinkToggle	2	3
variant	Link	1	3
actions	ActionBarActionContainer	2	3
onVisibilityChange	Popover	1	2
tooltipShown	Popover	1	2
as	LinkHeadingSyntaxHighlighter	2	2
isOpen	Collapsible	1	2
offColor	Toggle	1	1
onColor	Toggle	1	1
onChange	Toggle	1	1
checked	Toggle	1	1
checkedIcon	Toggle	1	1
uncheckedIcon	Toggle	1	1
onSelect	Tabs	1	1
selectedIndex	Tabs	1	1
style	SyntaxHighlighter	1	1
arrowVisible	Popover	1	1
components	Markdown	1	1
title	LinkHeading	1	1
id	LinkHeading	1	1
fixedSize	GithubAvatar	1	1
overlap	GithubAvatar	1	1
useremail	GithubAvatar	1	1
username	GithubAvatar	1	1
githubAccessToken	GithubAvatar	1	1
size	GithubAvatar	1	1
key	GithubAvatar	1	1
plain	ActionContainer	1	1

Components usage details

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

component	#used
SearchInput	1
Multiselect	1
InfoTip	1
GithubAvatar	1
CopyContainer	1

Link

component	#used
Pagination	2
GithubAvatar	1
ActionBar	1

Value

component	#used
GithubAvatar	3

ActionContainer

component	#used
Source	1
PanelContainer	1

Collapsible

component	#used
PanelContainer	1
BlockContainer	1

Markdown

component	#used
InfoTip	1
Description	1

ActionBar

component	#used
ActionContainer	1

Description

component	#used
BlockContainer	1

ExternalLink

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

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

as

component	#used
SyntaxHighlighter	1
LinkHeading	1

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

Introducing Component Commits

Custom documentation pages for storybookjs