Skip to content

Commit

Permalink
docs: add filter to limit results
Browse files Browse the repository at this point in the history
  • Loading branch information
atanasster committed Dec 9, 2020
1 parent 319dfca commit 98f6570
Showing 1 changed file with 23 additions and 11 deletions.
34 changes: 23 additions & 11 deletions examples/stories/src/blogs/component-stats.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,35 @@ tags:
image: /static/components-usage-blog.jpg
component: BlockContainer
---

import { ComponentJSX, Playground } from '@component-controls/blocks';
import { ComponentUsage, AttributeUsage, ComponentUsageList, AttributesUsageList } from '@component-controls/addon-stats';
import {
ComponentUsage,
AttributeUsage,
ComponentUsageList,
AttributesUsageList,
} from '@component-controls/addon-stats';
import componentsUsageImg from './media/components-usage-blog.jpg';
import { BlockContainer } from '../../../../ui/components/src/BlockContainer/BlockContainer.tsx';

export const filter = ({ doc, component }) =>
component && doc.title.startsWith('Components');

# Addon stats

We just published the new jsx instrumenting feature and related cross/usage jsx components statistics for component-controls.
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.
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](/api/components-blockcontainer--overview) component:

<Playground>
<ComponentJSX of={BlockContainer} />
</Playground>
</Playground>

# Addon-stats

Expand All @@ -48,7 +55,12 @@ yarn add @component-controls/addon-stats --dev
## Usage

```mdx:title=stats-page.mdx
import { ComponentUsage, AttributeUsage, ComponentUsageList, AttributesUsageList } from '@component-controls/addon-stats';
import {
ComponentUsage,
AttributeUsage,
ComponentUsageList,
AttributesUsageList,
} from '@component-controls/addon-stats';

## Attributes usage summary

Expand All @@ -67,30 +79,30 @@ How many times a component is being used from another component, with a list of
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

<ComponentUsage />
<ComponentUsage filter={filter} />

## Attributes usage summary

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

<AttributeUsage />
<AttributeUsage filter={filter} />

## Components usage details

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

<ComponentUsageList />
<ComponentUsageList filter={filter} />

## Attributes usage details

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

<AttributesUsageList />
<AttributesUsageList filter={filter} />

0 comments on commit 98f6570

Please sign in to comment.