@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/ContainmentParts.tsx

@@ -0,0 +1,185 @@
+// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Dialoger, ark og karrusel": the theme's dialog, bottom sheet and carousel
+// (packages/editor/theme/ui/, through @site/editor) as the site draws them, with made-up texts and the plain picture: a
+// basic dialog, one with an icon, a list and a divider, the container alone (a pop-up's box) and a full-screen one; the
+// modal bottom sheet and the standard one collapsed, half expanded and expanded at the bottom of a frame with a page
+// behind it (it can be dragged and tapped there, as on the site); and the carousel in each of Material's layouts. Only
+// the standard sheet and the carousels do something here; the buttons lead nowhere.
+import type { ReactNode } from 'react';
+import { SiteBottomSheet, SiteButton, SiteCarousel, SiteCheckbox, SiteDialog, SiteTextField, bottomSheetCoverClass } from './themeUi';
+import { Part } from './PartsShown';
+import { Preview } from './ui';
+import { examplePicture } from './examples';
+import { t } from './i18n';
+
+const say = t.parts.screens.containment;
+const numbers = [1, 2, 3, 4, 5, 6];
+
+/** A label over an example: what the example shows. */
+function Shown({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="space-y-2">
+      <p className="text-sm text-muted">{label}</p>
+      {children}
+    </div>
+  );
+}
+
+/** The plain picture with its number, which fades as its item shrinks (--carousel-mask, carouselLayout.ts). */
+function Picture({ n }: { n: number }) {
+  return (
+    <>
+      <img src={examplePicture} alt="" />
+      <span className="absolute bottom-3 left-4 font-medium" style={{ opacity: 'calc(1 - 3 * var(--carousel-mask, 0))' }}>
+        {say.picture(n)}
+      </span>
+    </>
+  );
+}
+
+function Dialogs() {
+  const actions = (
+    <>
+      <SiteButton kind="text">{say.cancel}</SiteButton>
+      <SiteButton>{say.accept}</SiteButton>
+    </>
+  );
+  return (
+    <div className="grid gap-6 p-4 lg:grid-cols-2">
+      <Shown label={say.dialogKinds.basic}>
+        <SiteDialog headline={say.heading} supportingText={say.text} actions={actions} />
+      </Shown>
+      <Shown label={say.dialogKinds.icon}>
+        <SiteDialog icon="info" headline={say.heading} supportingText={say.text} divider actions={actions}>
+          <div className="space-y-3">
+            {say.choices.map((c, i) => (
+              <SiteCheckbox key={c} label={c} checked={i === 0} />
+            ))}
+          </div>
+        </SiteDialog>
+      </Shown>
+      <Shown label={say.dialogKinds.container}>
+        <SiteDialog className="p-6">
+          <p className="text-lg font-medium">{say.heading}</p>
+          <p className="mt-2 text-muted">{say.text}</p>
+        </SiteDialog>
+      </Shown>
+      <Shown label={say.dialogKinds.fullScreen}>
+        <div className="h-96">
+          <SiteDialog
+            kind="full-screen"
+            className="h-full"
+            headline={say.heading}
+            closeLabel={say.close}
+            divider
+            actions={<SiteButton kind="text">{say.save}</SiteButton>}
+            supportingText={say.text}
+          >
+            <div className="space-y-4">
+              {say.fields.map((f) => (
+                <SiteTextField key={f} label={f} />
+              ))}
+            </div>
+          </SiteDialog>
+        </div>
+      </Shown>
+    </div>
+  );
+}
+
+function BottomSheets() {
+  const standard = (state: 'collapsed' | 'half-expanded' | 'expanded', label: string) => (
+    <Shown label={label}>
+      {/* The frame holds the sheet (contain: layout) and is as high as a screen to it (a size container). */}
+      <div className="[container-type:size] relative h-96 overflow-hidden rounded-xl border border-line [contain:layout]">
+        <p className="p-4 text-muted">{say.page}</p>
+        <SiteBottomSheet
+          kind="standard"
+          state={state}
+          headline={say.heading}
+          supportingText={say.sheetText}
+          dragHandleLabel={say.dragHandle}
+        >
+          {numbers.slice(0, 4).map((n) => (
+            <p key={n} className="mb-3 text-muted">
+              {say.text}
+            </p>
+          ))}
+        </SiteBottomSheet>
+      </div>
+    </Shown>
+  );
+  return (
+    <div className="grid gap-6 p-4 lg:grid-cols-2">
+      <Shown label={say.sheetKinds.modal}>
+        <SiteBottomSheet headline={say.heading} supportingText={say.sheetText} closeLabel={say.close} footer={say.footer} height="18rem">
+          <p className={bottomSheetCoverClass}>{say.text}</p>
+        </SiteBottomSheet>
+      </Shown>
+      {standard('collapsed', say.sheetKinds.collapsed)}
+      {standard('half-expanded', say.sheetKinds.halfExpanded)}
+      {standard('expanded', say.sheetKinds.expanded)}
+    </div>
+  );
+}
+
+function Carousels() {
+  const pictures = (layout: 'multi-browse' | 'hero' | 'full-screen', alignment?: 'center') => (
+    <SiteCarousel
+      layout={layout}
+      alignment={alignment}
+      label={say.roleDescription}
+      roleDescription={say.roleDescription}
+      itemRoleDescription={say.item}
+      items={numbers.map((n) => ({ key: String(n), label: say.picture(n), content: <Picture n={n} /> }))}
+      indicatorLabels={numbers.map((n) => say.showPicture(n))}
+    />
+  );
+  return (
+    <div className="space-y-8 p-4">
+      <Shown label={say.layouts.uncontained}>
+        <SiteCarousel
+          label={say.roleDescription}
+          roleDescription={say.roleDescription}
+          itemRoleDescription={say.item}
+          items={numbers.slice(0, 5).map((n) => ({
+            key: String(n),
+            label: say.card(n),
+            content: (
+              <div className="block-panel w-full">
+                <p className="block-panel-title">{say.card(n)}</p>
+                <p className="block-panel-text">{say.text}</p>
+              </div>
+            ),
+          }))}
+          indicatorLabels={numbers.slice(0, 5).map((n) => say.show(n))}
+        />
+      </Shown>
+      <Shown label={say.layouts.multiBrowse}>{pictures('multi-browse')}</Shown>
+      <Shown label={say.layouts.hero}>{pictures('hero')}</Shown>
+      <Shown label={say.layouts.heroCenter}>{pictures('hero', 'center')}</Shown>
+      <Shown label={say.layouts.fullScreen}>{pictures('full-screen')}</Shown>
+    </div>
+  );
+}
+
+export default function ContainmentParts() {
+  return (
+    <>
+      <Part name="Dialog" use={say.dialog}>
+        <Preview>
+          <Dialogs />
+        </Preview>
+      </Part>
+      <Part name="BottomSheet" use={say.bottomSheet}>
+        <Preview>
+          <BottomSheets />
+        </Preview>
+      </Part>
+      <Part name="Carousel" use={say.carousel}>
+        <Preview>
+          <Carousels />
+        </Preview>
+      </Part>
+    </>
+  );
+}

