How to Write Better Storybook Stories (using controls)

To leverage the full power of Anima storybook integration (i.e. generating Figma component with variants from your Storybook stories), we recommend using controls in your stories. Here is our best recommendation for writing stories:

1. Specify `ArgTypes` to define the props of your component

Try to set control type of select for props that have a limited number of values
Example:

// Button.stories.js|jsx|ts|tsx 

//... 

export default { 
    // ... 
    argTypes: { 
        // ... 
        variant: { 
            control: { 
                type: 'select', 
                options: ['primary', 'secondary', 'tertiary'],
            }, 
        }, 
    }, 
};

2. Use single story per component

Instead of creating a story for each variant of a component, it is preferable to create just one story and use the args property to define the default values of your props.

This will make it easier to find components to generate in Figma with the Anima plugin.

You can achieve this in two ways:

2.1. Name your single story Default
So the way it appears in Figma is as Components/Button/Default so that we can ignore the "Default" and just use the parent folder name as the component name in Figma.

// Button.stories.js|jsx|ts|tsx 

import { Button } from './Button'; 

export default { 
    title: 'Components/Button', 
    component: Button, 
    variant: { 
        control: { 
            type: 'select', 
            options: ['primary', 'secondary', 'tertiary'], 
        }, 
    }, 
}; 

export const Default = () => <Button {...args} />; 

Default.args = { 
    variant: 'primary', 
    label: 'Button',
};

2.2. Use the single story hoisting feature from Storybook (more info here)
So the way it appears in Figma is as Components/Button

// Button.stories.js|jsx|ts|tsx 

// import the Button component as a different name 

import { Button as Component } from './Button'; 

export default { 
    title: 'Components/Button', 
    component: Component, // use the Button component as the component
    variant: { 
        control: { 
            type: 'select', 
            options: ['primary', 'secondary', 'tertiary'], 
        }, 
    }, 
}; 

// This is the only named export in the file, and it matches the
component name 

export const Button = () => <Component {...args} />;

Button.args = { variant: 'primary', label: 'Button', };

1. Specify ArgTypes to define the props of your component

2. Use single story per component

2.1. Name your single story Default

2.2. Use the single story hoisting feature from Storybook (more info here)

1. Specify `ArgTypes` to define the props of your component

2.1. Name your single story `Default`