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

package/components/Map/MapMdx.tsx

@@ -0,0 +1,37 @@
+/**
+ * MDX-safe wrapper for Map component
+ */
+
+import { useMemo } from 'react';
+import { Map as MapCore } from './Map';
+import type { MapProps } from './types';
+
+export function Map(props: MapProps) {
+  // Add props validation
+  if (!props) {
+    console.warn('Map component received undefined props');
+    return null;
+  }
+
+  // Memoize center prop
+  const stableCenter = useMemo(() => props?.center, [props?.center]);
+  
+  // Memoize array/object props to prevent unnecessary re-renders in MDX
+  const stableBaseLayers = useMemo(() => props?.baseLayers, [JSON.stringify(props?.baseLayers || [])]);
+  const stableVectorLayers = useMemo(() => props?.vectorLayers, [JSON.stringify(props?.vectorLayers || [])]);
+  const stableGeojson = useMemo(() => props?.geojson, [JSON.stringify(props?.geojson || null)]);
+  const stableCsv = useMemo(() => props?.csv, [JSON.stringify(props?.csv || null)]);
+  const stableJson = useMemo(() => props?.json, [JSON.stringify(props?.json || null)]);
+
+  return (
+    <MapCore 
+      {...props} 
+      center={stableCenter}
+      baseLayers={stableBaseLayers}
+      vectorLayers={stableVectorLayers}
+      geojson={stableGeojson}
+      csv={stableCsv}
+      json={stableJson}
+    />
+  );
+}

package/components/Map/RasterLayerLibre.tsx

@@ -0,0 +1,33 @@
+
+import { Source, Layer } from '@vis.gl/react-maplibre';
+
+interface RasterLayerProps {
+  url: string[];
+  attribution?: string;
+  tileSize?: number;
+  id?: string;
+  beforeId?: string;
+  visible?: boolean;
+}
+
+export function RasterLayerLibre({ url, attribution, tileSize = 256, id = 'base-layer', beforeId, visible = true }: RasterLayerProps) {
+  return (
+    <Source 
+      id={`source-${id}`}
+      type="raster" 
+      tiles={url} 
+      tileSize={tileSize}
+      attribution={attribution}
+    >
+      <Layer 
+        id={id}
+        type="raster"
+        paint={{}}
+        beforeId={beforeId}
+        layout={{
+          visibility: visible ? 'visible' : 'none'
+        }}
+      />
+    </Source>
+  );
+}

package/components/Map/Search/SearchOperators.ts

@@ -0,0 +1,31 @@
+/**
+ * Search Operators Configuration
+ * Default search operators with their UI labels
+ */
+
+import type { SearchOperators } from '../types';
+
+export const DEFAULT_OPERATORS: SearchOperators = {
+  _eq: "Equals",
+  _neq: "Doesn't equal",
+  _lt: "Less than",
+  _lte: "Less than or equal to",
+  _gt: "Greater than",
+  _gte: "Greater than or equal to",
+  _null: "Is null",
+  _nnull: "Isn't null",
+  _contains: "Contains",
+  _icontains: "Contains (case-insensitive)",
+  _ncontains: "Doesn't contain",
+  _starts_with: "Starts with",
+  _istarts_with: "Starts with (case-insensitive)",
+  _nstarts_with: "Doesn't start with",
+  _ends_with: "Ends with",
+  _iends_with: "Ends with (case-insensitive)",
+  _nends_with: "Doesn't end with"
+};
+
+export const DEFAULT_CONNECTORS = {
+  _and: "AND",
+  _or: "OR"
+};

