@r2digisolutions/components 0.1.6 → 0.1.7

package/dist/components/organisms/DataGrid/cellEditors.d.ts

@@ -0,0 +1,8 @@
+import type { DataGridColumn, DataGridEditConfig } from './types.js';
+/** Infer a compact editor from the current cell value. */
+export declare function inferCellEditor(value: unknown): DataGridEditConfig;
+/** Prefer explicit `column.edit`, otherwise infer from value. */
+export declare function resolveCellEditor<T>(column: DataGridColumn<T>, value: unknown): DataGridEditConfig;
+/** Coerce editor draft → value typed for `oncelledit`. */
+export declare function coerceEditValue(editor: DataGridEditConfig, draft: string | number | boolean): string | number | boolean | null;
+export declare function draftFromValue(value: unknown, editor: DataGridEditConfig): string | boolean;

package/dist/components/organisms/DataGrid/cellEditors.js

@@ -0,0 +1,59 @@
+const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}(T|\s|$)/;
+/** Infer a compact editor from the current cell value. */
+export function inferCellEditor(value) {
+    if (typeof value === 'boolean')
+        return { type: 'boolean' };
+    if (typeof value === 'number' && !Number.isNaN(value))
+        return { type: 'number' };
+    if (value instanceof Date && !Number.isNaN(value.getTime()))
+        return { type: 'date' };
+    if (typeof value === 'string') {
+        if (ISO_DATE_RE.test(value))
+            return { type: 'date' };
+        if (value.length > 80 || value.includes('\n'))
+            return { type: 'textarea' };
+    }
+    return { type: 'text' };
+}
+/** Prefer explicit `column.edit`, otherwise infer from value. */
+export function resolveCellEditor(column, value) {
+    if (column.edit?.type) {
+        return {
+            ...column.edit,
+            options: column.edit.options ?? []
+        };
+    }
+    return inferCellEditor(value);
+}
+/** Coerce editor draft → value typed for `oncelledit`. */
+export function coerceEditValue(editor, draft) {
+    switch (editor.type) {
+        case 'boolean':
+            return Boolean(draft);
+        case 'number': {
+            if (draft === '' || draft == null)
+                return null;
+            const n = typeof draft === 'number' ? draft : Number(draft);
+            return Number.isFinite(n) ? n : null;
+        }
+        case 'date':
+        case 'select':
+        case 'textarea':
+        case 'text':
+        default:
+            return draft == null ? '' : String(draft);
+    }
+}
+export function draftFromValue(value, editor) {
+    if (editor.type === 'boolean')
+        return Boolean(value);
+    if (value == null)
+        return '';
+    if (value instanceof Date) {
+        return value.toISOString().slice(0, 10);
+    }
+    if (editor.type === 'date' && typeof value === 'string') {
+        return value.slice(0, 10);
+    }
+    return String(value);
+}

package/dist/components/organisms/DataGrid/conditionalFormat.d.ts

@@ -0,0 +1,11 @@
+import type { ConditionalFormatRule, ConditionalFormatStyle, FormatCondition } from './types.js';
+export declare function evaluateCondition(row: Record<string, unknown>, when: FormatCondition): boolean;
+export declare function styleToCss(style: ConditionalFormatStyle): string;
+/**
+ * Returns merged styles for a row and per-column cell overrides.
+ * Higher priority wins; among equals, later rules win.
+ */
+export declare function evaluateFormatRules(row: Record<string, unknown>, rules: ConditionalFormatRule[]): {
+    rowStyle: ConditionalFormatStyle;
+    cellStyles: Record<string, ConditionalFormatStyle>;
+};

package/dist/components/organisms/DataGrid/conditionalFormat.js

