@usgb/forms 0.1.0 → 1.0.0

package/forms-manifest.json

@@ -0,0 +1,249 @@
+{
+    "schemaVersion": "1.0.0",
+    "package": {
+        "name": "@usgb/forms",
+        "compatiblePackageVersions": "^1.0.0"
+    },
+    "submissionContract": {
+        "version": "1.0.0",
+        "transport": "server-proxy",
+        "payloadShape": "data-and-context"
+    },
+    "trackingRegistry": {
+        "page_url": {
+            "destination": "form_submission_url",
+            "category": "page",
+            "collection": "server",
+            "required": true,
+            "states": ["collected", "unavailable"],
+            "description": "Canonical landing-page URL at submission time"
+        },
+        "page_title": {
+            "destination": "pageName",
+            "category": "page",
+            "collection": "server",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "referrer": {
+            "destination": "referrer",
+            "category": "page",
+            "collection": "browser",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "first_touch_url": {
+            "destination": "crossDomain_landing_url",
+            "category": "attribution",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "utm_source": {
+            "destination": "utm_source",
+            "category": "attribution",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "utm_medium": {
+            "destination": "utm_medium",
+            "category": "attribution",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "utm_campaign": {
+            "destination": "utm_campaign",
+            "category": "attribution",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "utm_term": {
+            "destination": "utm_term",
+            "category": "attribution",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "utm_content": {
+            "destination": "utm_content",
+            "category": "attribution",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "gclid": {
+            "destination": "gclid",
+            "category": "click-id",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "msclkid": {
+            "destination": "msclkid",
+            "category": "click-id",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "gbraid": {
+            "destination": "gbraid",
+            "category": "click-id",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "wbraid": {
+            "destination": "wbraid",
+            "category": "click-id",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "hubspot_utk": {
+            "destination": "hubspot_utk",
+            "category": "identity",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable", "consent-withheld"]
+        },
+        "ga_client_id": {
+            "destination": "ga_client_id",
+            "category": "analytics",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable", "consent-withheld"]
+        },
+        "ga_session_id": {
+            "destination": "session_id_start",
+            "category": "analytics",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable", "consent-withheld"]
+        },
+        "snowplow_id": {
+            "destination": "snowplow_id",
+            "category": "analytics",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable", "consent-withheld"]
+        },
+        "vwo_uuid": {
+            "destination": "vwo_uuid",
+            "category": "experiment",
+            "collection": "host-adapter",
+            "required": false,
+            "states": ["collected", "unavailable", "consent-withheld"]
+        },
+        "user_agent": {
+            "destination": "header_http_client_details",
+            "category": "technical",
+            "collection": "server",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        },
+        "ip_address": {
+            "destination": "ipAddress",
+            "category": "technical",
+            "collection": "server",
+            "required": false,
+            "states": ["collected", "unavailable"]
+        }
+    },
+    "forms": {
+        "main-investors-kit": {
+            "definitionVersion": "1",
+            "kind": "lead",
+            "flow": { "type": "single" },
+            "supportedHosts": ["pwa", "wordpress"],
+            "fields": [
+                { "name": "firstname", "required": true, "group": "name" },
+                { "name": "lastname", "required": true, "group": "name" },
+                { "name": "email", "required": true },
+                { "name": "phone", "required": false }
+            ],
+            "trackingFields": [
+                "page_url",
+                "page_title",
+                "referrer",
+                "first_touch_url",
+                "utm_source",
+                "utm_medium",
+                "utm_campaign",
+                "utm_term",
+                "utm_content",
+                "gclid",
+                "msclkid",
+                "gbraid",
+                "wbraid",
+                "hubspot_utk",
+                "ga_client_id",
+                "ga_session_id",
+                "snowplow_id",
+                "vwo_uuid",
+                "user_agent",
+                "ip_address"
+            ],
+            "consent": {
+                "definitionId": "lead-tcpa",
+                "definitionVersion": "1",
+                "required": true,
+                "submitFields": [
+                    "tcpa_form_consent_granted",
+                    "tcpa_form_opt_in_date"
+                ]
+            },
+            "editor": {
+                "label": "Main Investors Kit",
+                "description": "Standard lead form: name, email, phone, TCPA consent. Use on full-width landing pages and PWA kit/sidebar placements.",
+                "whenToUse": "Default kit request. Do not use for affiliate landers or IRA-specific leads.",
+                "whenNotToUse": "Affiliate pages (separate definition). IRA kit (separate definition when added).",
+                "supportedAppearances": ["light", "navy"],
+                "supportedVariants": ["dense", "large", "sidebar", "two-column"]
+            }
+        },
+        "newsletter": {
+            "definitionVersion": "1",
+            "kind": "newsletter",
+            "flow": { "type": "single" },
+            "supportedHosts": ["pwa"],
+            "fields": [{ "name": "email", "required": true }],
+            "trackingFields": [
+                "page_url",
+                "page_title",
+                "referrer",
+                "utm_source",
+                "utm_medium",
+                "utm_campaign",
+                "utm_term",
+                "utm_content"
+            ],
+            "editor": {
+                "label": "Newsletter",
+                "description": "Email-only newsletter signup. No TCPA consent.",
+                "whenToUse": "Footer or landing newsletter capture where only an email is required.",
+                "whenNotToUse": "Lead kits that need name, phone, or TCPA consent.",
+                "supportedAppearances": ["light", "navy"],
+                "supportedVariants": []
+            }
+        }
+    },
+    "hostAdapterContract": {
+        "hosts": ["pwa", "wordpress"],
+        "mayProvide": [
+            "browser cookies",
+            "URL parameters",
+            "page and placement context",
+            "host/store identity"
+        ],
+        "mustNotDefine": [
+            "new tracking keys",
+            "destination property names",
+            "consent definitions",
+            "form fields",
+            "submission endpoints"
+        ]
+    }
+}

package/package.json

@@ -1,61 +1,66 @@
 {
   "name": "@usgb/forms",
-  "version": "0.1.0",
-  "description": "Sample React form components published to npm with OIDC trusted publishing.",
-  "license": "MIT",
+  "version": "1.0.0",
+  "description": "Shared USGB lead-form package for PWA and WordPress",
   "type": "module",
-  "main": "./dist/index.cjs",
+  "license": "UNLICENSED",
+  "files": [
+    "dist",
+    "forms-manifest.json"
+  ],
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./usgb-forms.css": "./dist/usgb-forms.css",
+    "./manifest": "./forms-manifest.json",
+    "./wc": {
+      "import": "./dist/usgb-forms.js"
     }
   },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
   "scripts": {
-    "build": "tsup",
+    "dev": "vite --config vite.playground.config.ts",
+    "build": "node scripts/build.mjs",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run typecheck && npm run test && npm run build"
+    "lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
+    "lint:check": "eslint 'src/**/*.{js,ts,tsx}' --quiet",
+    "format": "prettier --write 'src/**/*.{js,ts,tsx,css,md,json}' '*.md' 'forms-manifest.json'",
+    "format:check": "prettier --check 'src/**/*.{js,ts,tsx,css,md,json}' '*.md' 'forms-manifest.json'",
+    "preview": "vite preview --config vite.playground.config.ts"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
-    "jsdom": "^26.1.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.2",
-    "vitest": "^3.2.4"
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "email-validator": "^2.0.4",
+    "react-hook-form": "^7.54.2"
   },
-  "engines": {
-    "node": ">=22.14.0"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/usgb/forms.git"
-  },
-  "keywords": [
-    "react",
-    "forms",
-    "oidc",
-    "trusted-publishing"
-  ]
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^18.3.16",
+    "@types/react-dom": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.60.0",
+    "@typescript-eslint/parser": "^8.60.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^16.0.0",
+    "prettier": "^2.2.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.4",
+    "vite-plugin-dts": "^4.4.0"
+  }
 }

package/dist/index.cjs

@@ -1,64 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Form: () => Form,
-  TextField: () => TextField
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/Form.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function Form({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { ...props, children });
-}
-
-// src/TextField.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function TextField({
-  label,
-  error,
-  id,
-  name,
-  ...props
-}) {
-  const inputId = id ?? name;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: inputId, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "input",
-      {
-        id: inputId,
-        name,
-        ...props,
-        "aria-invalid": error ? "true" : void 0,
-        "aria-describedby": error && inputId ? `${inputId}-error` : void 0
-      }
-    ),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { id: inputId ? `${inputId}-error` : void 0, role: "alert", children: error }) : null
-  ] });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Form,
-  TextField
-});
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts","../src/Form.tsx","../src/TextField.tsx"],"sourcesContent":["export { Form } from \"./Form\";\nexport type { FormProps } from \"./Form\";\n\nexport { TextField } from \"./TextField\";\nexport type { TextFieldProps } from \"./TextField\";\n","import type { FormHTMLAttributes, ReactNode } from \"react\";\n\nexport type FormProps = FormHTMLAttributes<HTMLFormElement> & {\n  children: ReactNode;\n};\n\nexport function Form({ children, ...props }: FormProps) {\n  return <form {...props}>{children}</form>;\n}\n","import type { InputHTMLAttributes } from \"react\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  label: string;\n  error?: string;\n};\n\nexport function TextField({\n  label,\n  error,\n  id,\n  name,\n  ...props\n}: TextFieldProps) {\n  const inputId = id ?? name;\n\n  return (\n    <div>\n      <label htmlFor={inputId}>{label}</label>\n      <input\n        id={inputId}\n        name={name}\n        {...props}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={error && inputId ? `${inputId}-error` : undefined}\n      />\n      {error ? (\n        <p id={inputId ? `${inputId}-error` : undefined} role=\"alert\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOS;AADF,SAAS,KAAK,EAAE,UAAU,GAAG,MAAM,GAAc;AACtD,SAAO,4CAAC,UAAM,GAAG,OAAQ,UAAS;AACpC;;;ACSI,IAAAA,sBAAA;AAVG,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,UAAU,MAAM;AAEtB,SACE,8CAAC,SACC;AAAA,iDAAC,WAAM,SAAS,SAAU,iBAAM;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QACJ,gBAAc,QAAQ,SAAS;AAAA,QAC/B,oBAAkB,SAAS,UAAU,GAAG,OAAO,WAAW;AAAA;AAAA,IAC5D;AAAA,IACC,QACC,6CAAC,OAAE,IAAI,UAAU,GAAG,OAAO,WAAW,QAAW,MAAK,SACnD,iBACH,IACE;AAAA,KACN;AAEJ;","names":["import_jsx_runtime"]}

package/dist/index.d.cts

@@ -1,15 +0,0 @@
-import * as react from 'react';
-import { FormHTMLAttributes, ReactNode, InputHTMLAttributes } from 'react';
-
-type FormProps = FormHTMLAttributes<HTMLFormElement> & {
-    children: ReactNode;
-};
-declare function Form({ children, ...props }: FormProps): react.JSX.Element;
-
-type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
-    error?: string;
-};
-declare function TextField({ label, error, id, name, ...props }: TextFieldProps): react.JSX.Element;
-
-export { Form, type FormProps, TextField, type TextFieldProps };

