Looking for easy way to show my library's version in storybook

user_2433158 0
Viewed 2816

I'm trying to add the current version of a project (essentially the version field from package.json) to storybook so consumers of storybook can tell which version of the project they are looking at. However, I am finding it extremely difficult to do this, I haven't been able to find a way to do it in the config file, and haven't seen any addons that will simply show the current version of the project (other than one that is more made for showing how components have changed over versions, which isn't really what I'm after).

It's easy enough to require the package.json file in a js file, and grab the version from there, but storybook seems pretty locked down in terms of allowing you to send any addition information to the header/sidebar.

Has anybody done anything like this before? I'd be grateful for any thoughts or theories on how this could be done. Thanks!

storybook
4 Answers

I finally found a "not that bad" solution using the title attribute of the Meta component in my .mdx documentation files:

import pkg from '../package.json'
import { Meta } from '@storybook/addon-docs/blocks'

<Meta title={`Docs ${pkg.version}/Migration Guide`} />

enter image description here

user_34939540

Also was interested in this question. I've added to brandTitle to .storybook/manager.js like

import { version } from "../package.json";
addons.setConfig({
   theme: create({
       base: "light",
       brandTitle: `My components v.${version}`
   }),
});

Theming docs

user_60820840

Since Markdown accepts basic html tags, I managed to display the version from package.json into a .mdx documentation like this:

import pkg from '../package.json'

<p>Version: {pkg.version}</p>
user_81919750

We created "get started" Page contains a brief introduction of our library with the needed steps to integrate the library in angular project.

//get-started.stories.mdx
import { Meta, Source } from '@storybook/addon-docs';
import pkg from './components/package.json';

<Meta
  title="General/Get Started"
  parameters={{
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true }
    }
 }}
/>

<Source
 language="shell"
 code={`npm install @my-company/my-lib@${pkg.version}`}
/>

<Source
  language="json"
  format={true}
  code={`
  "dependencies": {
  //...
  "@my-company/my-lib": "${pkg.version}"
  }`}
/>

Source Doc Block

user_111356250
Related