@contractspec/bundle.library 0.0.0-canary-20260206014742

package/src/components/templates/messaging/types.ts

@@ -0,0 +1,25 @@
+export interface Participant {
+  id: string;
+  userId: string;
+  displayName?: string | null;
+  role?: string | null;
+  lastReadAt?: string | null;
+}
+
+export interface Conversation {
+  id: string;
+  name?: string | null;
+  isGroup: boolean;
+  avatarUrl?: string | null;
+  updatedAt: string;
+  participants: Participant[];
+}
+
+export interface Message {
+  id: string;
+  content: string;
+  senderId: string;
+  senderName?: string | null;
+  createdAt: string;
+  status: 'SENT' | 'DELIVERED' | 'READ';
+}

package/src/components/templates/recipes/LanguageSwitcher.tsx

@@ -0,0 +1,25 @@
+export interface LanguageSwitcherProps {
+  locale: 'EN' | 'FR';
+  onChange: (locale: 'EN' | 'FR') => void;
+}
+
+export function LanguageSwitcher({ locale, onChange }: LanguageSwitcherProps) {
+  return (
+    <div className="border-border bg-card text-muted-foreground inline-flex rounded-full border p-1 text-xs font-semibold">
+      {(['EN', 'FR'] as const).map((language) => (
+        <button
+          key={language}
+          type="button"
+          className={`rounded-full px-3 py-1 transition ${
+            locale === language
+              ? 'bg-violet-500 text-white'
+              : 'hover:text-foreground'
+          }`}
+          onClick={() => onChange(language)}
+        >
+          {language === 'EN' ? 'English' : 'Français'}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/templates/recipes/RecipeCard.tsx

@@ -0,0 +1,66 @@
+import { Heart } from 'lucide-react';
+
+import { type Recipe } from './types';
+
+export interface RecipeCardProps {
+  recipe: Recipe;
+  onSelect?: (recipe: Recipe) => void;
+  onToggleFavorite?: (recipe: Recipe) => void;
+}
+
+export function RecipeCard({
+  recipe,
+  onSelect,
+  onToggleFavorite,
+}: RecipeCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect?.(recipe)}
+      className="border-border bg-card flex flex-col gap-3 rounded-2xl border text-left transition hover:border-violet-400"
+    >
+      {recipe.heroImageUrl ? (
+        <img
+          src={recipe.heroImageUrl}
+          alt={recipe.name}
+          className="h-40 w-full rounded-t-2xl object-cover"
+        />
+      ) : (
+        <div className="bg-muted h-40 rounded-t-2xl" />
+      )}
+      <div className="space-y-2 p-4">
+        <div className="flex items-center justify-between">
+          <p className="text-base font-semibold">{recipe.name}</p>
+          <button
+            type="button"
+            className={`inline-flex items-center justify-center rounded-full border border-transparent p-2 ${
+              recipe.isFavorite
+                ? 'text-red-400'
+                : 'text-muted-foreground hover:text-red-400'
+            }`}
+            onClick={(event) => {
+              event.stopPropagation();
+              onToggleFavorite?.(recipe);
+            }}
+          >
+            <Heart
+              className={`h-4 w-4 ${recipe.isFavorite ? 'fill-red-400' : ''}`}
+            />
+          </button>
+        </div>
+        <p className="text-muted-foreground line-clamp-2 text-sm">
+          {recipe.description}
+        </p>
+        <div className="text-muted-foreground flex flex-wrap gap-3 text-xs">
+          {recipe.prepTimeMinutes ? (
+            <span>Prep {recipe.prepTimeMinutes}m</span>
+          ) : null}
+          {recipe.cookTimeMinutes ? (
+            <span>Cook {recipe.cookTimeMinutes}m</span>
+          ) : null}
+          {recipe.servings ? <span>{recipe.servings} servings</span> : null}
+        </div>
+      </div>
+    </button>
+  );
+}

package/src/components/templates/recipes/RecipeDetail.tsx

@@ -0,0 +1,55 @@
+import { BookOpen } from 'lucide-react';
+
+import { type Recipe } from './types';
+
+export interface RecipeDetailProps {
+  recipe?: Recipe;
+}
+
+export function RecipeDetail({ recipe }: RecipeDetailProps) {
+  if (!recipe) {
+    return (
+      <div className="border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed">
+        <p className="text-muted-foreground text-sm">
+          Select a recipe to view details.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <article className="border-border bg-card space-y-4 rounded-2xl border p-6">
+      <header className="flex flex-wrap items-center gap-3">
+        <BookOpen className="text-muted-foreground h-5 w-5" />
+        <div>
+          <h2 className="text-xl font-semibold">{recipe.name}</h2>
+          <p className="text-muted-foreground text-sm">{recipe.description}</p>
+        </div>
+      </header>
+
+      <section>
+        <h3 className="text-muted-foreground text-sm font-semibold tracking-wide uppercase">
+          Ingredients
+        </h3>
+        <ul className="text-foreground mt-2 list-disc space-y-1 pl-6 text-sm">
+          {recipe.ingredients.map((ingredient) => (
+            <li key={ingredient.id}>
+              {ingredient.name} – {ingredient.quantity}
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section>
+        <h3 className="text-muted-foreground text-sm font-semibold tracking-wide uppercase">
+          Instructions
+        </h3>
+        <ol className="text-foreground mt-2 list-decimal space-y-2 pl-6 text-sm">
+          {recipe.instructions.map((instruction) => (
+            <li key={instruction.id}>{instruction.content}</li>
+          ))}
+        </ol>
+      </section>
+    </article>
+  );
+}

package/src/components/templates/recipes/RecipeList.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useQuery } from '@apollo/client/react';
+import { gql } from '@apollo/client';
+
+import {
+  registerTemplateComponents,
+  useTemplateRuntime,
+} from '@contractspec/lib.example-shared-ui';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { RecipeCard } from './RecipeCard';
+import { RecipeDetail } from './RecipeDetail';
+import { type Recipe } from './types';
+
+const RECIPES_QUERY = gql`
+  query Recipes($projectId: ID!, $locale: RecipeLocale!) {
+    recipes(projectId: $projectId, locale: $locale) {
+      id
+      name
+      description
+      heroImageUrl
+      prepTimeMinutes
+      cookTimeMinutes
+      servings
+      isFavorite
+      locale
+      category {
+        id
+        nameEn
+        nameFr
+      }
+      ingredients {
+        id
+        name
+        quantity
+      }
+      instructions {
+        id
+        content
+        ordering
+      }
+    }
+  }
+`;
+
+const FAVORITE_RECIPE = gql`
+  mutation FavoriteRecipe($id: ID!, $isFavorite: Boolean!) {
+    favoriteRecipe(id: $id, isFavorite: $isFavorite) {
+      id
+      isFavorite
+    }
+  }
+`;
+
+export function RecipeList() {
+  const { projectId } = useTemplateRuntime();
+  const [locale, setLocale] = useState<'EN' | 'FR'>('EN');
+  const [selected, setSelected] = useState<Recipe | undefined>();
+  const [search, setSearch] = useState('');
+  const { data, loading } = useQuery<{ recipes: Recipe[] }>(RECIPES_QUERY, {
+    variables: { projectId, locale },
+    fetchPolicy: 'cache-and-network',
+  });
+  const [favoriteRecipe] = useMutation(FAVORITE_RECIPE);
+
+  const recipes: Recipe[] = data?.recipes ?? [];
+  const filtered = recipes.filter((recipe) =>
+    recipe.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const handleToggleFavorite = async (recipe: Recipe) => {
+    await favoriteRecipe({
+      variables: { id: recipe.id, isFavorite: !recipe.isFavorite },
+      optimisticResponse: {
+        favoriteRecipe: {
+          __typename: 'Recipe',
+          id: recipe.id,
+          isFavorite: !recipe.isFavorite,
+        },
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <LanguageSwitcher locale={locale} onChange={setLocale} />
+        <input
+          type="search"
+          placeholder={
+            locale === 'EN' ? 'Search recipes' : 'Rechercher des recettes'
+          }
+          className="border-border bg-card flex-1 rounded-full border px-4 py-2 text-sm"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+        />
+      </div>
+
+      {loading ? (
+        <p className="text-muted-foreground text-sm">Loading recipes…</p>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-3">
+          {filtered.map((recipe) => (
+            <RecipeCard
+              key={recipe.id}
+              recipe={recipe}
+              onSelect={setSelected}
+              onToggleFavorite={handleToggleFavorite}
+            />
+          ))}
+        </div>
+      )}
+
+      <RecipeDetail recipe={selected} />
+    </div>
+  );
+}
+
+registerTemplateComponents('recipe-app-i18n', {
+  list: RecipeList,
+  detail: RecipeDetail,
+});

package/src/components/templates/recipes/index.ts

@@ -0,0 +1,4 @@
+export * from './RecipeList';
+export * from './RecipeCard';
+export * from './RecipeDetail';
+export * from './LanguageSwitcher';

package/src/components/templates/recipes/types.ts

@@ -0,0 +1,26 @@
+export interface Recipe {
+  id: string;
+  name: string;
+  description?: string | null;
+  heroImageUrl?: string | null;
+  prepTimeMinutes?: number | null;
+  cookTimeMinutes?: number | null;
+  servings?: number | null;
+  isFavorite: boolean;
+  locale: 'EN' | 'FR';
+  category?: {
+    id: string;
+    nameEn: string;
+    nameFr: string;
+  } | null;
+  ingredients: {
+    id: string;
+    name: string;
+    quantity: string;
+  }[];
+  instructions: {
+    id: string;
+    content: string;
+    ordering: number;
+  }[];
+}

package/src/components/templates/todos/FilterBar.tsx

@@ -0,0 +1,97 @@
+import { type TaskPriority, type TaskCategory } from './types';
+
+export interface FilterState {
+  status: 'all' | 'active' | 'completed';
+  priority: TaskPriority | 'all';
+  categoryId: string | 'all';
+  search: string;
+}
+
+export interface FilterBarProps {
+  value: FilterState;
+  onChange: (next: FilterState) => void;
+  categories: TaskCategory[];
+}
+
+export function FilterBar({ value, onChange, categories }: FilterBarProps) {
+  const handleChange = <
+    TKey extends keyof FilterState,
+    TValue extends FilterState[TKey],
+  >(
+    key: TKey,
+    nextValue: TValue
+  ) => {
+    onChange({ ...value, [key]: nextValue });
+  };
+
+  return (
+    <div className="border-border bg-card grid gap-3 rounded-2xl border p-4 md:grid-cols-4">
+      <label className="text-muted-foreground flex flex-col text-xs tracking-wide uppercase">
+        Status
+        <select
+          className="border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm"
+          value={value.status}
+          onChange={(event) =>
+            handleChange('status', event.target.value as FilterState['status'])
+          }
+        >
+          <option value="all">All tasks</option>
+          <option value="active">Active</option>
+          <option value="completed">Completed</option>
+        </select>
+      </label>
+
+      <label className="text-muted-foreground flex flex-col text-xs tracking-wide uppercase">
+        Priority
+        <select
+          className="border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm"
+          value={value.priority}
+          onChange={(event) =>
+            handleChange(
+              'priority',
+              event.target.value as FilterState['priority']
+            )
+          }
+        >
+          <option value="all">All</option>
+          <option value="LOW">Low</option>
+          <option value="MEDIUM">Medium</option>
+          <option value="HIGH">High</option>
+          <option value="URGENT">Urgent</option>
+        </select>
+      </label>
+
+      <label className="text-muted-foreground flex flex-col text-xs tracking-wide uppercase">
+        Category
+        <select
+          className="border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm"
+          value={value.categoryId}
+          onChange={(event) =>
+            handleChange(
+              'categoryId',
+              event.target.value as FilterState['categoryId']
+            )
+          }
+        >
+          <option value="all">All categories</option>
+          {categories.map((category) => (
+            <option key={category.id} value={category.id}>
+              {category.name}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label className="text-muted-foreground flex flex-col text-xs tracking-wide uppercase">
+        Search
+        <input
+          type="search"
+          className="border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm"
+          placeholder="Search by title"
+          value={value.search}
+          onChange={(event) => handleChange('search', event.target.value)}
+        />
+      </label>
+    </div>
+  );
+}

package/src/components/templates/todos/TaskForm.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation } from '@apollo/client/react';
+import { gql } from '@apollo/client';
+
+import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { type TaskCategory, type TaskPriority } from './types';
+
+const CREATE_TASK = gql`
+  mutation CreateTask($input: CreateTaskInput!) {
+    createTask(input: $input) {
+      id
+      title
+    }
+  }
+`;
+
+export interface TaskFormProps {
+  categories: TaskCategory[];
+}
+
+export function TaskForm({ categories }: TaskFormProps) {
+  const { projectId } = useTemplateRuntime();
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [priority, setPriority] = useState<TaskPriority>('MEDIUM');
+  const [categoryId, setCategoryId] = useState<string | 'none'>('none');
+  const [tagsInput, setTagsInput] = useState('');
+  const [createTask, { loading }] = useMutation(CREATE_TASK);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!title.trim()) return;
+    await createTask({
+      variables: {
+        input: {
+          projectId,
+          title: title.trim(),
+          description: description.trim() || undefined,
+          priority,
+          categoryId: categoryId === 'none' ? undefined : categoryId,
+          tags: parseTags(tagsInput),
+        },
+      },
+      refetchQueries: ['Tasks'],
+      awaitRefetchQueries: true,
+    });
+    setTitle('');
+    setDescription('');
+    setPriority('MEDIUM');
+    setCategoryId('none');
+    setTagsInput('');
+    // onCreated?.();
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="border-border bg-background/60 space-y-3 rounded-2xl border p-4"
+    >
+      <div>
+        <label className="text-muted-foreground text-xs font-semibold uppercase">
+          Title
+          <input
+            type="text"
+            className="border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm"
+            placeholder="What needs to get done?"
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            required
+          />
+        </label>
+      </div>
+
+      <div>
+        <label className="text-muted-foreground text-xs font-semibold uppercase">
+          Description
+          <textarea
+            className="border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm"
+            rows={3}
+            placeholder="Add context or policy notes"
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+          />
+        </label>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        <label className="text-muted-foreground text-xs font-semibold uppercase">
+          Priority
+          <select
+            className="border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm"
+            value={priority}
+            onChange={(event) =>
+              setPriority(event.target.value as TaskPriority)
+            }
+          >
+            <option value="LOW">Low</option>
+            <option value="MEDIUM">Medium</option>
+            <option value="HIGH">High</option>
+            <option value="URGENT">Urgent</option>
+          </select>
+        </label>
+
+        <label className="text-muted-foreground text-xs font-semibold uppercase">
+          Category
+          <select
+            className="border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm"
+            value={categoryId}
+            onChange={(event) => setCategoryId(event.target.value as string)}
+          >
+            <option value="none">None</option>
+            {categories.map((category) => (
+              <option key={category.id} value={category.id}>
+                {category.name}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="text-muted-foreground text-xs font-semibold uppercase">
+          Tags
+          <input
+            className="border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm"
+            placeholder="Comma separated (optional)"
+            value={tagsInput}
+            onChange={(event) => setTagsInput(event.target.value)}
+          />
+        </label>
+      </div>
+
+      <button
+        type="submit"
+        className="btn-primary w-full py-2 text-sm font-semibold"
+        disabled={loading}
+      >
+        {loading ? 'Saving...' : 'Add task'}
+      </button>
+    </form>
+  );
+}
+
+function parseTags(input: string): string[] {
+  return input
+    .split(',')
+    .map((tag) => tag.trim())
+    .filter(Boolean);
+}

package/src/components/templates/todos/TaskItem.tsx

@@ -0,0 +1,92 @@
+import { Check, Circle, Trash2 } from 'lucide-react';
+
+import { type Task } from './types';
+
+export interface TaskItemProps {
+  task: Task;
+  onToggle?: (task: Task) => void;
+  onDelete?: (task: Task) => void;
+}
+
+export function TaskItem({ task, onToggle, onDelete }: TaskItemProps) {
+  const badgeColor =
+    task.priority === 'URGENT'
+      ? 'text-red-200 bg-red-500/10 border-red-500/40'
+      : task.priority === 'HIGH'
+        ? 'text-amber-200 bg-amber-500/10 border-amber-500/40'
+        : task.priority === 'LOW'
+          ? 'text-emerald-200 bg-emerald-500/10 border-emerald-500/40'
+          : 'text-violet-200 bg-violet-500/10 border-violet-500/40';
+
+  return (
+    <div className="border-border/70 bg-card/60 hover:border-border flex items-start gap-4 rounded-2xl border p-4 transition">
+      <button
+        type="button"
+        className="border-border text-muted-foreground hover:bg-muted/40 rounded-full border p-2"
+        aria-pressed={task.completed}
+        onClick={() => onToggle?.(task)}
+      >
+        {task.completed ? (
+          <Check className="h-4 w-4 text-emerald-400" />
+        ) : (
+          <Circle className="h-4 w-4" />
+        )}
+      </button>
+
+      <div className="flex-1 space-y-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <p
+            className={`font-medium ${
+              task.completed
+                ? 'text-muted-foreground line-through'
+                : 'text-foreground'
+            }`}
+          >
+            {task.title}
+          </p>
+          <span
+            className={`rounded-full border px-2 py-0.5 text-xs ${badgeColor}`}
+          >
+            {task.priority.charAt(0) + task.priority.slice(1).toLowerCase()}
+          </span>
+          {task.category ? (
+            <span className="bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs">
+              {task.category.name}
+            </span>
+          ) : null}
+          {task.dueDate ? (
+            <span className="text-muted-foreground text-xs">
+              Due {new Date(task.dueDate).toLocaleDateString()}
+            </span>
+          ) : null}
+        </div>
+
+        {task.description ? (
+          <p className="text-muted-foreground text-sm">{task.description}</p>
+        ) : null}
+
+        {task.tags.length ? (
+          <div className="flex flex-wrap gap-1">
+            {task.tags.map((tag) => (
+              <span
+                key={tag}
+                className="bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs"
+              >
+                #{tag}
+              </span>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      <button
+        type="button"
+        className="text-muted-foreground hover:text-destructive"
+        aria-label={`Delete ${task.title}`}
+        onClick={() => onDelete?.(task)}
+      >
+        <Trash2 className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}