@@ -0,0 +1,98 @@
+function getPathValue(row, path) {
+    return path.split('.').reduce((acc, part) => {
+        if (acc && typeof acc === 'object' && part in acc) {
+            return acc[part];
+        }
+        return undefined;
+    }, row);
+}
+function toNumber(value) {
+    if (typeof value === 'number' && !Number.isNaN(value))
+        return value;
+    if (typeof value === 'string' && value.trim() !== '' && !Number.isNaN(Number(value))) {
+        return Number(value);
+    }
+    return null;
+}
+export function evaluateCondition(row, when) {
+    const raw = getPathValue(row, when.columnId);
+    switch (when.op) {
+        case 'empty':
+            return raw == null || raw === '';
+        case 'notEmpty':
+            return raw != null && raw !== '';
+        case 'eq':
+            return raw === when.value || String(raw) === String(when.value);
+        case 'neq':
+            return raw !== when.value && String(raw) !== String(when.value);
+        case 'contains':
+            return String(raw ?? '')
+                .toLowerCase()
+                .includes(String(when.value).toLowerCase());
+        case 'startsWith':
+            return String(raw ?? '')
+                .toLowerCase()
+                .startsWith(String(when.value).toLowerCase());
+        case 'gt':
+        case 'gte':
+        case 'lt':
+        case 'lte': {
+            const n = toNumber(raw);
+            const v = toNumber(when.value);
+            if (n == null || v == null)
+                return false;
+            if (when.op === 'gt')
+                return n > v;
+            if (when.op === 'gte')
+                return n >= v;
+            if (when.op === 'lt')
+                return n < v;
+            return n <= v;
+        }
+        case 'between': {
+            const n = toNumber(raw);
+            if (n == null)
+                return false;
+            return n >= when.min && n <= when.max;
+        }
+        default:
+            return false;
+    }
+}
+export function styleToCss(style) {
+    const parts = [];
+    if (style.background)
+        parts.push(`background-color:${style.background}`);
+    if (style.color)
+        parts.push(`color:${style.color}`);
+    if (style.fontWeight)
+        parts.push(`font-weight:${style.fontWeight}`);
+    if (style.border)
+        parts.push(`box-shadow:inset 0 0 0 1px ${style.border}`);
+    return parts.join(';');
+}
+/**
+ * Returns merged styles for a row and per-column cell overrides.
+ * Higher priority wins; among equals, later rules win.
+ */
+export function evaluateFormatRules(row, rules) {
+    const enabled = [...rules]
+        .filter((r) => r.enabled)
+        .sort((a, b) => a.priority - b.priority);
+    let rowStyle = {};
+    const cellStyles = {};
+    for (const rule of enabled) {
+        if (!evaluateCondition(row, rule.when))
+            continue;
+        if (rule.target === 'row') {
+            rowStyle = { ...rowStyle, ...rule.style };
+        }
+        else if (rule.columnId) {
+            cellStyles[rule.columnId] = {
+                ...(cellStyles[rule.columnId] ?? {}),
+                ...rule.style
+            };
+        }
+    }
+    return { rowStyle, cellStyles };
+}

package/dist/components/organisms/DataGrid/filterRows.d.ts

@@ -0,0 +1,5 @@
+import type { DataGridColumn, DataGridFilter } from './types.js';
+export declare function cellText(row: Record<string, unknown>, column: DataGridColumn): string;
+/** Client-side search + equality/contains filters. */
+export declare function filterRows<T extends Record<string, unknown>>(rows: T[], columns: DataGridColumn<T>[], query: string, filters: DataGridFilter[]): T[];
+export declare function uniqueColumnValues<T extends Record<string, unknown>>(rows: T[], column: DataGridColumn<T>, limit?: number): string[];

package/dist/components/organisms/DataGrid/filterRows.js

