@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/CompanyForm.tsx

@@ -1,209 +1,209 @@
-// "Virksomheden": the business, in parts (companyParts), each a screen of its own: its phone, e-mail
-// and address (src/data/contact.json) and its bank details (src/data/payment.json), used
-// all over the site; and its logo and icon (BrandForm.tsx). A part is saved with "Gem ændringer"; the JSON file
-// keeps its keys in their order, so a save only changes what was edited. The same form has the other parts' fields (an
-// app's settings, AppList.tsx appSettingsPart). A field with its choices on a page of their own (Field.page: an app's
-// "Variant") has it at the form's address with its name after it (`at`, `page`, App.tsx): the form stays open under it
-// with what is in it, saved or not (useFormPages), a choice there goes back to it, and it comes back where it was.
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { ConflictError, type RepoFile } from './github';
-import FormFrame, { useFormPages } from './FormFrame';
-import Keywords from './Keywords';
-import type { Part } from './schema';
-import { clean, problemAt } from './check';
-import { FieldList, FieldRows, Fields, useWrongField, WrongField, type FieldContext } from './fields';
-import type { Env } from './App';
-import { lower, savedText } from './deploy';
-import { preview as blockPreview } from './registry';
-import { asWritten } from './site';
-import { config, keptBy, siteOf } from '@site/editor';
-import { parseBlock } from '../lib/blocks.mjs';
-import { FormColumns, Preview } from './ui';
-import { siteT, t } from './i18n';
-import { up } from './nav';
-
-type Props = { part: Part; env: Env; files: RepoFile[] };
-
-/** A part's fields in its file, as a form: the values, whether they are changed, and its save ("Gem
- * ændringer"), which says what is wrong first (useWrongField); here and on an app's page (AppList.tsx). */
-export function usePartForm({ part, env, files }: Props) {
-  const { file: path, at, fields } = part as Required<Part>;
-  const notify = env.notify;
-  // A form that cannot be saved: why, as a message, and the field marked (useWrongField in fields.tsx).
-  const wrongField = useWrongField((text) => notify({ text, error: true }));
-  // The file as it was loaded or last saved, and its fields as they are now.
-  // A file that is not there yet (the first block with shared texts) is made by the first save.
-  const [base, setBase] = useState(() => files.find((f) => f.path === path) ?? { path, oid: '', text: '{}\n' });
-  const valuesOf = (text: string) => {
-    const data = JSON.parse(text) as Record<string, any>;
-    const own = (at ? data[at] : data) ?? {};
-    return Object.fromEntries(fields.map((f) => [f.name, own[f.name] ?? part.defaults?.[f.name] ?? '']));
-  };
-  const [initial, setInitial] = useState(() => valuesOf(base.text));
-  const [values, setValues] = useState(initial);
-  const [saving, setSaving] = useState(false);
-  const dirty = JSON.stringify(values) !== JSON.stringify(initial);
-
-  const context: FieldContext = {
-    relations: env.relations,
-    lists: env.lists,
-    testimonials: env.testimonials,
-    site: env.site,
-  };
-
-  async function save() {
-    if (wrongField.stop(problemAt(fields, values))) return;
-    // The file with these fields changed, written like the others (DataForm.tsx).
-    const data = JSON.parse(base.text) as Record<string, any>;
-    // Written as the fields write them (a number in pairs …); an emptied field is taken out.
-    // Kept in their place in the file.
-    const target = at ? (data[at] ??= {}) : data;
-    const cleaned = clean(fields, values);
-    for (const f of fields) if (!(f.name in cleaned)) delete target[f.name];
-    Object.assign(target, cleaned);
-    const text = `${JSON.stringify(data, null, 2)}\n`;
-    if (text === base.text) return notify({ text: t.company.noChanges });
-    // What the site's rules do not let it be (the same page twice among the standard pages), with a link to what to change.
-    const kept = keptBy(null, path, data, files);
-    if (kept) return notify(kept);
-    const message = siteT.company.commit.edit(part.commit ?? asWritten(part).label.toLowerCase());
-    const changes = [{ path, content: text, oid: base.oid || null }];
-    const change = t.app.changes.edited(lower(part.label));
-    setSaving(true);
-    notify({ text: t.common.saving });
-    try {
-      const oids = await env.commit(message, changes, change);
-      const saved = { path, oid: oids[path], text };
-      setBase(saved);
-      setInitial(valuesOf(text));
-      setValues(valuesOf(text));
-      env.onSaved(saved);
-      notify({ text: savedText(change), kind: 'saved' });
-      return true;
-    } catch (e) {
-      notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  return { base, values, setValues, dirty, saving, save, wrongField, context };
-}
-
-/** `at`: the form's address, for its fields' pages (Field.page); `page`: the field whose page is open. */
-export default function CompanyForm({ part, env, files, at: route, page }: Props & { at?: string; page?: string }) {
-  const { base, values, setValues, dirty, saving, save, wrongField, context } = usePartForm({ part, env, files });
-  const { file: path, at, fields } = part as Required<Part>;
-  // The fields with their choices on a page of their own, and the one open.
-  const paged = route ? fields.filter((f) => f.page) : [];
-  useFormPages(route ? [route, ...paged.map((f) => `${route}/${f.name}`)] : []);
-  const pageOf = route ? (name: string) => `#${route}/${name}` : undefined;
-  const open = paged.find((f) => f.name === page);
-  // Where the form was scrolled to, kept while it is shown, so it comes back there from a field's page.
-  const scrolled = useRef(0);
-  useEffect(() => {
-    if (open) return;
-    const keep = () => (scrolled.current = scrollY);
-    addEventListener('scroll', keep, { passive: true });
-    return () => removeEventListener('scroll', keep);
-  }, [open]);
-  useLayoutEffect(() => {
-    scrollTo(0, open ? 0 : scrolled.current);
-  }, [open]);
-  // Back to the form: the field that keeps it from being saved is there (useWrongField).
-  const back = () => up(`#${route}`);
-
-  // The block with the fields as they are: the site's data with this file as it would be saved; once for
-  // each of its variants, under its name, if it has them.
-  const shown = useMemo(() => {
-    if (!part.preview) return null;
-    const { type, props = {}, shared, variants } = part.preview;
-    const data = JSON.parse(base.text) as Record<string, any>;
-    Object.assign(at ? (data[at] ??= {}) : data, values);
-    // With the file as it would be saved, also when it is not there yet (the first block with shared texts).
-    const edited = [...files.filter((f) => f.path !== path), { path, oid: '', text: JSON.stringify(data) }];
-    // The first copy of the block on a page, for its own texts and numbers.
-    const line = new RegExp(`<div data-block="${type}"[^\\n]*?></div>`);
-    const found = files.map((f) => f.path.startsWith(`${config.folders.pages}/`) && f.text.match(line)?.[0]).find(Boolean);
-    const own = (!shared && !variants && found && parseBlock(found)?.props) || props;
-    const shownWith = { lists: env.lists, testimonials: env.testimonials, relations: env.relations, site: siteOf(edited) };
-    return (variants ?? [{ label: '', props: {} }]).map((v) => ({
-      label: v.label,
-      block: blockPreview(type, { ...own, ...v.props }, shownWith),
-    }));
-  }, [values, files]);
-
-  if (open) {
-    const Page = open.page!;
-    return (
-      <Fields.Provider value={{ ...context, pageOf }}>
-        <WrongField.Provider value={wrongField.field}>
-          <FormFrame
-            title={open.label}
-            back={{ href: `#${route}`, label: part.label, guard: (go) => go() }}
-            dirty={dirty}
-            saving={saving}
-            onSave={() => {
-              if (problemAt(fields, values)) back();
-              return save();
-            }}
-            wide
-          >
-            {open.hint && <p className="text-muted">{open.hint}</p>}
-            <Page
-              field={open}
-              value={String(values[open.name] ?? '')}
-              values={values}
-              onChange={(v) => {
-                if (wrongField.field?.path === open.name) wrongField.field.clear();
-                setValues({ ...values, [open.name]: v });
-                back();
-              }}
-            />
-          </FormFrame>
-        </WrongField.Provider>
-      </Fields.Provider>
-    );
-  }
-
-  return (
-    <Fields.Provider value={{ ...context, pageOf }}>
-      <WrongField.Provider value={wrongField.field}>
-        <FormFrame
-          title={part.label}
-          back={part.back ?? { href: '#virksomheden', label: t.common.parts.company }}
-          dirty={dirty}
-          saving={saving}
-          onSave={save}
-          panel={!!shown}
-        >
-          {shown ? (
-            // A block's texts: on a wide computer screen the block as wide as on a page, and the fields
-            // beside it at the right (FormColumns); narrower, the fields and then the block.
-            <FormColumns
-              first={<FieldList fields={fields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />}
-              main={
-                <div>
-                  <p className="mb-2 font-medium">{t.company.preview}</p>
-                  <div className="space-y-6">
-                    {shown.map((s) => (
-                      <section key={s.label}>
-                        {s.label && <h3 className="mb-2 text-sm font-medium text-muted">{s.label}</h3>}
-                        <Preview>{s.block}</Preview>
-                      </section>
-                    ))}
-                  </div>
-                </div>
-              }
-            />
-          ) : part.rows ? (
-            <FieldRows fields={fields} value={values} onChange={setValues} />
-          ) : (
-            <FieldList fields={fields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
-          )}
-          {part.below === 'keywords' && <Keywords files={files} />}
-        </FormFrame>
-      </WrongField.Provider>
-    </Fields.Provider>
-  );
-}
+// "Virksomheden": the business, in parts (companyParts), each a screen of its own: its phone, e-mail
+// and address (src/data/contact.json) and its bank details (src/data/payment.json), used
+// all over the site; and its logo and icon (BrandForm.tsx). A part is saved with "Gem ændringer"; the JSON file
+// keeps its keys in their order, so a save only changes what was edited. The same form has the other parts' fields (an
+// app's settings, AppList.tsx appSettingsPart). A field with its choices on a page of their own (Field.page: an app's
+// "Variant") has it at the form's address with its name after it (`at`, `page`, App.tsx): the form stays open under it
+// with what is in it, saved or not (useFormPages), a choice there goes back to it, and it comes back where it was.
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ConflictError, type RepoFile } from './github';
+import FormFrame, { useFormPages } from './FormFrame';
+import Keywords from './Keywords';
+import type { Part } from './schema';
+import { clean, problemAt } from './check';
+import { FieldList, FieldRows, Fields, useWrongField, WrongField, type FieldContext } from './fields';
+import type { Env } from './App';
+import { lower, savedText } from './deploy';
+import { preview as blockPreview } from './registry';
+import { asWritten } from './site';
+import { config, keptBy, siteOf } from '@site/editor';
+import { parseBlock } from '../lib/blocks.mjs';
+import { FormColumns, Preview } from './ui';
+import { siteT, t } from './i18n';
+import { up } from './nav';
+
+type Props = { part: Part; env: Env; files: RepoFile[] };
+
+/** A part's fields in its file, as a form: the values, whether they are changed, and its save ("Gem
+ * ændringer"), which says what is wrong first (useWrongField); here and on an app's page (AppList.tsx). */
+export function usePartForm({ part, env, files }: Props) {
+  const { file: path, at, fields } = part as Required<Part>;
+  const notify = env.notify;
+  // A form that cannot be saved: why, as a message, and the field marked (useWrongField in fields.tsx).
+  const wrongField = useWrongField((text) => notify({ text, error: true }));
+  // The file as it was loaded or last saved, and its fields as they are now.
+  // A file that is not there yet (the first block with shared texts) is made by the first save.
+  const [base, setBase] = useState(() => files.find((f) => f.path === path) ?? { path, oid: '', text: '{}\n' });
+  const valuesOf = (text: string) => {
+    const data = JSON.parse(text) as Record<string, any>;
+    const own = (at ? data[at] : data) ?? {};
+    return Object.fromEntries(fields.map((f) => [f.name, own[f.name] ?? part.defaults?.[f.name] ?? '']));
+  };
+  const [initial, setInitial] = useState(() => valuesOf(base.text));
+  const [values, setValues] = useState(initial);
+  const [saving, setSaving] = useState(false);
+  const dirty = JSON.stringify(values) !== JSON.stringify(initial);
+
+  const context: FieldContext = {
+    relations: env.relations,
+    lists: env.lists,
+    testimonials: env.testimonials,
+    site: env.site,
+  };
+
+  async function save() {
+    if (wrongField.stop(problemAt(fields, values))) return;
+    // The file with these fields changed, written like the others (DataForm.tsx).
+    const data = JSON.parse(base.text) as Record<string, any>;
+    // Written as the fields write them (a number in pairs …); an emptied field is taken out.
+    // Kept in their place in the file.
+    const target = at ? (data[at] ??= {}) : data;
+    const cleaned = clean(fields, values);
+    for (const f of fields) if (!(f.name in cleaned)) delete target[f.name];
+    Object.assign(target, cleaned);
+    const text = `${JSON.stringify(data, null, 2)}\n`;
+    if (text === base.text) return notify({ text: t.company.noChanges });
+    // What the site's rules do not let it be (the same page twice among the standard pages), with a link to what to change.
+    const kept = keptBy(null, path, data, files);
+    if (kept) return notify(kept);
+    const message = siteT.company.commit.edit(part.commit ?? asWritten(part).label.toLowerCase());
+    const changes = [{ path, content: text, oid: base.oid || null }];
+    const change = t.app.changes.edited(lower(part.label));
+    setSaving(true);
+    notify({ text: t.common.saving });
+    try {
+      const oids = await env.commit(message, changes, change);
+      const saved = { path, oid: oids[path], text };
+      setBase(saved);
+      setInitial(valuesOf(text));
+      setValues(valuesOf(text));
+      env.onSaved(saved);
+      notify({ text: savedText(change), kind: 'saved' });
+      return true;
+    } catch (e) {
+      notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return { base, values, setValues, dirty, saving, save, wrongField, context };
+}
+
+/** `at`: the form's address, for its fields' pages (Field.page); `page`: the field whose page is open. */
+export default function CompanyForm({ part, env, files, at: route, page }: Props & { at?: string; page?: string }) {
+  const { base, values, setValues, dirty, saving, save, wrongField, context } = usePartForm({ part, env, files });
+  const { file: path, at, fields } = part as Required<Part>;
+  // The fields with their choices on a page of their own, and the one open.
+  const paged = route ? fields.filter((f) => f.page) : [];
+  useFormPages(route ? [route, ...paged.map((f) => `${route}/${f.name}`)] : []);
+  const pageOf = route ? (name: string) => `#${route}/${name}` : undefined;
+  const open = paged.find((f) => f.name === page);
+  // Where the form was scrolled to, kept while it is shown, so it comes back there from a field's page.
+  const scrolled = useRef(0);
+  useEffect(() => {
+    if (open) return;
+    const keep = () => (scrolled.current = scrollY);
+    addEventListener('scroll', keep, { passive: true });
+    return () => removeEventListener('scroll', keep);
+  }, [open]);
+  useLayoutEffect(() => {
+    scrollTo(0, open ? 0 : scrolled.current);
+  }, [open]);
+  // Back to the form: the field that keeps it from being saved is there (useWrongField).
+  const back = () => up(`#${route}`);
+
+  // The block with the fields as they are: the site's data with this file as it would be saved; once for
+  // each of its variants, under its name, if it has them.
+  const shown = useMemo(() => {
+    if (!part.preview) return null;
+    const { type, props = {}, shared, variants } = part.preview;
+    const data = JSON.parse(base.text) as Record<string, any>;
+    Object.assign(at ? (data[at] ??= {}) : data, values);
+    // With the file as it would be saved, also when it is not there yet (the first block with shared texts).
+    const edited = [...files.filter((f) => f.path !== path), { path, oid: '', text: JSON.stringify(data) }];
+    // The first copy of the block on a page, for its own texts and numbers.
+    const line = new RegExp(`<div data-block="${type}"[^\\n]*?></div>`);
+    const found = files.map((f) => f.path.startsWith(`${config.folders.pages}/`) && f.text.match(line)?.[0]).find(Boolean);
+    const own = (!shared && !variants && found && parseBlock(found)?.props) || props;
+    const shownWith = { lists: env.lists, testimonials: env.testimonials, relations: env.relations, site: siteOf(edited) };
+    return (variants ?? [{ label: '', props: {} }]).map((v) => ({
+      label: v.label,
+      block: blockPreview(type, { ...own, ...v.props }, shownWith),
+    }));
+  }, [values, files]);
+
+  if (open) {
+    const Page = open.page!;
+    return (
+      <Fields.Provider value={{ ...context, pageOf }}>
+        <WrongField.Provider value={wrongField.field}>
+          <FormFrame
+            title={open.label}
+            back={{ href: `#${route}`, label: part.label, guard: (go) => go() }}
+            dirty={dirty}
+            saving={saving}
+            onSave={() => {
+              if (problemAt(fields, values)) back();
+              return save();
+            }}
+            wide
+          >
+            {open.hint && <p className="text-muted">{open.hint}</p>}
+            <Page
+              field={open}
+              value={String(values[open.name] ?? '')}
+              values={values}
+              onChange={(v) => {
+                if (wrongField.field?.path === open.name) wrongField.field.clear();
+                setValues({ ...values, [open.name]: v });
+                back();
+              }}
+            />
+          </FormFrame>
+        </WrongField.Provider>
+      </Fields.Provider>
+    );
+  }
+
+  return (
+    <Fields.Provider value={{ ...context, pageOf }}>
+      <WrongField.Provider value={wrongField.field}>
+        <FormFrame
+          title={part.label}
+          back={part.back ?? { href: '#virksomheden', label: t.common.parts.company }}
+          dirty={dirty}
+          saving={saving}
+          onSave={save}
+          panel={!!shown}
+        >
+          {shown ? (
+            // A block's texts: on a wide computer screen the block as wide as on a page, and the fields
+            // beside it at the right (FormColumns); narrower, the fields and then the block.
+            <FormColumns
+              first={<FieldList fields={fields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />}
+              main={
+                <div>
+                  <p className="mb-2 font-medium">{t.company.preview}</p>
+                  <div className="space-y-6">
+                    {shown.map((s) => (
+                      <section key={s.label}>
+                        {s.label && <h3 className="mb-2 text-sm font-medium text-muted">{s.label}</h3>}
+                        <Preview>{s.block}</Preview>
+                      </section>
+                    ))}
+                  </div>
+                </div>
+              }
+            />
+          ) : part.rows ? (
+            <FieldRows fields={fields} value={values} onChange={setValues} />
+          ) : (
+            <FieldList fields={fields} value={values} onChange={(v) => setValues(v as Record<string, unknown>)} />
+          )}
+          {part.below === 'keywords' && <Keywords files={files} />}
+        </FormFrame>
+      </WrongField.Provider>
+    </Fields.Provider>
+  );
+}