@kolkrabbi/kol-component 0.2.0 → 0.3.0

package/src/organisms/NewsletterBand.jsx

@@ -0,0 +1,122 @@
+import { useId, useState } from 'react'
+import Input from '../atoms/Input.jsx'
+import Button from '../atoms/Button.jsx'
+
+/**
+ * NewsletterBand — centered newsletter-subscribe band: heading + lede over an
+ * email Input + submit Button, with an inline success/error status line under
+ * the form. The closing subscribe section on marketing pages.
+ *
+ * Owns only the local form state — the email value and idle / submitting /
+ * success / error, driven by the promise returned from `onSubmit(email)`.
+ * No fetch lives here: the consumer's handler posts wherever it wants;
+ * resolve → success (field clears), reject → error (logged). An empty submit
+ * errors immediately without calling the handler, and the submit Button
+ * disables while the promise is pending. Native `type="email"` validation
+ * still gates malformed addresses before the handler runs.
+ *
+ * A11y: the Input carries aria-required and, on error, aria-describedby
+ * pointing at the error line; the success line is role=status
+ * aria-live=polite, the error line role=alert aria-live=assertive. Field and
+ * error ids are useId-generated (or `inputId`) so multiple bands mount
+ * without collisions.
+ *
+ * @param {ReactNode} title        heading (kol-sans-display-01)
+ * @param {ReactNode} description  lede under the heading (kol-mono-14)
+ * @param {string}    placeholder  email Input placeholder
+ * @param {ReactNode} submitLabel  submit Button label (also its accessible name)
+ * @param {Function}  onSubmit     (email) => Promise|void — resolve = success, reject = error
+ * @param {ReactNode} successCopy  success status line
+ * @param {ReactNode} errorCopy    error status line
+ * @param {string}    id           anchor id on the section (e.g. "signup")
+ * @param {string}    inputId      id override for the email input (default useId-generated)
+ * @param {string}    className    extra classes on the section
+ */
+export default function NewsletterBand({
+  title,
+  description,
+  placeholder,
+  submitLabel,
+  onSubmit,
+  successCopy = 'Thanks for subscribing!',
+  errorCopy = 'Please enter a valid email address.',
+  id,
+  inputId,
+  className = '',
+}) {
+  const [email, setEmail] = useState('')
+  const [status, setStatus] = useState('idle') // 'idle' | 'submitting' | 'success' | 'error'
+
+  const autoId = useId()
+  const emailId = inputId ?? `${autoId}email`
+  const errorId = `${emailId}-error`
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    if (!email) {
+      setStatus('error')
+      return
+    }
+    if (!onSubmit) return
+
+    setStatus('submitting')
+    try {
+      await onSubmit(email)
+      setStatus('success')
+      setEmail('')
+    } catch (error) {
+      console.error('Newsletter signup error:', error)
+      setStatus('error')
+    }
+  }
+
+  return (
+    <section
+      id={id}
+      className={`w-full flex flex-col items-center justify-center text-center ${className}`.trim()}
+    >
+      <div className="max-w-[1400px] mx-auto py-24">
+        <h2 className="kol-sans-display-01 mb-6">{title}</h2>
+
+        <p className="kol-mono-14 text-auto mb-12 mx-auto max-w-[64rem]">{description}</p>
+
+        <form
+          onSubmit={handleSubmit}
+          className="flex flex-col gap-4 mb-16 sm:flex-row sm:items-center sm:justify-center sm:gap-3"
+        >
+          <Input
+            id={emailId}
+            type="email"
+            placeholder={placeholder}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            size="md"
+            aria-required="true"
+            aria-describedby={status === 'error' ? errorId : undefined}
+            className="w-full sm:max-w-[400px] md:max-w-[520px]"
+          />
+          <Button
+            type="submit"
+            variant="primary"
+            disabled={status === 'submitting'}
+            className="w-full sm:w-auto"
+          >
+            {submitLabel}
+          </Button>
+        </form>
+
+        {status === 'success' && (
+          <p className="kol-mono-14 text-auto opacity-80" role="status" aria-live="polite">
+            {successCopy}
+          </p>
+        )}
+        {status === 'error' && (
+          <p id={errorId} className="kol-mono-14 text-auto opacity-80" role="alert" aria-live="assertive">
+            {errorCopy}
+          </p>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/organisms/ParallaxShelf.jsx

@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import WorkCard from './WorkCard.jsx'
+import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
+
+/* Scroll-driven parallax strength — fraction of scroll delta applied to the
+ * shelf. Eases in quadratically with page-scroll progress (min → max). */
+const SCROLL_PARALLAX_MIN = 0.1
+const SCROLL_PARALLAX_MAX = 0.4
+const DRAG_THRESHOLD_SQ = 25
+/* Aligned edge gets the big gutter so the first/last card lands under a
+ * 1400px content column. */
+const EDGE_GUTTER = 'max(4rem, calc((100vw - 1400px) / 2 + 16rem))'
+
+/**
+ * ParallaxShelf — one horizontal shelf row: a drag-free Embla carousel of
+ * project cards with scroll-driven parallax. As the page scrolls the track is
+ * nudged horizontally by `delta × parallax × direction`, the strength easing in
+ * the further down the page you are; alternating rows (`fromLeft`) scroll in
+ * opposite directions for a woven wall of shelves. Includes a drag-vs-click
+ * guard (a drag never fires a card link) and an edge-aligned category label.
+ *
+ * Calls `useEmblaCarousel` directly (FeaturedCarousel's precedent) because the
+ * parallax nudge needs `internalEngine()`, which DS Carousel encapsulates and
+ * must not be modified. The source's `WheelGesturesPlugin` is dropped (not a
+ * DS dependency). Parallax is disabled under prefers-reduced-motion and on
+ * small screens — both fall back to a plain wheel/drag carousel.
+ *
+ * Card-agnostic via `renderCard`; defaults to DS **WorkCard** with an
+ * `index`-staggered ragged height. Pass a plain `items` array of flat project
+ * objects (no Sanity keying).
+ *
+ * Text casing: the label renders verbatim (author `type.label` as e.g.
+ * "Client Work") — no text-transform.
+ *
+ * @param {{label:string}} type       category; `label` renders in the edge caption
+ * @param {Array}          items      flat project objects passed to the card renderer
+ * @param {boolean}        fromLeft   direction of alignment / start index / parallax sign / label side (default false)
+ * @param {Function}       renderCard (item, index) => ReactNode — card renderer (default WorkCard)
+ * @param {Function}       onNavigate (href, event) => void — forwarded to the default WorkCard
+ * @param {string}         className  extra classes on the section
+ */
+export default function ParallaxShelf({
+  type,
+  items = [],
+  fromLeft = false,
+  renderCard,
+  onNavigate,
+  className = '',
+}) {
+  const reduced = usePrefersReducedMotion()
+  const [isMobile] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches,
+  )
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    dragFree: true,
+    align: fromLeft ? 'end' : 'start',
+    containScroll: 'trimSnaps',
+    ...(fromLeft && { startIndex: items.length - 1 }),
+  })
+
+  const sectionRef = useRef(null)
+  const lastScrollY = useRef(0)
+
+  // Scroll-driven parallax: page scroll nudges the carousel while in view.
+  useEffect(() => {
+    if (!emblaApi || reduced || isMobile) return
+    lastScrollY.current = window.scrollY
+
+    const onScroll = () => {
+      const section = sectionRef.current
+      if (!section) return
+      const rect = section.getBoundingClientRect()
+      const inView = rect.bottom > 0 && rect.top < window.innerHeight
+      if (!inView) {
+        lastScrollY.current = window.scrollY
+        return
+      }
+      const delta = window.scrollY - lastScrollY.current
+      lastScrollY.current = window.scrollY
+      const scrollProgress = Math.min(window.scrollY / (document.body.scrollHeight - window.innerHeight), 1)
+      const parallax = SCROLL_PARALLAX_MIN + (SCROLL_PARALLAX_MAX - SCROLL_PARALLAX_MIN) * (scrollProgress * scrollProgress)
+      const engine = emblaApi.internalEngine()
+      const offset = delta * parallax * (fromLeft ? 1 : -1)
+      engine.scrollBody.useDuration(0)
+      engine.scrollTo.distance(offset, false)
+    }
+
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [emblaApi, fromLeft, reduced, isMobile])
+
+  // Drag-vs-click guard (5px): a drag suppresses the ensuing card-link click.
+  const dragged = useRef(false)
+  const pointerStart = useRef({ x: 0, y: 0 })
+  const onPointerDown = useCallback((e) => {
+    dragged.current = false
+    pointerStart.current = { x: e.clientX, y: e.clientY }
+  }, [])
+  const onPointerMove = useCallback((e) => {
+    if (dragged.current) return
+    const dx = e.clientX - pointerStart.current.x
+    const dy = e.clientY - pointerStart.current.y
+    if (dx * dx + dy * dy > DRAG_THRESHOLD_SQ) dragged.current = true
+  }, [])
+  const onClickCapture = useCallback((e) => {
+    if (dragged.current) e.preventDefault()
+  }, [])
+
+  const card = (item, i) =>
+    renderCard ? renderCard(item, i) : <WorkCard key={i} {...item} index={i} onNavigate={onNavigate} />
+
+  return (
+    <section ref={sectionRef} className={`py-6 md:py-16 ${className}`.trim()}>
+      <div
+        className="overflow-visible select-none"
+        ref={emblaRef}
+        style={{
+          paddingLeft: fromLeft ? undefined : EDGE_GUTTER,
+          paddingRight: fromLeft ? EDGE_GUTTER : undefined,
+        }}
+      >
+        <div
+          className="flex gap-8 items-end"
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onClickCapture={onClickCapture}
+        >
+          {items.map((item, i) => card(item, i))}
+        </div>
+      </div>
+
+      {type?.label && (
+        <div className={`max-w-[1400px] mx-auto mt-4 md:mt-6 ${fromLeft ? 'pr-4 md:pr-64 text-right' : 'pl-4 md:pl-64'}`}>
+          <p className="kol-helper-12 text-auto">{type.label}</p>
+        </div>
+      )}
+    </section>
+  )
+}

package/src/organisms/PortableTextRenderer.jsx

@@ -0,0 +1,115 @@
+import { Fragment } from 'react'
+import CodeBlock from '../molecules/CodeBlock.jsx'
+import ImageBlock from '../molecules/ImageBlock.jsx'
+import VideoBlock from '../molecules/VideoBlock.jsx'
+import Table from './Table.jsx'
+import Divider from '../atoms/Divider.jsx'
+
+/**
+ * slugify — heading text → anchor id (lowercase, non-word stripped, spaces to
+ * dashes, repeats collapsed). Feeds the h2/h3 `id`s that power in-page anchors
+ * / a table of contents. Kept from the source; it is the one bit of real logic.
+ */
+export function slugify(text = '') {
+  return String(text)
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .trim()
+}
+
+/* ── Inline marks ──────────────────────────────────────────────────────────
+ * A block's `text` is either a plain string or an array of inline nodes:
+ *   'plain text'
+ *   { mark: 'link', href, text }         → <a> (http* → new tab + noopener)
+ *   { mark: 'segmentTitle', text }       → <span class="kol-segment-title">
+ */
+function renderInline(text) {
+  if (text == null) return null
+  const nodes = Array.isArray(text) ? text : [text]
+  return nodes.map((node, i) => {
+    if (typeof node === 'string') return <Fragment key={i}>{node}</Fragment>
+    if (node.mark === 'link') {
+      const external = (node.href || '').startsWith('http')
+      return (
+        <a
+          key={i}
+          href={node.href}
+          target={external ? '_blank' : undefined}
+          rel={external ? 'noopener noreferrer' : undefined}
+        >
+          {node.text}
+        </a>
+      )
+    }
+    if (node.mark === 'segmentTitle') {
+      return <span key={i} className="kol-segment-title">{node.text}</span>
+    }
+    return <Fragment key={i}>{node.text}</Fragment>
+  })
+}
+
+const plainText = (text) =>
+  Array.isArray(text) ? text.map((n) => (typeof n === 'string' ? n : n.text)).join('') : String(text ?? '')
+
+/* ── Block registry ────────────────────────────────────────────────────────
+ * Maps a plain { type, ... } block to a DS component / prose tag. This is the
+ * de-Sanitized counterpart to the app's Portable-Text components map: generic
+ * block-type names (`heading`/`quote`/`divider`/`table`/`video`), no CMS
+ * schema keys, no @portabletext/react host.
+ */
+const BLOCKS = {
+  heading: ({ level = 2, text, id }) => {
+    const Tag = `h${level}`
+    const anchorId = id ?? (level === 2 || level === 3 ? slugify(plainText(text)) : undefined)
+    return <Tag id={anchorId}>{renderInline(text)}</Tag>
+  },
+  paragraph: ({ text }) => <p>{renderInline(text)}</p>,
+  caption: ({ text }) => <p className="caption">{renderInline(text)}</p>,
+  quote: ({ text, cite }) => (
+    <blockquote>
+      <p>{renderInline(text)}</p>
+      {cite && <cite>{cite}</cite>}
+    </blockquote>
+  ),
+  code: ({ language, code }) => <CodeBlock language={language}>{code}</CodeBlock>,
+  divider: () => <Divider className="my-10" />,
+  image: (block) => <ImageBlock {...block} />,
+  video: (block) => <VideoBlock {...block} />,
+  table: ({ columns, rows, caption }) => <Table columns={columns} rows={rows} caption={caption} variant="simple" />,
+  list: ({ style = 'bullet', items = [] }) => {
+    const Tag = style === 'number' ? 'ol' : 'ul'
+    return <Tag>{items.map((item, i) => <li key={i}>{renderInline(item)}</li>)}</Tag>
+  },
+}
+
+/**
+ * PortableTextRenderer — turns a plain block array into `.kol-prose`-styled
+ * long-form markup via one block-type registry. The design system's CMS
+ * renderer (the counterpart to ProseStylesViewer, which only *showcases* the
+ * prose styles) — both plug into the same `.kol-prose` stylesheet.
+ *
+ * The block shape is a simple `{ type, ... }` — NOT Sanity Portable Text and
+ * with no `@portabletext/react` host. Custom blocks (`image`/`video`/`table`/
+ * `code`/`divider`) resolve to DS components; text blocks render bare tags the
+ * `.kol-prose` sheet styles. Inline `link`/`segmentTitle` marks are supported
+ * via the array `text` form (see `renderInline`). Unknown types are skipped.
+ *
+ * All content — headings, paragraphs, captions — is authored as-is; the map
+ * applies no `text-transform`.
+ *
+ * @param {Array<{type:string}>} blocks  the document, in order
+ * @param {boolean} prose      wrap output in a `.kol-prose` container (default true)
+ * @param {string}  className  extra classes on the wrapper
+ */
+export default function PortableTextRenderer({ blocks = [], prose = true, className = '' }) {
+  const rendered = blocks.map((block, i) => {
+    const render = BLOCKS[block?.type]
+    if (!render) return null
+    return <Fragment key={block.key ?? i}>{render(block)}</Fragment>
+  })
+
+  if (!prose) return <>{rendered}</>
+  return <div className={`kol-prose ${className}`.trim()}>{rendered}</div>
+}

package/src/organisms/ProductDetailLayout.jsx

@@ -0,0 +1,189 @@
+import { useState } from 'react'
+import PriceDisplay from '../atoms/PriceDisplay.jsx'
+import Pill from '../atoms/Pill.jsx'
+import Divider from '../atoms/Divider.jsx'
+import QuantityInput from '../atoms/QuantityInput.jsx'
+import SpecList from '../molecules/SpecList.jsx'
+import TabsRow from '../molecules/TabsRow.jsx'
+import Dropdown from '../molecules/Dropdown.jsx'
+
+/**
+ * ProductDetailLayout — the pure two-column PDP skeleton: a full-height media
+ * gallery beside a scrollable details column (eyebrow + title + tags, a
+ * SpecList of key facts, an underline TabsRow with its panel, then a purchase
+ * block of price / size / quantity / CTA / fine print / back link).
+ *
+ * Presentational and commerce-agnostic — the print-store source's PayPal URL,
+ * `print.*` reads, Sanity image normalization and route wiring are all dropped.
+ * Data enters through props; the DS parts (PriceDisplay, SpecList, TabsRow,
+ * QuantityInput, Dropdown) are composed here, everything else is a slot. Size,
+ * quantity and the active tab are owned internally (uncontrolled), seeded from
+ * props; pass the change callbacks to observe them.
+ *
+ * @param {ReactNode[]} mediaItems    gallery frames (rendered nodes, e.g. inline SVG); drives the internal big-frame + thumbnail strip
+ * @param {ReactNode}   media         single media slot used when `mediaItems` is empty
+ * @param {ReactNode}   eyebrow       category caption above the title (authored verbatim)
+ * @param {ReactNode}   title         product name — rendered kol-heading-md (author case at the call site)
+ * @param {string[]}    tags          optional Pill row
+ * @param {Array<{label,value}>} specs key-facts rows → SpecList
+ * @param {Array<{id,label,content}>} tabs tab strip (→ TabsRow) + panel content per tab
+ * @param {{amount:number,currency?:string,locale?:string,secondary?:ReactNode}} price → PriceDisplay
+ * @param {string[]}    sizeOptions   size <select> options → Dropdown (default ['A3'])
+ * @param {string}      defaultSize   initially-selected size (default sizeOptions[0])
+ * @param {Function}    onSizeChange  (value) => void — fires on size select
+ * @param {number}      defaultQuantity initial qty (default 1)
+ * @param {number}      minQuantity   qty floor (default 1)
+ * @param {number}      maxQuantity   qty ceiling (default 10)
+ * @param {Function}    onQuantityChange (value) => void — fires on qty step
+ * @param {ReactNode}   actions       CTA slot — pass the "Add to cart" Button
+ * @param {ReactNode}   shippingNote  fine-print line under the CTA
+ * @param {ReactNode}   backLink      back-to-catalog link slot
+ */
+export default function ProductDetailLayout({
+  mediaItems = [],
+  media,
+  eyebrow,
+  title,
+  tags = [],
+  specs = [],
+  tabs = [],
+  price,
+  sizeOptions = ['A3'],
+  defaultSize,
+  onSizeChange,
+  defaultQuantity = 1,
+  minQuantity = 1,
+  maxQuantity = 10,
+  onQuantityChange,
+  actions,
+  shippingNote,
+  backLink,
+}) {
+  const [activeMedia, setActiveMedia] = useState(0)
+  const [size, setSize] = useState(defaultSize ?? sizeOptions[0])
+  const [quantity, setQuantity] = useState(defaultQuantity)
+  const [activeTab, setActiveTab] = useState(tabs[0]?.id)
+
+  const activeTabItem = tabs.find((t) => t.id === activeTab) ?? tabs[0]
+
+  const handleSize = (value) => {
+    setSize(value)
+    onSizeChange?.(value)
+  }
+  const handleQuantity = (value) => {
+    setQuantity(value)
+    onQuantityChange?.(value)
+  }
+
+  return (
+    <main className="min-h-screen w-full overflow-x-hidden bg-surface-primary text-auto">
+      <section className="grid h-dvh w-full gap-0 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
+        {/* Media column */}
+        <div className="relative flex h-dvh bg-surface-secondary">
+          <div className="relative flex-1 flex items-center justify-center px-8 py-24 lg:px-16 lg:py-32 overflow-hidden">
+            {mediaItems.length > 0 ? (
+              <div className="flex max-h-full max-w-full items-center justify-center">
+                {mediaItems[activeMedia] ?? mediaItems[0]}
+              </div>
+            ) : (
+              media
+            )}
+
+            {mediaItems.length > 1 && (
+              <div className="absolute inset-x-0 bottom-0 flex gap-3 overflow-x-auto bg-surface-primary/80 px-6 py-4">
+                {mediaItems.map((item, index) => {
+                  const isActive = index === activeMedia
+                  return (
+                    <button
+                      key={index}
+                      type="button"
+                      aria-label={`View image ${index + 1}`}
+                      aria-pressed={isActive}
+                      onClick={() => setActiveMedia(index)}
+                      className={`h-20 aspect-[4/5] overflow-hidden rounded border-2 transition-all ${
+                        isActive
+                          ? 'border-auto opacity-100'
+                          : 'border-transparent opacity-40 hover:opacity-100'
+                      }`}
+                    >
+                      <span className="flex size-full items-center justify-center overflow-hidden">
+                        {item}
+                      </span>
+                    </button>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Details column */}
+        <div className="h-dvh flex flex-col text-left px-6 pt-20 pb-8 sm:px-10 lg:px-16 lg:pt-24 lg:pb-12 bg-surface-primary overflow-y-auto">
+          <div className="mx-auto flex flex-1 w-full max-w-[640px] flex-col gap-6">
+            {/* Header */}
+            <header className="space-y-4">
+              {eyebrow != null && <p className="kol-helper-uc-xs text-accent-primary">{eyebrow}</p>}
+              {title != null && <h1 className="kol-heading-md">{title}</h1>}
+              {tags.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {tags.map((tag) => (
+                    <Pill key={tag} variant="subtle" size="sm">
+                      {tag}
+                    </Pill>
+                  ))}
+                </div>
+              )}
+            </header>
+
+            {/* Specs */}
+            {specs.length > 0 && <SpecList items={specs} framed />}
+
+            {/* Tabs */}
+            {tabs.length > 0 && (
+              <div className="space-y-4">
+                <div className="border-b border-auto">
+                  <TabsRow tabs={tabs.map(({ id, label }) => ({ id, label }))} value={activeTab} onChange={setActiveTab} />
+                </div>
+                <div role="tabpanel" className="kol-mono-text text-fg-64 leading-relaxed space-y-4">
+                  {activeTabItem?.content}
+                </div>
+              </div>
+            )}
+
+            {/* Purchase block */}
+            <div className="mt-auto space-y-6 border-t border-auto pt-6">
+              {price != null && <PriceDisplay {...price} />}
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <span className="kol-helper-uc-xs text-fg-48">Size</span>
+                  <Dropdown
+                    options={sizeOptions.map((s) => ({ label: s, value: s }))}
+                    value={size}
+                    onChange={handleSize}
+                    className="w-full"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <span className="kol-helper-uc-xs text-fg-48">Quantity</span>
+                  <QuantityInput
+                    value={quantity}
+                    onChange={handleQuantity}
+                    min={minQuantity}
+                    max={maxQuantity}
+                    className="w-full"
+                  />
+                </div>
+              </div>
+
+              {actions}
+
+              {shippingNote != null && <p className="kol-mono-xs text-fg-48">{shippingNote}</p>}
+              {backLink}
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}