Not showing badges in sidebar

[equinusocio]

Story

import type { Meta, StoryObj } from '@storybook/react';

import { IconButton } from '@/components';

import { Badge } from './badge';

const meta = {
  title: 'Badges/Badge',
  component: Badge,
  args: {
    showBadge: true,
  },
  tags: ['code-only'],
  render: args => (
    <Badge {...args}>
      <IconButton
        aria-label="Enable or disable notifications"
        icon="bell"
        dimension="big"
      />
    </Badge>
  ),
} satisfies Meta<typeof Badge>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default = {
  tags: ['code-only'],
} satisfies Story;

The badge appears only in the toolbar, even if both component and story have the tag. Already tried to put the tag on component only, and story only. Storybook 8.4.3

[dgteles]

Check in main.ts if you have another addons that manipulate the sidebar. If you have, remove them.

[equinusocio]

I'm using only the ones set by storybook vite/ts template, and moving storybook-addon-tag-badges at the end doesn't change the result

  addons: [
    getAbsolutePath('storybook-addon-tag-badges'),
    getAbsolutePath('@storybook/addon-onboarding'),
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-interactions'),
    getAbsolutePath('@storybook/addon-themes'),
  ],

[Fedduh]

I had the same issue. I noticed that when removing my sidebar filters in manager.ts, it did show up.

I have a sidebar filter in manager.ts so it won't display my stories with tag 'chromatic-only'

manager.ts
import { addons } from '@storybook/manager-api';

addons.setConfig({
  sidebar: {
    filters: {
      patterns: (item) => {
        // in the sidebar exclude all items with the tag 'chromatic-only'
        return !item.tags?.includes('chromatic-only');
      },
    },
  },
});

[Fedduh]

I also have for stories that include the meta with documentation (+ stories) but also include some manual .mdx files with code examples. I noticed that for these folders, the tags also don't show up.

