@thewhatmatters/wmds 0.2.0

package/docs/patterns/sites-whatmatters-rfp-submitted--rfp-submitted.tsx

@@ -0,0 +1,302 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — RFP submitted
+// Storybook: Sites/WhatMatters/RFP submitted → Pattern — RFP submitted (?path=/story/sites-whatmatters-rfp-submitted--rfp-submitted)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState, type FormEvent } from "react";
+import { Check } from "lucide-react";
+import {
+  Badge,
+  Button,
+  Card,
+  ConfettiProvider,
+  Input,
+  Select,
+  TextArea,
+  cardLayoutBodyOccupantInsetXClasses,
+  cardLayoutBodyOccupantPadYClasses,
+  cardSubtitleClasses,
+  cardTitleClasses,
+  cn,
+  useConfettiOnMount,
+} from "@thewhatmatters/wmds";
+
+const projectOptions = [
+  { value: "product", label: "Product" },
+  { value: "brand", label: "Brand" },
+  { value: "engineering", label: "Engineering" },
+] as const;
+
+const budgetOptions = [
+  { value: "25", label: "$25k–$50k" },
+  { value: "50", label: "$50k–$100k" },
+  { value: "100", label: "$100k+" },
+] as const;
+
+const initialBrief =
+  "We need a calm way for clients to request a proposal and see that it landed.";
+
+interface RfpDraft {
+  company: string;
+  email: string;
+  project: string;
+  budget: string;
+  brief: string;
+}
+
+function optionLabel(
+  options: readonly { value: string; label: string }[],
+  value: string,
+): string {
+  return options.find((option) => option.value === value)?.label ?? value;
+}
+
+function RfpConfirmation({
+  submission,
+  onStartAnother,
+}: {
+  submission: RfpDraft;
+  onStartAnother: () => void;
+}) {
+  useConfettiOnMount({
+    particleCount: 90,
+    spread: 180,
+    startVelocity: 28,
+    origin: {
+      x: typeof window === "undefined" ? 0 : window.innerWidth / 2,
+      y: 0,
+    },
+  });
+
+  const summary = [
+    { label: "Company", value: submission.company },
+    { label: "Work email", value: submission.email },
+    { label: "Project", value: optionLabel(projectOptions, submission.project) },
+    { label: "Budget", value: optionLabel(budgetOptions, submission.budget) },
+    { label: "Brief", value: submission.brief },
+  ];
+
+  return (
+    <div className="band py-10">
+      <div className="col-span-full lg:col-span-6 lg:col-start-4">
+        <Card padding="none">
+          <Card.Header
+            start={
+              <div className="flex flex-col items-start gap-2">
+                <Badge variant="success" emphasis="muted" icon={<Check strokeWidth={2} />}>
+                  Request received
+                </Badge>
+                <h1 className="type-heading-2 text-fg">Your proposal request is in</h1>
+                <p className={cardSubtitleClasses}>
+                  We will reply to {submission.email} within two business days.
+                </p>
+              </div>
+            }
+          />
+          <Card.Body>
+            <div
+              className={cn(
+                cardLayoutBodyOccupantInsetXClasses,
+                cardLayoutBodyOccupantPadYClasses,
+                "flex flex-col gap-6",
+              )}
+            >
+              <section className="flex flex-col gap-3">
+                <h2 className="type-label text-fg">What you sent</h2>
+                <dl className="flex flex-col gap-3">
+                  {summary.map((row) => (
+                    <div key={row.label} className="flex flex-col gap-0.5">
+                      <dt className="type-supporting text-muted">{row.label}</dt>
+                      <dd className="type-body text-fg">{row.value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </section>
+              <section className="flex flex-col gap-3">
+                <h2 className="type-label text-fg">What happens next</h2>
+                <ol className="flex list-decimal flex-col gap-2 ps-5">
+                  <li className="type-body text-fg">
+                    We read the brief and match it to the right team.
+                  </li>
+                  <li className="type-body text-fg">You get a reply at the work email above.</li>
+                  <li className="type-body text-fg">If it is a fit, we schedule a short call.</li>
+                </ol>
+              </section>
+              <div>
+                <Button type="button" role="secondary" onClick={onStartAnother}>
+                  Submit another request
+                </Button>
+              </div>
+            </div>
+          </Card.Body>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function RfpForm({
+  company,
+  email,
+  project,
+  budget,
+  brief,
+  submitting,
+  onCompanyChange,
+  onEmailChange,
+  onProjectChange,
+  onBudgetChange,
+  onBriefChange,
+  onSubmit,
+}: {
+  company: string;
+  email: string;
+  project: string;
+  budget: string;
+  brief: string;
+  submitting: boolean;
+  onCompanyChange: (value: string) => void;
+  onEmailChange: (value: string) => void;
+  onProjectChange: (value: string) => void;
+  onBudgetChange: (value: string) => void;
+  onBriefChange: (value: string) => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+}) {
+  return (
+    <div className="band py-10">
+      <div className="col-span-full lg:col-span-6 lg:col-start-4">
+        <Card padding="none">
+          <Card.Header
+            start={
+              <div className="flex flex-col gap-1">
+                <h1 className={cardTitleClasses}>Request a proposal</h1>
+                <p className={cardSubtitleClasses}>
+                  Tell us what you want to build. We reply within two business days.
+                </p>
+              </div>
+            }
+          />
+          <Card.Body>
+            <form
+              className={cn(
+                cardLayoutBodyOccupantInsetXClasses,
+                cardLayoutBodyOccupantPadYClasses,
+                "flex flex-col gap-4",
+              )}
+              onSubmit={onSubmit}
+            >
+              <Input
+                label="Company"
+                name="company"
+                value={company}
+                autoComplete="organization"
+                onChange={(event) => onCompanyChange(event.target.value)}
+                required
+              />
+              <Input
+                label="Work email"
+                name="email"
+                type="email"
+                value={email}
+                autoComplete="email"
+                onChange={(event) => onEmailChange(event.target.value)}
+                required
+              />
+              <Select
+                label="Project"
+                options={[...projectOptions]}
+                value={project}
+                onValueChange={onProjectChange}
+              />
+              <Select
+                label="Budget"
+                options={[...budgetOptions]}
+                value={budget}
+                onValueChange={onBudgetChange}
+              />
+              <TextArea
+                label="What should we build?"
+                name="brief"
+                value={brief}
+                rows={5}
+                onChange={(event) => onBriefChange(event.target.value)}
+                required
+              />
+              <div className="flex justify-end pt-2">
+                <Button
+                  type="submit"
+                  status={submitting ? "loading" : "idle"}
+                  statusLabels={{
+                    idle: "Submit request",
+                    loading: "Sending",
+                  }}
+                >
+                  Submit request
+                </Button>
+              </div>
+            </form>
+          </Card.Body>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function RfpFlow({ onSubmit }: { onSubmit: (draft: RfpDraft) => Promise<void> }) {
+  const [phase, setPhase] = useState<"editing" | "submitting" | "confirmed">("editing");
+  const [company, setCompany] = useState("Northwind");
+  const [email, setEmail] = useState("ava@northwind.example");
+  const [project, setProject] = useState("product");
+  const [budget, setBudget] = useState("50");
+  const [brief, setBrief] = useState(initialBrief);
+  const [submission, setSubmission] = useState<RfpDraft | null>(null);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (phase !== "editing") return;
+    setPhase("submitting");
+    const draft = { company, email, project, budget, brief };
+    await onSubmit(draft);
+    setSubmission(draft);
+    setPhase("confirmed");
+  }
+
+  if (phase === "confirmed" && submission) {
+    return (
+      <RfpConfirmation
+        submission={submission}
+        onStartAnother={() => {
+          setSubmission(null);
+          setPhase("editing");
+        }}
+      />
+    );
+  }
+
+  return (
+    <RfpForm
+      company={company}
+      email={email}
+      project={project}
+      budget={budget}
+      brief={brief}
+      submitting={phase === "submitting"}
+      onCompanyChange={setCompany}
+      onEmailChange={setEmail}
+      onProjectChange={setProject}
+      onBudgetChange={setBudget}
+      onBriefChange={setBrief}
+      onSubmit={handleSubmit}
+    />
+  );
+}
+
+/** `onSubmit` sends the request (your API or form action); the confirmation shows once it resolves. */
+export function RfpSubmitted({ onSubmit }: { onSubmit: (draft: RfpDraft) => Promise<void> }) {
+  return (
+    <ConfettiProvider>
+      <main className="grid-page min-h-dvh bg-body [--grid-column-gap:24px] [--grid-max:80rem]">
+        <RfpFlow onSubmit={onSubmit} />
+      </main>
+    </ConfettiProvider>
+  );
+}

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@thewhatmatters/wmds",
+  "description": "WhatMatters Design System — React components, Tailwind v4 theme, and Storybook patterns",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thewhatmatters/wmds.git"
+  },
+  "homepage": "https://github.com/thewhatmatters/wmds#readme",
+  "bugs": {
+    "url": "https://github.com/thewhatmatters/wmds/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "wmds-check": "bin/wmds-check.mjs"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "docs/README.md",
+    "docs/consumer-agents.md",
+    "docs/components.md",
+    "docs/component-contracts.md",
+    "docs/exports.json",
+    "docs/patterns",
+    "public/rive/interactive-icon-set.riv",
+    "public/rive/CREDITS.md",
+    "README.md",
+    "CONSUMING.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./dist/theme.css",
+    "./colors.css": "./dist/colors.css",
+    "./motion.css": "./dist/motion.css",
+    "./typography.css": "./dist/typography.css",
+    "./stateColors.css": "./dist/stateColors.css",
+    "./grid.css": "./dist/grid.css",
+    "./shape.css": "./dist/shape.css",
+    "./scrollFade.css": "./dist/scrollFade.css",
+    "./docs/*": "./docs/*",
+    "./CHANGELOG.md": "./CHANGELOG.md",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "node scripts/build-package.mjs",
+    "build:app": "tsc -b && vite build",
+    "prepare": "npm run build",
+    "lint": "oxlint",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test:unit": "vitest --project unit run",
+    "test:storybook": "vitest --project storybook run",
+    "test:interactions": "vitest --project storybook run",
+    "validate:composition": "vitest --project unit run src/lib/compositionAudit.test.ts",
+    "validate:manifest": "node scripts/validate-manifest.mjs",
+    "validate:case": "node scripts/check-case-collisions.mjs",
+    "typecheck": "tsc -b",
+    "check:pack": "node scripts/check-pack.mjs",
+    "check:changelog": "node scripts/check-changelog.mjs",
+    "docs:generate": "node scripts/generate-package-docs.mjs",
+    "check:docs": "node scripts/generate-package-docs.mjs --check",
+    "check:show-code": "node scripts/check-show-code.mjs"
+  },
+  "peerDependencies": {
+    "@visx/visx": "^4.0.0",
+    "lucide-react": "^1.33.0",
+    "motion": "^13.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.3.0",
+    "@fontsource-variable/geist": "^5.2.8",
+    "@fontsource-variable/geist-mono": "^5.2.8",
+    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-mcp": "^0.7.0",
+    "@storybook/addon-vitest": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@visx/visx": "^4.0.0",
+    "@vitejs/plugin-react": "^6.0.4",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "happy-dom": "^20.14.5",
+    "lucide-react": "^1.33.0",
+    "motion": "^13.1.1",
+    "oxlint": "^1.75.0",
+    "playwright": "^1.62.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "storybook": "^10.5.10",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.11"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@gsap/react": "^2.1.2",
+    "@rive-app/react-canvas": "^4.35.0",
+    "gsap": "^3.15.0"
+  }
+}

package/public/rive/CREDITS.md

@@ -0,0 +1,13 @@
+# interactive-icon-set.riv
+
+Remix of the Rive **Interactive Icon Set**.
+
+Original work by **Silvia Sguotti** and **Gabriele Montinaro**.
+Licensed under [Creative Commons Attribution 4.0 International (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/).
+
+WMDS uses two artboards from this file:
+
+- `29_Rock` — rock-on hand
+- `31_Cigarette` — pointing / peace hand. The cigarette has been removed. Code and names call this the **point** hand.
+
+Each artboard plays state machine `State Machine 1`. The legacy boolean input `Boolean 1` toggles the interaction. View model `View Model 1` exposes `handFill` and `outline`.