@@ -0,0 +1,60 @@
+function getByPath(row, path) {
+    return path.split('.').reduce((acc, part) => {
+        if (acc && typeof acc === 'object' && part in acc) {
+            return acc[part];
+        }
+        return undefined;
+    }, row);
+}
+export function cellText(row, column) {
+    const key = String(column.accessor ?? column.id);
+    const value = getByPath(row, key);
+    if (value == null)
+        return '';
+    if (typeof value === 'boolean')
+        return value ? 'Yes' : 'No';
+    return String(value);
+}
+/** Client-side search + equality/contains filters. */
+export function filterRows(rows, columns, query, filters) {
+    const q = query.trim().toLowerCase();
+    return rows.filter((row) => {
+        const record = row;
+        if (q) {
+            const hit = columns.some((col) => cellText(record, col).toLowerCase().includes(q));
+            if (!hit)
+                return false;
+        }
+        for (const f of filters) {
+            const col = columns.find((c) => c.id === f.columnId);
+            if (!col)
+                continue;
+            const text = cellText(record, col).toLowerCase();
+            const needle = f.value.trim().toLowerCase();
+            if (!needle)
+                continue;
+            if (f.op === 'eq') {
+                if (text !== needle)
+                    return false;
+            }
+            else if (!text.includes(needle)) {
+                return false;
+            }
+        }
+        return true;
+    });
+}
+export function uniqueColumnValues(rows, column, limit = 24) {
+    const seen = new Set();
+    const out = [];
+    for (const row of rows) {
+        const text = cellText(row, column);
+        if (!text || seen.has(text))
+            continue;
+        seen.add(text);
+        out.push(text);
+        if (out.length >= limit)
+            break;
+    }
+    return out.sort((a, b) => a.localeCompare(b));
+}

package/dist/components/organisms/DataGrid/marks.d.ts

@@ -0,0 +1,9 @@
+import type { MarkColor, MarkPreset } from './types.js';
+export declare const MARK_COLORS: MarkPreset[];
+export declare const MARK_TINT: Record<MarkPreset, string>;
+export declare const MARK_SWATCH: Record<MarkPreset, string>;
+export declare function isMarkPreset(color: string): color is MarkPreset;
+/** Resolve a mark color (preset name or custom CSS color) to a soft background tint. */
+export declare function markTint(color: MarkColor): string;
+/** Resolve a mark color to a solid swatch for the picker UI. */
+export declare function markSwatch(color: MarkColor): string;

package/dist/components/organisms/DataGrid/marks.js

