feat: Add support for group entries

Sidnioulz · Jan 16, 2025 · 44a5d5c · 44a5d5c
1 parent 73b8acc
commit 44a5d5c
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 5 deletions.
diff --git a/.storybook/manager.tsx b/.storybook/manager.tsx
@@ -31,7 +31,7 @@ addons.setConfig({
         tooltip: 'This component can catch flies!',
       },
       display: {
-        sidebar: ['component'],
+        sidebar: ['component', 'group'],
         toolbar: false,
       },
     },

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -28,6 +28,7 @@ export const Sidebar: FC<SidebarProps> = ({ children, item }) => {
 
   if (
     item.type !== 'component' &&
+    item.type !== 'group' &&
     item.type !== 'docs' &&
     item.type !== 'story'
   ) {
@@ -38,7 +39,6 @@ export const Sidebar: FC<SidebarProps> = ({ children, item }) => {
   if (item.parent) {
     const parentItem = api.resolveStory(item.parent)
     if (parentItem && parentItem.type !== 'root') {
-      // @ts-expect-error group entry tags hasn't yet been merged on SB.
       parentTags = parentItem.tags
     }
   }

diff --git a/src/renderLabel.tsx b/src/renderLabel.tsx
@@ -6,6 +6,7 @@ import { Sidebar } from './components/Sidebar'
 export function renderLabel(item: API_HashEntry) {
   if (
     item.type !== 'story' &&
+    item.type !== 'group' &&
     item.type !== 'docs' &&
     item.type !== 'component'
   ) {

diff --git a/src/stories/Page.stories.ts b/src/stories/Page.stories.ts
@@ -4,7 +4,7 @@ import { within, userEvent } from '@storybook/test'
 import { Page } from './Page'
 
 const meta: Meta<typeof Page> = {
-  title: 'Example/Page',
+  title: 'Example/Page/Component',
   component: Page,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout

diff --git a/src/stories/PageLayout.mdx b/src/stories/PageLayout.mdx
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Example/Page/Layout" tags={['frog', 'new']} />
+
+# Layout
+
+This is a page about page layouts.
diff --git a/src/useBadgesToDisplay.ts b/src/useBadgesToDisplay.ts
@@ -2,7 +2,11 @@ import { useMemo } from 'react'
 
 import { DisplayOutcome, shouldDisplay } from './utils/display'
 import { matchTags } from './utils/tag'
-import { API_ComponentEntry, API_LeafEntry } from '@storybook/types'
+import {
+  API_ComponentEntry,
+  API_GroupEntry,
+  API_LeafEntry,
+} from '@storybook/types'
 import { TagBadgeParameters } from './types/TagBadgeParameters'
 import { BadgeOrBadgeFn } from './types/Badge'
 
@@ -11,7 +15,10 @@ interface UseBadgesToDisplayOptions {
   parameters: TagBadgeParameters
   parentTags?: string[]
   tags: string[]
-  type: API_ComponentEntry['type'] | API_LeafEntry['type']
+  type:
+    | API_ComponentEntry['type']
+    | API_GroupEntry['type']
+    | API_LeafEntry['type']
 }
 
 type BadgesToDisplay = { badge: BadgeOrBadgeFn; tag: string }[]