(but maybe that's an odd setup I use..)

(for these 'groups' the icon is also a folder, instead of the component square icon)

[Sidnioulz]

Hi @equinusocio, thanks for the report. Not all tags appear in the sidebar. What goes in the sidebar is controlled by the display option of your tagBadges config. So, if you didn't choose to set display: true (always displays, very verbose), or display: ['component'] (displays only for component entries, but not for every story under them), you won't see badges.

Also, when a badge is displayed only for a component entry, the tag must actually be defined on the component (in the meta). Tags defined only on some stories do not bubble up to their component entry.

Could you please share your tagBadges config so I can see what's up?

[Sidnioulz]

Check in main.ts if you have another addons that manipulate the sidebar. If you have, remove them.

FYI I address this situation in https://github.com/Sidnioulz/storybook-addon-tag-badges?tab=readme-ov-file#sidebar-label-customisations. There are a few options to make this addon co-exist with other customisations. Curious to have your feedback on it.

[Sidnioulz]

@Fedduh I've created separate issues for your own reports, thanks for taking the time to share. Please check them out and add a MWE if possible to help me go through them faster!

[equinusocio]

Our manager.ts is pretty simple

import { addons } from '@storybook/manager-api';
import { themes } from '@storybook/theming';

import lualtekTheme from './lualtek-theme';

addons.setConfig({
  theme: { ...themes.dark, ...lualtekTheme },
  sidebar: {
    showRoots: true,
  },
});

We removed the addon since it doesn't work with a basic storybook boilerplate either.

[Sidnioulz]

What version of Storybook are you on? Are you able to share a repo?

…

On Mon, 18 Nov 2024, 17:56 Mattia Astorino, ***@***.***> wrote: Our manager.ts is pretty simple import { addons } from ***@***.***/manager-api';import { themes } from ***@***.***/theming'; import lualtekTheme from './lualtek-theme'; addons.setConfig({ theme: { ...themes.dark, ...lualtekTheme }, sidebar: { showRoots: true, },}); We removed the addon since it doesn't work with a basic storybook boilerplate either. — Reply to this email directly, view it on GitHub <#15 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABG7GYJZECUR4YZ3QXQZ4WD2BIL3VAVCNFSM6AAAAABRYVS5A6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBTGU4TKOJSHE> . You are receiving this because you commented.Message ID: ***@***.***>

[equinusocio]

Storybook 8.4.4, the repo is private, unfortunately, but we just setup their storybook vite + ts + react boilerplate

[Sidnioulz]

@equinusocio I've just set up a Storybook 8.4.4 React+Vite+TS repo, installed storybook-addon-tag-badges 1.2.0, added it to addons in .storybook/main.ts and added a code-only tag to a random story and it shows up in the sidebar.

There is something about your setup that you haven't shared yet and that is interfering. Wanna hop onto a call and show me?

[equinusocio]

My repo is not public i can't share a link, but I can share my storybook config files:

preview.ts

import '@lualtek/themes/web';
import '../packages/react-components/src/core.css';
import './overrides.css';

import { withThemeByDataAttribute } from '@storybook/addon-themes';
import type { ReactRenderer } from '@storybook/react';
import { Preview } from '@storybook/react';
import { themes } from '@storybook/theming';

import lualtekTheme from './lualtek-theme';

const preview: Preview = {
  decorators: [
    withThemeByDataAttribute<ReactRenderer>({
      themes: {
        auto: 'auto',
        light: 'light',
        dark: 'dark',
      },
      defaultTheme: 'dark',
    }),
  ],
  parameters: {
    backgrounds: { disable: true },
    docs: {
      theme: { ...themes.dark, ...lualtekTheme },
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

manager.ts

import { addons } from '@storybook/manager-api';
import { themes } from '@storybook/theming';

import lualtekTheme from './lualtek-theme';

addons.setConfig({
  theme: { ...themes.dark, ...lualtekTheme },
  sidebar: {
    showRoots: true,
  },
});

main.ts

/* eslint-disable no-param-reassign */
import { dirname, join, resolve } from 'node:path';

import type { StorybookConfig } from '@storybook/react-vite';

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): string {
  return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
  stories: ['../packages/**/src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    getAbsolutePath('@storybook/addon-onboarding'),
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-interactions'),
    getAbsolutePath('@storybook/addon-themes'),
  ],
  framework: {
    name: getAbsolutePath('@storybook/react-vite'),
    options: {},
  },
  docs: {
    autodocs: true,
  },
  typescript: {
    check: false,
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: prop => (prop.parent ? !prop.parent.fileName.includes('node_modules') : true),
    },
  },
  viteFinal: async (config) => {
    if (config && config.resolve && config.resolve.alias) {
      config.resolve.alias['@/components'] = resolve(__dirname, '../packages/react-components/src');
      config.resolve.alias['@/charts'] = resolve(__dirname, '../packages/charts/src');
      return config;
    }

    return config;
  },
};
export default config;

[Sidnioulz]

@equinusocio try that instead?

// .storybook/manager.ts
import { addons } from '@storybook/manager-api';
import { themes } from '@storybook/theming';
import { renderLabel } from 'storybook-addon-tag-badges'

import lualtekTheme from './lualtek-theme';

addons.setConfig({
  theme: { ...themes.dark, ...lualtekTheme },
  sidebar: {
    renderLabel,
    showRoots: true,
  },
});

[equinusocio]

Yep that fixed the missing label, but renderLabel throws an eslint error

The issue seems to be caused by the sidebar configuration object, when it is declared, the plugin breaks (or maybe is SB not merging the sidebar configurations).

I solved with this code

import { addons } from '@storybook/manager-api';
import { themes } from '@storybook/theming';

import lualtekTheme from './lualtek-theme';

addons.setConfig({
  theme: { ...themes.dark, ...lualtekTheme },
  sidebar: {
    ...addons.getConfig().sidebar,
    showRoots: true,
  },
});

This should be marked as a bug, not a question(?). At least there should be a mention of this in the installation process 👍

[Sidnioulz]

RE: the ESLint error, I don't have it locally (no unsafe assignment reported), so I'd love to see what the exact error message is, maybe alongside your tsconfig and eslint config?

---

This isn't a bug in this addon. It's a general limitation of addons.setConfig. When you override it in your manager, anything defined by addons will be overridden. To prevent that, you need to either do what you did by reading the previous config and merging the changes, or re-add renderLabel.

[equinusocio]

Ok thanks! Can you mention this in the doc/readme to avoid future similar issues?

[Sidnioulz]

Thanks for bringing this up @equinusocio. I did add README doc since you opened that issue, but I'll develop it further the next time the issue comes up.

[equinusocio]

I don't get why we need to use renderLabel or merge previous sidebar config while all other examples in the README file show the same setConfig with custom sidebar; even in those case renderLabel should be present (or at least the previous sidebar merging).

[Sidnioulz]

There could be a bug in https://github.com/storybookjs/storybook/blob/next/code/core/src/manager-api/modules/layout.ts#L391 where addon-injected changes aren't part of the initial store state and some data gets erased through setConfig, which would explain why some things seem to merge, and others not.

I'll ask around.