@thewhatmatters/wmds 0.2.0

package/docs/patterns/sites-whatmatters-intake--start-a-project-pattern.tsx

@@ -0,0 +1,234 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — start a project
+// Storybook: Sites/WhatMatters/Intake → Pattern — start a project (?path=/story/sites-whatmatters-intake--start-a-project-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import {
+  Button,
+  CalEmbed,
+  ConfettiProvider,
+  IntakeConfirmation,
+  IntakeForm,
+  IntakeModal,
+  PillGroup,
+  SegmentedControl,
+  SelectableCard,
+  intakeAboutEmpty,
+  intakeDetailsMax,
+  isIntakeAboutValid,
+  type IntakeAboutValues,
+} from "@thewhatmatters/wmds";
+
+export const intakeNeeds = [
+  {
+    value: "brand",
+    title: "Brand identity",
+    description: "Name, mark, and a system you can actually use.",
+  },
+  {
+    value: "website",
+    title: "Website",
+    description: "A site that explains the work and earns the next conversation.",
+  },
+  {
+    value: "product",
+    title: "Product design",
+    description: "Flows, screens, and the details in between.",
+  },
+  {
+    value: "marketing",
+    title: "Marketing site",
+    description: "A campaign page with one clear ask.",
+  },
+  {
+    value: "system",
+    title: "Design system",
+    description: "Components, tokens, and the rules that keep them honest.",
+  },
+  {
+    value: "other",
+    title: "Other",
+    description: "Something that does not fit the list yet.",
+  },
+] as const;
+
+export const intakeBudgets = [
+  { value: "under-10", label: "<$10k", emphasis: "solid" },
+  { value: "10-25", label: "$10–25k", emphasis: "solid" },
+  { value: "25-50", label: "$25–50k", emphasis: "solid" },
+  { value: "50-plus", label: "$50k+", emphasis: "solid" },
+  { value: "unsure", label: "Not sure yet", emphasis: "muted" },
+] as const;
+
+export type IntakeStep = 1 | 2 | 3 | 4;
+
+export type IntakePhase =
+  | { kind: "step"; step: IntakeStep }
+  | { kind: "done"; variant: "booked" | "emailed" };
+
+export function canContinueIntake(input: {
+  step: IntakeStep;
+  needs: readonly string[];
+  budget: string | null;
+  about: IntakeAboutValues;
+}): boolean {
+  if (input.step === 1) {
+    return input.needs.length > 0;
+  }
+  if (input.step === 2) {
+    return input.budget != null;
+  }
+  if (input.step === 3) {
+    return isIntakeAboutValid(input.about, intakeDetailsMax);
+  }
+  return false;
+}
+
+export function StartAProject({ initialOpen = true }: { initialOpen?: boolean }) {
+  const [open, setOpen] = useState(initialOpen);
+  const [phase, setPhase] = useState<IntakePhase>({ kind: "step", step: 1 });
+  const [mode, setMode] = useState("fresh");
+  const [needs, setNeeds] = useState<string[]>([]);
+  const [budget, setBudget] = useState<string | null>(null);
+  const [about, setAbout] = useState<IntakeAboutValues>(intakeAboutEmpty);
+
+  function openIntake() {
+    setPhase({ kind: "step", step: 1 });
+    setMode("fresh");
+    setNeeds([]);
+    setBudget(null);
+    setAbout(intakeAboutEmpty);
+    setOpen(true);
+  }
+
+  const step = phase.kind === "step" ? phase.step : 4;
+  const continueDisabled =
+    phase.kind !== "step" ||
+    !canContinueIntake({ step: phase.step, needs, budget, about });
+
+  function goBack() {
+    if (phase.kind !== "step" || phase.step === 1) {
+      return;
+    }
+    const previous = (phase.step - 1) as IntakeStep;
+    setPhase({ kind: "step", step: previous });
+  }
+
+  function goContinue() {
+    if (phase.kind !== "step" || !canContinueIntake({ step: phase.step, needs, budget, about })) {
+      return;
+    }
+    if (phase.step === 4) {
+      return;
+    }
+    const next = (phase.step + 1) as IntakeStep;
+    setPhase({ kind: "step", step: next });
+  }
+
+  return (
+    <ConfettiProvider>
+      <Button role="primary" type="button" onClick={openIntake}>
+        Start a project
+      </Button>
+      <IntakeModal
+        open={open}
+        onOpenChange={setOpen}
+        step={step}
+        steps={4}
+        showProgress={phase.kind === "step"}
+        hideFooter={phase.kind === "done"}
+        hideContinue={phase.kind === "step" && phase.step === 4}
+        backDisabled={phase.kind !== "step" || phase.step === 1}
+        continueDisabled={continueDisabled}
+        onBack={goBack}
+        onContinue={goContinue}
+      >
+        {phase.kind === "done" ? (
+          <IntakeConfirmation variant={phase.variant} onDone={() => setOpen(false)} />
+        ) : null}
+        {phase.kind === "step" && phase.step === 1 ? (
+          <>
+            <div className="flex flex-col gap-3">
+              <h2 className="type-heading-1 text-fg tracking-tight">What do you need?</h2>
+              <p className="type-body text-fg">
+                Pick everything that fits. We&apos;ll shape the work around it.
+              </p>
+            </div>
+            <SelectableCard.Group
+              label="What do you need?"
+              values={needs}
+              onValuesChange={setNeeds}
+              toggle={
+                <SegmentedControl
+                  aria-label="Project starting point"
+                  layout="hug"
+                  value={mode}
+                  onValueChange={setMode}
+                >
+                  <SegmentedControl.Item value="fresh">Starting fresh</SegmentedControl.Item>
+                  <SegmentedControl.Item value="refresh">Refreshing what I have</SegmentedControl.Item>
+                </SegmentedControl>
+              }
+            >
+              {intakeNeeds.map((option) => (
+                <SelectableCard
+                  key={option.value}
+                  value={option.value}
+                  title={option.title}
+                  description={option.description}
+                />
+              ))}
+            </SelectableCard.Group>
+          </>
+        ) : null}
+        {phase.kind === "step" && phase.step === 2 ? (
+          <>
+            <div className="flex flex-col gap-3">
+              <h2 className="type-heading-1 text-fg tracking-tight">What&apos;s the budget?</h2>
+              <p className="type-body text-fg">
+                A range is enough. We can tighten it after the first conversation.
+              </p>
+            </div>
+            <PillGroup aria-label="Budget" value={budget} onValueChange={setBudget}>
+              {intakeBudgets.map((option) => (
+                <PillGroup.Item key={option.value} value={option.value} emphasis={option.emphasis}>
+                  {option.label}
+                </PillGroup.Item>
+              ))}
+            </PillGroup>
+          </>
+        ) : null}
+        {phase.kind === "step" && phase.step === 3 ? (
+          <>
+            <div className="flex flex-col gap-3">
+              <h2 className="type-heading-1 text-fg tracking-tight">About you</h2>
+              <p className="type-body text-fg">
+                A few sentences is enough. We&apos;ll reply to the email you leave here.
+              </p>
+            </div>
+            <IntakeForm values={about} onChange={setAbout} />
+          </>
+        ) : null}
+        {phase.kind === "step" && phase.step === 4 ? (
+          <>
+            <div className="flex flex-col gap-3">
+              <h2 className="type-heading-1 text-fg tracking-tight">Book a call</h2>
+              <p className="type-body text-fg">
+                Pick a time, or skip this and we&apos;ll write to you instead.
+              </p>
+            </div>
+            <CalEmbed onSkip={() => setPhase({ kind: "done", variant: "emailed" })}>
+              <Button
+                role="primary"
+                type="button"
+                onClick={() => setPhase({ kind: "done", variant: "booked" })}
+              >
+                Confirm this time
+              </Button>
+            </CalEmbed>
+          </>
+        ) : null}
+      </IntakeModal>
+    </ConfettiProvider>
+  );
+}

