chore: Add Storybook MVP

packages/onchainkit/.gitignore

@@ -1 +1,2 @@
-coverage
+coverage
+*storybook.log

packages/onchainkit/.storybook/main.ts

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

packages/onchainkit/.storybook/preview.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { OnchainKitProvider } from '../src/OnchainKitProvider';
+import { base } from 'wagmi/chains';
+import '../src/styles/index-with-tailwind.css';
+
+function getApiKey() {
+  try {
+    return process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY;
+  } catch (err) {
+    console.error(err);
+    return undefined;
+  }
+}
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <OnchainKitProvider
+        apiKey={getApiKey()}
+        chain={base}
+        config={{
+          appearance: {
+            mode: 'auto',
+          },
+          wallet: {
+            display: 'modal',
+          },
+        }}
+      >
+        <Story />
+      </OnchainKitProvider>
+    ),
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/onchainkit/package.json

@@ -24,7 +24,9 @@
     "test:ui": "vitest --ui",
     "get-next-version": "node ./scripts/get-next-version.js",
     "publish-alpha": "node ./scripts/publish-alpha.js",
-    "validate-build": "node ./scripts/validate-build.js"
+    "validate-build": "node ./scripts/validate-build.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -44,6 +46,13 @@
     "wagmi": "^2.14.11"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-onboarding": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
     "@testing-library/jest-dom": "6.4.7",
     "@testing-library/react": "^14.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -56,6 +65,7 @@
     "@vitest/ui": "^3.0.5",
     "autoprefixer": "^10.4.19",
     "babel-plugin-module-resolver": "^5.0.2",
+    "chromatic": "^11.28.2",
     "concurrently": "^8.0.0",
     "esbuild-fix-imports-plugin": "^1.0.19",
     "esbuild-plugin-babel": "^0.2.3",

packages/onchainkit/src/token/components/TokenChip.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TokenChip } from './TokenChip';
+
+const meta = {
+  title: 'Token/TokenChip',
+  component: TokenChip,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof TokenChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    token: {
+      address: '0x1234',
+      chainId: 1,
+      decimals: 18,
+      image:
+        'https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png',
+      name: 'Ethereum',
+      symbol: 'ETH',
+    },
+  },
+};

packages/onchainkit/src/wallet/components/Wallet.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Wallet } from './Wallet';
+
+const meta = {
+  title: 'Wallet/Wallet',
+  component: Wallet,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Wallet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+};