This blog post introduces a workflow for publishing React components with Bit and Storybook.

We’ll use Bit to handle the component development, build pipeline, package publishing, and even the Storybook app deployment.

Bit enables component documentation and previewing out of the box. However, these features do not aim to replace Storybook.

This blog goes through the following steps:

1. Create a new Bit workspace that includes a reusable React development environment with pre-configured tools like TypeScript, ESLint, Jest, and more. Additional dev environments can be used to support other component types.
2. Create a new React component and preview it with Bit
3. Copy an existing Storybook app component into the workspace
4. Create a story for the new React component
5. Configure the Storybook app component deployment.
6. Create a free bit.cloud account to host our components and run the CI
7. Publish the component packages and deploy the Storybook app.

1. Create a new Bit workspace

Install Bit.

npx @teambit/bvm install

Create a workspace with a React dev environment already included. You can add other dev environments to support different components if needed.

bit new react my-sb-workspace --env teambit.bitdev/react-env

2. Create a new React component

Run the following to generate a React component using a template provided by your reusable React dev environment:

bit create react button

Your new component should have the following files generated:

.
├── button.composition.tsx  <- your component previews/examples (for Bit)
├── button.docs.mdx <- your component docs (for Bit)
├── button.module.scss 
├── button.tsx
└── index.ts  <-- the entry file for your component 

Bit automatically detects dependencies and intelligently resolves dependnecy versions and types, for each Bit component.

Consequently, each package generated for its corresponding Bit component will also have its dependnecies (listed in its package.json) handled automatically by Bit.

To preview your component using Bit’s workspace UI, run the following:

bit start

Your component should be previewed on the component page:

3. Copy (“fork”) a demo Storybook app into your workspace

bit fork bitdesign.storybook/examples/storybook-react-app my-storybook-app

4. Create a new story inside the Storybook app

Create a story file inside the stories directory, nested inside the app directory:

touch button.stories.ts

Import the previously created Bit component into the story file. Note that Bit components are always imported/required using their package name, even when maintained in the same workspace!

/** @filename: my-storybook-app/stories/button.stories.ts */

import type { StoryObj } from '@storybook/react';

/** import the Bit component to document */
import { Button, ButtonProps } from '@bitdesign/basic-react.actions.button';

const meta = {
  /** the title is the component ID, in this case */
  title: 'bitdesign.basic-react/actions/button',
  component: Button,
  // ...
};

export default meta;

type Story = StoryObj<ButtonProps>;

export const Basic: Story = {
  args: {
    children: 'Click here!',
  },
};

5. Run your Storybook app locally

Run the following to make your app loadable by your workspace:

bit use my-storybook-app

Run the app using its app name (configured in the *.storybook.cjs plugin file):

bit run storybook-app

The Storybook app should include the new story:

6. Create a free bit.cloud account

To use Bit’s default CI for components and to host components and their packages, create a bit.cloud account, and a ‘remote scope’, a hosting place, for your components.

Once an account and a new remote scope are created, rename the current default scope with you new scope name (with the pattern account.scope ):

bit scope rename my-org.my-scope john-doe.my-design-scope --refactor

7. Publish components and deploy the Storybook app

Set your Storybook app with the proper Chromatic project token:

/** @filename: my-storybook-app/my-storybook-app.storybook.cjs */

const { join } = require('path');

/** @type {import("@teambit/storybook.apps.sb-app-type").StorybookOptions} */
module.exports.default = {
  // ...
  deploy: {
    projectToken: process.env.CHROMATIC_MY_PROJECT,
  },
};

To learn about additional deployment options, see the Bit Storybook docs.

8. Set Ripple CI secrets with your Chromatic project token

To set up your CI secrets, head over to your organization page (bit.cloud/YOUR_BIT_ORG), and select Settings -> Ripple CI.

Add your secret variables to your organization to make them available for Ripple CI. Add a secret variable named `CHROMATIC_MY_PROJECT` and set it with your Chromatic project token.

Run the following to version your components:

bit tag --message "create storybook app. add a story for the form component"

The following step will build your UI components and Storybook app (component) using Bit’s default CI system, tailored for Bit components. Once done, the components will be hosted on your remote scope on bit.cloud, published, and deployed (the Storybook app).

Once your all set, run the following:

bit export 

Automatic builds and deployments

Bit and Ripple CI will make sure to auto version, build, publish and deploy components when their direct/indirect dependency has been modified.

This will make sure your components are always in-sync with the latest change.

When changing any component that is being documented in the storybook app, the app component itself will also be built, versioned, and deployed — automatically. This will make sure your component documentation is always up to date!