package/components/Map/Search/SearchUI.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import type { SearchInFields, SearchQuery, SearchOperators } from '../types';
+import { SearchUISimple } from './SearchUISimple';
+import { SearchUIAdvanced } from './SearchUIAdvanced';
+
+export interface SearchUIProps {
+  fieldList: SearchInFields;
+  onSearch: (query: SearchQuery) => void;
+  operators?: Partial<SearchOperators>;
+  isLoading?: boolean;
+  limitTo?: 'simple' | 'advanced';
+  currentQuery?: SearchQuery;
+}
+
+/**
+ * Main search UI component
+ * Handles switching between simple and advanced search modes
+ */
+export function SearchUI({ 
+  fieldList, 
+  onSearch, 
+  operators,
+  isLoading = false,
+  limitTo,
+  currentQuery 
+}: SearchUIProps) {
+  const [isAdvanced, setIsAdvanced] = useState(limitTo === 'advanced');
+
+  const toggleMode = () => {
+    if (limitTo) return; // Don't allow toggling if limited to one mode
+    setIsAdvanced(!isAdvanced);
+  };
+
+  if (!fieldList || Object.keys(fieldList).length === 0) {
+    return (
+      <div className="text-danger small">
+        No searchable fields configured for this layer.
+      </div>
+    );
+  }
+
+  // Show advanced by default if limitTo is 'advanced', simple if limitTo is 'simple'
+  const showAdvanced = limitTo === 'advanced' || (limitTo !== 'simple' && isAdvanced);
+
+  return (
+    <div className="search-ui">
+      {isLoading && (
+        <div className="text-center mb-3">
+          <div className="spinner-border text-primary" role="status">
+            <span className="visually-hidden">Loading...</span>
+          </div>
+        </div>
+      )}
+      
+      {showAdvanced ? (
+        <SearchUIAdvanced
+          fieldList={fieldList}
+          onSearch={onSearch}
+          operators={operators}
+          isLoading={isLoading}
+          onToggleSimple={limitTo ? undefined : toggleMode}
+          currentQuery={currentQuery}
+        />
+      ) : (
+        <SearchUISimple
+          fieldList={fieldList}
+          onSearch={onSearch}
+          isLoading={isLoading}
+          onToggleAdvanced={limitTo ? undefined : toggleMode}
+          currentQuery={currentQuery}
+        />
+      )}
+    </div>
+  );
+}

package/components/Map/Search/SearchUIAdvanced.tsx