package/dist/index.d.ts

@@ -1,15 +0,0 @@
-import * as react from 'react';
-import { FormHTMLAttributes, ReactNode, InputHTMLAttributes } from 'react';
-
-type FormProps = FormHTMLAttributes<HTMLFormElement> & {
-    children: ReactNode;
-};
-declare function Form({ children, ...props }: FormProps): react.JSX.Element;
-
-type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
-    error?: string;
-};
-declare function TextField({ label, error, id, name, ...props }: TextFieldProps): react.JSX.Element;
-
-export { Form, type FormProps, TextField, type TextFieldProps };

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Form.tsx","../src/TextField.tsx"],"sourcesContent":["import type { FormHTMLAttributes, ReactNode } from \"react\";\n\nexport type FormProps = FormHTMLAttributes<HTMLFormElement> & {\n  children: ReactNode;\n};\n\nexport function Form({ children, ...props }: FormProps) {\n  return <form {...props}>{children}</form>;\n}\n","import type { InputHTMLAttributes } from \"react\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  label: string;\n  error?: string;\n};\n\nexport function TextField({\n  label,\n  error,\n  id,\n  name,\n  ...props\n}: TextFieldProps) {\n  const inputId = id ?? name;\n\n  return (\n    <div>\n      <label htmlFor={inputId}>{label}</label>\n      <input\n        id={inputId}\n        name={name}\n        {...props}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={error && inputId ? `${inputId}-error` : undefined}\n      />\n      {error ? (\n        <p id={inputId ? `${inputId}-error` : undefined} role=\"alert\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AAOS;AADF,SAAS,KAAK,EAAE,UAAU,GAAG,MAAM,GAAc;AACtD,SAAO,oBAAC,UAAM,GAAG,OAAQ,UAAS;AACpC;;;ACSI,SACE,OAAAA,MADF;AAVG,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,UAAU,MAAM;AAEtB,SACE,qBAAC,SACC;AAAA,oBAAAA,KAAC,WAAM,SAAS,SAAU,iBAAM;AAAA,IAChC,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QACJ,gBAAc,QAAQ,SAAS;AAAA,QAC/B,oBAAkB,SAAS,UAAU,GAAG,OAAO,WAAW;AAAA;AAAA,IAC5D;AAAA,IACC,QACC,gBAAAA,KAAC,OAAE,IAAI,UAAU,GAAG,OAAO,WAAW,QAAW,MAAK,SACnD,iBACH,IACE;AAAA,KACN;AAEJ;","names":["jsx"]}