Introducing JSX 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.
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:
<Box
variant
/>theme-ui
^0.8.4<Box
variant
>theme-ui
^0.8.4<LinkHeading
asidtitlesx
>LinkHeading
from"../LinkHeading"
<Flex
variant
/>theme-ui
^0.8.4<Description/>
Description
from"../Description"
<Collapsible
isOpen
/>Collapsible
from"../Collapsible"
<Divider/>
theme-ui
^0.8.4<ComponentJSX of={BlockContainer} />
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.
yarn add @component-controls/addon-stats --dev
stats-page.mdx
import {ComponentUsage,AttributeUsage,ComponentUsageList,AttributesUsageList,} from '@component-controls/addon-stats';## Attributes usage summaryAttributes usage - how many times an attribute is being set on a component, and on which component it is being set<AttributeUsage />## Components usage detailsHow many times a component is being used from another component, with a list of the components using it<ComponentUsageList />## Attributes usage detailsHow many times an attribute is being used on a component, with a list of those components<AttributesUsageList />
Components usage - how many times a component is being used from another component and which of its properties are used
component | attributes | #stories | #used in |
|---|---|---|---|
| Popover | 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 - how many times an attribute is being set on a component, and the component it is being set on
attribute | components | #used | #total used |
|---|---|---|---|
| tooltip | 1 | 5 | |
| trigger | 1 | 5 | |
| sx | 3 | 4 | |
| href | 1 | 4 | |
| value | 1 | 3 | |
| label | 1 | 3 | |
| placement | 1 | 3 | |
| aria-label | 2 | 3 | |
| variant | 1 | 3 | |
| actions | 2 | 3 | |
| onVisibilityChange | 1 | 2 | |
| tooltipShown | 1 | 2 | |
| as | 2 | 2 | |
| isOpen | 1 | 2 | |
| offColor | 1 | 1 | |
| onColor | 1 | 1 | |
| onChange | 1 | 1 | |
| checked | 1 | 1 | |
| checkedIcon | 1 | 1 | |
| uncheckedIcon | 1 | 1 | |
| onSelect | 1 | 1 | |
| selectedIndex | 1 | 1 | |
| style | 1 | 1 | |
| arrowVisible | 1 | 1 | |
| components | 1 | 1 | |
| title | 1 | 1 | |
| id | 1 | 1 | |
| fixedSize | 1 | 1 | |
| overlap | 1 | 1 | |
| useremail | 1 | 1 | |
| username | 1 | 1 | |
| githubAccessToken | 1 | 1 | |
| size | 1 | 1 | |
| key | 1 | 1 | |
| plain | 1 | 1 |
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 |
component | #used |
|---|---|
| Pagination | 2 |
| GithubAvatar | 1 |
| ActionBar | 1 |
component | #used |
|---|---|
| GithubAvatar | 3 |
component | #used |
|---|---|
| Source | 1 |
| PanelContainer | 1 |
component | #used |
|---|---|
| PanelContainer | 1 |
| BlockContainer | 1 |
component | #used |
|---|---|
| InfoTip | 1 |
| Description | 1 |
component | #used |
|---|---|
| ActionContainer | 1 |
component | #used |
|---|---|
| BlockContainer | 1 |
component | #used |
|---|---|
| Link | 1 |
component | #used |
|---|---|
| GithubAvatarList | 1 |
component | #used |
|---|---|
| BlockContainer | 1 |
component | #used |
|---|---|
| Source | 1 |
component | #used |
|---|---|
| PanelContainer | 1 |
component | #used |
|---|---|
| ColorMode | 1 |
How many times an attribute is being used on a component, with a list of those components
component | #used |
|---|---|
| Popover | 5 |
component | #used |
|---|---|
| Popover | 5 |
component | #used |
|---|---|
| Link | 4 |
component | #used |
|---|---|
| Popover | 2 |
| LinkHeading | 1 |
| Link | 1 |
component | #used |
|---|---|
| ActionContainer | 2 |
| ActionBar | 1 |
component | #used |
|---|---|
| Link | 3 |
component | #used |
|---|---|
| Popover | 3 |
component | #used |
|---|---|
| Value | 3 |
component | #used |
|---|---|
| Value | 3 |
component | #used |
|---|---|
| Collapsible | 2 |
component | #used |
|---|---|
| SyntaxHighlighter | 1 |
| LinkHeading | 1 |
component | #used |
|---|---|
| Popover | 2 |
component | #used |
|---|---|
| Popover | 2 |
component | #used |
|---|---|
| ActionContainer | 1 |
component | #used |
|---|---|
| GithubAvatar | 1 |
component | #used |
|---|---|
| GithubAvatar | 1 |
component | #used |
|---|---|
| GithubAvatar | 1 |
component | #used |
|---|---|
| GithubAvatar | 1 |
component | #used |
|---|---|
| GithubAvatar | 1 |
component | #used |
|---|---|
| GithubAvatar | 1 |
component | #used |
|---|---|
| GithubAvatar | 1 |
component | #used |
|---|---|
| LinkHeading | 1 |
component | #used |
|---|---|
| LinkHeading | 1 |
component | #used |
|---|---|
| Markdown | 1 |
component | #used |
|---|---|
| Popover | 1 |
component | #used |
|---|---|
| SyntaxHighlighter | 1 |
component | #used |
|---|---|
| Tabs | 1 |
component | #used |
|---|---|
| Tabs | 1 |
component | #used |
|---|---|
| Toggle | 1 |
component | #used |
|---|---|
| Toggle | 1 |
component | #used |
|---|---|
| Toggle | 1 |
component | #used |
|---|---|
| Toggle | 1 |
component | #used |
|---|---|
| Toggle | 1 |
component | #used |
|---|---|
| Toggle | 1 |