chore: externalize components and add stories

.storybook/preview.tsx

@@ -3,6 +3,7 @@ import type { Preview } from '@storybook/react-vite'
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
 import { ThemeProvider } from 'next-themes'
 import { I18nextProvider } from 'react-i18next'
+import { MemoryRouter } from 'react-router-dom'
 import { CoreTypes, GlobalTypes } from 'storybook/internal/csf'
 import i18n from '../src/i18n/config'
 import '../src/index.css'
@@ -63,6 +64,24 @@ const preview: Preview = {
     },
   },
 }
+
+const withTheme = (Story: React.ComponentType, context: GlobalContext) => {
+  const { backgrounds } = context.globals
+  return (
+    <ThemeProvider forcedTheme={backgrounds.value}>
+      <Story />
+    </ThemeProvider>
+  )
+}
+
+const withMemoryRouter = (Story: React.ComponentType, context: GlobalContext) => {
+  return (
+    <MemoryRouter>
+      <Story />
+    </MemoryRouter>
+  )
+}
+
 const withI18next = (Story: React.ComponentType, context: GlobalContext) => {
   const { locale } = context.globals
 
@@ -79,15 +98,6 @@ const withI18next = (Story: React.ComponentType, context: GlobalContext) => {
   )
 }
 
-const withTheme = (Story: React.ComponentType, context: GlobalContext) => {
-  const { backgrounds } = context.globals
-  return (
-    <ThemeProvider forcedTheme={backgrounds.value}>
-      <Story />
-    </ThemeProvider>
-  )
-}
-
 // Use only when necessary! Try to pass data from queries to
 // components so they can be tested independently from an API.
 export const withQueryClient = (Story: React.ComponentType) => {
@@ -100,6 +110,6 @@ export const withQueryClient = (Story: React.ComponentType) => {
 }
 
 // export decorators for storybook to wrap your stories in
-export const decorators = [withTheme, withI18next]
+export const decorators = [withTheme, withMemoryRouter, withI18next]
 
 export default preview

package.json

@@ -87,7 +87,7 @@
     "zustand": "5.0.10"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.1.3",
+    "@chromatic-com/storybook": "5.0.0",
     "@eslint/js": "9.39.2",
     "@playwright/test": "1.57.0",
     "@storybook/addon-a11y": "10.1.11",

src/App.tsx

@@ -4,7 +4,6 @@ import { lockwalletOptions } from '@joinmarket-webui/joinmarket-api-ts/@tanstack
 import { token } from '@joinmarket-webui/joinmarket-api-ts/jm'
 import { QueryClientProvider, useQuery } from '@tanstack/react-query'
 import type { TFunction } from 'i18next'
-import { Loader2Icon } from 'lucide-react'
 import { ThemeProvider } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 import {
@@ -18,11 +17,11 @@ import {
 } from 'react-router-dom'
 import { toast } from 'sonner'
 import { useStore } from 'zustand'
-import CreateWalletPage from '@/components/CreateWalletPage'
 import LoginPage from '@/components/LoginPage'
 import { LogsPage } from '@/components/LogsPage'
 import MainWalletPage from '@/components/MainWalletPage'
 import SwitchWalletPage from '@/components/SwitchWalletPage'
+import CreateWalletPage from '@/components/create/CreateWalletPage'
 import { EarnPage } from '@/components/earn/EarnPage'
 import ErrorPage from '@/components/error/ErrorPage'
 import { Layout } from '@/components/layout/Layout'
@@ -45,6 +44,7 @@ import { queryClient } from '@/lib/queryClient'
 import { setIntervalDebounced, walletDisplayName, type WalletFileName } from '@/lib/utils'
 import { authStore } from '@/store/authStore'
 import { jamSettingsStore } from '@/store/jamSettingsStore'
+import { Spinner } from './components/ui/spinner'
 import { WalletJarsDetailsPage } from './components/wallet/WalletJarsDetailsPage'
 import { JamSessionInfoContextProvider } from './context/JamSessionInfoContextProvider'
 
@@ -202,7 +202,7 @@ const Loading = () => {
   const { t } = useTranslation()
   return (
     <div className="m-2 flex items-center justify-center gap-2">
-      <Loader2Icon className="h-4 w-4 animate-spin motion-reduce:hidden" />
+      <Spinner className="motion-reduce:hidden" />
       {t('global.loading')}
     </div>
   )