@saywright/studio 0.0.0-stage → 0.1.0

package/dist/sample/src/App.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { Header } from './components/Header';
+import { useRoute } from './lib/route';
+import { Checkout } from './pages/Checkout';
+import { Shop } from './pages/Shop';
+
+export function App() {
+  const route = useRoute();
+  const [toast, setToast] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 2200);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  useEffect(() => {
+    document.title = route === 'shop' ? 'Tidewell · Ceramics' : 'Tidewell · Checkout';
+  }, [route]);
+
+  return (
+    <div className="shell">
+      <Header route={route} />
+      {route === 'shop' ? <Shop onToast={setToast} /> : <Checkout onToast={setToast} />}
+      {toast && (
+        <div className="toast" role="status">
+          {toast}
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/sample/src/components/AddressCard.tsx

@@ -0,0 +1,16 @@
+import { Card } from '../ds';
+import { ADDRESS } from '../lib/cart';
+
+export function AddressCard() {
+  return (
+    <Card title="Shipping to">
+      <div className="address">
+        {ADDRESS.name}
+        <br />
+        {ADDRESS.lines[0]}
+        <br />
+        {ADDRESS.lines[1]}
+      </div>
+    </Card>
+  );
+}

package/dist/sample/src/components/CouponField.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { Badge, Button, TextField } from '../ds';
+import { findCoupon, type Coupon } from '../lib/pricing';
+
+interface CouponFieldProps {
+  coupon: Coupon | null;
+  onApply: (coupon: Coupon) => void;
+  onRemove: () => void;
+}
+
+export function CouponField({ coupon, onApply, onRemove }: CouponFieldProps) {
+  const [code, setCode] = useState('');
+  const [error, setError] = useState<string | undefined>();
+
+  if (coupon) {
+    return (
+      <div className="coupon-applied">
+        <Badge tone="success">✓ {coupon.code} applied</Badge>
+        <Button variant="link" size="sm" onClick={onRemove}>
+          Remove
+        </Button>
+      </div>
+    );
+  }
+
+  const apply = () => {
+    const found = findCoupon(code);
+    if (!found) {
+      setError('That code isn’t valid.');
+      return;
+    }
+    setError(undefined);
+    onApply(found);
+  };
+
+  return (
+    <form
+      className="coupon"
+      onSubmit={(e) => {
+        e.preventDefault();
+        apply();
+      }}
+    >
+      <TextField label="Coupon" placeholder="Coupon code" value={code} onChange={setCode} error={error} data-testid="coupon-input" />
+      <Button variant="secondary" size="sm" type="submit" data-testid="coupon-apply">
+        Apply
+      </Button>
+    </form>
+  );
+}

package/dist/sample/src/components/Header.tsx

@@ -0,0 +1,26 @@
+import type { Route } from '../lib/route';
+
+export function Header({ route }: { route: Route }) {
+  return (
+    <header className="header">
+      <a className="logo" href="#/shop">
+        tidewell
+      </a>
+      <nav className="nav" aria-label="Main">
+        <a href="#/shop" aria-current={route === 'shop' ? 'page' : undefined}>
+          Shop
+        </a>
+        <a href="#/checkout" aria-current={route === 'checkout' ? 'page' : undefined}>
+          Checkout
+        </a>
+      </nav>
+      <div className="header-end">
+        <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true">
+          <rect x="3" y="7" width="10" height="7" rx="2" fill="none" stroke="currentColor" strokeWidth="1.5" />
+          <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" fill="none" stroke="currentColor" strokeWidth="1.5" />
+        </svg>
+        Secure checkout
+      </div>
+    </header>
+  );
+}

package/dist/sample/src/components/LineItems.tsx

@@ -0,0 +1,22 @@
+import { Card } from '../ds';
+import type { CartItem } from '../lib/cart';
+import { money } from '../lib/money';
+
+export function LineItems({ items }: { items: CartItem[] }) {
+  return (
+    <Card title={`Items (${items.length})`}>
+      <div className="line-items">
+        {items.map((item) => (
+          <div className="line-item" key={item.id}>
+            <span className="thumb" style={{ background: item.swatch }} />
+            <span>
+              <b>{item.name}</b>
+              <small>{item.detail}</small>
+            </span>
+            <span className="price">{money(item.price * item.qty)}</span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}

package/dist/sample/src/components/OrderSummary.tsx

@@ -0,0 +1,32 @@
+import { Button, Card, SummaryRow } from '../ds';
+import { money, minus } from '../lib/money';
+import type { Coupon, Totals } from '../lib/pricing';
+import { CouponField } from './CouponField';
+
+interface OrderSummaryProps {
+  totals: Totals;
+  coupon: Coupon | null;
+  onApply: (coupon: Coupon) => void;
+  onRemove: () => void;
+  onPay: () => void;
+}
+
+export function OrderSummary({ totals, coupon, onApply, onRemove, onPay }: OrderSummaryProps) {
+  return (
+    <Card title="Order summary">
+      <div className="summary">
+        <CouponField coupon={coupon} onApply={onApply} onRemove={onRemove} />
+        <hr />
+        <SummaryRow label="Subtotal" value={money(totals.subtotal)} data-testid="summary-subtotal" />
+        <SummaryRow label="Shipping" value={money(totals.shipping)} data-testid="summary-shipping" />
+        {coupon && <SummaryRow label={`Discount (${coupon.code})`} value={minus(totals.discount)} tone="success" data-testid="summary-discount" />}
+        <hr />
+        <SummaryRow label="Total" value={money(totals.total)} emphasis="strong" size="lg" data-testid="summary-total" />
+        <Button size="lg" fullWidth onClick={onPay} data-testid="pay-button">
+          Pay {money(totals.total)}
+        </Button>
+        <p className="pay-note">Free returns within 30 days</p>
+      </div>
+    </Card>
+  );
+}

package/dist/sample/src/components/ProductCard.tsx

@@ -0,0 +1,26 @@
+import { Button } from '../ds';
+import { money } from '../lib/money';
+
+export interface Product {
+  id: string;
+  name: string;
+  note: string;
+  price: number;
+  swatch: string;
+}
+
+export function ProductCard({ product, onAdd }: { product: Product; onAdd: (p: Product) => void }) {
+  return (
+    <article className="product">
+      <div className="product-img" style={{ background: product.swatch }} />
+      <div className="product-meta">
+        <b>{product.name}</b>
+        <span>{money(product.price)}</span>
+      </div>
+      <small>{product.note}</small>
+      <Button variant="secondary" size="sm" onClick={() => onAdd(product)}>
+        Add to cart
+      </Button>
+    </article>
+  );
+}

package/dist/sample/src/ds/Badge.tsx

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: 'neutral' | 'success' | 'danger' | 'brand';
+  children: ReactNode;
+}
+
+export function Badge({ tone = 'neutral', children, ...rest }: BadgeProps) {
+  return (
+    <span className="ds-badge" data-tone={tone} {...rest}>
+      {children}
+    </span>
+  );
+}

package/dist/sample/src/ds/Button.tsx

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'link' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+  children: ReactNode;
+}
+
+export function Button({ variant = 'primary', size = 'md', fullWidth = false, type = 'button', children, ...rest }: ButtonProps) {
+  return (
+    <button className="ds-button" data-variant={variant} data-size={size} data-full={fullWidth} type={type} {...rest}>
+      {children}
+    </button>
+  );
+}

package/dist/sample/src/ds/Card.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface CardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+  title?: string;
+  padding?: 'sm' | 'md' | 'lg';
+  tone?: 'default' | 'muted' | 'brand';
+  children: ReactNode;
+}
+
+export function Card({ title, padding = 'md', tone = 'default', children, ...rest }: CardProps) {
+  return (
+    <section className="ds-card" data-padding={padding} data-tone={tone} {...rest}>
+      {title && <h2 className="ds-card-title">{title}</h2>}
+      {children}
+    </section>
+  );
+}

package/dist/sample/src/ds/Heading.tsx

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  children: ReactNode;
+}
+
+export function Heading({ size = 'lg', children, ...rest }: HeadingProps) {
+  return (
+    <h1 className="ds-heading" data-size={size} {...rest}>
+      {children}
+    </h1>
+  );
+}

package/dist/sample/src/ds/ProductGrid.tsx

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface ProductGridProps extends HTMLAttributes<HTMLDivElement> {
+  columns?: '2' | '3' | '4';
+  gap?: 'sm' | 'md' | 'lg' | 'xl';
+  children: ReactNode;
+}
+
+export function ProductGrid({ columns = '3', gap = 'md', children, ...rest }: ProductGridProps) {
+  return (
+    <div className="ds-grid" data-columns={columns} data-gap={gap} {...rest}>
+      {children}
+    </div>
+  );
+}

package/dist/sample/src/ds/SummaryRow.tsx

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+
+export interface SummaryRowProps extends HTMLAttributes<HTMLDivElement> {
+  label: string;
+  value: string;
+  size?: 'sm' | 'md' | 'lg';
+  emphasis?: 'regular' | 'strong';
+  tone?: 'default' | 'success' | 'danger';
+}
+
+export function SummaryRow({ label, value, size = 'md', emphasis = 'regular', tone = 'default', ...rest }: SummaryRowProps) {
+  return (
+    <div className="ds-row" data-size={size} data-emphasis={emphasis} data-tone={tone} {...rest}>
+      <span>{label}</span>
+      <span className="ds-row-value">{value}</span>
+    </div>
+  );
+}

package/dist/sample/src/ds/TextField.tsx

@@ -0,0 +1,31 @@
+import { useId, type InputHTMLAttributes } from 'react';
+
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  hint?: string;
+  error?: string;
+}
+
+export function TextField({ label, value, onChange, hint, error, ...rest }: TextFieldProps) {
+  const id = useId();
+  return (
+    <div className="ds-field">
+      <label htmlFor={id}>{label}</label>
+      <input
+        id={id}
+        className="ds-input"
+        value={value}
+        aria-invalid={error ? true : undefined}
+        onChange={(e) => onChange(e.target.value)}
+        {...rest}
+      />
+      {(error || hint) && (
+        <span className="ds-field-hint" data-tone={error ? 'danger' : undefined}>
+          {error ?? hint}
+        </span>
+      )}
+    </div>
+  );
+}

package/dist/sample/src/ds/index.ts

@@ -0,0 +1,7 @@
+export { Badge } from './Badge';
+export { Button } from './Button';
+export { Card } from './Card';
+export { Heading } from './Heading';
+export { ProductGrid } from './ProductGrid';
+export { SummaryRow } from './SummaryRow';
+export { TextField } from './TextField';

package/dist/sample/src/lib/cart.ts

@@ -0,0 +1,20 @@
+export interface CartItem {
+  id: string;
+  name: string;
+  detail: string;
+  price: number;
+  qty: number;
+  swatch: string;
+}
+
+export const CART: CartItem[] = [
+  { id: 'dripper', name: 'Stoneware pour-over set', detail: 'Ash glaze · Qty 1', price: 54, qty: 1, swatch: 'radial-gradient(circle at 35% 30%, #ece6db, #b3aa9c)' },
+  { id: 'beans', name: 'Single-origin beans, 2 × 250 g', detail: 'Huila, Colombia · Qty 1', price: 32, qty: 1, swatch: 'linear-gradient(160deg, #6e4b35, #3a261b)' },
+];
+
+export const SHIPPING_FLAT = 12;
+
+export const ADDRESS = {
+  name: 'Sam Rivera',
+  lines: ['214 Harbor Street, Apt 3', 'Portland, OR 97209'],
+};

package/dist/sample/src/lib/money.ts

@@ -0,0 +1,7 @@
+export function money(n: number): string {
+  return `$${n.toFixed(2)}`;
+}
+
+export function minus(n: number): string {
+  return `−$${n.toFixed(2)}`;
+}

package/dist/sample/src/lib/pricing.ts

@@ -0,0 +1,34 @@
+import type { CartItem } from './cart';
+
+export interface Coupon {
+  code: string;
+  /** Fraction off, e.g. 0.2 for 20%. */
+  rate: number;
+  /** What the discount covers. */
+  appliesTo: 'items' | 'order';
+}
+
+const COUPONS: Record<string, Coupon> = {
+  SAVE20: { code: 'SAVE20', rate: 0.2, appliesTo: 'items' },
+  WELCOME10: { code: 'WELCOME10', rate: 0.1, appliesTo: 'items' },
+};
+
+export function findCoupon(code: string): Coupon | null {
+  return COUPONS[code.trim().toUpperCase()] ?? null;
+}
+
+export interface Totals {
+  subtotal: number;
+  shipping: number;
+  discount: number;
+  total: number;
+}
+
+const round2 = (n: number) => Math.round(n * 100) / 100;
+
+export function calcTotals(items: CartItem[], shipping: number, coupon: Coupon | null): Totals {
+  const subtotal = round2(items.reduce((sum, item) => sum + item.price * item.qty, 0));
+  const rate = coupon?.rate ?? 0;
+  const discount = round2((subtotal + shipping) * rate);
+  return { subtotal, shipping, discount, total: round2(subtotal + shipping - discount) };
+}

package/dist/sample/src/lib/route.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export type Route = 'checkout' | 'shop';
+
+function read(): Route {
+  return window.location.hash.startsWith('#/shop') ? 'shop' : 'checkout';
+}
+
+export function useRoute(): Route {
+  const [route, setRoute] = useState<Route>(read);
+  useEffect(() => {
+    const onHash = () => setRoute(read());
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+  }, []);
+  return route;
+}

package/dist/sample/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/dist/sample/src/pages/Checkout.tsx

@@ -0,0 +1,37 @@
+import { useMemo, useState } from 'react';
+import { AddressCard } from '../components/AddressCard';
+import { LineItems } from '../components/LineItems';
+import { OrderSummary } from '../components/OrderSummary';
+import { Heading } from '../ds';
+import { CART, SHIPPING_FLAT } from '../lib/cart';
+import { money } from '../lib/money';
+import { calcTotals, type Coupon } from '../lib/pricing';
+
+export function Checkout({ onToast }: { onToast: (text: string) => void }) {
+  const [coupon, setCoupon] = useState<Coupon | null>(null);
+  const totals = useMemo(() => calcTotals(CART, SHIPPING_FLAT, coupon), [coupon]);
+
+  return (
+    <main className="page">
+      <div className="page-head">
+        <Heading size="lg">Checkout</Heading>
+        <div className="steps" aria-label="Progress">
+          Cart <i /> Details <i /> <b>Payment</b>
+        </div>
+      </div>
+      <div className="checkout">
+        <div className="stack">
+          <AddressCard />
+          <LineItems items={CART} />
+        </div>
+        <OrderSummary
+          totals={totals}
+          coupon={coupon}
+          onApply={setCoupon}
+          onRemove={() => setCoupon(null)}
+          onPay={() => onToast(`Paid ${money(totals.total)}. Thank you!`)}
+        />
+      </div>
+    </main>
+  );
+}

package/dist/sample/src/pages/Shop.tsx

@@ -0,0 +1,27 @@
+import { ProductCard, type Product } from '../components/ProductCard';
+import { Badge, Heading, ProductGrid } from '../ds';
+
+const PRODUCTS: Product[] = [
+  { id: 'dripper', name: 'Stoneware pour-over set', note: 'Ash glaze, thrown in Portland', price: 54, swatch: 'radial-gradient(circle at 40% 35%, #f1ece3, #b9af9f)' },
+  { id: 'celadon', name: 'Celadon mug, 12 oz', note: 'Dishwasher safe', price: 28, swatch: 'radial-gradient(circle at 55% 40%, #dce3e4, #8fa2a6)' },
+  { id: 'plate', name: 'Speckled dinner plate', note: 'Set of two', price: 34, swatch: 'radial-gradient(circle at 45% 30%, #efe3d3, #c59f78)' },
+  { id: 'bowl', name: 'Ash-glaze serving bowl', note: 'Holds 2 quarts', price: 31, swatch: 'radial-gradient(circle at 50% 40%, #e9e4da, #a99f90)' },
+  { id: 'night', name: 'Night mug, 10 oz', note: 'Matte black glaze', price: 26, swatch: 'radial-gradient(circle at 40% 45%, #3a484c, #151b1d)' },
+  { id: 'vase', name: 'Ivory bud vase', note: 'Small batch', price: 46, swatch: 'radial-gradient(circle at 50% 35%, #f3eee6, #cdbfae)' },
+];
+
+export function Shop({ onToast }: { onToast: (text: string) => void }) {
+  return (
+    <main className="page">
+      <div className="page-head">
+        <Heading size="lg">Ceramics</Heading>
+        <Badge tone="brand">6 pieces · new this week</Badge>
+      </div>
+      <ProductGrid columns="3" gap="md">
+        {PRODUCTS.map((p) => (
+          <ProductCard key={p.id} product={p} onAdd={(product) => onToast(`Added ${product.name}`)} />
+        ))}
+      </ProductGrid>
+    </main>
+  );
+}