@santi020k/lumen 3.0.1 → 4.0.0

package/templates/react/scheduler/src/lumen/scheduler.tsx

@@ -0,0 +1,45 @@
+import {
+  Agenda,
+  Calendar,
+  DatePicker,
+  Schedule,
+  useSchedule
+} from '@santi020k/lumen-react'
+
+export const SchedulerRecipe = () => {
+  const schedule = useSchedule()
+
+  return (
+    <section className="lumen-recipe lumen-recipe--scheduler">
+      <Calendar aria-label="Choose schedule date" />
+      <DatePicker aria-label="Jump to date" />
+      <Schedule>
+        <header>
+          <h2>Launch week</h2>
+        </header>
+        <div data-ui-schedule-grid>
+          <section {...schedule.getSlotProps('monday')}>
+            <article {...schedule.getEventProps('schedule-planning')}>
+              Planning
+            </article>
+          </section>
+          <section {...schedule.getSlotProps('friday')}>
+            <article {...schedule.getEventProps('schedule-ship')}>Ship</article>
+          </section>
+        </div>
+      </Schedule>
+      <Agenda>
+        <ol>
+          <li>
+            <strong>Design review</strong>
+            <span>10:00</span>
+          </li>
+          <li>
+            <strong>Release notes</strong>
+            <span>14:30</span>
+          </li>
+        </ol>
+      </Agenda>
+    </section>
+  )
+}

package/templates/react/section-header/src/lumen/section-header.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react'
+
+import { Badge, Stack, Typography } from '@santi020k/lumen-react'
+
+export interface SectionHeaderRecipeProps {
+  actions?: ReactNode
+  actionsLabel?: string
+  count?: string
+  description?: string
+  headingId: string
+  level?: 2 | 3 | 4 | 5 | 6
+  title: string
+}
+
+export const SectionHeaderRecipe = ({ actions, actionsLabel = 'Section actions', count, description, headingId, level = 2, title }: SectionHeaderRecipeProps) => {
+  const headings = { 2: 'h2', 3: 'h3', 4: 'h4', 5: 'h5', 6: 'h6' } as const
+  const Heading = headings[level]
+
+  return (
+    <header aria-labelledby={headingId}>
+      <Stack direction="horizontal" align="start" justify="between" gap="group" wrap>
+        <Stack gap="related" style={{ flex: '1 1 20rem', minWidth: 0, overflowWrap: 'anywhere' }}>
+          <Stack direction="horizontal" align="center" gap="related" wrap>
+            <Typography><Heading id={headingId}>{title}</Heading></Typography>
+            {count !== undefined && <Badge variant="secondary">{count}</Badge>}
+          </Stack>
+          {description && <Typography><p>{description}</p></Typography>}
+        </Stack>
+        {actions && <Stack direction="horizontal" align="center" gap="related" wrap role="group" aria-label={actionsLabel}>{actions}</Stack>}
+      </Stack>
+    </header>
+  )
+}

package/templates/react/styles.d.ts

@@ -0,0 +1 @@
+declare module '*.css' {}

package/templates/react/theme-builder/src/lumen/theme-builder.tsx

@@ -0,0 +1,57 @@
+import type { CSSProperties } from 'react'
+import { useMemo, useState } from 'react'
+
+import { createThemeFromHue, exportThemeCss } from '@santi020k/lumen-core'
+import { Button, Card, Input, ThemeBuilder } from '@santi020k/lumen-react'
+
+export const ThemeBuilderRecipe = () => {
+  const [hue, setHue] = useState(264)
+  const tokens = useMemo(() => createThemeFromHue(hue), [hue])
+
+  const previewStyle = useMemo(
+    () => Object.fromEntries(
+      Object.entries(tokens).map(([token, value]) => [`--${token}`, value])
+    ) as CSSProperties, [tokens]
+  )
+
+  const css = useMemo(() => exportThemeCss(tokens), [tokens])
+
+  return (
+    <ThemeBuilder className="lumen-recipe lumen-recipe--theme-builder">
+      <header>
+        <h2>Brand theme</h2>
+        <Button
+          type="button"
+          onClick={() => navigator.clipboard.writeText(css)}
+        >
+          Copy CSS
+        </Button>
+      </header>
+      <Card id="lumen-theme-preview" style={previewStyle}>
+        <span
+          data-ui-swatch
+          style={{ '--ui-swatch': 'hsl(var(--brand))' } as CSSProperties}
+        >
+        </span>
+        <span
+          data-ui-swatch
+          style={{ '--ui-swatch': 'hsl(var(--accent))' } as CSSProperties}
+        >
+        </span>
+      </Card>
+      <Card>
+        <Input
+          aria-label="Brand hue"
+          max="359"
+          min="0"
+          type="range"
+          value={hue}
+          onChange={event => {
+            setHue(Number(event.currentTarget.value))
+          }}
+        />
+      </Card>
+      <textarea aria-label="Theme CSS" readOnly value={css}></textarea>
+    </ThemeBuilder>
+  )
+}

