Setup Storybook for Profile (#1291)

* Setup storybook for profile

* Add snapshot testing for profile storybook

* Add missing dependencies for test:storybook:update script

* Mock account hooks for storybook

* Expose mock module from @cartridge/utils for storyies and testing

* Add decorator for account mock

* Mock useCountervalue

* Mock collections

* Accept router params via storybook parameter

* Add token and send stories

* Accept router searchParams via storybook parameter

* Add collection stories

* Update snapshots

---------

Co-authored-by: Tarrence van As <tarrence@vanas.family>

Author: JunichiSugiura

.github/workflows/test.yml

@@ -88,6 +88,7 @@ jobs:
             ui:
               - 'packages/ui-next/**'
               - 'packages/keychain/**'
+              - 'packages/profile/**'
               - '**/package.json'
               - '**/pnpm-lock.yaml'
 
@@ -146,6 +147,7 @@ jobs:
 
           # Check both packages
           check_snapshots "keychain" "packages/keychain/__image_snapshots__"
+          check_snapshots "profile" "packages/profile/__image_snapshots__"
           check_snapshots "ui-next" "packages/ui-next/__image_snapshots__"
 
           # Set environment variables

packages/keychain/.storybook/main.ts

@@ -10,21 +10,14 @@ function getAbsolutePath(value: string) {
   return dirname(require.resolve(join(value, "package.json")));
 }
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
   addons: [
-    getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
     getAbsolutePath("@storybook/addon-themes"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
-    options: {
-      builder: {
-        viteConfigPath: "./vite.config.ts",
-      },
-    },
+    options: {},
   },
   viteFinal: async (config) => {
     return mergeConfig(config, {

packages/keychain/__image_snapshots__/components-connect-create-createcontroller--with-theme-chromium.png

@@ -15,9 +15,9 @@
     "test:ci": "vitest run",
     "storybook": "storybook dev -p 6001 --no-open",
     "storybook:build": "storybook build",
-    "storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6006 --silent",
+    "storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6001 --silent",
     "test-storybook": "test-storybook --testTimeout=60000",
-    "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6006 'pnpm test-storybook'"
+    "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6001 'pnpm test-storybook'"
   },
   "dependencies": {
     "@cartridge/account-wasm": "workspace:*",
@@ -37,6 +37,7 @@
     "fast-deep-equal": "catalog:",
     "graphql-request": "^5.0.0",
     "inapp-spy": "4.2.1",
+    "lodash": "catalog:",
     "p-throttle": "^6.2.0",
     "posthog-js-lite": "3.2.1",
     "react": "catalog:",
@@ -45,17 +46,13 @@
     "react-router-dom": "catalog:",
     "sonner": "catalog:",
     "viem": "catalog:",
-    "wagmi": "^1.4.12",
-    "lodash": "^4.17.21"
+    "wagmi": "^1.4.12"
   },
   "devDependencies": {
     "@cartridge/eslint": "workspace:*",
     "@cartridge/tsconfig": "workspace:*",
-    "@types/lodash": "^4.14.202",
-    "@chromatic-com/storybook": "^1.9.0",
+    "@types/lodash": "catalog:",
     "@storybook/addon-essentials": "catalog:",
-    "@storybook/addon-interactions": "catalog:",
-    "@storybook/addon-links": "catalog:",
     "@storybook/addon-themes": "catalog:",
     "@storybook/blocks": "catalog:",
     "@storybook/react": "catalog:",

packages/keychain/package.json

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

packages/profile/.gitignore

@@ -0,0 +1,38 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import path from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return path.dirname(require.resolve(path.join(value, "package.json")));
+}
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-themes"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  viteFinal: (config) => 
+    mergeConfig(config, {
+      resolve: {
+        alias: {
+          "@/hooks/account": require.resolve("../src/hooks/account.mock.ts"),
+          "@/hooks/collection": require.resolve("../src/hooks/collection.mock.ts"),
+          "@/hooks/token": require.resolve("../src/hooks/token.mock.ts"),
+          "@cartridge/utils/api/cartridge": require.resolve("../node_modules/@cartridge/utils/dist/api/cartridge/index.js"),
+          "@cartridge/utils/api/indexer": require.resolve("../node_modules/@cartridge/utils/dist/api/indexer/index.js"),
+          "@cartridge/utils/mock/data": require.resolve("../node_modules/@cartridge/utils/dist/mock/data/index.js"),
+          "@cartridge/utils": require.resolve("../node_modules/@cartridge/utils/dist/mock/index.js"),
+        },
+      },
+    })
+};
+export default config;

packages/profile/.storybook/main.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import type { Decorator, Preview, ReactRenderer } from "@storybook/react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { SonnerToaster } from "@cartridge/ui-next";
+import { Provider } from "../src/components/provider";
+
+import "../src/index.css";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+
+const routerDecorator: Decorator = (Story, { parameters: { router } }) => {
+  const params = router?.params || {}
+  const path = Object.keys(params).length
+    ? `/:${Object.keys(params).join("/:")}`
+    : "/"
+  const searchParams = new URLSearchParams(router?.searchParams || {});
+  const url = `/${Object.values(params).join("/")}?${searchParams.toString()}`;
+
+  return (
+    <MemoryRouter initialEntries={[url]}>
+      <Provider>
+        <Routes>
+          <Route
+            path={path}
+            element={<Story />}
+          />
+        </Routes>
+        <SonnerToaster />
+      </Provider>
+    </MemoryRouter>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    preset: "cartridge",
+    colorMode: "dark",
+    backgrounds: {
+      default: "dark",
+      values: [
+        {
+          name: "dark",
+          value: "hsl(var(--background))",
+        },
+        {
+          name: "light",
+          value: "hsl(var(--background))",
+        },
+      ],
+    },
+  },
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "dark",
+    }),
+    routerDecorator,
+  ],
+};
+
+export default preview;

