https://github.com/silversonicaxel/storybook-addon-versioning

Storybook Addon Version is used to highlight the version of a component or of a package within Storybook toolbar.
https://github.com/silversonicaxel/storybook-addon-versioning

addon react storybook storybook-addon

Last synced: 3 months ago
JSON representation

Storybook Addon Version is used to highlight the version of a component or of a package within Storybook toolbar.

• Host: GitHub
• URL: https://github.com/silversonicaxel/storybook-addon-versioning
• Owner: silversonicaxel
• License: mit
• Created: 2022-01-14T13:39:57.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-17T09:10:26.000Z (7 months ago)
• Last Synced: 2024-11-11T21:23:04.979Z (3 months ago)
• Topics: addon, react, storybook, storybook-addon
• Language: JavaScript
• Homepage:
• Size: 183 KB
• Stars: 2
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Storybook Addon Version

The [Storybook Addon Version](https://storybook.js.org/addons/storybook-version/) is used to highlight the version of a component or of a package within [Storybook](https://storybook.js.org) toolbar.

## Installation

```sh

npm install storybook-version --save-dev

```

## Basic Setup

Add the following code in the `main.js` of your Storybook configuration:

```js

module.exports = {

  addons: ['storybook-version'],

};

```

Set the parameters of your story with the key value `version` in order to provide the necessary information to be displayed.

**Configuration**

| Property | Required | Type of Value | Description | Example |

|---|---|---|---|---|

| major | ✔ | string | Major version | '1' |

| minor | ✔ | string | Minor version | '2' |

| patch | ✔ | string | Patch version | '3' |

| postfix | | string | Postifx version extra data | 'beta.1'

| style | | object of keys string and values string  | Extra css properties to overwrite default style of the Version | '{ 'color' : 'red', 'border-width': '2px' }' |

**Implementation**

```js

export const parameters = {

  version: {

    major: '1',

    minor: '2',

    patch: '3'

  }

}

```

## Story Setup Example

Add the `version` parameter in the default Story configuration:

```js

import React from 'react'

export default {

  title: 'Component Button',

  parameters: {

    version: {

      major: '4',

      minor: '2',

      patch: '0',

      postfix: 'rc3',

      style: {

        color: 'red',

        'font-weight': '900',

        'font-size': '24px'

      }

    }

  }

}

```