package/docs/patterns/sites-whatmatters-marketing-landing--marketing-landing.tsx

@@ -0,0 +1,87 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — marketing landing
+// Storybook: Sites/WhatMatters/Marketing landing → Pattern — marketing landing (?path=/story/sites-whatmatters-marketing-landing--marketing-landing)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, SiteNav } from "@thewhatmatters/wmds";
+import { BookOpen, FileText, History, Mic, Sparkles, Target, Video } from "lucide-react";
+
+export function MarketingLanding() {
+  return (
+    <main className="grid-page min-h-screen bg-body [--grid-column-gap:24px] [--grid-max:80rem]">
+      <SiteNav
+        start={
+          <SiteNav.Brand href="/" aria-label="WhatMatters" icon={<Sparkles />} />
+        }
+        middle={
+          <SiteNav.Links>
+            <SiteNav.Link href="/product" current>Product</SiteNav.Link>
+            <SiteNav.Link href="/pricing">Pricing</SiteNav.Link>
+            <SiteNav.Link href="/customers">Customers</SiteNav.Link>
+            <SiteNav.Menu label="Resources">
+              <SiteNav.MenuSection label="Featured">
+                <SiteNav.Featured
+                  media={<SiteNav.MenuMedia variant="featured" label="Featured story imagery" />}
+                  title="WhatMatters named a Best Software Award winner"
+                  description="How teams cut meeting load without losing alignment — and what we shipped next."
+                  href="/featured"
+                />
+              </SiteNav.MenuSection>
+              <SiteNav.MenuSection label="Read">
+                <ul className="m-0 flex list-none flex-col p-0">
+                  <li className="-mx-6 border-b border-border px-6 pb-5">
+                    <SiteNav.ReadRow
+                      media={<SiteNav.MenuMedia label="Docs imagery" />}
+                      title="Docs"
+                      description="Patterns and APIs for building calm product surfaces."
+                      href="/docs"
+                    />
+                  </li>
+                  <li className="px-0 pt-5">
+                    <SiteNav.ReadRow
+                      media={<SiteNav.MenuMedia label="Opinion imagery" />}
+                      title="Opinion articles"
+                      description="Notes on focus, backlog shape, and shipping what matters."
+                      href="/opinion"
+                    />
+                  </li>
+                </ul>
+              </SiteNav.MenuSection>
+              <SiteNav.MenuSection label="Links">
+                <SiteNav.MenuLinkGrid>
+                  <SiteNav.MenuLink href="/podcast" icon={<Mic />}>Podcast</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="https://youtube.com" icon={<Video />} external>YouTube</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="/webinars" icon={<Target />}>Webinars</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="/changelog" icon={<History />}>Changelog</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="/blog" icon={<FileText />}>Blog</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="/docs" icon={<BookOpen />}>Docs</SiteNav.MenuLink>
+                </SiteNav.MenuLinkGrid>
+              </SiteNav.MenuSection>
+            </SiteNav.Menu>
+          </SiteNav.Links>
+        }
+        end={
+          <>
+            <Button role="ghost" size="sm" render={<a href="/signin" />} className="whitespace-nowrap">Sign in</Button>
+            <Button role="primary" size="sm" render={<a href="/start" />} className="whitespace-nowrap">Get started</Button>
+          </>
+        }
+        mobile={
+          <>
+            <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+            <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+            <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+            <SiteNav.MobileLink href="/blog">Blog</SiteNav.MobileLink>
+          </>
+        }
+      />
+      <div className="band pt-10">
+        <div className="col-span-full flex flex-col gap-6 lg:col-span-8 lg:col-start-3">
+          <h1 className="type-display-2 text-fg">Plan the week around what matters.</h1>
+          <p className="type-body max-w-prose text-muted">
+            WhatMatters turns a noisy backlog into one calm list.
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}