@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/Licenses.tsx

@@ -0,0 +1,336 @@
+// "Licenser" (#licenser), under "Indstillinger": the third-party work the site and the editor are made with, as the
+// site was last built (/editor/licenses.json, licensesIntegration in packages/editor/lib/licenses.mjs), with a search by
+// name, who made it and the licence's name. First the icon packs (the system's, each with the sets it takes icons from
+// besides its own), then what the editor and the site's own code bring (the npm packages shipped in what is downloaded),
+// then each theme the site is built with and each app installed, under its name: its own licence first, then what it
+// brings (what it declares, its icon packs and what is shipped through them alone). Each row has the work's name, its
+// version, licence and who made it, and what it is and where it is used; one with a text opens it
+// (#licenser/<id>, LicensePage). An app's and a theme's page has its group too (OwnerLicenses), and one in the store,
+// from the catalog, the same without the texts (StoreLicenseRows).
+import { useEffect, useState } from 'react';
+import { Certificate, Code, Image, Shapes, TextAa, type Icon } from '@phosphor-icons/react';
+import Screen from './Screen';
+import { EmptyNote, Group, GroupTitle, SearchRow, SupportingText, useKept, ListItem } from './ui';
+import { backFrom } from './site';
+import { apps } from './registry';
+import { themes } from './themes';
+import { byText } from './schema';
+import { locale, t } from './i18n';
+import {
+  loadLicenses,
+  UNLICENSED,
+  type LicensedWork,
+  type LicenseKind,
+  type LicenseOwner,
+  type LicensesFile,
+  type LicenseWhere,
+  type StoreLicenses,
+  type ThirdParty,
+} from './licenses';
+
+export const LICENSES_ROUTE = 'licenser';
+
+const KIND_ICONS: Record<LicenseKind, Icon> = { font: TextAa, icons: Shapes, library: Code, image: Image };
+
+/** A licence's name as it is shown: its SPDX name, or "Alle rettigheder forbeholdt". */
+export const licenseName = (license: string | null | undefined) => (license === UNLICENSED ? t.licenses.unlicensed : (license ?? ''));
+
+/** An app's or a theme's name in the editor's language, by its owner id. */
+const ownerName = (o: Pick<LicenseOwner, 'kind' | 'key' | 'name'>) =>
+  (o.kind === 'app' ? apps.find((a) => a.id === o.key)?.label : themes.find((x) => x.id === o.key)?.name) ?? o.name;
+
+/** Who brings a work, as a sentence's end: "i editoren og på sitet", "i temaet Material". */
+function placesOf(where: LicenseWhere[], owners: LicenseOwner[]) {
+  // The editor and the site first, then the themes and the apps.
+  const rank = (w: LicenseWhere) => (w === 'editor' ? 0 : w === 'site' ? 1 : w.startsWith('tema/') ? 2 : 3);
+  const named = [...where]
+    .sort((a, b) => rank(a) - rank(b))
+    .map((w) => {
+      if (w === 'editor') return t.licenses.inEditor;
+      if (w === 'site') return t.licenses.onSite;
+      const owner = owners.find((o) => o.id === w);
+      const name = owner ? ownerName(owner) : w.split('/')[1];
+      return w.startsWith('app/') ? t.licenses.inApp(name) : t.licenses.inTheme(name);
+    });
+  return new Intl.ListFormat(locale, { type: 'conjunction' }).format(named);
+}
+
+/** What a work is and where it is used: "Kode i editoren, gennem @milkdown/kit"; `places`: whether to say where. */
+function usageOf(work: LicensedWork, owners: LicenseOwner[], places: boolean) {
+  const parts = [t.licenses.kinds[work.kind]];
+  if (places && work.where.length) parts[0] += ` ${placesOf(work.where, owners)}`;
+  if (work.kind === 'icons' && !work.where.length && !work.via) parts.push(t.licenses.offered);
+  if (work.shipped === false) parts.push(t.licenses.notShipped);
+  if (work.via?.length) parts.push(t.licenses.via(work.via.join(', ')));
+  return parts.join(', ');
+}
+
+/** A work as a row: its kind's icon, its name, its version, its licence and who made it, and what it is; opening its
+ * licence when `href`. */
+function LicenseRow({
+  icon,
+  name,
+  lines,
+  version,
+  href,
+}: {
+  icon: Icon;
+  name: string;
+  lines: string[];
+  version?: string | null;
+  href?: string;
+}) {
+  const under = [[version && t.licenses.version(version), lines[0]].filter(Boolean).join(' · '), ...lines.slice(1)].filter(Boolean);
+  return (
+    <ListItem
+      href={href}
+      icon={icon}
+      headline={name}
+      supporting={
+        under.length > 0 &&
+        under.map((line) => (
+          <span key={line} className="block">
+            {line}
+          </span>
+        ))
+      }
+      arrow={!!href}
+    />
+  );
+}
+
+const byline = (license: string | null | undefined, author: string | null | undefined) =>
+  [licenseName(license), author].filter(Boolean).join(' · ');
+const hrefOf = (id: string) => `#${LICENSES_ROUTE}/${id}`;
+
+function WorkRow({ work, owners, places, open = true }: { work: LicensedWork; owners: LicenseOwner[]; places: boolean; open?: boolean }) {
+  return (
+    <LicenseRow
+      icon={KIND_ICONS[work.kind]}
+      name={work.name}
+      lines={[byline(work.license, work.author), usageOf(work, owners, places)]}
+      version={work.version}
+      href={open && work.text ? hrefOf(work.id) : undefined}
+    />
+  );
+}
+
+/** An app's or a theme's own licence, first in its group. */
+function OwnRow({
+  owner,
+  open = true,
+}: {
+  open?: boolean;
+  owner: Pick<LicenseOwner, 'id' | 'kind' | 'key' | 'name' | 'author' | 'license' | 'version'> & { text?: string | null };
+}) {
+  return (
+    <LicenseRow
+      icon={Certificate}
+      name={t.licenses.own(ownerName(owner))}
+      lines={[byline(owner.license, owner.author)]}
+      version={owner.version}
+      href={open && owner.text ? hrefOf(owner.id) : undefined}
+    />
+  );
+}
+
+/** The licences as the site was last built: undefined while they load, null when there are none. */
+function useLicenses() {
+  const [file, setFile] = useState<LicensesFile | null>();
+  useEffect(() => {
+    let on = true;
+    loadLicenses().then((x) => on && setFile(x));
+    return () => {
+      on = false;
+    };
+  }, []);
+  return file;
+}
+
+/** An app's or a theme's works, from the file. */
+const worksOf = (owner: LicenseOwner, file: LicensesFile) =>
+  owner.works.map((id) => file.works.find((w) => w.id === id)).filter((w): w is LicensedWork => !!w);
+
+export default function Licenses() {
+  const file = useLicenses();
+  const [query, setQuery] = useKept('licenser-soeg', '');
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  const matches = (...texts: (string | null | undefined)[]) => {
+    const all = texts.filter(Boolean).join(' ').toLowerCase();
+    return words.every((w) => all.includes(w));
+  };
+  const fits = (w: LicensedWork) => matches(w.name, w.author, w.license, licenseName(w.license));
+  const sorted = (works: LicensedWork[]) => [...works].sort((a, b) => byText(a.name, b.name));
+
+  const owners = file?.owners ?? [];
+  // The system's icon packs (a theme's own are under it, `where` it).
+  const packs = file ? sorted(file.works.filter((w) => w.kind === 'icons' && !w.where.some((x) => x.startsWith('tema/')))) : [];
+  const system = file ? sorted(file.works.filter((w) => w.kind !== 'icons' && w.where.some((x) => x === 'editor' || x === 'site'))) : [];
+  // The themes the site is built with, then the apps installed, each A–Å.
+  const inUse = owners
+    .filter((o) => o.inUse)
+    .sort((a, b) => (a.kind === b.kind ? byText(ownerName(a), ownerName(b)) : a.kind === 'theme' ? -1 : 1));
+  const groups = [
+    { key: 'icons', title: t.licenses.icons, own: null, works: packs.filter(fits) },
+    { key: 'system', title: t.licenses.system, own: null, works: system.filter(fits) },
+    ...inUse.map((o) => ({
+      key: o.id,
+      title: o.kind === 'app' ? t.licenses.app(ownerName(o)) : t.licenses.theme(ownerName(o)),
+      own: matches(ownerName(o), o.author, o.license, licenseName(o.license)) ? o : null,
+      works: file ? worksOf(o, file).filter(fits) : [],
+    })),
+  ].filter((g) => g.own || g.works.length);
+
+  return (
+    <Screen title={t.common.parts.licenses} wide back={backFrom(LICENSES_ROUTE)}>
+      {file === undefined ? (
+        <EmptyNote busy>{t.licenses.loading}</EmptyNote>
+      ) : file === null ? (
+        <EmptyNote>{t.licenses.missing}</EmptyNote>
+      ) : (
+        <>
+          <SearchRow value={query} onChange={setQuery} label={t.common.searchIn(t.common.parts.licenses)} className="mb-6" />
+          {groups.length ? (
+            groups.map((g) => (
+              <Group key={g.key} title={g.title}>
+                {g.own && <OwnRow owner={g.own} />}
+                {g.works.map((w) => (
+                  <WorkRow key={w.id} work={w} owners={owners} places={g.key === 'system' || g.key === 'icons'} />
+                ))}
+              </Group>
+            ))
+          ) : (
+            <p className="mb-8 px-1 text-muted">{t.common.noMatch}</p>
+          )}
+        </>
+      )}
+    </Screen>
+  );
+}
+
+/** A licence's text in paragraphs, each with its lines flowing (a licence file is wrapped by hand at 80 characters), but
+ * a line of dashes under a heading. */
+const paragraphsOf = (text: string) =>
+  text
+    .split(/\n\s*\n/)
+    .map((p) =>
+      p
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line && !/^[-=_*~]+$/.test(line))
+        .join(' '),
+    )
+    .filter(Boolean);
+
+/** One licence (#licenser/<id>): a work's, or an app's or a theme's own: its name, licence, who made it, what it is and
+ * its version, and its text. */
+export function LicensePage({ id }: { id: string }) {
+  const file = useLicenses();
+  const work = file?.works.find((w) => w.id === id);
+  const owner = file?.owners.find((o) => o.id === id);
+  const name = work?.name ?? (owner ? t.licenses.own(ownerName(owner)) : t.common.parts.licenses);
+  const text = work?.text ?? owner?.text;
+  const back = { href: `#${LICENSES_ROUTE}`, label: t.common.parts.licenses };
+  return (
+    <Screen title={name} wide back={back}>
+      {file === undefined ? (
+        <EmptyNote busy>{t.licenses.loading}</EmptyNote>
+      ) : !work && !owner ? (
+        <EmptyNote>{file === null ? t.licenses.missing : t.licenses.notFound}</EmptyNote>
+      ) : (
+        <>
+          <Group>
+            {work ? <WorkRow work={work} owners={file?.owners ?? []} places open={false} /> : <OwnRow owner={owner!} open={false} />}
+          </Group>
+          <section className="mb-8">
+            <GroupTitle>{t.licenses.text}</GroupTitle>
+            {work?.standard && <SupportingText className="mb-3 px-4">{t.licenses.standardText(work.license)}</SupportingText>}
+            {text ? (
+              paragraphsOf(text).map((p, i) => (
+                <p key={i} className="mb-3 px-4 break-words last:mb-0">
+                  {p}
+                </p>
+              ))
+            ) : (
+              <p className="px-4 text-muted">{t.licenses.noText}</p>
+            )}
+          </section>
+        </>
+      )}
+    </Screen>
+  );
+}
+
+/** An app's or a theme's licences on its page, under "Licenser": its own, then what it brings, as the site was last
+ * built (opening each licence under "Licenser"), else as it declares them (`declared`: an app installed or a theme
+ * since the site was built). */
+export function OwnerLicenses({
+  id,
+  name,
+  author,
+  version,
+  declared,
+}: {
+  id: LicenseOwner['id'];
+  name: string;
+  author: string;
+  version?: string | null;
+  declared: { license?: string; thirdParty?: ThirdParty[] };
+}) {
+  const file = useLicenses();
+  const owner = file?.owners.find((o) => o.id === id);
+  const [kind, key] = id.split('/') as ['app' | 'tema', string];
+  const self = owner ?? {
+    id,
+    kind: kind === 'app' ? ('app' as const) : ('theme' as const),
+    key,
+    name,
+    author,
+    version: version ?? null,
+    license: declared.license ?? '',
+    text: null,
+  };
+  return (
+    <Group title={t.common.parts.licenses}>
+      <OwnRow owner={self} />
+      {owner && file
+        ? worksOf(owner, file).map((w) => <WorkRow key={w.id} work={w} owners={file.owners} places={false} />)
+        : (declared.thirdParty ?? []).map((x, i) =>
+            'package' in x ? (
+              <LicenseRow key={i} icon={KIND_ICONS[x.kind]} name={x.package} lines={[t.licenses.kinds[x.kind]]} />
+            ) : (
+              <LicenseRow key={i} icon={KIND_ICONS[x.kind]} name={x.name} lines={[byline(x.license, x.author)]} version={x.version} />
+            ),
+          )}
+    </Group>
+  );
+}
+
+/** An app's or a theme's licences on its page in the store, from the catalog (StoreLicenses: without the texts). */
+export function StoreLicenseRows({
+  licenses,
+  name,
+  author,
+  version,
+}: {
+  licenses?: StoreLicenses;
+  name: string;
+  author: string;
+  version?: string;
+}) {
+  if (!licenses) return null;
+  return (
+    <Group title={t.common.parts.licenses}>
+      <LicenseRow icon={Certificate} name={t.licenses.own(name)} lines={[byline(licenses.license, author)]} version={version} />
+      {licenses.works.map((w, i) => (
+        <LicenseRow
+          key={i}
+          icon={KIND_ICONS[w.kind]}
+          name={w.name}
+          lines={[byline(w.license, w.author), t.licenses.kinds[w.kind]]}
+          version={w.version}
+        />
+      ))}
+    </Group>
+  );
+}

