@dashadmin/dash-components 1.3.25 → 1.3.28

package/src/components/JsonColorSelector/components/ImageColorExtractor.tsx

@@ -0,0 +1,328 @@
+import {
+    Box,
+    Button,
+    IconButton,
+    Typography,
+    Card,
+    CardMedia,
+    CircularProgress,
+    Input,
+    Alert,
+    TextField,
+    Divider,
+} from '@mui/material';
+
+import DeleteIcon from '@mui/icons-material/Delete';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import PaletteIcon from '@mui/icons-material/Palette';
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
+import UpdateIcon from '@mui/icons-material/Update';
+import { useState, useEffect, memo, useCallback } from 'react';
+import { useAsyncColorThief } from '../useAsyncColorThief';
+import { getContrastColor, rgbArrayToHex } from '../helpers/functions';
+import { KeyValuePair } from '../interfaces/interfaces';
+import { useAxios } from 'dash-axios-hook';
+
+const ImageColorExtractor = memo<{
+    onColorsExtracted: (colors: number[][]) => void;
+    onColorsUpdate?: (newPairs: KeyValuePair[]) => void;
+    existingPairs?: KeyValuePair[];
+}>(({ onColorsExtracted, onColorsUpdate, existingPairs = [] }) => {
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+    const [themePrompt, setThemePrompt] = useState<string>('');
+    const [isGeneratingTheme, setIsGeneratingTheme] = useState<boolean>(false);
+    const [themeError, setThemeError] = useState<string | null>(null);
+    
+    // Add state to preserve extracted colors independently
+    const [extractedPalette, setExtractedPalette] = useState<number[][]>([]);
+    
+    const axios = useAxios();
+    const { dominantColor, palette, loading, error } = useAsyncColorThief(imageUrl, {
+        colorCount: 8,
+        quality: 10
+    });
+
+    // Update internal extracted palette state
+    useEffect(() => {
+        if (palette && palette.length > 0) {
+            setExtractedPalette(palette);
+            onColorsExtracted(palette);
+        }
+    }, [palette, onColorsExtracted]);
+
+    // Handle file selection for upload
+    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            // Validate file type
+            if (!file.type.startsWith('image/')) {
+                alert('Please select a valid image file');
+                return;
+            }
+
+            // Validate file size (e.g., max 5MB)
+            if (file.size > 5 * 1024 * 1024) {
+                alert('File size must be less than 5MB');
+                return;
+            }
+
+            setUploadedFile(file);
+
+            // Create preview URL
+            const previewUrl = URL.createObjectURL(file);
+            setImageUrl(previewUrl);
+        }
+    };
+
+    // Handle image removal
+    const handleImageRemove = () => {
+        if (imageUrl && imageUrl.startsWith('blob:')) {
+            URL.revokeObjectURL(imageUrl);
+        }
+
+        setImageUrl(null);
+        setUploadedFile(null);
+        setExtractedPalette([]); // Clear internal palette state
+        onColorsExtracted([]); // Clear extracted colors
+    };
+
+    // Generate theme using AI - Modified to merge with existing colors
+    const handleGenerateTheme = useCallback(async () => {
+        if (!extractedPalette || extractedPalette.length === 0) {
+            setThemeError('Please extract colors from an image first');
+            return;
+        }
+
+        setIsGeneratingTheme(true);
+        setThemeError(null);
+
+        try {
+            const response = await axios.post('/tenant/tenant/settings/theme-generator', {
+                colors: extractedPalette,
+                prompt: themePrompt,
+                output_format: 'json'
+            });
+            
+            if (response.status !== 200) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const result = response.data;
+
+            if (result.success && result.data) {
+                // Convert the generated theme to KeyValuePair format
+                const newPairs: KeyValuePair[] = Object.entries(result.data).map(([key, value]) => ({
+                    key,
+                    value: String(value),
+                    id: Math.random().toString(36).substring(2, 11)
+                }));
+
+                // Merge with existing pairs instead of replacing them
+                const mergedPairs = [...existingPairs];
+                
+                newPairs.forEach(newPair => {
+                    const existingIndex = mergedPairs.findIndex(existing => existing.key === newPair.key);
+                    if (existingIndex >= 0) {
+                        // Update existing pair
+                        mergedPairs[existingIndex] = newPair;
+                    } else {
+                        // Add new pair
+                        mergedPairs.push(newPair);
+                    }
+                });
+
+                // Update the colors in the parent component
+                if (onColorsUpdate) {
+                    onColorsUpdate(mergedPairs);
+                }
+            } else {
+                throw new Error(result.message || 'Failed to generate theme');
+            }
+        } catch (error) {
+            console.error('Theme generation error:', error);
+            setThemeError(error instanceof Error ? error.message : 'Failed to generate theme');
+        } finally {
+            setIsGeneratingTheme(false);
+        }
+    }, [extractedPalette, themePrompt, existingPairs, onColorsUpdate, axios]);
+
+    return (
+        <Box sx={{ mt: 3, p: 3, borderRadius: 2 }}>
+            <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <PaletteIcon />
+                AI Theme Generator
+            </Typography>
+
+            <Divider sx={{ mb: 3 }} />
+
+            {/* Image Upload Section */}
+            <Box sx={{ mb: 3 }}>
+                {!imageUrl ? (
+                    <Box sx={{
+                        textAlign: 'center',
+                        py: 4,
+                        backgroundColor: 'rgba(0,0,0,0.02)',
+                        borderRadius: 1,
+                        border: '2px dashed #e0e0e0'
+                    }}>
+                        <Input
+                            type="file"
+                            inputProps={{ accept: 'image/*' }}
+                            onChange={handleFileSelect}
+                            sx={{ display: 'none' }}
+                            id="color-extractor-upload"
+                        />
+                        <Typography variant="body1" color="textSecondary" gutterBottom>
+                            Upload an Image to Extract Colors
+                        </Typography>
+                        <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
+                            Select an image file and we'll automatically extract a color palette
+                        </Typography>
+                        <label htmlFor="color-extractor-upload">
+                            <Button
+                                variant="contained"
+                                component="span"
+                                startIcon={<CloudUploadIcon />}
+                                size="large"
+                            >
+                                Choose Image
+                            </Button>
+                        </label>
+                    </Box>
+                ) : (
+                    <Card sx={{ maxWidth: 400, mb: 3 }}>
+                        <Box sx={{ position: 'relative' }}>
+                            <CardMedia
+                                component="img"
+                                height="200"
+                                image={imageUrl}
+                                alt="Uploaded image"
+                                sx={{ objectFit: 'contain' }}
+                            />
+                            <IconButton
+                                sx={{
+                                    position: 'absolute',
+                                    top: 8,
+                                    right: 8,
+                                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                                    '&:hover': {
+                                        backgroundColor: 'rgba(255, 255, 255, 1)',
+                                    },
+                                }}
+                                onClick={handleImageRemove}
+                                size="small"
+                            >
+                                <DeleteIcon />
+                            </IconButton>
+                        </Box>
+                    </Card>
+                )}
+            </Box>
+
+            {/* Color Extraction Status */}
+            {loading && (
+                <Box display="flex" alignItems="center" gap={2} sx={{ mb: 3, p: 2, backgroundColor: 'rgba(25, 118, 210, 0.04)', borderRadius: 1 }}>
+                    <CircularProgress size={20} />
+                    <Typography>Extracting colors from image...</Typography>
+                </Box>
+            )}
+
+            {error && (
+                <Alert severity="error" sx={{ mb: 3 }}>
+                    {error}
+                </Alert>
+            )}
+
+            {themeError && (
+                <Alert severity="error" sx={{ mb: 3 }}>
+                    {themeError}
+                </Alert>
+            )}
+
+            {/* Extracted Colors Display - Use internal state */}
+            {extractedPalette && extractedPalette.length > 0 && !loading && (
+                <Box sx={{ mb: 3 }}>
+                    <Typography variant="subtitle1" gutterBottom>
+                        Extracted Colors ({extractedPalette.length} colors found)
+                    </Typography>
+
+                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 2, mb: 3 }}>
+                        {extractedPalette.map((color, index) => {
+                            const hexColor = rgbArrayToHex(color);
+                            const isDominant = dominantColor &&
+                                color[0] === dominantColor[0] &&
+                                color[1] === dominantColor[1] &&
+                                color[2] === dominantColor[2];
+
+                            return (
+                                <Box
+                                    key={index}
+                                    sx={{
+                                        width: 50,
+                                        height: 50,
+                                        backgroundColor: hexColor,
+                                        borderRadius: '50%',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        border: isDominant ? '3px solid #4caf50' : '2px solid #ccc',
+                                        cursor: 'pointer',
+                                        transition: 'transform 0.2s',
+                                        '&:hover': {
+                                            transform: 'scale(1.1)',
+                                        },
+                                    }}
+                                    title={`${hexColor} ${isDominant ? '(Dominant)' : ''}`}
+                                >
+                                    <Typography
+                                        variant="caption"
+                                        sx={{
+                                            color: getContrastColor(hexColor),
+                                            fontWeight: 'bold',
+                                            fontSize: '0.8rem',
+                                        }}
+                                    >
+                                        {index + 1}
+                                    </Typography>
+                                </Box>
+                            );
+                        })}
+                    </Box>
+
+                    {/* Theme Generation Controls */}
+                    <Box sx={{ mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            multiline
+                            rows={2}
+                            placeholder="Optional: Describe the theme style you want (e.g., 'modern and minimalist', 'warm and cozy', 'professional corporate')"
+                            value={themePrompt}
+                            onChange={(e) => setThemePrompt(e.target.value)}
+                            sx={{ mb: 2 }}
+                            label="Theme Description (Optional)"
+                        />
+                        
+                        <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+                            <Button
+                                variant="contained"
+                                startIcon={isGeneratingTheme ? <CircularProgress size={16} /> : <AutoFixHighIcon />}
+                                onClick={handleGenerateTheme}
+                                disabled={isGeneratingTheme}
+                                color="primary"
+                            >
+                                {isGeneratingTheme ? 'Generating...' : 'Generate AI Theme'}
+                            </Button>
+                        </Box>
+                    </Box>
+
+                    <Typography variant="body2" color="textSecondary" sx={{ fontStyle: 'italic' }}>
+                        • <strong>Generate AI Theme:</strong> Uses AI to create a complete color scheme based on extracted colors and your description
+                    </Typography>
+                </Box>
+            )}
+        </Box>
+    );
+});
+
+export default ImageColorExtractor;