@@ -0,0 +1,91 @@
+export const MARK_COLORS = [
+    'amber',
+    'rose',
+    'sky',
+    'emerald',
+    'violet',
+    'orange',
+    'lime',
+    'cyan',
+    'fuchsia',
+    'slate',
+    'pink',
+    'indigo'
+];
+export const MARK_TINT = {
+    amber: 'rgba(245, 158, 11, 0.18)',
+    rose: 'rgba(244, 63, 94, 0.16)',
+    sky: 'rgba(14, 165, 233, 0.16)',
+    emerald: 'rgba(16, 185, 129, 0.16)',
+    violet: 'rgba(139, 92, 246, 0.16)',
+    orange: 'rgba(249, 115, 22, 0.18)',
+    lime: 'rgba(132, 204, 22, 0.18)',
+    cyan: 'rgba(6, 182, 212, 0.16)',
+    fuchsia: 'rgba(217, 70, 239, 0.16)',
+    slate: 'rgba(100, 116, 139, 0.2)',
+    pink: 'rgba(236, 72, 153, 0.16)',
+    indigo: 'rgba(99, 102, 241, 0.16)'
+};
+export const MARK_SWATCH = {
+    amber: '#f59e0b',
+    rose: '#f43f5e',
+    sky: '#0ea5e9',
+    emerald: '#10b981',
+    violet: '#8b5cf6',
+    orange: '#f97316',
+    lime: '#84cc16',
+    cyan: '#06b6d4',
+    fuchsia: '#d946ef',
+    slate: '#64748b',
+    pink: '#ec4899',
+    indigo: '#6366f1'
+};
+const PRESET_SET = new Set(MARK_COLORS);
+export function isMarkPreset(color) {
+    return PRESET_SET.has(color);
+}
+/** Resolve a mark color (preset name or custom CSS color) to a soft background tint. */
+export function markTint(color) {
+    if (isMarkPreset(color))
+        return MARK_TINT[color];
+    const rgb = parseCssColor(color);
+    if (!rgb)
+        return color;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.18)`;
+}
+/** Resolve a mark color to a solid swatch for the picker UI. */
+export function markSwatch(color) {
+    if (isMarkPreset(color))
+        return MARK_SWATCH[color];
+    return color;
+}
+function parseCssColor(input) {
+    const s = input.trim();
+    if (!s)
+        return null;
+    if (s.startsWith('#')) {
+        const hex = s.slice(1);
+        if (hex.length === 3) {
+            const r = parseInt(hex[0] + hex[0], 16);
+            const g = parseInt(hex[1] + hex[1], 16);
+            const b = parseInt(hex[2] + hex[2], 16);
+            if ([r, g, b].some((n) => Number.isNaN(n)))
+                return null;
+            return { r, g, b };
+        }
+        if (hex.length === 6 || hex.length === 8) {
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            if ([r, g, b].some((n) => Number.isNaN(n)))
+                return null;
+            return { r, g, b };
+        }
+        return null;
+    }
+    const rgb = s.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*[\d.]+\s*)?\)$/i);
+    if (rgb) {
+        return { r: Number(rgb[1]), g: Number(rgb[2]), b: Number(rgb[3]) };
+    }
+    return null;
+}

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

@@ -0,0 +1,126 @@
+export interface DataGridColumn<Row = Record<string, unknown>> {
+    id: string;
+    header: string;
+    /** Dot-path key on the row, or custom render via `cell` snippet. */
+    accessor?: keyof Row | string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    width?: string;
+    minWidth?: string;
+    pinned?: boolean;
+    hidden?: boolean;
+    /**
+     * Auto-hide this column below the breakpoint (still available in row collapse
+     * and non-table view modes as secondary fields).
+     */
+    hideBelow?: Breakpoint;
+    /** Include in FilterBar quick-filter dropdown. */
+    filterable?: boolean;
+    editable?: boolean;
+    /** Typed inline editor. When omitted, inferred from the cell value. */
+    edit?: DataGridEditConfig;
+    class?: string;
+    /** Free-form metadata for consumers / ResourceStudio */
+    meta?: Record<string, unknown>;
+}
+export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+export type DataGridViewMode = 'table' | 'list' | 'card' | 'grid';
+export interface DataGridFilter {
+    id: string;
+    columnId: string;
+    value: string;
+    /** Default `contains`. */
+    op?: 'contains' | 'eq';
+    label?: string;
+}
+export type DataGridEditType = 'text' | 'number' | 'textarea' | 'boolean' | 'select' | 'date';
+export interface DataGridEditOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface DataGridEditConfig {
+    type: DataGridEditType;
+    /** For `select` */
+    options?: DataGridEditOption[];
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export interface CellRef {
+    rowId: string;
+    columnId: string;
+}
+export type GridSelection = {
+    type: 'none';
+} | {
+    type: 'rows';
+    ids: string[];
+} | {
+    type: 'columns';
+    ids: string[];
+} | {
+    type: 'cells';
+    cells: CellRef[];
+};
+export interface CellNote {
+    rowId: string;
+    columnId: string;
+    text: string;
+    author?: string;
+    updatedAt?: string;
+}
+export type MarkPreset = 'amber' | 'rose' | 'sky' | 'emerald' | 'violet' | 'orange' | 'lime' | 'cyan' | 'fuchsia' | 'slate' | 'pink' | 'indigo';
+/** Named preset or any CSS color string (e.g. `#ff5500`). */
+export type MarkColor = MarkPreset | (string & {});
+export interface GridMark {
+    rowId: string;
+    /** Present = cell mark; absent = whole-row mark */
+    columnId?: string;
+    color: MarkColor;
+}
+export type FormatTarget = 'row' | 'cell';
+export type FormatCondition = {
+    op: 'eq' | 'neq' | 'gt' | 'gte' | 'lt' | 'lte';
+    columnId: string;
+    value: string | number | boolean;
+} | {
+    op: 'contains' | 'startsWith';
+    columnId: string;
+    value: string;
+} | {
+    op: 'empty' | 'notEmpty';
+    columnId: string;
+} | {
+    op: 'between';
+    columnId: string;
+    min: number;
+    max: number;
+};
+export interface ConditionalFormatStyle {
+    background?: string;
+    color?: string;
+    fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    border?: string;
+}
+export interface ConditionalFormatRule {
+    id: string;
+    name?: string;
+    enabled: boolean;
+    target: FormatTarget;
+    /** Required when target === 'cell' */
+    columnId?: string;
+    when: FormatCondition;
+    style: ConditionalFormatStyle;
+    priority: number;
+}
+export type SortDir = 'asc' | 'desc' | null;
+export declare const EMPTY_SELECTION: GridSelection;
+export declare function noteKey(rowId: string, columnId: string): string;
+export declare function markKey(rowId: string, columnId?: string): string;
+export declare function selectionCount(selection: GridSelection): number;
+export declare function selectionLabel(selection: GridSelection): {
+    itemLabel: string;
+    itemLabelPlural: string;
+};

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

