Merge pull request #133 from storacha/fix-account-selectors

fix: Account selects are clearer and sturdier

Author: Peeja

.storybook/main.ts

@@ -27,6 +27,9 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-interactions',
+    '@storybook/addon-designs',
+    '@storybook/addon-backgrounds',
+    'storybook-addon-pseudo-states',
     '@chromatic-com/storybook',
   ],
   framework: {

.storybook/preview.tsx

@@ -1,22 +1,52 @@
-import React from 'react'
-import type { Preview } from '@storybook/react'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import React, { CSSProperties } from 'react'
+
+// eslint-disable-next-line import/no-restricted-paths -- This one we need.
 import { dmMono, dmSans, epilogue } from '../src/app/globalStyle'
 
-const withFonts = (Story) => (
-  <div
-    className={`${dmSans.className} ${dmSans.variable} ${dmMono.variable} ${epilogue.variable}`}
-  >
-    <Story />
-  </div>
-)
+import type { Decorator, Preview } from '@storybook/react'
+
+const withFonts: Decorator = (Story) => {
+  const addFonts = (div: HTMLDivElement | null) => {
+    if (div) {
+      div.ownerDocument.documentElement.classList.add(
+        dmSans.className,
+        dmSans.variable,
+        dmMono.variable,
+        epilogue.variable
+      )
+    }
+  }
+  return (
+    <div ref={addFonts}>
+      <Story />
+    </div>
+  )
+}
 
-const withNuqs = (Story) => (
+const withNuqs: Decorator = (Story) => (
   <NuqsAdapter>
     <Story />
   </NuqsAdapter>
 )
 
+declare module '@storybook/react' {
+  interface Parameters {
+    parentSize?: {
+      width?: CSSProperties['width']
+    }
+  }
+}
+
+const withParentSize: Decorator = (Story, { parameters: { parentSize } }) =>
+  parentSize ? (
+    <div style={{ width: parentSize.width }}>
+      <Story />
+    </div>
+  ) : (
+    <Story />
+  )
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -30,7 +60,7 @@ const preview: Preview = {
       appDirectory: true,
     },
   },
-  decorators: [withFonts, withNuqs],
+  decorators: [withFonts, withNuqs, withParentSize],
 }
 
 export default preview

eslint.config.mjs

@@ -31,9 +31,23 @@ const eslintConfig = [
   importRecommendedWithoutPlugin,
   importPlugin.flatConfigs.typescript,
   importPlugin.flatConfigs.react,
+  {
+    files: ['**/*.ts', '**/*.tsx', 'src/app/globalStyle.ts'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      // Disabled until a future PR.
+      // '@typescript-eslint/no-unnecessary-condition': 'warn'
+    },
+  },
   {
     rules: {
       'no-useless-rename': 'warn',
+      'import/first': 'warn',
       // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
       'import/order': [
         'warn',

package.json

@@ -60,13 +60,13 @@
     "proper-url-join": "^2.1.2",
     "react": "^18.0.0",
     "react-aria": "^3.39.0",
+    "react-aria-components": "^1.8.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.54.2",
     "react-merge-refs": "^3.0.1",
     "react-resizable-panels": "^2.1.7",
     "react-responsive": "^10.0.1",
-    "react-select": "^5.10.1",
     "sonner": "^2.0.3",
     "swr": "^2.3.3",
     "the-new-css-reset": "^1.11.3",
@@ -77,6 +77,8 @@
     "@chromatic-com/storybook": "^3.2.5",
     "@dotenvx/dotenvx": "^1.40.1",
     "@eslint/eslintrc": "^3",
+    "@storybook/addon-backgrounds": "^8.6.12",
+    "@storybook/addon-designs": "^8.2.1",
     "@storybook/addon-essentials": "8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-links": "8.6.12",
@@ -102,6 +104,7 @@
     "postgres-shift": "^0.1.0",
     "prettier": "^3.5.3",
     "storybook": "8.6.12",
+    "storybook-addon-pseudo-states": "4.0.3",
     "style-loader": "^4.0.0",
     "typescript": "^5.7.3",
     "webpack": "^5.98.0"