@johnnyboy11234/esg-idea-contest 0.3.0 → 0.3.2

package/frontend/src/shared/ui/copy-button.tsx

@@ -0,0 +1,52 @@
+import { CheckIcon, CopyIcon } from "lucide-react"
+import { useEffect, useState } from "react"
+import { Button } from "./button"
+
+/**
+ * Copies `value` to the clipboard. The button has an accessible name of its own
+ * (`label`); the result is announced in a polite live region (WCAG 4.1.3).
+ */
+export function CopyButton({
+  value,
+  label,
+  copiedText,
+  failedText,
+}: {
+  value: string
+  label: string
+  copiedText: string
+  failedText: string
+}) {
+  const [state, setState] = useState<"idle" | "copied" | "failed">("idle")
+  useEffect(() => {
+    if (state === "idle") return
+    const id = setTimeout(() => setState("idle"), 2000)
+    return () => clearTimeout(id)
+  }, [state])
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setState("copied")
+    } catch {
+      setState("failed")
+    }
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="outline"
+        size="icon-sm"
+        aria-label={label}
+        onClick={() => void copy()}
+      >
+        {state === "copied" ? <CheckIcon aria-hidden="true" /> : <CopyIcon aria-hidden="true" />}
+      </Button>
+      <span role="status" className="sr-only">
+        {state === "copied" ? copiedText : state === "failed" ? failedText : ""}
+      </span>
+    </>
+  )
+}

package/frontend/src/shared/ui/native-select.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { cn } from "./utils"
+
+/** A styled native <select>: keyboard, screen-reader and mobile behaviour stay the browser's. */
+function NativeSelect({ className, ...props }: React.ComponentProps<"select">) {
+  return (
+    <div className="relative w-full">
+      <select
+        data-slot="native-select"
+        className={cn(
+          "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 pr-9 pl-3 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+          className
+        )}
+        {...props}
+      />
+      <ChevronDownIcon
+        aria-hidden="true"
+        className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 opacity-50"
+      />
+    </div>
+  )
+}
+
+export { NativeSelect }

package/frontend/src/shared/ui/textarea.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { cn } from "./utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/frontend/src/test-setup.ts

@@ -1,6 +1,41 @@
 import '@testing-library/jest-dom/vitest';
+import { File as NodeFile } from 'node:buffer';
+import { FormData as NodeFormData, Response as NodeResponse } from 'undici';
 import { server } from '@/shared/api/mocks/server';
 
-beforeAll(() => server.listen({ onUnhandledFrame: 'error' }));
+/**
+ * jsdom replaces FormData/File with its own classes, which Node's fetch cannot
+ * serialise (the multipart body is never written, so MSW fails with "Premature
+ * close"). Real browsers send a FormData natively; here the jsdom one is encoded
+ * to multipart bytes (by undici's Response) just before the request reaches MSW.
+ * Installed after `server.listen()` so that it sits on top of MSW's own fetch
+ * interceptor.
+ */
+async function encodeMultipart(body: FormData): Promise<{ bytes: ArrayBuffer; contentType: string }> {
+  const out = new NodeFormData();
+  for (const [key, value] of body.entries()) {
+    if (typeof value === 'string') out.append(key, value);
+    else out.append(key, new NodeFile([await value.arrayBuffer()], value.name, { type: value.type }));
+  }
+  const res = new NodeResponse(out);
+  return { bytes: await res.arrayBuffer(), contentType: res.headers.get('content-type') ?? '' };
+}
+
+let mswFetch: typeof fetch;
+
+beforeAll(() => {
+  server.listen({ onUnhandledFrame: 'error' });
+  mswFetch = globalThis.fetch;
+  globalThis.fetch = async (input, init) => {
+    if (!(init?.body instanceof FormData)) return mswFetch(input, init);
+    const { bytes, contentType } = await encodeMultipart(init.body);
+    const headers = new Headers(init.headers);
+    headers.set('Content-Type', contentType);
+    return mswFetch(input, { ...init, headers, body: bytes });
+  };
+});
 afterEach(() => server.resetHandlers());
-afterAll(() => server.close());
+afterAll(() => {
+  globalThis.fetch = mswFetch;
+  server.close();
+});

package/frontend/vite.config.ts

@@ -5,10 +5,12 @@ import { defineConfig } from 'vitest/config';
 
 const src = fileURLToPath(new URL('./src', import.meta.url));
 const testdata = fileURLToPath(new URL('../testdata', import.meta.url));
