feat: consolidate shared UI and harden browser authority for release

2026-09-08 01:35:05 +02:00
parent ac40774785
commit b75ca34295
143 changed files with 8664 additions and 752 deletions
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { FormGrid, FormLayout, GridItem } from "../src/components/ContentGrid";
+import FormField from "../src/components/FormField";
+import PasswordField from "../src/components/PasswordField";
+import ToggleSwitch from "../src/components/ToggleSwitch";
+import TableActionGroup from "../src/components/table/TableActionGroup";
+import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
+import { AttachmentRulesDataGrid } from "../../../govoplan-campaign/webui/src/features/campaigns/components/AttachmentRulesOverlay";
+import type { AttachmentRule } from "../../../govoplan-campaign/webui/src/features/campaigns/utils/attachments";
+import { generatedTranslations } from "../../../govoplan-campaign/webui/src/i18n/generatedTranslations";
+import "../../../govoplan-campaign/webui/src/styles/campaign-workspace.css";
+
+/** Real shared controls and Campaign attachment editor; no API writes. */
+export default function FormControlLayoutScenario() {
+  const [secret, setSecret] = useState("");
+  const [checked, setChecked] = useState(false);
+  const [rules, setRules] = useState<AttachmentRule[]>([]);
+  return <PlatformLanguageProvider preferredLanguageCode="en" moduleTranslations={[generatedTranslations]}>
+    <main style={{ padding: 16, minWidth: 0 }}>
+      <h1>Shared form-control layout</h1>
+      <FormGrid columns={2} data-testid="mixed-form-grid">
+        <FormField label="Password" help="Leave blank to retain the configured secret.">
+          <PasswordField value={secret} onValueChange={setSecret} generator />
+        </FormField>
+        <ToggleSwitch label="Remove configured secret" checked={checked} onChange={setChecked} disabled={Boolean(secret)} />
+        <FormField label={"Long translated field label with additional context ".repeat(4)}>
+          <input aria-label="Long label field" />
+        </FormField>
+        <FormField label="Short label"><input aria-label="Short label field" /></FormField>
+        <FormField label="Wrapped field"><input aria-label="Wrapped field" /></FormField>
+        <GridItem><ToggleSwitch label="Wrapped switch" checked={checked} onChange={setChecked} /></GridItem>
+      </FormGrid>
+      <FormLayout columns={2} data-testid="mixed-form-layout" onSubmit={(event) => event.preventDefault()}>
+        <FormField label="Other setting"><input aria-label="Other setting" /></FormField>
+        <ToggleSwitch label="Other switch" checked={checked} onChange={setChecked} />
+      </FormLayout>
+      <h2>Global attachments</h2>
+      <div data-testid="global-attachments">
+        <AttachmentRulesDataGrid id="layout-global-attachments" rules={rules}
+          settings={{ apiBaseUrl: "", accessToken: "", apiKey: "" }} campaignId="fixture-campaign"
+          basePaths={[{ id: "fixture-source", name: "Fixture source", path: "fixtures" }]}
+          onChange={setRules} />
+      </div>
+      <h2>Compact actions resist broad consumer styles</h2>
+      <style>{".fixture-broad-button-style .btn { width: 100%; }"}</style>
+      <div className="fixture-broad-button-style" data-testid="compact-action">
+        <TableActionGroup actions={[{ id: "add", label: "Add fixture item", icon: <Plus />, onClick: () => setChecked(true) }]} />
+      </div>
+    </main>
+  </PlatformLanguageProvider>;
+}