@r2digisolutions/components 0.1.6 → 0.2.0

package/dist/components/molecules/QueryBuilder/QueryBuilderStory.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import QueryBuilder from './QueryBuilder.svelte';
+	import FilterList from '../FilterList/FilterList.svelte';
+	import QueryBar from '../QueryBar/QueryBar.svelte';
+	import {
+		emptyFilterGroup,
+		type AdvancedFilterGroup,
+		type FilterFieldDef
+	} from '../../../utils/advancedFilters.js';
+	import { queryStringToGroup, groupToQueryString } from '../../../utils/queryBridge.js';
+
+	const fields: FilterFieldDef[] = [
+		{
+			id: 'brand',
+			label: 'Brand',
+			type: 'select',
+			options: [
+				{ value: 'nike', label: 'Nike' },
+				{ value: 'adidas', label: 'Adidas' }
+			]
+		},
+		{ id: 'price', label: 'Price', type: 'number' },
+		{
+			id: 'status',
+			label: 'Status',
+			type: 'select',
+			options: [
+				{ value: 'active', label: 'Active' },
+				{ value: 'draft', label: 'Draft' }
+			]
+		}
+	];
+
+	let query = $state<AdvancedFilterGroup>(emptyFilterGroup());
+	let queryString = $state('brand:nike AND price>=100');
+
+	$effect(() => {
+		query = queryStringToGroup(queryString, fields);
+	});
+
+	function onSubmit(q: string) {
+		queryString = q;
+		query = queryStringToGroup(q, fields);
+	}
+
+	function onQueryChange(next: AdvancedFilterGroup) {
+		query = next;
+		queryString = groupToQueryString(next, fields);
+	}
+</script>
+
+<div class="mx-auto flex w-full max-w-3xl flex-col gap-4 p-4">
+	<QueryBar bind:value={queryString} {fields} onsubmit={onSubmit} />
+	<FilterList
+		bind:query
+		bind:queryString
+		{fields}
+		showQueryString
+		onchange={onQueryChange}
+	/>
+	<QueryBuilder bind:query {fields} onchange={onQueryChange} />
+</div>

package/dist/components/molecules/QueryBuilder/QueryBuilderStory.svelte.d.ts

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

package/dist/components/molecules/RelationPicker/RelationPicker.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

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

