create-backbone-template 0.1.0

package/template/client/packages/design-system-basic/src/heading.stories.tsx

@@ -0,0 +1,14 @@
+import type { Story, StoryDefault } from "@ladle/react"
+import { Heading } from "."
+
+export default {
+  title: "Design System / Heading",
+} satisfies StoryDefault
+
+export const Default: Story<{ children: string; level: 1 | 2 | 3 }> = ({ children, level }) => (
+  <Heading level={level}>{children}</Heading>
+)
+Default.args = {
+  children: "Heading",
+  level: 1,
+}

package/template/client/packages/design-system-basic/src/heading.tsx

@@ -0,0 +1,25 @@
+import type { HeadingComponent } from "@backbone/design-system-contract"
+
+export const Heading: HeadingComponent = ({ children, id, level = 1 }) => {
+  if (level === 2) {
+    return (
+      <h2 className="ds-heading ds-heading--2" id={id}>
+        {children}
+      </h2>
+    )
+  }
+
+  if (level === 3) {
+    return (
+      <h3 className="ds-heading ds-heading--3" id={id}>
+        {children}
+      </h3>
+    )
+  }
+
+  return (
+    <h1 className="ds-heading ds-heading--1" id={id}>
+      {children}
+    </h1>
+  )
+}

package/template/client/packages/design-system-basic/src/index.tsx

@@ -0,0 +1,15 @@
+import "./styles.css"
+
+export * from "./button"
+export * from "./empty-state"
+export * from "./form"
+export * from "./form-field"
+export * from "./heading"
+export * from "./inline"
+export * from "./layout"
+export * from "./loader"
+export * from "./navigation"
+export * from "./notice"
+export * from "./stack"
+export * from "./text"
+export * from "./text-input"

package/template/client/packages/design-system-basic/src/inline.stories.tsx

@@ -0,0 +1,13 @@
+import type { Story, StoryDefault } from "@ladle/react"
+import { Button, Inline, TextInput } from "."
+
+export default {
+  title: "Design System / Inline",
+} satisfies StoryDefault
+
+export const Default: Story = () => (
+  <Inline>
+    <TextInput aria-label="Inline input" placeholder="Inline input" />
+    <Button>Action</Button>
+  </Inline>
+)

package/template/client/packages/design-system-basic/src/inline.tsx

@@ -0,0 +1,5 @@
+import type { InlineComponent } from "@backbone/design-system-contract"
+
+export const Inline: InlineComponent = ({ children }) => {
+  return <div className="ds-inline">{children}</div>
+}

package/template/client/packages/design-system-basic/src/layout.stories.tsx

@@ -0,0 +1,24 @@
+import type { Story, StoryDefault } from "@ladle/react"
+import { Heading, Layout, Stack, Text } from "."
+
+export default {
+  title: "Design System / Layout",
+} satisfies StoryDefault
+
+export const Default: Story<{ middleWidthPx: number }> = ({ middleWidthPx }) => (
+  <Layout
+    middle={
+      <Stack gap="md">
+        <Text variant="eyebrow">Layout</Text>
+        <Heading level={2}>Centered content column</Heading>
+        <Text tone="muted">
+          The layout component centers one primary content region and constrains its width.
+        </Text>
+      </Stack>
+    }
+    middleWidthPx={middleWidthPx}
+  />
+)
+Default.args = {
+  middleWidthPx: 680,
+}

package/template/client/packages/design-system-basic/src/layout.tsx

@@ -0,0 +1,14 @@
+import type { LayoutComponent } from "@backbone/design-system-contract"
+import type { CSSProperties } from "react"
+
+export const Layout: LayoutComponent = ({ middle, middleWidthPx = 680 }) => {
+  const middleStyle = { "--ds-middle-width": `${middleWidthPx}px` } as CSSProperties
+
+  return (
+    <main className="ds-layout">
+      <section className="ds-layout__middle" style={middleStyle}>
+        {middle}
+      </section>
+    </main>
+  )
+}

package/template/client/packages/design-system-basic/src/loader.stories.tsx

@@ -0,0 +1,8 @@
+import type { StoryDefault } from "@ladle/react"
+import { Loader } from "."
+
+export default {
+  title: "Design System / Loader",
+} satisfies StoryDefault
+
+export const Default = () => <Loader message="Loading hello-world inputs..." />

package/template/client/packages/design-system-basic/src/loader.tsx

