@lad-sapienza/scms-core 0.1.0-alpha.0

package/components/DataTb/index.ts

@@ -0,0 +1,36 @@
+/**
+ * DataTb Component Exports
+ * 
+ * Exports the MDX-safe wrapper by default for better compatibility
+ * with Astro MDX files
+ */
+
+export { DataTb } from './DataTbMdx';
+
+// Source components
+export {
+  CsvSource,
+  JsonSource,
+  DirectusSource,
+  ApiSource,
+} from './sources';
+
+// Types
+export type {
+  DataRow,
+  ColumnConfig,
+  PaginationConfig,
+  DataTbProps,
+  CsvSourceConfig,
+  JsonSourceConfig,
+  DirectusSourceConfig,
+  ApiSourceConfig,
+  SourceConfig,
+} from './types';
+
+export type {
+  CsvSourceProps,
+  JsonSourceProps,
+  DirectusSourceProps,
+  ApiSourceProps,
+} from './sources';

package/components/DataTb/sources/ApiSource.tsx

@@ -0,0 +1,89 @@
+/**
+ * ApiSource Component
+ * 
+ * Loads data from any API endpoint with custom transformation
+ */
+
+import { useEffect } from 'react';
+import type { DataRow, SourceComponentProps } from '../types';
+
+export interface ApiSourceProps extends SourceComponentProps {
+  /** API endpoint URL */
+  url: string;
+  
+  /** HTTP method (default: GET) */
+  method?: 'GET' | 'POST';
+  
+  /** Request headers */
+  headers?: Record<string, string>;
+  
+  /** Request body (for POST) */
+  body?: any;
+  
+  /** Transform response to data rows */
+  transformer?: (data: any) => DataRow[];
+}
+
+export function ApiSource({
+  url,
+  method = 'GET',
+  headers,
+  body,
+  transformer,
+  onDataLoad,
+  onLoadingChange,
+  onError,
+}: ApiSourceProps) {
+  useEffect(() => {
+    const loadApiData = async () => {
+      try {
+        onLoadingChange?.(true);
+        
+        const options: RequestInit = {
+          method,
+          headers: {
+            'Content-Type': 'application/json',
+            ...headers,
+          },
+        };
+        
+        if (body && method === 'POST') {
+          options.body = JSON.stringify(body);
+        }
+        
+        const response = await fetch(url, options);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const responseData = await response.json();
+        
+        // Apply transformer if provided
+        let data: DataRow[];
+        if (transformer) {
+          data = transformer(responseData);
+        } else if (Array.isArray(responseData)) {
+          data = responseData;
+        } else if (responseData.data && Array.isArray(responseData.data)) {
+          // Common API pattern: { data: [...] }
+          data = responseData.data;
+        } else {
+          // Single object response
+          data = [responseData];
+        }
+        
+        onDataLoad(data);
+        onLoadingChange?.(false);
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error('Failed to load API data'));
+        onLoadingChange?.(false);
+      }
+    };
+    
+    loadApiData();
+  }, [url, method, JSON.stringify(headers), JSON.stringify(body)]);
+  
+  // This component doesn't render anything
+  return null;
+}

package/components/DataTb/sources/CsvSource.tsx

@@ -0,0 +1,69 @@
+/**
+ * CsvSource Component
+ * 
+ * Loads data from CSV files (local or remote)
+ * Uses PapaParse for parsing
+ */
+
+import { useEffect } from 'react';
+import Papa from 'papaparse';
+import type { SourceComponentProps } from '../types';
+
+export interface CsvSourceProps extends SourceComponentProps {
+  /** CSV file URL (local or remote) */
+  url: string;
+  
+  /** Delimiter character (default: ',') */
+  delimiter?: string;
+  
+  /** Skip first N rows */
+  skipRows?: number;
+}
+
+export function CsvSource({
+  url,
+  delimiter = ',',
+  skipRows = 0,
+  onDataLoad,
+  onLoadingChange,
+  onError,
+}: CsvSourceProps) {
+  useEffect(() => {
+    const loadCsv = async () => {
+      try {
+        onLoadingChange?.(true);
+        
+        Papa.parse(url, {
+          download: true,
+          header: true,
+          delimiter,
+          skipEmptyLines: true,
+          dynamicTyping: true, // Convert numbers and booleans
+          complete: (results) => {
+            let data = results.data;
+            
+            // Skip rows if specified
+            if (skipRows > 0) {
+              data = data.slice(skipRows);
+            }
+            
+            onDataLoad(data as import('../types').DataRow[]);
+            onLoadingChange?.(false);
+          },
+          error: (error) => {
+            onError?.(new Error(`Failed to parse CSV: ${error.message}`));
+            onLoadingChange?.(false);
+          },
+        });
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error('Failed to load CSV'));
+        onLoadingChange?.(false);
+      }
+    };
+    
+    loadCsv();
+  }, [url, delimiter, skipRows]);
+  
+  // This component doesn't render anything
+  return null;
+}

package/components/DataTb/sources/DirectusSource.tsx

