@contractspec/bundle.library 3.7.5 → 3.7.7

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

@@ -1,97 +1,97 @@
-import { type TaskPriority, type TaskCategory } from './types';
+import { type TaskCategory, type TaskPriority } from './types';
 
 export interface FilterState {
-  status: 'all' | 'active' | 'completed';
-  priority: TaskPriority | 'all';
-  categoryId: string | 'all';
-  search: string;
+	status: 'all' | 'active' | 'completed';
+	priority: TaskPriority | 'all';
+	categoryId: string | 'all';
+	search: string;
 }
 
 export interface FilterBarProps {
-  value: FilterState;
-  onChange: (next: FilterState) => void;
-  categories: TaskCategory[];
+	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 });
-  };
+	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>
+	return (
+		<div className="grid gap-3 rounded-2xl border border-border bg-card p-4 md:grid-cols-4">
+			<label className="flex flex-col text-muted-foreground text-xs uppercase tracking-wide">
+				Status
+				<select
+					className="mt-1 rounded-md border border-border bg-background px-3 py-2 text-foreground 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="flex flex-col text-muted-foreground text-xs uppercase tracking-wide">
+				Priority
+				<select
+					className="mt-1 rounded-md border border-border bg-background px-3 py-2 text-foreground 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="flex flex-col text-muted-foreground text-xs uppercase tracking-wide">
+				Category
+				<select
+					className="mt-1 rounded-md border border-border bg-background px-3 py-2 text-foreground 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>
-  );
+			<label className="flex flex-col text-muted-foreground text-xs uppercase tracking-wide">
+				Search
+				<input
+					type="search"
+					className="mt-1 rounded-md border border-border bg-background px-3 py-2 text-foreground 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

@@ -1,10 +1,9 @@
 'use client';
 
-import { useState } from 'react';
-import { useMutation } from '@apollo/client/react';
 import { gql } from '@apollo/client';
-
+import { useMutation } from '@apollo/client/react';
 import { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';
+import { useState } from 'react';
 import { type TaskCategory, type TaskPriority } from './types';
 
 const CREATE_TASK = gql`
@@ -17,133 +16,133 @@ const CREATE_TASK = gql`
 `;
 
 export interface TaskFormProps {
-  categories: TaskCategory[];
+	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 { 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?.();
-  };
+	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>
+	return (
+		<form
+			onSubmit={handleSubmit}
+			className="space-y-3 rounded-2xl border border-border bg-background/60 p-4"
+		>
+			<div>
+				<label className="font-semibold text-muted-foreground text-xs uppercase">
+					Title
+					<input
+						type="text"
+						className="mt-1 w-full rounded-md border border-border bg-card 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>
+				<label className="font-semibold text-muted-foreground text-xs uppercase">
+					Description
+					<textarea
+						className="mt-1 w-full rounded-md border border-border bg-card 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>
+			<div className="grid gap-3 md:grid-cols-3">
+				<label className="font-semibold text-muted-foreground text-xs uppercase">
+					Priority
+					<select
+						className="mt-1 w-full rounded-md border border-border bg-card 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="font-semibold text-muted-foreground text-xs uppercase">
+					Category
+					<select
+						className="mt-1 w-full rounded-md border border-border bg-card 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>
+				<label className="font-semibold text-muted-foreground text-xs uppercase">
+					Tags
+					<input
+						className="mt-1 w-full rounded-md border border-border bg-card 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>
-  );
+			<button
+				type="submit"
+				className="btn-primary w-full py-2 font-semibold text-sm"
+				disabled={loading}
+			>
+				{loading ? 'Saving...' : 'Add task'}
+			</button>
+		</form>
+	);
 }
 
 function parseTags(input: string): string[] {
-  return input
-    .split(',')
-    .map((tag) => tag.trim())
-    .filter(Boolean);
+	return input
+		.split(',')
+		.map((tag) => tag.trim())
+		.filter(Boolean);
 }

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

@@ -3,90 +3,90 @@ 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;
+	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';
+	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>
+	return (
+		<div className="flex items-start gap-4 rounded-2xl border border-border/70 bg-card/60 p-4 transition hover:border-border">
+			<button
+				type="button"
+				className="rounded-full border border-border p-2 text-muted-foreground hover:bg-muted/40"
+				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>
+			<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="rounded-full bg-muted/40 px-2 py-0.5 text-muted-foreground 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.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>
+				{task.tags.length ? (
+					<div className="flex flex-wrap gap-1">
+						{task.tags.map((tag) => (
+							<span
+								key={tag}
+								className="rounded-full bg-muted/40 px-2 py-0.5 text-muted-foreground 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>
-  );
+			<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>
+	);
 }