@happyvertical/smrt-planner 0.0.0-stage → 0.0.1

package/dist/components/FieldMapForm.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+import { tick } from 'svelte';
+import { errorSummary, missingRequired } from '../data/columns.js';
+import { useDataSource } from '../data/context.js';
+import { createNoun } from '../data/format.js';
+import type { ModelRecord } from '../data/source.js';
+import { focusFirstInvalid } from '../fields/invalid.js';
+import type { ActiveForm } from '../forms/active.js';
+import {
+  blankFieldMap,
+  fieldMapInputs,
+  fieldMapParts,
+  loadFieldMapState,
+  planFieldMapSave,
+  primaryIndex,
+} from '../forms/fieldMap.js';
+import { catalogModels } from '../forms/shared.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import type { FieldMapForm } from '../recipes/types.js';
+import FieldInput from './FieldInput.svelte';
+
+interface FieldMapFormProps {
+  active: ActiveForm<FieldMapForm>;
+  /** The row to edit; omitted when creating. */
+  id?: string;
+  /** Called with the saved row of the form's own model. */
+  onsaved: (saved: ModelRecord) => void;
+  oncancel: () => void;
+  /** Values a NEW row carries, e.g. the filter of the page it was added on. */
+  preset?: Record<string, unknown>;
+  /** What the page calls one record ("member"); wins over the form's label. */
+  noun?: string;
+}
+
+let { active, id, onsaved, oncancel, preset, noun }: FieldMapFormProps =
+  $props();
+
+const source = useDataSource();
+// An option row that hides a field (a cookbook's, or the visitor's) takes it
+// out of the form too.
+const inputs = $derived(
+  fieldMapInputs(active, catalogModels).filter(
+    ({ catalogField, modelId }) =>
+      !recipeState.rows.some(
+        (row) =>
+          row.objectRef === modelId &&
+          row.fieldName === catalogField.name &&
+          row.visibility === 'hidden',
+      ),
+  ),
+);
+
+// svelte-ignore state_referenced_locally
+let values = $state<Record<string, unknown>>(
+  blankFieldMap(active, catalogModels),
+);
+// svelte-ignore state_referenced_locally
+let loaded = $state(id === undefined);
+let error = $state('');
+let errors = $state<Record<string, string>>({});
+const requiredFields = $derived(
+  inputs.map(({ field, catalogField }) => ({
+    ...catalogField,
+    name: field.id,
+    label: field.label,
+    required: field.required ?? catalogField.required,
+  })),
+);
+const summary = $derived(errorSummary(requiredFields, errors));
+/** The rows an edited row's records point at; see `planFieldMapSave`. */
+let rows: Record<string, ModelRecord | undefined> = {};
+
+async function load(rowId: string) {
+  const state = await loadFieldMapState(source, active, catalogModels, rowId);
+  values = state.values;
+  rows = state.rows;
+  loaded = true;
+}
+// svelte-ignore state_referenced_locally
+if (id !== undefined) void load(id);
+
+async function save(event: SubmitEvent) {
+  event.preventDefault();
+  const form = event.currentTarget;
+  error = '';
+  errors = missingRequired(requiredFields, values);
+  if (Object.keys(errors).length > 0) {
+    await tick();
+    focusFirstInvalid(form);
+    return;
+  }
+  try {
+    const written = await source.apply(
+      planFieldMapSave(active, catalogModels, values, id, rows, preset),
+    );
+    const primary = fieldMapParts(active).records[primaryIndex(active)];
+    const saved = primary ? written[primary.as] : undefined;
+    if (!saved) throw new Error('Nothing was saved.');
+    onsaved(saved);
+  } catch (cause) {
+    error = cause instanceof Error ? cause.message : 'Could not save.';
+  }
+}
+</script>
+
+{#if !loaded}
+  <p>Loading...</p>
+{:else}
+  <form onsubmit={save} novalidate>
+    <h3>{id === undefined ? 'New' : 'Edit'} {createNoun(active.form.label, noun, noun !== undefined)}</h3>
+    {#each inputs as { field, catalogField, modelId } (field.id)}
+      <FieldInput
+        {modelId}
+        field={{ ...catalogField, required: field.required ?? catalogField.required }}
+        label={field.label}
+        help={field.help}
+        idPrefix={active.form.id}
+        error={errors[field.id]}
+        value={values[field.id]}
+        onchange={(value) => {
+          values[field.id] = value;
+          delete errors[field.id];
+        }}
+      />
+    {/each}
+    {#if summary}<p class="error" role="alert" data-error-summary>{summary}</p>{/if}
+    {#if error}<p class="error" role="alert">{error}</p>{/if}
+    <div class="actions">
+      <button type="submit">Save</button>
+      <button type="button" class="secondary" onclick={oncancel}>Cancel</button>
+    </div>
+  </form>
+{/if}
+
+<style>
+  form {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-4);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+  }
+
+  h3 {
+    margin: 0;
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .error {
+    margin: 0;
+    color: var(--smrt-color-error);
+  }
+
+  button {
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border: 0;
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  button.secondary {
+    border: 1px solid var(--smrt-color-outline);
+    background: transparent;
+    color: var(--smrt-color-on-surface);
+  }
+</style>

package/dist/components/FieldMapForm.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ModelRecord } from '../data/source.ts';
+import type { ActiveForm } from '../forms/active.ts';
+import type { FieldMapForm } from '../recipes/types.ts';
+interface FieldMapFormProps {
+    active: ActiveForm<FieldMapForm>;
+    /** The row to edit; omitted when creating. */
+    id?: string;
+    /** Called with the saved row of the form's own model. */
+    onsaved: (saved: ModelRecord) => void;
+    oncancel: () => void;
+    /** Values a NEW row carries, e.g. the filter of the page it was added on. */
+    preset?: Record<string, unknown>;
+    /** What the page calls one record ("member"); wins over the form's label. */
+    noun?: string;
+}
+declare const FieldMapForm: import("svelte").Component<FieldMapFormProps, {}, "">;
+type FieldMapForm = ReturnType<typeof FieldMapForm>;
+export default FieldMapForm;

package/dist/components/FormWorkspace.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+import { page } from '$app/state';
+import type { CatalogModel } from '../catalog/types.js';
+import { useDataSource } from '../data/context.js';
+import { createNoun, formatMoney, recordCount } from '../data/format.js';
+import type { ModelRecord } from '../data/source.js';
+import {
+  type ActiveForm,
+  extendsWith,
+  isFieldMap,
+  isVariantGrid,
+} from '../forms/active.js';
+import { catalogModels } from '../forms/shared.js';
+import {
+  planProductDelete,
+  SKU,
+  STOCK_LEVEL,
+  stockByProduct,
+  VARIANT,
+} from '../forms/stock.js';
+import { takeCreate } from '../planner/create.js';
+import { inScope, type RowScope } from '../recipes/scope.js';
+import FieldMapForm from './FieldMapForm.svelte';
+import VariantGridForm from './VariantGridForm.svelte';
+
+interface FormWorkspaceProps {
+  model: CatalogModel;
+  /** The forms of the added recipes for this model; New offers each. */
+  forms: ActiveForm[];
+  /** The slice of rows this page lists (a filtered nav entry), if any. */
+  scope?: RowScope;
+  /** Values a new row carries so it stays in `scope`. */
+  preset?: Record<string, unknown>;
+  /** The list's heading; defaults to the model's plural name. */
+  title?: string;
+  /** What New creates on a filtered page, e.g. "ingredient". */
+  noun?: string;
+}
+
+let { model, forms, scope, preset, title, noun }: FormWorkspaceProps = $props();
+
+const source = useDataSource();
+const showStock = $derived(forms.some((f) => extendsWith(f, STOCK_LEVEL)));
+/** A filtered page adds plain products only; a grid of variants has no place there. */
+const offered = $derived(
+  scope?.equals !== undefined ? forms.filter(isFieldMap) : forms,
+);
+const gridForm = $derived(forms.find(isVariantGrid));
+const mapForm = $derived(forms.find(isFieldMap));
+
+let rows = $state<ModelRecord[]>([]);
+let withAxes = $state(new Set<string>());
+let stock = $state(new Map<string, number>());
+let loaded = $state(false);
+/** The form open, and the row it edits (none when creating). */
+let editing = $state<{ form: ActiveForm; id?: string } | null>(null);
+/** Bumped each time a form opens so it remounts with fresh state. */
+let formKey = $state(0);
+
+async function load() {
+  rows = (await source.list(model)).filter((row) => inScope(scope, row));
+  // Rows with axes are Clothing even when its recipe is off.
+  const variants = await source.list(catalogModels(VARIANT));
+  withAxes = new Set(variants.map((v) => String(v.productId)));
+  stock = showStock
+    ? stockByProduct(
+        await source.list(catalogModels(SKU)),
+        await source.list(catalogModels(STOCK_LEVEL)),
+      )
+    : new Map();
+  loaded = true;
+}
+
+$effect(() => {
+  // Reload (and close any open form) when the model or the forms change.
+  model.id;
+  forms;
+  scope;
+  editing = null;
+  loaded = false;
+  void load().then(() => {
+    // A section page's "New ..." arrives with the form already open.
+    const first = offered[0];
+    if (takeCreate(page.url.pathname) && first) open(first);
+  });
+});
+
+// A reset (a cookbook applied, the app reset) swaps the rows underneath an
+// open page: read them again rather than keep showing the old ones.
+$effect(() => source.onReset?.(() => void load()));
+
+/** A row is Clothing when it has axes, Simple otherwise. */
+const kindOf = (row: ModelRecord): ActiveForm | undefined =>
+  withAxes.has(row.id) ? gridForm : mapForm;
+
+const kindLabel = (row: ModelRecord): string =>
+  kindOf(row)?.form.kindLabel ?? (withAxes.has(row.id) ? 'Clothing' : 'Simple');
+
+function open(form: ActiveForm, id?: string) {
+  editing = { form, id };
+  formKey++;
+}
+
+async function saved() {
+  editing = null;
+  await load();
+}
+
+async function remove(row: ModelRecord) {
+  const skus = (await source.list(catalogModels(SKU))).filter(
+    (sku) => sku.productId === row.id,
+  );
+  await source.apply(planProductDelete(row.id, skus, catalogModels));
+  await load();
+}
+</script>
+
+<section>
+  <header>
+    <h2>{title ?? (model.name === 'Product' ? 'Products' : model.name)} {#if loaded}<small>{recordCount(rows.length)}</small>{/if}</h2>
+    <div class="new">
+      {#each offered as active (active.form.id)}
+        <button type="button" onclick={() => open(active)}>
+          New {createNoun(active.form.label, noun, scope?.equals !== undefined || offered.length === 1)}
+        </button>
+      {/each}
+    </div>
+  </header>
+
+  {#if editing}
+    {@const current = editing}
+    {#key formKey}
+      {#if isVariantGrid(current.form)}
+        <VariantGridForm
+          active={current.form}
+          id={current.id}
+          onsaved={saved}
+          oncancel={() => (editing = null)}
+        />
+      {:else if isFieldMap(current.form)}
+        <FieldMapForm
+          active={current.form}
+          id={current.id}
+          {preset}
+          noun={offered.length === 1 ? noun : undefined}
+          onsaved={saved}
+          oncancel={() => (editing = null)}
+        />
+      {/if}
+    {/key}
+  {/if}
+
+  {#if !loaded}
+    <p>Loading sample data...</p>
+  {:else if rows.length === 0}
+    <p>No records yet. Create one above.</p>
+  {:else}
+    <div class="scroll">
+      <table>
+        <thead>
+          <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Kind</th>
+            <th scope="col">Price</th>
+            {#if showStock}<th scope="col">Stock</th>{/if}
+            <th scope="col"><span class="visually-hidden">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each rows as row (row.id)}
+            {@const kind = kindOf(row)}
+            <tr>
+              <td>{row.name}</td>
+              <td>{kindLabel(row)}</td>
+              <td>{typeof row.price === 'number' ? formatMoney(row.price) : ''}</td>
+              {#if showStock}<td>{stock.get(row.id) ?? '–'}</td>{/if}
+              <td class="row-actions">
+                {#if kind}
+                  <button
+                    type="button"
+                    class="secondary"
+                    aria-label={`Edit ${row.name}`}
+                    onclick={() => open(kind, row.id)}
+                  >
+                    Edit
+                  </button>
+                {/if}
+                <button
+                  type="button"
+                  class="secondary"
+                  aria-label={`Delete ${row.name}`}
+                  onclick={() => remove(row)}
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</section>
+
+<style>
+  section {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-3);
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  h2 {
+    margin: 0;
+  }
+
+  small {
+    color: var(--smrt-color-on-surface-variant);
+    font-weight: 400;
+  }
+
+  .new,
+  .row-actions {
+    display: flex;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .scroll {
+    overflow-x: auto;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  th,
+  td {
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  button {
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border: 0;
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  button.secondary {
+    border: 1px solid var(--smrt-color-outline);
+    background: transparent;
+    color: var(--smrt-color-on-surface);
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+</style>

package/dist/components/FormWorkspace.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { CatalogModel } from '../catalog/types.ts';
+import { type ActiveForm } from '../forms/active.ts';
+import { type RowScope } from '../recipes/scope.ts';
+interface FormWorkspaceProps {
+    model: CatalogModel;
+    /** The forms of the added recipes for this model; New offers each. */
+    forms: ActiveForm[];
+    /** The slice of rows this page lists (a filtered nav entry), if any. */
+    scope?: RowScope;
+    /** Values a new row carries so it stays in `scope`. */
+    preset?: Record<string, unknown>;
+    /** The list's heading; defaults to the model's plural name. */
+    title?: string;
+    /** What New creates on a filtered page, e.g. "ingredient". */
+    noun?: string;
+}
+declare const FormWorkspace: import("svelte").Component<FormWorkspaceProps, {}, "">;
+type FormWorkspace = ReturnType<typeof FormWorkspace>;
+export default FormWorkspace;

package/dist/components/HelpView.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+import type { GlossaryEntry, HelpBlock, Inline } from '../recipes/help.js';
+
+interface HelpViewProps {
+  blocks: HelpBlock[];
+  glossary: GlossaryEntry[];
+  /** Prefixed to anchor ids, so one page can hold several recipes' help. */
+  idPrefix?: string;
+  /** The level of the help's `##` headings (2 by default); the rest follow. */
+  startLevel?: number;
+}
+
+let {
+  blocks,
+  glossary,
+  idPrefix = '',
+  startLevel = 2,
+}: HelpViewProps = $props();
+
+/** An `h` level `depth` below the help's top one, never past h6. */
+const level = (depth: number) => Math.min(startLevel + depth, 6);
+
+/** Glossary grouped by model, so a model page can link to its own part. */
+const groups = $derived(
+  [...new Set(glossary.map((entry) => entry.model))].map((model) => ({
+    model,
+    entries: glossary.filter((entry) => entry.model === model),
+  })),
+);
+</script>
+
+{#snippet inline(nodes: Inline[])}
+  {#each nodes as node}
+    {#if node.type === 'strong'}
+      <strong>{@render inline(node.children)}</strong>
+    {:else if node.type === 'em'}
+      <em>{@render inline(node.children)}</em>
+    {:else if node.type === 'code'}
+      <code>{node.text}</code>
+    {:else if node.type === 'text'}
+      {node.text}
+    {/if}
+  {/each}
+{/snippet}
+
+<article class="help">
+  {#each blocks as block}
+    {#if block.type === 'heading'}
+      <svelte:element this={`h${level(block.level - 2)}`}>
+        {@render inline(block.inlines)}
+      </svelte:element>
+    {:else if block.type === 'paragraph'}
+      <p>{@render inline(block.inlines)}</p>
+    {:else if block.ordered}
+      <ol>
+        {#each block.items as item}
+          <li>{@render inline(item.inlines)}</li>
+        {/each}
+      </ol>
+    {:else}
+      <ul>
+        {#each block.items as item}
+          <li>{@render inline(item.inlines)}</li>
+        {/each}
+      </ul>
+    {/if}
+  {/each}
+
+  {#if groups.length}
+    <section aria-label="Fields">
+      <svelte:element this={`h${level(0)}`}>Fields</svelte:element>
+      {#each groups as group (group.model)}
+        <section id={`${idPrefix}fields-${group.model}`} aria-label={`${group.model} fields`}>
+          {#if groups.length > 1}<svelte:element this={`h${level(1)}`}>{group.model}</svelte:element>{/if}
+          <dl>
+            {#each group.entries as entry (entry.name)}
+              <dt>{entry.label}</dt>
+              <dd>{entry.text}</dd>
+            {/each}
+          </dl>
+        </section>
+      {/each}
+    </section>
+  {/if}
+</article>
+
+<style>
+  .help {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    max-width: 48rem;
+  }
+
+  h2,
+  h3,
+  h4,
+  p,
+  ol,
+  ul,
+  dl {
+    margin: 0;
+  }
+
+  ol,
+  ul {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+    padding-left: var(--smrt-spacing-5);
+  }
+
+  section {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  dl {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+  }
+
+  dt {
+    font-weight: 600;
+  }
+
+  dd {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+</style>

package/dist/components/HelpView.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { GlossaryEntry, HelpBlock } from '../recipes/help.ts';
+interface HelpViewProps {
+    blocks: HelpBlock[];
+    glossary: GlossaryEntry[];
+    /** Prefixed to anchor ids, so one page can hold several recipes' help. */
+    idPrefix?: string;
+    /** The level of the help's `##` headings (2 by default); the rest follow. */
+    startLevel?: number;
+}
+declare const HelpView: import("svelte").Component<HelpViewProps, {}, "">;
+type HelpView = ReturnType<typeof HelpView>;
+export default HelpView;