@@ -0,0 +1,98 @@
+/**
+ * DirectusSource Component
+ * 
+ * Loads data from Directus collections using the Directus SDK
+ * Requires directusConfig in user.config.mjs
+ */
+
+import { useEffect } from 'react';
+import { createDirectus, rest, staticToken, readItems } from '@directus/sdk';
+import type { SourceComponentProps } from '../types';
+
+export interface DirectusSourceProps extends SourceComponentProps {
+  /** Collection name */
+  collection: string;
+  
+  /** Directus configuration */
+  config: {
+    url: string;
+    token: string;
+  };
+  
+  /** Filter query */
+  filter?: Record<string, any>;
+  
+  /** Fields to select */
+  fields?: string[];
+  
+  /** Sort order (e.g., ['-date_created', 'title']) */
+  sort?: string[];
+  
+  /** Limit results */
+  limit?: number;
+}
+
+export function DirectusSource({
+  collection,
+  config,
+  filter,
+  fields,
+  sort,
+  limit,
+  onDataLoad,
+  onLoadingChange,
+  onError,
+}: DirectusSourceProps) {
+  useEffect(() => {
+    const loadDirectusData = async () => {
+      try {
+        if (!config.url || !config.token) {
+          throw new Error('Directus configuration (url and token) is required');
+        }
+        
+        onLoadingChange?.(true);
+        
+        // Create Directus client
+        const client = createDirectus(config.url)
+          .with(staticToken(config.token))
+          .with(rest());
+        
+        // Build query options
+        const queryOptions: any = {};
+        
+        if (filter) {
+          queryOptions.filter = filter;
+        }
+        
+        if (fields) {
+          queryOptions.fields = fields;
+        }
+        
+        if (sort) {
+          queryOptions.sort = sort;
+        }
+        
+        if (limit) {
+          queryOptions.limit = limit;
+        }
+        
+        // Fetch data
+        const items = await client.request(
+          readItems(collection, queryOptions)
+        );
+        
+        onDataLoad(items as any[]);
+        onLoadingChange?.(false);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to load Directus data';
+        onError?.(new Error(`Directus error: ${message}`));
+        onLoadingChange?.(false);
+      }
+    };
+    
+    loadDirectusData();
+  }, [collection, config.url, config.token, JSON.stringify(filter), JSON.stringify(fields), JSON.stringify(sort), limit]);
+  
+  // This component doesn't render anything
+  return null;
+}

package/components/DataTb/sources/JsonSource.tsx

@@ -0,0 +1,65 @@
+/**
+ * JsonSource Component
+ * 
+ * Loads data from JSON (inline or remote)
+ */
+
+import { useEffect } from 'react';
+import type { DataRow, SourceComponentProps } from '../types';
+
+export interface JsonSourceProps extends SourceComponentProps {
+  /** Inline JSON data */
+  data?: DataRow[];
+  
+  /** URL to fetch JSON from */
+  url?: string;
+}
+
+export function JsonSource({
+  data,
+  url,
+  onDataLoad,
+  onLoadingChange,
+  onError,
+}: JsonSourceProps) {
+  useEffect(() => {
+    const loadJson = async () => {
+      try {
+        // Use inline data if provided
+        if (data) {
+          onDataLoad(data);
+          return;
+        }
+        
+        // Fetch from URL
+        if (!url) {
+          onError?.(new Error('JsonSource requires either data or url prop'));
+          return;
+        }
+        
+        onLoadingChange?.(true);
+        
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const jsonData = await response.json();
+        
+        // Handle both array and object responses
+        const arrayData = Array.isArray(jsonData) ? jsonData : [jsonData];
+        
+        onDataLoad(arrayData);
+        onLoadingChange?.(false);
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error('Failed to load JSON'));
+        onLoadingChange?.(false);
+      }
+    };
+    
+    loadJson();
+  }, [data, url]);
+  
+  // This component doesn't render anything
+  return null;
+}

package/components/DataTb/sources/index.ts

@@ -0,0 +1,17 @@
+/**
+ * DataTb Source Components
+ * 
+ * Export all source components for easy importing
+ */
+
+export { CsvSource } from './CsvSource';
+export type { CsvSourceProps } from './CsvSource';
+
+export { JsonSource } from './JsonSource';
+export type { JsonSourceProps } from './JsonSource';
+
+export { DirectusSource } from './DirectusSource';
+export type { DirectusSourceProps } from './DirectusSource';
+
+export { ApiSource } from './ApiSource';
+export type { ApiSourceProps } from './ApiSource';

package/components/DataTb/types.ts

