# @storybook-extras/variants

> Storybook addon for displaying component variants all together in one story.

Latest version **0.0.68** (published 2023-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook-extras/variants
pnpm add @storybook-extras/variants
yarn add @storybook-extras/variants
bun add @storybook-extras/variants
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.68 |
| Published | 2023-03-01 |
| First published | 2023-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 3 |
| Unpacked size | 21.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Mostafa Sherif |
| Maintainers | mosherif87 |
| Keywords | storybook, addons, extras, angular, variants, story, stories |

## Links

- npm: https://www.npmjs.com/package/@storybook-extras/variants
- Repository: https://github.com/sheriffMoose/storybook-extras
- Homepage: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/variants#readme
- Issues: https://github.com/sheriffMoose/storybook-extras/issues
- Funding: https://github.com/sheriffMoose/storybook-extras?sponsor=1
- npm.io page: https://npm.io/package/@storybook-extras/variants

## Dependencies (3)

- [cartesian](https://npm.io/package/cartesian.md) ^1.0.1
- [@storybook-extras/devkit](https://npm.io/package/@storybook-extras/devkit.md) ^0.0.68
- [@storybook-extras/toolbars](https://npm.io/package/@storybook-extras/toolbars.md) ^0.0.68

## Recent versions

- 0.0.68 (latest) — 2023-03-01
- 0.0.51--canary.21.4060555582.0 (canary) — 2023-02-01
- 0.0.67 — 2023-02-11
- 0.0.66 — 2023-02-05
- 0.0.65 — 2023-02-05
- 0.0.64 — 2023-02-04
- 0.0.63 — 2023-02-04
- 0.0.62 — 2023-02-04
- 0.0.61 — 2023-02-04
- 0.0.60 — 2023-02-04
- 0.0.59 — 2023-02-04
- 0.0.58 — 2023-02-03
- 0.0.57 — 2023-02-03
- 0.0.56 — 2023-02-03
- 0.0.55 — 2023-02-03
- … 33 more at https://npm.io/package/@storybook-extras/variants/versions

## README

<div align="center">

<img src="https://raw.githubusercontent.com/sheriffMoose/storybook-extras/master/logos/variants.svg" alt="logo" width="200" />

<h1>Story Variants</h1>

<p>Storybook addon for displaying component variants all together in one story.</p>

![][img.node]
![][img.npm]
[![][img.storybook]][link.npm]

[![][img.banner]][link.npm]

</div>

<h2>Table of Contents</h2>

- [Getting started](#getting-started)
- [How to use](#how-to-use)
  - [Parameters](#parameters)
- [Compatibility](#compatibility)

## Getting started

1. Install the addon:

```shell
yarn add @storybook-extras/variants -D
```

1. 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/variants",
        // it will be included automatically if you are using
        // "@storybook-extras/preset",
        ...
    ],
    ...
}

export default config;
```

## How to use

- Simply enable the variants through the toolbar or using the parameters like so:

```ts
// .storybook/preview.ts 
// button.stories.ts
parameters: {
    variants: {
        enable: true
    },
};
```


### Parameters

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `enable` | `boolean` | `false` | Enable the variants addon |
| `include` | `string[]` | `[]` | Include variants from the list |
| `exclude` | `string[]` | `[]` | Exclude variants from the list |
| `groupBy` | `string[]` | `[]` | Group the variants by these keys |
| `autoCalculate` | `boolean` | `false` | Automatically calculate the variants |

**NOTES**
- If you set `autoCalculate` to `false`, you can use the `include` parameters to include the variants.
- If you set `autoCalculate` to `true`, you can use the `exclude` parameters to filter the variants.
- Toolbar button will not show if `autoCalculate` is set to `true` or `include` is not empty.


## Compatibility

This addon was initially developed for Angular 15 & Storybook v7 in mind. However, you can still use it in older versions, but you will need to use the decorator directly in `preview.js` instead of adding the addon in your `main.js`.

```ts
// .storybook/preview.ts
import { withVariants } from '@storybook-extras/variants';

export const decorators = [withVariants()];
```

This approach will also work for React, Vue, and other frameworks. Please open an issue if you find any compatibility issues, pull requests are always welcome.



[img.node]:
https://img.shields.io/node/v/@storybook-extras/variants?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[img.npm]:
https://img.shields.io/npm/v/@storybook-extras/variants?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=

[img.storybook]:
https://img.shields.io/npm/dependency-version/@storybook-extras/variants/dev/storybook?logo=storybook&logoColor=white&labelColor=FF4785&color=grey&label=

[img.banner]:
https://nodei.co/npm/@storybook-extras/variants.png

[link.npm]:
https://npmjs.org/package/@storybook-extras/variants

---
_Source: https://npm.io/package/@storybook-extras/variants · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._