package/src/components/JsonColorSelector/helpers/functions.tsx

@@ -0,0 +1,123 @@
+import { ColorFormat, ColorFormatType, KeyValuePair } from "../interfaces/interfaces";
+
+// Helper function to determine text color based on background
+export const getContrastColor = (color: string): string => {
+    // Handle different color formats
+    let r: number, g: number, b: number, a: number = 1;
+
+    if (color.startsWith('#')) {
+        // Hex color
+        const hex = color.replace('#', '');
+        if (hex.length === 8) {
+            // RGBA hex
+            r = parseInt(hex.substr(0, 2), 16);
+            g = parseInt(hex.substr(2, 2), 16);
+            b = parseInt(hex.substr(4, 2), 16);
+            a = parseInt(hex.substr(6, 2), 16) / 255;
+        } else {
+            // RGB hex
+            r = parseInt(hex.substr(0, 2), 16);
+            g = parseInt(hex.substr(2, 2), 16);
+            b = parseInt(hex.substr(4, 2), 16);
+        }
+    } else if (color.startsWith('rgb')) {
+        // RGB/RGBA color
+        const match = color.match(/rgba?\(([^)]+)\)/);
+        if (match) {
+            const values = match[1].split(',').map(v => parseFloat(v.trim()));
+            [r, g, b, a = 1] = values;
+        } else {
+            return '#000000';
+        }
+    } else if (color.startsWith('hsl')) {
+        // For HSL, we'll use a simple approach
+        return '#000000';
+    } else {
+        return '#000000';
+    }
+
+    // Calculate luminance considering alpha
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    const effectiveLuminance = luminance * a + (1 - a); // Blend with white background
+
+    return effectiveLuminance > 0.5 ? '#000000' : '#ffffff';
+};
+
+// Helper function to convert color to different formats
+// Helper function to convert color to different formats - Updated
+export const convertColor = (color: ColorFormat, format: ColorFormatType): string => {
+    switch (format) {
+        case 'hex':
+            // For hex, we'll ignore alpha or convert to 8-digit hex if alpha < 1
+            if (color.rgb.a !== undefined && color.rgb.a < 1) {
+                const alpha = Math.round(color.rgb.a * 255);
+                const alphaHex = alpha.toString(16).padStart(2, '0');
+                return `${color.hex}${alphaHex}`;
+            }
+            return color.hex;
+        case 'rgb':
+            return `rgb(${Math.round(color.rgb.r)}, ${Math.round(color.rgb.g)}, ${Math.round(color.rgb.b)})`;
+        case 'rgba':
+            const alpha = color.rgb.a !== undefined ? Number(color.rgb.a.toFixed(2)) : 1;
+            return `rgba(${Math.round(color.rgb.r)}, ${Math.round(color.rgb.g)}, ${Math.round(color.rgb.b)}, ${alpha})`;
+        case 'hsl':
+            return `hsl(${Math.round(color.hsl.h)}, ${Math.round(color.hsl.s * 100)}%, ${Math.round(color.hsl.l * 100)}%)`;
+        case 'hsla':
+            const hslaAlpha = color.hsl.a !== undefined ? Number(color.hsl.a.toFixed(2)) : 1;
+            return `hsla(${Math.round(color.hsl.h)}, ${Math.round(color.hsl.s * 100)}%, ${Math.round(color.hsl.l * 100)}%, ${hslaAlpha})`;
+        default:
+            return color.hex;
+    }
+};
+// Helper function to parse color key and create chips
+export const parseColorKey = (key: string) => {
+    const parts = key.split('--');
+    const baseName = parts[0];
+    const mode = parts[1];
+
+    // Split base name by hyphens for individual chips
+    const baseChips = baseName.split('-').filter(part => part.length > 0);
+
+    return { baseChips, mode };
+};
+
+// Helper function to extract available modes from color keys
+export const extractAvailableModes = (pairs: KeyValuePair[]): string[] => {
+    const modes = new Set<string>();
+
+    pairs.forEach(pair => {
+        const { mode } = parseColorKey(pair.key);
+        if (mode) {
+            modes.add(mode);
+        }
+    });
+
+    return Array.from(modes).sort();
+};
+
+// Helper function to get mode icon
+export const getModeIcon = (mode: string | undefined): string => {
+    if (!mode) return '';
+
+    switch (mode.toLowerCase()) {
+        case 'light':
+            return '☀️'; // Sun icon
+        case 'dark':
+            return '🌙'; // Moon icon
+        default:
+            return mode; // Plain text for other modes
+    }
+};
+
+// Helper function to convert RGB array to hex
+export const rgbArrayToHex = (rgb: number[]): string => {
+    const [r, g, b] = rgb;
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+};
+
+// Helper function to convert RGB array to rgb string
+export const rgbArrayToRgbString = (rgb: number[]): string => {
+    const [r, g, b] = rgb;
+    return `rgb(${r}, ${g}, ${b})`;
+};
+

