How to display tags in custom DocsPage

[rpasechnikov]

Summary

Hi all,

I'm looking at the following example and trying to figure out the tags that have been added to a story, at the top of top of the page - ideally under the title.

This is the example from above:

import React from 'react';
import { ArgsTable, Description, Primary, Stories, Subtitle, Title } from '@storybook/addon-docs';
import { DocgenButton } from '../../components/DocgenButton';

export default {
  title: 'Addons/Docs/stories docs blocks',
  component: DocgenButton,
  parameters: {
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description />
          <Primary />
          <ArgsTable />
          <Stories />
        </>
      ),
    },
  },
};

I really just would like to pass a context or tags down to the custom DocsPage, but it doesn't seem to be supported at this stage.

Thanks!

Additional information

const CustomDocs = (context) => {
  console.log('context', context);

  return (
  <>
    {/* {renderTags(context.tags)}  */}
    <Title />
    <Subtitle />
    <Description />
    <Primary />
    <Controls />
    <Stories />
  </>);
}

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
       color: /(background|color)$/i,
       date: /Date$/i,
      },
    },
    docs: {
      page: (context) => CustomDocs (context),
    }
  },
  decorators: [
    (Story, {tags}) => (
        // Can render tags per Story, but that's not what I want
        // {renderTags(context.tags)}
        <Story />
    )
  ]
};

Create a reproduction

No response

[rpasechnikov]

Hi all,

Spent a few more hours on this and got this working afterall. This seems to be exactly what I was after: https://storybook.js.org/docs/api/doc-blocks/doc-block-useof

Here's an example to demonstrate:

type TagConfig = {
  colour?: string
}

const tagConfigs: { [key: string]: TagConfig } = {
  'Tag 1': {
    colour: '#0098ff',
  },
  'Tag 2': {
    colour: '#00cc00',
  }
};

const Tags: React.FC<{tags: string[]}> = ({tags}) => {
  const ignoreTags = ['dev', 'test', 'autodocs'];
  const displayTags = tags.filter(tag => !ignoreTags.includes(tag));

  return (
    <div className={styles.tagContainer}>
      {displayTags.map(tag => <Tag key={tag} tag={tag} colour={tagConfigs[tag]?.colour} />)}
    </div>
  );
}

const Tag: React.FC<{tag: string, colour?: string}> = ({ tag, colour }) => {
  if (!colour) {
    return <div className={styles.tag}>{tag}</div>;
  }

  return <div className={styles.tag} style={{backgroundColor: colour}}>{tag}</div>
}

const StoryTagsBlock = () => {
  const resolvedOf = useOf('meta');

  if (resolvedOf.type === 'meta') {
      const tags = resolvedOf.preparedMeta.moduleExport?.tags;
      return <Tags tags={tags} />
  }

  return null;
};

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
       color: /(background|color)$/i,
       date: /Date$/i,
      },
    },
    docs: {
      page: () => (
        <>
          <StoryTagsBlock />
          <Title />
          <Subtitle />
          <Description />
          <Primary />
          <Controls />
          <Stories />
        </>
      ),
    }
  },
  decorators: [
    (Story) => (
        <Story />
    )
  ]
};

And here is a sample story that uses that:

const meta = {
  title: 'MyComponent',
  component: MyComponent,
  tags: ['autodocs', Tag 1'],
  args: {
    // args....
  },

} satisfies Meta<typeof MyComponent>;