@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

package/apps/recipe-web/src/lib/api/mealdb.ts

@@ -1,240 +0,0 @@
-/**
- * Typed client for TheMealDB (https://www.themealdb.com/api.php).
- *
- * The public test key `1` is used, which needs no signup. Every function takes
- * an optional `fetch` so SvelteKit `load` functions can pass their own instance
- * and get request de-duplication plus SSR-safe relative URLs.
- */
-
-import { splitInstructions, type Recipe, type RecipeSummary } from '$domain/recipe';
-
-const BASE_URL = 'https://www.themealdb.com/api/json/v1/1';
-
-type Fetch = typeof globalThis.fetch;
-
-/** Raw meal record. TheMealDB returns 20 flat ingredient/measure column pairs. */
-interface RawMeal {
-  idMeal: string;
-  strMeal: string;
-  strCategory: string | null;
-  strArea: string | null;
-  strMealThumb: string | null;
-  strInstructions: string | null;
-  strTags: string | null;
-  strYoutube: string | null;
-  strSource: string | null;
-  [key: string]: string | null;
-}
-
-/** `filter.php` responses only carry enough data to render a card. */
-interface RawMealLite {
-  idMeal: string;
-  strMeal: string;
-  strMealThumb: string | null;
-  strArea?: string | null;
-}
-
-interface RawCategory {
-  idCategory: string;
-  strCategory: string;
-  strCategoryThumb: string;
-  strCategoryDescription: string;
-}
-
-export interface Category {
-  name: string;
-  thumbnail: string;
-  description: string;
-}
-
-export class MealDbError extends Error {
-  constructor(
-    message: string,
-    readonly status?: number
-  ) {
-    super(message);
-    this.name = 'MealDbError';
-  }
-}
-
-async function request<T>(path: string, fetchImpl: Fetch = fetch): Promise<T> {
-  let response: Response;
-  try {
-    response = await fetchImpl(`${BASE_URL}${path}`);
-  } catch (cause) {
-    throw new MealDbError(`Could not reach the recipe service. ${(cause as Error)?.message ?? ''}`.trim());
-  }
-
-  if (!response.ok) {
-    throw new MealDbError(`The recipe service responded with ${response.status}.`, response.status);
-  }
-
-  try {
-    return (await response.json()) as T;
-  } catch {
-    throw new MealDbError('The recipe service returned an unreadable response.');
-  }
-}
-
-/* ------------------------------------------------------------------ mapping */
-
-/** Tags arrive comma-joined and are not guaranteed unique or clean. */
-function parseTags(raw: string | null): string[] {
-  const tags = (raw ?? '')
-    .split(',')
-    .map((tag) => tag.trim())
-    .filter(Boolean);
-
-  const seen = new Set<string>();
-  return tags.filter((tag) => {
-    const key = tag.toLowerCase();
-    if (seen.has(key)) return false;
-    seen.add(key);
-    return true;
-  });
-}
-
-function collectIngredients(meal: RawMeal) {
-  const ingredients = [];
-  for (let index = 1; index <= 20; index += 1) {
-    const name = meal[`strIngredient${index}`]?.trim();
-    if (!name) continue;
-    ingredients.push({ name, measure: meal[`strMeasure${index}`]?.trim() ?? '' });
-  }
-  return ingredients;
-}
-
-export function normaliseMeal(meal: RawMeal): Recipe {
-  return {
-    id: meal.idMeal,
-    name: meal.strMeal?.trim() ?? 'Untitled recipe',
-    category: meal.strCategory?.trim() || 'Uncategorised',
-    area: meal.strArea?.trim() || 'Unknown',
-    image: meal.strMealThumb ?? undefined,
-    steps: splitInstructions(meal.strInstructions ?? ''),
-    ingredients: collectIngredients(meal),
-    tags: parseTags(meal.strTags),
-    origin: 'api',
-    youtubeUrl: meal.strYoutube || undefined,
-    sourceUrl: meal.strSource || undefined,
-  };
-}
-
-function summariseMeal(meal: RawMeal): RecipeSummary {
-  return {
-    id: meal.idMeal,
-    name: meal.strMeal?.trim() ?? 'Untitled recipe',
-    image: meal.strMealThumb ?? undefined,
-    category: meal.strCategory?.trim() || 'Uncategorised',
-    area: meal.strArea?.trim() || 'Unknown',
-    origin: 'api',
-    ingredientCount: collectIngredients(meal).length,
-    tags: parseTags(meal.strTags),
-  };
-}
-
-/**
- * `filter.php` omits category and area, but the caller knows which filter
- * produced the list, so the known dimension is threaded back in.
- */
-function summariseLite(meal: RawMealLite, known: { category?: string; area?: string }): RecipeSummary {
-  return {
-    id: meal.idMeal,
-    name: meal.strMeal?.trim() ?? 'Untitled recipe',
-    image: meal.strMealThumb ?? undefined,
-    category: known.category ?? 'Uncategorised',
-    area: known.area ?? meal.strArea?.trim() ?? 'Unknown',
-    origin: 'api',
-  };
-}
-
-/* ---------------------------------------------------------------- endpoints */
-
-/** Full-text search by recipe name. Returns fully populated recipes. */
-export async function searchRecipes(query: string, fetchImpl?: Fetch): Promise<RecipeSummary[]> {
-  const data = await request<{ meals: RawMeal[] | null }>(`/search.php?s=${encodeURIComponent(query)}`, fetchImpl);
-  return (data.meals ?? []).map(summariseMeal);
-}
-
-/** The whole catalogue, used for the default browse view. */
-export function browseAll(fetchImpl?: Fetch): Promise<RecipeSummary[]> {
-  return searchRecipes('', fetchImpl);
-}
-
-export async function filterByCategory(category: string, fetchImpl?: Fetch): Promise<RecipeSummary[]> {
-  const data = await request<{ meals: RawMealLite[] | null }>(`/filter.php?c=${encodeURIComponent(category)}`, fetchImpl);
-  return (data.meals ?? []).map((meal) => summariseLite(meal, { category }));
-}
-
-export async function filterByArea(area: string, fetchImpl?: Fetch): Promise<RecipeSummary[]> {
-  const data = await request<{ meals: RawMealLite[] | null }>(`/filter.php?a=${encodeURIComponent(area)}`, fetchImpl);
-  return (data.meals ?? []).map((meal) => summariseLite(meal, { area }));
-}
-
-export async function filterByIngredient(ingredient: string, fetchImpl?: Fetch): Promise<RecipeSummary[]> {
-  // TheMealDB expects underscores for multi-word ingredients.
-  const slug = ingredient.trim().replace(/\s+/g, '_');
-  const data = await request<{ meals: RawMealLite[] | null }>(`/filter.php?i=${encodeURIComponent(slug)}`, fetchImpl);
-  return (data.meals ?? []).map((meal) => summariseLite(meal, {}));
-}
-
-export async function getRecipe(id: string, fetchImpl?: Fetch): Promise<Recipe | null> {
-  const data = await request<{ meals: RawMeal[] | null }>(`/lookup.php?i=${encodeURIComponent(id)}`, fetchImpl);
-  const meal = data.meals?.[0];
-  return meal ? normaliseMeal(meal) : null;
-}
-
-export async function getRandomRecipe(fetchImpl?: Fetch): Promise<Recipe | null> {
-  const data = await request<{ meals: RawMeal[] | null }>('/random.php', fetchImpl);
-  const meal = data.meals?.[0];
-  return meal ? normaliseMeal(meal) : null;
-}
-
-/**
- * De-duplicates a facet list case-insensitively, preserving first-seen order.
- *
- * TheMealDB genuinely returns repeats: `list.php?a=list` currently ships
- * "Dominican", "Congolese" and "Channel Islander" twice. Facet values are the
- * natural key for an `{#each}` block and Svelte throws on duplicate keys, so
- * this has to be cleaned up before the data reaches any component.
- */
-function uniqueBy<T>(items: T[], identity: (item: T) => string): T[] {
-  const seen = new Set<string>();
-  const out: T[] = [];
-
-  for (const item of items) {
-    const key = identity(item).trim().toLowerCase();
-    if (key === '' || seen.has(key)) continue;
-    seen.add(key);
-    out.push(item);
-  }
-
-  return out;
-}
-
-export async function listCategories(fetchImpl?: Fetch): Promise<Category[]> {
-  const data = await request<{ categories: RawCategory[] | null }>('/categories.php', fetchImpl);
-  const categories = (data.categories ?? []).map((category) => ({
-    name: category.strCategory,
-    thumbnail: category.strCategoryThumb,
-    description: category.strCategoryDescription,
-  }));
-  return uniqueBy(categories, (category) => category.name);
-}
-
-export async function listAreas(fetchImpl?: Fetch): Promise<string[]> {
-  const data = await request<{ meals: { strArea: string }[] | null }>('/list.php?a=list', fetchImpl);
-  const areas = uniqueBy(
-    (data.meals ?? []).map((meal) => meal.strArea).filter(Boolean),
-    (area) => area
-  );
-  return areas.sort((a, b) => a.localeCompare(b));
-}
-
-export async function listIngredients(fetchImpl?: Fetch): Promise<string[]> {
-  const data = await request<{ meals: { strIngredient: string }[] | null }>('/list.php?i=list', fetchImpl);
-  return uniqueBy(
-    (data.meals ?? []).map((meal) => meal.strIngredient).filter(Boolean),
-    (ingredient) => ingredient
-  );
-}

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

