UN-4287 [FEAT] Add the v1 text inputs on one field frame

.github/workflows/ci-frontend-lint.yaml

@@ -121,6 +121,18 @@ jobs:
         working-directory: frontend
         run: bun run typecheck
 
+      # src/v1 is excluded from the step above and checked under its own
+      # stricter tsconfig, after scripts/check-v1.mjs rejects non-TS files.
+      - name: Run v1 typecheck
+        working-directory: frontend
+        run: bun run typecheck:v1
+
+      # Biome on src/v1, then the folder import contract, PropTypes and `ant-`
+      # checks in scripts/check-v1.mjs, which `biome ci` cannot express.
+      - name: Run v1 lint
+        working-directory: frontend
+        run: bun run lint:v1
+
   # ci-test.yaml runs the same suite as the rig's `frontend` group, but its
   # tiers skip frontend-only PRs; this job is what gates those.
   vitest:

.gitignore

@@ -41,8 +41,12 @@ eggs/
 lib/
 lib64/
 # The Python `lib/` rule above also matches the frontend's shadcn/ui helper
-# directory (`@/lib/utils` per components.json). Keep that tracked.
+# directory (`@/lib/utils` per components.json), the v1 `lib/` folder and the
+# v1 guardrail fixtures. Keep those tracked, or their files are silently left
+# out of commits.
 !frontend/src/lib/
+!frontend/src/v1/**/lib/
+!frontend/test-fixtures/**/lib/
 parts/
 sdist/
 var/

.pre-commit-config.yaml

@@ -22,9 +22,9 @@ repos:
       - id: check-docstring-first
       - id: check-ast
       - id: check-json
-        # Both files are JSONC — their tooling (VS Code, tsc) allows comments,
+        # These files are JSONC — their tooling (VS Code, tsc) allows comments,
         # but this hook parses with strict `json.loads`, which does not.
-        exclude: "(\\.vscode/launch\\.json|frontend/tsconfig\\.json)$"
+        exclude: "(\\.vscode/launch\\.json|frontend/(src/v1/)?tsconfig\\.json)$"
       - id: check-executables-have-shebangs
       - id: check-shebang-scripts-are-executable
       - id: check-toml

frontend/biome.json

@@ -129,5 +129,77 @@
   "assist": {
     "enabled": true,
     "actions": { "source": { "organizeImports": "on" } }
-  }
+  },
+  "overrides": [
+    {
+      "includes": ["src/v1/**"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noRestrictedImports": {
+              "level": "error",
+              "options": {
+                "paths": {
+                  "prop-types": "v1 is typed with TypeScript; PropTypes are not used under src/v1.",
+                  "antd": "antd is not used under src/v1."
+                },
+                "patterns": [
+                  {
+                    "group": [
+                      "../**",
+                      "..",
+                      "./../**",
+                      "/**",
+                      "@/**",
+                      "src/**"
+                    ],
+                    "message": "v1 imports nothing outside src/v1, and never with '../'. Use './' within a folder and '@v1/...' across folders."
+                  },
+                  {
+                    "group": ["@ant-design/**", "antd/**"],
+                    "message": "antd is not used under src/v1."
+                  },
+                  {
+                    "group": ["prop-types/**"],
+                    "message": "v1 is typed with TypeScript; PropTypes are not used under src/v1."
+                  },
+                  {
+                    "group": ["**/*.css", "!@v1/styles/**"],
+                    "message": "No component .css under src/v1; style with tokens and Tailwind. Global v1 styles live in @v1/styles/."
+                  }
+                ]
+              }
+            }
+          },
+          "suspicious": {
+            "noExplicitAny": "error"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["src/v1/styles/tokens.css"],
+      "formatter": { "enabled": false }
+    },
+    {
+      "includes": ["src/**", "!src/v1/**"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noRestrictedImports": {
+              "level": "error",
+              "options": {
+                "patterns": [
+                  {
+                    "group": ["@v1/**", "**/v1", "**/v1/**", "!@v1"],
+                    "message": "v0 may import only the v1 public entry, as '@v1'."
+                  }
+                ]
+              }
+            }
+          }
+        }
+      }
+    }
+  ]
 }

frontend/jsconfig.json

@@ -2,9 +2,10 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@v1": ["./src/v1/index.ts"]
     }
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "build"]
+  "exclude": ["node_modules", "build", "src/v1"]
 }

frontend/package.json

@@ -77,7 +77,11 @@
     "check:fix": "biome check --write src/",
     "lint:all": "biome check --write src/",
     "lint:changed": "(git diff --name-only --diff-filter=ACMR; git ls-files --others --exclude-standard) | grep -E '\\.[jt]sx?$' | sed 's|^frontend/||' | sort -u | xargs -r biome check --write",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "tokens:v1": "node scripts/build-v1-tokens.mjs",
+    "typecheck:v1": "node scripts/check-v1.mjs --files && tsc -p src/v1/tsconfig.json",
+    "lint:v1": "biome lint src/v1/ && node scripts/check-v1.mjs --code && node scripts/check-v1-styles.mjs",
+    "test:v1": "vitest run --dir src/v1 --passWithNoTests && node --test test-fixtures/v1-boundary/boundary.fixtures.mjs"
   },
   "browserslist": {
     "production": [
@@ -93,6 +97,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.13",
+    "@tailwindcss/node": "4.3.3",
     "@tailwindcss/postcss": "^4",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4",

frontend/scripts/build-v1-tokens.mjs

@@ -0,0 +1,40 @@
+import fs from "node:fs";
+import { registerHooks } from "node:module";
+import path from "node:path";
+
+// Node's ESM resolver needs file extensions; v1 source imports siblings without
+// them (`./theme`), as Vite and tsc expect. Retry such relative imports as `.ts`.
+registerHooks({
+  resolve(specifier, context, nextResolve) {
+    try {
+      return nextResolve(specifier, context);
+    } catch (error) {
+      if (specifier.startsWith(".") && !path.extname(specifier)) {
+        return nextResolve(`${specifier}.ts`, context);
+      }
+      throw error;
+    }
+  },
+});
+
+const { renderTokensCss } = await import("../src/v1/lib/tokens.ts");
+const { TOKENS } = await import("../src/v1/styles/tokens.ts");
+const out = path.join(
+  import.meta.dirname,
+  "..",
+  "src",
+  "v1",
+  "styles",
+  "tokens.css",
+);
+const css = renderTokensCss(TOKENS);
+if (process.argv.includes("--check")) {
+  if (fs.readFileSync(out, "utf8") !== css) {
+    console.error(
+      "src/v1/styles/tokens.css is stale; run `bun run tokens:v1`.",
+    );
+    process.exit(1);
+  }
+} else {
+  fs.writeFileSync(out, css);
+}