@thewhatmatters/wmds 0.2.0 → 0.3.0

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

@@ -1,234 +0,0 @@
-// @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

@@ -1,87 +0,0 @@
-// @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>
-  );
-}