@payfit/unity-illustrations 2.55.21 → 2.55.23

package/src/docs/blocks/IllustrationLibrary.tsx

@@ -1,179 +0,0 @@
-import React, { memo, useCallback, useMemo, useState } from 'react'
-
-import { UnityThemeProvider } from '@payfit/unity-themes'
-
-import { LazyIllustration } from '../../components/lazy-illustration/LazyIllustration'
-import type { UnityIllustrationName } from '../../generated/illustrationAssets'
-
-import { illustrationNames } from '../../generated/illustrationAssets'
-import type { BrandSupportFilter } from './BrandSupportFilter'
-
-import {
-  BrandSupportBadge,
-  useBrandSupportRecords,
-} from './BrandSupportBadge'
-import {
-  BrandSupportFilterControl,
-  matchesBrandSupportFilter,
-} from './BrandSupportFilter'
-import { useStorybookTheme } from './useStorybookTheme'
-
-const debounce = <P = unknown,>(
-  callback: (...args: P[]) => unknown,
-  wait: number,
-) => {
-  let timeoutId: number
-  return (...args: P[]) => {
-    if (timeoutId) {
-      window.clearTimeout(timeoutId)
-    }
-    timeoutId = window.setTimeout(() => {
-      callback(...args)
-    }, wait)
-  }
-}
-
-const IllustrationItem = memo(
-  ({
-    children,
-    name,
-    copyText,
-    onClick,
-  }: React.PropsWithChildren<{
-    name: UnityIllustrationName
-    copyText: string
-    onClick: () => void
-  }>) => {
-    return (
-      <li>
-        <button
-          onClick={onClick}
-          className="uy:group uy:flex uy:h-full uy:w-full uy:flex-col uy:gap-150 uy:p-200 uy:transition-all uy:rounded-lg uy:bg-surface-neutral uy:shadow-raising uy:hover:shadow-flying uy:focus-visible:shadow-floating uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-ring uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:border-border-form-hover uy:focus-visible:bg-surface-neutral-low-hover uy:border uy:border-solid uy:border-border-neutral"
-        >
-          <figure className="uy:flex uy:h-full uy:w-full uy:flex-col uy:items-center uy:gap-150">
-            <figcaption className="uy:w-full uy:text-left">
-              <span className="uy:block uy:w-full uy:truncate uy:font-mono uy:text-50 uy:leading-normal uy:text-content-neutral">
-                {name}
-              </span>
-            </figcaption>
-            <div className="uy:flex uy:py-200 uy:w-[90%] uy:items-center uy:justify-center uy:transition-all uy:group-hover:scale-110">
-              {children}
-            </div>
-            <div className="uy:mt-auto uy:flex uy:w-full uy:items-center uy:justify-between uy:gap-100">
-              <BrandSupportBadge name={name} />
-              <span className="uy:typography-action-small uy:bg-transparent uy:theme-legacy:text-content-primary uy:theme-rebrand:text-content-neutral uy:theme-rebrand:underline uy:whitespace-nowrap">
-                {copyText}
-              </span>
-            </div>
-          </figure>
-        </button>
-      </li>
-    )
-  },
-)
-
-const IllustrationLibrary = ({
-  filter,
-}: {
-  filter?: 'filled' | 'outlined'
-}) => {
-  const theme = useStorybookTheme()
-  const [query, setQuery] = useState<string>('')
-  const [copiedIllustration, setCopiedIllustration] = useState<string | null>(
-    null,
-  )
-  const [brandFilter, setBrandFilter] = useState<BrandSupportFilter>('all')
-
-  const illustrationList = useMemo(() => {
-    const predicate =
-      filter !== undefined
-        ? (name: string) => name.toLowerCase().includes(filter)
-        : () => true
-    return illustrationNames
-      .filter(name => !name.endsWith('Animation'))
-      .filter(name => predicate(name))
-  }, [filter])
-  const brandSupportByName = useBrandSupportRecords(illustrationList)
-
-  const copyToClipboard = useCallback((illustrationName: string) => {
-    const importStatement = `import ${illustrationName} from '@payfit/unity-illustrations/assets/${illustrationName}'`
-
-    navigator.clipboard
-      .writeText(importStatement)
-      .then(() => {
-        setCopiedIllustration(illustrationName)
-        setTimeout(() => {
-          setCopiedIllustration(null)
-        }, 5000)
-      })
-      .catch((error: unknown) => {
-        console.error('Failed to copy: ', error)
-      })
-  }, [])
-
-  const updateSearchQuery = debounce((illustrationName: string) => {
-    setQuery(illustrationName)
-  }, 150)
-
-  const illustrationListMatchingSearch = illustrationList.filter(
-    illustrationName =>
-      illustrationName.toLowerCase().includes(query.toLowerCase()) &&
-      matchesBrandSupportFilter(
-        brandSupportByName.get(illustrationName) ?? 'loading',
-        brandFilter,
-      ),
-  )
-
-  return (
-    <UnityThemeProvider key={theme} theme={theme}>
-      <section className="uy:flex uy:flex-col uy:gap-300 uy:max-w-[80vmax] uy:mx-auto">
-        <header>
-          <h3>Illustration Gallery</h3>
-          <p className="uy:m-0!">
-            Click on any illustration to copy its import path to the clipboard.
-          </p>
-        </header>
-        <div className="uy:flex uy:flex-col uy:gap-150">
-          <BrandSupportFilterControl
-            name="illustration-brand-support-filter"
-            value={brandFilter}
-            onChange={setBrandFilter}
-          />
-          <input
-            type="search"
-            placeholder="Search for an illustration..."
-            className="uy:flex uy:h-500 uy:w-full uy:text-content-form-enabled uy:rounded-100 uy:border uy:border-solid uy:border-border-form-enabled uy:bg-background uy:px-150 uy:py-100 uy:typography-body uy:placeholder:text-content-neutral-lowest uy:hover:border-border-form-hover uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-ring uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring"
-            onChange={e => {
-              updateSearchQuery(e.target.value)
-            }}
-          />
-        </div>
-        <ul className="sb-unstyled uy:list-none uy:grid uy:grid-cols-[repeat(auto-fill,minmax(200px,_1fr))] uy:gap-x-100 uy:gap-y-200">
-          {illustrationListMatchingSearch.map(name => {
-            return (
-              <IllustrationItem
-                name={name}
-                copyText={
-                  copiedIllustration === name ? 'Copied!' : 'Click to Copy'
-                }
-                key={name}
-                onClick={() => {
-                  copyToClipboard(name)
-                }}
-              >
-                <LazyIllustration
-                  variant="picture"
-                  alt={`${name} illustration`}
-                  name={name}
-                  className="uy:h-[160px]"
-                />
-              </IllustrationItem>
-            )
-          })}
-        </ul>
-      </section>
-    </UnityThemeProvider>
-  )
-}
-
-export default IllustrationLibrary