package/src/LinkSheet.tsx

@@ -0,0 +1,138 @@
+// The link of some text (the toolbar's and the selection's "Link", MarkdownEditor.tsx), in a sheet
+// from the bottom on a phone and a dialog on a computer: a page of the site (PagePicker), or another
+// address (another site, an e-mail, a phone number). askLink() opens it and tells what to do; <LinkAsk />
+// is in App.tsx, with the pages. An e-mail or a phone number becomes a link of its own kind (mailto:,
+// tel:), and an address without https:// gets it.
+import { useEffect, useRef, useState } from 'react';
+import { Trash } from '@phosphor-icons/react';
+import PagePicker, { type Group } from './PagePicker';
+import { Button, SegmentedButton, BottomSheet, SheetActions, SheetBody, SheetTitle, TextField } from './ui';
+import { closeChanged } from './ask';
+import { t } from './i18n';
+
+/** The new address of the link and the text it is shown as (the page's name, the address), '' to
+ * remove it, or null when nothing is to be done. */
+export type LinkAnswer = { href: string; text: string } | null;
+
+let open: (href: string, resolve: (a: LinkAnswer) => void) => void = () => {};
+
+/** The link's address as it is now ('' for a new one). */
+export const askLink = (href: string) => new Promise<LinkAnswer>((resolve) => open(href, resolve));
+
+type Kind = 'page' | 'address';
+
+// An address as it is written: an e-mail as mailto:, a phone number as tel:, a site without https://
+// with it; a page's own (/…), a part of the page (#…), one with its kind (https:, mailto:) and
+// anything else as it is.
+export function hrefOf(typed: string) {
+  const s = typed.trim();
+  if (!s || /^[/#]/.test(s) || /^[a-z][a-z+.-]*:/i.test(s)) return s;
+  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s)) return `mailto:${s}`;
+  if (/^\+?[\d\s()-]{6,}$/.test(s)) return `tel:${s.replace(/[\s()-]/g, '')}`;
+  if (/^[^\s/]+\.[a-z]{2,}(\/\S*)?$/i.test(s)) return `https://${s}`;
+  return s;
+}
+
+// The address as the owner writes it: without mailto: and tel:.
+const typedOf = (href: string) => href.replace(/^(mailto|tel):/, '');
+
+export function LinkAsk({ groups }: { groups: Group[] }) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const answer = useRef<(a: LinkAnswer) => void>(() => {});
+  // The link as it was when the sheet opened, and what it is now.
+  const [old, setOld] = useState('');
+  const [kind, setKind] = useState<Kind>('page');
+  const [page, setPage] = useState('');
+  const [address, setAddress] = useState('');
+
+  const pages = useRef(groups);
+  pages.current = groups;
+  // The page of an address, also with a part of it (/kontakt/#find-vej).
+  const pageOf = (href: string) => {
+    const all = pages.current.flatMap((g) => g.options);
+    return all.find((o) => o.value === href) ?? all.find((o) => o.value === href.replace(/#.*/, ''));
+  };
+
+  useEffect(() => {
+    open = (href, resolve) => {
+      answer.current = resolve;
+      const onSite = !href || !!pageOf(href);
+      setOld(href);
+      setKind(onSite ? 'page' : 'address');
+      setPage(onSite ? href : '');
+      setAddress(onSite ? '' : typedOf(href));
+      dialog.current?.showModal();
+    };
+  }, []);
+
+  const href = kind === 'page' ? page : hrefOf(address);
+  const done = (a: LinkAnswer) => {
+    answer.current(a);
+    answer.current = () => {};
+    dialog.current?.close();
+  };
+  const use = () => href && done({ href, text: kind === 'page' ? (pageOf(href)?.label ?? href) : address.trim() });
+  // Closed with a change: the owner is asked whether to keep it ("Indsæt link", "Gem"), leave it or stay.
+  async function leave() {
+    if (href === old || !href) return done(null);
+    const choice = await closeChanged(old ? t.common.save : t.text.insertLink);
+    if (choice === 'keep') use();
+    else if (choice === 'discard') done(null);
+  }
+
+  return (
+    <BottomSheet
+      ref={dialog}
+      aria-label={t.text.link}
+      // A page picked in the sheet over it closes that one, not this.
+      onClose={(e) => e.target === e.currentTarget && answer.current(null)}
+      onCancel={(e) => {
+        if (e.target !== e.currentTarget) return;
+        e.preventDefault();
+        void leave();
+      }}
+      onClick={(e) => e.target === dialog.current && void leave()}
+    >
+      <SheetTitle title={t.text.link} onClose={() => void leave()} />
+      <SheetBody>
+        <SegmentedButton
+          label={t.text.linkTo}
+          value={kind}
+          options={[
+            { value: 'page', label: t.text.linkPage },
+            { value: 'address', label: t.text.linkAddress },
+          ]}
+          onChange={setKind}
+        />
+        {kind === 'page' ? (
+          <PagePicker id="link-page" inField={{ label: t.text.linkPage }} value={page} groups={groups} required onChange={setPage} />
+        ) : (
+          <TextField
+            id="link-address"
+            label={t.forms.address}
+            hint={t.text.linkAddressHint}
+            inputMode="url"
+            autoCapitalize="off"
+            autoCorrect="off"
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), use())}
+          />
+        )}
+      </SheetBody>
+      <SheetActions
+        onCancel={() => void leave()}
+        onDone={use}
+        disabled={!href}
+        done={old ? t.common.save : t.text.insertLink}
+        start={
+          old && (
+            <Button kind="text" icon={Trash} onClick={() => done({ href: '', text: '' })}>
+              {t.text.removeLink}
+            </Button>
+          )
+        }
+      />
+    </BottomSheet>
+  );
+}