phosphor icons experiments

.gitignore

@@ -33,5 +33,7 @@ cypress/screenshots
 cypress/videos
 
 .idea
-
 *.tsbuildinfo
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  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",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+  refs: {
+    "@chakra-ui/react": {
+      disable: true,
+    },
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,31 @@
+import type { Preview } from "@storybook/react"
+import "../src/app/globals.css"
+import { dystopian, inter } from "../src/fonts"
+
+import { withThemeByDataAttribute } from "@storybook/addon-themes"
+
+document?.querySelector("body")?.classList.add(inter.variable, dystopian.variable)
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "dark",
+      attributeName: "data-theme",
+    }),
+  ],
+}
+
+export default preview

README.md

@@ -14,7 +14,7 @@ Open source interface for Guild.xyz -- a tool for platformless membership manage
 - Framework
   - React with Next.js
 - Styling:
-  - Chakra UI
+  - Chakra UI (migration to Tailwind CSS and Radix UI in progress)
   - Phosphor icons
   - Framer motion
 - State management:

biome.json

@@ -11,7 +11,7 @@
   },
   "files": {
     "include": ["src", "cypress"],
-    "ignore": ["node_modules", ".next", "public", ".out"]
+    "ignore": ["node_modules", ".next", "public", ".out", "package-lock.json"]
   },
   "organizeImports": {
     "enabled": true

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

next.config.js

@@ -9,6 +9,12 @@ const nextConfig = {
     tsconfigPath: process.env.TS_CONFIG_PATH,
   },
   webpack(config, options) {
+    console.log("OPTIMIZATION", config.optimization)
+    config.optimization = {
+      ...config.optimization,
+      usedExports: true
+    }
+
     config.module.rules.push({
       test: /\.svg$/,
       use: [
@@ -22,6 +28,9 @@ const nextConfig = {
       ],
     })
 
+    // To get rid of "Can't resolve ..." errors which come from some wallet connector SDKs
+    config.externals.push("pino-pretty", "lokijs", "encoding")
+
     if (!config.plugins) config.plugins = []
     if (process.env.VERCEL_ENV === "production") {
       config.plugins.push(
@@ -88,9 +97,22 @@ const nextConfig = {
     ],
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
   },
+  modularizeImports: {
+    // "@phosphor-icons/react": {
+    //   transform: "@phosphor-icons/react/{{member}}",
+    // },
+    // "@phosphor-icons/react/dist/ssr": {
+    //   transform: "@phosphor-icons/react/dist/ssr/{{member}}",
+    // },
+  },
   experimental: {
     scrollRestoration: true,
-    optimizePackageImports: ["@phosphor-icons/react"],
+    optimizePackageImports: [
+      "@phosphor-icons/react",
+      "@phosphor-icons/react/dist/ssr",
+      "@fuels/react",
+      "fuels",
+    ],
   },
   async rewrites() {
     return {