@ssejal8/recipe-ui-kit 0.1.0

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

@@ -0,0 +1,185 @@
+<!--
+  Recipe picker used by the weekly planner.
+
+  Composes four Stencil components inside one dialog: `rk-modal` for the shell,
+  `rk-segmented-control` to switch source, `rk-search-bar` to query TheMealDB,
+  and `rk-recipe-card` for each result.
+-->
+<script lang="ts">
+  import { searchRecipes } from '$api/mealdb';
+  import type { RecipeSummary } from '$domain/recipe';
+  import { toSummary } from '$domain/recipe';
+  import WebComponent from '$lib/stencil/WebComponent.svelte';
+  import { favorites } from '$stores/favorites.svelte';
+  import { myRecipes } from '$stores/myRecipes.svelte';
+  import Modal from './Modal.svelte';
+  import RecipeCard from './RecipeCard.svelte';
+
+  interface Props {
+    open: boolean;
+    /** Describes the slot being filled, e.g. "Monday · Dinner". */
+    slotLabel: string;
+    onpick: (recipe: RecipeSummary) => void;
+    onclose: () => void;
+  }
+
+  let { open, slotLabel, onpick, onclose }: Props = $props();
+
+  type Source = 'favorites' | 'mine' | 'search';
+
+  let source = $state<Source>('favorites');
+  let query = $state('');
+  let searchResults = $state<RecipeSummary[]>([]);
+  let searching = $state(false);
+  let searchError = $state<string | null>(null);
+
+  const sourceOptions = $derived([
+    { label: 'Favorites', value: 'favorites', count: favorites.count },
+    { label: 'My recipes', value: 'mine', count: myRecipes.count },
+    { label: 'Search all', value: 'search' }
+  ]);
+
+  const localMatches = $derived.by(() => {
+    const pool: RecipeSummary[] = source === 'mine' ? myRecipes.all.map(toSummary) : favorites.all;
+    const needle = query.trim().toLowerCase();
+    if (!needle) return pool;
+    return pool.filter(
+      (recipe) =>
+        recipe.name.toLowerCase().includes(needle) ||
+        recipe.category.toLowerCase().includes(needle) ||
+        recipe.area.toLowerCase().includes(needle)
+    );
+  });
+
+  const visible = $derived(source === 'search' ? searchResults : localMatches);
+
+  // Reset transient state each time the dialog opens, so it never reopens
+  // showing the previous slot's search.
+  $effect(() => {
+    if (!open) return;
+    query = '';
+    searchResults = [];
+    searchError = null;
+    source = favorites.count > 0 ? 'favorites' : myRecipes.count > 0 ? 'mine' : 'search';
+  });
+
+  let requestToken = 0;
+
+  async function runSearch(term: string) {
+    const trimmed = term.trim();
+    if (trimmed.length < 2) {
+      searchResults = [];
+      searchError = null;
+      searching = false;
+      return;
+    }
+
+    // Guard against a slow earlier request overwriting a newer one.
+    const token = ++requestToken;
+    searching = true;
+    searchError = null;
+
+    try {
+      const results = await searchRecipes(trimmed);
+      if (token !== requestToken) return;
+      searchResults = results;
+    } catch (error) {
+      if (token !== requestToken) return;
+      searchResults = [];
+      searchError = error instanceof Error ? error.message : 'Search failed.';
+    } finally {
+      if (token === requestToken) searching = false;
+    }
+  }
+
+  function handleSearch(event: CustomEvent<string>) {
+    query = event.detail;
+    if (source === 'search') void runSearch(event.detail);
+  }
+
+  function handleSourceChange(event: CustomEvent<string>) {
+    source = event.detail as Source;
+    if (source === 'search' && query.trim().length >= 2) void runSearch(query);
+  }
+
+  const emptyCopy = $derived.by(() => {
+    if (source === 'search') {
+      if (searchError) return { icon: '⚠️', heading: 'Search failed', message: searchError, tone: 'error' as const };
+      if (query.trim().length < 2) return { icon: '🔎', heading: 'Search the catalogue', message: 'Type at least two characters to search thousands of recipes.', tone: 'neutral' as const };
+      return { icon: '🫙', heading: `No recipes match “${query.trim()}”`, message: 'Try a different name or ingredient.', tone: 'neutral' as const };
+    }
+    if (source === 'mine') {
+      return { icon: '📝', heading: 'No recipes of your own yet', message: 'Recipes you create appear here, ready to drop into the plan.', tone: 'neutral' as const };
+    }
+    return { icon: '🤍', heading: 'No favorites yet', message: 'Favorite a few recipes and they will show up here first.', tone: 'neutral' as const };
+  });
+</script>
+
+<Modal {open} heading="Add a recipe" subheading={slotLabel} size="lg" {onclose}>
+  <div class="picker">
+    <WebComponent
+      tag="rk-segmented-control"
+      props={{ options: sourceOptions, value: source, label: 'Recipe source', stretch: true }}
+      events={{ rkSegmentChange: handleSourceChange as (event: CustomEvent<never>) => void }}
+    />
+
+    <WebComponent
+      tag="rk-search-bar"
+      props={{
+        value: query,
+        placeholder: source === 'search' ? 'Search every recipe…' : 'Filter this list…',
+        loading: searching,
+        debounce: 400
+      }}
+      events={{ rkSearch: handleSearch as (event: CustomEvent<never>) => void }}
+    />
+
+    {#if visible.length > 0}
+      <p class="count small muted">{visible.length} {visible.length === 1 ? 'recipe' : 'recipes'}</p>
+      <ul class="results">
+        {#each visible as recipe (recipe.id)}
+          <li>
+            <RecipeCard
+              {recipe}
+              compact
+              hideFavorite
+              onselect={() => {
+                onpick(recipe);
+                return true;
+              }}
+            >
+              {#snippet actions(item)}
+                <button slot="actions" class="btn btn-primary btn-sm" type="button" onclick={() => onpick(item)}>Add</button>
+              {/snippet}
+            </RecipeCard>
+          </li>
+        {/each}
+      </ul>
+    {:else}
+      <rk-empty-state bare icon={emptyCopy.icon} heading={emptyCopy.heading} message={emptyCopy.message} tone={emptyCopy.tone}></rk-empty-state>
+    {/if}
+  </div>
+</Modal>
+
+<style>
+  .picker {
+    display: grid;
+    gap: 14px;
+  }
+
+  .count {
+    margin: 0;
+  }
+
+  .results {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 10px;
+    max-height: 46vh;
+    overflow-y: auto;
+    /* Room for the focus ring of the last card. */
+    padding: 2px;
+  }
+</style>

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

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import { toasts } from '$stores/toast.svelte';
+</script>
+
+<div class="toaster" role="region" aria-label="Notifications" aria-live="polite">
+  {#each toasts.all as toast (toast.id)}
+    <div class="toast tone-{toast.tone}" transition:fly={{ y: 14, duration: 180 }}>
+      <p class="message">{toast.message}</p>
+
+      {#if toast.action}
+        <button class="action" type="button" onclick={() => toasts.runAction(toast.id)}>
+          {toast.action.label}
+        </button>
+      {/if}
+
+      <button class="close" type="button" aria-label="Dismiss notification" onclick={() => toasts.dismiss(toast.id)}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
+          <path d="M6 6l12 12M18 6 6 18" />
+        </svg>
+      </button>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .toaster {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1100;
+    display: grid;
+    gap: 8px;
+    width: min(460px, calc(100vw - 32px));
+    pointer-events: none;
+  }
+
+  .toast {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 12px 12px 16px;
+    border-radius: var(--rk-radius);
+    background: var(--rk-ink);
+    color: var(--rk-bg);
+    box-shadow: var(--rk-shadow-lg);
+    pointer-events: auto;
+    font-size: 0.89rem;
+  }
+
+  .toast.tone-success {
+    background: var(--rk-success);
+    color: #fff;
+  }
+
+  .toast.tone-error {
+    background: var(--rk-danger);
+    color: #fff;
+  }
+
+  .message {
+    flex: 1 1 auto;
+    line-height: 1.45;
+  }
+
+  .action {
+    flex: 0 0 auto;
+    padding: 6px 12px;
+    border: 1px solid currentColor;
+    border-radius: var(--rk-radius-pill);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.83rem;
+    font-weight: 650;
+    cursor: pointer;
+    opacity: 0.9;
+  }
+
+  .action:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.16);
+  }
+
+  .close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    opacity: 0.7;
+    cursor: pointer;
+  }
+
+  .close:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.16);
+  }
+
+  .close svg {
+    width: 12px;
+    height: 12px;
+  }
+</style>