package/src/docs/blocks/useStorybookTheme.ts

@@ -1,73 +0,0 @@
-import { useSyncExternalStore } from 'react'
-
-import type { UnityTheme } from '@payfit/unity-themes'
-
-import { addons } from 'storybook/preview-api'
-
-const defaultTheme: UnityTheme = 'legacy'
-const globalsUpdatedEvent = 'globalsUpdated'
-let currentTheme: UnityTheme = defaultTheme
-
-function normalizeTheme(theme: unknown): UnityTheme {
-  return theme === 'rebrand' ? 'rebrand' : defaultTheme
-}
-
-function readThemeFromDocument(): UnityTheme {
-  if (typeof document === 'undefined') {
-    return defaultTheme
-  }
-
-  return document.documentElement.getAttribute('data-uy-theme') === 'rebrand'
-    ? 'rebrand'
-    : defaultTheme
-}
-
-function subscribeToThemeChange(onStoreChange: () => void) {
-  const channel = addons.getChannel()
-
-  currentTheme = readThemeFromDocument()
-
-  const handleStoreChange = (theme: UnityTheme) => {
-    if (currentTheme === theme) {
-      return
-    }
-
-    currentTheme = theme
-    onStoreChange()
-  }
-
-  const handleGlobalsUpdated = ({
-    globals,
-  }: {
-    globals?: Record<string, unknown>
-  }) => {
-    handleStoreChange(normalizeTheme(globals?.theme))
-  }
-
-  channel.on(globalsUpdatedEvent, handleGlobalsUpdated)
-
-  const observer =
-    typeof MutationObserver === 'undefined'
-      ? undefined
-      : new MutationObserver(() => {
-          handleStoreChange(readThemeFromDocument())
-        })
-
-  observer?.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['data-uy-theme'],
-  })
-
-  return () => {
-    channel.off(globalsUpdatedEvent, handleGlobalsUpdated)
-    observer?.disconnect()
-  }
-}
-
-export function useStorybookTheme(): UnityTheme {
-  return useSyncExternalStore(
-    subscribeToThemeChange,
-    () => currentTheme,
-    () => defaultTheme,
-  )
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './components/illustration/Illustration'
-export * from './components/lazy-illustration/LazyIllustration'
-
-export * from './generated/illustrationAssets'

package/src/scripts/agent-references/illustration-reference.test.ts

@@ -1,100 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  generateIllustrationsReference,
-  getIllustrationReferenceGroups,
-} from './illustration-reference.js'
-
-describe('illustration agent references', () => {
-  it('groups illustrations by category with stable name sorting', () => {
-    expect(
-      getIllustrationReferenceGroups([
-        {
-          name: 'WriteBook',
-          type: 'svg',
-          animated: false,
-          category: 'picture',
-        },
-        {
-          name: 'FAQAnimation',
-          type: 'image',
-          animated: true,
-          category: 'animation',
-        },
-        {
-          name: 'Accounting',
-          type: 'svg',
-          animated: false,
-          category: 'picture',
-        },
-        { name: 'Baby', type: 'svg', animated: false, category: 'icon' },
-      ]),
-    ).toEqual([
-      {
-        category: 'icon',
-        title: 'Illustrated icons',
-        components: [
-          { name: 'Baby', type: 'svg', animated: false, category: 'icon' },
-        ],
-      },
-      {
-        category: 'picture',
-        title: 'Illustrated pictures',
-        components: [
-          {
-            name: 'Accounting',
-            type: 'svg',
-            animated: false,
-            category: 'picture',
-          },
-          {
-            name: 'WriteBook',
-            type: 'svg',
-            animated: false,
-            category: 'picture',
-          },
-        ],
-      },
-      {
-        category: 'animation',
-        title: 'Animations',
-        components: [
-          {
-            name: 'FAQAnimation',
-            type: 'image',
-            animated: true,
-            category: 'animation',
-          },
-        ],
-      },
-    ])
-  })
-
-  it('generates a compact Storybook MDX list with lazy and eager usage', () => {
-    const markdown = generateIllustrationsReference([
-      {
-        name: 'FAQAnimation',
-        type: 'image',
-        animated: true,
-        category: 'animation',
-      },
-    ])
-
-    expect(markdown).toContain('{/* AUTO-GENERATED FILE. DO NOT EDIT.')
-    expect(markdown).toContain(
-      '<Meta title="Agent References/Illustrations" />',
-    )
-    expect(markdown).toContain('## Animations (picture; animated)')
-    expect(markdown).not.toContain('| Name | Variant | Type | Animated |')
-    expect(markdown).toContain('- FAQAnimation')
-    expect(markdown).toContain(
-      'Lazy: `<LazyIllustration name="ExactName" variant="icon|picture" alt="..." />`',
-    )
-    expect(markdown).toContain(
-      'Eager: `import Asset from "@payfit/unity-illustrations/ExactName"`',
-    )
-    expect(markdown).not.toContain(
-      '`<LazyIllustration name="FAQAnimation" variant="picture" />`',
-    )
-  })
-})

