@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/PartsShown.tsx

@@ -0,0 +1,168 @@
+// The parts of a screen that shows parts in every state ("Dele": Parts.tsx, BlockParts.tsx), with the search, the order and the filters of the editor's lists ("Standardblokke",
+// Library.tsx): a search in the parts' names and what they are for, the order (by group, A–Å or Å–A,
+// kept in this browser; A–Å under the first letter of the names) and the funnel with the filter by
+// group, the one picked as a chip that removes it. The search and the group are kept while the editor
+// is open.
+import { createContext, useContext, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { ArrowsDownUp } from '@phosphor-icons/react';
+import { Choice, EmptyNote, Filters, FormHeading, InputChip, SearchRow, SupportingText, useKept } from './ui';
+import { byText } from './schema';
+import { headed, letterOf } from './Sheet';
+import { t } from './i18n';
+
+export type PartGroupInfo = { id: string; title: string };
+
+type Sort = 'group' | 'az' | 'za';
+const SORTS: Sort[] = ['group', 'az', 'za'];
+
+// What is picked over the parts: a group ('' all of them), what is searched for, the order, the groups'
+// names, and by name, where each part stands when they are sorted by name.
+const Shown = createContext<{ group: string; query: string; sort: Sort; groups: PartGroupInfo[]; order: Map<string, number> }>({
+  group: '',
+  query: '',
+  sort: 'group',
+  groups: [],
+  order: new Map(),
+});
+
+/** What is searched for over the parts ('' when nothing is). */
+export const useSearched = () => useContext(Shown).query.trim();
+/** Whether the parts stand in their groups (not by name). */
+export const useGrouped = () => useContext(Shown).sort === 'group';
+
+/** The search, the order and the filter over the parts (`children`, PartGroup), with "Ingen dele passer
+ * til søgningen." (or `none`) when none is shown. `keep`: the key they are kept under; `search`: the search's name. */
+export function PartsShown({
+  groups,
+  keep,
+  search: searchLabel = t.parts.filter.search,
+  none = t.parts.filter.none,
+  children,
+}: {
+  groups: PartGroupInfo[];
+  keep: string;
+  search?: string;
+  none?: string;
+  children: ReactNode;
+}) {
+  const [shownGroup, setGroup] = useKept(`${keep}-group`, '');
+  const group = groups.some((g) => g.id === shownGroup) ? shownGroup : '';
+  const [search, setSearch] = useKept(`${keep}-search`, '');
+  const sortKey = `editor-sort-${keep}`;
+  const [sort, setSort] = useState<Sort>(() => {
+    try {
+      const saved = localStorage.getItem(sortKey);
+      if (SORTS.some((s) => s === saved)) return saved as Sort;
+    } catch {}
+    return 'group';
+  });
+  function pickSort(next: Sort) {
+    setSort(next);
+    try {
+      localStorage.setItem(sortKey, next);
+    } catch {}
+  }
+  // The names of the parts shown, seen after they are drawn: none means "Ingen dele …", and by name they
+  // are put in order under their first letters.
+  const list = useRef<HTMLDivElement>(null);
+  const [names, setNames] = useState<string[]>([]);
+  useLayoutEffect(() => {
+    const now = [...(list.current?.querySelectorAll<HTMLElement>('[data-part]') ?? [])].map((el) => el.dataset.part!);
+    if (now.join('\n') !== names.join('\n')) setNames(now);
+  });
+  const sorted = [...names].sort((a, b) => (sort === 'za' ? -1 : 1) * byText(a, b));
+  const lettered = sort === 'group' ? [] : headed(sorted, letterOf);
+  // Each heading and part in its place: a heading before the parts under it.
+  const order = new Map<string, number>();
+  const headings: { key: string; order: number }[] = [];
+  let at = 0;
+  for (const g of lettered) {
+    if (g.key) headings.push({ key: g.key, order: at++ });
+    for (const name of g.items) order.set(name, at++);
+  }
+  const groupTitle = groups.find((g) => g.id === group)?.title;
+
+  return (
+    <>
+      <div className="space-y-3">
+        <SearchRow
+          value={search}
+          onChange={setSearch}
+          label={searchLabel}
+          sort={
+            <Choice
+              title={t.library.sort}
+              icon={ArrowsDownUp}
+              value={sort}
+              options={SORTS.map((s) => ({ value: s, label: t.library.sorts[s] }))}
+              onChange={pickSort}
+            />
+          }
+          filter={
+            <Filters
+              title={t.library.filter}
+              selected={!!group}
+              groups={[
+                {
+                  title: t.library.groupFilter,
+                  value: group,
+                  options: [{ value: '', label: t.library.allGroups }, ...groups.map((g) => ({ value: g.id, label: g.title }))],
+                  onChange: setGroup,
+                },
+              ]}
+            />
+          }
+        />
+        {groupTitle && (
+          <div className="flex flex-wrap gap-2">
+            <InputChip removeLabel={t.library.removeFilter(groupTitle)} onRemove={() => setGroup('')}>
+              {groupTitle}
+            </InputChip>
+          </div>
+        )}
+      </div>
+      <Shown.Provider value={{ group, query: search, sort, groups, order }}>
+        <div ref={list} className={sort === 'group' ? 'space-y-10' : 'flex flex-col gap-10'}>
+          {headings.map((h) => (
+            <div key={h.key} style={{ order: h.order }}>
+              <FormHeading>{h.key}</FormHeading>
+            </div>
+          ))}
+          {children}
+        </div>
+      </Shown.Provider>
+      {!names.length && <EmptyNote>{none}</EmptyNote>}
+    </>
+  );
+}
+
+/** The parts of a group, under its name while all the groups are shown in their groups; nothing when
+ * another group is picked, and no name when none of its parts is what is searched for. By name, the parts
+ * stand in one list, without the groups. */
+export function PartGroup({ group, children }: { group: string; children: ReactNode }) {
+  const shown = useContext(Shown);
+  if (shown.group && shown.group !== group) return null;
+  if (shown.sort !== 'group') return <div className="contents">{children}</div>;
+  return (
+    <div className="space-y-10 [&:not(:has([data-part]))]:hidden">
+      {!shown.group && <FormHeading>{shown.groups.find((g) => g.id === group)?.title}</FormHeading>}
+      {children}
+    </div>
+  );
+}
+
+/** A part's name and what it is for, above it; nothing when it is not what is searched for. */
+export function Part({ name, use, children }: { name: string; use?: string; children: ReactNode }) {
+  const shown = useContext(Shown);
+  const query = shown.query.trim().toLocaleLowerCase();
+  if (query && !`${name} ${use ?? ''}`.toLocaleLowerCase().includes(query)) return null;
+  return (
+    <section data-part={name} className="space-y-3" style={{ order: shown.order.get(name) }}>
+      <div>
+        <h2 className="font-mono text-sm font-medium text-accent">{name}</h2>
+        {use && <SupportingText>{use}</SupportingText>}
+      </div>
+      {children}
+    </section>
+  );
+}

package/src/PickerParts.tsx

@@ -0,0 +1,183 @@
+// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Valg af dato og tid": the theme's date and time pickers
+// (packages/editor/theme/ui/, through @site/editor) as the site draws them: the fields (docked, modal, a range, typed
+// wrong), and what opens from them in each state: the docked picker's month and its list of years, the modal one's
+// month with a day picked, its years, a range and the input mode with an error; the time picker's dial on the hours and
+// on a minute between the fives, and its input mode with an error, on a 12-hour clock (the dial and the input mode)
+// and horizontal (the dial beside the boxes, 24- and 12-hour). Only drawn: on the site datePicker.script.ts and
+// timePicker.script.ts make them work.
+import {
+  SiteDatePicker,
+  SiteDatePickerContainer,
+  SiteTimePicker,
+  SiteTimePickerContainer,
+  datePickerTexts,
+  timePickerTexts,
+} from './themeUi';
+import { Part } from './PartsShown';
+import { Preview } from './ui';
+import { t } from './i18n';
+
+const say = t.parts.screens.pickers;
+
+const pad = (n: number) => String(n).padStart(2, '0');
+const dayOf = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+
+export default function PickerParts() {
+  const dates = datePickerTexts();
+  const times = timePickerTexts();
+  const now = new Date();
+  const today = dayOf(now);
+  const month = today.slice(0, 7);
+  // A day picked in this month (not today, so both show), and a range of a week in it.
+  const picked = `${month}-${now.getDate() === 12 ? '14' : '12'}`;
+  const [start, end] = [`${month}-08`, `${month}-15`];
+  const drawn = 'flex flex-wrap items-start gap-6 p-4';
+  const box = 'w-[22.5rem] max-w-full';
+  return (
+    <>
+      <Part name="DatePicker" use={say.datePicker}>
+        <Preview>
+          <div className="space-y-6 p-4">
+            <div className="grid gap-6 sm:grid-cols-2" role="group" aria-label={say.fields}>
+              <SiteDatePicker label={say.date} name="date" />
+              <SiteDatePicker label={say.date} name="date-modal" kind="modal" value={picked} />
+              <SiteDatePicker label={say.period} name="from" endName="to" range value={start} endValue={end} />
+              <SiteDatePicker label={say.date} name="date-wrong" defaultValue="31.02.2026" error={dates.wrongFormat} />
+            </div>
+          </div>
+          <div className={drawn}>
+            <div className={box} role="group" aria-label={say.docked}>
+              <SiteDatePickerContainer
+                kind="docked"
+                view="days"
+                month={month}
+                start={picked}
+                end=""
+                focus={picked}
+                today={today}
+                texts={dates}
+              />
+            </div>
+            <div className={box} role="group" aria-label={say.dockedYears}>
+              <SiteDatePickerContainer
+                kind="docked"
+                view="years"
+                month={month}
+                start={picked}
+                end=""
+                focus={picked}
+                today={today}
+                texts={dates}
+              />
+            </div>
+            <div className={box} role="group" aria-label={say.modal}>
+              <SiteDatePickerContainer
+                kind="modal"
+                view="days"
+                month={month}
+                start={picked}
+                end=""
+                focus={picked}
+                today={today}
+                texts={dates}
+              />
+            </div>
+            <div className={box} role="group" aria-label={say.modalYears}>
+              <SiteDatePickerContainer
+                kind="modal"
+                view="years"
+                month={month}
+                start={picked}
+                end=""
+                focus={picked}
+                today={today}
+                texts={dates}
+              />
+            </div>
+            <div className={box} role="group" aria-label={say.range}>
+              <SiteDatePickerContainer
+                kind="modal"
+                range
+                view="days"
+                month={month}
+                start={start}
+                end={end}
+                focus={start}
+                today={today}
+                texts={dates}
+              />
+            </div>
+            <div className={box} role="group" aria-label={say.input}>
+              <SiteDatePickerContainer
+                kind="modal"
+                view="input"
+                month={month}
+                start=""
+                end=""
+                focus={today}
+                today={today}
+                typed={['31.02.2026']}
+                error={{ field: 0, message: dates.wrongFormat }}
+                texts={dates}
+              />
+            </div>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="TimePicker" use={say.timePicker}>
+        <Preview>
+          <div className="grid gap-6 p-4 sm:grid-cols-2" role="group" aria-label={say.fields}>
+            <SiteTimePicker label={say.time} name="time" />
+            <SiteTimePicker label={say.time} name="time-set" value="14:30" />
+            <SiteTimePicker label={`${say.time} (${say.twelveHours})`} name="time-12" value="14:30" timeFormat="12h" />
+          </div>
+          <div className={drawn}>
+            <div className="w-[20.5rem] max-w-full" role="group" aria-label={say.hours}>
+              <SiteTimePickerContainer view="dial" selecting="hour" hour={14} minute={30} texts={times} />
+            </div>
+            <div className="w-[20.5rem] max-w-full" role="group" aria-label={say.minutes}>
+              <SiteTimePickerContainer view="dial" selecting="minute" hour={9} minute={7} texts={times} />
+            </div>
+            <div className="w-[20.5rem] max-w-full" role="group" aria-label={say.input}>
+              <SiteTimePickerContainer view="input" selecting="hour" hour={14} minute={30} texts={times} />
+            </div>
+            <div className="w-[20.5rem] max-w-full" role="group" aria-label={say.wrong}>
+              <SiteTimePickerContainer
+                view="input"
+                selecting="hour"
+                hour={14}
+                minute={30}
+                typed={['25', '30']}
+                error={{ field: 0, message: times.wrong }}
+                texts={times}
+              />
+            </div>
+            <div className="w-[20.5rem] max-w-full" role="group" aria-label={say.twelveHours}>
+              <SiteTimePickerContainer view="dial" selecting="hour" hour={14} minute={30} texts={times} timeFormat="12h" />
+            </div>
+            <div className="w-[20.5rem] max-w-full" role="group" aria-label={`${say.twelveHours}: ${say.input}`}>
+              <SiteTimePickerContainer view="input" selecting="hour" hour={9} minute={15} texts={times} timeFormat="12h" />
+            </div>
+          </div>
+          {/* As wide as a phone on its side: scrolled sideways on a narrower screen. */}
+          <div className={`${drawn} overflow-x-auto`}>
+            <div className="w-[36rem] shrink-0" role="group" aria-label={say.horizontal}>
+              <SiteTimePickerContainer view="dial" selecting="minute" hour={14} minute={30} texts={times} orientation="horizontal" />
+            </div>
+            <div className="w-[36rem] shrink-0" role="group" aria-label={`${say.horizontal}: ${say.twelveHours}`}>
+              <SiteTimePickerContainer
+                view="dial"
+                selecting="hour"
+                hour={20}
+                minute={0}
+                texts={times}
+                timeFormat="12h"
+                orientation="horizontal"
+              />
+            </div>
+          </div>
+        </Preview>
+      </Part>
+    </>
+  );
+}