@@ -0,0 +1,215 @@
+/**
+ * DataTb Type Definitions
+ * 
+ * Core types for the DataTb component system
+ */
+
+
+import type { DirectusShorthand, DirectusSourceConfig } from '../../utils/directus-config';
+
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData = unknown, TValue = unknown> {
+    /** Raw CSS width from ColumnConfig.width, applied directly to the <th>/<td> (any CSS length unit). */
+    width?: string;
+  }
+}
+
+/**
+ * Base data row type - can be extended with specific fields
+ */
+export type DataRow = Record<string, any>;
+
+/**
+ * Column configuration with optional formatting
+ */
+export interface ColumnConfig {
+  /** Column key matching data property */
+  key: string;
+
+  /** Display header text */
+  header: string;
+
+  /** Enable sorting for this column */
+  sortable?: boolean;
+
+  /** Format type for automatic formatting */
+  format?: 'date' | 'number' | 'currency' | 'percent';
+
+  /** Custom render function */
+  render?: (value: any, row: DataRow) => React.ReactNode;
+
+  /** Value mapping labels (e.g. { "true": "Yes", "false": "No" }) */
+  labels?: Record<string, string>;
+
+  /** Column width (CSS value) */
+  width?: string;
+}
+
+/**
+ * Pagination configuration
+ */
+export interface PaginationConfig {
+  /** Number of rows per page */
+  pageSize?: number;
+
+  /** Show page size selector */
+  showPageSize?: boolean;
+
+  /** Available page size options */
+  pageSizeOptions?: number[];
+}
+
+/**
+ * Source type discriminators
+ */
+export type SourceType = 'csv' | 'json' | 'directus' | 'api';
+
+/**
+ * CSV Source configuration
+ */
+export interface CsvSourceConfig {
+  type: 'csv';
+  url: string;
+  /** Delimiter (default: ',') */
+  delimiter?: string;
+  /** Skip first N rows */
+  skipRows?: number;
+  /** Longitude column name (for map conversion) */
+  lng?: string;
+  /** Latitude column name (for map conversion) */
+  lat?: string;
+}
+
+/**
+ * JSON Source configuration
+ */
+export interface JsonSourceConfig {
+  type: 'json';
+  /** Inline data */
+  data?: DataRow[];
+  /** URL to fetch JSON from */
+  url?: string;
+}
+
+// Re-export DirectusSourceConfig from shared utils
+export type { DirectusSourceConfig } from '../../utils/directus-config';
+
+/**
+ * Generic API Source configuration
+ */
+export interface ApiSourceConfig {
+  type: 'api';
+  /** API endpoint URL */
+  url: string;
+  /** HTTP method */
+  method?: 'GET' | 'POST';
+  /** Request headers */
+  headers?: Record<string, string>;
+  /** Request body (for POST) */
+  body?: any;
+  /** Transform response data */
+  transformer?: (data: any) => DataRow[];
+}
+
+/**
+ * GeoJSON Source configuration
+ */
+export interface GeoJsonSourceConfig {
+  type: 'geojson';
+  /** GeoJSON data object */
+  data?: any;
+  /** URL to fetch GeoJSON from */
+  url?: string;
+}
+
+/**
+ * Vector Tile Source configuration (from MapLibre style JSON)
+ */
+export interface VectorSourceConfig {
+  type: 'vector';
+  /** Vector tile URL or template */
+  url?: string;
+}
+
+/**
+ * Union of all source configurations
+ */
+export type SourceConfig =
+  | CsvSourceConfig
+  | JsonSourceConfig
+  | DirectusSourceConfig
+  | ApiSourceConfig
+  | GeoJsonSourceConfig
+  | VectorSourceConfig;
+
+/**
+ * Props for source components
+ */
+export interface SourceComponentProps {
+  /** Callback to provide data to parent */
+  onDataLoad: (data: DataRow[]) => void;
+  /** Callback for loading state */
+  onLoadingChange?: (loading: boolean) => void;
+  /** Callback for error state */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * DataTb main component props
+ */
+export interface DataTbProps {
+  /** Column definitions (optional - will auto-detect if not provided) */
+  columns?: ColumnConfig[];
+
+  /** Enable global search/filter */
+  searchable?: boolean;
+
+  /** Pagination configuration */
+  pagination?: boolean | PaginationConfig;
+
+  /** Enable column sorting */
+  sortable?: boolean;
+
+  /** Initial sort state */
+  initialSort?: {
+    columnKey: string;
+    direction: 'asc' | 'desc';
+  };
+
+  /** Custom CSS classes */
+  className?: string;
+
+  /** Data source configuration */
+  source?: SourceConfig;
+
+  /** Loading state message */
+  loadingMessage?: string;
+
+  /** Empty state message */
+  emptyMessage?: string;
+
+  /** Error message */
+  errorMessage?: string;
+
+  /** Truncate large cell content by default */
+  truncateContent?: boolean;
+
+  /** Max width for truncated cell content (CSS value) */
+  truncateMaxWidth?: string;
+
+  /** Table body content size */
+  contentSize?: 'sm' | 'md';
+
+  /** Simplified CSV Source URL (MDX friendly) */
+  csv?: string;
+
+  /** Simplified JSON Source Data or URL (MDX friendly) */
+  json?: any[] | string;
+
+  /** Simplified API Source URL (MDX friendly) */
+  api?: string;
+
+  /** Simplified Directus configuration (MDX friendly) - uses same interface as Map component */
+  directus?: DirectusShorthand;
+}