package/src/components/JsonColorSelector/interfaces/interfaces.tsx

@@ -0,0 +1,22 @@
+
+import { RGBColor } from 'react-color';
+
+
+export interface KeyValuePair {
+    key: string;
+    value: string;
+    id: string;
+}
+
+export interface ColorFormat {
+    hex: string;
+    rgb: RGBColor;
+    hsl: { h: number; s: number; l: number; a?: number };
+}
+
+export type ColorFormatType = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
+
+// Color mapping interface
+export interface ColorMapping {
+    [key: string]: string;
+}

package/src/components/JsonColorSelector/useAsyncColorThief.tsx

@@ -0,0 +1,97 @@
+import { useState, useEffect, useCallback } from 'react';
+
+interface ColorThiefResult {
+  dominantColor: number[] | null;
+  palette: number[][] | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Custom hook for async loading and using Color Thief functionality
+ * @param imageSource - The image source (URL, base64, or ref)
+ * @param options - Configuration options for color extraction
+ * @returns Color thief result with dominant color and palette
+ */
+export const useAsyncColorThief = (
+  imageSource: string | null,
+  options: { colorCount?: number; quality?: number } = {}
+): ColorThiefResult => {
+  const [result, setResult] = useState<ColorThiefResult>({
+    dominantColor: null,
+    palette: null,
+    loading: false,
+    error: null
+  });
+
+  const extractColors = useCallback(async (src: string) => {
+    if (!src) return;
+
+    setResult(prev => ({ ...prev, loading: true, error: null }));
+
+    try {
+      // Dynamically import ColorThief
+      const ColorThief = (await import('colorthief')).default;
+      
+      // Create a temporary image element for color extraction
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      
+      img.onload = () => {
+        try {
+          const colorThief = new ColorThief();
+          
+          const dominantColor = colorThief.getColor(img);
+          const palette = colorThief.getPalette(img, options.colorCount || 5, options.quality || 10);
+          
+          setResult({
+            dominantColor,
+            palette,
+            loading: false,
+            error: null
+          });
+        } catch (error) {
+          console.error('Color extraction error:', error);
+          setResult(prev => ({
+            ...prev,
+            loading: false,
+            error: `Failed to extract colors: ${error instanceof Error ? error.message : 'Unknown error'}`
+          }));
+        }
+      };
+
+      img.onerror = () => {
+        setResult(prev => ({
+          ...prev,
+          loading: false,
+          error: 'Failed to load image'
+        }));
+      };
+
+      img.src = src;
+    } catch (error) {
+      console.error('ColorThief import error:', error);
+      setResult(prev => ({
+        ...prev,
+        loading: false,
+        error: `Failed to load Color Thief: ${error instanceof Error ? error.message : 'Unknown error'}`
+      }));
+    }
+  }, [options.colorCount, options.quality]);
+
+  useEffect(() => {
+    if (imageSource) {
+      extractColors(imageSource);
+    } else {
+      // Reset state when no image source
+      setResult({
+        dominantColor: null,
+        palette: null,
+        loading: false,
+        error: null
+      });
+    }
+  }, [imageSource, extractColors]);
+
+  return result;
+};

package/src/components/ListActive/ListActive.tsx

@@ -0,0 +1,106 @@
+import React, { act, useCallback, useEffect, useState } from 'react';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+/*import { ICommunes } from '@app/interfaces/ICommunes'; */
+import { useRecordContext, useUpdate } from 'react-admin';
+import { Switch, Box } from '@mui/material';
+import { FormControlLabel } from '@mui/material';
+import { AttributeToField } from 'dash-auto-admin/src/mui/AttributeToField';
+import AttributeToInput from 'dash-auto-admin/src/mui/AttributeToInput';
+
+export interface IListActive extends IDashAutoAdminCustomFieldComponent {
+	activeLabel?: string;
+	inactiveLabel?: string;
+	enableLabel?: string;
+	disableLabel?: string;
+}
+
+const ListActive = ({
+	method,
+    attribute,
+    resourceConfig,
+    activeLabel = 'Activo',
+    inactiveLabel = 'Inactivo',
+    enableLabel = 'Activar',
+    disableLabel = 'Desactivar',
+    showLabel = false,
+}: IListActive) => {
+	const [ ,setLoading] = useState<boolean>(true);
+	const [update, { isLoading: updateLoading }] = useUpdate();
+	const record: any = useRecordContext();
+	const [is_active, setIsActive] = useState<boolean>(false);
+	const onError = (error: any) => {
+		console.error(error);
+	};
+
+    const onChange = useCallback(
+        async (value: boolean) => {
+            /*window.dispatchEvent(
+                new MessageEvent('dash-global-loader', { data: true })
+            );*/
+            
+            try {
+                await update(
+                    resourceConfig.model + '/partial/' + record.id,
+                    {
+                        id: record.id,
+                        data: { [attribute.attribute]: value },
+                        previousData: record,
+                        meta: {
+                            method: 'POST',
+                        }
+                    },
+
+                    {
+                        onSuccess: () => {
+                            // Force a refresh of the record context
+                            setIsActive(value);
+                        },
+                        onSettled: (data, error) => {
+                            if (error) onError(error);
+                           /* window.dispatchEvent(
+                                new MessageEvent('dash-global-loader', { data: false })
+                            );*/
+                        },
+                    }
+                );
+            } catch (error) {
+                onError(error);
+            }
+        },
+        [update, record]
+    );
+
+	useEffect(() => {
+		setLoading(false);
+       
+		if (record && attribute && attribute.attribute in record) {
+			setIsActive(!!record[attribute.attribute]);
+		}
+	}, [record, attribute]);
+
+	//const textSwitch = record[attribute.attribute] ? disableLabel : enableLabel;
+	
+    switch (method) {
+		case 'create':
+        case 'edit':
+			return AttributeToInput(method, resourceConfig, {...attribute,custom:false,type:Boolean})
+		case 'view':
+            return AttributeToField(method, resourceConfig, {...attribute,custom:false,type:Boolean})
+        case 'list':
+			return (
+				<div>
+					<Box>
+						<Switch
+                           size='small'
+							onChange={(e, value) => onChange(value)}
+							checked={is_active}
+						/>{showLabel ? (is_active ? activeLabel : inactiveLabel) : <></>}
+					</Box>
+				</div>
+			)
+		default:
+			return <>{attribute.label}: {is_active ? activeLabel : inactiveLabel}</>;
+	}
+};
+
+export default ListActive;