@ssejal8/recipe-ui-kit 0.1.0

package/apps/recipe-web/src/lib/components/RecipeForm.svelte

@@ -0,0 +1,560 @@
+<!--
+  Create / edit form for user-authored recipes.
+
+  Validation runs on submit and then live on every change, so the first
+  interaction is not pre-emptively covered in red messages. `rk-tag-input`
+  handles the tag field and reports changes through `rkTagsChange`.
+-->
+<script lang="ts">
+  import type { Ingredient, Recipe } from '$domain/recipe';
+  import { joinSteps } from '$domain/recipe';
+  import { countErrors, emptyDraft, isValid, LIMITS, parseOptionalCount, validateDraft, type RecipeDraft, type RecipeErrors } from '$domain/validation';
+  import WebComponent from '$lib/stencil/WebComponent.svelte';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    /** Categories offered in the select. */
+    categories: string[];
+    /** Cuisines offered in the select. */
+    areas: string[];
+    /** Existing recipe when editing; omitted when creating. */
+    recipe?: Recipe;
+    submitLabel?: string;
+    /** Returns an error message to display, or nothing on success. */
+    onsubmit: (payload: Omit<Recipe, 'id' | 'origin' | 'createdAt' | 'updatedAt'>) => string | void;
+    oncancel: () => void;
+  }
+
+  let { categories, areas, recipe, submitLabel = 'Save recipe', onsubmit, oncancel }: Props = $props();
+
+  function draftFrom(source?: Recipe): RecipeDraft {
+    if (!source) return emptyDraft();
+    return {
+      name: source.name,
+      category: source.category,
+      area: source.area,
+      image: source.image ?? '',
+      minutes: source.minutes ? String(source.minutes) : '',
+      servings: source.servings ? String(source.servings) : '',
+      ingredients: source.ingredients.length > 0 ? source.ingredients.map((row) => ({ ...row })) : emptyDraft().ingredients,
+      steps: source.steps.length > 0 ? [...source.steps] : [''],
+      tags: [...source.tags],
+      notes: source.notes ?? ''
+    };
+  }
+
+  // `untrack` is deliberate: the draft is seeded once from `recipe` and then
+  // owned by the form. Re-seeding on every prop read would discard user edits.
+  let draft = $state<RecipeDraft>(untrack(() => draftFrom(recipe)));
+  let submitted = $state(false);
+  let formError = $state<string | null>(null);
+
+  // Reload the draft if the target recipe changes (e.g. navigating between edits).
+  let loadedId = $state(untrack(() => recipe?.id));
+  $effect(() => {
+    if (recipe?.id === loadedId) return;
+    loadedId = recipe?.id;
+    draft = draftFrom(recipe);
+    submitted = false;
+    formError = null;
+  });
+
+  const errors = $derived<RecipeErrors>(validateDraft(draft));
+  /** Errors are only surfaced after the first submit attempt. */
+  const shown = $derived<RecipeErrors>(submitted ? errors : {});
+  const problemCount = $derived(countErrors(errors));
+
+  /* ------------------------------------------------------- ingredient rows */
+
+  function addIngredient() {
+    if (draft.ingredients.length >= LIMITS.maxIngredients) return;
+    draft.ingredients = [...draft.ingredients, { name: '', measure: '' }];
+  }
+
+  function removeIngredient(index: number) {
+    // Always leave one row so the user has somewhere to type.
+    if (draft.ingredients.length <= 1) {
+      draft.ingredients = [{ name: '', measure: '' }];
+      return;
+    }
+    draft.ingredients = draft.ingredients.filter((_, position) => position !== index);
+  }
+
+  function moveIngredient(index: number, direction: -1 | 1) {
+    const target = index + direction;
+    if (target < 0 || target >= draft.ingredients.length) return;
+    const next = [...draft.ingredients];
+    [next[index], next[target]] = [next[target], next[index]];
+    draft.ingredients = next;
+  }
+
+  /* ------------------------------------------------------------- step rows */
+
+  function addStep() {
+    if (draft.steps.length >= LIMITS.maxSteps) return;
+    draft.steps = [...draft.steps, ''];
+  }
+
+  function removeStep(index: number) {
+    if (draft.steps.length <= 1) {
+      draft.steps = [''];
+      return;
+    }
+    draft.steps = draft.steps.filter((_, position) => position !== index);
+  }
+
+  function moveStep(index: number, direction: -1 | 1) {
+    const target = index + direction;
+    if (target < 0 || target >= draft.steps.length) return;
+    const next = [...draft.steps];
+    [next[index], next[target]] = [next[target], next[index]];
+    draft.steps = next;
+  }
+
+  /**
+   * Pastes a multi-line block into separate steps. Recipes are usually copied
+   * from somewhere, so honouring line breaks saves a lot of manual splitting.
+   */
+  function handleStepPaste(event: ClipboardEvent, index: number) {
+    const text = event.clipboardData?.getData('text/plain') ?? '';
+    const lines = text
+      .split(/\n+/)
+      .map((line) => line.replace(/^\s*(?:step\s*)?\d+[.)]?\s*/i, '').trim())
+      .filter(Boolean);
+    if (lines.length < 2) return;
+
+    event.preventDefault();
+    const next = [...draft.steps];
+    next.splice(index, 1, ...lines.slice(0, LIMITS.maxSteps - next.length + 1));
+    draft.steps = next;
+  }
+
+  /* ---------------------------------------------------------------- submit */
+
+  function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    submitted = true;
+    formError = null;
+
+    if (!isValid(errors)) {
+      // Move focus to the first field with a problem for keyboard users.
+      const firstInvalid = document.querySelector<HTMLElement>('[aria-invalid="true"]');
+      firstInvalid?.focus();
+      firstInvalid?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      return;
+    }
+
+    const ingredients: Ingredient[] = draft.ingredients
+      .filter((row) => row.name.trim() !== '')
+      .map((row) => ({ name: row.name.trim(), measure: row.measure.trim() }));
+
+    const minutes = parseOptionalCount(draft.minutes, LIMITS.minutesMax);
+    const servings = parseOptionalCount(draft.servings, LIMITS.servingsMax);
+
+    const result = onsubmit({
+      name: draft.name.trim(),
+      category: draft.category.trim(),
+      area: draft.area.trim(),
+      image: draft.image.trim() || undefined,
+      steps: draft.steps.map((step) => step.trim()).filter(Boolean),
+      ingredients,
+      tags: draft.tags,
+      minutes: minutes ?? undefined,
+      servings: servings ?? undefined,
+      notes: draft.notes.trim() || undefined
+    });
+
+    if (typeof result === 'string') formError = result;
+  }
+
+  const previewSteps = $derived(joinSteps(draft.steps.filter((step) => step.trim() !== '')));
+</script>
+
+<form class="form" onsubmit={handleSubmit} novalidate>
+  {#if submitted && problemCount > 0}
+    <div class="banner tone-error" role="alert">
+      <strong>{problemCount} {problemCount === 1 ? 'field needs' : 'fields need'} attention.</strong>
+      Fix the highlighted fields below and submit again.
+    </div>
+  {/if}
+
+  {#if formError}
+    <div class="banner tone-error" role="alert">{formError}</div>
+  {/if}
+
+  <fieldset class="card-surface">
+    <legend>The basics</legend>
+
+    <div class="stack">
+      <label class="field">
+        <span class="field-label">
+          Recipe name <span class="field-req" aria-hidden="true">*</span>
+        </span>
+        <input
+          class="input"
+          type="text"
+          bind:value={draft.name}
+          placeholder="e.g. Charred broccoli with tahini"
+          maxlength={LIMITS.nameMax + 20}
+          aria-invalid={shown.name ? 'true' : undefined}
+          aria-describedby={shown.name ? 'err-name' : undefined}
+        />
+        {#if shown.name}<span class="field-error" id="err-name">{shown.name}</span>{/if}
+      </label>
+
+      <div class="field-grid">
+        <label class="field">
+          <span class="field-label">Category <span class="field-req" aria-hidden="true">*</span></span>
+          <select class="select" bind:value={draft.category} aria-invalid={shown.category ? 'true' : undefined}>
+            <option value="">Choose a category…</option>
+            {#each categories as category (category)}
+              <option value={category}>{category}</option>
+            {/each}
+          </select>
+          {#if shown.category}<span class="field-error">{shown.category}</span>{/if}
+        </label>
+
+        <label class="field">
+          <span class="field-label">Cuisine <span class="field-req" aria-hidden="true">*</span></span>
+          <select class="select" bind:value={draft.area} aria-invalid={shown.area ? 'true' : undefined}>
+            <option value="">Choose a cuisine…</option>
+            {#each areas as area (area)}
+              <option value={area}>{area}</option>
+            {/each}
+          </select>
+          {#if shown.area}<span class="field-error">{shown.area}</span>{/if}
+        </label>
+      </div>
+
+      <div class="field-grid">
+        <label class="field">
+          <span class="field-label">Total time <span class="field-hint">minutes, optional</span></span>
+          <!--
+            Kept as `type="text"` with a numeric keypad: `bind:value` on a number
+            input coerces to a number, which would bypass the string-level
+            validation that reports "not a whole number" back to the user.
+          -->
+          <input
+            class="input"
+            type="text"
+            inputmode="numeric"
+            bind:value={draft.minutes}
+            placeholder="45"
+            aria-invalid={shown.minutes ? 'true' : undefined}
+          />
+          {#if shown.minutes}<span class="field-error">{shown.minutes}</span>{/if}
+        </label>
+
+        <label class="field">
+          <span class="field-label">Servings <span class="field-hint">optional</span></span>
+          <input
+            class="input"
+            type="text"
+            inputmode="numeric"
+            bind:value={draft.servings}
+            placeholder="4"
+            aria-invalid={shown.servings ? 'true' : undefined}
+          />
+          {#if shown.servings}<span class="field-error">{shown.servings}</span>{/if}
+        </label>
+      </div>
+
+      <label class="field">
+        <span class="field-label">Image URL <span class="field-hint">optional</span></span>
+        <input
+          class="input"
+          type="url"
+          bind:value={draft.image}
+          placeholder="https://…"
+          aria-invalid={shown.image ? 'true' : undefined}
+        />
+        {#if shown.image}
+          <span class="field-error">{shown.image}</span>
+        {:else if draft.image.trim()}
+          <span class="field-hint">A preview appears in the card below once the URL loads.</span>
+        {/if}
+      </label>
+
+      <div class="field">
+        <span class="field-label">Tags <span class="field-hint">up to {LIMITS.maxTags}</span></span>
+        <!--
+          Stencil tag editor. `values` is an array, so the bridge assigns it as a
+          DOM property; changes come back as a single `rkTagsChange` event.
+        -->
+        <WebComponent
+          tag="rk-tag-input"
+          props={{ values: draft.tags, maxTags: LIMITS.maxTags, placeholder: 'e.g. weeknight, one pot', error: shown.tags }}
+          events={{ rkTagsChange: ((event: CustomEvent<string[]>) => (draft.tags = event.detail)) as (event: CustomEvent<never>) => void }}
+        />
+      </div>
+    </div>
+  </fieldset>
+
+  <fieldset class="card-surface">
+    <legend>Ingredients</legend>
+
+    {#if shown.ingredients}
+      <p class="field-error">{shown.ingredients}</p>
+    {:else}
+      <p class="field-hint">At least {LIMITS.minIngredients} ingredients. Quantities are optional but helpful.</p>
+    {/if}
+
+    <ol class="rows">
+      {#each draft.ingredients as ingredient, index (index)}
+        <li class="row-item">
+          <div class="row-fields">
+            <input
+              class="input"
+              type="text"
+              bind:value={draft.ingredients[index].name}
+              placeholder="Ingredient"
+              aria-label={`Ingredient ${index + 1} name`}
+              aria-invalid={shown.ingredientRows?.[index] ? 'true' : undefined}
+            />
+            <input
+              class="input measure"
+              type="text"
+              bind:value={draft.ingredients[index].measure}
+              placeholder="Quantity"
+              aria-label={`Ingredient ${index + 1} quantity`}
+            />
+          </div>
+
+          <div class="row-controls">
+            <button class="icon-btn" type="button" onclick={() => moveIngredient(index, -1)} disabled={index === 0} aria-label={`Move ingredient ${index + 1} up`}>↑</button>
+            <button
+              class="icon-btn"
+              type="button"
+              onclick={() => moveIngredient(index, 1)}
+              disabled={index === draft.ingredients.length - 1}
+              aria-label={`Move ingredient ${index + 1} down`}
+            >
+              ↓
+            </button>
+            <button class="icon-btn is-danger" type="button" onclick={() => removeIngredient(index)} aria-label={`Remove ingredient ${index + 1}`}>✕</button>
+          </div>
+
+          {#if shown.ingredientRows?.[index]}
+            <p class="field-error row-error">{shown.ingredientRows[index]}</p>
+          {/if}
+        </li>
+      {/each}
+    </ol>
+
+    <button class="btn btn-sm" type="button" onclick={addIngredient} disabled={draft.ingredients.length >= LIMITS.maxIngredients}>
+      + Add ingredient
+    </button>
+  </fieldset>
+
+  <fieldset class="card-surface">
+    <legend>Method</legend>
+
+    {#if shown.steps}
+      <p class="field-error">{shown.steps}</p>
+    {:else}
+      <p class="field-hint">One step per box. Pasting several lines at once splits them into separate steps.</p>
+    {/if}
+
+    <ol class="rows">
+      {#each draft.steps as step, index (index)}
+        <li class="row-item step-item">
+          <span class="step-num" aria-hidden="true">{index + 1}</span>
+
+          <textarea
+            class="textarea"
+            bind:value={draft.steps[index]}
+            rows="2"
+            placeholder="Describe this step…"
+            aria-label={`Step ${index + 1}`}
+            aria-invalid={shown.stepRows?.[index] ? 'true' : undefined}
+            onpaste={(event) => handleStepPaste(event, index)}
+          ></textarea>
+
+          <div class="row-controls">
+            <button class="icon-btn" type="button" onclick={() => moveStep(index, -1)} disabled={index === 0} aria-label={`Move step ${index + 1} up`}>↑</button>
+            <button class="icon-btn" type="button" onclick={() => moveStep(index, 1)} disabled={index === draft.steps.length - 1} aria-label={`Move step ${index + 1} down`}>↓</button>
+            <button class="icon-btn is-danger" type="button" onclick={() => removeStep(index)} aria-label={`Remove step ${index + 1}`}>✕</button>
+          </div>
+
+          {#if shown.stepRows?.[index]}
+            <p class="field-error row-error">{shown.stepRows[index]}</p>
+          {/if}
+        </li>
+      {/each}
+    </ol>
+
+    <button class="btn btn-sm" type="button" onclick={addStep} disabled={draft.steps.length >= LIMITS.maxSteps}>+ Add step</button>
+
+    <label class="field notes-field">
+      <span class="field-label">Notes <span class="field-hint">optional, max {LIMITS.notesMax} characters</span></span>
+      <textarea
+        class="textarea"
+        bind:value={draft.notes}
+        rows="3"
+        placeholder="Substitutions, storage, who liked it…"
+        aria-invalid={shown.notes ? 'true' : undefined}
+      ></textarea>
+      {#if shown.notes}<span class="field-error">{shown.notes}</span>{/if}
+    </label>
+  </fieldset>
+
+  <div class="form-actions">
+    <button class="btn btn-primary" type="submit">{submitLabel}</button>
+    <button class="btn" type="button" onclick={oncancel}>Cancel</button>
+
+    <p class="small muted status" aria-live="polite">
+      {#if problemCount === 0}
+        Ready to save · {draft.ingredients.filter((row) => row.name.trim()).length} ingredients ·
+        {previewSteps ? draft.steps.filter((step) => step.trim()).length : 0} steps
+      {:else if submitted}
+        {problemCount} {problemCount === 1 ? 'problem' : 'problems'} remaining
+      {/if}
+    </p>
+  </div>
+</form>
+
+<style>
+  .form {
+    display: grid;
+    gap: 20px;
+    max-width: 820px;
+  }
+
+  fieldset {
+    border: 1px solid var(--rk-border);
+    margin: 0;
+  }
+
+  legend {
+    padding: 0 10px;
+    font-family: var(--rk-font-display);
+    font-size: 1.05rem;
+    font-weight: 650;
+  }
+
+  .banner {
+    padding: 12px 16px;
+    border-radius: var(--rk-radius);
+    font-size: 0.9rem;
+  }
+
+  .banner.tone-error {
+    background: var(--rk-danger-soft);
+    color: var(--rk-danger);
+    border: 1px solid var(--rk-danger);
+  }
+
+  .rows {
+    list-style: none;
+    margin: 14px 0;
+    padding: 0;
+    display: grid;
+    gap: 10px;
+  }
+
+  .row-item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .row-fields {
+    display: flex;
+    gap: 8px;
+    flex: 1 1 260px;
+    min-width: 0;
+  }
+
+  .row-fields .input {
+    min-width: 0;
+  }
+
+  .measure {
+    flex: 0 0 130px;
+  }
+
+  .row-controls {
+    display: flex;
+    gap: 4px;
+    flex: 0 0 auto;
+    padding-top: 2px;
+  }
+
+  .icon-btn {
+    width: 34px;
+    height: 40px;
+    padding: 0;
+    border: 1px solid var(--rk-border);
+    border-radius: var(--rk-radius-sm);
+    background: var(--rk-surface);
+    color: var(--rk-ink-2);
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition:
+      background var(--rk-transition),
+      color var(--rk-transition);
+  }
+
+  .icon-btn:hover:not(:disabled) {
+    background: var(--rk-surface-2);
+    color: var(--rk-primary);
+  }
+
+  .icon-btn.is-danger:hover:not(:disabled) {
+    background: var(--rk-danger-soft);
+    color: var(--rk-danger);
+    border-color: var(--rk-danger);
+  }
+
+  .icon-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .row-error {
+    flex: 1 1 100%;
+    margin: 0;
+  }
+
+  .step-item {
+    align-items: flex-start;
+  }
+
+  .step-num {
+    flex: 0 0 auto;
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 40px;
+    color: var(--rk-muted);
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .step-item .textarea {
+    flex: 1 1 240px;
+    min-width: 0;
+  }
+
+  .notes-field {
+    margin-top: 22px;
+    padding-top: 18px;
+    border-top: 1px solid var(--rk-border);
+  }
+
+  .form-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+    position: sticky;
+    bottom: 0;
+    padding: 14px 0;
+    background: linear-gradient(to top, var(--rk-bg) 60%, transparent);
+  }
+
+  .status {
+    margin-left: auto;
+  }
+</style>

package/apps/recipe-web/src/lib/components/RecipeGrid.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { RecipeSummary } from '$domain/recipe';
+  import RecipeCard from './RecipeCard.svelte';
+
+  interface Props {
+    recipes: RecipeSummary[];
+    /** Renders shimmer placeholders instead of cards. */
+    loading?: boolean;
+    skeletonCount?: number;
+    /** Per-card `actions` slot content. */
+    actions?: import('svelte').Snippet<[RecipeSummary]>;
+    badges?: import('svelte').Snippet<[RecipeSummary]>;
+    /** Shown when `recipes` is empty and not loading. */
+    empty?: import('svelte').Snippet;
+  }
+
+  let { recipes, loading = false, skeletonCount = 8, actions, badges, empty }: Props = $props();
+</script>
+
+{#if loading}
+  <div class="recipe-grid" aria-busy="true" aria-label="Loading recipes">
+    {#each Array.from({ length: skeletonCount }, (_, index) => index) as index (index)}
+      <div class="ghost card-surface">
+        <div class="skeleton ghost-media"></div>
+        <div class="skeleton ghost-line" style="width: 82%"></div>
+        <div class="skeleton ghost-line ghost-line-sm" style="width: 54%"></div>
+      </div>
+    {/each}
+  </div>
+{:else if recipes.length === 0}
+  {@render empty?.()}
+{:else}
+  <ul class="recipe-grid list-reset">
+    {#each recipes as recipe (recipe.id)}
+      <li><RecipeCard {recipe} {actions} {badges} /></li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .list-reset {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .list-reset li {
+    display: flex;
+  }
+
+  .list-reset li > :global(*) {
+    flex: 1 1 auto;
+  }
+
+  .ghost {
+    padding: 0;
+    overflow: hidden;
+    display: grid;
+    gap: 10px;
+    align-content: start;
+  }
+
+  .ghost-media {
+    aspect-ratio: 4 / 3;
+    border-radius: 0;
+  }
+
+  .ghost-line {
+    height: 14px;
+    margin: 0 16px;
+  }
+
+  .ghost-line-sm {
+    height: 10px;
+    margin-bottom: 20px;
+  }
+</style>