@contractspec/bundle.library 3.7.5 → 3.7.7

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

@@ -1,25 +1,25 @@
 export interface Participant {
-  id: string;
-  userId: string;
-  displayName?: string | null;
-  role?: string | null;
-  lastReadAt?: string | null;
+	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[];
+	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';
+	id: string;
+	content: string;
+	senderId: string;
+	senderName?: string | null;
+	createdAt: string;
+	status: 'SENT' | 'DELIVERED' | 'READ';
 }

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

@@ -1,25 +1,25 @@
 export interface LanguageSwitcherProps {
-  locale: 'EN' | 'FR';
-  onChange: (locale: 'EN' | 'FR') => void;
+	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>
-  );
+	return (
+		<div className="inline-flex rounded-full border border-border bg-card p-1 font-semibold text-muted-foreground text-xs">
+			{(['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

@@ -3,64 +3,64 @@ import { Heart } from 'lucide-react';
 import { type Recipe } from './types';
 
 export interface RecipeCardProps {
-  recipe: Recipe;
-  onSelect?: (recipe: Recipe) => void;
-  onToggleFavorite?: (recipe: Recipe) => void;
+	recipe: Recipe;
+	onSelect?: (recipe: Recipe) => void;
+	onToggleFavorite?: (recipe: Recipe) => void;
 }
 
 export function RecipeCard({
-  recipe,
-  onSelect,
-  onToggleFavorite,
+	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>
-  );
+	return (
+		<button
+			type="button"
+			onClick={() => onSelect?.(recipe)}
+			className="flex flex-col gap-3 rounded-2xl border border-border bg-card 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="h-40 rounded-t-2xl bg-muted" />
+			)}
+			<div className="space-y-2 p-4">
+				<div className="flex items-center justify-between">
+					<p className="font-semibold text-base">{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="line-clamp-2 text-muted-foreground text-sm">
+					{recipe.description}
+				</p>
+				<div className="flex flex-wrap gap-3 text-muted-foreground 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

@@ -3,53 +3,53 @@ import { BookOpen } from 'lucide-react';
 import { type Recipe } from './types';
 
 export interface RecipeDetailProps {
-  recipe?: Recipe;
+	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>
-    );
-  }
+	if (!recipe) {
+		return (
+			<div className="flex flex-1 items-center justify-center rounded-2xl border border-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>
+	return (
+		<article className="space-y-4 rounded-2xl border border-border bg-card p-6">
+			<header className="flex flex-wrap items-center gap-3">
+				<BookOpen className="h-5 w-5 text-muted-foreground" />
+				<div>
+					<h2 className="font-semibold text-xl">{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="font-semibold text-muted-foreground text-sm uppercase tracking-wide">
+					Ingredients
+				</h3>
+				<ul className="mt-2 list-disc space-y-1 pl-6 text-foreground 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>
-  );
+			<section>
+				<h3 className="font-semibold text-muted-foreground text-sm uppercase tracking-wide">
+					Instructions
+				</h3>
+				<ol className="mt-2 list-decimal space-y-2 pl-6 text-foreground text-sm">
+					{recipe.instructions.map((instruction) => (
+						<li key={instruction.id}>{instruction.content}</li>
+					))}
+				</ol>
+			</section>
+		</article>
+	);
 }

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

@@ -1,13 +1,12 @@
 'use client';
 
-import { useState } from 'react';
-import { useMutation, useQuery } from '@apollo/client/react';
 import { gql } from '@apollo/client';
-
+import { useMutation, useQuery } from '@apollo/client/react';
 import {
-  registerTemplateComponents,
-  useTemplateRuntime,
+	registerTemplateComponents,
+	useTemplateRuntime,
 } from '@contractspec/lib.example-shared-ui';
+import { useState } from 'react';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import { RecipeCard } from './RecipeCard';
 import { RecipeDetail } from './RecipeDetail';
@@ -54,70 +53,70 @@ const FAVORITE_RECIPE = gql`
 `;
 
 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 { 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 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,
-        },
-      },
-    });
-  };
+	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>
+	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="flex-1 rounded-full border border-border bg-card 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>
-      )}
+			{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>
-  );
+			<RecipeDetail recipe={selected} />
+		</div>
+	);
 }
 
 registerTemplateComponents('recipe-app-i18n', {
-  list: RecipeList,
-  detail: RecipeDetail,
+	list: RecipeList,
+	detail: RecipeDetail,
 });

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

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

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

@@ -1,26 +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;
-  }[];
+	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;
+	}[];
 }