@happyvertical/smrt-planner 0.0.0-stage → 0.0.2

package/dist/components/CookbooksPanel.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">
+import { Button } from '@happyvertical/smrt-ui';
+import { Alert, ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
+import { onMount } from 'svelte';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import { useDataSource } from '../data/context.js';
+import {
+  applyLibraryCookbook,
+  holdsCookbook,
+  needsConfirm,
+} from '../library/apply.js';
+import {
+  COOKBOOK_ICONS,
+  type LibraryCookbook,
+  libraryCookbooks,
+  libraryRecipeLabels,
+} from '../library/index.js';
+import { previewMenu } from '../library/menu.js';
+import { libraryState } from '../library/state.svelte.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import {
+  type AppSettings as Settings,
+  settingsOfCookbook,
+} from '../settings/app-settings.js';
+import AppSettings from './AppSettings.svelte';
+
+const dataSource = useDataSource();
+let selectedId = $state<string | null>(null);
+let confirming = $state(false);
+let error = $state('');
+let notice = $state('');
+
+onMount(() => {
+  libraryState.load();
+  selectedId = libraryState.active;
+});
+
+const selected = $derived(libraryCookbooks.find((c) => c.id === selectedId));
+
+// The preview's editable copy of the cookbook's settings; choosing a cookbook
+// (again) resets it to the cookbook's own values. The cookbook is never changed.
+let settings = $state<Settings>(settingsOfCookbook(undefined));
+$effect(() => {
+  settings = settingsOfCookbook(selected?.settings);
+});
+const isActive = (cookbook: LibraryCookbook) =>
+  libraryState.active === cookbook.id &&
+  holdsCookbook(cookbook, {
+    recipes: recipeState.ids,
+    features: recipeState.features,
+  });
+
+function use() {
+  if (!selected) return;
+  if (needsConfirm(cookbookStore)) confirming = true;
+  else commit();
+}
+
+function commit() {
+  confirming = false;
+  if (!selected) return;
+  const result = applyLibraryCookbook(
+    selected,
+    cookbookStore,
+    $state.snapshot(settings),
+  );
+  if (result.ok) {
+    // Sample records are regenerated from the cookbook's own sample data.
+    dataSource.reset?.();
+    libraryState.select(selected.id);
+    error = '';
+    notice = `Now using the ${selected.name} cookbook.`;
+  } else {
+    error = result.error;
+    notice = '';
+  }
+}
+</script>
+
+<div class="cookbooks">
+  <p class="meta">
+    A cookbook is a ready-made starting point: the recipes, menu and settings a
+    kind of business usually needs. Pick one, look it over, then change
+    anything in the other tabs.
+  </p>
+
+  <ul class="grid" aria-label="Cookbooks">
+    {#each libraryCookbooks as cookbook (cookbook.id)}
+      {@const active = isActive(cookbook)}
+      <li>
+        <button
+          type="button"
+          class="card"
+          class:selected={selectedId === cookbook.id}
+          aria-pressed={selectedId === cookbook.id}
+          onclick={() => (selectedId = cookbook.id)}
+        >
+          <svg
+            class="icon"
+            viewBox="0 0 24 24"
+            width="32"
+            height="32"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.75"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            {#each COOKBOOK_ICONS[cookbook.icon] ?? [] as d (d)}
+              <path {d} />
+            {/each}
+          </svg>
+          <span class="name">{cookbook.name}</span>
+          <span class="summary">{cookbook.summary}</span>
+          {#if active}<span class="badge">In use</span>{/if}
+        </button>
+      </li>
+    {/each}
+  </ul>
+
+  {#if selected}
+    {@const menu = previewMenu(selected.document)}
+    <section class="preview" aria-labelledby="preview-heading">
+      <h2 id="preview-heading">{selected.name}</h2>
+      <div class="block">
+        <h3>Recipes</h3>
+        <ul class="chips" aria-label="Recipes">
+          {#each libraryRecipeLabels(selected) as label (label)}
+            <li>{label}</li>
+          {/each}
+        </ul>
+      </div>
+      <div class="block">
+        <h3>Menu</h3>
+        <div class="menu">
+          {#each menu as section (section.id)}
+            <div>
+              <h4>{section.label}</h4>
+              <ul>
+                {#each section.entries as entry (entry.id)}
+                  <li>{entry.label}</li>
+                {/each}
+              </ul>
+            </div>
+          {/each}
+        </div>
+      </div>
+      <div class="block">
+        <h3>Settings</h3>
+        <AppSettings
+          value={settings}
+          onchange={(next) => (settings = next)}
+          idPrefix="cookbook-settings"
+        />
+      </div>
+      <div class="actions">
+        <Button onclick={use}>Use this cookbook</Button>
+        <span class="meta">Replaces your current recipes, menu and sample records.</span>
+      </div>
+    </section>
+  {/if}
+
+  {#if error}
+    <Alert variant="error" title="Could not use this cookbook">{error}</Alert>
+  {/if}
+  <p class="notice" role="status" aria-live="polite">{notice}</p>
+</div>
+
+<ConfirmDialog
+  open={confirming}
+  title={selected ? `Use the ${selected.name} cookbook?` : 'Use this cookbook?'}
+  message="Replaces your current recipes, menu and sample records."
+  confirmLabel="Replace"
+  destructive
+  onconfirm={commit}
+  oncancel={() => (confirming = false)}
+/>
+
+<style>
+  .cookbooks {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  h2,
+  h3,
+  h4,
+  p {
+    margin: 0;
+  }
+
+  h3,
+  h4 {
+    font-size: 1rem;
+  }
+
+  .meta,
+  .summary,
+  .notice {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .notice:empty {
+    display: none;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+    gap: var(--smrt-spacing-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .card {
+    position: relative;
+    display: grid;
+    gap: var(--smrt-spacing-2);
+    justify-items: start;
+    width: 100%;
+    height: 100%;
+    padding: var(--smrt-spacing-4);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-lg, 0.75rem);
+    background: var(--smrt-color-surface);
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .card.selected {
+    border-color: var(--smrt-color-primary);
+    outline: 2px solid var(--smrt-color-primary);
+  }
+
+  .icon {
+    color: var(--smrt-color-primary);
+  }
+
+  .name {
+    font-weight: 600;
+  }
+
+  .badge {
+    position: absolute;
+    top: var(--smrt-spacing-3);
+    right: var(--smrt-spacing-3);
+    padding: 0 var(--smrt-spacing-2);
+    border-radius: 999px;
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    font-size: 0.75rem;
+  }
+
+  .preview {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+    padding: var(--smrt-spacing-4);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-lg, 0.75rem);
+  }
+
+  .block {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .chips,
+  .menu ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .chips li {
+    padding: 0 var(--smrt-spacing-3);
+    border-radius: 999px;
+    background: var(--smrt-color-surface-container);
+  }
+
+  .menu {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+    gap: var(--smrt-spacing-3);
+  }
+
+  .menu ul {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    margin-top: var(--smrt-spacing-1);
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--smrt-spacing-3);
+  }
+</style>

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

@@ -0,0 +1,3 @@
+declare const CookbooksPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type CookbooksPanel = ReturnType<typeof CookbooksPanel>;
+export default CookbooksPanel;

package/dist/components/ExportPanel.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+import { Button } from '@happyvertical/smrt-ui';
+import { Alert, ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
+import { downloadCookbook } from '../cookbook/file.js';
+import { cookbookStore } from '../cookbook/store.svelte.js';
+import type { Cookbook } from '../cookbook/types.js';
+import { parseCookbookText } from '../cookbook/validate.js';
+import { useDataSource } from '../data/context.js';
+import { humanize } from '../data/format.js';
+import { kitchenState } from '../kitchen/state.svelte.js';
+import { getLibraryCookbook } from '../library/index.js';
+import { libraryState } from '../library/state.svelte.js';
+import { recipesById } from '../recipes/index.js';
+
+let fileInput: HTMLInputElement | undefined = $state();
+/** A validated import waiting for the visitor's confirmation. */
+let pending = $state<Cookbook | null>(null);
+/** What reading the pending import dropped (invalid page customisations). */
+let pendingDropped = $state<string[]>([]);
+let error = $state('');
+let notice = $state('');
+let confirmingReset = $state(false);
+
+// A file is named for the library cookbook last applied, else a generic name.
+const exportName = () => getLibraryCookbook(libraryState.active ?? '')?.name;
+
+const current = $derived(cookbookStore.snapshot());
+
+const pages = (b: Cookbook) => Object.keys(b.overviews ?? {}).length;
+
+const describe = (b: Cookbook) =>
+  `${b.recipes.length} ${b.recipes.length === 1 ? 'recipe' : 'recipes'}, ${b.features.length} ${b.features.length === 1 ? 'feature' : 'features'}, ${b.policies.length} saved ${b.policies.length === 1 ? 'option' : 'options'}${pages(b) ? `, ${pages(b)} customised ${pages(b) === 1 ? 'page' : 'pages'}` : ''}`;
+
+async function choose(event: Event & { currentTarget: HTMLInputElement }) {
+  const input = event.currentTarget;
+  const file = input.files?.[0];
+  error = '';
+  notice = '';
+  if (!file) return;
+  try {
+    const result = parseCookbookText(await file.text());
+    if (result.ok) {
+      pending = result.cookbook;
+      pendingDropped = result.dropped ?? [];
+    } else error = result.error;
+  } catch {
+    error = 'The file could not be read.';
+  }
+  // Allow choosing the same file again.
+  input.value = '';
+}
+
+function confirmImport() {
+  if (pending) {
+    cookbookStore.replace(pending);
+    notice = `Imported ${describe(pending)}.${pendingDropped.length ? ` Not imported: ${pendingDropped.join(' ')}` : ''}`;
+  }
+  pending = null;
+  pendingDropped = [];
+}
+
+const dataSource = useDataSource();
+
+function confirmReset() {
+  cookbookStore.reset();
+  // Rows the visitor added, edited or deleted go with the cookbook.
+  dataSource.reset?.();
+  confirmingReset = false;
+  // The shell holds its settings in memory too; reload so it starts from its
+  // defaults (the cookbook is already saved empty).
+  cookbookStore.flush();
+  location.reload();
+}
+</script>
+
+<div class="export">
+  <p class="meta">
+    Your recipes, their options, the layout and customised pages, kept together in this browser.
+    Export them as a file, or import one to replace what is here. Sample
+    records are not part of it.
+  </p>
+  <section aria-labelledby="current-heading">
+    <h2 id="current-heading">Current cookbook</h2>
+    <p>{describe(current)}.</p>
+    {#if current.recipes.length}
+      <ul>
+        {#each current.recipes as id (id)}
+          <li>{recipesById.get(id)?.label ?? id}</li>
+        {/each}
+      </ul>
+    {/if}
+    {#if current.features.length}
+      <ul>
+        {#each current.features as id (id)}
+          <li>{humanize(id.slice(id.lastIndexOf(':') + 1))}</li>
+        {/each}
+      </ul>
+    {/if}
+  </section>
+
+  <div class="actions">
+    {#if kitchenState.config}
+      <Button
+        disabled={kitchenState.status === 'sending'}
+        onclick={() => kitchenState.send(cookbookStore.snapshot())}
+      >{kitchenState.status === 'sending' ? 'Sending to kitchen…' : 'Send to kitchen'}</Button>
+      <Button variant="secondary" onclick={() => downloadCookbook(cookbookStore.snapshot(), exportName())}>Download cookbook</Button>
+    {:else}
+      <Button onclick={() => downloadCookbook(cookbookStore.snapshot(), exportName())}>Export cookbook</Button>
+    {/if}
+    <Button variant="secondary" onclick={() => fileInput?.click()}>Import cookbook…</Button>
+    <Button variant="secondary" onclick={() => (confirmingReset = true)}>Reset</Button>
+    <input
+      bind:this={fileInput}
+      type="file"
+      accept="application/json,.json"
+      hidden
+      aria-label="Cookbook file"
+      onchange={choose}
+    />
+  </div>
+
+  {#if kitchenState.needsLink}
+    <Alert variant="info" title="Send to kitchen needs its link">
+      The kitchen is running, but this page was opened without its one-time
+      token. Open the address <code>smrt kitchen</code> printed (it ends in
+      <code>#kitchen=…</code>), or download the cookbook and run
+      <code>smrt cookbook apply</code> on the file.
+    </Alert>
+  {/if}
+  {#if kitchenState.tokenInConfig}
+    <Alert variant="warning" title="Send to kitchen is off">
+      This version of <code>smrt kitchen</code> puts its one-time token in a
+      file other programs on this computer can read, so the planner does not
+      use it. Update the <code>smrt</code> CLI, or download the cookbook and run
+      <code>smrt cookbook apply</code> on the file.
+    </Alert>
+  {/if}
+  {#if error}
+    <Alert variant="error" title="Import failed">{error}</Alert>
+  {/if}
+  <p class="notice" role="status" aria-live="polite">{notice}</p>
+  {#if kitchenState.outcome}
+    <div class="kitchen" role="status" aria-live="polite">
+      {#if kitchenState.outcome.ok}
+        <Alert variant="success" title="Sent to the kitchen">
+          {kitchenState.outcome.result.mode === 'update' ? 'Updated' : 'Created'} the project{kitchenState.outcome.result.dir ? ` in ${kitchenState.outcome.result.dir}` : ''}.
+          {#if kitchenState.outcome.result.nextSteps.length}
+            Next, in your terminal:
+            <ul>
+              {#each kitchenState.outcome.result.nextSteps as step (step)}
+                <li><code>{step}</code></li>
+              {/each}
+            </ul>
+          {/if}
+        </Alert>
+      {:else}
+        <Alert variant="error" title="The kitchen could not use this cookbook">
+          <ul>
+            {#each kitchenState.outcome.errors as message (message)}
+              <li>{message}</li>
+            {/each}
+          </ul>
+        </Alert>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<ConfirmDialog
+  open={pending !== null}
+  title="Replace the current cookbook?"
+  message={pending
+    ? `Importing replaces your ${describe(current)} with ${describe(pending)}.`
+    : ''}
+  confirmLabel="Replace"
+  destructive
+  onconfirm={confirmImport}
+  oncancel={() => (pending = null)}
+/>
+
+<ConfirmDialog
+  open={confirmingReset}
+  title="Reset the cookbook?"
+  message="This removes every recipe and saved option, and the sample records you added or changed. Export first to keep a copy."
+  confirmLabel="Reset"
+  destructive
+  onconfirm={confirmReset}
+  oncancel={() => (confirmingReset = false)}
+/>
+
+<style>
+  .export {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  .meta,
+  .notice {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .notice:empty {
+    display: none;
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-2);
+  }
+</style>

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

@@ -0,0 +1,3 @@
+declare const ExportPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type ExportPanel = ReturnType<typeof ExportPanel>;
+export default ExportPanel;