+// The backend's bundled common-password list (PRD §6.4): one file for both sides, lazy-loaded by the register page.
+const passwords = fileURLToPath(new URL('../backend/internal/account/internal/passwords', import.meta.url));
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],
-  resolve: { alias: { '@': src, testdata } },
+  resolve: { alias: { '@': src, testdata, passwords } },
   server: {
     fs: { allow: ['..'] },
     // The app calls same-origin /api/v1; in dev the Go backend (ESG_PUBLIC_ADDR, default :8080) answers it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnnyboy11234/esg-idea-contest",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "ESG Idea Contest registration system: Go backend, React frontend and design documents (source distribution).",
   "license": "MIT",
   "author": "Brian Huang",

package/testdata/expected-filename.json

@@ -0,0 +1,93 @@
+{
+ "description": "Shared by backend (Go) and frontend (TS). Expected slide filename base per PRD 6.8 and the 255 UTF-8 byte rule of PRD 6.2 (length measured with .pptx). Inputs may be NFD; wantBase is always NFC.",
+ "cases": [
+  {
+   "id": "cool-idea-pdf-example",
+   "category": "COOL_IDEA",
+   "org": "BSID",
+   "leaderName": "\u738b\u5c0f\u660e",
+   "leaderEmpNo": "089290",
+   "ideaName": "\u6210\u7acb\u4f9b\u61c9\u5546\u6c38\u7e8c\u5b78\u9662",
+   "wantBase": "I_BSID_\u738b\u5c0f\u660e_089290_\u6210\u7acb\u4f9b\u61c9\u5546\u6c38\u7e8c\u5b78\u9662",
+   "wantBytes": 56,
+   "wantTooLong": false
+  },
+  {
+   "id": "outstanding-impact-example",
+   "category": "OUTSTANDING_IMPACT",
+   "org": "AAID",
+   "leaderName": "\u838a\u80b2\u6210",
+   "leaderEmpNo": "054616",
+   "ideaName": "AI\u79d8\u5bc6\u6b66\u5668\u667a\u80fd\u5c0d\u8a71",
+   "wantBase": "O_AAID_\u838a\u80b2\u6210_054616_AI\u79d8\u5bc6\u6b66\u5668\u667a\u80fd\u5c0d\u8a71",
+   "wantBytes": 55,
+   "wantTooLong": false
+  },
+  {
+   "id": "name-with-inner-space",
+   "category": "COOL_IDEA",
+   "org": "TSID",
+   "leaderName": "Alice Wang",
+   "leaderEmpNo": "000001",
+   "ideaName": "Green Plant 2.0",
+   "wantBase": "I_TSID_Alice Wang_000001_Green Plant 2.0",
+   "wantBytes": 45,
+   "wantTooLong": false
+  },
+  {
+   "id": "idea-name-nfd-becomes-nfc",
+   "category": "COOL_IDEA",
+   "org": "ICSD",
+   "leaderName": "Zoe",
+   "leaderEmpNo": "000002",
+   "ideaName": "Cafe\u0301 \u30ab\u3099",
+   "wantBase": "I_ICSD_Zoe_000002_Caf\u00e9 \u30ac",
+   "wantBytes": 32,
+   "wantTooLong": false
+  },
+  {
+   "id": "leader-name-nfd-becomes-nfc",
+   "category": "OUTSTANDING_IMPACT",
+   "org": "PLED",
+   "leaderName": "Jose\u0301",
+   "leaderEmpNo": "000003",
+   "ideaName": "Reuse",
+   "wantBase": "O_PLED_Jos\u00e9_000003_Reuse",
+   "wantBytes": 30,
+   "wantTooLong": false
+  },
+  {
+   "id": "exactly-255-bytes",
+   "category": "OUTSTANDING_IMPACT",
+   "org": "AAID",
+   "leaderName": "\u838a\u80b2\u6210",
+   "leaderEmpNo": "054616",
+   "ideaName": "\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275abcd",
+   "wantBase": "O_AAID_\u838a\u80b2\u6210_054616_\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275abcd",
+   "wantBytes": 255,
+   "wantTooLong": false
+  },
+  {
+   "id": "256-bytes-too-long",
+   "category": "OUTSTANDING_IMPACT",
+   "org": "AAID",
+   "leaderName": "\u838a\u80b2\u6210",
+   "leaderEmpNo": "054616",
+   "ideaName": "\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275abcde",
+   "wantBase": "O_AAID_\u838a\u80b2\u6210_054616_\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275\u5275abcde",
+   "wantBytes": 256,
+   "wantTooLong": true
+  },
+  {
+   "id": "emoji-four-byte-too-long",
+   "category": "COOL_IDEA",
+   "org": "DEID",
+   "leaderName": "\u738b\u5c0f\u660e",
+   "leaderEmpNo": "089290",
+   "ideaName": "\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00",
+   "wantBase": "I_DEID_\u738b\u5c0f\u660e_089290_\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00\ud83d\ude00",
+   "wantBytes": 269,
+   "wantTooLong": true
+  }
+ ]
+}