@@ -0,0 +1,289 @@
+import { useState, type SyntheticEvent } from 'react';
+import { Search, X, Plus, Minus, ArrowLeft } from 'lucide-react';
+import type { SearchInFields, SearchQuery, SearchFilter, SearchOperators } from '../types';
+import { DEFAULT_OPERATORS, DEFAULT_CONNECTORS } from './SearchOperators';
+
+export interface SearchUIAdvancedProps {
+  fieldList: SearchInFields;
+  onSearch: (query: SearchQuery) => void;
+  operators?: Partial<SearchOperators>;
+  isLoading?: boolean;
+  onToggleSimple?: () => void;
+  currentQuery?: SearchQuery;
+}
+
+/**
+ * Advanced search UI component
+ * Provides multiple field-operator-value triplets with AND/OR logic
+ */
+export function SearchUIAdvanced({ 
+  fieldList, 
+  onSearch, 
+  operators = {},
+  isLoading = false,
+  onToggleSimple,
+  currentQuery 
+}: SearchUIAdvancedProps) {
+  const mergedOperators = { ...DEFAULT_OPERATORS, ...operators };
+  
+  // Initialize state from currentQuery if provided
+  const getInitialConnector = (): '_and' | '_or' => {
+    return currentQuery?.connector || '_and';
+  };
+
+  const getInitialFilters = (): SearchFilter[] => {
+    if (currentQuery?.filters?.length) {
+      return currentQuery.filters;
+    }
+    return [{
+      field: Object.keys(fieldList)[0] || '',
+      operator: Object.keys(mergedOperators)[0] || '_eq',
+      value: ''
+    }];
+  };
+
+  const [connector, setConnector] = useState<'_and' | '_or'>(getInitialConnector());
+  const [filters, setFilters] = useState<SearchFilter[]>(getInitialFilters());
+
+  // Get the first field's default value if it has predefined values
+  const getDefaultValue = (fieldName: string) => {
+    const fieldConfig = fieldList[fieldName];
+    if (typeof fieldConfig === 'object' && fieldConfig.values && fieldConfig.values.length > 0) {
+      return fieldConfig.values[0];
+    }
+    return '';
+  };
+
+  const addFilter = () => {
+    const firstField = Object.keys(fieldList)[0] || '';
+    setFilters([...filters, {
+      field: firstField,
+      operator: Object.keys(mergedOperators)[0] || '_eq',
+      value: getDefaultValue(firstField)
+    }]);
+  };
+
+  const removeFilter = (index: number) => {
+    if (filters.length > 1) {
+      setFilters(filters.filter((_, i) => i !== index));
+    }
+  };
+
+  const updateFilter = (index: number, field: keyof SearchFilter, value: any) => {
+    const newFilters = [...filters];
+    newFilters[index] = { ...newFilters[index], [field]: value };
+    
+    // If field changed, update default value
+    if (field === 'field') {
+      newFilters[index].value = getDefaultValue(value);
+    }
+    
+    setFilters(newFilters);
+  };
+
+  const handleSubmit = (e: SyntheticEvent) => {
+    e.preventDefault();
+    
+    // Filter out empty values
+    const validFilters = filters.filter(f => f.field && f.value !== '');
+    
+    onSearch({
+      connector,
+      filters: validFilters
+    });
+  };
+
+  const handleClear = () => {
+    setFilters([{
+      field: Object.keys(fieldList)[0] || '',
+      operator: Object.keys(mergedOperators)[0] || '_eq',
+      value: ''
+    }]);
+    onSearch({ connector: '_or', filters: [] });
+  };
+
+  const hasFilters = () => {
+    return filters.some(f => f.field && f.value !== '');
+  };
+
+  const getFieldLabel = (fieldName: string): string => {
+    const fieldConfig = fieldList[fieldName];
+    return typeof fieldConfig === 'string' ? fieldConfig : fieldConfig?.label || fieldName;
+  };
+
+  const hasFieldValues = (fieldName: string): boolean => {
+    const fieldConfig = fieldList[fieldName];
+    return typeof fieldConfig === 'object' && Array.isArray(fieldConfig.values) && fieldConfig.values.length > 0;
+  };
+
+  const getFieldValues = (fieldName: string): string[] => {
+    const fieldConfig = fieldList[fieldName];
+    if (typeof fieldConfig === 'object' && fieldConfig.values) {
+      return fieldConfig.values;
+    }
+    return [];
+  };
+
+  return (
+    <div className="search-ui-advanced">
+      <form onSubmit={handleSubmit}>
+        {/* Connector selection (only show if more than one filter) */}
+        {filters.length > 1 && (
+          <div className="mb-3">
+            <div className="d-flex gap-3">
+              <label className="d-flex align-items-center gap-2">
+                <input
+                  type="radio"
+                  name="connector"
+                  value="_and"
+                  checked={connector === '_and'}
+                  onChange={(e) => setConnector(e.target.value as '_and' | '_or')}
+                  className="form-check-input"
+                />
+                <span className="small">{DEFAULT_CONNECTORS._and}</span>
+              </label>
+              
+              <label className="d-flex align-items-center gap-2">
+                <input
+                  type="radio"
+                  name="connector"
+                  value="_or"
+                  checked={connector === '_or'}
+                  onChange={(e) => setConnector(e.target.value as '_and' | '_or')}
+                  className="form-check-input"
+                />
+                <span className="small">{DEFAULT_CONNECTORS._or}</span>
+              </label>
+            </div>
+          </div>
+        )}
+
+        {/* Filter rows */}
+        {filters.map((filter, index) => (
+          <div key={index} className="row g-2 mb-2 align-items-center">
+            {/* Field selection */}
+            <div className="col-3">
+              <select
+                className="form-select form-select-sm"
+                value={filter.field}
+                onChange={(e) => updateFilter(index, 'field', e.target.value)}
+                disabled={isLoading}
+              >
+                {Object.entries(fieldList).map(([fieldName, _config]) => (
+                  <option key={fieldName} value={fieldName}>
+                    {getFieldLabel(fieldName)}
+                  </option>
+                ))}
+              </select>
+            </div>
+            
+            {/* Operator selection */}
+            <div className="col-3">
+              <select
+                className="form-select form-select-sm"
+                value={filter.operator}
+                onChange={(e) => updateFilter(index, 'operator', e.target.value)}
+                disabled={isLoading}
+              >
+                {Object.entries(mergedOperators).map(([op, label]) => (
+                  <option key={op} value={op}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </div>
+            
+            {/* Value input */}
+            <div className="col-4">
+              {hasFieldValues(filter.field) ? (
+                <select
+                  className="form-select form-select-sm"
+                  value={filter.value}
+                  onChange={(e) => updateFilter(index, 'value', e.target.value)}
+                  disabled={isLoading}
+                >
+                  {getFieldValues(filter.field).map(value => (
+                    <option key={value} value={value}>
+                      {value}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  value={filter.value}
+                  onChange={(e) => updateFilter(index, 'value', e.target.value)}
+                  disabled={isLoading}
+                />
+              )}
+            </div>
+            
+            {/* Actions */}
+            <div className="col-2 d-flex gap-1">
+              <button
+                type="button"
+                className="btn btn-danger btn-sm"
+                onClick={() => removeFilter(index)}
+                disabled={isLoading || filters.length === 1}
+                title={filters.length === 1 ? "Cannot remove the last filter" : "Remove filter"}
+              >
+                <Minus size={16} />
+              </button>
+            </div>
+          </div>
+        ))}
+
+        {/* Add Filter Button */}
+        <div className="mb-3">
+          <button
+            type="button"
+            className="btn btn-secondary btn-sm"
+            onClick={addFilter}
+            disabled={isLoading}
+          >
+            <Plus size={16} />
+            Add Filter
+          </button>
+        </div>
+
+        {/* Actions */}
+        <div className="d-flex gap-2 mt-3">
+          <button 
+            type="submit" 
+            className="btn btn-primary btn-sm"
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <span className="spinner-border spinner-border-sm" role="status">
+                <span className="visually-hidden">Loading...</span>
+              </span>
+            ) : (
+              <Search size={16} />
+            )}
+            Search
+          </button>
+          <button 
+            type="button" 
+            className="btn btn-secondary btn-sm"
+            onClick={handleClear}
+            disabled={isLoading || !hasFilters()}
+          >
+            <X size={16} />
+            Clear
+          </button>
+          {onToggleSimple && (
+            <button 
+              type="button"
+              className="btn btn-sm btn-link"
+              onClick={onToggleSimple}
+            >
+              <ArrowLeft size={16} />
+              Simple Search
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}

package/components/Map/Search/SearchUISimple.tsx

@@ -0,0 +1,115 @@
+import { useState, type SyntheticEvent } from 'react';
+import { Search, X, TextSearch } from 'lucide-react';
+import type { SearchInFields, SearchQuery, SearchFilter } from '../types';
+
+export interface SearchUISimpleProps {
+  fieldList: SearchInFields;
+  onSearch: (query: SearchQuery) => void;
+  isLoading?: boolean;
+  onToggleAdvanced?: () => void;
+  currentQuery?: SearchQuery;
+}
+
+/**
+ * Simple search UI component
+ * Provides a single text input that searches across all configured fields using OR logic
+ */
+export function SearchUISimple({ 
+  fieldList, 
+  onSearch, 
+  isLoading = false,
+  onToggleAdvanced,
+  currentQuery 
+}: SearchUISimpleProps) {
+  // Extract search text from currentQuery if it exists and is a simple search (all filters have same value)
+  const getInitialSearchText = () => {
+    if (!currentQuery?.filters?.length) return '';
+    const firstFilter = currentQuery.filters[0];
+    if (currentQuery.filters.every(f => f.value === firstFilter.value && f.operator === '_icontains')) {
+      return firstFilter.value;
+    }
+    return '';
+  };
+
+  const [searchText, setSearchText] = useState(getInitialSearchText());
+
+  const handleSubmit = (e: SyntheticEvent) => {
+    e.preventDefault();
+    
+    if (!searchText.trim()) {
+      // Clear search
+      onSearch({ connector: '_or', filters: [] });
+      return;
+    }
+
+    // Create filters for all searchable fields using case-insensitive contains
+    const filters: SearchFilter[] = Object.keys(fieldList).map(field => ({
+      field,
+      operator: '_icontains',
+      value: searchText.trim()
+    }));
+
+    onSearch({
+      connector: '_or',
+      filters
+    });
+  };
+
+  const handleClear = () => {
+    setSearchText('');
+    onSearch({ connector: '_or', filters: [] });
+  };
+
+  return (
+    <div className="search-ui-simple">
+      <form onSubmit={handleSubmit} className="mb-3">
+        <div className="d-flex gap-2">
+          <input
+            type="text"
+            className="form-control form-control-sm"
+            placeholder="Search..."
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            disabled={isLoading}
+          />
+          <button 
+            type="submit" 
+            className="btn btn-primary btn-sm"
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <span className="spinner-border spinner-border-sm" role="status">
+                <span className="visually-hidden">Loading...</span>
+              </span>
+            ) : (
+              <Search size={16} />
+            )}
+            Search
+          </button>
+          <button 
+            type="button" 
+            className="btn btn-secondary btn-sm"
+            onClick={handleClear}
+            disabled={isLoading || !searchText}
+          >
+            <X size={16} />
+            Clear
+          </button>
+        </div>
+      </form>
+      
+      {onToggleAdvanced && (
+        <div className="text-center">
+          <button 
+            type="button"
+            className="btn btn-sm btn-link"
+            onClick={onToggleAdvanced}
+          >
+            <TextSearch size={16} />
+            Advanced Search
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/Map/Search/index.ts

@@ -0,0 +1,7 @@
+export { SearchUI } from './SearchUI';
+export { SearchUISimple } from './SearchUISimple';
+export { SearchUIAdvanced } from './SearchUIAdvanced';
+export { DEFAULT_OPERATORS, DEFAULT_CONNECTORS } from './SearchOperators';
+export type { SearchUIProps } from './SearchUI';
+export type { SearchUISimpleProps } from './SearchUISimple';
+export type { SearchUIAdvancedProps } from './SearchUIAdvanced';

package/components/Map/defaultBasemaps.ts

@@ -0,0 +1,88 @@
+/**
+ * Default Basemap configurations
+ * Based on https://github.com/lad-sapienza/sCMS/blob/main/src/modules/maps/defaultBaseLayers.js
+ */
+
+import type { BaseLayerConfig } from './types';
+
+export const defaultBasemaps: Record<string, BaseLayerConfig> = {
+  CAWM: {
+    name: "Ancient World Map",
+    url: "https://cawm.lib.uiowa.edu/tiles/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="http://cawm.lib.uiowa.edu/index.html">Consortium of Ancient World Mappers</a>',
+  },
+  OSM: {
+    name: "Open Street Map",
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  },
+  EsriSatellite: {
+    name: "Esri Imagery/Satellite",
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+  },
+  EsriStreets: {
+    name: "Esri Streets",
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
+  },
+  EsriTopo: {
+    name: "Esri Topo",
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
+  },
+  GoogleSatellite: {
+    name: "Google Satellite",
+    url: "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
+  },
+  GoogleRoadmap: {
+    name: "Google Roadmap",
+    url: "https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
+  },
+  GoogleTerrain: {
+    name: "Google Terrain",
+    url: "https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}",
+  },
+  GoogleAlteredRoadmap: {
+    name: "Google Altered Roadmap",
+    url: "https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}",
+  },
+  CartoDB: {
+    name: "CartoDB",
+    url: "https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
+  },
+  StamenTerrain: {
+    name: "Stamen Terrain",
+    url: "https://a.tile.stamen.com/terrain/{z}/{x}/{y}.png",
+  },
+  OSMMapnick: {
+    name: "OpenStreetMap Mapnick",
+    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+  },
+  OSMCycle: {
+    name: "OSM Cycle Map",
+    url: "https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png",
+  },
+  Imperium: {
+    name: "Imperium (DARE)",
+    url: "https://dh.gu.se/tiles/imperium/{z}/{x}/{y}.png",
+  }
+};
+
+/**
+ * Valid basemap keys
+ */
+export type BasemapKey = keyof typeof defaultBasemaps;
+
+/**
+ * Get basemap configuration by key
+ */
+export function getBasemap(key: string): BaseLayerConfig | undefined {
+  return defaultBasemaps[key];
+}
+
+/**
+ * Get multiple basemaps by keys
+ */
+export function getBasemaps(keys: string[]): BaseLayerConfig[] {
+  return keys
+    .map(key => defaultBasemaps[key])
+    .filter((config): config is BaseLayerConfig => config !== undefined);
+}

package/components/Map/index.ts

@@ -0,0 +1,6 @@
+export { Map } from './MapMdx';
+export { Map as MapCore } from './Map';
+export { defaultBasemaps, getBasemap, getBasemaps } from './defaultBasemaps';
+export type { BasemapKey } from './defaultBasemaps';
+export type { VectorLayerConfig } from './types';
+export * from './types';