chore: add storybook

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:storybook/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {

.storybook/components/DocsPage.tsx

@@ -0,0 +1,18 @@
+import {Controls, Description, Primary, Subtitle, Title} from '@storybook/blocks'
+import React from 'react'
+
+/**
+ * Customised docs page with `<Stories>` removed.
+ * https://storybook.js.org/docs/react/writing-docs/autodocs#customize-the-docs-container
+ */
+export const DocsPage = () => {
+  return (
+    <>
+      <Title />
+      <Subtitle />
+      <Description />
+      <Primary />
+      <Controls />
+    </>
+  )
+}

.storybook/components/withSanityTheme.decorator.tsx

@@ -0,0 +1,44 @@
+import {DecoratorHelpers} from '@storybook/addon-themes'
+import {StoryFn} from '@storybook/react'
+import {themes as storybookThemes} from '@storybook/theming'
+import React from 'react'
+import {createGlobalStyle} from 'styled-components'
+import {Card} from '../../src/primitives'
+import {studioTheme, ThemeProvider} from '../../src/theme'
+
+const {initializeThemeState, pluckThemeFromContext, useThemeParameters} = DecoratorHelpers
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background-color: ${({theme}) => theme.sanity.color.base.bg};
+    /* Optionally use storybook's dark mode background color */
+    /* background-color: ${storybookThemes.dark.appBg}; */
+  }
+`
+
+/**
+ * Story decorator which wraps all stories in a Sanity <ThemeProvider> and passes the current theme
+ * value defined in Story.
+ *
+ * Stories are also wrapped in a <Card> for layout.
+ */
+
+export const withSanityTheme = ({themes, defaultTheme}) => {
+  initializeThemeState(Object.keys(themes), defaultTheme)
+
+  return (Story: StoryFn, context) => {
+    const selectedTheme = pluckThemeFromContext(context)
+    const {themeOverride} = useThemeParameters()
+
+    const selected = themeOverride || selectedTheme || defaultTheme
+
+    return (
+      <ThemeProvider scheme={selected} theme={studioTheme}>
+        <GlobalStyle />
+        <Card padding={4}>
+          <Story />
+        </Card>
+      </ThemeProvider>
+    )
+  }
+}

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type {StorybookConfig} from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-storysource',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

.storybook/manager-head.html

@@ -0,0 +1,30 @@
+<style>
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/Inter-roman.var.woff2?v=3.19') format('woff2');
+    font-named-instance: 'Regular';
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/Inter-italic.var.woff2?v=3.19') format('woff2');
+    font-named-instance: 'Italic';
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+  }
+  .sidebar-subheading {
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    letter-spacing: normal !important;
+    text-transform: capitalize !important;
+  }
+</style>

.storybook/manager.ts

@@ -0,0 +1,11 @@
+import {addons} from '@storybook/manager-api'
+import {themes} from '@storybook/theming'
+
+addons.setConfig({
+  theme: {
+    ...themes.dark,
+    brandTitle: 'Sanity UI',
+    fontBase:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+  },
+})

.storybook/preview-head.html

@@ -0,0 +1,24 @@
+<style>
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/Inter-roman.var.woff2?v=3.19') format('woff2');
+    font-named-instance: 'Regular';
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/Inter-italic.var.woff2?v=3.19') format('woff2');
+    font-named-instance: 'Italic';
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+  }
+</style>

.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import type {Preview} from '@storybook/react'
+import {themes} from '@storybook/theming'
+import {DocsPage} from './components/DocsPage'
+import {withSanityTheme} from './components/withSanityTheme.decorator'
+
+const preview: Preview = {
+  decorators: [
+    withSanityTheme({
+      themes: {light: 'light', dark: 'dark'},
+      defaultTheme: 'dark',
+    }),
+  ],
+  parameters: {
+    actions: {argTypesRegex: '^on[A-Z].*'},
+    backgrounds: {disable: true},
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      page: DocsPage,
+      theme: {
+        ...themes.dark,
+        fontBase: 'Inter, sans-serif',
+      },
+    },
+    layout: 'fullscreen',
+  },
+}
+
+export default preview

package.json

@@ -46,7 +46,9 @@
     "watch": "pkg watch --strict",
     "workshop:build": "node -r esbuild-register -r tsconfig-paths/register scripts/build",
     "workshop:dev": "node -r esbuild-register -r tsconfig-paths/register scripts/dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@floating-ui/react-dom": "2.0.0",
@@ -67,6 +69,18 @@
     "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.4",
     "@sanity/ui-workshop": "^1.2.11",
+    "@storybook/addon-a11y": "^7.4.2",
+    "@storybook/addon-docs": "^7.4.2",
+    "@storybook/addon-essentials": "^7.4.2",
+    "@storybook/addon-interactions": "^7.4.2",
+    "@storybook/addon-links": "^7.4.2",
+    "@storybook/addon-storysource": "^7.4.2",
+    "@storybook/addon-themes": "^7.4.2",
+    "@storybook/blocks": "^7.4.2",
+    "@storybook/manager-api": "^7.4.2",
+    "@storybook/react": "^7.4.2",
+    "@storybook/react-vite": "^7.4.2",
+    "@storybook/theming": "^7.4.2",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
@@ -93,6 +107,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.6.4",
@@ -109,6 +124,7 @@
     "rimraf": "^5.0.1",
     "semantic-release": "^21.1.1",
     "start-server-and-test": "^2.0.0",
+    "storybook": "^7.4.2",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.2.2"