chore: add storybook (#1138)

* chore: add storybook * chore: add tooltip story with play function (#1139) * chore: add tooltip story with play function * fixup! chore: add tooltip story with play function * chore(storybook): add primitive stories, README, clean up storybook config, bump storybook deps * fixup! chore(storybook): add primitive stories, README, clean up storybook config, bump storybook deps * chore(storybook): update argType control overrides --------- Co-authored-by: Pedro Bonamin <[email protected]>
sanity-io · Oct 10, 2023 · 10aeb4a · 10aeb4a
1 parent 877e678
commit 10aeb4a
Show file tree

Hide file tree

Showing 34 changed files with 5,775 additions and 336 deletions.
diff --git a/.eslintrc.js b/.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: {

diff --git a/.storybook/decorators/withSanityTheme.decorator.tsx b/.storybook/decorators/withSanityTheme.decorator.tsx
@@ -0,0 +1,41 @@
+import {DecoratorHelpers} from '@storybook/addon-themes'
+import {StoryFn} from '@storybook/react'
+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};
+  }
+`
+
+/**
+ * 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>
+    )
+  }
+}
diff --git a/.storybook/main.ts b/.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
diff --git a/.storybook/manager-head.html b/.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>
diff --git a/.storybook/manager.ts b/.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',
+  },
+})
diff --git a/.storybook/preview-head.html b/.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>
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -0,0 +1,36 @@
+import type {Preview} from '@storybook/react'
+import {themes} from '@storybook/theming'
+import {withSanityTheme} from './decorators/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: {
+      theme: {
+        ...themes.dark,
+        fontBase: 'Inter, sans-serif',
+      },
+    },
+    layout: 'fullscreen',
+    options: {
+      storySort: {
+        order: ['primitives', 'components', '*'],
+      },
+    },
+  },
+}
+
+export default preview
diff --git a/package.json b/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,20 @@
     "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.4",
     "@sanity/ui-workshop": "^1.2.11",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-docs": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-storysource": "^7.4.5",
+    "@storybook/addon-themes": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/jest": "^0.2.2",
+    "@storybook/manager-api": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-vite": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
+    "@storybook/theming": "^7.4.5",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
@@ -93,6 +109,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.14",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.6.4",
@@ -109,6 +126,7 @@
     "rimraf": "^5.0.1",
     "semantic-release": "^21.1.1",
     "start-server-and-test": "^2.0.0",
+    "storybook": "^7.4.5",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.2.2"