feat: add Storybook

.gitignore

@@ -57,3 +57,6 @@ package-lock.json
 # VitePress
 docs/.vitepress/cache
 docs/.vitepress/dist
+
+*storybook.log
+storybook-static/

.storybook/main.ts

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

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import '../src/styles.css';
+
+const preview: Preview = {
+  parameters: {
+    layout: 'centered',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

biome.json

@@ -46,6 +46,7 @@
       "coverage",
       "esm",
       "framegear",
+      "dist",
       "site/docs/dist/"
     ]
   }

package.json

@@ -5,12 +5,17 @@
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
   "scripts": {
-    "build": "packemon build --addEngines --addFiles --declaration && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
+    "build": "yarn build:ts && yarn build:css",
+    "build:ts": "packemon build --addEngines --addFiles --declaration && npx packemon validate --no-license --no-people --no-repo",
+    "build:css": "tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
     "ci:format": "biome ci --linter-enabled=false --organize-imports-enabled=false",
     "ci:lint": "biome ci --formatter-enabled=false --organize-imports-enabled=false",
     "format": "biome format --write .",
     "lint": "biome lint --write .",
     "lint:unsafe": "biome lint --write --unsafe .",
+    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:test": "test-storybook",
     "test": "jest",
     "test:coverage": "jest . --coverage ",
     "release:check": "changeset status --verbose --since=origin/main",
@@ -38,6 +43,16 @@
     "@biomejs/biome": "^1.8.0",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-a11y": "^8.1.11",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@storybook/test-runner": "^0.19.0",
     "@tanstack/react-query": "^5.24.1",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^14.2.0",
@@ -56,10 +71,12 @@
     "react": "^18",
     "react-dom": "^18",
     "rimraf": "^5.0.5",
+    "storybook": "^8.1.11",
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
     "typescript": "~5.3.3",
     "viem": "^2.10.5",
+    "vite": "^5.3.3",
     "wagmi": "^2.8.7"
   },
   "resolutions": {

src/identity/components/Address.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Address } from './Address';
+
+const meta = {
+  title: 'Identity/Address',
+  component: Address,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    address: '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1',
+  },
+} satisfies Meta<typeof Address>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

src/identity/components/Avatar.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Avatar } from './Avatar';
+import { Badge } from './Badge';
+import { OnchainKitProvider } from '../../OnchainKitProvider';
+import { base } from 'viem/chains';
+
+const meta = {
+  title: 'Identity/Avatar',
+  component: Avatar,
+  decorators: [
+    (Story) => {
+      return (
+        <QueryClientProvider client={new QueryClient()}>
+          <Story />
+        </QueryClientProvider>
+      );
+    },
+  ],
+  tags: ['autodocs'],
+  args: {
+    address: '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1',
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
+
+export const Loading: Story = {
+  args: {
+    loadingComponent: <div>...</div>,
+  },
+};
+
+export const Fallback: Story = {
+  args: {
+    address: '0x1234567891234567881234567891234567891234',
+    defaultComponent: (
+      <div
+        style={{
+          width: '32px',
+          height: '32px',
+          border: '3px solid red',
+          borderRadius: '50%',
+        }}
+      />
+    ),
+  },
+};
+
+export const WithBadge: Story = {
+  decorators: [
+    (Story) => {
+      return (
+        <QueryClientProvider client={new QueryClient()}>
+          <OnchainKitProvider
+            chain={base}
+            schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+          >
+            <Story />
+          </OnchainKitProvider>
+        </QueryClientProvider>
+      );
+    },
+  ],
+  args: {
+    children: <Badge />,
+  },
+};

src/identity/components/Badge.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'Identity/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

src/identity/components/EthBalance.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { EthBalance } from './EthBalance';
+import { WagmiProvider, createConfig, http } from 'wagmi';
+import { baseSepolia } from 'viem/chains';
+
+const wagmiConfig = createConfig({
+  chains: [baseSepolia],
+  transports: {
+    [baseSepolia.id]: http(),
+  },
+});
+
+const meta = {
+  title: 'Identity/EthBalance',
+  component: EthBalance,
+  decorators: [
+    (Story) => {
+      return (
+        <WagmiProvider config={wagmiConfig}>
+          <QueryClientProvider client={new QueryClient()}>
+            <Story />
+          </QueryClientProvider>
+        </WagmiProvider>
+      );
+    },
+  ],
+  tags: ['autodocs'],
+  args: {
+    address: '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1',
+  },
+} satisfies Meta<typeof EthBalance>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

src/identity/components/Name.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Name } from './Name';
+
+const meta = {
+  title: 'Identity/Name',
+  component: Name,
+  decorators: [
+    (Story) => {
+      return (
+        <QueryClientProvider client={new QueryClient()}>
+          <Story />
+        </QueryClientProvider>
+      );
+    },
+  ],
+  tags: ['autodocs'],
+  args: {
+    address: '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1',
+    sliced: false,
+  },
+} satisfies Meta<typeof Name>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
+
+export const Sliced: Story = {
+  args: {
+    address: '0x1234567891234567881234567891234567891234',
+    sliced: true,
+  },
+};

src/styles/tailwind-base.css

@@ -33,3 +33,4 @@
 }
 
 @tailwind utilities;
+@tailwind components;

src/swap/components/SwapButton.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SwapProvider } from './SwapProvider';
+import { WagmiProvider, createConfig, http } from 'wagmi';
+import { baseSepolia } from 'viem/chains';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { SwapButton } from './SwapButton';
+import { fn } from '@storybook/test';
+
+const wagmiConfig = createConfig({
+  chains: [baseSepolia],
+  transports: {
+    [baseSepolia.id]: http(),
+  },
+});
+
+const meta = {
+  title: 'Swap/Button',
+  decorators: [
+    (Story) => (
+      <WagmiProvider config={wagmiConfig}>
+        <QueryClientProvider client={new QueryClient()}>
+          <SwapProvider address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1">
+            <Story />
+          </SwapProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    ),
+  ],
+  component: SwapButton,
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+    },
+  },
+  args: {
+    disabled: true,
+    onSubmit: fn(),
+  },
+} satisfies Meta<typeof SwapButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

src/swap/components/SwapToggleButton.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SwapToggleButton } from './SwapToggleButton';
+import { SwapProvider } from './SwapProvider';
+import { WagmiProvider, createConfig, http } from 'wagmi';
+import { baseSepolia } from 'viem/chains';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const wagmiConfig = createConfig({
+  chains: [baseSepolia],
+  transports: {
+    [baseSepolia.id]: http(),
+  },
+});
+
+const meta = {
+  title: 'Swap/ToggleButton',
+  decorators: [
+    (Story) => (
+      <WagmiProvider config={wagmiConfig}>
+        <QueryClientProvider client={new QueryClient()}>
+          <SwapProvider address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1">
+            <Story />
+          </SwapProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    ),
+  ],
+  component: SwapToggleButton,
+  tags: ['autodocs'],
+} satisfies Meta<typeof SwapToggleButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

src/token/components/SearchIcon.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { SearchIcon } from './SearchIcon';
+
+const meta = {
+  title: 'Token/SearchIcon',
+  component: SearchIcon,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: { onClick: fn() },
+} satisfies Meta<typeof SearchIcon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};