@@ -1,290 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/state';
-  import { favorites } from '$stores/favorites.svelte';
-  import { myRecipes } from '$stores/myRecipes.svelte';
-  import { planner } from '$stores/planner.svelte';
-  import { theme } from '$stores/theme.svelte';
-
-  const links = $derived([
-    { href: '/', label: 'Discover', badge: 0 },
-    { href: '/favorites', label: 'Favorites', badge: favorites.count },
-    { href: '/my-recipes', label: 'My recipes', badge: myRecipes.count },
-    { href: '/planner', label: 'Planner', badge: planner.countFor() }
-  ]);
-
-  function isActive(href: string): boolean {
-    const path = page.url.pathname;
-    if (href === '/') return path === '/';
-    return path === href || path.startsWith(`${href}/`);
-  }
-
-  let menuOpen = $state(false);
-
-  // Close the mobile menu whenever the route changes.
-  $effect(() => {
-    void page.url.pathname;
-    menuOpen = false;
-  });
-</script>
-
-<header class="header">
-  <div class="inner">
-    <a class="brand" href="/" aria-label="Mise — home">
-      <span class="brand-mark" aria-hidden="true">🥘</span>
-      <span class="brand-text">
-        <strong>Mise</strong>
-        <small>Recipe finder &amp; meal planner</small>
-      </span>
-    </a>
-
-    <button
-      class="menu-toggle"
-      type="button"
-      aria-expanded={menuOpen}
-      aria-controls="primary-nav"
-      onclick={() => (menuOpen = !menuOpen)}
-    >
-      <span class="sr-only">{menuOpen ? 'Close menu' : 'Open menu'}</span>
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-        {#if menuOpen}
-          <path d="M6 6l12 12M18 6 6 18" />
-        {:else}
-          <path d="M4 7h16M4 12h16M4 17h16" />
-        {/if}
-      </svg>
-    </button>
-
-    <nav class="nav" class:is-open={menuOpen} id="primary-nav" aria-label="Primary">
-      {#each links as link (link.href)}
-        <a class="nav-link" class:is-active={isActive(link.href)} href={link.href} aria-current={isActive(link.href) ? 'page' : undefined}>
-          {link.label}
-          {#if link.badge > 0}
-            <span class="nav-badge">{link.badge}</span>
-          {/if}
-        </a>
-      {/each}
-
-      <div class="nav-tail">
-        <a class="btn btn-primary btn-sm" href="/my-recipes/new">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
-            <path d="M12 5v14M5 12h14" />
-          </svg>
-          Add recipe
-        </a>
-
-        <button class="theme-toggle" type="button" onclick={() => theme.toggle()} aria-label="Switch to {theme.current === 'dark' ? 'light' : 'dark'} theme">
-          {#if theme.current === 'dark'}
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-              <circle cx="12" cy="12" r="4.2" />
-              <path d="M12 2v2.4M12 19.6V22M2 12h2.4M19.6 12H22M4.9 4.9l1.7 1.7M17.4 17.4l1.7 1.7M19.1 4.9l-1.7 1.7M6.6 17.4l-1.7 1.7" />
-            </svg>
-          {:else}
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5 8.6 8.6 0 1 0 20.5 14.6Z" />
-            </svg>
-          {/if}
-        </button>
-      </div>
-    </nav>
-  </div>
-</header>
-
-<style>
-  .header {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    background: color-mix(in srgb, var(--rk-bg) 88%, transparent);
-    backdrop-filter: blur(12px);
-    border-bottom: 1px solid var(--rk-border);
-  }
-
-  .inner {
-    display: flex;
-    align-items: center;
-    gap: 18px;
-    max-width: var(--app-max);
-    margin: 0 auto;
-    padding: 11px var(--app-gutter);
-  }
-
-  .brand {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    text-decoration: none;
-    color: inherit;
-    margin-right: auto;
-  }
-
-  .brand-mark {
-    font-size: 1.5rem;
-    line-height: 1;
-  }
-
-  .brand-text {
-    display: grid;
-    line-height: 1.15;
-  }
-
-  .brand-text strong {
-    font-family: var(--rk-font-display);
-    font-size: 1.16rem;
-    letter-spacing: -0.02em;
-  }
-
-  .brand-text small {
-    font-size: 0.68rem;
-    color: var(--rk-muted);
-    letter-spacing: 0.01em;
-  }
-
-  .nav {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-  }
-
-  .nav-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 14px;
-    border-radius: var(--rk-radius-pill);
-    color: var(--rk-ink-2);
-    text-decoration: none;
-    font-size: 0.9rem;
-    font-weight: 600;
-    white-space: nowrap;
-    transition:
-      background var(--rk-transition),
-      color var(--rk-transition);
-  }
-
-  .nav-link:hover {
-    background: var(--rk-surface-2);
-    color: var(--rk-ink);
-  }
-
-  .nav-link.is-active {
-    background: var(--rk-primary-soft);
-    color: var(--rk-primary-strong);
-  }
-
-  .nav-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 19px;
-    height: 19px;
-    padding: 0 5px;
-    border-radius: var(--rk-radius-pill);
-    background: var(--rk-ink);
-    color: var(--rk-bg);
-    font-size: 0.68rem;
-    font-weight: 700;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .nav-link.is-active .nav-badge {
-    background: var(--rk-primary);
-    color: #fff;
-  }
-
-  .nav-tail {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-left: 12px;
-    padding-left: 14px;
-    border-left: 1px solid var(--rk-border);
-  }
-
-  .theme-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    padding: 0;
-    border: 1px solid var(--rk-border);
-    border-radius: 50%;
-    background: var(--rk-surface);
-    color: var(--rk-ink-2);
-    cursor: pointer;
-    transition:
-      background var(--rk-transition),
-      color var(--rk-transition);
-  }
-
-  .theme-toggle:hover {
-    background: var(--rk-surface-2);
-    color: var(--rk-primary);
-  }
-
-  .theme-toggle svg {
-    width: 17px;
-    height: 17px;
-  }
-
-  .menu-toggle {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    border: 1px solid var(--rk-border);
-    border-radius: var(--rk-radius);
-    background: var(--rk-surface);
-    color: var(--rk-ink);
-    cursor: pointer;
-  }
-
-  .menu-toggle svg {
-    width: 20px;
-    height: 20px;
-  }
-
-  @media (max-width: 860px) {
-    .menu-toggle {
-      display: inline-flex;
-    }
-
-    .nav {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      flex-direction: column;
-      align-items: stretch;
-      gap: 4px;
-      padding: 12px var(--app-gutter) 18px;
-      background: var(--rk-bg);
-      border-bottom: 1px solid var(--rk-border);
-      box-shadow: var(--rk-shadow);
-      display: none;
-    }
-
-    .nav.is-open {
-      display: flex;
-    }
-
-    .nav-link {
-      justify-content: space-between;
-      padding: 12px 14px;
-    }
-
-    .nav-tail {
-      margin: 8px 0 0;
-      padding: 12px 0 0;
-      border-left: 0;
-      border-top: 1px solid var(--rk-border);
-      justify-content: space-between;
-    }
-
-    .brand-text small {
-      display: none;
-    }
-  }
-</style>

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

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import Modal from './Modal.svelte';
-
-  interface Props {
-    open: boolean;
-    heading: string;
-    message: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    destructive?: boolean;
-    onconfirm: () => void;
-    oncancel: () => void;
-  }
-
-  let {
-    open,
-    heading,
-    message,
-    confirmLabel = 'Confirm',
-    cancelLabel = 'Cancel',
-    destructive = false,
-    onconfirm,
-    oncancel
-  }: Props = $props();
-</script>
-
-<Modal {open} {heading} size="sm" onclose={oncancel}>
-  <p>{message}</p>
-
-  {#snippet footer()}
-    <div slot="footer" class="actions">
-      <button class="btn" type="button" onclick={oncancel}>{cancelLabel}</button>
-      <button class="btn" class:btn-danger={destructive} class:btn-primary={!destructive} type="button" onclick={onconfirm}>
-        {confirmLabel}
-      </button>
-    </div>
-  {/snippet}
-</Modal>
-
-<style>
-  .actions {
-    display: flex;
-    gap: 10px;
-    justify-content: flex-end;
-  }
-</style>

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

@@ -1,33 +0,0 @@
-<!--
-  Wraps `<rk-modal>`. The web component owns presentation, focus trapping and
-  Escape handling; the app owns the `open` state and reacts to `rkModalClose`.
--->
-<script lang="ts">
-  import WebComponent from '$lib/stencil/WebComponent.svelte';
-
-  interface Props {
-    open: boolean;
-    heading: string;
-    subheading?: string;
-    size?: 'sm' | 'md' | 'lg';
-    dismissible?: boolean;
-    onclose: () => void;
-    children: import('svelte').Snippet;
-    /** Rendered into the component's `footer` slot. */
-    footer?: import('svelte').Snippet;
-  }
-
-  let { open, heading, subheading, size = 'md', dismissible = true, onclose, children, footer }: Props = $props();
-</script>
-
-<WebComponent
-  tag="rk-modal"
-  props={{ open, heading, subheading, size, dismissible }}
-  events={{ rkModalClose: onclose }}
->
-  {@render children()}
-
-  {#if footer}
-    {@render footer()}
-  {/if}
-</WebComponent>

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

@@ -1,100 +0,0 @@
-<!--
-  Wraps the `<rk-recipe-card>` web component.
-
-  This is where the SvelteKit ↔ Stencil contract lives for the most-used
-  component: primitive props go down, custom events come back up, and slots
-  carry app-specific content (badges, action buttons) into the card.
--->
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import WebComponent from '$lib/stencil/WebComponent.svelte';
-  import { favorites } from '$stores/favorites.svelte';
-  import { toasts } from '$stores/toast.svelte';
-  import type { RecipeSummary } from '$domain/recipe';
-
-  interface Props {
-    recipe: RecipeSummary;
-    /** Dense horizontal layout, used in the planner picker. */
-    compact?: boolean;
-    hideFavorite?: boolean;
-    /** Overrides navigation on activation. Return `true` to skip the default. */
-    onselect?: (recipe: RecipeSummary) => boolean | void;
-    /** Extra content for the card's `actions` slot. */
-    actions?: import('svelte').Snippet<[RecipeSummary]>;
-    /** Extra content for the card's default (metadata) slot. */
-    badges?: import('svelte').Snippet<[RecipeSummary]>;
-  }
-
-  let { recipe, compact = false, hideFavorite = false, onselect, actions, badges }: Props = $props();
-
-  // Favorite state is owned by the app; the component only reports intent.
-  const isFavorite = $derived(favorites.has(recipe.id));
-
-  function handleSelect(event: CustomEvent<{ recipeId: string }>) {
-    if (onselect?.(recipe) === true) return;
-    void goto(`/recipes/${event.detail.recipeId}`);
-  }
-
-  function handleFavoriteToggle(event: CustomEvent<{ favorite: boolean }>) {
-    const nowFavorite = favorites.toggle(recipe);
-    // Trust the store's resulting state over the event payload — the store is
-    // the source of truth and may have been changed in another tab.
-    if (nowFavorite !== event.detail.favorite) return;
-
-    toasts.push(nowFavorite ? `Saved “${recipe.name}” to favorites.` : `Removed “${recipe.name}” from favorites.`, {
-      tone: nowFavorite ? 'success' : 'info',
-      action: nowFavorite ? undefined : { label: 'Undo', run: () => favorites.add(recipe) }
-    });
-  }
-
-  const timeLabel = $derived(recipe.minutes && recipe.minutes > 0 ? `${recipe.minutes} min` : null);
-</script>
-
-<WebComponent
-  tag="rk-recipe-card"
-  class="card-host"
-  props={{
-    recipeId: recipe.id,
-    name: recipe.name,
-    image: recipe.image,
-    category: recipe.category,
-    area: recipe.area,
-    minutes: recipe.minutes,
-    servings: recipe.servings,
-    favorite: isFavorite,
-    origin: recipe.origin,
-    href: `/recipes/${recipe.id}`,
-    compact,
-    hideFavorite
-  }}
-  events={{
-    rkCardSelect: handleSelect as (event: CustomEvent<never>) => void,
-    rkFavoriteToggle: handleFavoriteToggle as (event: CustomEvent<never>) => void
-  }}
->
-  <!-- Default slot: metadata badges rendered under the title. -->
-  {#if badges}
-    {@render badges(recipe)}
-  {:else}
-    {#if timeLabel}
-      <rk-badge tone="accent" small>{timeLabel}</rk-badge>
-    {/if}
-    {#if recipe.ingredientCount}
-      <rk-badge small>{recipe.ingredientCount} ingredients</rk-badge>
-    {/if}
-    {#each (recipe.tags ?? []).slice(0, 2) as tag (tag)}
-      <rk-badge tone="primary" variant="outline" small>{tag}</rk-badge>
-    {/each}
-  {/if}
-
-  <!-- Named slot: action row in the card footer. -->
-  {#if actions}
-    {@render actions(recipe)}
-  {/if}
-</WebComponent>
-
-<style>
-  :global(.card-host) {
-    height: 100%;
-  }
-</style>