packages/profile/.storybook/preview.tsx

@@ -9,7 +9,13 @@
     "lint": "eslint .",
     "format": "prettier --write ./src index.html",
     "format:check": "prettier --check ./src index.html",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6003 --no-open",
+    "storybook:build": "storybook build",
+    "storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6003 --silent",
+    "test-storybook": "test-storybook --testTimeout=60000",
+    "test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6003 'pnpm test-storybook --url http://127.0.0.1:6003 -u'",
+    "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6003 'pnpm test-storybook --url http://127.0.0.1:6003'"
   },
   "dependencies": {
     "@bal7hazar/arcade-sdk": "^0.0.73",
@@ -18,7 +24,7 @@
     "@cartridge/ui-next": "workspace:*",
     "@cartridge/utils": "workspace:*",
     "compare-versions": "^6.1.1",
-    "lodash": "^4.17.21",
+    "lodash": "catalog:",
     "posthog-js": "^1.181.0",
     "react": "catalog:",
     "react-dom": "catalog:",
@@ -32,20 +38,31 @@
   },
   "devDependencies": {
     "@cartridge/eslint": "workspace:*",
-    "@types/lodash": "^4.17.13",
+    "@storybook/addon-essentials": "catalog:",
+    "@storybook/addon-themes": "catalog:",
+    "@storybook/blocks": "catalog:",
+    "@storybook/react": "catalog:",
+    "@storybook/react-vite": "catalog:",
+    "@storybook/test": "catalog:",
+    "@storybook/test-runner": "catalog:",
+    "@types/lodash": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@vitejs/plugin-react-swc": "catalog:",
     "autoprefixer": "catalog:",
     "eslint": "catalog:",
     "globals": "catalog:",
+    "http-server": "catalog:",
     "postcss": "catalog:",
     "postcss-import": "catalog:",
     "prettier": "catalog:",
+    "start-server-and-test": "catalog:",
+    "storybook": "catalog:",
     "tailwindcss": "catalog:",
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",
-    "vite": "catalog:"
+    "vite": "catalog:",
+    "vite-tsconfig-paths": "catalog:"
   }
 }

packages/profile/package.json

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Collectible } from "./collectible";
+
+const meta = {
+  component: Collectible,
+} satisfies Meta<typeof Collectible>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

packages/profile/src/components/inventory/collection/collectible.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Collection } from "./collection";
+
+const meta = {
+  component: Collection,
+} satisfies Meta<typeof Collection>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};