package/apps/recipe-web/src/lib/domain/recipe.ts

@@ -0,0 +1,130 @@
+/**
+ * The application's own recipe model.
+ *
+ * Everything the UI renders speaks this shape. TheMealDB's wire format and
+ * user-authored recipes are both normalised into it, so no component ever needs
+ * to know where a recipe came from.
+ */
+
+export type RecipeOrigin = 'api' | 'custom';
+
+export interface Ingredient {
+  name: string;
+  /** Free-text quantity, e.g. "3/4 cup". Optional — many recipes omit it. */
+  measure: string;
+}
+
+export interface Recipe {
+  id: string;
+  name: string;
+  category: string;
+  area: string;
+  image?: string;
+  /** Instruction steps, already split into individual steps. */
+  steps: string[];
+  ingredients: Ingredient[];
+  tags: string[];
+  origin: RecipeOrigin;
+  youtubeUrl?: string;
+  sourceUrl?: string;
+  /** Total time in minutes. Only user-authored recipes carry this. */
+  minutes?: number;
+  servings?: number;
+  notes?: string;
+  createdAt?: number;
+  updatedAt?: number;
+}
+
+/**
+ * The reduced shape used in grids, favorites and the planner. Storing this
+ * snapshot alongside a favorite or a planned meal means those views render
+ * instantly and keep working offline, without re-fetching the full recipe.
+ */
+export interface RecipeSummary {
+  id: string;
+  name: string;
+  image?: string;
+  category: string;
+  area: string;
+  origin: RecipeOrigin;
+  ingredientCount?: number;
+  minutes?: number;
+  servings?: number;
+  tags?: string[];
+}
+
+export function toSummary(recipe: Recipe): RecipeSummary {
+  return {
+    id: recipe.id,
+    name: recipe.name,
+    image: recipe.image,
+    category: recipe.category,
+    area: recipe.area,
+    origin: recipe.origin,
+    ingredientCount: recipe.ingredients.length,
+    minutes: recipe.minutes,
+    servings: recipe.servings,
+    tags: recipe.tags,
+  };
+}
+
+/** User-authored recipe ids are prefixed so they never collide with API ids. */
+export const CUSTOM_ID_PREFIX = 'my-';
+
+export function isCustomId(id: string): boolean {
+  return id.startsWith(CUSTOM_ID_PREFIX);
+}
+
+export function createCustomId(): string {
+  // `crypto.randomUUID` needs a secure context; the timestamp form is a safe
+  // fallback and still collision-free for a single-user local store.
+  const unique =
+    typeof crypto !== 'undefined' && 'randomUUID' in crypto
+      ? crypto.randomUUID()
+      : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  return `${CUSTOM_ID_PREFIX}${unique}`;
+}
+
+/**
+ * Splits an instruction blob into steps. TheMealDB is inconsistent: some
+ * recipes use blank lines, some use "STEP 1", some are one long paragraph.
+ */
+export function splitInstructions(instructions: string): string[] {
+  if (!instructions) return [];
+
+  const normalised = instructions.replace(/\r\n/g, '\n').trim();
+
+  // Prefer explicit line breaks when the source provides them.
+  const byLine = normalised
+    .split(/\n+/)
+    .map((line) => line.replace(/^\s*(?:step\s*)?\d+[.)：:]?\s*/i, '').trim())
+    .filter((line) => line.length > 0);
+
+  if (byLine.length > 1) return byLine;
+
+  // Otherwise fall back to sentence boundaries, grouped so steps stay readable.
+  const sentences = normalised.match(/[^.!?]+[.!?]+(?:\s|$)|[^.!?]+$/g) ?? [normalised];
+  const steps: string[] = [];
+  let buffer = '';
+
+  for (const sentence of sentences) {
+    buffer += sentence;
+    if (buffer.trim().length >= 90) {
+      steps.push(buffer.trim());
+      buffer = '';
+    }
+  }
+  if (buffer.trim()) steps.push(buffer.trim());
+
+  return steps.length > 0 ? steps : [normalised];
+}
+
+export function joinSteps(steps: string[]): string {
+  return steps.join('\n');
+}
+
+/** Human-readable summary line used in cards and list rows. */
+export function describeRecipe(recipe: RecipeSummary): string {
+  const parts = [recipe.category, recipe.area].filter((part) => part && part !== 'Unknown');
+  return parts.join(' · ');
+}