@@ -0,0 +1,11 @@
+import type { LoaderComponent } from "@backbone/design-system-contract"
+import { Text } from "./text"
+
+export const Loader: LoaderComponent = ({ message }) => {
+  return (
+    <section aria-busy="true" aria-live="polite" className="ds-loader">
+      <span className="ds-loader__spinner" />
+      <Text tone="muted">{message}</Text>
+    </section>
+  )
+}

package/template/client/packages/design-system-basic/src/navigation.stories.tsx

@@ -0,0 +1,16 @@
+import type { StoryDefault } from "@ladle/react"
+import { Navigation } from "."
+
+export default {
+  title: "Design System / Navigation",
+} satisfies StoryDefault
+
+export const Default = () => (
+  <Navigation
+    currentHref="/hello"
+    items={[
+      { href: "/hello", label: "Hello" },
+      { href: "/history", label: "History" },
+    ]}
+  />
+)

package/template/client/packages/design-system-basic/src/navigation.tsx

@@ -0,0 +1,18 @@
+import type { NavigationComponent } from "@backbone/design-system-contract"
+
+export const Navigation: NavigationComponent = ({ currentHref, items }) => {
+  return (
+    <nav aria-label="Primary navigation" className="ds-navigation">
+      {items.map((item) => (
+        <a
+          aria-current={item.href === currentHref ? "page" : undefined}
+          className="ds-navigation__link"
+          href={item.href}
+          key={item.href}
+        >
+          {item.label}
+        </a>
+      ))}
+    </nav>
+  )
+}

package/template/client/packages/design-system-basic/src/notice.stories.tsx

@@ -0,0 +1,13 @@
+import type { Story, StoryDefault } from "@ladle/react"
+import { Notice } from "."
+
+export default {
+  title: "Design System / Notice",
+} satisfies StoryDefault
+
+export const Default: Story<{ children: string }> = ({ children }) => (
+  <Notice tone="danger">{children}</Notice>
+)
+Default.args = {
+  children: "Something needs attention.",
+}

package/template/client/packages/design-system-basic/src/notice.tsx

@@ -0,0 +1,5 @@
+import type { NoticeComponent } from "@backbone/design-system-contract"
+
+export const Notice: NoticeComponent = ({ children, tone }) => {
+  return <p className={`ds-notice ds-notice--${tone}`}>{children}</p>
+}

package/template/client/packages/design-system-basic/src/stack.stories.tsx

@@ -0,0 +1,17 @@
+import type { Story, StoryDefault } from "@ladle/react"
+import { Stack, Text } from "."
+
+export default {
+  title: "Design System / Stack",
+} satisfies StoryDefault
+
+export const Default: Story<{ gap: "sm" | "md" | "lg" }> = ({ gap }) => (
+  <Stack gap={gap}>
+    <Text>First stacked item</Text>
+    <Text tone="muted">Second stacked item</Text>
+    <Text tone="accent">Third stacked item</Text>
+  </Stack>
+)
+Default.args = {
+  gap: "md",
+}

package/template/client/packages/design-system-basic/src/stack.tsx

@@ -0,0 +1,5 @@
+import type { StackComponent } from "@backbone/design-system-contract"
+
+export const Stack: StackComponent = ({ children, gap = "md" }) => {
+  return <div className={`ds-stack ds-stack--${gap}`}>{children}</div>
+}

package/template/client/packages/design-system-basic/src/styles.css

