alfresco-ng2-components/docs/storybook/configuring-new-lib.md

Configuring Storybook for a New Library

This guide outlines the steps to configure Storybook for a newly created Nx library within the repository.

Prerequisites

Ensure that the library has been created using the Nx generator.

Configuration Steps

1. Generate Storybook Configuration

Run the Nx generator to add Storybook configuration to your library:

nx g @nx/angular:storybook-configuration [project-name]

Replace [project-name] with the name of your library (e.g., my-new-lib).

2. Update project.json

Verify that the project.json file of your library has the storybook and build-storybook targets correctly configured.

3. Update .storybook/main.ts

Update the .storybook/main.ts file in your library to extend the root configuration and handle static assets correctly.

import { fileURLToPath } from 'node:url';
import { dirname } from 'node:path';
import type { StorybookConfig } from '@storybook/angular';
import rootMain from '../../../.storybook/main'; // Adjust path to root

const config: StorybookConfig = {
    ...rootMain,
    stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
    staticDirs: [
        // Add static directories if needed, e.g., for i18n or assets
        { from: '../src/lib/i18n', to: 'assets/adf-my-lib/i18n' }
    ],
    framework: {
        name: getAbsolutePath('@storybook/angular'),
        options: {}
    }
};

export default config;

function getAbsolutePath(value: string): any {
    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
}

4. Update .storybook/preview.ts

Update .storybook/preview.ts to import the root preview configuration and add any library-specific tags.

import { type Preview } from '@storybook/angular';
import rootPreview from '../../../.storybook/preview'; // Adjust path to root

const preview: Preview = {
    ...rootPreview,
    tags: ['autodocs']
};

export default preview;

5. Update .storybook/tsconfig.json

Ensure the tsconfig.json in the .storybook directory extends the main tsconfig.json and includes/excludes the correct files.

{
    "extends": "../../../tsconfig.json",
    "compilerOptions": {
        "emitDecoratorMetadata": true
    },
    "exclude": ["../**/*.spec.ts", "../**/*.mock.ts", "../**/test.ts", "../**/*.module.ts"],
    "include": ["../src/**/*", "*.ts"]
}

6. Update Root lib/stories

To include the new library's stories in the aggregated Storybook (nx run stories:storybook), you need to update the lib/stories/.storybook/main.ts file.

1. Add Stories Pattern: Add the path to your new library's stories in the stories array.
2. Add Static Assets: If your library has static assets (like i18n files), add them to the staticDirs array.

Example update in lib/stories/.storybook/main.ts:

// ...
stories: [
    // ... existing entries
    '../../my-new-lib/**/*.stories.ts'
],
staticDirs: [
    // ... existing entries
    { from: '../../my-new-lib/src/lib/i18n', to: 'assets/adf-my-lib/i18n' }
],
// ...

Useful Links

• Configure Storybook
• Framework Configuration (main.ts)
• Story Rendering (preview.ts)