package/src/scripts/agent-references/illustration-reference.ts

@@ -1,140 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-export type IllustrationReferenceComponent = {
-  name: string
-  type: string
-  animated: boolean
-  category?: string
-}
-
-const GENERATED_NOTICE = `{/* AUTO-GENERATED FILE. DO NOT EDIT.
-Generated by unity-illustrations:pre-build.
-Source: Unity illustration asset metadata.
-*/}\n`
-
-const STORYBOOK_META = `import { Meta } from '@storybook/addon-docs/blocks'\n\n<Meta title="Agent References/Illustrations" />\n`
-const README_STORYBOOK_META = `import { Meta } from '@storybook/addon-docs/blocks'\n\n<Meta title="Agent References/Illustrations Overview" />\n`
-
-const CATEGORY_ORDER = ['icon', 'picture', 'animation', 'other']
-
-const CATEGORY_TITLES: Record<string, string> = {
-  icon: 'Illustrated icons',
-  picture: 'Illustrated pictures',
-  animation: 'Animations',
-  other: 'Other illustrations',
-}
-
-const getCategory = (component: IllustrationReferenceComponent) =>
-  component.category ?? 'other'
-
-const chunk = <T>(items: T[], size: number) => {
-  const chunks: T[][] = []
-
-  for (let index = 0; index < items.length; index += size) {
-    chunks.push(items.slice(index, index + size))
-  }
-
-  return chunks
-}
-
-export const getIllustrationReferenceGroups = (
-  components: IllustrationReferenceComponent[],
-) => {
-  const knownCategories = new Set(CATEGORY_ORDER)
-  const categories = [
-    ...CATEGORY_ORDER,
-    ...Array.from(new Set(components.map(getCategory))).filter(
-      category => !knownCategories.has(category),
-    ),
-  ]
-
-  return categories
-    .map(category => ({
-      category,
-      title: CATEGORY_TITLES[category] ?? category,
-      components: components
-        .filter(component => getCategory(component) === category)
-        .slice()
-        .sort((a, b) => a.name.localeCompare(b.name)),
-    }))
-    .filter(group => group.components.length > 0)
-}
-
-export const generateIllustrationsReference = (
-  components: IllustrationReferenceComponent[],
-) => {
-  const lines = [
-    STORYBOOK_META,
-    '# Illustrations',
-    '',
-    GENERATED_NOTICE,
-    '',
-    'Agent reference. Exact illustration names are grouped by variant to reduce context.',
-    '',
-    'Lazy: `<LazyIllustration name="ExactName" variant="icon|picture" alt="..." />`.',
-    '',
-    'Eager: `import Asset from "@payfit/unity-illustrations/ExactName"`, then `<Illustration src={Asset} variant="icon|picture" alt="..." />`.',
-    '',
-    'Animations use `variant="picture"`.',
-    '',
-  ]
-
-  for (const group of getIllustrationReferenceGroups(components)) {
-    const variant = group.category === 'icon' ? 'icon' : 'picture'
-    const animated = group.category === 'animation' ? '; animated' : ''
-
-    lines.push(
-      `## ${group.title} (${variant}${animated})`,
-      '',
-      ...chunk(
-        group.components.map(component => component.name),
-        8,
-      ).map(names => `- ${names.join(', ')}`),
-      '',
-    )
-  }
-
-  return `${lines.join('\n').trimEnd()}\n`
-}
-
-export const generateIllustrationsAgentReferencesReadme =
-  () => `${README_STORYBOOK_META}
-# Unity Illustrations Agent References
-
-${GENERATED_NOTICE}
-
-This directory contains generated Storybook docs references for Unity illustrations. These files are intended for Storybook MCP, MCP indexers, and AI agents.
-
-Storybook includes these MDX files through the shared \`../src/**/*.mdx\` stories glob, and \`@storybook/addon-mcp\` exposes docs content to MCP clients.
-
-- [Illustrations](./illustrations.mdx)
-`
-
-export const writeIllustrationAgentReferences = ({
-  components,
-  outputDir,
-}: {
-  components: IllustrationReferenceComponent[]
-  outputDir: string
-}) => {
-  try {
-    fs.mkdirSync(outputDir, { recursive: true })
-    fs.writeFileSync(
-      path.join(outputDir, 'README.mdx'),
-      generateIllustrationsAgentReferencesReadme(),
-      'utf8',
-    )
-    fs.writeFileSync(
-      path.join(outputDir, 'illustrations.mdx'),
-      generateIllustrationsReference(components),
-      'utf8',
-    )
-  } catch (error) {
-    throw new Error(
-      `Failed to write illustration agent references to ${outputDir}: ${
-        error instanceof Error ? error.message : String(error)
-      }`,
-    )
-  }
-}