@shotleybuilder/svelte-table-kit 0.1.0

package/dist/components/GroupBar.svelte

@@ -0,0 +1,283 @@
+<script>export let columns;
+export let grouping = [];
+export let onGroupingChange;
+const MAX_LEVELS = 3;
+let isExpanded = false;
+function addGroup() {
+  if (grouping.length >= MAX_LEVELS) return;
+  onGroupingChange([...grouping, ""]);
+  isExpanded = true;
+}
+function updateGroup(index, columnId) {
+  const newGrouping = [...grouping];
+  newGrouping[index] = columnId;
+  onGroupingChange(newGrouping);
+}
+function removeGroup(index) {
+  const newGrouping = grouping.filter((_, i) => i !== index);
+  onGroupingChange(newGrouping);
+  if (newGrouping.length === 0) {
+    isExpanded = false;
+  }
+}
+function clearAllGroups() {
+  onGroupingChange([]);
+  isExpanded = false;
+}
+$: availableColumns = columns.filter((col) => {
+  const columnId = col.accessorKey || col.id;
+  return columnId && col.enableGrouping !== false;
+});
+$: hasGroups = grouping.length > 0;
+$: validGroupCount = grouping.filter((g) => g !== "").length;
+$: canAddMore = grouping.length < MAX_LEVELS;
+</script>
+
+<div class="group-bar">
+	<!-- Compact Group Button -->
+	<button class="group-toggle-btn" on:click={() => (isExpanded = !isExpanded)}>
+		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M4 6h16M4 10h16M4 14h16M4 18h16"
+			/>
+		</svg>
+		Group
+		{#if validGroupCount > 0}
+			<span class="group-badge">{validGroupCount}</span>
+		{/if}
+		<svg
+			class="chevron"
+			class:expanded={isExpanded}
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+		</svg>
+	</button>
+
+	<!-- Expandable Group Panel -->
+	{#if isExpanded}
+		<div class="group-panel">
+			{#if hasGroups}
+				<div class="group-header">
+					<span class="group-label">Group by</span>
+					<button class="clear-all-btn" on:click={clearAllGroups}> Clear all </button>
+				</div>
+
+				<div class="group-levels">
+					{#each grouping as group, index (index)}
+						<div class="group-level">
+							<select
+								class="field-select"
+								value={group}
+								on:change={(e) => updateGroup(index, e.currentTarget.value)}
+							>
+								<option value="">Select field...</option>
+								{#each availableColumns as column}
+									{@const columnId = column.accessorKey || column.id}
+									<option value={columnId}>
+										{column.header || columnId}
+									</option>
+								{/each}
+							</select>
+							<button class="remove-btn" on:click={() => removeGroup(index)} title="Remove group">
+								<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+							</button>
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			{#if canAddMore}
+				<button class="add-group-btn" on:click={addGroup}>
+					<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+						/>
+					</svg>
+					{hasGroups ? 'Add subgroup' : 'Add group'}
+				</button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.group-bar {
+		position: relative;
+	}
+
+	/* Compact Group Toggle Button */
+	.group-toggle-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.group-toggle-btn:hover {
+		background: #f9fafb;
+		border-color: #9ca3af;
+	}
+
+	.group-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.25rem;
+		height: 1.25rem;
+		padding: 0 0.375rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: white;
+		background: #059669;
+		border-radius: 0.75rem;
+	}
+
+	.chevron {
+		width: 1rem;
+		height: 1rem;
+		transition: transform 0.2s;
+	}
+
+	.chevron.expanded {
+		transform: rotate(180deg);
+	}
+
+	/* Expandable Group Panel */
+	.group-panel {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 0;
+		z-index: 20;
+		min-width: 400px;
+		padding: 1rem;
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+	}
+
+	.group-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.75rem;
+	}
+
+	.group-label {
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: #374151;
+	}
+
+	.clear-all-btn {
+		font-size: 0.75rem;
+		color: #6b7280;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+	}
+
+	.clear-all-btn:hover {
+		color: #dc2626;
+		background: #fee2e2;
+	}
+
+	.group-levels {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.group-level {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		background: #f9fafb;
+		border-radius: 0.375rem;
+	}
+
+	.field-select {
+		flex: 1;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		background: white;
+	}
+
+	.field-select:focus {
+		outline: none;
+		border-color: #059669;
+		box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+	}
+
+	.remove-btn {
+		flex-shrink: 0;
+		padding: 0.375rem;
+		background: none;
+		border: none;
+		color: #6b7280;
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+	}
+
+	.remove-btn:hover {
+		background: #fee2e2;
+		color: #dc2626;
+	}
+
+	.add-group-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #059669;
+		background: white;
+		border: 1px dashed #059669;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.add-group-btn:hover {
+		background: #d1fae5;
+		border-style: solid;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>

package/dist/components/GroupBar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnDef } from '@tanstack/svelte-table';
+declare const __propDef: {
+    props: {
+        columns: ColumnDef<any>[];
+        grouping?: string[];
+        onGroupingChange: (grouping: string[]) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type GroupBarProps = typeof __propDef.props;
+export type GroupBarEvents = typeof __propDef.events;
+export type GroupBarSlots = typeof __propDef.slots;
+export default class GroupBar extends SvelteComponent<GroupBarProps, GroupBarEvents, GroupBarSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as TableKit } from './TableKit.svelte';
+export { default as FilterBar } from './components/FilterBar.svelte';
+export { default as FilterCondition } from './components/FilterCondition.svelte';
+export { default as GroupBar } from './components/GroupBar.svelte';
+export type { TableKitProps, TableConfig, ViewPreset, FilterCondition, FilterOperator, FilterLogic, SortConfig, ClassNameMap, TableFeatures, TableState } from './types';
+export { presets } from './presets';
+export { generateTableConfig, validateTableConfig, mergeConfigs } from './utils/config';
+export { createTextFilter, createSelectFilter, createNumericFilter, evaluateCondition, applyFilters } from './utils/filters';
+export { formatDate, formatCurrency, formatNumber, formatPercent } from './utils/formatters';

package/dist/index.js

@@ -0,0 +1,15 @@
+// Main exports for @sertantai/svelte-table-kit
+// Main component
+export { default as TableKit } from './TableKit.svelte';
+// Sub-components
+export { default as FilterBar } from './components/FilterBar.svelte';
+export { default as FilterCondition } from './components/FilterCondition.svelte';
+export { default as GroupBar } from './components/GroupBar.svelte';
+// Presets
+export { presets } from './presets';
+// Utilities for AI configuration
+export { generateTableConfig, validateTableConfig, mergeConfigs } from './utils/config';
+// Filter utilities
+export { createTextFilter, createSelectFilter, createNumericFilter, evaluateCondition, applyFilters } from './utils/filters';
+// Formatters
+export { formatDate, formatCurrency, formatNumber, formatPercent } from './utils/formatters';

package/dist/presets/index.d.ts

@@ -0,0 +1,6 @@
+import type { TableConfig } from '../types';
+export declare const presets: {
+    dashboard: TableConfig;
+    dataGrid: TableConfig;
+    readonly: TableConfig;
+};

package/dist/presets/index.js

@@ -0,0 +1,27 @@
+// Preset configurations for common use cases
+export const presets = {
+    dashboard: {
+        id: 'dashboard',
+        version: '1.0.0',
+        pagination: {
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50]
+        }
+    },
+    dataGrid: {
+        id: 'data-grid',
+        version: '1.0.0',
+        pagination: {
+            pageSize: 50,
+            pageSizeOptions: [25, 50, 100, 200]
+        }
+    },
+    readonly: {
+        id: 'readonly',
+        version: '1.0.0',
+        pagination: {
+            pageSize: 25,
+            pageSizeOptions: [25, 50, 100]
+        }
+    }
+};

package/dist/stores/persistence.d.ts

@@ -0,0 +1,58 @@
+import type { VisibilityState, ColumnSizingState, ColumnFiltersState, ColumnOrderState, SortingState, PaginationState } from '@tanstack/svelte-table';
+/**
+ * Check if we're in a browser environment
+ * Note: In SvelteKit apps, import from '$app/environment'
+ */
+export declare const isBrowser: boolean;
+/**
+ * Load column visibility state from localStorage
+ */
+export declare function loadColumnVisibility(storageKey: string): VisibilityState;
+/**
+ * Save column visibility state to localStorage
+ */
+export declare function saveColumnVisibility(storageKey: string, state: VisibilityState): void;
+/**
+ * Load column sizing state from localStorage
+ */
+export declare function loadColumnSizing(storageKey: string): ColumnSizingState;
+/**
+ * Save column sizing state to localStorage
+ */
+export declare function saveColumnSizing(storageKey: string, state: ColumnSizingState): void;
+/**
+ * Load column filters state from localStorage
+ */
+export declare function loadColumnFilters(storageKey: string): ColumnFiltersState;
+/**
+ * Save column filters state to localStorage
+ */
+export declare function saveColumnFilters(storageKey: string, state: ColumnFiltersState): void;
+/**
+ * Load column order state from localStorage
+ */
+export declare function loadColumnOrder(storageKey: string): ColumnOrderState;
+/**
+ * Save column order state to localStorage
+ */
+export declare function saveColumnOrder(storageKey: string, state: ColumnOrderState): void;
+/**
+ * Load sorting state from localStorage
+ */
+export declare function loadSorting(storageKey: string): SortingState;
+/**
+ * Save sorting state to localStorage
+ */
+export declare function saveSorting(storageKey: string, state: SortingState): void;
+/**
+ * Load pagination state from localStorage
+ */
+export declare function loadPagination(storageKey: string, defaultPageSize?: number): PaginationState;
+/**
+ * Save pagination state to localStorage
+ */
+export declare function savePagination(storageKey: string, state: PaginationState): void;
+/**
+ * Clear all table state from localStorage
+ */
+export declare function clearTableState(storageKey: string): void;

package/dist/stores/persistence.js

@@ -0,0 +1,127 @@
+// LocalStorage persistence utilities
+/**
+ * Check if we're in a browser environment
+ * Note: In SvelteKit apps, import from '$app/environment'
+ */
+export const isBrowser = typeof window !== 'undefined' && typeof localStorage !== 'undefined';
+/**
+ * Generic localStorage loader with error handling
+ */
+function loadFromStorage(key, defaultValue) {
+    if (!isBrowser)
+        return defaultValue;
+    try {
+        const saved = localStorage.getItem(key);
+        return saved ? JSON.parse(saved) : defaultValue;
+    }
+    catch (error) {
+        console.warn(`Failed to load ${key} from localStorage:`, error);
+        return defaultValue;
+    }
+}
+/**
+ * Generic localStorage saver with error handling
+ */
+function saveToStorage(key, value) {
+    if (!isBrowser)
+        return;
+    try {
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+    catch (error) {
+        console.error(`Failed to save ${key} to localStorage:`, error);
+    }
+}
+/**
+ * Load column visibility state from localStorage
+ */
+export function loadColumnVisibility(storageKey) {
+    return loadFromStorage(`${storageKey}_column_visibility`, {});
+}
+/**
+ * Save column visibility state to localStorage
+ */
+export function saveColumnVisibility(storageKey, state) {
+    saveToStorage(`${storageKey}_column_visibility`, state);
+}
+/**
+ * Load column sizing state from localStorage
+ */
+export function loadColumnSizing(storageKey) {
+    return loadFromStorage(`${storageKey}_column_sizing`, {});
+}
+/**
+ * Save column sizing state to localStorage
+ */
+export function saveColumnSizing(storageKey, state) {
+    saveToStorage(`${storageKey}_column_sizing`, state);
+}
+/**
+ * Load column filters state from localStorage
+ */
+export function loadColumnFilters(storageKey) {
+    return loadFromStorage(`${storageKey}_column_filters`, []);
+}
+/**
+ * Save column filters state to localStorage
+ */
+export function saveColumnFilters(storageKey, state) {
+    saveToStorage(`${storageKey}_column_filters`, state);
+}
+/**
+ * Load column order state from localStorage
+ */
+export function loadColumnOrder(storageKey) {
+    return loadFromStorage(`${storageKey}_column_order`, []);
+}
+/**
+ * Save column order state to localStorage
+ */
+export function saveColumnOrder(storageKey, state) {
+    saveToStorage(`${storageKey}_column_order`, state);
+}
+/**
+ * Load sorting state from localStorage
+ */
+export function loadSorting(storageKey) {
+    return loadFromStorage(`${storageKey}_sorting`, []);
+}
+/**
+ * Save sorting state to localStorage
+ */
+export function saveSorting(storageKey, state) {
+    saveToStorage(`${storageKey}_sorting`, state);
+}
+/**
+ * Load pagination state from localStorage
+ */
+export function loadPagination(storageKey, defaultPageSize = 10) {
+    return loadFromStorage(`${storageKey}_pagination`, {
+        pageIndex: 0,
+        pageSize: defaultPageSize
+    });
+}
+/**
+ * Save pagination state to localStorage
+ */
+export function savePagination(storageKey, state) {
+    saveToStorage(`${storageKey}_pagination`, state);
+}
+/**
+ * Clear all table state from localStorage
+ */
+export function clearTableState(storageKey) {
+    if (!isBrowser)
+        return;
+    try {
+        localStorage.removeItem(`${storageKey}_column_visibility`);
+        localStorage.removeItem(`${storageKey}_column_sizing`);
+        localStorage.removeItem(`${storageKey}_column_filters`);
+        localStorage.removeItem(`${storageKey}_column_order`);
+        localStorage.removeItem(`${storageKey}_sorting`);
+        localStorage.removeItem(`${storageKey}_pagination`);
+    }
+    catch (error) {
+        console.error('Failed to clear table state:', error);
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,85 @@
+import type { ColumnDef } from '@tanstack/svelte-table';
+export interface TableKitProps<T = any> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    config?: TableConfig;
+    features?: TableFeatures;
+    storageKey?: string;
+    persistState?: boolean;
+    theme?: 'light' | 'dark' | 'auto';
+    classNames?: Partial<ClassNameMap>;
+    onRowClick?: (row: T) => void;
+    onRowSelect?: (rows: T[]) => void;
+    onStateChange?: (state: TableState) => void;
+}
+export interface TableFeatures {
+    columnVisibility?: boolean;
+    columnResizing?: boolean;
+    columnReordering?: boolean;
+    filtering?: boolean;
+    sorting?: boolean;
+    pagination?: boolean;
+    rowSelection?: boolean;
+    grouping?: boolean;
+    columnPinning?: boolean;
+}
+export interface TableConfig {
+    id: string;
+    version: string;
+    defaultVisibleColumns?: string[];
+    defaultColumnOrder?: string[];
+    defaultColumnSizing?: Record<string, number>;
+    pinnedColumns?: {
+        left?: string[];
+        right?: string[];
+    };
+    defaultFilters?: FilterCondition[];
+    defaultSorting?: SortConfig[];
+    pagination?: {
+        pageSize: number;
+        pageSizeOptions?: number[];
+    };
+    presets?: ViewPreset[];
+}
+export interface ViewPreset {
+    id: string;
+    name: string;
+    description?: string;
+    config: Partial<TableConfig>;
+}
+export type FilterOperator = 'equals' | 'not_equals' | 'contains' | 'not_contains' | 'starts_with' | 'ends_with' | 'is_empty' | 'is_not_empty' | 'greater_than' | 'less_than' | 'greater_or_equal' | 'less_or_equal' | 'is_before' | 'is_after';
+export type FilterLogic = 'and' | 'or';
+export interface FilterCondition {
+    id: string;
+    field: string;
+    operator: FilterOperator;
+    value: any;
+}
+export interface SortConfig {
+    columnId: string;
+    direction: 'asc' | 'desc';
+}
+export interface ClassNameMap {
+    container: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tfoot: string;
+    tr: string;
+    th: string;
+    td: string;
+    pagination: string;
+    filterBar: string;
+    columnPicker: string;
+}
+export interface TableState {
+    columnVisibility: Record<string, boolean>;
+    columnOrder: string[];
+    columnSizing: Record<string, number>;
+    columnFilters: FilterCondition[];
+    sorting: SortConfig[];
+    pagination: {
+        pageIndex: number;
+        pageSize: number;
+    };
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+// TypeScript types for svelte-table-kit
+export {};

package/dist/utils/config.d.ts

@@ -0,0 +1,18 @@
+import type { TableConfig } from '../types';
+/**
+ * Generate table configuration from AI parameters
+ * This is a placeholder for AI integration
+ */
+export declare function generateTableConfig(params: {
+    query: string;
+    availableColumns: any[];
+    userData?: Record<string, any>;
+}): Partial<TableConfig>;
+/**
+ * Validate table configuration against schema
+ */
+export declare function validateTableConfig(config: Partial<TableConfig>): boolean;
+/**
+ * Merge multiple table configurations
+ */
+export declare function mergeConfigs(...configs: Partial<TableConfig>[]): TableConfig;

package/dist/utils/config.js

@@ -0,0 +1,32 @@
+// Utilities for AI configuration generation and validation
+/**
+ * Generate table configuration from AI parameters
+ * This is a placeholder for AI integration
+ */
+export function generateTableConfig(params) {
+    // TODO: Implement AI configuration generation
+    // This will be connected to Issue #4 (NL query AI agent)
+    console.log('Generating config for query:', params.query);
+    return {
+        id: 'ai-generated',
+        version: '1.0.0'
+    };
+}
+/**
+ * Validate table configuration against schema
+ */
+export function validateTableConfig(config) {
+    // TODO: Implement JSON schema validation
+    return !!config.id;
+}
+/**
+ * Merge multiple table configurations
+ */
+export function mergeConfigs(...configs) {
+    // TODO: Implement deep merge logic
+    return {
+        id: 'merged',
+        version: '1.0.0',
+        ...Object.assign({}, ...configs)
+    };
+}