@r2digisolutions/components 0.1.6 → 0.1.7

package/dist/components/organisms/ResourceStudio/fieldsToColumns.js

@@ -0,0 +1,20 @@
+/** Map ResourceField[] → DataGrid columns (skips hidden fields). */
+export function fieldsToColumns(fields) {
+    return fields
+        .filter((f) => !f.hidden)
+        .map((f) => ({
+        id: f.id,
+        header: f.label,
+        accessor: f.id,
+        sortable: true,
+        editable: !f.readonly,
+        align: f.type === 'number' ? 'right' : 'left',
+        meta: {
+            fieldType: f.type,
+            options: f.options,
+            relation: f.relation,
+            required: f.required,
+            ...f.meta
+        }
+    }));
+}

package/dist/components/organisms/ResourceStudio/fieldsToSchema.d.ts

@@ -0,0 +1,6 @@
+import type { SchemaField } from '../SchemaForm/SchemaForm.svelte';
+import type { ResourceField } from './types.js';
+/** Map ResourceField[] → SchemaForm fields (design-system controls). */
+export declare function fieldsToSchema(fields: ResourceField[], options?: {
+    mode?: 'create' | 'edit';
+}): SchemaField[];

package/dist/components/organisms/ResourceStudio/fieldsToSchema.js

@@ -0,0 +1,53 @@
+function mapFieldType(field) {
+    switch (field.type) {
+        case 'text':
+        case 'json':
+            return 'textarea';
+        case 'number':
+            return 'number';
+        case 'boolean':
+            return 'toggle';
+        case 'date':
+        case 'datetime':
+            return 'date';
+        case 'enum':
+            return 'select';
+        case 'string':
+        case 'relation':
+        case 'file':
+        case 'custom':
+        default:
+            return field.options?.length ? 'select' : 'text';
+    }
+}
+function coerceDefault(field) {
+    if (field.defaultValue === undefined)
+        return undefined;
+    if (field.type === 'boolean')
+        return Boolean(field.defaultValue);
+    if (field.type === 'number') {
+        const n = Number(field.defaultValue);
+        return Number.isFinite(n) ? n : undefined;
+    }
+    return String(field.defaultValue);
+}
+/** Map ResourceField[] → SchemaForm fields (design-system controls). */
+export function fieldsToSchema(fields, options) {
+    const mode = options?.mode ?? 'create';
+    return fields
+        .filter((f) => !f.hidden)
+        .filter((f) => mode === 'edit' || !f.readonly)
+        .map((f) => ({
+        name: f.id,
+        label: f.label,
+        type: mapFieldType(f),
+        required: f.required,
+        helperText: f.description,
+        options: f.options?.map((o) => ({ value: o.value, label: o.label })),
+        defaultValue: coerceDefault(f),
+        disabled: mode === 'edit' && Boolean(f.readonly),
+        placeholder: f.type === 'enum' || f.options?.length
+            ? `Select ${f.label.toLowerCase()}…`
+            : undefined
+    }));
+}

package/dist/components/organisms/ResourceStudio/types.d.ts