@@ -0,0 +1,21 @@
+export const EMPTY_SELECTION = { type: 'none' };
+export function noteKey(rowId, columnId) {
+    return `${rowId}::${columnId}`;
+}
+export function markKey(rowId, columnId) {
+    return columnId ? `${rowId}::${columnId}` : `${rowId}::*`;
+}
+export function selectionCount(selection) {
+    if (selection.type === 'none')
+        return 0;
+    if (selection.type === 'rows' || selection.type === 'columns')
+        return selection.ids.length;
+    return selection.cells.length;
+}
+export function selectionLabel(selection) {
+    if (selection.type === 'columns')
+        return { itemLabel: 'column', itemLabelPlural: 'columns' };
+    if (selection.type === 'cells')
+        return { itemLabel: 'cell', itemLabelPlural: 'cells' };
+    return { itemLabel: 'row', itemLabelPlural: 'rows' };
+}

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

@@ -0,0 +1,33 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        example?: "loading" | "readOnly" | "empty" | "permissions" | "crudAdmin" | "cms" | "sqlBrowser" | "customQuery" | "notesAndRules" | "bulkWorkflow" | "mainOnly";
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        example: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        example: "crudAdmin";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CrudAdmin: Story;
+export declare const CmsCollections: Story;
+export declare const ReadOnlyCatalog: Story;
+export declare const SqlBrowser: Story;
+export declare const CustomQuerySlot: Story;
+export declare const WithNotesAndRules: Story;
+export declare const BulkWorkflow: Story;
+export declare const EmptyAndLoading: Story;
+export declare const Loading: Story;
+export declare const MainOnly: Story;
+export declare const PermissionsGated: Story;

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

@@ -0,0 +1,56 @@
+import ResourceStudioStory from './ResourceStudioStory.svelte';
+const meta = {
+    title: 'Organisms/ResourceStudio',
+    component: ResourceStudioStory,
+    tags: ['autodocs'],
+    argTypes: {
+        example: {
+            control: 'select',
+            options: [
+                'crudAdmin',
+                'cms',
+                'readOnly',
+                'sqlBrowser',
+                'customQuery',
+                'notesAndRules',
+                'bulkWorkflow',
+                'empty',
+                'loading',
+                'mainOnly',
+                'permissions'
+            ]
+        }
+    },
+    args: { example: 'crudAdmin' },
+    parameters: { layout: 'fullscreen' }
+};
+export default meta;
+export const CrudAdmin = {};
+export const CmsCollections = { args: { example: 'cms' } };
+export const ReadOnlyCatalog = { args: { example: 'readOnly' } };
+export const SqlBrowser = { args: { example: 'sqlBrowser' } };
+export const CustomQuerySlot = { args: { example: 'customQuery' } };
+export const WithNotesAndRules = {
+    args: { example: 'notesAndRules' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Orders with cell notes, row/cell conditional format rules, and the Rules panel open from the toolbar.'
+            }
+        }
+    }
+};
+export const BulkWorkflow = {
+    args: { example: 'bulkWorkflow' },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Ops queue: rows pre-selected, dock shows Approve / Reject / Assign, plus an Activity tab for the workflow.'
+            }
+        }
+    }
+};
+export const EmptyAndLoading = { args: { example: 'empty' } };
+export const Loading = { args: { example: 'loading' } };
+export const MainOnly = { args: { example: 'mainOnly' } };
+export const PermissionsGated = { args: { example: 'permissions' } };