package/apps/recipe-web/src/lib/domain/validation.ts

@@ -0,0 +1,189 @@
+/**
+ * Validation for user-authored recipes.
+ *
+ * Kept free of Svelte imports so it can be unit-tested, and so the same rules
+ * could be reused on a server if the local store is ever replaced by an API.
+ */
+
+import type { Ingredient } from './recipe';
+
+export interface RecipeDraft {
+  name: string;
+  category: string;
+  area: string;
+  image: string;
+  minutes: string;
+  servings: string;
+  ingredients: Ingredient[];
+  steps: string[];
+  tags: string[];
+  notes: string;
+}
+
+export type RecipeErrors = Partial<Record<keyof RecipeDraft, string>> & {
+  /** Per-row ingredient errors, keyed by index. */
+  ingredientRows?: Record<number, string>;
+  stepRows?: Record<number, string>;
+};
+
+export const LIMITS = {
+  nameMin: 3,
+  nameMax: 120,
+  minIngredients: 2,
+  maxIngredients: 20,
+  minSteps: 1,
+  maxSteps: 30,
+  stepMin: 5,
+  maxTags: 6,
+  tagMax: 24,
+  minutesMax: 1440,
+  servingsMax: 50,
+  notesMax: 500,
+} as const;
+
+export function emptyDraft(): RecipeDraft {
+  return {
+    name: '',
+    category: '',
+    area: '',
+    image: '',
+    minutes: '',
+    servings: '',
+    ingredients: [
+      { name: '', measure: '' },
+      { name: '', measure: '' },
+    ],
+    steps: [''],
+    tags: [],
+    notes: '',
+  };
+}
+
+function isHttpUrl(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Parses an optional positive-integer field.
+ * Returns `undefined` for blank input and `null` for malformed input, so the
+ * caller can tell "not provided" apart from "provided but invalid".
+ */
+function parseOptionalCount(raw: string, max: number): number | undefined | null {
+  const trimmed = raw.trim();
+  if (trimmed === '') return undefined;
+  if (!/^\d+$/.test(trimmed)) return null;
+  const parsed = Number(trimmed);
+  return parsed >= 1 && parsed <= max ? parsed : null;
+}
+
+export function validateDraft(draft: RecipeDraft): RecipeErrors {
+  const errors: RecipeErrors = {};
+
+  /* ---- name ---- */
+  const name = draft.name.trim();
+  if (!name) {
+    errors.name = 'A recipe name is required.';
+  } else if (name.length < LIMITS.nameMin) {
+    errors.name = `Use at least ${LIMITS.nameMin} characters.`;
+  } else if (name.length > LIMITS.nameMax) {
+    errors.name = `Keep the name under ${LIMITS.nameMax} characters.`;
+  }
+
+  /* ---- category / area ---- */
+  if (!draft.category.trim()) errors.category = 'Pick a category.';
+  if (!draft.area.trim()) errors.area = 'Pick a cuisine.';
+
+  /* ---- image ---- */
+  const image = draft.image.trim();
+  if (image && !isHttpUrl(image)) {
+    errors.image = 'Enter a full http(s) image URL, or leave this blank.';
+  }
+
+  /* ---- time & servings ---- */
+  const minutes = parseOptionalCount(draft.minutes, LIMITS.minutesMax);
+  if (minutes === null) errors.minutes = `Enter a whole number of minutes between 1 and ${LIMITS.minutesMax}.`;
+
+  const servings = parseOptionalCount(draft.servings, LIMITS.servingsMax);
+  if (servings === null) errors.servings = `Enter a whole number between 1 and ${LIMITS.servingsMax}.`;
+
+  /* ---- ingredients ---- */
+  const namedIngredients = draft.ingredients.filter((row) => row.name.trim() !== '');
+  if (namedIngredients.length < LIMITS.minIngredients) {
+    errors.ingredients = `List at least ${LIMITS.minIngredients} ingredients.`;
+  } else if (namedIngredients.length > LIMITS.maxIngredients) {
+    errors.ingredients = `A recipe can hold up to ${LIMITS.maxIngredients} ingredients.`;
+  }
+
+  const ingredientRows: Record<number, string> = {};
+  const seen = new Map<string, number>();
+  draft.ingredients.forEach((row, index) => {
+    const rowName = row.name.trim();
+    // A blank row is a placeholder, not an error — unless a measure was typed.
+    if (!rowName) {
+      if (row.measure.trim()) ingredientRows[index] = 'Add an ingredient name for this quantity.';
+      return;
+    }
+    const key = rowName.toLowerCase();
+    if (seen.has(key)) {
+      ingredientRows[index] = 'This ingredient is already listed.';
+    } else {
+      seen.set(key, index);
+    }
+  });
+  if (Object.keys(ingredientRows).length > 0) errors.ingredientRows = ingredientRows;
+
+  /* ---- steps ---- */
+  const filledSteps = draft.steps.filter((step) => step.trim() !== '');
+  if (filledSteps.length < LIMITS.minSteps) {
+    errors.steps = 'Add at least one instruction step.';
+  } else if (filledSteps.length > LIMITS.maxSteps) {
+    errors.steps = `A recipe can hold up to ${LIMITS.maxSteps} steps.`;
+  }
+
+  const stepRows: Record<number, string> = {};
+  draft.steps.forEach((step, index) => {
+    const trimmed = step.trim();
+    if (trimmed && trimmed.length < LIMITS.stepMin) {
+      stepRows[index] = `Describe this step in at least ${LIMITS.stepMin} characters.`;
+    }
+  });
+  if (Object.keys(stepRows).length > 0) errors.stepRows = stepRows;
+
+  /* ---- tags ---- */
+  if (draft.tags.length > LIMITS.maxTags) {
+    errors.tags = `Use at most ${LIMITS.maxTags} tags.`;
+  } else if (draft.tags.some((tag) => tag.length > LIMITS.tagMax)) {
+    errors.tags = `Keep each tag under ${LIMITS.tagMax} characters.`;
+  }
+
+  /* ---- notes ---- */
+  if (draft.notes.trim().length > LIMITS.notesMax) {
+    errors.notes = `Keep notes under ${LIMITS.notesMax} characters.`;
+  }
+
+  return errors;
+}
+
+export function isValid(errors: RecipeErrors): boolean {
+  return Object.keys(errors).length === 0;
+}
+
+/** Counts every problem, including per-row ones, for the summary banner. */
+export function countErrors(errors: RecipeErrors): number {
+  let total = 0;
+  for (const [key, value] of Object.entries(errors)) {
+    if (key === 'ingredientRows' || key === 'stepRows') {
+      total += Object.keys(value as Record<number, string>).length;
+    } else if (value) {
+      total += 1;
+    }
+  }
+  return total;
+}
+
+export { parseOptionalCount };