@@ -0,0 +1,254 @@
+:root {
+  color: #172033;
+  background: #f7f9fc;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+}
+
+.ds-navigation {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.25rem;
+  border-bottom: 1px solid #d9e1ec;
+  background: #ffffff;
+  padding: 0.75rem 1rem;
+}
+
+.ds-navigation__link {
+  border-radius: 6px;
+  padding: 0.55rem 0.8rem;
+  color: #26354d;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.ds-navigation__link[aria-current="page"] {
+  background: #e9f2ef;
+  color: #245c51;
+}
+
+.ds-layout {
+  display: grid;
+  min-height: calc(100vh - 4rem);
+  place-items: center;
+  padding: 2rem;
+}
+
+.ds-layout__middle {
+  width: min(100%, var(--ds-middle-width));
+}
+
+.ds-stack {
+  display: grid;
+}
+
+.ds-stack--sm {
+  gap: 0.65rem;
+}
+
+.ds-stack--md {
+  gap: 1rem;
+}
+
+.ds-stack--lg {
+  gap: 1.5rem;
+}
+
+.ds-inline {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+}
+
+.ds-text {
+  margin: 0;
+}
+
+.ds-text--eyebrow {
+  color: #2f6f62;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.ds-text--lede {
+  max-width: 48rem;
+  color: #4d5c73;
+  font-size: 1.125rem;
+  line-height: 1.7;
+}
+
+.ds-text--body {
+  color: #172033;
+  line-height: 1.5;
+}
+
+.ds-text--muted {
+  color: #4d5c73;
+}
+
+.ds-text--accent {
+  color: #2f6f62;
+}
+
+.ds-text--danger {
+  color: #a23232;
+}
+
+.ds-heading {
+  margin: 0;
+  color: #0c1322;
+}
+
+.ds-heading--1 {
+  font-size: clamp(2.35rem, 8vw, 5rem);
+  line-height: 0.95;
+}
+
+.ds-heading--2 {
+  font-size: 2rem;
+  line-height: 1.05;
+}
+
+.ds-heading--3 {
+  font-size: 1.35rem;
+  line-height: 1.15;
+}
+
+.ds-form {
+  display: grid;
+  gap: 0.65rem;
+  max-width: 30rem;
+  margin-top: 0.5rem;
+}
+
+.ds-field {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.ds-field__label {
+  color: #28364f;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+.ds-input,
+.ds-button {
+  min-height: 2.75rem;
+  border-radius: 6px;
+  font: inherit;
+}
+
+.ds-input {
+  width: 100%;
+  border: 1px solid #c7d1df;
+  background: #ffffff;
+  padding: 0 0.8rem;
+  color: #172033;
+}
+
+.ds-button {
+  border: 0;
+  padding: 0 1rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.ds-button--primary {
+  background: #2f6f62;
+  color: #ffffff;
+}
+
+.ds-button--secondary {
+  border: 1px solid #b7c3d4;
+  background: #ffffff;
+  color: #26354d;
+}
+
+.ds-button--danger {
+  background: #a23232;
+  color: #ffffff;
+}
+
+.ds-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.ds-button--loading:disabled {
+  cursor: progress;
+}
+
+.ds-empty-state {
+  display: grid;
+  gap: 1rem;
+  border: 1px dashed #b7c3d4;
+  border-radius: 8px;
+  padding: 1.25rem;
+  background: #ffffff;
+}
+
+.ds-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.ds-loader {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 4rem;
+}
+
+.ds-loader__spinner {
+  width: 1.15rem;
+  height: 1.15rem;
+  border: 2px solid #c7d1df;
+  border-top-color: #2f6f62;
+  border-radius: 999px;
+  animation: ds-loader-spin 0.8s linear infinite;
+}
+
+@keyframes ds-loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ds-notice {
+  margin: 0;
+}
+
+.ds-notice--danger {
+  color: #a23232;
+}
+
+@media (max-width: 520px) {
+  .ds-inline {
+    grid-template-columns: 1fr;
+  }
+}

package/template/client/packages/design-system-basic/src/text-input.stories.tsx

@@ -0,0 +1,13 @@
+import type { Story, StoryDefault } from "@ladle/react"
+import { TextInput } from "."
+
+export default {
+  title: "Design System / TextInput",
+} satisfies StoryDefault
+
+export const Default: Story<{ placeholder: string }> = ({ placeholder }) => (
+  <TextInput aria-label="Text input" placeholder={placeholder} />
+)
+Default.args = {
+  placeholder: "World",
+}

package/template/client/packages/design-system-basic/src/text-input.tsx

@@ -0,0 +1,5 @@
+import type { TextInputComponent } from "@backbone/design-system-contract"
+
+export const TextInput: TextInputComponent = (props) => {
+  return <input className="ds-input" {...props} />
+}

package/template/client/packages/design-system-basic/src/text.stories.tsx

@@ -0,0 +1,21 @@
+import type { Story, StoryDefault } from "@ladle/react"
+import { Text } from "."
+
+export default {
+  title: "Design System / Text",
+} satisfies StoryDefault
+
+export const Default: Story<{
+  children: string
+  tone: "default" | "muted" | "accent" | "danger"
+  variant: "body" | "lede" | "eyebrow"
+}> = ({ children, tone, variant }) => (
+  <Text tone={tone} variant={variant}>
+    {children}
+  </Text>
+)
+Default.args = {
+  children: "Design-system text supports body, lede, and eyebrow variants.",
+  tone: "default",
+  variant: "body",
+}

package/template/client/packages/design-system-basic/src/text.tsx

@@ -0,0 +1,5 @@
+import type { TextComponent } from "@backbone/design-system-contract"
+
+export const Text: TextComponent = ({ children, tone = "default", variant = "body" }) => {
+  return <p className={`ds-text ds-text--${variant} ds-text--${tone}`}>{children}</p>
+}

package/template/client/packages/design-system-contract/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@backbone/design-system-contract",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  }
+}

package/template/client/packages/design-system-contract/src/button.ts

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes, ComponentType } from "react"
+
+type ButtonVariant = "primary" | "secondary" | "danger"
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  loading?: boolean
+  variant?: ButtonVariant
+}
+
+export type ButtonComponent = ComponentType<ButtonProps>

package/template/client/packages/design-system-contract/src/empty-state.ts

@@ -0,0 +1,9 @@
+import type { ComponentType, ReactNode } from "react"
+
+export type EmptyStateProps = {
+  action?: ReactNode
+  description: string
+  title: string
+}
+
+export type EmptyStateComponent = ComponentType<EmptyStateProps>

package/template/client/packages/design-system-contract/src/form-field.ts

@@ -0,0 +1,9 @@
+import type { ComponentType, ReactNode } from "react"
+
+export type FormFieldProps = {
+  children: ReactNode
+  inputId: string
+  label: ReactNode
+}
+
+export type FormFieldComponent = ComponentType<FormFieldProps>

package/template/client/packages/design-system-contract/src/form.ts

@@ -0,0 +1,9 @@
+import type { ComponentType, FormEventHandler, ReactNode } from "react"
+
+export type FormProps = {
+  children: ReactNode
+  ariaLabelledBy?: string
+  onSubmit?: FormEventHandler<HTMLFormElement>
+}
+
+export type FormComponent = ComponentType<FormProps>

package/template/client/packages/design-system-contract/src/heading.ts

@@ -0,0 +1,9 @@
+import type { ComponentType, ReactNode } from "react"
+
+export type HeadingProps = {
+  children: ReactNode
+  id?: string
+  level?: 1 | 2 | 3
+}
+
+export type HeadingComponent = ComponentType<HeadingProps>

package/template/client/packages/design-system-contract/src/index.ts

@@ -0,0 +1,13 @@
+export type * from "./button"
+export type * from "./empty-state"
+export type * from "./form"
+export type * from "./form-field"
+export type * from "./heading"
+export type * from "./inline"
+export type * from "./layout"
+export type * from "./loader"
+export type * from "./navigation"
+export type * from "./notice"
+export type * from "./stack"
+export type * from "./text"
+export type * from "./text-input"

package/template/client/packages/design-system-contract/src/inline.ts

@@ -0,0 +1,7 @@
+import type { ComponentType, ReactNode } from "react"
+
+export type InlineProps = {
+  children: ReactNode
+}
+
+export type InlineComponent = ComponentType<InlineProps>

package/template/client/packages/design-system-contract/src/layout.ts

@@ -0,0 +1,8 @@
+import type { ComponentType, ReactNode } from "react"
+
+export type LayoutProps = {
+  middle: ReactNode
+  middleWidthPx?: number
+}
+
+export type LayoutComponent = ComponentType<LayoutProps>

package/template/client/packages/design-system-contract/src/loader.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from "react"
+
+export type LoaderProps = {
+  message: string
+}
+
+export type LoaderComponent = ComponentType<LoaderProps>

package/template/client/packages/design-system-contract/src/navigation.ts

@@ -0,0 +1,13 @@
+import type { ComponentType } from "react"
+
+type NavigationItem = {
+  href: string
+  label: string
+}
+
+export type NavigationProps = {
+  currentHref?: string
+  items: NavigationItem[]
+}
+
+export type NavigationComponent = ComponentType<NavigationProps>

package/template/client/packages/design-system-contract/src/notice.ts

@@ -0,0 +1,8 @@
+import type { ComponentType, ReactNode } from "react"
+
+export type NoticeProps = {
+  children: ReactNode
+  tone: "danger"
+}
+
+export type NoticeComponent = ComponentType<NoticeProps>

package/template/client/packages/design-system-contract/src/stack.ts

@@ -0,0 +1,8 @@
+import type { ComponentType, ReactNode } from "react"
+
+export type StackProps = {
+  children: ReactNode
+  gap?: "sm" | "md" | "lg"
+}
+
+export type StackComponent = ComponentType<StackProps>