@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/ui/Carousel.tsx

@@ -0,0 +1,124 @@
+// A carousel (m3.material.io/components/carousel, .carousel in ../styles/ui.css): its items in a row to swipe
+// (`items`, each with its key, its name for screen readers, `label`, and what it shows, `content`), with native
+// scroll-snap, so swiping works on a phone without JavaScript. Its layout (`layout`) is Material's:
+// - 'uncontained' (the default): every item as wide as the others, as many as fit and the next one cut off at the edge,
+//   reaching out to a phone's edges: one with the next peeking in, two on a tablet, three on a computer.
+// - 'multi-browse': large items from the start, then a medium and a small one, as high as the theme says; each grows
+//   and shrinks as it passes (carouselLayout.ts), for leafing quickly through many pictures.
+// - 'hero': one large item (more on a wide screen) and a small one after it (`alignment` 'start', the default) or
+//   between two small ones (`alignment` 'center'), for pictures to look at one by one, with the next one in sight.
+// - 'full-screen': one item at a time, as wide as the carousel, out to a phone's edges.
+// In the contained layouts (all but 'uncontained') an item's `content` fills its mask (.carousel-item-mask), as a
+// picture should; a text on it can fade as it shrinks with --carousel-mask (0 to 1). Under them the theme's addition to
+// M3's carousel, a page indicator: a dot for each item (`indicatorLabels`, what each says to a screen reader), which
+// follows the scroll position and jumps to an item. On the site carousel.script.ts makes it work and shows it and lays
+// out multi-browse and hero, in the editor it works here. No autoplay: the visitor decides the pace. `label`: what the
+// carousel is called; `roleDescription` and `itemRoleDescription`: what it and an item are (aria-roledescription, in
+// the site's language); `className` after its own classes (its place in the text). An Astro component gives an element
+// the same classes with carouselClass.
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useOnSite } from '@morphemecms/cms/src/standard/view';
+import {
+  carouselLayout,
+  keylineLayouts,
+  scrollFor,
+  shownItem,
+  type CarouselAlignment,
+  type CarouselLayout,
+} from '@theme/ui/carouselLayout';
+
+export type { CarouselAlignment, CarouselLayout };
+export type CarouselItem = { key: string; label: string; content: ReactNode };
+
+/** The layouts of a carousel, as Material 3 names them. */
+export const carouselLayouts: CarouselLayout[] = ['multi-browse', 'uncontained', 'hero', 'full-screen'];
+
+/** A carousel's classes: a contained layout's (none for the default, uncontained), and a hero's aligned to the centre. */
+export const carouselClass = (layout: CarouselLayout = 'uncontained', alignment: CarouselAlignment = 'start') =>
+  [
+    'carousel',
+    layout !== 'uncontained' && `carousel-contained carousel-${layout}`,
+    layout === 'hero' && alignment === 'center' && 'carousel-center',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+export default function Carousel({
+  items,
+  layout = 'uncontained',
+  alignment = 'start',
+  label,
+  roleDescription,
+  itemRoleDescription,
+  indicatorLabels,
+  className,
+}: {
+  items: CarouselItem[];
+  layout?: CarouselLayout;
+  alignment?: CarouselAlignment;
+  label?: string;
+  roleDescription: string;
+  itemRoleDescription: string;
+  indicatorLabels: string[];
+  className?: string;
+}) {
+  const onSite = useOnSite();
+  const root = useRef<HTMLDivElement>(null);
+  const row = useRef<HTMLUListElement>(null);
+  const [shown, setShown] = useState(0);
+  const contained = layout !== 'uncontained';
+  // In the editor: multi-browse and hero laid out here, as carousel.script.ts does on the site.
+  useEffect(
+    () => (root.current && keylineLayouts.includes(layout) ? carouselLayout(root.current) : undefined),
+    [layout, alignment, items.length],
+  );
+  const go = (i: number) => row.current?.scrollTo({ left: scrollFor(row.current, i), behavior: 'smooth' });
+  return (
+    <div
+      ref={root}
+      className={[carouselClass(layout, alignment), className].filter(Boolean).join(' ')}
+      role="region"
+      aria-roledescription={roleDescription}
+      aria-label={label || undefined}
+      data-carousel=""
+      data-carousel-layout={layout === 'uncontained' ? undefined : layout}
+      data-carousel-alignment={layout === 'hero' && alignment === 'center' ? alignment : undefined}
+    >
+      <ul ref={row} className="carousel-items" data-carousel-items="" onScroll={(e) => setShown(shownItem(e.currentTarget))}>
+        {items.map((item) => (
+          <li
+            key={item.key}
+            className="carousel-item"
+            aria-roledescription={itemRoleDescription}
+            aria-label={item.label}
+            data-carousel-item=""
+          >
+            {contained ? (
+              <div className="carousel-item-mask" data-carousel-mask="">
+                {item.content}
+              </div>
+            ) : (
+              item.content
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <div className="carousel-indicator" data-carousel-indicator="" hidden={onSite}>
+        {items.map((item, i) => (
+          <button
+            key={item.key}
+            type="button"
+            className="carousel-indicator-dot"
+            aria-label={indicatorLabels[i]}
+            aria-current={onSite ? undefined : i === shown}
+            data-carousel-dot=""
+            onClick={() => go(i)}
+          >
+            <span />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/theme/ui/Checkbox.tsx

@@ -0,0 +1,59 @@
+// A checkbox (m3.material.io/components/checkbox, .checkbox in ../styles/ui.css): the box, its name (`label`) beside
+// it and a line under the name (`supporting`), all of it one <label>, so a click anywhere ticks it. `checked`: ticked
+// from the start; `indeterminate`: neither ticked nor not (a choice over others, some of which are ticked; the browser
+// has it as a property, not an attribute, so on the site checkbox.script.ts sets it from data-indeterminate, and in the
+// editor it is set here, until it is clicked); `disabled`: it cannot be changed (a choice that is always on); `error`:
+// it is wrong (not ticked where it must be), marked, and with a text the line under it says what is wrong. The tick and
+// the dash are the theme's icons (`check`, `minus`), shown by a theme that draws the box itself; else the browser draws
+// the box in the accent. With `onChange` (the editor) `checked` is whether it is ticked now, else ticked from the start.
+// Other attributes (`name`, `value`, `required`, data-…) go on the <input>, and `className` on
+// the label.
+import { useEffect, useRef, type ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+
+/** A checkbox's classes, and the error's when it is wrong. */
+export const checkboxClass = (error = false) => (error ? 'checkbox checkbox-error' : 'checkbox');
+
+export default function Checkbox({
+  label,
+  supporting,
+  checked,
+  indeterminate,
+  error,
+  className,
+  ...rest
+}: {
+  label: string;
+  supporting?: ReactNode;
+  checked?: boolean;
+  indeterminate?: boolean;
+  error?: string | boolean;
+  className?: string;
+} & Record<string, unknown>) {
+  const input = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (input.current) input.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  const line = typeof error === 'string' && error ? error : supporting;
+  return (
+    <label className={[checkboxClass(Boolean(error)), className].filter(Boolean).join(' ')}>
+      <span className="checkbox-box">
+        <input
+          ref={input}
+          type="checkbox"
+          className="checkbox-input"
+          {...(rest.onChange ? { checked: Boolean(checked) } : { defaultChecked: checked })}
+          aria-invalid={error ? true : undefined}
+          data-indeterminate={indeterminate ? '' : undefined}
+          {...rest}
+        />
+        <Svg name="check" size={14} className="checkbox-icon" />
+        {indeterminate && <Svg name="minus" size={14} className="checkbox-indeterminate-icon" />}
+      </span>
+      <span className="checkbox-text">
+        <span className="checkbox-label">{label}</span>
+        {line && <span className="checkbox-supporting">{line}</span>}
+      </span>
+    </label>
+  );
+}

package/theme/ui/Chip.tsx

@@ -0,0 +1,101 @@
+// A chip (m3.material.io/components/chips, .chip in ../styles/ui.css): a short label (`label`), evt. an icon before it
+// (`icon`), or a person's picture (`avatar`: its address, on an input chip) and one after it (`trailingIcon`). Its kind
+// (`kind`) is Material's name; how each looks is the theme's: assist (the default: a link to something related, a post's
+// tag), filter (one of a few that choose what is shown: `selected` is the chosen one, aria-pressed on a button,
+// aria-current="page" on a link; it has a check before its label, which a theme shows on the chosen one or not), input
+// (something entered, evt. selected and with a button after it that removes it, `removeLabel`, its name for screen
+// readers, and what it does in the editor, `onRemove`) and suggestion (evt. selected). Assist, filter and suggestion chips can be `elevated` (with a shadow
+// instead of the edge, on a picture or a colour). Its states: `selected`, `disabled` (it cannot be used: a button
+// disabled, a link only shown) and `dragged` (while it is dragged to another place, with the shadow that lifts it).
+// With `href` it is a link (Link: on the site; in the editor only drawn), with `plain` only shown (a tag without a
+// page), else a <button type="button">; an input chip with `removeLabel` is the chip (a <span>) with its own button and
+// the button that removes it. Other attributes (data-…, aria-…, onClick) go on the button or the link, and `className`
+// after its own classes. The label is a prop, not children, so an Astro component shows it as it is (BlogIndex.astro).
+import type { ReactNode } from 'react';
+import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+export type ChipKind = 'assist' | 'filter' | 'input' | 'suggestion';
+
+/** The kinds of a chip, as Material 3 names them. */
+export const chipKinds: ChipKind[] = ['assist', 'filter', 'input', 'suggestion'];
+
+/** A chip's classes: its kind's, and evt. elevated (not an input chip), dragged, and with a button that removes it. */
+export const chipClass = (kind: ChipKind = 'assist', { elevated = false, dragged = false, removable = false } = {}) =>
+  ['chip', `chip-${kind}`, elevated && kind !== 'input' && 'chip-elevated', dragged && 'chip-dragged', removable && 'chip-removable']
+    .filter(Boolean)
+    .join(' ');
+
+export default function Chip({
+  label,
+  kind = 'assist',
+  selected,
+  elevated,
+  disabled,
+  dragged,
+  icon,
+  avatar,
+  trailingIcon,
+  removeLabel,
+  onRemove,
+  href,
+  plain,
+  className,
+  ...rest
+}: {
+  label: ReactNode;
+  kind?: ChipKind;
+  selected?: boolean;
+  elevated?: boolean;
+  disabled?: boolean;
+  dragged?: boolean;
+  icon?: IconRef;
+  avatar?: string;
+  trailingIcon?: IconRef;
+  removeLabel?: string;
+  onRemove?: () => void;
+  href?: string;
+  plain?: boolean;
+  className?: string;
+} & Record<string, unknown>) {
+  const removable = kind === 'input' && Boolean(removeLabel);
+  const classes = [chipClass(kind, { elevated, dragged, removable }), className].filter(Boolean).join(' ');
+  // Chosen: a filter, an input or a suggestion chip that is a button (a filter chip that is a link: the open page).
+  const pressed = kind === 'assist' ? undefined : kind === 'filter' ? Boolean(selected) : selected;
+  const content = (
+    <>
+      {kind === 'filter' && <Svg name="check" size={18} className="chip-check" />}
+      {avatar ? <img src={avatar} alt="" className="chip-avatar" /> : icon && <Glyph icon={icon} size={18} />}
+      {label}
+      {trailingIcon && !removable && <Glyph icon={trailingIcon} size={18} className="chip-trailing-icon" />}
+    </>
+  );
+  if (removable)
+    return (
+      <span className={classes} data-selected={selected ? '' : undefined} aria-disabled={disabled || undefined}>
+        <button type="button" className="chip-action" aria-pressed={pressed} disabled={disabled} {...rest}>
+          {content}
+        </button>
+        <button type="button" className="chip-remove" aria-label={removeLabel} disabled={disabled} onClick={onRemove}>
+          <Glyph icon={trailingIcon ?? 'x'} size={18} />
+        </button>
+      </span>
+    );
+  if (href !== undefined && !disabled)
+    return (
+      <Link href={href} className={classes} aria-current={selected ? 'page' : undefined} {...rest}>
+        {content}
+      </Link>
+    );
+  if (plain || href !== undefined)
+    return (
+      <span className={classes} aria-disabled={disabled || undefined} {...rest}>
+        {content}
+      </span>
+    );
+  return (
+    <button type="button" className={classes} aria-pressed={pressed} disabled={disabled} {...rest}>
+      {content}
+    </button>
+  );
+}

package/theme/ui/ChipSet.tsx

@@ -0,0 +1,27 @@
+// A chip set (Material's chips side by side, as Material's own web components group them, md-chip-set; .chip-set in
+// ../styles/ui.css): the theme's chips (`children`: Chip) in a group with its name (`label`, read by screen readers).
+// Its layout (`layout`): wrap (the default: on as many lines as they need) or scroll (on one line that scrolls sideways
+// when they are wider than it, as Material's chips do on a phone, without a scrollbar). Other attributes (data-…) go on
+// the group, and `className` after its own classes. An Astro component gives an element the same classes with
+// chipSetClass.
+import type { ReactNode } from 'react';
+
+export const chipSetLayouts = ['wrap', 'scroll'] as const;
+export type ChipSetLayout = (typeof chipSetLayouts)[number];
+
+/** A chip set's classes: its layout's. */
+export const chipSetClass = (layout: ChipSetLayout = 'wrap') => `chip-set chip-set-${layout}`;
+
+export default function ChipSet({
+  layout,
+  label,
+  className,
+  children,
+  ...rest
+}: { layout?: ChipSetLayout; label: string; className?: string; children: ReactNode } & Record<string, unknown>) {
+  return (
+    <div role="group" aria-label={label} className={[chipSetClass(layout), className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </div>
+  );
+}

package/theme/ui/DatePicker.tsx

@@ -0,0 +1,149 @@
+// A date picker (m3.material.io/components/date-pickers, .date-picker in ../styles/ui.css): a text field to type a
+// date in (in the site's language's order, 02.11.2026), with a calendar button that opens the picker
+// (DatePickerContainer.tsx), and what a form sends, the day as ISO (2026-11-02), in a hidden input named `name` (and,
+// with `range`, the last day in one named `endName`). `kind`: docked (the picker opens under the field) or modal (in a
+// dialog in the middle of the screen, also with a keyboard input mode); a range is always modal. `value`, `endValue`:
+// the day(s) it starts with; `min`, `max`: the first and last day that can be picked; `label`, `supporting`, `error`:
+// the field's name, the line under it (else the date's format) and what is wrong with it (the field marked);
+// `required`, `id` and the rest go on the field's input, and `className` on the field. On the site datePicker.script.ts opens it, draws the picker in its <dialog>, writes the
+// day picked into the inputs and closes it; in the editor's previews it is only drawn, and with `onChange` (the editor's
+// own fields) it works the same way, here, and says the day(s) picked (or '' for none). Its fixed texts
+// (datePickerTexts) are the site's own, in @site/texts, unless `texts` gives them (the editor's, in its language).
+import { useEffect, useRef, type ReactNode } from 'react';
+import { siteText, locale } from '@morphemecms/cms/src/i18n';
+import { datePickerField } from '@theme/ui/datePicker.script';
+import IconButton from '@theme/ui/IconButton';
+import TextField from '@theme/ui/TextField';
+import { dateOf, dayTyped } from '@theme/ui/dates';
+import type { DatePickerKind, DatePickerTexts } from '@theme/ui/DatePickerContainer';
+
+/** A date picker's fixed texts, in the language its dates are written in. */
+export const datePickerTexts = (): DatePickerTexts => ({
+  locale,
+  select: siteText('Vælg dato'),
+  selectRange: siteText('Vælg datoer'),
+  enter: siteText('Skriv dato'),
+  enterRange: siteText('Skriv datoer'),
+  date: siteText('Dato'),
+  start: siteText('Startdato'),
+  end: siteText('Slutdato'),
+  format: siteText('dd.mm.åååå'),
+  wrongFormat: siteText('Skriv datoen som dd.mm.åååå.'),
+  notAllowed: siteText('Datoen kan ikke vælges.'),
+  endBeforeStart: siteText('Slutdatoen er før startdatoen.'),
+  previousMonth: siteText('Forrige måned'),
+  nextMonth: siteText('Næste måned'),
+  previousYear: siteText('Forrige år'),
+  nextYear: siteText('Næste år'),
+  chooseMonth: siteText('Vælg måned'),
+  chooseYear: siteText('Vælg år'),
+  toInput: siteText('Skift til at skrive'),
+  toCalendar: siteText('Skift til kalenderen'),
+  cancel: siteText('Annuller'),
+  ok: siteText('OK'),
+});
+
+/** What a date picker's script is told by its field: the fixed texts and what can be picked. */
+export type DatePickerSettings = { texts: DatePickerTexts; kind: DatePickerKind; range: boolean; min: string; max: string };
+
+export default function DatePicker({
+  label,
+  name,
+  endName,
+  value = '',
+  endValue = '',
+  kind = 'docked',
+  range = false,
+  min = '',
+  max = '',
+  supporting,
+  error,
+  texts: given,
+  onChange,
+  className,
+  ...rest
+}: {
+  label: string;
+  name: string;
+  endName?: string;
+  value?: string;
+  endValue?: string;
+  kind?: DatePickerKind;
+  range?: boolean;
+  min?: string;
+  max?: string;
+  supporting?: ReactNode;
+  error?: string | boolean;
+  texts?: DatePickerTexts;
+  onChange?: (value: string, endValue: string) => void;
+  className?: string;
+} & Record<string, unknown>) {
+  const texts = given ?? datePickerTexts();
+  const modal = kind === 'modal' || range;
+  const settings: DatePickerSettings = { texts, kind: modal ? 'modal' : 'docked', range, min, max };
+  const typed = [value, range ? endValue : '']
+    .filter((d) => dateOf(d))
+    .map((d) => dayTyped(d, texts.locale))
+    .join(' – ');
+  const format = range ? `${texts.format} – ${texts.format}` : texts.format;
+  const title = range ? texts.selectRange : texts.select;
+  const box = useWorking(onChange, [value, endValue], typed);
+  return (
+    <div ref={box} className={['date-picker-field', className].filter(Boolean).join(' ')} data-date-picker={JSON.stringify(settings)}>
+      <TextField
+        label={label}
+        supporting={supporting ?? format}
+        error={error}
+        placeholder={format}
+        defaultValue={typed}
+        inputMode="numeric"
+        autoComplete="off"
+        data-date-picker-text=""
+        {...rest}
+      />
+      <IconButton
+        icon="calendar-blank"
+        label={title}
+        className="date-picker-field-button"
+        aria-haspopup="dialog"
+        aria-expanded="false"
+        data-date-picker-open=""
+      />
+      <input type="hidden" name={name} defaultValue={dateOf(value) ? value : ''} data-date-picker-value="0" />
+      {range && <input type="hidden" name={endName} defaultValue={dateOf(endValue) ? endValue : ''} data-date-picker-value="1" />}
+      <dialog
+        className={modal ? 'dialog-modal date-picker-dialog' : 'date-picker-popover'}
+        aria-label={title}
+        data-date-picker-dialog=""
+      ></dialog>
+    </div>
+  );
+}
+
+// A picker the editor changes (`onChange`): made to work here as on the site, telling the editor what is picked, and
+// showing what the editor's value is when it changes from outside (a version restored).
+function useWorking(onChange: ((value: string, endValue: string) => void) | undefined, values: string[], typed: string) {
+  const box = useRef<HTMLDivElement>(null);
+  const told = useRef(onChange);
+  told.current = onChange;
+  const working = onChange !== undefined;
+  useEffect(() => {
+    const field = box.current;
+    if (!working || !field) return;
+    datePickerField(field);
+    const inputs = [...field.querySelectorAll<HTMLInputElement>('[data-date-picker-value]')];
+    const changed = () => told.current?.(inputs[0]?.value ?? '', inputs[1]?.value ?? '');
+    inputs.forEach((i) => i.addEventListener('change', changed));
+    return () => inputs.forEach((i) => i.removeEventListener('change', changed));
+  }, [working]);
+  useEffect(() => {
+    const field = box.current;
+    if (!working || !field) return;
+    const inputs = [...field.querySelectorAll<HTMLInputElement>('[data-date-picker-value]')];
+    if (inputs.every((input, i) => input.value === (dateOf(values[i] ?? '') ? values[i] : ''))) return;
+    inputs.forEach((input, i) => (input.value = dateOf(values[i] ?? '') ? values[i]! : ''));
+    const text = field.querySelector<HTMLInputElement>('[data-date-picker-text]');
+    if (text) text.value = typed;
+  }, [working, ...values]);
+  return box;
+}