package/templates/react/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "rootDir": "../../../../",
+    "paths": {
+      "@santi020k/lumen-react": ["../../../react/src/index.ts"]
+    },
+    "noEmit": true
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts"]
+}

package/templates/react/validated-form/src/lumen/validated-form.tsx

@@ -0,0 +1,166 @@
+import type { ReactNode, SyntheticEvent } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
+
+import { type LumenFormErrorInput, type LumenFormErrors, normalizeLumenFormErrors } from '@santi020k/lumen-core'
+import { Alert, ErrorSummary } from '@santi020k/lumen-react'
+
+export interface ValidatedFormRecipeProps {
+  children: (state: { errors: LumenFormErrors, pending: boolean }) => ReactNode
+  id: string
+  label: string
+  summaryHeading: string
+  failureMessage: string
+  successMessage: string
+  validate?: (form: HTMLFormElement) => LumenFormErrorInput
+  submit: (values: FormData) => Promise<LumenFormErrorInput | undefined>
+  onFailure?: (error: unknown) => void
+  onReset?: (event: SyntheticEvent<HTMLFormElement>) => void
+}
+
+const emptyErrors: LumenFormErrors = { fields: [], form: [] }
+
+const nativeErrors = (form: HTMLFormElement): LumenFormErrors => {
+  const view = form.ownerDocument.defaultView
+  const fields: LumenFormErrors['fields'] = []
+
+  if (!view) return emptyErrors
+
+  for (const control of form.elements) {
+    const isControl = control instanceof view.HTMLInputElement ||
+      control instanceof view.HTMLSelectElement || control instanceof view.HTMLTextAreaElement
+
+    if (!isControl) continue
+
+    if (control.willValidate && !control.validity.valid) {
+      fields.push({ controlId: control.id, name: control.name, message: control.validationMessage })
+    }
+  }
+
+  return { fields, form: [] }
+}
+
+/** Product validation, network policy and idempotency remain in the supplied callbacks. */
+export const ValidatedFormRecipe = ({
+  children, id, label, summaryHeading, failureMessage, successMessage, validate, submit, onFailure, onReset
+}: ValidatedFormRecipeProps) => {
+  const formRef = useRef<HTMLFormElement>(null)
+  const activeRequestRef = useRef(false)
+  const attemptedRef = useRef(false)
+  const [errors, setErrors] = useState<LumenFormErrors>(emptyErrors)
+  const [pending, setPending] = useState(false)
+  const [succeeded, setSucceeded] = useState(false)
+  const [focusErrors, setFocusErrors] = useState(false)
+
+  const readErrors = (form: HTMLFormElement) => {
+    const native = nativeErrors(form)
+    const product = normalizeLumenFormErrors(validate?.(form))
+
+    return { fields: [...native.fields, ...product.fields], form: [...native.form, ...product.form] }
+  }
+
+  useLayoutEffect(() => {
+    const form = formRef.current
+
+    if (!form || !focusErrors) return
+
+    const targetId = errors.fields.find(item => item.controlId)?.controlId
+    const target = targetId ? form.ownerDocument.getElementById(targetId) : undefined
+
+    if (target instanceof HTMLElement && (form.contains(target) || ('form' in target && target.form === form))) target.focus()
+    else form.querySelector<HTMLElement>('[data-ui-error-summary]')?.focus()
+
+    setFocusErrors(false)
+  }, [errors, focusErrors])
+
+  const handleSubmit = async (event: SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    if (activeRequestRef.current) return
+
+    const form = event.currentTarget
+    const next = readErrors(form)
+
+    attemptedRef.current = true
+
+    setErrors(next)
+
+    setSucceeded(false)
+
+    if (next.fields.length || next.form.length) {
+      setFocusErrors(true)
+
+      return
+    }
+
+    // Capture values before pending UI disables the controls.
+    const values = new FormData(form)
+
+    activeRequestRef.current = true
+
+    setPending(true)
+
+    try {
+      const result = normalizeLumenFormErrors(await submit(values))
+
+      setErrors(result)
+
+      if (result.fields.length || result.form.length) setFocusErrors(true)
+      else setSucceeded(true)
+    } catch (error) {
+      setErrors({ fields: [], form: [failureMessage] })
+
+      setFocusErrors(true)
+
+      onFailure?.(error)
+    } finally {
+      activeRequestRef.current = false
+
+      setPending(false)
+    }
+  }
+
+  return (
+    <form
+      ref={formRef}
+      id={id}
+      aria-label={label}
+      aria-busy={pending}
+      noValidate
+      onSubmit={event => {
+        void handleSubmit(event)
+      }}
+      onBlur={event => {
+        const next = event.relatedTarget
+
+        // Keep a focused action stationary between pointer down and click.
+        if (next instanceof HTMLElement && next.closest('button') && event.currentTarget.contains(next)) return
+
+        if (attemptedRef.current && !activeRequestRef.current) setErrors(readErrors(event.currentTarget))
+      }}
+      onChange={event => {
+        if (attemptedRef.current && !activeRequestRef.current) setErrors(readErrors(event.currentTarget))
+      }}
+      onReset={event => {
+        if (activeRequestRef.current) {
+          event.preventDefault()
+
+          return
+        }
+
+        onReset?.(event)
+
+        if (event.defaultPrevented) return
+
+        attemptedRef.current = false
+
+        setErrors(emptyErrors)
+
+        setSucceeded(false)
+      }}
+    >
+      <ErrorSummary id={`${id}-errors`} heading={summaryHeading} errors={errors} />
+      {children({ errors, pending })}
+      {succeeded && <Alert role="status">{successMessage}</Alert>}
+    </form>
+  )
+}

