tech: add storybook

.gitignore

@@ -23,3 +23,5 @@ dist-ssr
 
 storybook-static
 .vercel
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,16 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  }
+}
+export default config

.storybook/preview.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { Preview } from '@storybook/react'
+
+import { createConfig, http, WagmiProvider } from 'wagmi'
+import { mainnet } from 'wagmi/chains'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { HyperPlayDesignProvider } from '@hyperplay/ui'
+
+import '@mantine/core/styles.css'
+import '@hyperplay/ui/style.css'
+
+const queryClient = new QueryClient()
+
+const config = createConfig({
+  chains: [mainnet],
+  transports: {
+    [mainnet.id]: http()
+  }
+})
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <WagmiProvider config={config}>
+        <QueryClientProvider client={queryClient}>
+          <HyperPlayDesignProvider>
+            <Story />
+          </HyperPlayDesignProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    )
+  ]
+}
+
+export default preview

package.json

@@ -8,6 +8,8 @@
     "lint": "eslint ./src",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "test": "jest"
   },
   "keywords": [],
@@ -25,7 +27,17 @@
   },
   "types": "dist/index.d.ts",
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@mantine/core": "^7.5.1",
     "@hyperplay/chains": "^0.3.0",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-interactions": "^8.3.4",
+    "@storybook/addon-links": "^8.3.4",
+    "@storybook/addon-onboarding": "^8.3.4",
+    "@storybook/blocks": "^8.3.4",
+    "@storybook/react": "^8.3.4",
+    "@storybook/react-vite": "^8.3.4",
+    "@storybook/test": "^8.3.4",
     "@hyperplay/ui": "^1.8.4",
     "@hyperplay/utils": "^0.2.7",
     "@tanstack/query-core": "^5.59.13",
@@ -40,13 +52,19 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "i18next": "^23.12.3",
+    "postcss": "^8.4.47",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
     "jest": "^29.7.0",
     "mobx": "^6.13.3",
     "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-i18next": "^15.0.1",
     "sass-embedded": "^1.77.8",
+    "storybook": "^8.3.4",
     "ts-jest": "^29.2.5",
     "viem": "^2.19.4",
     "vite": "^5.4.0",
@@ -67,5 +85,10 @@
   },
   "dependencies": {
     "classnames": "^2.5.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }