Adding a New Story

This guide describes how to create and structure a new story for a component in the Alfresco Angular Components repository.

File Location

Story files should be co-located with the component they are documenting. This keeps the stories close to the source code and makes them easier to find and maintain.

Naming Convention

The file should be named using the pattern: [component-name].stories.ts

For example, if your component is my-component.component.ts, the story file should be my-component.component.stories.ts.

Basic Structure

A typical story file includes:

Imports for Meta, Story, moduleMetadata from @storybook/angular.
The component configuration using applicationConfig to provide necessary dependencies.
Usage of provideStoryCore() (or other library-specific providers) to set up the environment.

Example

Here is an example of how to set up a basic story for a component.

import { Meta, StoryObj, moduleMetadata, applicationConfig } from '@storybook/angular';
import { MyComponent } from './my.component';
import { provideStoryCore } from '@alfresco/adf-core/testing'; // Adjust import based on your library location
import { CommonModule } from '@angular/common';

const meta: Meta<MyComponent> = {
    title: 'Core/My Component',
    component: MyComponent,
    decorators: [
        applicationConfig({
            providers: [...provideStoryCore()]
        }),
        moduleMetadata({
            imports: [MyComponent]
        })
    ],
    argTypes: {
        // Define controls for your inputs here
        label: { control: 'text' },
        isDisabled: { control: 'boolean' }
    }
};

export default meta;
type Story = StoryObj<MyComponent>;

export const Default: Story = {
    args: {
        label: 'Click me',
        isDisabled: false
    }
};

export const Disabled: Story = {
    args: {
        label: 'Disabled',
        isDisabled: true
    }
};

Dependencies

The provideStoryCore() function helper is essential for setting up the common providers required by ADF components, such as translation services, authentication mocks, and app configuration.

If your component requires specific services not included in provideStoryCore(), you should add them to the providers array in the applicationConfig.

2.7 KiB Raw Permalink Blame History