package/dist/components/molecules/RelationPicker/RelationPicker.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import Input from '../../atoms/Input/Input.svelte';
+	import Chip from '../../atoms/Chip/Chip.svelte';
+	import EntityPreview from '../EntityPreview/EntityPreview.svelte';
+	import Spinner from '../../atoms/Spinner/Spinner.svelte';
+
+	export interface RelationOption {
+		id: string;
+		title: string;
+		subtitle?: string;
+		meta?: string;
+		image?: string;
+		kind?: string;
+	}
+
+	interface RelationPickerProps {
+		options?: RelationOption[];
+		value?: string | string[];
+		multiple?: boolean;
+		placeholder?: string;
+		loading?: boolean;
+		disabled?: boolean;
+		emptyLabel?: string;
+		class?: string;
+		onsearch?: (query: string) => void;
+		onchange?: (value: string | string[]) => void;
+		loadOptions?: (query: string) => Promise<RelationOption[]>;
+	}
+
+	let {
+		options = [],
+		value = $bindable<string | string[]>(''),
+		multiple = false,
+		placeholder = 'Search related records…',
+		loading = false,
+		disabled = false,
+		emptyLabel = 'No results',
+		class: className = '',
+		onsearch,
+		onchange,
+		loadOptions
+	}: RelationPickerProps = $props();
+
+	let query = $state('');
+	let open = $state(false);
+	let remote = $state<RelationOption[] | null>(null);
+	let busy = $state(false);
+
+	const selectedIds = $derived(
+		multiple
+			? Array.isArray(value)
+				? value
+				: value
+					? [value]
+					: []
+			: typeof value === 'string' && value
+				? [value]
+				: Array.isArray(value)
+					? value.slice(0, 1)
+					: []
+	);
+
+	const pool = $derived(remote ?? options);
+
+	const filtered = $derived.by(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return pool;
+		return pool.filter(
+			(o) =>
+				o.title.toLowerCase().includes(q) ||
+				o.subtitle?.toLowerCase().includes(q) ||
+				o.id.toLowerCase().includes(q)
+		);
+	});
+
+	const selectedOptions = $derived(
+		selectedIds
+			.map((id) => pool.find((o) => o.id === id) ?? options.find((o) => o.id === id))
+			.filter(Boolean) as RelationOption[]
+	);
+
+	let searchTimer: ReturnType<typeof setTimeout> | undefined;
+
+	async function runSearch(q: string) {
+		onsearch?.(q);
+		if (!loadOptions) {
+			remote = null;
+			return;
+		}
+		busy = true;
+		try {
+			remote = await loadOptions(q);
+		} finally {
+			busy = false;
+		}
+	}
+
+	function onQueryInput(e: Event) {
+		query = (e.currentTarget as HTMLInputElement).value;
+		open = true;
+		clearTimeout(searchTimer);
+		searchTimer = setTimeout(() => runSearch(query), 200);
+	}
+
+	function toggle(id: string) {
+		if (multiple) {
+			const set = new Set(selectedIds);
+			if (set.has(id)) set.delete(id);
+			else set.add(id);
+			value = [...set];
+		} else {
+			value = id;
+			open = false;
+			query = '';
+		}
+		onchange?.(value);
+	}
+
+	function remove(id: string) {
+		if (multiple) {
+			value = selectedIds.filter((x) => x !== id);
+		} else {
+			value = '';
+		}
+		onchange?.(value);
+	}
+</script>
+
+<div class={['relative flex flex-col gap-2', className]} data-relation-picker>
+	{#if selectedOptions.length}
+		<div class="flex flex-wrap gap-1.5">
+			{#each selectedOptions as opt (opt.id)}
+				<Chip size="sm" variant="primary" dismissible ondismiss={() => remove(opt.id)}>
+					{opt.title}
+				</Chip>
+			{/each}
+		</div>
+	{/if}
+
+	<Input
+		value={query}
+		{placeholder}
+		{disabled}
+		oninput={onQueryInput}
+		onfocus={() => (open = true)}
+	/>
+
+	{#if open && !disabled}
+		<div
+			class="absolute top-full z-20 mt-1 max-h-64 w-full overflow-auto rounded-xl border border-border bg-surface-elevated p-1 shadow-lg"
+			role="listbox"
+		>
+			{#if loading || busy}
+				<div class="flex items-center justify-center gap-2 px-3 py-6 text-sm text-muted">
+					<Spinner size="sm" /> Searching…
+				</div>
+			{:else if filtered.length === 0}
+				<p class="px-3 py-6 text-center text-sm text-muted">{emptyLabel}</p>
+			{:else}
+				{#each filtered as opt (opt.id)}
+					<button
+						type="button"
+						class="w-full rounded-lg p-1 text-left hover:bg-surface-overlay"
+						role="option"
+						aria-selected={selectedIds.includes(opt.id)}
+						onclick={() => toggle(opt.id)}
+					>
+						<EntityPreview
+							title={opt.title}
+							subtitle={opt.subtitle}
+							meta={opt.meta}
+							image={opt.image}
+							kind={opt.kind}
+						/>
+					</button>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,24 @@
+export interface RelationOption {
+    id: string;
+    title: string;
+    subtitle?: string;
+    meta?: string;
+    image?: string;
+    kind?: string;
+}
+interface RelationPickerProps {
+    options?: RelationOption[];
+    value?: string | string[];
+    multiple?: boolean;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    emptyLabel?: string;
+    class?: string;
+    onsearch?: (query: string) => void;
+    onchange?: (value: string | string[]) => void;
+    loadOptions?: (query: string) => Promise<RelationOption[]>;
+}
+declare const RelationPicker: import("svelte").Component<RelationPickerProps, {}, "value">;
+type RelationPicker = ReturnType<typeof RelationPicker>;
+export default RelationPicker;

package/dist/components/molecules/RelationPicker/RelationPickerStory.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import RelationPicker from './RelationPicker.svelte';
+	import type { RelationOption } from './RelationPicker.svelte';
+
+	const options: RelationOption[] = [
+		{ id: '1', title: 'Acme Corp', subtitle: 'Customer', kind: 'org' },
+		{ id: '2', title: 'Jane Doe', subtitle: 'jane@acme.com', kind: 'user' },
+		{ id: '3', title: 'Project Atlas', subtitle: 'Active', kind: 'project' }
+	];
+
+	let value = $state<string | string[]>('1');
+</script>
+
+<div class="mx-auto max-w-md p-6">
+	<RelationPicker bind:value {options} multiple={false} />
+</div>

package/dist/components/molecules/RelationPicker/RelationPickerStory.svelte.d.ts

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

package/dist/components/molecules/SchemaFieldBuilder/SchemaFieldBuilder.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

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

package/dist/components/molecules/SchemaFieldBuilder/SchemaFieldBuilder.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import Input from '../../atoms/Input/Input.svelte';
+	import Select from '../Select/Select.svelte';
+	import type { FieldType, ResourceField } from '../../organisms/ResourceStudio/types.js';
+
+	export type { ResourceField, FieldType };
+
+	const FIELD_TYPES: { value: FieldType; label: string }[] = [
+		{ value: 'string', label: 'String' },
+		{ value: 'text', label: 'Text' },
+		{ value: 'number', label: 'Number' },
+		{ value: 'boolean', label: 'Boolean' },
+		{ value: 'date', label: 'Date' },
+		{ value: 'datetime', label: 'DateTime' },
+		{ value: 'enum', label: 'Enum' },
+		{ value: 'json', label: 'JSON' },
+		{ value: 'relation', label: 'Relation' },
+		{ value: 'file', label: 'File' },
+		{ value: 'custom', label: 'Custom' }
+	];
+
+	interface SchemaFieldBuilderProps {
+		fields?: ResourceField[];
+		class?: string;
+		onchange?: (fields: ResourceField[]) => void;
+	}
+
+	let {
+		fields = $bindable<ResourceField[]>([]),
+		class: className = '',
+		onchange
+	}: SchemaFieldBuilderProps = $props();
+
+	function emit(next: ResourceField[]) {
+		fields = next;
+		onchange?.(next);
+	}
+
+	function addField() {
+		const id = `field_${fields.length + 1}`;
+		emit([
+			...fields,
+			{ id, label: `Field ${fields.length + 1}`, type: 'string', required: false }
+		]);
+	}
+
+	function update(id: string, patch: Partial<ResourceField>) {
+		emit(fields.map((f) => (f.id === id ? { ...f, ...patch } : f)));
+	}
+
+	function remove(id: string) {
+		emit(fields.filter((f) => f.id !== id));
+	}
+
+	function move(id: string, dir: -1 | 1) {
+		const idx = fields.findIndex((f) => f.id === id);
+		const nextIdx = idx + dir;
+		if (idx < 0 || nextIdx < 0 || nextIdx >= fields.length) return;
+		const next = [...fields];
+		const [item] = next.splice(idx, 1);
+		next.splice(nextIdx, 0, item);
+		emit(next);
+	}
+
+	function setOptions(id: string, raw: string) {
+		const options = raw
+			.split('\n')
+			.map((l) => l.trim())
+			.filter(Boolean)
+			.map((line) => {
+				const [value, label] = line.split('|');
+				return { value: value.trim(), label: (label ?? value).trim() };
+			});
+		update(id, { options });
+	}
+</script>
+
+<div
+	class={['flex flex-col gap-3 rounded-xl border border-border bg-surface-elevated p-4', className]}
+	data-schema-field-builder
+>
+	<div class="flex items-center justify-between gap-2">
+		<div>
+			<p class="text-sm font-semibold text-primary">Schema fields</p>
+			<p class="text-xs text-muted">{fields.length} fields</p>
+		</div>
+		<Button size="sm" onclick={addField}>Add field</Button>
+	</div>
+
+	{#if !fields.length}
+		<p class="rounded-lg border border-dashed border-border px-3 py-8 text-center text-sm text-muted">
+			No fields yet.
+		</p>
+	{:else}
+		<ul class="flex flex-col gap-2">
+			{#each fields as field, i (field.id)}
+				<li class="rounded-xl border border-border p-3">
+					<div class="mb-2 flex items-center justify-between gap-2">
+						<span class="font-mono text-[11px] text-muted">{field.id}</span>
+						<div class="flex gap-1">
+							<Button size="sm" variant="ghost" disabled={i === 0} onclick={() => move(field.id, -1)}>
+								↑
+							</Button>
+							<Button
+								size="sm"
+								variant="ghost"
+								disabled={i === fields.length - 1}
+								onclick={() => move(field.id, 1)}
+							>
+								↓
+							</Button>
+							<Button size="sm" variant="ghost" onclick={() => remove(field.id)}>Remove</Button>
+						</div>
+					</div>
+					<div class="grid gap-2 sm:grid-cols-2">
+						<Input
+							value={field.id}
+							placeholder="id"
+							oninput={(e) => update(field.id, { id: (e.currentTarget as HTMLInputElement).value })}
+						/>
+						<Input
+							value={field.label}
+							placeholder="Label"
+							oninput={(e) => update(field.id, { label: (e.currentTarget as HTMLInputElement).value })}
+						/>
+						<Select
+							value={field.type}
+							options={FIELD_TYPES}
+							onchange={(v) => update(field.id, { type: v as FieldType })}
+						/>
+						<label class="flex items-center gap-2 text-sm text-secondary">
+							<input
+								type="checkbox"
+								checked={!!field.required}
+								onchange={(e) =>
+									update(field.id, { required: (e.currentTarget as HTMLInputElement).checked })}
+							/>
+							Required
+						</label>
+						{#if field.type === 'enum'}
+							<textarea
+								class="col-span-full min-h-[72px] w-full rounded-lg border border-border bg-surface px-3 py-2 font-mono text-xs text-primary"
+								placeholder={'value|Label (one per line)'}
+								value={(field.options ?? []).map((o) => `${o.value}|${o.label}`).join('\n')}
+								oninput={(e) => setOptions(field.id, (e.currentTarget as HTMLTextAreaElement).value)}
+							></textarea>
+						{/if}
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

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

@@ -0,0 +1,12 @@
+import type { ResourceField } from '../../organisms/ResourceStudio/types.js';
+interface SchemaFieldBuilderProps {
+    fields?: ResourceField[];
+    class?: string;
+    onchange?: (fields: ResourceField[]) => void;
+}
+declare const SchemaFieldBuilder: import("svelte").Component<SchemaFieldBuilderProps, {
+    ResourceField: typeof ResourceField;
+    FieldType: typeof FieldType;
+}, "fields">;
+type SchemaFieldBuilder = ReturnType<typeof SchemaFieldBuilder>;
+export default SchemaFieldBuilder;

package/dist/components/molecules/SchemaFieldBuilder/SchemaFieldBuilderStory.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import SchemaFieldBuilder from './SchemaFieldBuilder.svelte';
+	import type { ResourceField } from '../../organisms/ResourceStudio/types.js';
+
+	let fields = $state<ResourceField[]>([
+		{ id: 'name', label: 'Name', type: 'string', required: true },
+		{ id: 'status', label: 'Status', type: 'enum', options: [
+			{ value: 'active', label: 'Active' },
+			{ value: 'draft', label: 'Draft' }
+		]}
+	]);
+</script>
+
+<div class="mx-auto max-w-xl p-4">
+	<SchemaFieldBuilder bind:fields />
+</div>

package/dist/components/molecules/SchemaFieldBuilder/SchemaFieldBuilderStory.svelte.d.ts

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

package/dist/components/molecules/SecretField/SecretField.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

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

package/dist/components/molecules/SecretField/SecretField.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Input from '../../atoms/Input/Input.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import CopyButton from '../CopyButton/CopyButton.svelte';
+
+	interface SecretFieldProps {
+		value?: string;
+		label?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		revealLabel?: string;
+		hideLabel?: string;
+		class?: string;
+		onchange?: (value: string) => void;
+		onreveal?: () => void;
+		oncopy?: () => void;
+	}
+
+	let {
+		value = $bindable(''),
+		label = 'Secret',
+		placeholder = '••••••••••••',
+		disabled = false,
+		revealLabel = 'Reveal',
+		hideLabel = 'Hide',
+		class: className = '',
+		onchange,
+		onreveal,
+		oncopy
+	}: SecretFieldProps = $props();
+
+	let revealed = $state(false);
+
+	function toggle() {
+		revealed = !revealed;
+		if (revealed) onreveal?.();
+	}
+</script>
+
+<div class={['flex flex-col gap-1.5', className]} data-secret-field>
+	{#if label}
+		<span class="text-xs font-medium text-secondary">{label}</span>
+	{/if}
+	<div class="flex items-center gap-2">
+		<Input
+			type={revealed ? 'text' : 'password'}
+			bind:value
+			{placeholder}
+			{disabled}
+			class="flex-1 font-mono"
+			oninput={(e) => onchange?.((e.currentTarget as HTMLInputElement).value)}
+		/>
+		<Button size="sm" variant="secondary" {disabled} onclick={toggle}>
+			{revealed ? hideLabel : revealLabel}
+		</Button>
+		<CopyButton {value} size="sm" oncopy={oncopy} />
+	</div>
+</div>

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

@@ -0,0 +1,15 @@
+interface SecretFieldProps {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    revealLabel?: string;
+    hideLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+    onreveal?: () => void;
+    oncopy?: () => void;
+}
+declare const SecretField: import("svelte").Component<SecretFieldProps, {}, "value">;
+type SecretField = ReturnType<typeof SecretField>;
+export default SecretField;

package/dist/components/molecules/SecretField/SecretFieldStory.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import SecretField from './SecretField.svelte';
+	let value = $state('sk_live_51Hx…demo');
+</script>
+
+<div class="mx-auto max-w-md p-4">
+	<SecretField bind:value label="API key" />
+</div>

package/dist/components/molecules/SecretField/SecretFieldStory.svelte.d.ts

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