test: add storybook to more easily test and show ui changes

.github/workflows/ci.yml

@@ -30,6 +30,9 @@ jobs:
       - name: Run lint and format check
         run: npm run lint
 
+      - name: Run tests
+        run: npm test
+
       - name: Run typecheck and build
         run: npm run build
 

.github/workflows/filecoin-pin-upload.yml

@@ -32,18 +32,6 @@ jobs:
           repository: ${{ github.event.workflow_run.repository.full_name }}
           run-id: ${{ github.event.workflow_run.id }}
 
-      # Temporary allowlist of storage providers that have proven reliable during launch.
-      # This exists to paper over early stability issues while the wider provider ecosystem
-      # catches up. Remove once automatic provider discovery is trustworthy again.
-      # Having a FilOz-approved set of SPs onchain is happening in https://github.com/FilOzone/filecoin-services/issues/291
-      # This PROVIDER_ID set here will be used by the upload action below to override provider selection.
-      - name: Select random known good provider
-        run: |
-          known_good_provider_ids=(2)
-          selected_provider_id=${known_good_provider_ids[$RANDOM % ${#known_good_provider_ids[@]}]}
-          echo "PROVIDER_ID=$selected_provider_id" >> $GITHUB_ENV
-          echo "Selected known good provider ID: $selected_provider_id"
-
       # Upload to Filecoin using the downloaded build artifacts
       # The action will create a CAR file from the downloaded artifacts and upload to Filecoin
       - name: Upload to Filecoin

.gitignore

@@ -30,3 +30,6 @@ next-env.d.ts
 # Environment variables
 .env
 .env.local
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@chromatic-com/storybook',
+    '@storybook/addon-docs',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-a11y',
+    '@storybook/addon-vitest',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview } from '@storybook/react-vite'
+import '../src/index.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+}
+
+export default preview

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview'
+import { setProjectAnnotations } from '@storybook/react-vite'
+import * as projectAnnotations from './preview.ts'
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations])

biome.json

@@ -33,7 +33,9 @@
       "!**/components.d.ts",
       "!**/mockServiceWorker.js",
       "!**/cars",
-      "!**/*.css"
+      "!**/*.css",
+      "!**/*.html",
+      "!**/storybook-static"
     ]
   },
   "vcs": {

index.html

@@ -5,7 +5,7 @@
     <!-- TODO: add proper favicon -->
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>filecoin-pin-website</title>
+    <title>Filecoin Pin Demo</title>
     <!-- TODO: add proper meta description -->
     <meta name="description" content="Filecoin Pin Website">
     <script async src="https://plausible.io/js/pa-DdqgKMNgoi0ZkQCqD5DSZ.js"></script>