Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sheriffmoose/storybook-extras
Storybook Extras Addons
https://github.com/sheriffmoose/storybook-extras
addon angular console coverage extras markdown openapi storybook storybook-addon swagger toolbars variants
Last synced: about 1 month ago
JSON representation
Storybook Extras Addons
- Host: GitHub
- URL: https://github.com/sheriffmoose/storybook-extras
- Owner: sheriffMoose
- License: mit
- Created: 2023-01-22T09:43:26.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-08-29T02:37:57.000Z (about 1 year ago)
- Last Synced: 2024-10-12T22:42:22.972Z (about 1 month ago)
- Topics: addon, angular, console, coverage, extras, markdown, openapi, storybook, storybook-addon, swagger, toolbars, variants
- Language: TypeScript
- Homepage: https://master--63c1a45beed1a8f036a44e28.chromatic.com
- Size: 31.2 MB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
Storybook Extras
Storybook addons library with a bunch of useful features along with other nice-to-haves and definitely silly features.
[![][badge.release]][link.release]
[![][badge.license]][link.license]
![][badge.node]
![][badge.npm]
[![][badge.storybook]][link.npm]
[![][badge.banner]][link.npm]
Table of Contents
- [Getting started](#getting-started)
- [Demo](#demo)
- [Addons](#addons)
## Getting started
1. Install the addon:
```shell
yarn add @storybook-extras/preset -D
```
2. Add the addon
```ts
// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';
const config: StorybookConfig & ExtrasConfig = {
...
"addons": [
"@storybook-extras/preset",
...
],
...
}
export default config;
```
3. To disable the built-in features, add the following to your `main.js`:
```ts
// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';
const config: StorybookConfig & ExtrasConfig = {
...
"addons": [
"@storybook-extras/preset",
...
],
...
"extras": {
// disable Angular addon
// by default it will only be added ONLY if the `framework` is set to `@storybook/angular`
"angular": false,
// disable console logs
// further options are configurable in the `preview.js` file
// please see the `Console` addon docs for more info
"console": false,
// disable markdown/html docs
"markdown": false,
// set options for markdown/html docs
"markdown": {
"includes": path.join(process.cwd(), 'src'),
"excludes": [/\.component.html$/], // exclude angular component html files
}
// disable swagger docs completely
"swagger": false,
// set openapi url for swagger docs
"swagger": {
"stories": [
{
"title": "Swagger UI",
"url": "https://petstore.swagger.io/v2/swagger.json"
}
]
},
}
}
export default config;
```
4. Refer to the sections below for the documentation of the respective addons.
## Demo
Find the published demo storybook on Chromatic [here](https://master--63c1a45beed1a8f036a44e28.chromatic.com/)
## Addons
| | Addon | Description | Version | |
| ----------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------------------- | -------------------------------------------- | ----------------------------- |
| 
| Preset | Storybook Extras | [![addon.preset.img]][addon.preset.link] | [Docs][addon.preset.readme] |
| 
| Angular | Extra features for Angular | [![][addon.angular.img]][addon.angular.link] | [Docs][addon.angular.readme] |
| 
| Console Logs | Display console logs in the storybook | [![addon.console.img]][addon.console.link] | [Docs][addon.console.readme] |
| 
| Markdown/HTML Docs | Display markdown/html docs in the storybook | [![addon.markdown.img]][addon.markdown.link] | [Docs][addon.markdown.readme] |
| 
| OpenAPI/Swagger UI | Display OpenAPI/Swagger UI in the storybook | [![addon.swagger.img]][addon.swagger.link] | [Docs][addon.swagger.readme] |
| 
| Toolbar Buttons | Makes adding a custom toolbar button a breathe | [![addon.toolbars.img]][addon.toolbars.link] | [Docs][addon.toolbars.readme] |
| 
| Story Variants | Display all variants of a story in one story page all together | [![addon.variants.img]][addon.variants.link] | [Docs][addon.variants.readme] |
[addon.preset.img]: https://img.shields.io/npm/v/@storybook-extras/preset?label=&color=FF4785&style=for-the-badge
[addon.preset.link]: https://www.npmjs.com/package/@storybook-extras/preset
[addon.preset.readme]: https://github.com/sheriffMoose/storybook-extras/#readme
[addon.angular.img]: https://img.shields.io/npm/v/@storybook-extras/angular?label=&color=FF4785&style=for-the-badge
[addon.angular.link]: https://www.npmjs.com/package/@storybook-extras/angular
[addon.angular.readme]: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/angular#readme
[addon.console.img]: https://img.shields.io/npm/v/@storybook-extras/console?label=&color=FF4785&style=for-the-badge
[addon.console.link]: https://www.npmjs.com/package/@storybook-extras/console
[addon.console.readme]: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/console#readme
[addon.markdown.img]: https://img.shields.io/npm/v/@storybook-extras/markdown?label=&color=FF4785&style=for-the-badge
[addon.markdown.link]: https://www.npmjs.com/package/@storybook-extras/markdown
[addon.markdown.readme]: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/markdown#readme
[addon.swagger.img]: https://img.shields.io/npm/v/@storybook-extras/swagger?label=&color=FF4785&style=for-the-badge
[addon.swagger.link]: https://www.npmjs.com/package/@storybook-extras/swagger
[addon.swagger.readme]: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/swagger#readme
[addon.toolbars.img]: https://img.shields.io/npm/v/@storybook-extras/toolbars?label=&color=FF4785&style=for-the-badge
[addon.toolbars.link]: https://www.npmjs.com/package/@storybook-extras/toolbars
[addon.toolbars.readme]: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/toolbars#readme
[addon.variants.img]: https://img.shields.io/npm/v/@storybook-extras/variants?label=&color=FF4785&style=for-the-badge
[addon.variants.link]: https://www.npmjs.com/package/@storybook-extras/variants
[addon.variants.readme]: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/variants#readme
[logo]: https://github.com/sheriffMoose/storybook-extras/blob/master/logos/extras.svg?raw=true
[badge.release]: https://img.shields.io/github/actions/workflow/status/sheriffMoose/storybook-extras/release.yml?logo=github&label=release
[badge.license]: https://img.shields.io/github/license/sheriffMoose/storybook-extras?logo=github
[badge.node]: https://img.shields.io/node/v/@storybook-extras/preset?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[badge.npm]: https://img.shields.io/npm/v/@storybook-extras/preset?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=
[badge.storybook]: https://img.shields.io/npm/dependency-version/@storybook-extras/preset/dev/storybook?logo=storybook&logoColor=white&labelColor=FF4785&color=grey&label=
[badge.banner]: https://nodei.co/npm/@storybook-extras/preset.png
[link.release]: https://github.com/sheriffMoose/storybook-extras/actions/workflows/release.yml
[link.license]: https://github.com/sheriffMoose/storybook-extras/blob/master/LICENSE
[link.npm]: https://npmjs.org/package/@storybook-extras/preset