In the vast world of web development, there are numerous articles that show how to use Storybook with Angular. However, many of them only focus on the application itself, not the library, or are outdated. In this comprehensive guide, we'll explore how to integrate Angular version 16 libraries with the latest Storybook and Chromatic.

Link to repository: https://github.com/Goldscirer/angular-lib-storybook

Step 1: Create the Library

First, let's create a new library using the same steps as in the article about creating a library:

1ng new tutorial-workspace

Follow the prompts, selecting 'Yes' for Angular routing and choosing 'SCSS' for the stylesheet format. Then, navigate to the tutorial-workspace folder and generate the library:

1ng generate library my-new-lib

Step 2: Create the Component

Next, we'll create a module and a component for our custom button:

1ng generate module custom-button --project=my-new-lib
2cd /tutorial-workspace/projects/my-new-lib/src/lib
3ng g c custom-button/custom-button --flat

Now, update the component's HTML with the button code:

1<button type="button">{{label}}</button>

Add the following CSS to style the button:

1button {
2  background-color: #02784f !important;
3  border-radius: 5px;
4  font-size: 18px;
5  font-family: 'Source Sans Pro', sans-serif;
6  padding: 6px 18px;
7}

And change the custom-button.module.ts to:

1@NgModule({
2  declarations: [CustomButtonComponent],
3  imports: [CommonModule],
4  exports: [CustomButtonComponent]
5})
6export class CustomButtonModule { }
7

In the TypeScript file, add Input:

1export class CustomButtonComponent {
2  @Input() label: string = 'Send';
3}
4

Update the library's API (public-api.ts) with the following exports:

1export * from './lib/custom-button/custom-button.component';
2export * from './lib/custom-button/custom-button.module';

In the main project, in tutorial-workspace/src, use the new component from the library in app.component.html:

1<lib-custom-button></lib-custom-button>

And remember to add the import in app.module.ts. Test the component by building the library and starting the test application. Remember to execute the commands from the main folder tutorial-workspace:

1ng build
2npm start

You now have a ready library with a component.

Step 3: Install Storybook

Next, we need to install Storybook:

1npm install @storybook/angular --save-dev

After installing, initialize Storybook in our library:

1npx sb init
2

You can also refer to the original Storybook installation documentation here.

Choose my-new-lib as the project where you want to initialize Storybook and agree to the default documentation mode. Unfortunately, an error may occur during initialization, but it seems that everything else still works correctly, so don't worry about this error.

In our library, a .storybook folder will appear. After configuring Storybook, make sure the .storybook/tsconfig.json file is extending the library tsconfig.lib.json.

Now you can run Storybook with examples:

1ng run my-new-lib:storybook

Step 4: Creating Your Own "Stories" in Storybook

Add a file custom-button.stories.ts in projects/my-new-lib/src/lib/custom-button/ with the following content:

1import {Meta, StoryObj} from "@storybook/angular";
2import { CustomButtonComponent } from "./custom-button.component";
3
4const meta: Meta<CustomButtonComponent> = {
5  title: 'Custom button',
6  component: CustomButtonComponent,
7  excludeStories: /.*Data$/,
8  tags: ['autodocs'],
9  render: (args: CustomButtonComponent) => ({
10    props: { ...args },
11  }),
12};
13
14export default meta;
15type Story = StoryObj<CustomButtonComponent>;
16export const Default: Story = {
17  args: {
18    label: 'Button',
19  },
20};

Then, in the main.ts file in the .storybook folder, change the stories path:

1stories: ['../src/lib/**/*.stories.ts'],

Now you can run Storybook with the command you already know:

1ng run my-new-lib:storybook

Hooray! You have a working Storybook, and with the label live, you can change its name. This is just one of the many features of Storybook.

#Step 5: Chromatic Now I'll show you how to fully utilize the potential of Storybook, especially in a team, where Chromatic makes work much easier.

First, build the application:

1ng run tutorial-lib:build-storybook

A built Storybook application will appear in the dist folder.

Now we'll upload our application to Chromatic. If you're interested in Chromatic's documentation, you can find it here.

Go to Chromatic's website and create an account, preferably using GitHub. This way, you'll have access to your repositories. Don't forget to commit and upload your project to GitHub.

After creating an account, choose to create a project through "choose from GitHub" and then select the repository where you uploaded our project. Follow Chromatic's instructions to install and publish it. Remember to replace the token with the one generated by Chromatic, and it's best to copy it directly from them.

1npx chromatic --project-token=your_token

Unfortunately, their script may not work for you, and according to the documentation, you can add your script with the build as we did earlier. Remember that you must have the Storybook project built using:

1ng run tutorial-lib:build-storybook
2npx chromatic --project-token=your_token -d dist/storybook/my-new-lib/

Answer "yes" to add the script to your package.json. Remember that your token is there, so if you commit to GitHub and have a public repository, it will be visible to everyone.

During publishing, you should see a link to your build application in the console. TaDa! You did it! Now you can fully use Chromatic.

Conclusion:

This guide provides a step-by-step process to integrate Angular 16 libraries with Storybook and Chromatic. By following these instructions, developers can enhance their workflow and create more interactive and visually appealing components. Whether you're working on a personal project or collaborating with a team, these tools offer a streamlined approach to building and testing Angular components. Happy coding!