Add guidance on importing best practices

[leerob]

Hey y'all! 👋

I spend most of my time working on a component library. It's closed source, but it's using React + Storybook inside a Lerna Monorepo.

Anyways, one thing that I've learned that I don't see reflected here (or in the consumers of the SDS) is how to properly import for the smallest bundle size.

If you import your component like this:

import {Button} from '@storybook/design-system';

Then it's pulling in the entire design system. Which, might be okay, but it also might not. Thus, you can change it to something like this.

import {Button} from '@storybook/design-system/dist/components/Button';

Which then only imports that specific file. That works, but then you can't combine imports into a single line. Thus, Ant Design created babel-plugin-import to translate dist/components/Button to the correct location.

An example Babel config might be this:

module.exports = {
    plugins: [
        [
            'import',
            {
                libraryDirectory: 'dist/components',
                libraryName: '@storybook/design-system'
            }
        ]
    ]
};

Should there be guidance here on what consumers should do to properly import (such as Ant Design has done)?

Cheers 🍻

[jsomsanith]

Great point. But if we want to enforce that, wouldn’t it be better to remove the index, and add files at root that simply import/export a single component ? root |_ Avatar.js (import the real Avatar and export it) |_ Button.js (import the real Button and export it) |_ ....

With that we can just import from ˋ@storybook/design-system/Avatar` without knowing the file architecture.

[leerob]

@jsomsanith With that approach, the consumer would still need multiple lines for imports from the same package.

import {Avatar} from '@storybook/design-system/Avatar';
import {Button} from '@storybook/design-system/Button';

When you use that Babel plugin, you can simply do this.

import {Avatar, Button} from '@storybook/design-system';

Which is really helpful when you're dealing with a large component:

import {Avatar, Badge, Button, Checkbox, Highlight} from '@storybook/design-system';

[kylemh]

https://github.com/storybookjs/design-system/pull/64

Working to resolve this.