@r2digisolutions/components 0.1.7 → 0.2.0

package/dist/components/molecules/FilterList/FilterListStory.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import FilterList from './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: 'text' },
+		{ id: 'status', label: 'Status', type: 'select', options: [{ value: 'active', label: 'Active' }] },
+		{ id: 'price', label: 'Price', type: 'number' }
+	];
+
+	let query = $state<AdvancedFilterGroup>(
+		queryStringToGroup('brand:nike AND status:active', fields)
+	);
+	let queryString = $state(groupToQueryString(query, fields));
+
+	function onSubmit(q: string) {
+		queryString = q;
+		query = queryStringToGroup(q, fields);
+	}
+</script>
+
+<div class="mx-auto flex w-full max-w-xl flex-col gap-3 p-4">
+	<QueryBar bind:value={queryString} {fields} onsubmit={onSubmit} />
+	<FilterList bind:query bind:queryString {fields} showQueryString />
+</div>

package/dist/components/molecules/FilterList/FilterListStory.svelte.d.ts

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

package/dist/components/molecules/MediaAssetBrowser/MediaAssetBrowser.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/MediaAssetBrowser/MediaAssetBrowser.stories.js

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

package/dist/components/molecules/MediaAssetBrowser/MediaAssetBrowser.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import FileUploader from '../../organisms/FileUploader/FileUploader.svelte';
+	import MediaAssetCard from '../MediaAssetCard/MediaAssetCard.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import {
+		createMediaAsset,
+		kindFromFile,
+		type MediaAsset,
+		type MediaAssetKind
+	} from '../../../utils/mediaTracks.js';
+
+	interface MediaAssetBrowserProps {
+		assets?: MediaAsset[];
+		selectedId?: string | null;
+		accept?: string;
+		helperText?: string;
+		allowText?: boolean;
+		class?: string;
+		onassetschange?: (assets: MediaAsset[]) => void;
+		onselect?: (id: string) => void;
+		onadd?: (asset: MediaAsset) => void;
+	}
+
+	let {
+		assets = $bindable<MediaAsset[]>([]),
+		selectedId = null,
+		accept = 'image/*,video/*,audio/*',
+		helperText = 'Images, video or audio',
+		allowText = false,
+		class: className = '',
+		onassetschange,
+		onselect,
+		onadd
+	}: MediaAssetBrowserProps = $props();
+
+	function emit(next: MediaAsset[]) {
+		assets = next;
+		onassetschange?.(next);
+	}
+
+	function handleFiles(files: File[]) {
+		const created: MediaAsset[] = [];
+		for (const file of files) {
+			const kind = kindFromFile(file);
+			if (kind === 'text') continue;
+			const asset = createMediaAsset({
+				kind,
+				name: file.name,
+				src: URL.createObjectURL(file)
+			});
+			created.push(asset);
+		}
+		if (created.length) emit([...assets, ...created]);
+	}
+
+	function addText() {
+		const asset = createMediaAsset({ kind: 'text' as MediaAssetKind, name: 'Text layer' });
+		onadd?.(asset);
+		emit([...assets, asset]);
+	}
+</script>
+
+<div class={['flex h-full min-h-0 flex-col gap-3 p-2', className]}>
+	<FileUploader
+		label="Upload"
+		{accept}
+		{helperText}
+		variant="multiple"
+		view="grid"
+		showViewToggle={false}
+		showFileList={false}
+		maxSizeMb={200}
+		onchange={handleFiles}
+	/>
+	{#if allowText}
+		<Button variant="secondary" size="sm" onclick={addText}>Add text</Button>
+	{/if}
+	<div class="min-h-0 flex-1 overflow-auto">
+		{#if assets.length === 0}
+			<p class="px-1 py-6 text-center text-xs text-muted">No assets yet</p>
+		{:else}
+			<div class="grid grid-cols-2 gap-2">
+				{#each assets as asset (asset.id)}
+					<MediaAssetCard
+						{asset}
+						selected={selectedId === asset.id}
+						onclick={() => onselect?.(asset.id)}
+						ondblclick={() => onselect?.(asset.id)}
+					/>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,15 @@
+import { type MediaAsset } from '../../../utils/mediaTracks.js';
+interface MediaAssetBrowserProps {
+    assets?: MediaAsset[];
+    selectedId?: string | null;
+    accept?: string;
+    helperText?: string;
+    allowText?: boolean;
+    class?: string;
+    onassetschange?: (assets: MediaAsset[]) => void;
+    onselect?: (id: string) => void;
+    onadd?: (asset: MediaAsset) => void;
+}
+declare const MediaAssetBrowser: import("svelte").Component<MediaAssetBrowserProps, {}, "assets">;
+type MediaAssetBrowser = ReturnType<typeof MediaAssetBrowser>;
+export default MediaAssetBrowser;

package/dist/components/molecules/MediaAssetBrowser/MediaAssetBrowserStory.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import MediaAssetBrowser from './MediaAssetBrowser.svelte';
+	import type { MediaAsset } from '../../../utils/mediaTracks.js';
+
+	let assets = $state<MediaAsset[]>([
+		{ id: 'a1', kind: 'image', name: 'Sample.jpg', src: 'https://picsum.photos/400/225' }
+	]);
+	let selectedId = $state<string | null>('a1');
+</script>
+
+<div class="h-[420px] w-80 rounded-lg border border-border bg-surface-elevated">
+	<MediaAssetBrowser
+		bind:assets
+		{selectedId}
+		allowText
+		onselect={(id) => (selectedId = id)}
+	/>
+</div>

package/dist/components/molecules/MediaAssetBrowser/MediaAssetBrowserStory.svelte.d.ts

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

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

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

package/dist/components/molecules/MediaAssetCard/MediaAssetCard.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import MediaKindIcon from '../../atoms/MediaKindIcon/MediaKindIcon.svelte';
+	import type { MediaAsset } from '../../../utils/mediaTracks.js';
+
+	interface MediaAssetCardProps {
+		asset: MediaAsset;
+		selected?: boolean;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		ondblclick?: (e: MouseEvent) => void;
+	}
+
+	let {
+		asset,
+		selected = false,
+		class: className = '',
+		onclick,
+		ondblclick
+	}: MediaAssetCardProps = $props();
+</script>
+
+<button
+	type="button"
+	class={[
+		'flex w-full flex-col overflow-hidden rounded-lg border text-left transition-colors',
+		selected
+			? 'border-brand-500 ring-2 ring-brand-500/30'
+			: 'border-border hover:border-border-strong hover:bg-surface-overlay/50',
+		'bg-surface-elevated',
+		className
+	]}
+	{onclick}
+	{ondblclick}
+>
+	<div class="relative aspect-video w-full bg-surface">
+		{#if asset.kind === 'image' && asset.src}
+			<img src={asset.src} alt="" class="h-full w-full object-cover" />
+		{:else if asset.kind === 'video' && asset.src}
+			<video src={asset.src} muted class="h-full w-full object-cover"></video>
+		{:else}
+			<div class="flex h-full items-center justify-center text-muted">
+				<MediaKindIcon kind={asset.kind} size="lg" />
+			</div>
+		{/if}
+	</div>
+	<div class="flex items-center gap-1.5 px-2 py-1.5">
+		<MediaKindIcon kind={asset.kind} size="sm" class="shrink-0 text-secondary" />
+		<span class="truncate text-xs font-medium text-primary">{asset.name}</span>
+	</div>
+</button>

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

@@ -0,0 +1,11 @@
+import type { MediaAsset } from '../../../utils/mediaTracks.js';
+interface MediaAssetCardProps {
+    asset: MediaAsset;
+    selected?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    ondblclick?: (e: MouseEvent) => void;
+}
+declare const MediaAssetCard: import("svelte").Component<MediaAssetCardProps, {}, "">;
+type MediaAssetCard = ReturnType<typeof MediaAssetCard>;
+export default MediaAssetCard;

package/dist/components/molecules/MediaAssetCard/MediaAssetCardStory.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import MediaAssetCard from './MediaAssetCard.svelte';
+</script>
+
+<div class="grid max-w-sm grid-cols-2 gap-2">
+	<MediaAssetCard
+		asset={{ id: '1', kind: 'image', name: 'Hero.jpg', src: 'https://picsum.photos/320/180' }}
+		selected
+	/>
+	<MediaAssetCard asset={{ id: '2', kind: 'audio', name: 'Take_01.wav' }} />
+	<MediaAssetCard asset={{ id: '3', kind: 'video', name: 'Broll.mp4' }} />
+	<MediaAssetCard asset={{ id: '4', kind: 'text', name: 'Title' }} />
+</div>

package/dist/components/molecules/MediaAssetCard/MediaAssetCardStory.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 MediaAssetCardStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MediaAssetCardStory = InstanceType<typeof MediaAssetCardStory>;
+export default MediaAssetCardStory;

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

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