@@ -0,0 +1,69 @@
+import type { ConditionalFormatRule } from '../DataGrid/types.js';
+export type FieldType = 'string' | 'text' | 'number' | 'boolean' | 'date' | 'datetime' | 'enum' | 'json' | 'relation' | 'file' | 'custom';
+export interface ResourceField {
+    id: string;
+    label: string;
+    type: FieldType;
+    description?: string;
+    required?: boolean;
+    unique?: boolean;
+    readonly?: boolean;
+    hidden?: boolean;
+    defaultValue?: unknown;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    relation?: {
+        resourceId: string;
+        fieldId: string;
+        displayField?: string;
+    };
+    meta?: Record<string, unknown>;
+}
+export interface ResourceCapabilities {
+    create?: boolean;
+    update?: boolean;
+    delete?: boolean;
+    duplicate?: boolean;
+    export?: boolean;
+    import?: boolean;
+    bulkEdit?: boolean;
+    notes?: boolean;
+    conditionalFormat?: boolean;
+    editable?: boolean;
+}
+export interface ResourceDefinition {
+    id: string;
+    name: string;
+    description?: string;
+    group?: string;
+    icon?: string;
+    fields: ResourceField[];
+    primaryKey?: string;
+    recordCount?: number;
+    capabilities?: ResourceCapabilities;
+    defaultFormatRules?: ConditionalFormatRule[];
+}
+export type ResourceStudioMode = 'browse' | 'detail' | 'schema' | 'query' | 'activity';
+export type ResourceStudioLayout = 'sidebar-main' | 'sidebar-main-detail' | 'main-only';
+export interface ResourceStudioLabels {
+    resources?: string;
+    records?: string;
+    addRecord?: string;
+    schema?: string;
+    runQuery?: string;
+    searchPlaceholder?: string;
+    detail?: string;
+    activity?: string;
+    query?: string;
+}
+export interface ResourceStudioView {
+    id: string;
+    label: string;
+    resourceId?: string;
+    query?: string;
+    formatRuleIds?: string[];
+}
+export declare const DEFAULT_CAPABILITIES: Required<ResourceCapabilities>;
+export declare function resolveCapabilities(caps?: ResourceCapabilities): Required<ResourceCapabilities>;

package/dist/components/organisms/ResourceStudio/types.js

@@ -0,0 +1,15 @@
+export const DEFAULT_CAPABILITIES = {
+    create: true,
+    update: true,
+    delete: true,
+    duplicate: false,
+    export: true,
+    import: false,
+    bulkEdit: false,
+    notes: true,
+    conditionalFormat: true,
+    editable: true
+};
+export function resolveCapabilities(caps) {
+    return { ...DEFAULT_CAPABILITIES, ...caps };
+}

package/dist/components/organisms/Scheduler/Scheduler.svelte.d.ts

@@ -92,6 +92,6 @@ interface SchedulerProps {
     onconfirm?: (detail: ScheduleConfirmDetail) => void;
     onclear?: () => void;
 }
-declare const Scheduler: import("svelte").Component<SchedulerProps, {}, "start" | "end" | "date" | "duration" | "bookings" | "selectedSlotId" | "slotLayout">;
+declare const Scheduler: import("svelte").Component<SchedulerProps, {}, "date" | "start" | "end" | "duration" | "bookings" | "selectedSlotId" | "slotLayout">;
 type Scheduler = ReturnType<typeof Scheduler>;
 export default Scheduler;

package/dist/components/organisms/SchemaForm/SchemaForm.svelte

@@ -40,6 +40,7 @@
 		placeholder?: string;
 		helperText?: string;
 		required?: boolean;
+		disabled?: boolean;
 		options?: SchemaFieldOption[];
 		/** Group heading before this field */
 		section?: string;
@@ -151,6 +152,7 @@
 					placeholder={field.placeholder}
 					helperText={field.helperText}
 					required={field.required}
+					disabled={field.disabled}
 					bindData
 				/>
 			{:else if type === 'select'}
@@ -160,6 +162,7 @@
 					placeholder={field.placeholder ?? 'Select…'}
 					helperText={field.helperText}
 					required={field.required}
+					disabled={field.disabled}
 					options={field.options ?? []}
 					bindData
 				/>
@@ -168,6 +171,7 @@
 					name={field.name}
 					label={field.label}
 					helperText={field.helperText}
+					disabled={field.disabled}
 					bindData
 				/>
 			{:else if type === 'checkbox'}
@@ -175,6 +179,7 @@
 					name={field.name}
 					label={field.label}
 					helperText={field.helperText}
+					disabled={field.disabled}
 					bindData
 				/>
 			{:else if type === 'password'}
@@ -184,6 +189,7 @@
 					placeholder={field.placeholder}
 					helperText={field.helperText}
 					required={field.required}
+					disabled={field.disabled}
 					bindData
 				/>
 			{:else if type === 'date'}
