feat: reorganize folders

.github/workflows/storybook-tests-after-deployment.yml

@@ -0,0 +1,39 @@
+name: Storybook Tests After Deployment
+on: deployment_status # deployment_status is triggered when a deployment is created or updated, for example on vercel, and you can get the URL from there
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Run Storybook tests
+        run: pnpm test
+        env:
+          TARGET_URL: "${{ github.event.deployment_status.target_url }}"

.github/workflows/storybook-tests-on-push.yml

@@ -0,0 +1,50 @@
+name: "Storybook Tests"
+on: push
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Cache Storybook build
+        uses: actions/cache@v4
+        with:
+          path: storybook-static
+          key: ${{ runner.os }}-storybook-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-storybook-
+
+      - name: Build Storybook
+        run: pnpm build-storybook --quiet
+
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:127.0.0.1:6006 && pnpm test-storybook"

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm exec lint-staged

.npmrc

@@ -1,2 +1 @@
-auto-install-peers = true
-public-hoist-pattern[]=*storybook*
+package-manager=pnpm@9

.nvmrc

@@ -0,0 +1 @@
+20

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "semi": true,
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

.storybook/main.ts

@@ -1,34 +1,22 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
-import { join, dirname } 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): any {
-  return dirname(require.resolve(join(value, "package.json")));
-}
 const config: StorybookConfig = {
-  // stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx"],
-
-  stories: [
-    "../stories/*.stories.tsx",
-    "../stories/**/*.stories.tsx",
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-  ],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    getAbsolutePath("@storybook/addon-themes"),
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+    "@storybook/addon-a11y",
   ],
   framework: {
-    name: getAbsolutePath("@storybook/react-vite"),
+    name: "@storybook/react-vite",
     options: {},
   },
-  staticDirs: ["../public"],
+  docs: {},
+  core: {
+    disableTelemetry: true, // 👈 Used to ignore update notifications.
+  },
 };
 export default config;

.storybook/preview.tsx

@@ -1,5 +1,11 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+import { initialize, mswLoader } from "msw-storybook-addon";
+import { handlers } from "../src/mocks/handlers";
+
+initialize();
+
 import "../src/styles.css";
 
 import { ApiProvider, Web3Provider } from "../src";
@@ -12,25 +18,17 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    options: {
-      storySort: {
-        method: "",
-        order: ["UI"],
-        locales: "",
-      },
+    msw: {
+      handlers,
     },
-    // We can use MSW to mock data fetching
-    // msw: {
-    //   handlers: [
-    //     graphql.query("Rounds", ({}) => {
-    //       return HttpResponse.json({ data: { rounds } });
-    //     }),
-    //   ],
-    // },
   },
-  // loaders: [mswLoader],
-
+  loaders: [mswLoader],
   decorators: [
+    withThemeByDataAttribute({
+      defaultTheme: "light",
+      themes: { light: "light", dark: "dark" },
+      attributeName: "data-mode",
+    }),
     (Story, { parameters: { theme = "light" } }) => {
       return (
         <ApiProvider>
@@ -43,4 +41,11 @@ const preview: Preview = {
   ],
 };
 
+// NOTE: Example of global loaders
+// export const loaders = [
+//   async () => ({
+//     userData: await fetch('/api/user').then((res) => res.json()),
+//   }),
+// ];
+
 export default preview;

.storybook/test-runner.ts

@@ -0,0 +1,18 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+import { injectAxe, checkA11y } from "axe-playwright";
+
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page) {
+    await checkA11y(page, "#storybook-root", {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "add project",
+  "zip": true
+}

eslint.config.js

@@ -0,0 +1,25 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    },
+  },
+);

fix-mjs-imports.js

@@ -4,12 +4,21 @@ const path = require("path");
 
 // Function to read file contents
 function readFileContents(filePath) {
-  return fs.readFileSync(filePath, "utf8");
+  try {
+    return fs.readFileSync(filePath, "utf8");
+  } catch (error) {
+    console.error(`Error reading file ${filePath}:`, error);
+    return null;
+  }
 }
 
 // Function to write updated contents back to the file
 function writeFileContents(filePath, contents) {
-  fs.writeFileSync(filePath, contents, "utf8");
+  try {
+    fs.writeFileSync(filePath, contents, "utf8");
+  } catch (error) {
+    console.error(`Error writing file ${filePath}:`, error);
+  }
 }
 
 // Function to resolve the full path of the import
@@ -67,9 +76,13 @@ function updateImportStatement(fromKeyword, importPath, quote, filePath) {
   const fullPath = resolveFullPath(filePath, importPath);
 
   if (importPath === ".." || importPath === "." || isDirectory(fullPath)) {
-    return updateDirectoryOrDotImport(fromKeyword, importPath, quote, fullPath);
+    const updatedImport = updateDirectoryOrDotImport(fromKeyword, importPath, quote, fullPath);
+
+    return updatedImport;
   } else if (!importPath.endsWith(".mjs")) {
-    return updateFileImport(fromKeyword, importPath, quote, fullPath);
+    const updatedImport = updateFileImport(fromKeyword, importPath, quote, fullPath);
+
+    return updatedImport;
   }
 
   return `${fromKeyword}${importPath}${quote}`;
@@ -78,12 +91,15 @@ function updateImportStatement(fromKeyword, importPath, quote, filePath) {
 // Main function to update imports in .mjs files
 function updateImports(filePath) {
   const contents = readFileContents(filePath);
+  if (!contents) {
+    return;
+  }
 
   const updatedContents = contents.replace(
     /(from\s+['"])(\.\.?\/[^'"\s]+|\.|..|posthog-js\/react|@allo-team\/allo-v2-sdk\/dist\/Allo\/allo.config)(['"])/g,
     (match, fromKeyword, importPath, quote) => {
       return updateImportStatement(fromKeyword, importPath, quote, filePath);
-    }
+    },
   );
 
   if (contents !== updatedContents) {