feat: migrate /explorer page to shadcn/ui (#1323)

* install/upgrade dependencies & configure shadcn/ui

* use ts for tailwind config

* add basic `layout.tsx`

* fix: remove top-level `/app` folder & add playground page

* v2 add next theme (#1325)

* feat: add button and update css vars

* feat: add theme toggle

* chore: add some light theme colors

* feat: make theme system backward compatible

* feat: `Card` component (#1326)

* feat: simple `Card` component

* fix: update background color in light mode

* chore: better playground page

* revert foreground color change

* feat: `Dialog` component (#1328)

* feat: generate `Dialog` component

* feat(Dialog): add size variants

* chore: add example

* add shadcn button and style adjustments (#1327)

* ci: fix npm i (for linux)

* feat: add button

* feat: color button

* chore: color adjustments

* chore: add inter as local font

* chore: add button sizes

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* build: revert sourcing on postinstall

* fix(DialogExample): add `asChild` prop to trigger

* feat(Dialog): add focus management props

* feat(Dialog): export `DialogCloseButton` component

* fix: update `--muted-foreground` variable

* fix(ThemeToggle): make the buttons smaller

* Storybook (#1332)

* feat: configure storybook and add a basic button story

* fine-tune button variants, rename accent variant to secondary

* feat(Button): add loading state

* feat: add font-related classes to storybook previews

* feat: add `destructive-ghost` variant

* feat: add tooltip (#1335)

* feat: add tooltip

* add `@radix-ui/react-tooltip` package

* update styles & add story

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* feat: `Toast` component & `useToast` hook (#1333)

* feat: `Toast` component & `useToast` hook

* refactor: simplify toast background color management

* fix: focus-visible styles

* cleanup: define screen size variables only once

* fix(Toast): add ring on focus-visible

* fix(useToast): rename variable in `forEach`

* fix(ci): address linux storybook error (#1336)

* fix(ci): address linux storybook error

* chore(deps): move esbuild to dev deps

---------

Co-authored-by: Dominik Stumpf <122315398+dominik-stumpf@users.noreply.github.com>

* feat: `AlertDialog` component (#1337)

* feat: `AlertDialog` component

* fix: TODO comment

* `Dialog` improvements (#1351)

* add changes from the `v2-header` branch

* feat: add `Dialog` stories

* feat(Dialog): scrollable overlay

* fix(AlertDialog.stories): import types only

* fix(useToast): eslint issue

* feat: `Form` component (#1358)

* feat: add `Input` component

* feat: add form & related sub-components

* feat(Input): add size variants

* feat: add `Input` stories

* fix: revert `FormDescription` rename

* feat: `Badge` component

* feat: `DropdownMenu` component (#1359)

* feat: `DropdownMenu` component

* fix: rename `border-secondary` to `border-muted`

* chore: change default theme to dark

* feat: add anchor component (#1362)

* feat: add anchor component

* chore: add missing css var

* fix(Anchor): muted style

* fix(Anchor.stories): `showExternal` default value

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* style: apply biome check

* feat: add header (#1329)

* feat: add header

* chore: configure navigator

* feat: `Providers` component

* chore: disable navigator on blur

* feat: `NavigationEvents` component

* refactor: make providers work with both routers

* feat: add IntercomProvider

* feat: usePrevious hook

* feat(CardMotionWrapper): use `m.div` instead of `MotionBox`

* wip: WalletSelectorModal without Google login button

* update package-lock

* fix: proper button states in wallet selector modal

* feat: `NavMenu` as popover

* feat: `CopyableAddress` component

* fix(useGuild): use the new `usePathname` hook

* fix: export `connectorButtonBaseProps` from `ConnectorButton`

* refactor toast related css variables

* fix: replace relevant toasts with our new toast component

* chore: upgrade nextjs

* wip: account modal

* cleanup playground

* refactor posthog, intercom, web3 related contexts & hooks

* cleanup: remove `DialogExample`

* fix(CardMotionWrapper): remove the `EASING` import

* Try fix build "out of memory" error (#1347)

* build: allocate more memory for nodejs on build

* build: increase memory limit

* chore: remove posthog provider to test build error

* chore: remove posthog provider to test build error

* chore: remove reward import

* build: remove memory limit override

* chore: fix circular import

* fix: update import outside v2

* fix: add missing react suspense

* Revert "chore: remove reward import"

This reverts commit b2cf1d8.

* chore: remove accidental svg

* fix(layout): add back `PostHogPageViews`

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* feat(CopyableAddress): add tooltip

* feat: `NetworkModal` migration

* feat: `Accordion` component

* temporarily remove `CircularDependencyPlugin`

* move `platformMergeAlertAtom` to `atoms.ts`

* fix(useUserPublic): comment posthog related stuff

* feat: `FarcasterProfile` component

* fix ring color in light mode

* fix: remove ring offset

* fix: connect Farcaster button colors

* feat: define css vars for every platform type

* fix(SocialAccount): use the correct button colors

* feat: `Collapse` component

* feat(Form): don't re-export `FormProvider` as `Form`

* chore: remove old `Header` & `NavMenu`

* fix: Button & Input classNames

* feat(FormErrorMessage): add collapse animation

* feat: migrate the `EmailAddress` component

* chore: migrate `useDisconnect`

* fix(AccountModal): simplify modal state

* fix(EmailAddress): verify flow

* chore: remove unused `AccountButton`

* cleanup: move `processEmailError` inside `AccountModal/utils`

* feat: `useGuildUrlNameFromPathname` helper hook

* wip: `SharedSocials` migration

* refactor: move `useEditSharedSocials` to the `v2` folder

* feat: finish `SharedSocial` migration

* feat: `useErrorToast` hook

* fix(WalletSelectorModal): remove `CardMotionWrapper`

* fix(Button): remove important modifier

* fix(WalletSelectorModal): remove animations

* feat: "Linked addresses" section

* feat: `WalletLinkHelperModal` migration

* feat: `UsersGuildPins` migration

* fix(UsersGuildPins): `isValidating` logic

* fix(_app): remove custom-scrollbar.css import

* patch package-lock

* fix(playground): remove Section component

* chore(playground): remove FormExample

* cleanup: remove unused `GoogleTerms` component

* feat: migrate the `Error` component

* cleanup(LinkedAddress): remove unused legacy code

* fix: use bold icons everywhere under the `/v2` directory

* feat: `/cwaas-export` page

* fix(next.config.js): add `CircularDependencyPlugin`

* fix: uncomment `useResolveAddress` hook usages

* fix(Account): simplify conditional classNames

* fix: don't use `clsx` inside `cn` calls

* fix(usePrevious): remove assertion

* fix(EmailAddress): better generic type for `emailSentAt` state

* chore(NetworkButton): add comment about `img`

* fix(CopyableAddress): simplify className

* fix(NavMenu): remove unnecessary boolean inversion

* cleanup(ConnectorButton): use descriptive variable names

* fix(AddressTypeBadge): tooltip content

* feat: use the `useTheme` hook for dynamic connector icons

* cleanup(useWeb3ConnectionManager): remove ternary

* fix: use consistent ring sizes

* cleanup(tailwind.config.ts): remove unnecessary custom animations

* fix(WalletSelectorModal): move export link to the end of the list

* feat: `IntercomProvider` migration

* feat: `PlatformMergeErrorAlert` migration

* feat: `useConnectFromLocalStorage` migration

* fix(_app): add `Toaster`

* feat: `Collapsible` component

* fix(useLensProfile): don't import icon from the requirements config

* fix(EmailAddress): use the new  hook

* fix(FarcasterProfile): use the new  hook

* feat: new `GuildLogo` component

* fix(SharedSocials): use the new `GuildLogo` component

* fix: add more packages to `optimizePackageImports`

* fix(useTriggerNetworkChange): use the new `useToast` hook

* fix: patch package-lock

* fix: Tooltip animation duration

* cleanup: remove some unnecessary comments

* feat(WalletSelectorModal): use the new `Anchor` tag

* fix(useConnectPlatform): uncomment error toast

* fix: use buttons for `AlertDialogAction` where it is relevant

* fix(SocialAccount): apply different styles for the reconnect button

* fix: minor improvements/todos

* feat: `Alert` component

* fix: fine-tune `Alert` styles

* feat: use the new  component

* fix(guild page): incorrect import

* patch package-lock

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* style: apply biome check

* feat: add avatar and separator

* chore: update team href

* fix: ring colors

* fix(CardMotionWrapper): add easing functions

* fix(Dialog): ring color

* fix: fine-tune accent & border colors

* fix(SharedSocials): UI improvements

* fix(ThemeToggle): make it work in both pages & app router

* fix: minor UI issues

* fix(ConnectRequirementPlatformButton): use the new `Button` component

* fix(RequirementConnectButton): accept `ButtonProps`

* feat: add notifications (#1360)

* feat: add header

* chore: configure navigator

* feat: `Providers` component

* chore: disable navigator on blur

* feat: `NavigationEvents` component

* refactor: make providers work with both routers

* feat: add IntercomProvider

* feat: usePrevious hook

* feat(CardMotionWrapper): use `m.div` instead of `MotionBox`

* wip: WalletSelectorModal without Google login button

* update package-lock

* fix: proper button states in wallet selector modal

* feat: `NavMenu` as popover

* feat: `CopyableAddress` component

* fix(useGuild): use the new `usePathname` hook

* fix: export `connectorButtonBaseProps` from `ConnectorButton`

* refactor toast related css variables

* fix: replace relevant toasts with our new toast component

* chore: upgrade nextjs

* wip: account modal

* cleanup playground

* refactor posthog, intercom, web3 related contexts & hooks

* cleanup: remove `DialogExample`

* fix(CardMotionWrapper): remove the `EASING` import

* Try fix build "out of memory" error (#1347)

* build: allocate more memory for nodejs on build

* build: increase memory limit

* chore: remove posthog provider to test build error

* chore: remove posthog provider to test build error

* chore: remove reward import

* build: remove memory limit override

* chore: fix circular import

* fix: update import outside v2

* fix: add missing react suspense

* Revert "chore: remove reward import"

This reverts commit b2cf1d8.

* chore: remove accidental svg

* fix(layout): add back `PostHogPageViews`

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* feat(CopyableAddress): add tooltip

* feat: `NetworkModal` migration

* feat: `Accordion` component

* temporarily remove `CircularDependencyPlugin`

* move `platformMergeAlertAtom` to `atoms.ts`

* fix(useUserPublic): comment posthog related stuff

* feat: `FarcasterProfile` component

* fix ring color in light mode

* fix: remove ring offset

* fix: connect Farcaster button colors

* feat: define css vars for every platform type

* fix(SocialAccount): use the correct button colors

* feat: `Collapse` component

* feat(Form): don't re-export `FormProvider` as `Form`

* chore: remove old `Header` & `NavMenu`

* fix: Button & Input classNames

* feat(FormErrorMessage): add collapse animation

* feat: migrate the `EmailAddress` component

* chore: migrate `useDisconnect`

* fix(AccountModal): simplify modal state

* fix(EmailAddress): verify flow

* chore: remove unused `AccountButton`

* cleanup: move `processEmailError` inside `AccountModal/utils`

* feat: `useGuildUrlNameFromPathname` helper hook

* wip: `SharedSocials` migration

* refactor: move `useEditSharedSocials` to the `v2` folder

* feat: finish `SharedSocial` migration

* feat: `useErrorToast` hook

* fix(WalletSelectorModal): remove `CardMotionWrapper`

* fix(Button): remove important modifier

* fix(WalletSelectorModal): remove animations

* feat: "Linked addresses" section

* feat: `WalletLinkHelperModal` migration

* feat: `UsersGuildPins` migration

* fix(UsersGuildPins): `isValidating` logic

* fix(_app): remove custom-scrollbar.css import

* patch package-lock

* fix(playground): remove Section component

* chore(playground): remove FormExample

* cleanup: remove unused `GoogleTerms` component

* feat: migrate the `Error` component

* cleanup(LinkedAddress): remove unused legacy code

* fix: use bold icons everywhere under the `/v2` directory

* feat: `/cwaas-export` page

* fix(next.config.js): add `CircularDependencyPlugin`

* fix: uncomment `useResolveAddress` hook usages

* fix(Account): simplify conditional classNames

* fix: don't use `clsx` inside `cn` calls

* fix(usePrevious): remove assertion

* fix(EmailAddress): better generic type for `emailSentAt` state

* chore(NetworkButton): add comment about `img`

* fix(CopyableAddress): simplify className

* fix(NavMenu): remove unnecessary boolean inversion

* cleanup(ConnectorButton): use descriptive variable names

* fix(AddressTypeBadge): tooltip content

* feat: use the `useTheme` hook for dynamic connector icons

* cleanup(useWeb3ConnectionManager): remove ternary

* fix: use consistent ring sizes

* cleanup(tailwind.config.ts): remove unnecessary custom animations

* fix(WalletSelectorModal): move export link to the end of the list

* feat: `IntercomProvider` migration

* feat: `PlatformMergeErrorAlert` migration

* feat: `useConnectFromLocalStorage` migration

* fix(_app): add `Toaster`

* feat: add notifications

* feat: add separator

* feat: add notifications

* feat: `Collapsible` component

* fix(useLensProfile): don't import icon from the requirements config

* fix(EmailAddress): use the new  hook

* fix(FarcasterProfile): use the new  hook

* feat: new `GuildLogo` component

* fix(SharedSocials): use the new `GuildLogo` component

* fix: add more packages to `optimizePackageImports`

* fix(useTriggerNetworkChange): use the new `useToast` hook

* fix: patch package-lock

* fix: Tooltip animation duration

* cleanup: remove some unnecessary comments

* feat(WalletSelectorModal): use the new `Anchor` tag

* feat: add skeleton for notification

* chore: add sign in button

* refactor: write biome check unsafe

* chore: fix ts errors

* feat: add subscribe option

* feat: add modals to notification

* refactor: separate view and container

* cleanup: small copy/naming improvements

* fix(Skeleton): define a CSS variable for skeleton background

* fix(Account): styling/layout improvements

* fix(Skeleton): use the new CSS variables

* refactor: load the `Web3Inbox` component dynamically

* fix: dynamic popover width

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* feat: add compound layout component (#1363)

* feat: add compound layout component

* chore: add PageBoundary

* test: add Layout to storybook

* refactor: finalize compound layout

* feat: add background to banner

* test: update stories

* move PageContainer into Layout

* refactor: move header out, fix storybook

* fix storybook

* feat(Banner): add className prop

* chore: add classname as optional

---------

Co-authored-by: valid <valid@zgen.hu>

* fix(NavMenu): add create-guild

* UI(NavMenu): whitespace impros, highlight current path

* fix(NavMenu): use the `usePathname` hook

* fix(ThemeToggle): remove `console.log`

* v2 explorer (#1330)

* feat: add header

* chore: configure navigator

* feat: `Providers` component

* chore: disable navigator on blur

* feat: `NavigationEvents` component

* feat: add explorer

* refactor: make providers work with both routers

* chore: color corrections

* feat: add dynamic header

* feat: add dynamic color to nav toggle

* feat: add robots, manifest, ring

* chore: add display font to title

* chore: change ring color

* refactor: extract guild listing

* feat: make header and background responsive

* feat: implement infinite scroll

* feat: add loading spinner

* feat: hook in searchbar

* feat: add IntercomProvider

* feat: usePrevious hook

* feat(CardMotionWrapper): use `m.div` instead of `MotionBox`

* wip: WalletSelectorModal without Google login button

* update package-lock

* feat: add anchor to search filter

* feat: add link to card

* feat: add no search result message

* fix: proper button states in wallet selector modal

* feat: `NavMenu` as popover

* feat: `CopyableAddress` component

* fix(useGuild): use the new `usePathname` hook

* fix: export `connectorButtonBaseProps` from `ConnectorButton`

* refactor toast related css variables

* fix: replace relevant toasts with our new toast component

* chore: upgrade nextjs

* wip: account modal

* ci: ignore waas import errors

* fix: addess merge conflict on toolbar, type errors

* chore: add debounce instead of defer

* chore: fix constant imports

* feat: make guild card image cacheable

* feat: add anchor

* cleanup playground

* refactor posthog, intercom, web3 related contexts & hooks

* cleanup: remove `DialogExample`

* fix(CardMotionWrapper): remove the `EASING` import

* Try fix build "out of memory" error (#1347)

* build: allocate more memory for nodejs on build

* build: increase memory limit

* chore: remove posthog provider to test build error

* chore: remove posthog provider to test build error

* chore: remove reward import

* build: remove memory limit override

* chore: fix circular import

* fix: update import outside v2

* fix: add missing react suspense

* Revert "chore: remove reward import"

This reverts commit b2cf1d8.

* chore: remove accidental svg

* fix(layout): add back `PostHogPageViews`

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* feat(CopyableAddress): add tooltip

* feat: `NetworkModal` migration

* feat: `Accordion` component

* temporarily remove `CircularDependencyPlugin`

* move `platformMergeAlertAtom` to `atoms.ts`

* fix(useUserPublic): comment posthog related stuff

* chore: remove package-json

* feat: `FarcasterProfile` component

* fix ring color in light mode

* fix: remove ring offset

* fix: connect Farcaster button colors

* feat: define css vars for every platform type

* fix(SocialAccount): use the correct button colors

* fix: solve css overlay

* feat: add anchor element to page

* feat: add layout, search refactor

* refactor: extract query atom

* feat: add your guilds

* fix(build): add missing dep

* fix(build): add suspense boundary, auth check

* fix(build): move out suspense boundary

* fix(a11y): add padding to verified badge, extract signin button

* refactor: move layout into one file

* chore!: delete changes

* style: apply biome check

* chore: add hooks

* chore: merge playground

* chore: pull useIsStuck

* chore: remove conflicting explorer page

* chore: fix ts errors

* chore: pull UserGuildPins

* chore: update account inside layout

* fix(GuildCard): styling

* fix(GuildSearchBar): fine-tune styles

* fix(explorer): small refactor & styling improvements

* refactor(explorer): prefetch guilds on the server

* fix: use the default phosphor icons

* Revert "fix: use the default phosphor icons"

This reverts commit 468ee90.

* fix(GuildInfiniteScroll): use the `useFetcherWithSign` hook

* fix(WalletSelectorModal): highlighted "learn more" link

* feat(StickyBar): add smooth scroll

* fix(Toggle): default variant - `state=on` style

* chore: add aria label to wcm modal

* chore: move setAttribute

* chore: remove robots.txt duplicate, add new layout

* fix(a11y): adjust colors to metrics

* fix: offset and color banner properly

* chore: make button semibold

* chore: fix robots.txt

* Revert "chore: fix robots.txt"

This reverts commit 46cf099.

* chore: remove unused explorer-related components

* fix(GuildSearchBar): increase debounce time

* fix(HeaderBackground): background height on mobile

* fix(Explorer): only show the "Your guilds" section if the user has a keypair

* fix(StickyBar): add `/create-guild` link

* fix(GuildSearchBar): add smooth scroll

* cleanup(YourGuilds): use the already existing hook

* fix(explore): spacings & scroll animation

* cleanup(GuildSearchBar): remove comment

* feat(explorer): prefetch top newest guilds too

* refactor: store query state in the URL

* cleanup: remove unused `PageBoundary` file

* fix: change observerTarget's aria-label

* cleanup(Web3ConnectionManager): remove unused import

* cleanup(explorer): footer copy

* fix(Explorer): wrap `GuildInfiniteScroll` in `Suspense`

* refactor: pass search params down from the explorer page

* fix(GuildSearchBar): remove buggy useEffect

* chore: load images better

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* UI(Dialog): mobile style

* fix(css): darken dark mode skeleton color (#1379)

* chore: delete linux related esbuild plugin (#1380)

* notification fix and cleanup (#1377)

* fix(css): remove horizontal padding

* chore: remove unused files

* fix(layout): add `antialiased` class

* fix(Dialog): close animation

* chore: remove `* as React` imports

* feat(`Dialog`): scrollable body

* fix: recaptcha focus issues

* UI(AccountConnections): whitespace

* UI(Tooltip): medium font-weight

* UI(SharedSocials): border color

* chore: add `AppErrorBoundary` to `Providers` too

* fix(Button): wrap button content in a `span`

* fix(Button): truncate content

* UI(Dialog): header whitespace

* fix(UsersGuildPins): fix element height

* chore: remove the playground page

* fix(HeaderBackground): light mode colors

* feat(`Button`): new  variants (#1384)

* feat(Button): rework variants

* chore: update button variants

* fix: use the new `destructive-subtle-foreground` CSS var

* fix: use secondary buttons & define gap on the main `Button` component

* fix(StickyBar): create guild button color scheme

* default colorScheme to secondary

* UI(NavMenu): logo whitespace

---------

Co-authored-by: valid <valid@zgen.hu>

* feat(Toast): add icons & fine-tune design

* feat(`Badge`): new, fine-tuned variants

* fix(JoinModal): focus management & z-index

* fix(GuildCard): use bold icon

* fix(AccountConnections): define keys

* fix(SharedSocials): define keys

* refactor(AddRewardButton): extract constants & types to separate files

* fix(guild page): Vercel ISR issues (#1391)

* fix(NavMenu): temporarily remove ThemeToggle

* fix(AppErrorBoundary): don't import the error page

* Revert "fix(AppErrorBoundary): don't import the error page"

This reverts commit c4ca416.

* Revert "fix(NavMenu): temporarily remove ThemeToggle"

This reverts commit 1c1bf9f.

* feat: try the `bundlePagesExternals` config option

* chore: package-lock update

* remove `bundlePagesExternals` from next config

* fix(next.config.js): set `bundlePagesExternals` to `true`

* fix(Toaster): icon size

* feat: use `Separator` instead of `hr`

* feat: temporarily add `--max-old-space-size=4096` to the `build` script

* fix(Web3Inbox): if condition & styling issues

* fix: use z-index values from Chakra UI

* refactor: extract route change indicator to its own component

* UI(NavMenu): highlight current path with background too

* UI(Badge): medium font weight

* fix(tailwind config): update dark mode selector

* fix: use the `dark:` modifier everywhere

* v2 a11y concerns and cleanup (#1394)

* fix(a11y): adjust primary color to metrics

* chore: use css instead of legacy html attr

* fix(a11y): adjust colors to metrics

* chore: add aspect-square to GuildLogo

* Revert "chore: add aspect-square to GuildLogo"

This reverts commit 3565f53.

* chore: move antialiased

* feat: add top loading bar

* fix(explorer): use bold icons

* feat: custom error page

* feat(explorer): `Preload` component

* chore: replace GuildLogo by Avatar (#1395)

* chore: replace GuildLogo by Avatar

* chore: add svg sizing feature to Avatar

* chore(css): add image bg and shrink svg more

* chore: replace GuildLogo by Avatar in Account

* chore: remove props from NextImage

* chore: remove unused import

* fix(GuildCard): Avatar `alt` attribute

* fix(SharedSocials): image size

* cleanup(Avatar): remove `shrinkSvg` prop

* fix: preload banner properly

* cleanup: remove the `Preload` component

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

---------

Co-authored-by: Dominik Stumpf <122315398+dominik-stumpf@users.noreply.github.com>
Co-authored-by: Dominik Stumpf <s.dominik.work@gmail.com>
Co-authored-by: valid <valid@zgen.hu>

.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

@@ -22,6 +22,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(
@@ -90,7 +93,13 @@ const nextConfig = {
   },
   experimental: {
     scrollRestoration: true,
-    optimizePackageImports: ["@phosphor-icons/react"],
+    bundlePagesExternals: true,
+    optimizePackageImports: [
+      "@phosphor-icons/react",
+      "@phosphor-icons/react/dist/ssr",
+      "@fuels/react",
+      "fuels",
+    ],
   },
   async rewrites() {
     return {