Front-end folder reorganisation and Storybook integration for all components

flake.nix

@@ -1,6 +1,6 @@
 {
   inputs = {
-    pkgs.url = "github:nixos/nixpkgs/nixos-23.11";
+    pkgs.url = "github:nixos/nixpkgs/nixos-25.11";
     utils.url = "github:numtide/flake-utils";
     # Provides cargo dependencies.
     fenix = {
@@ -189,7 +189,7 @@
               nasm
               terraform
               rust-toolchain
-              nodejs-18_x
+              nodejs_24
               yarn
               act
               postgresql_14

migration/src/main.rs

@@ -31,26 +31,26 @@ async fn main() -> Result<()> {
 
     let db = Database::connect(Some(1))?;
 
-    //println!("Migrating Image Sources...");
-    //migrate_image_sources(&db).await?;
+    println!("Migrating Image Sources...");
+    migrate_image_sources(&db).await?;
 
     println!("Migrating contributors...");
     contributors::migrate_all(&db).await?;
 
-    //println!("Migrating tags to database...");
-    //tags::migrate_tags(&db).await?;
+    println!("Migrating tags to database...");
+    tags::migrate_tags(&db).await?;
 
-    //println!("Migrating DF1975 and DF2003...");
-    //lexical::migrate_dictionaries(&db).await?;
+    println!("Migrating DF1975 and DF2003...");
+    lexical::migrate_dictionaries(&db).await?;
 
-    //println!("Migrating early vocabularies...");
-    //early_vocab::migrate_all(&db).await?;
+    println!("Migrating early vocabularies...");
+    early_vocab::migrate_all(&db).await?;
 
     //migrate_data(&db).await?;
     println!("Migrating pages...");
     pages::migrate_pages(&db).await?;
 
-    //migrate_data(&db).await?;
+    migrate_data(&db).await?;
 
     // println!("Migrating connections...");
     // connections::migrate_connections(&db).await?;

website/.gitignore

@@ -6,3 +6,6 @@ public/
 out/
 .next/
 dist/
+
+*storybook.log
+storybook-static

website/.node-version

@@ -0,0 +1 @@
+20

website/.storybook/main.ts

@@ -0,0 +1,30 @@
+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-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": "@storybook/react-vite",
+  async viteFinal(config) {
+    config.plugins = config.plugins?.filter(
+      (p: any) => p && (Array.isArray(p) ? p[0] : p).name !== "vite-plugin-ssr"
+    );
+    config.define = {
+      ...config.define,
+      "process.env": {
+        DAILP_USER_POOL: "us-east-1_stub",
+        DAILP_USER_POOL_CLIENT: "stub",
+      },
+    };
+    return config;
+  },
+};
+export default config;

website/.storybook/preview.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react"
+import "@fontsource/charis-sil/400.css"
+import "@fontsource/charis-sil/700.css"
+import "@fontsource/quattrocento-sans/latin.css"
+import "normalize.css"
+import "src/style/global.css"
+import { themeClass } from "../src/theme.css"
+import { createClient, Provider } from "urql"
+import { never } from "wonka"
+import type { Preview } from "@storybook/react-vite"
+
+const mockClient = createClient({
+  url: "http://localhost/graphql",
+  exchanges: [],
+})
+
+mockClient.executeQuery = (() => never) as any
+mockClient.executeMutation = (() => never) as any
+mockClient.executeSubscription = (() => never) as any
+
+// Apply themeClass to document.body so Reakit portals (Dialog, etc.)
+// also inherit CSS custom properties from the theme contract.
+const WithTheme = (Story: React.FC) => {
+  useEffect(() => {
+    document.body.classList.add(themeClass)
+    return () => { document.body.classList.remove(themeClass) }
+  }, [])
+  return (
+    <Provider value={mockClient}>
+      <div className={themeClass}>
+        <Story />
+      </div>
+    </Provider>
+  )
+}
+
+const preview: Preview = {
+  decorators: [WithTheme],
+};
+
+export default preview

website/.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';
+
+// 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]);

website/package.json

@@ -11,7 +11,9 @@
     "build:vite": "vite build && cp -rfT dist/client/ public/",
     "build": "graphql-codegen && npm-run-all --parallel build:vite build:rustdoc && cp -rfT ../target/doc/ public/rustdoc/",
     "serve": "NODE_ENV=production http-server public -p 3001",
-    "generate": "graphql-codegen"
+    "generate": "graphql-codegen",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "sideEffects": false,
   "keywords": [],
@@ -96,7 +98,19 @@
     "typescript": "^4.6.3",
     "typography": "^0.16.19",
     "vite": "^4",
-    "vite-plugin-checker": "^0.5"
+    "vite-plugin-checker": "^0.5",
+    "storybook": "^10.2.17",
+    "@storybook/react-vite": "^10.2.17",
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-vitest": "^10.2.17",
+    "@storybook/addon-a11y": "^10.2.17",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/addon-onboarding": "^10.2.17",
+    "eslint-plugin-storybook": "^10.2.17",
+    "vitest": "^4.1.0",
+    "playwright": "^1.58.2",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.0"
   },
   "browserslist": [
     "supports es6-module",
@@ -123,5 +137,10 @@
   },
   "resolutions": {
     "graphql": "16.8.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }

website/src/auth.tsx

@@ -24,7 +24,7 @@ type UserContextType = {
   }
 }
 
-const UserContext = createContext<UserContextType>({} as UserContextType)
+export const UserContext = createContext<UserContextType>({} as UserContextType)
 
 const userPool = new CognitoUserPool({
   UserPoolId: process.env["DAILP_USER_POOL"] ?? "",

website/src/components/alert/alert.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { fn } from "storybook/test"
+import { Alert } from "./alert"
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Alert",
+  component: Alert,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Example1: Story = {
+  args: {
+    children: "This is an alert message.",
+  },
+}
+
+export const Example2: Story = {
+  args: {
+    children: "This is another alert message.",
+  },
+}

website/src/components/attributions/creative-commons.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { fn } from "storybook/test"
+import { CreativeCommonsBy } from "./creative-commons"
+
+const meta: Meta<typeof CreativeCommonsBy> = {
+  title: "Components/Attributions",
+  component: CreativeCommonsBy,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const OneAuthor: Story = {
+  args: {
+    title: "Example Work",
+    authors: [{ name: "Author One", link: "https://example.com/author-one" }],
+  },
+}
+
+export const TwoAuthors: Story = {
+  args: {
+    title: "Example Work 1",
+    authors: [
+      { name: "Author One", link: "https://example.com/author-one" },
+      { name: "Author Two" },
+    ],
+  },
+}
+
+export const ThreeAuthors: Story = {
+  args: {
+    title: "Example Work 2",
+    authors: [
+      { name: "Author One", link: "https://example.com/author-one" },
+      { name: "Author Two" },
+      { name: "Author Three" },
+    ],
+  },
+}

website/src/components/attributions/creative-commons.tsx

@@ -1,8 +1,8 @@
 import React from "react"
-import Link from "../link"
+import Link from "../link/link"
 import * as css from "./creative-commons.css"
 
-interface Props {
+export interface Props {
   title: string
   authors: Array<{ name: string; link?: string }>
 }

website/src/components/audio-player/audio-player.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { fn } from "storybook/test"
+import { AudioPlayer } from "./audio-player"
+
+const meta: Meta<typeof AudioPlayer> = {
+  title: "Components/AudioPlayer",
+  component: AudioPlayer,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Example1: Story = {
+  args: {
+    audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
+    showProgress: true,
+    slices: { start: 0 },
+    contributor: "John Doe",
+    recordedAt: new Date("2023-01-01T12:00:00Z"),
+  },
+}
+
+export const Example2: Story = {
+  args: {
+    audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
+    showProgress: true,
+    slices: { start: 10, end: 50 },
+    contributor: "John Doe 2",
+    recordedAt: new Date("2025-01-01T12:00:00Z"),
+  },
+}

website/src/components/authenticated-users/account-actions-menu.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { UserGroup } from "src/graphql/dailp"
+import { AccountActionsMenu } from "./account-actions-menu"
+
+const meta: Meta<typeof AccountActionsMenu> = {
+  title: "Components/AccountActionsMenu",
+  component: AccountActionsMenu,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Reader: Story = {
+  args: {},
+}
+
+export const Editor: Story = {
+  args: {
+    groups: [UserGroup.Editors],
+  },
+}
+
+export const MultipleRoles: Story = {
+  args: {
+    groups: [UserGroup.Administrators, UserGroup.Editors],
+  },
+}