Specify available components output

[oliverschuerch]

To have a better overview, which component is available in which forms (for example as CSS-only component, as web-component, ...), we should add the tags property to all of our components in its story file meta object.

// accordion.stories.ts
const meta: Meta = {
  id: '4d1b4185-e04d-494a-ab38-2b56c1778b0b',
  title: 'Components/Accordion',
  parameters: {
    tags: ['WC', 'NG'],
  }
  ...
};

My suggestion is to add them like so:

• CSS for CSS-only components
• WC for web-components
• NG for angular-components
• etc.

After that, we are able to use the renderLabel method in manager.tsx to add some flags/svg behind a components name:

// manager.tsx
addons.setConfig({
  ...
  sidebar: {
    collapsedRoots: [],
    renderLabel: item => {
      // implement our custom logic here
      return <div>item.name</div>;
    }
  }
});

[oliverschuerch]

There is an issue with the item parameter provided by the method renderLabel: storybookjs/storybook#25998

As long as this is not solved, we're not able to use the tags parameter as we like.

[oliverschuerch]

I've opened a feature request to make this possible: storybookjs/storybook#26518

[oliverschuerch]

Wont do because it's not possible by storybook.