Addon essentials

[shilman]

Issue: #5731

What I did

• Add a preset to addon-knobs that automatically installs its decorator (unless disabled)
• Add addon-essentials, a curated set of addons:
  • w/o presets: actions, backgrounds, links, viewport
  • w/ presets: knobs, docs (to be removed before release)
• Add a sample app cra-ts-essentials that demonstrates out-of-box behavior
• Warn to let users know that there may be overlapping configuration if any of its addons are detected in their app

How to test

See the addon-essentials README for how to configure, and cra-ts-essentials for a test environment.

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/c5tj9j6h4
🌍 Preview: https://monorepo-git-5731-addon-essentials-preset-function.storybook.now.sh

[tmeasday]

LGTM with one change

[tmeasday]

Let's do a triconfig setup?

[shilman]

@ndelangen @tmeasday I tried to upgrade cra-ts-essentials to triconfig by replacing the existing config/presets with main.js:

module.exports = {
  presets: [
    '@storybook/preset-create-react-app',
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: null,
        knobs: { addDecorator: false },
      },
    },
  ],
  stories: ['../src/stories/**/*.stories.(js|ts|tsx)'],
};

However this produces an error. Am I doing something wrong? I filed another issue about triconfig support for the CRA preset storybookjs/presets#71 but I don't know whether it's the problem.

Here's the error for completeness:

ERROR in ./.storybook/generated-entry.js
Module build failed (from /Users/shilman/projects/baseline/storybook/node_modules/babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/Users/shilman/projects/baseline/storybook/node_modules/babel-plugin-named-asset-import/index.js",
    "options": {
      "loaderMap": {
        "svg": {
          "ReactComponent": "@svgr/webpack?-prettier,-svgo![path]"
        }
      }
    },
    "dirname": "/Users/shilman/projects/baseline/storybook/examples/cra-ts-essentials",
    "ownPass": false,
    "file": {
      "request": "/Users/shilman/projects/baseline/storybook/node_modules/babel-plugin-named-asset-import/index.js",
      "resolved": "/Users/shilman/projects/baseline/storybook/node_modules/babel-plugin-named-asset-import/index.js"
    }
  },
  {
    "alias": "/Users/shilman/projects/baseline/storybook/node_modules/babel-plugin-named-asset-import/index.js",
    "options": {
      "loaderMap": {
        "svg": {
          "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]"
        }
      }
    },
    "dirname": "/Users/shilman/projects/baseline/storybook/examples/cra-ts-essentials",
    "ownPass": false,
    "file": {
      "request": "/Users/shilman/projects/baseline/storybook/node_modules/babel-plugin-named-asset-import/index.js",
      "resolved": "/Users/shilman/projects/baseline/storybook/node_modules/babel-plugin-named-asset-import/index.js"
    }
  }
]

[shilman]

@zol I updated config mechanism & README per your feedback.
It's a better design and good to go!

The triconfig issue remains @ndelangen @tmeasday

[zol]

👍