@@ -191,7 +197,7 @@
 					<DatePicker
 						label={field.label}
 						placeholder={field.placeholder ?? 'Select date…'}
-						disabled={loading}
+						disabled={loading || field.disabled}
 						value={String(values[field.name] ?? '')}
 						onchange={(detail) => setValue(field.name, detail.value)}
 					/>
@@ -207,7 +213,7 @@
 					label={field.label}
 					options={field.options ?? []}
 					required={field.required}
-					disabled={loading}
+					disabled={loading || field.disabled}
 					status={fieldError ? 'error' : 'default'}
 					helperText={fieldError ?? field.helperText}
 					value={String(values[field.name] ?? '')}
@@ -219,7 +225,7 @@
 						label={field.label}
 						placeholder={field.placeholder ?? 'Select…'}
 						options={field.options ?? []}
-						disabled={loading}
+						disabled={loading || field.disabled}
 						value={Array.isArray(values[field.name]) ? (values[field.name] as string[]) : []}
 						onchange={(v) => setValue(field.name, v)}
 					/>
@@ -237,6 +243,7 @@
 					placeholder={field.placeholder}
 					helperText={field.helperText}
 					required={field.required}
+					disabled={field.disabled}
 					bindData
 				/>
 			{/if}

package/dist/components/organisms/SchemaForm/SchemaForm.svelte.d.ts

