@r2digisolutions/components 0.1.6 → 0.2.0

package/dist/components/molecules/ConditionalFormatPanel/ConditionalFormatPanel.svelte

@@ -0,0 +1,412 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import Badge from '../../atoms/Badge/Badge.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import Text from '../../atoms/Text/Text.svelte';
+	import Divider from '../../atoms/Divider/Divider.svelte';
+	import ColorSwatch from '../../atoms/ColorSwatch/ColorSwatch.svelte';
+	import Toggle from '../../atoms/Toggle/Toggle.svelte';
+	import Input from '../../atoms/Input/Input.svelte';
+	import Card from '../Card/Card.svelte';
+	import Select from '../Select/Select.svelte';
+	import ColorPicker from '../ColorPicker/ColorPicker.svelte';
+	import EmptyState from '../EmptyState/EmptyState.svelte';
+	import type {
+		ConditionalFormatRule,
+		FormatCondition,
+		FormatTarget
+	} from '../../organisms/DataGrid/types.js';
+	import ArrowUp from '@lucide/svelte/icons/arrow-up';
+	import ArrowDown from '@lucide/svelte/icons/arrow-down';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Palette from '@lucide/svelte/icons/palette';
+
+	interface ColumnOption {
+		id: string;
+		label: string;
+	}
+
+	interface ConditionalFormatPanelProps {
+		rules?: ConditionalFormatRule[];
+		columns?: ColumnOption[];
+		class?: string;
+		onchange?: (rules: ConditionalFormatRule[]) => void;
+	}
+
+	let {
+		rules = $bindable<ConditionalFormatRule[]>([]),
+		columns = [],
+		class: className = '',
+		onchange
+	}: ConditionalFormatPanelProps = $props();
+
+	let editingId = $state<string | null>(null);
+	let draftName = $state('');
+	let draftTarget = $state<string>('row');
+	let draftColumnId = $state('');
+	let draftOp = $state<string>('eq');
+	let draftValue = $state('');
+	let draftMin = $state('0');
+	let draftMax = $state('100');
+	let draftBg = $state('#fef3c7');
+	let draftFg = $state('#92400e');
+
+	const isEditing = $derived(editingId !== null);
+
+	const targetOptions = [
+		{ value: 'row', label: 'Entire row' },
+		{ value: 'cell', label: 'Cell only' }
+	];
+
+	const ops = [
+		{ value: 'eq', label: 'Equals' },
+		{ value: 'neq', label: 'Not equals' },
+		{ value: 'gt', label: 'Greater than' },
+		{ value: 'gte', label: '≥ Greater or equal' },
+		{ value: 'lt', label: 'Less than' },
+		{ value: 'lte', label: '≤ Less or equal' },
+		{ value: 'contains', label: 'Contains' },
+		{ value: 'startsWith', label: 'Starts with' },
+		{ value: 'empty', label: 'Is empty' },
+		{ value: 'notEmpty', label: 'Is not empty' },
+		{ value: 'between', label: 'Between' }
+	];
+
+	const columnOptions = $derived(columns.map((c) => ({ value: c.id, label: c.label })));
+
+	const formatSwatches = [
+		'#fef3c7',
+		'#92400e',
+		'#fee2e2',
+		'#991b1b',
+		'#dcfce7',
+		'#166534',
+		'#dbeafe',
+		'#1e40af',
+		'#f3e8ff',
+		'#6b21a8',
+		'#f1f5f9',
+		'#0f172a'
+	];
+
+	$effect(() => {
+		if (!draftColumnId && columns[0]) draftColumnId = columns[0].id;
+	});
+
+	function emit(next: ConditionalFormatRule[]) {
+		rules = next;
+		onchange?.(next);
+	}
+
+	function buildWhen(): FormatCondition | null {
+		const columnId = draftColumnId || columns[0]?.id;
+		if (!columnId) return null;
+		const op = draftOp as FormatCondition['op'];
+		if (op === 'empty' || op === 'notEmpty') return { op, columnId };
+		if (op === 'between') {
+			return { op: 'between', columnId, min: Number(draftMin), max: Number(draftMax) };
+		}
+		if (op === 'contains' || op === 'startsWith') {
+			return { op, columnId, value: draftValue };
+		}
+		const num = Number(draftValue);
+		const value =
+			draftValue !== '' && !Number.isNaN(num) && String(num) === draftValue.trim()
+				? num
+				: draftValue;
+		return { op: op as 'eq' | 'neq' | 'gt' | 'gte' | 'lt' | 'lte', columnId, value };
+	}
+
+	function resetDraft() {
+		editingId = null;
+		draftName = '';
+		draftTarget = 'row';
+		draftOp = 'eq';
+		draftValue = '';
+		draftMin = '0';
+		draftMax = '100';
+		draftBg = '#fef3c7';
+		draftFg = '#92400e';
+		draftColumnId = columns[0]?.id ?? '';
+	}
+
+	function loadRule(rule: ConditionalFormatRule) {
+		editingId = rule.id;
+		draftName = rule.name ?? '';
+		draftTarget = rule.target;
+		draftBg = rule.style.background ?? '#fef3c7';
+		draftFg = rule.style.color ?? '#92400e';
+		const w = rule.when;
+		draftColumnId = w.columnId;
+		draftOp = w.op;
+		draftValue = '';
+		draftMin = '0';
+		draftMax = '100';
+		if (w.op === 'between') {
+			draftMin = String(w.min);
+			draftMax = String(w.max);
+		} else if (w.op !== 'empty' && w.op !== 'notEmpty' && 'value' in w) {
+			draftValue = String(w.value);
+		}
+	}
+
+	function saveRule() {
+		const when = buildWhen();
+		if (!when) return;
+		const target = draftTarget as FormatTarget;
+		const style = { background: draftBg, color: draftFg };
+
+		if (editingId) {
+			emit(
+				rules.map((r) =>
+					r.id === editingId
+						? {
+								...r,
+								name: draftName || undefined,
+								target,
+								columnId: target === 'cell' ? when.columnId : undefined,
+								when,
+								style: { ...r.style, ...style }
+							}
+						: r
+				)
+			);
+			resetDraft();
+			return;
+		}
+
+		const maxPriority = rules.reduce((m, r) => Math.max(m, r.priority), 0);
+		const rule: ConditionalFormatRule = {
+			id: `rule-${Math.random().toString(36).slice(2, 9)}`,
+			name: draftName || undefined,
+			enabled: true,
+			target,
+			columnId: target === 'cell' ? when.columnId : undefined,
+			when,
+			style,
+			priority: maxPriority + 1
+		};
+		emit([...rules, rule]);
+		resetDraft();
+	}
+
+	function setEnabled(id: string, enabled: boolean) {
+		emit(rules.map((r) => (r.id === id ? { ...r, enabled } : r)));
+	}
+
+	function remove(id: string) {
+		if (editingId === id) resetDraft();
+		emit(rules.filter((r) => r.id !== id));
+	}
+
+	function move(id: string, dir: -1 | 1) {
+		const idx = rules.findIndex((r) => r.id === id);
+		if (idx < 0) return;
+		const next = [...rules];
+		const swap = idx + dir;
+		if (swap < 0 || swap >= next.length) return;
+		[next[idx], next[swap]] = [next[swap], next[idx]];
+		emit(next.map((r, i) => ({ ...r, priority: i + 1 })));
+	}
+
+	function describe(rule: ConditionalFormatRule): string {
+		const w = rule.when;
+		const col = columns.find((c) => c.id === w.columnId)?.label ?? w.columnId;
+		if (w.op === 'empty') return `${col} is empty`;
+		if (w.op === 'notEmpty') return `${col} is not empty`;
+		if (w.op === 'between') return `${col} between ${w.min}–${w.max}`;
+		if ('value' in w) return `${col} ${w.op} ${String(w.value)}`;
+		return `${col} ${w.op}`;
+	}
+</script>
+
+<Card variant="elevated" padding="md" class={className}>
+	{#snippet header()}
+		<div class="flex items-start justify-between gap-3">
+			<div class="min-w-0 space-y-0.5">
+				<p class="text-sm font-semibold text-primary">Conditional formatting</p>
+				<Text size="xs" tone="muted">Paint rows or cells when a condition matches.</Text>
+			</div>
+			<Badge variant="secondary">{rules.length}</Badge>
+		</div>
+	{/snippet}
+
+	<div class="space-y-3">
+		{#if rules.length === 0}
+			<EmptyState
+				title="No rules yet"
+				description="Add a rule below to highlight matching rows or cells."
+				class="!py-6"
+			>
+				{#snippet icon()}
+					<Palette class="h-6 w-6" strokeWidth={1.75} />
+				{/snippet}
+			</EmptyState>
+		{:else}
+			<ul class="divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface">
+				{#each rules as rule (rule.id)}
+					<li
+						class={[
+							'flex items-center gap-3 px-3 py-2.5 transition-opacity',
+							!rule.enabled && 'opacity-55',
+							editingId === rule.id && 'bg-brand-500/5'
+						]}
+					>
+						<span
+							class="h-10 w-1.5 shrink-0 rounded-full"
+							style={`background:${rule.style.background ?? '#94a3b8'}`}
+							aria-hidden="true"
+						></span>
+
+						<div class="min-w-0 flex-1">
+							<div class="flex flex-wrap items-center gap-2">
+								<span class="truncate text-sm font-medium text-primary">
+									{rule.name ?? describe(rule)}
+								</span>
+								<Badge size="sm" variant={rule.target === 'row' ? 'info' : 'primary'}>
+									{rule.target === 'row' ? 'Row' : 'Cell'}
+								</Badge>
+							</div>
+							<div class="mt-1 flex flex-wrap items-center gap-2">
+								<span
+									class="inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium"
+									style={`background-color:${rule.style.background ?? 'transparent'};color:${rule.style.color ?? 'inherit'};font-weight:${rule.style.fontWeight ?? 'medium'}`}
+								>
+									Aa preview
+								</span>
+								<Text as="span" size="xs" tone="muted">{describe(rule)}</Text>
+							</div>
+						</div>
+
+						<div class="flex shrink-0 items-center gap-1">
+							<Toggle
+								size="sm"
+								checked={rule.enabled}
+								label=""
+								onchange={(checked) => setEnabled(rule.id, checked)}
+							/>
+							<IconButton
+								size="xs"
+								variant="ghost"
+								label="Edit rule"
+								onclick={() => loadRule(rule)}
+							>
+								<Pencil class="h-3.5 w-3.5" strokeWidth={2} />
+							</IconButton>
+							<IconButton
+								size="xs"
+								variant="ghost"
+								label="Move up"
+								disabled={rules[0]?.id === rule.id}
+								onclick={() => move(rule.id, -1)}
+							>
+								<ArrowUp class="h-3.5 w-3.5" strokeWidth={2} />
+							</IconButton>
+							<IconButton
+								size="xs"
+								variant="ghost"
+								label="Move down"
+								disabled={rules.at(-1)?.id === rule.id}
+								onclick={() => move(rule.id, 1)}
+							>
+								<ArrowDown class="h-3.5 w-3.5" strokeWidth={2} />
+							</IconButton>
+							<IconButton
+								size="xs"
+								variant="ghost"
+								label="Delete rule"
+								onclick={() => remove(rule.id)}
+							>
+								<Trash2 class="h-3.5 w-3.5" strokeWidth={2} />
+							</IconButton>
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+
+	{#snippet footer()}
+		<div class="space-y-4">
+			<Divider label={isEditing ? 'Edit rule' : 'New rule'} />
+
+			<div class="grid gap-3 sm:grid-cols-2">
+				<Input
+					label="Name"
+					placeholder="Optional"
+					size="sm"
+					bind:value={draftName}
+				/>
+				<Select
+					label="Target"
+					size="sm"
+					options={targetOptions}
+					bind:value={draftTarget}
+				/>
+				<Select
+					label="Column"
+					size="sm"
+					options={columnOptions}
+					bind:value={draftColumnId}
+					placeholder="Select column"
+				/>
+				<Select
+					label="Operator"
+					size="sm"
+					options={ops}
+					bind:value={draftOp}
+				/>
+				{#if draftOp === 'between'}
+					<Input label="Min" size="sm" type="number" bind:value={draftMin} />
+					<Input label="Max" size="sm" type="number" bind:value={draftMax} />
+				{:else if draftOp !== 'empty' && draftOp !== 'notEmpty'}
+					<div class="sm:col-span-2">
+						<Input
+							label="Value"
+							size="sm"
+							placeholder="Compare value"
+							bind:value={draftValue}
+						/>
+					</div>
+				{/if}
+			</div>
+
+			<div class="grid gap-3 sm:grid-cols-2">
+				<ColorPicker
+					label="Background"
+					bind:value={draftBg}
+					swatches={formatSwatches}
+					format="hex"
+				/>
+				<ColorPicker
+					label="Text"
+					bind:value={draftFg}
+					swatches={formatSwatches}
+					format="hex"
+				/>
+			</div>
+
+			<div class="flex items-center justify-between gap-3">
+				<div class="flex items-center gap-2">
+					<ColorSwatch color={draftBg} size="sm" label="Background preview" />
+					<ColorSwatch color={draftFg} size="sm" label="Text preview" />
+					<span
+						class="rounded-md px-2 py-1 text-xs font-medium"
+						style={`background-color:${draftBg};color:${draftFg}`}
+					>
+						Preview
+					</span>
+				</div>
+				<div class="flex items-center gap-2">
+					{#if isEditing}
+						<Button size="sm" variant="ghost" onclick={resetDraft}>Cancel</Button>
+					{/if}
+					<Button size="sm" variant="primary" onclick={saveRule}>
+						{isEditing ? 'Update rule' : 'Add rule'}
+					</Button>
+				</div>
+			</div>
+		</div>
+	{/snippet}
+</Card>

package/dist/components/molecules/ConditionalFormatPanel/ConditionalFormatPanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ConditionalFormatRule } from '../../organisms/DataGrid/types.js';
+interface ColumnOption {
+    id: string;
+    label: string;
+}
+interface ConditionalFormatPanelProps {
+    rules?: ConditionalFormatRule[];
+    columns?: ColumnOption[];
+    class?: string;
+    onchange?: (rules: ConditionalFormatRule[]) => void;
+}
+declare const ConditionalFormatPanel: import("svelte").Component<ConditionalFormatPanelProps, {}, "rules">;
+type ConditionalFormatPanel = ReturnType<typeof ConditionalFormatPanel>;
+export default ConditionalFormatPanel;

package/dist/components/molecules/ConditionalFormatPanel/ConditionalFormatPanelStory.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ConditionalFormatPanel from './ConditionalFormatPanel.svelte';
+	import type { ConditionalFormatRule } from '../../organisms/DataGrid/types.js';
+
+	let rules = $state<ConditionalFormatRule[]>([
+		{
+			id: 'r1',
+			name: 'Overdue',
+			enabled: true,
+			target: 'row',
+			when: { op: 'eq', columnId: 'status', value: 'overdue' },
+			style: { background: '#fee2e2', color: '#991b1b' },
+			priority: 1
+		}
+	]);
+</script>
+
+<div class="max-w-lg">
+	<ConditionalFormatPanel
+		bind:rules
+		columns={[
+			{ id: 'status', label: 'Status' },
+			{ id: 'amount', label: 'Amount' },
+			{ id: 'name', label: 'Name' }
+		]}
+	/>
+</div>

package/dist/components/molecules/ConditionalFormatPanel/ConditionalFormatPanelStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ConditionalFormatPanelStory: import("svelte").Component<Record<string, never>, {}, "">;
+type ConditionalFormatPanelStory = ReturnType<typeof ConditionalFormatPanelStory>;
+export default ConditionalFormatPanelStory;

package/dist/components/molecules/ConflictResolver/ConflictResolver.stories.js

@@ -0,0 +1,8 @@
+import ConflictResolverStory from './ConflictResolverStory.svelte';
+const meta = {
+    title: 'Molecules/ConflictResolver',
+    component: ConflictResolverStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/ConflictResolver/ConflictResolver.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import DiffViewer from '../DiffViewer/DiffViewer.svelte';
+	import Textarea from '../../atoms/Textarea/Textarea.svelte';
+
+	export type ConflictResolution = 'mine' | 'theirs' | 'manual';
+
+	interface ConflictResolverProps {
+		mine?: string;
+		theirs?: string;
+		mineLabel?: string;
+		theirsLabel?: string;
+		title?: string;
+		class?: string;
+		onresolve?: (result: { resolution: ConflictResolution; value: string }) => void;
+	}
+
+	let {
+		mine = '',
+		theirs = '',
+		mineLabel = 'Yours',
+		theirsLabel = 'Theirs',
+		title = 'Resolve conflict',
+		class: className = '',
+		onresolve
+	}: ConflictResolverProps = $props();
+
+	let manual = $state(mine);
+	let mode = $state<'diff' | 'manual'>('diff');
+
+	function resolve(resolution: ConflictResolution) {
+		const value = resolution === 'mine' ? mine : resolution === 'theirs' ? theirs : manual;
+		onresolve?.({ resolution, value });
+	}
+</script>
+
+<div
+	class={['flex flex-col gap-3 rounded-xl border border-border bg-surface-elevated p-4', className]}
+	data-conflict-resolver
+>
+	<div class="flex flex-wrap items-center justify-between gap-2">
+		<div>
+			<h3 class="text-sm font-semibold text-primary">{title}</h3>
+			<p class="text-xs text-muted">Choose a side or edit a merged version.</p>
+		</div>
+		<div class="flex flex-wrap gap-2">
+			<Button size="sm" variant="secondary" onclick={() => resolve('mine')}>Keep mine</Button>
+			<Button size="sm" variant="secondary" onclick={() => resolve('theirs')}>Keep theirs</Button>
+			<Button
+				size="sm"
+				variant={mode === 'manual' ? 'primary' : 'ghost'}
+				onclick={() => (mode = mode === 'manual' ? 'diff' : 'manual')}
+			>
+				Manual merge
+			</Button>
+		</div>
+	</div>
+
+	{#if mode === 'diff'}
+		<DiffViewer
+			before={theirs}
+			after={mine}
+			beforeLabel={theirsLabel}
+			afterLabel={mineLabel}
+			mode="split"
+		/>
+	{:else}
+		<Textarea bind:value={manual} rows={12} class="font-mono text-xs" />
+		<div class="flex justify-end">
+			<Button size="sm" onclick={() => resolve('manual')}>Apply merge</Button>
+		</div>
+	{/if}
+</div>

package/dist/components/molecules/ConflictResolver/ConflictResolver.svelte.d.ts

@@ -0,0 +1,16 @@
+export type ConflictResolution = 'mine' | 'theirs' | 'manual';
+interface ConflictResolverProps {
+    mine?: string;
+    theirs?: string;
+    mineLabel?: string;
+    theirsLabel?: string;
+    title?: string;
+    class?: string;
+    onresolve?: (result: {
+        resolution: ConflictResolution;
+        value: string;
+    }) => void;
+}
+declare const ConflictResolver: import("svelte").Component<ConflictResolverProps, {}, "">;
+type ConflictResolver = ReturnType<typeof ConflictResolver>;
+export default ConflictResolver;

package/dist/components/molecules/ConflictResolver/ConflictResolverStory.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import ConflictResolver from './ConflictResolver.svelte';
+</script>
+
+<div class="p-4">
+	<ConflictResolver
+		mine={`export function greet() {\n  return 'hola';\n}`}
+		theirs={`export function greet() {\n  return 'hello';\n}`}
+		onresolve={(r) => console.log(r)}
+	/>
+</div>

package/dist/components/molecules/ConflictResolver/ConflictResolverStory.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ConflictResolverStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConflictResolverStory = InstanceType<typeof ConflictResolverStory>;
+export default ConflictResolverStory;