Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atanasster/storybook-addon-deps
A storybook addon to add a dependencies tree exporer tab.
https://github.com/atanasster/storybook-addon-deps
dependencies storybook webpack
Last synced: 18 days ago
JSON representation
A storybook addon to add a dependencies tree exporer tab.
- Host: GitHub
- URL: https://github.com/atanasster/storybook-addon-deps
- Owner: atanasster
- License: mit
- Created: 2019-09-14T07:00:22.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-21T00:09:57.000Z (over 3 years ago)
- Last Synced: 2024-10-12T22:47:51.517Z (about 1 month ago)
- Topics: dependencies, storybook, webpack
- Language: TypeScript
- Homepage: https://atanasster.github.io/storybook-addon-deps/?path=/docs/design-system-avatarlist--short
- Size: 62.6 MB
- Stars: 60
- Watchers: 6
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# storybook-addon-deps
A storybook addon to add a dependencies tree exporer tab.
## Quick start
### 1. Install
```sh
npm i -D storybook-addon-deps
```
### 2. Add preset: `.storybook/main.js`
```js
module.exports = {
presets: ['storybook-addon-deps/preset', ...]
...
}
```
### 3. Configure DocsPage `.storybook/preview.js` (was `.storybook/config.js`)
```
import { DocsPage } from 'storybook-addon-deps/blocks';
addParameters({
docs: { page: DocsPage },
dependencies: { withStoriesOnly: true, hideEmpty: true }
});
```
# Advanced setup and usage
## DocsPage demo
[grommet-controls](https://atanasster.github.io/grommet-controls/?path=/docs/controls-controls-avatar--main)
## Usage
In your storybook preview.js(or config.js), define some global parameters to exchange the data collected by the `storybook-dep-webpack-plugin`
```js
import { addParameters } from '@storybook/{yourframework}';
addParameters({
dependencies: {
//display only dependencies/dependents that have a story in storybook
//by default this is false
withStoriesOnly: true,
//completely hide a dependency/dependents block if it has no elements
//by default this is false
hideEmpty: true,
//custom match function to find matching component in case duplicate
//component names. chooses first match if not configured
match: (matchingComponents, storyFilename) => matchingComponents?.[0][0]
}
});
```
## A. Add a documentation block to your DocsPage (optional)
DocsPage is the zero-config default documentation that all stories get out of the box.
You can add a **Dependencies** block to any level to your storybook
**Globally (preview.js/config.js)**
```js
import { DocsPage } from 'storybook-addon-deps/blocks/DocsPage';
addParameters({ docs: { page: DocsPage } });
```
**Component-level (Button.stories.js)**
```js
import { Button } from './Button';
import { DocsPage } from 'storybook-addon-deps/blocks/DocsPage';
export default {
title: 'Demo/Button',
component: Button,
parameters: { docs: { page: DocsPage } },
};
```
**Story-level (Button.stories.js)**
```js
import { Button } from './Button';
import { DocsPage } from 'storybook-addon-deps/blocks/DocsPage';
// export default { ... }
export const basic => () => Basic
basic.story = {
parameters: { docs: { page: DocsPage } }
}
```
## B. Add dependencies and dependents doc blocks to mdx stories (optional)
**Button.stories.mdx**
```jsx
import {
Story,
Canvas,
ArgsTable,
Description,
Meta,
} from '@storybook/addon-docs/blocks';
import { Button } from '@storybook/design-system/dist/components/Button';
import { DependenciesTable, Dependencies, Dependents } from 'storybook-addon-deps/blocks';
# Two ways to display blocks - combined into a single table, or separated into two tables
## 1. DependenciesTable - combined dependencies and dependents into one
## 2. Dependencies and Dependents tables
```
**excludeFn**
You can exclude specific modules from the dependencies tables by setting
`excludeFn: (module: IDependency) => boolean;;`
```
module.name === 'babel'} />
```
## C. Add a dependencies explorer tab to storybookjs (optional)
## Use the `preset-explorer` preset
```js
module.exports = {
presets: ['storybook-addon-deps/preset-explorer', ...]
...
}
```
# Project analysis
The charts used are [Google Charts](https://react-google-charts.com) and all their properties are applicable. Detailed information on configuration options is available from Google documentation, for example [Pie Chart](https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options) options.
```
import { Meta } from '@storybook/addon-docs/blocks';
import { ChartComponentUsage, ChartStoriesPerComponent } from 'storybook-addon-deps/blocks';
```
## Stories per component
```
import { Heading } from '@storybook/addon-docs/blocks';
import { ChartStoriesPerComponent } from 'storybook-addon-deps/blocks';
Stories per component
```
## Components by usage
Displays how many times each component is used by other components.
```
import { Heading } from '@storybook/addon-docs/blocks';
import { ChartStoriesPerComponent } from 'storybook-addon-deps/blocks';
Components usage
```
# Other frameworks
## web-components
## angular
## vue
# Options
a set of options can be passed down to the `storybook-dep-webpack-plugin`
**filter** - a RegExp or function to select the stories.
example:
```
module.exports = {
presets: [
{
name: 'storybook-addon-deps/preset-explorer',
options: {
filter: (resource) => {
return /\.(stories|story)\.[tj]sx?$/.test(resource) && resource.indexOf("Avatar") > -1;
}
}
}
]
```
**exclude** - a RegExp for the modules to exclude.
example:
```
module.exports = {
presets: [
{
name: 'storybook-addon-deps/preset-explorer',
options: {
//by default @storybook modules are also excluded
exclude: /^@babel/,
}
}
]
```
**maxLevels** - How many levels deep to follow the dependencies.
example:
```
module.exports = {
presets: [
{
name: 'storybook-addon-deps/preset-explorer',
options: {
maxLevels: 10,
}
}
]
```
**pickProperties** - An array of the props to pick from the module webpack data.
example:
```
module.exports = {
presets: [
{
name: 'storybook-addon-deps/preset-explorer',
options: {
pickProperties: ['id', 'name', 'request'],
}
}
]
```
**pickModuleProperties** - An array of the props to pick from the module.module webpack data.
example:
```
module.exports = {
presets: [
{
name: 'storybook-addon-deps/preset-explorer',
options: {
pickModuleProperties: [],
}
}
]
```