Road Map for Storybook from Scratch to NPM Publish

By SrinivasTheDeveloper, 23nd October 2023

Hello, fellow developer! Are you ready to dive into the world of Storybook, Vite, TypeScript, React, and Styled-Components? We're about to embark on a journey to create a beautiful Storybook for your React components. Buckle up, and let's get started!

Getting Started

First, let's set up our project. We're going to use Vite, a lightning-fast build tool. In your terminal, run the following command to create a Vite project with React and TypeScript:

npm init @vitejs/app my-storybook --template react-ts

With our project ready, let's install the essentials: Storybook, Styled-Components, and Storybook add-ons.

cd my-storybook
npm install @storybook/react @storybook/addon-actions @storybook/addon-links react react-dom styled-components --save-dev

Now, it's time to configure Storybook. Create a .storybook/main.js file and add this code to specify where Storybook should look for your stories:

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

Crafting Your Button Component

We're going to create a beautiful button component using Styled-Components. In your src directory, define your Button.tsx component like this:

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => props.theme.backgroundColor};
  // Add more styles as needed
`;

export default Button;

Building Stories

Storybook is all about stories. Let's create one for our button. In your src directory, add a Button.stories.tsx file:

import React from 'react';
import { Meta } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import Button from '../components/Button';

export default {
  title: 'Button',
  component: Button,
} as Meta;

const Template = (args) => (
  <ThemeProvider theme={args.theme}>
    <Button {...args}>Click Me</Button>
  </ThemeProvider>
);

export const Primary = Template.bind({});
Primary.args = {
  theme: { backgroundColor: 'lightblue' },
};

Congratulations! You've just created your first Storybook story for the primary button. But we're not stopping here. Let's add a secondary button story too.

export const Secondary = Template.bind({});
Secondary.args = {
  theme: { backgroundColor: 'lightcoral' },
};

Adding Dark and Light Themes

Wouldn't it be cool if you could toggle between dark and light themes in Storybook? Let's make it happen.

Install the Addon: Run this command to add the Styled-Component Theme Addon to your project:
```
 npm install @storybook/addon-styled-component-theme --save-dev
```

Configuration: In your .storybook/main.js file, include the addon:

 module.exports = {
   addons: ['@storybook/addon-styled-component-theme/register'],
 };

Create a Theme Toggle Button: In your src directory, craft a ThemeToggle.tsx component to let you switch between dark and light themes:

 import React from 'react';
 import { withThemeFromStyledComponent } from '@storybook/addon-styled-component-theme';

 const ThemeToggle = () => {
   const { theme, setTheme } = withThemeFromStyledComponent();

   return (
     <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
       Toggle Theme
     </button>
   );
 };

 export default ThemeToggle;

Update Your Button Story: In your Button.stories.tsx, let's add the ThemeToggle button to switch themes:
```
 export const ThemeToggle = () => <ThemeToggle />;
```

Publishing as an NPM Package

Now, you've got a fantastic Storybook with themes, and you're ready to share it with the world. Let's publish it as an NPM package.

Prepare Your Package: Ensure your package directory is ready, including a solid package.json and a robust build process.
Build Your Package: Run your build process to generate production-ready files.
Publish to NPM: Use the npm publish command to share your package with the world:
```
 npm publish
```
Verify on NPM: Confirm that your package is now on the NPM registry.

And that's it! You've built an amazing Storybook, added themes, and even published it as an NPM package. Your components have never looked so good. Enjoy the journey of showcasing your work with Storybook!