@component-controls/addon-stats NPM

In action

Overview

Addon to collect and display statistics for component-controls

Getting Started

Install

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

Usage

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 />

API

AttributeUsage

react component

Table of all the used attributes, with their components

defined in @component-controls/addon-stats/plugins/addon-stats/src/ui/AttributeUsage/AttributeUsage.tsx

properties

Name	Type	Parent	Default	Description
`filter`	function (...2 properties`doc`[`string`]: `anytitle`: `stringtype`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `stringroute`: `stringdate`: `stringdateModified`: `stringstatus`: `"draft"` \| `"published"tags`: `string`[]`keywords`: `string`[]`description`: `string` \| `JSX.Elementimage`: `stringauthor`: `stringorder`: `numbermenu`: `stringtemplatebind`: `source`: `id`: `storyName`: `rawId`: `doc`: `storyFn`: `description`: `loc`: `subtitle`: `dynamic`: `dynamicId`: `component`: `subcomponents`: `smartControls`: `decorators`: `plugins`: `category`: `controls`: `stories`: `string`[]`source`: `stringfileName`: `stringpackage`: `stringtestFiles`: `string`[]`testCoverage`: `string`[]`testData`: `stringrenderFn`: function* (`props`: ) => `anydata`[`string`]: `componentsLookup`[`string`]: `stringMDXPage`: `anyisMDXComponent`: `booleanparameters`: `anycomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControl`<`P`>`smartControlssmart`: `include`: `exclude`: `decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringnavSidebar`: `booleancontextSidebar`: `booleanfullPage`: `booleancomponent``name`: `stringimportedName`: `"default"` \| `"namespace"` \| `stringfrom`: `stringrequest`: `stringfileName`: `stringpropsInfoFile`: `stringlocstart`: `end`: `package`: `stringsource`: `stringinfodisplayName`: `description`: `props`: `externalDependencies`[`string`]: (`Omit`<`ImportType`, `"from"`>)[]`localDependencies`[`string`]: (`Omit`<`ImportType`, `"from"`>)[]`jsx`: `JSXNode`[]`fileInfodateCreated`: `dateModified`: `commits`: `sloc`: `jestresults`: `coverage`*: ) => `boolean`	`AttributeUsageProps`		stats filter callback function
`linkAttributes`	`boolean`	`AttributeUsageProps`	`true`
`title`	`string`	`BlockContainerOwnProps`		optional section title for the block.
`description`	`string`	`BlockContainerOwnProps`		optional markdown description.
`id`	`string`	`BlockContainerOwnProps`		optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
`collapsible`	`boolean`	`BlockContainerOwnProps`		if false, will nothave a collapsible frame.
`data-testid`	`string`	`BlockContainerOwnProps`		testing id
`plain`	`boolean`	`BlockContainerOwnProps`		inner container variant or plain
`slot`	`string` \| `undefined`	`HTMLAttributes`
`style`	`CSSProperties` \| `undefined`	`HTMLAttributes`
`key`	`Key` \| `null` \| `undefined`	`Attributes`
`sx`	`ThemeUICSSObject` \| `ThemeDerivedStyles`	`Attributes`		The `ThemeUIStyleObject` extends [style props](https://emotion.sh/docs/object-styles) such that properties that are part of the `Theme` will be transformed to their corresponding values. Other valid CSS properties are also allowed.
`defaultChecked`	`boolean` \| `undefined`	`HTMLAttributes`
`defaultValue`	`string` \| `number` \| `ReadonlyArray`<`string`> \| `undefined`	`HTMLAttributes`
`suppressContentEditableWarning`	`boolean` \| `undefined`