package/src/Crop.tsx

@@ -0,0 +1,152 @@
+// How a picture in the text is cut (packages/editor/lib/crop.mjs), in its sheet (BlockDialog.tsx): its format
+// (Original, or one of FORMATS), and the part of the picture that is shown in it, moved by dragging
+// the picture (or with the arrow keys) and made larger with the slider. A new format, or another
+// picture, starts with the largest part in the middle.
+import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';
+import { FORMATS, middleCrop, ratioOf } from '../lib/crop.mjs';
+import { shownAt } from './images';
+import { FilterChip, SupportingText, Slider } from './ui';
+import { t } from './i18n';
+
+export type Cut = number[] | null;
+
+type Props = {
+  src: string;
+  format: string;
+  crop: Cut;
+  /** The new format and crop; a function of them as they are then, as the picture loads later. */
+  onChange: (next: (was: { format: string; crop: Cut }) => { format: string; crop: Cut }) => void;
+};
+
+const MAX_ZOOM = 4;
+const clamp = (n: number, low: number, high: number) => Math.min(high, Math.max(low, n));
+
+// The crop moved (in percent of the picture) and kept inside it.
+const moved = ([x, y, w, h]: number[], dx: number, dy: number) => [clamp(x + dx, 0, 100 - w), clamp(y + dy, 0, 100 - h), w, h];
+
+export default function CropField({ src, format, crop, onChange }: Props) {
+  // Width divided by height of the picture, once it is loaded (of the picture it was loaded for).
+  const [size, setSize] = useState({ src: '', aspect: 0 });
+  const aspect = size.src === src ? size.aspect : 0;
+  useEffect(() => {
+    let gone = false;
+    const img = new Image();
+    img.onload = () => !gone && img.naturalHeight && setSize({ src, aspect: img.naturalWidth / img.naturalHeight });
+    img.src = shownAt(src);
+    return () => {
+      gone = true;
+    };
+  }, [src]);
+
+  // Another picture: the part in the middle of it.
+  const first = useRef(src);
+  useEffect(() => {
+    if (src === first.current) return;
+    first.current = src;
+    onChange((was) => ({ ...was, crop: null }));
+  }, [src]);
+  useEffect(() => {
+    if (format && !crop && aspect) onChange((was) => ({ ...was, crop: middleCrop(aspect, was.format) }));
+  }, [format, crop, aspect]);
+
+  const ratio = ratioOf(format);
+  const whole = aspect ? middleCrop(aspect, format) : null;
+  const zoom = crop && whole ? whole[2] / crop[2] : 1;
+
+  function setZoom(z: number) {
+    if (!crop || !whole) return;
+    const [x, y, w, h] = crop;
+    const [nw, nh] = [whole[2] / z, whole[3] / z];
+    onChange((was) => ({ ...was, crop: moved([x + w / 2 - nw / 2, y + h / 2 - nh / 2, nw, nh], 0, 0) }));
+  }
+
+  // Dragging the picture: the part shown follows the finger (or the mouse).
+  const frame = useRef<HTMLDivElement>(null);
+  const drag = useRef<{ id: number; x: number; y: number; crop: number[] } | null>(null);
+  function down(e: PointerEvent) {
+    if (!crop) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    drag.current = { id: e.pointerId, x: e.clientX, y: e.clientY, crop };
+  }
+  function move(e: PointerEvent) {
+    const d = drag.current;
+    const box = frame.current?.getBoundingClientRect();
+    if (!d || d.id !== e.pointerId || !box?.width) return;
+    const [, , w, h] = d.crop;
+    const next = moved(d.crop, (-(e.clientX - d.x) / box.width) * w, (-(e.clientY - d.y) / box.height) * h);
+    onChange((was) => ({ ...was, crop: next }));
+  }
+  const up = (e: PointerEvent) => drag.current?.id === e.pointerId && (drag.current = null);
+  function key(e: KeyboardEvent) {
+    const step = { ArrowLeft: [-2, 0], ArrowRight: [2, 0], ArrowUp: [0, -2], ArrowDown: [0, 2] }[e.key];
+    if (!step || !crop) return;
+    e.preventDefault();
+    onChange((was) => ({ ...was, crop: was.crop && moved(was.crop, step[0], step[1]) }));
+  }
+
+  return (
+    <div>
+      <p className="mb-1 font-medium" id="crop-format">
+        {t.media.crop.format}
+      </p>
+      <SupportingText className="mb-2">{t.media.crop.formatHint}</SupportingText>
+      <div role="radiogroup" aria-labelledby="crop-format" className="flex flex-wrap gap-2">
+        {['', ...FORMATS].map((f) => {
+          const r = ratioOf(f);
+          return (
+            <FilterChip
+              key={f || 'original'}
+              selected={f === format}
+              onClick={() => onChange(() => ({ format: f, crop: f && aspect ? middleCrop(aspect, f) : null }))}
+            >
+              {r > 0 && (
+                <span
+                  aria-hidden="true"
+                  className="rounded-[3px] border-[1.5px] border-current"
+                  style={{ width: r >= 1 ? 18 : 18 * r, height: r >= 1 ? 18 / r : 18 }}
+                />
+              )}
+              {f || t.media.crop.original}
+            </FilterChip>
+          );
+        })}
+      </div>
+      {ratio > 0 && crop && (
+        <>
+          <div
+            ref={frame}
+            tabIndex={0}
+            role="group"
+            aria-label={t.media.crop.frame}
+            className="relative mx-auto mt-4 cursor-grab touch-none overflow-hidden rounded-2xl bg-tint select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent active:cursor-grabbing"
+            style={{ aspectRatio: ratio, width: `min(100%, calc(45dvh * ${ratio}))` }}
+            onPointerDown={down}
+            onPointerMove={move}
+            onPointerUp={up}
+            onPointerCancel={up}
+            onKeyDown={key}
+          >
+            <img
+              src={shownAt(src)}
+              alt=""
+              draggable={false}
+              className="pointer-events-none absolute top-0 left-0 h-auto max-w-none"
+              style={{ width: `${(100 / crop[2]) * 100}%`, transform: `translate(${-crop[0]}%, ${-crop[1]}%)` }}
+            />
+          </div>
+          <SupportingText className="mt-2 text-center">{t.media.crop.drag}</SupportingText>
+          <Slider
+            label={t.media.crop.zoom}
+            className="mt-3"
+            min={1}
+            max={MAX_ZOOM}
+            step={0.01}
+            value={zoom}
+            disabled={!whole}
+            onChange={setZoom}
+          />
+        </>
+      )}
+    </div>
+  );
+}