feat(storybook): restore a11y (and other) badges in toolbar (#1042)

* test(storybook): add badge parameter resolver

* feat(storybook): render badges in toolbar

Author: pawelgrimm

.storybook/badges/BadgesTool.tsx

@@ -0,0 +1,57 @@
+import React, { memo, useMemo } from 'react'
+import type { CSSProperties } from 'react'
+import { useParameter } from 'storybook/manager-api'
+
+import { resolveBadges } from './badges'
+import { BADGES_CONFIG_PARAMETER, BADGES_PARAMETER, TOOL_ID } from './constants'
+
+const containerStyle: CSSProperties = {
+    alignItems: 'center',
+    display: 'inline-flex',
+    gap: '4px',
+    marginInline: '6px',
+}
+
+const badgeStyle: CSSProperties = {
+    alignItems: 'center',
+    border: '1px solid currentColor',
+    borderRadius: '3px',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    fontWeight: 600,
+    minHeight: '20px',
+    padding: '2px 6px',
+    whiteSpace: 'nowrap',
+}
+
+const emptyBadges: unknown[] = []
+const emptyBadgesConfig: Record<string, unknown> = {}
+
+export const BadgesTool = memo(function BadgesTool() {
+    const badgesParameter = useParameter(BADGES_PARAMETER, emptyBadges)
+    const badgesConfigParameter = useParameter(BADGES_CONFIG_PARAMETER, emptyBadgesConfig)
+
+    const badges = useMemo(
+        () => resolveBadges(badgesParameter, badgesConfigParameter),
+        [badgesParameter, badgesConfigParameter],
+    )
+
+    if (badges.length === 0) {
+        return null
+    }
+
+    return (
+        <div
+            key={TOOL_ID}
+            aria-label="Story badges"
+            style={containerStyle}
+            title={badges.map(({ title }) => title).join(', ')}
+        >
+            {badges.map(({ id, title, styles }, index) => (
+                <span key={`${id}-${index}`} style={{ ...badgeStyle, ...styles }}>
+                    {title}
+                </span>
+            ))}
+        </div>
+    )
+})

.storybook/badges/badges.test.ts

@@ -0,0 +1,72 @@
+import { resolveBadges } from './badges'
+
+describe('resolveBadges', () => {
+    it('resolves configured badges in story order', () => {
+        expect(
+            resolveBadges(['accessible', 'deprecated'], {
+                accessible: {
+                    title: 'Accessible',
+                    styles: { color: 'green' },
+                },
+                deprecated: {
+                    title: 'Deprecated',
+                    styles: { color: 'red' },
+                },
+            }),
+        ).toEqual([
+            {
+                id: 'accessible',
+                title: 'Accessible',
+                styles: { color: 'green' },
+            },
+            {
+                id: 'deprecated',
+                title: 'Deprecated',
+                styles: { color: 'red' },
+            },
+        ])
+    })
+
+    it('filters unknown badges and invalid badge entries', () => {
+        expect(
+            resolveBadges(['accessible', 'missing', 42, 'untitled'], {
+                accessible: {
+                    title: 'Accessible',
+                },
+                untitled: {
+                    styles: { color: 'orange' },
+                },
+            }),
+        ).toEqual([
+            {
+                id: 'accessible',
+                title: 'Accessible',
+                styles: undefined,
+            },
+        ])
+    })
+
+    it('treats invalid parameter shapes as empty', () => {
+        expect(resolveBadges(undefined, {})).toEqual([])
+        expect(resolveBadges('accessible', {})).toEqual([])
+        expect(resolveBadges(['accessible'], undefined)).toEqual([])
+        expect(resolveBadges(['accessible'], [])).toEqual([])
+    })
+
+    it('ignores non-object styles', () => {
+        expect(
+            resolveBadges(['accessible'], {
+                accessible: {
+                    title: 'Accessible',
+                    styles: 'color: green',
+                },
+            }),
+        ).toEqual([
+            {
+                id: 'accessible',
+                title: 'Accessible',
+                styles: undefined,
+            },
+        ])
+    })
+})

.storybook/badges/badges.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties } from 'react'
+
+type UnknownRecord = Record<string, unknown>
+
+type BadgeConfig = {
+    title?: unknown
+    styles?: unknown
+}
+
+type ResolvedBadge = {
+    id: string
+    title: string
+    styles: CSSProperties | undefined
+}
+
+function isRecord(value: unknown): value is UnknownRecord {
+    return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function isBadgeConfig(value: unknown): value is BadgeConfig {
+    return isRecord(value)
+}
+
+function resolveStyles(styles: unknown): CSSProperties | undefined {
+    return isRecord(styles) ? (styles as CSSProperties) : undefined
+}
+
+function resolveBadges(badges: unknown, badgesConfig: unknown): ResolvedBadge[] {
+    if (!Array.isArray(badges) || !isRecord(badgesConfig)) {
+        return []
+    }
+
+    return badges.flatMap((badge) => {
+        if (typeof badge !== 'string') {
+            return []
+        }
+
+        const badgeConfig = badgesConfig[badge]
+
+        if (!isBadgeConfig(badgeConfig) || typeof badgeConfig.title !== 'string') {
+            return []
+        }
+
+        return [
+            {
+                id: badge,
+                title: badgeConfig.title,
+                styles: resolveStyles(badgeConfig.styles),
+            },
+        ]
+    })
+}
+
+export { resolveBadges }
+export type { ResolvedBadge }

.storybook/badges/constants.ts

@@ -0,0 +1,4 @@
+export const ADDON_ID = 'reactist/badges'
+export const TOOL_ID = `${ADDON_ID}/tool`
+export const BADGES_PARAMETER = 'badges'
+export const BADGES_CONFIG_PARAMETER = 'badgesConfig'

.storybook/badges/index.ts

@@ -0,0 +1,2 @@
+export { BadgesTool } from './BadgesTool'
+export { ADDON_ID, TOOL_ID } from './constants'

.storybook/manager.ts

@@ -1,6 +1,16 @@
-import { addons } from 'storybook/manager-api'
+import { addons, types } from 'storybook/manager-api'
+import { ADDON_ID, BadgesTool, TOOL_ID } from './badges'
 import theme from './theme'
 
 addons.setConfig({
     theme,
 })
+
+addons.register(ADDON_ID, () => {
+    addons.add(TOOL_ID, {
+        title: 'Badges',
+        type: types.TOOL,
+        match: ({ viewMode }) => viewMode === 'story' || viewMode === 'docs',
+        render: BadgesTool,
+    })
+})