@@ -11,6 +11,7 @@ export interface SchemaField {
     placeholder?: string;
     helperText?: string;
     required?: boolean;
+    disabled?: boolean;
     options?: SchemaFieldOption[];
     /** Group heading before this field */
     section?: string;

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplate.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        example?: "sql" | "mainOnly" | "crud";
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        example: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        example: "crud";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CrudAdmin: Story;
+export declare const SqlBrowser: Story;
+export declare const MainOnly: Story;

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplate.stories.js

@@ -0,0 +1,18 @@
+import ResourceStudioTemplateStory from './ResourceStudioTemplateStory.svelte';
+const meta = {
+    title: 'Templates/ResourceStudioTemplate',
+    component: ResourceStudioTemplateStory,
+    tags: ['autodocs'],
+    argTypes: {
+        example: {
+            control: 'select',
+            options: ['crud', 'sql', 'mainOnly']
+        }
+    },
+    args: { example: 'crud' },
+    parameters: { layout: 'fullscreen' }
+};
+export default meta;
+export const CrudAdmin = {};
+export const SqlBrowser = { args: { example: 'sql' } };
+export const MainOnly = { args: { example: 'mainOnly' } };

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplate.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ResourceStudio from '../../organisms/ResourceStudio/ResourceStudio.svelte';
+	import type {
+		ResourceDefinition,
+		ResourceStudioLabels,
+		ResourceStudioLayout,
+		ResourceStudioMode,
+		ResourceStudioView
+	} from '../../organisms/ResourceStudio/types.js';
+	import type {
+		CellNote,
+		ConditionalFormatRule,
+		GridSelection
+	} from '../../organisms/DataGrid/types.js';
+	import { EMPTY_SELECTION } from '../../organisms/DataGrid/types.js';
+	import PageHeader from '../../molecules/PageHeader/PageHeader.svelte';
+
+	interface ResourceStudioTemplateProps {
+		title?: string;
+		description?: string;
+		resources?: ResourceDefinition[];
+		activeResourceId?: string;
+		records?: Record<string, unknown>[];
+		totalRecords?: number;
+		loading?: boolean;
+		page?: number;
+		pageSize?: number;
+		query?: string;
+		selection?: GridSelection;
+		notes?: CellNote[];
+		formatRules?: ConditionalFormatRule[];
+		modes?: ResourceStudioMode[];
+		activeMode?: ResourceStudioMode;
+		layout?: ResourceStudioLayout;
+		labels?: ResourceStudioLabels;
+		views?: ResourceStudioView[];
+		activeViewId?: string;
+		showHeader?: boolean;
+		class?: string;
+		headerActions?: Snippet;
+		toolbar?: Snippet;
+		sidebarItem?: Snippet<[ResourceDefinition, boolean]>;
+		sidebarFooter?: Snippet;
+		detail?: Snippet<[record: Record<string, unknown> | null]>;
+		schemaPanel?: Snippet<[ResourceDefinition]>;
+		queryPanel?: Snippet;
+		activityPanel?: Snippet;
+		recordForm?: Snippet<[mode: 'create' | 'edit', record: Record<string, unknown> | null]>;
+		empty?: Snippet;
+		dockExtra?: Snippet;
+		cell?: Snippet<[Record<string, unknown>, { id: string; header: string }]>;
+		onresourcechange?: (id: string) => void;
+		onsearch?: (q: string) => void;
+		onpagechange?: (page: number, pageSize: number) => void;
+		onsort?: (columnId: string, dir: 'asc' | 'desc') => void;
+		oncreate?: () => void;
+		oninsert?: (record: Record<string, unknown>) => void;
+		onupdate?: (id: string, patch: Record<string, unknown>) => void;
+		ondelete?: (ids: string[]) => void;
+		onduplicate?: (ids: string[]) => void;
+		onexport?: (ids: string[] | 'all') => void;
+		onimport?: (file: File) => void;
+		oncelledit?: (id: string, fieldId: string, value: unknown) => void;
+		onselectionchange?: (s: GridSelection) => void;
+		onnoteschange?: (notes: CellNote[]) => void;
+		onformatruleschange?: (rules: ConditionalFormatRule[]) => void;
+		onmodechange?: (mode: ResourceStudioMode) => void;
+		onviewchange?: (viewId: string) => void;
+		onrefresh?: () => void;
+	}
+
+	let {
+		title = 'Resource Studio',
+		description = 'Browse and edit collections with a moldable CRUD shell.',
+		resources = [],
+		activeResourceId = $bindable(''),
+		records = [],
+		totalRecords,
+		loading = false,
+		page = $bindable(1),
+		pageSize = 25,
+		query = $bindable(''),
+		selection = $bindable<GridSelection>(EMPTY_SELECTION),
+		notes = $bindable<CellNote[]>([]),
+		formatRules = $bindable<ConditionalFormatRule[]>([]),
+		modes,
+		activeMode = $bindable<ResourceStudioMode>('browse'),
+		layout = 'sidebar-main-detail',
+		labels,
+		views = [],
+		activeViewId = $bindable(''),
+		showHeader = true,
+		class: className = '',
+		headerActions,
+		toolbar,
+		sidebarItem,
+		sidebarFooter,
+		detail,
+		schemaPanel,
+		queryPanel,
+		activityPanel,
+		recordForm,
+		empty,
+		dockExtra,
+		cell,
+		onresourcechange,
+		onsearch,
+		onpagechange,
+		onsort,
+		oncreate,
+		oninsert,
+		onupdate,
+		ondelete,
+		onduplicate,
+		onexport,
+		onimport,
+		oncelledit,
+		onselectionchange,
+		onnoteschange,
+		onformatruleschange,
+		onmodechange,
+		onviewchange,
+		onrefresh
+	}: ResourceStudioTemplateProps = $props();
+</script>
+
+<div class={['flex h-svh min-h-0 w-full flex-col bg-surface', className]}>
+	{#if showHeader}
+		<div class="shrink-0 border-b border-border px-4 py-3 sm:px-6">
+			<PageHeader {title} {description}>
+				{#snippet actions()}
+					{#if headerActions}
+						{@render headerActions()}
+					{/if}
+				{/snippet}
+			</PageHeader>
+		</div>
+	{/if}
+
+	<div class="min-h-0 flex-1 p-3 sm:p-4">
+		<ResourceStudio
+			{resources}
+			bind:activeResourceId
+			{records}
+			{totalRecords}
+			{loading}
+			bind:page
+			{pageSize}
+			bind:query
+			bind:selection
+			bind:notes
+			bind:formatRules
+			{modes}
+			bind:activeMode
+			{layout}
+			{labels}
+			{views}
+			bind:activeViewId
+			class="h-full min-h-0"
+			{toolbar}
+			{sidebarItem}
+			{sidebarFooter}
+			{detail}
+			{schemaPanel}
+			{queryPanel}
+			{activityPanel}
+			{recordForm}
+			{empty}
+			{dockExtra}
+			{cell}
+			{onresourcechange}
+			{onsearch}
+			{onpagechange}
+			{onsort}
+			{oncreate}
+			{oninsert}
+			{onupdate}
+			{ondelete}
+			{onduplicate}
+			{onexport}
+			{onimport}
+			{oncelledit}
+			{onselectionchange}
+			{onnoteschange}
+			{onformatruleschange}
+			{onmodechange}
+			{onviewchange}
+			{onrefresh}
+		/>
+	</div>
+</div>

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplate.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { ResourceDefinition, ResourceStudioLabels, ResourceStudioLayout, ResourceStudioMode, ResourceStudioView } from '../../organisms/ResourceStudio/types.js';
+import type { CellNote, ConditionalFormatRule, GridSelection } from '../../organisms/DataGrid/types.js';
+interface ResourceStudioTemplateProps {
+    title?: string;
+    description?: string;
+    resources?: ResourceDefinition[];
+    activeResourceId?: string;
+    records?: Record<string, unknown>[];
+    totalRecords?: number;
+    loading?: boolean;
+    page?: number;
+    pageSize?: number;
+    query?: string;
+    selection?: GridSelection;
+    notes?: CellNote[];
+    formatRules?: ConditionalFormatRule[];
+    modes?: ResourceStudioMode[];
+    activeMode?: ResourceStudioMode;
+    layout?: ResourceStudioLayout;
+    labels?: ResourceStudioLabels;
+    views?: ResourceStudioView[];
+    activeViewId?: string;
+    showHeader?: boolean;
+    class?: string;
+    headerActions?: Snippet;
+    toolbar?: Snippet;
+    sidebarItem?: Snippet<[ResourceDefinition, boolean]>;
+    sidebarFooter?: Snippet;
+    detail?: Snippet<[record: Record<string, unknown> | null]>;
+    schemaPanel?: Snippet<[ResourceDefinition]>;
+    queryPanel?: Snippet;
+    activityPanel?: Snippet;
+    recordForm?: Snippet<[mode: 'create' | 'edit', record: Record<string, unknown> | null]>;
+    empty?: Snippet;
+    dockExtra?: Snippet;
+    cell?: Snippet<[Record<string, unknown>, {
+        id: string;
+        header: string;
+    }]>;
+    onresourcechange?: (id: string) => void;
+    onsearch?: (q: string) => void;
+    onpagechange?: (page: number, pageSize: number) => void;
+    onsort?: (columnId: string, dir: 'asc' | 'desc') => void;
+    oncreate?: () => void;
+    oninsert?: (record: Record<string, unknown>) => void;
+    onupdate?: (id: string, patch: Record<string, unknown>) => void;
+    ondelete?: (ids: string[]) => void;
+    onduplicate?: (ids: string[]) => void;
+    onexport?: (ids: string[] | 'all') => void;
+    onimport?: (file: File) => void;
+    oncelledit?: (id: string, fieldId: string, value: unknown) => void;
+    onselectionchange?: (s: GridSelection) => void;
+    onnoteschange?: (notes: CellNote[]) => void;
+    onformatruleschange?: (rules: ConditionalFormatRule[]) => void;
+    onmodechange?: (mode: ResourceStudioMode) => void;
+    onviewchange?: (viewId: string) => void;
+    onrefresh?: () => void;
+}
+declare const ResourceStudioTemplate: import("svelte").Component<ResourceStudioTemplateProps, {}, "query" | "page" | "notes" | "selection" | "formatRules" | "activeResourceId" | "activeMode" | "activeViewId">;
+type ResourceStudioTemplate = ReturnType<typeof ResourceStudioTemplate>;
+export default ResourceStudioTemplate;