package/templates/shared/common/src/lumen/lumen-template.css

@@ -0,0 +1,247 @@
+.lumen-template {
+  min-height: 100vh;
+  background: hsl(var(--canvas));
+  color: hsl(var(--ink));
+}
+
+.lumen-template__shell {
+  display: grid;
+  grid-template-columns: 15rem minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.lumen-template__sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.25rem;
+  border: 0;
+  border-right: 1px solid hsl(var(--line));
+  border-radius: 0;
+  background: hsl(var(--surface));
+}
+
+.lumen-template__sidebar nav {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.lumen-template__sidebar a {
+  padding: 0.7rem 0.8rem;
+  border-radius: 0.65rem;
+  color: hsl(var(--ink-soft));
+  text-decoration: none;
+}
+
+.lumen-template__sidebar a[aria-current="page"] {
+  background: hsl(var(--brand-soft));
+  color: hsl(var(--brand));
+  font-weight: 700;
+}
+
+.lumen-template__main {
+  display: grid;
+  align-content: start;
+  gap: 1rem;
+  min-width: 0;
+  padding: clamp(1rem, 4vw, 3rem);
+}
+
+.lumen-template__header,
+.lumen-template__section-header,
+.lumen-template__actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.lumen-template__header h1 {
+  margin: 0.4rem 0;
+  font-size: clamp(2rem, 5vw, 3.25rem);
+  letter-spacing: -0.045em;
+}
+
+.lumen-template__header p,
+.lumen-template__section-header p,
+.lumen-template__muted {
+  margin: 0;
+  color: hsl(var(--ink-soft));
+}
+
+.lumen-template__metrics,
+.lumen-template__grid,
+.lumen-template__choices {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.lumen-template__metric,
+.lumen-template__panel,
+.lumen-template__form {
+  display: grid;
+  gap: 1rem;
+  padding: 1.2rem;
+}
+
+.lumen-template__metric .ui-sparkline {
+  width: 100%;
+}
+
+.lumen-template__grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.lumen-template__table {
+  overflow-x: auto;
+}
+
+.lumen-template__table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.lumen-template__table th,
+.lumen-template__table td {
+  padding: 0.8rem;
+  border-bottom: 1px solid hsl(var(--line));
+  text-align: left;
+  white-space: nowrap;
+}
+
+.lumen-template__list {
+  display: grid;
+  gap: 0.75rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.lumen-template__list li {
+  padding: 0.75rem;
+  border-radius: 0.65rem;
+  background: hsl(var(--surface-muted));
+}
+
+.lumen-template__form-shell {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 1rem;
+  background:
+    radial-gradient(circle at 15% 15%, hsl(var(--brand) / 0.2), transparent 28rem),
+    hsl(var(--canvas));
+}
+
+.lumen-template__form {
+  width: min(100%, 38rem);
+  padding: clamp(1.4rem, 4vw, 2.5rem);
+}
+
+.lumen-template__field {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.lumen-template__choices {
+  grid-template-columns: 1fr 1fr;
+}
+
+.lumen-template__choice {
+  padding: 1rem;
+  border: 1px solid hsl(var(--line));
+  border-radius: 0.75rem;
+  background: hsl(var(--surface-muted));
+}
+
+@media (max-width: 64rem) {
+  .lumen-template__metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lumen-template__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 48rem) {
+  .lumen-template__shell {
+    grid-template-columns: 1fr;
+  }
+
+  .lumen-template__sidebar {
+    position: static;
+    border-right: 0;
+    border-bottom: 1px solid hsl(var(--line));
+  }
+
+  .lumen-template__sidebar nav {
+    grid-template-columns: repeat(3, max-content);
+    overflow-x: auto;
+  }
+}
+
+@media (max-width: 34rem) {
+  .lumen-template__header,
+  .lumen-template__section-header {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .lumen-template__metrics,
+  .lumen-template__choices {
+    grid-template-columns: 1fr;
+  }
+}
+
+.lumen-login-examples {
+  box-sizing: border-box;
+  grid-column: 1 / -1;
+  width: 100%;
+  min-width: 0;
+  padding: clamp(1.25rem, 4vw, 3rem);
+  color: hsl(var(--ink));
+}
+
+.lumen-login-examples header {
+  max-width: 44rem;
+  margin-bottom: 1.5rem;
+}
+
+.lumen-login-examples p {
+  margin: 0;
+  color: hsl(var(--ink-soft));
+  line-height: 1.6;
+}
+
+.lumen-login-examples h2,
+.lumen-login-examples h3 {
+  margin: 0;
+  color: hsl(var(--ink));
+  line-height: 1.2;
+}
+
+.lumen-login-examples h2 {
+  margin-block: 0.5rem;
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+}
+
+.lumen-login-examples__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  gap: 1.25rem;
+}
+
+.lumen-login-examples__card {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.lumen-login-examples__card .ui-field {
+  display: grid;
+  gap: 0.5rem;
+}

package/templates/shared/media-workspace/src/lumen/media-workspace.css

@@ -0,0 +1,14 @@
+.lumen-media-workspace { display: grid; gap: var(--ui-space-lg); min-width: 0; container-type: inline-size; }
+.lumen-media-workspace__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem); gap: var(--ui-space-lg); align-items: start; }
+.lumen-media-workspace__preview, .lumen-media-workspace__inspector, .lumen-media-workspace__bottom { min-width: 0; }
+.lumen-media-workspace__preview { color: hsl(var(--ink)); background: hsl(var(--surface)); }
+.lumen-media-workspace__tools { min-width: 0; }
+.lumen-media-workspace__tools .ui-toolbar { flex-wrap: wrap; }
+.lumen-media-workspace__inspector > * + * { margin-block-start: var(--ui-space-lg); }
+@container (max-width: 45rem) {
+  .lumen-media-workspace__layout { grid-template-columns: minmax(0, 1fr); }
+  .lumen-media-workspace__tools { position: sticky; bottom: var(--ui-space-sm); z-index: 2; }
+}
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .lumen-media-workspace__tools { background: hsl(var(--surface)); backdrop-filter: none; }
+}