@dashadmin/dash-components 1.3.73 → 1.3.74-srcfree.2

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

@@ -1,420 +0,0 @@
-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 { useTranslate } from 'react-admin';
-import { useAsyncColorThief } from '../useAsyncColorThief';
-import { getContrastColor, rgbArrayToHex } from '../helpers/functions';
-import { KeyValuePair } from '../interfaces/interfaces';
-import { useAxios } from 'dash-axios-hook';
-
-const MAX_IMAGE_MB = 5;
-
-const ImageColorExtractor = memo<{
-    onColorsExtracted: (colors: number[][]) => void;
-    onColorsUpdate?: (newPairs: KeyValuePair[]) => void;
-    existingPairs?: KeyValuePair[];
-    /** When false, the OpenAI theme generation UI is hidden — only local extraction applies. */
-    aiEnabled?: boolean;
-    /** Local (no-AI) apply: receives the extracted RGB palette so the caller can map it to base colors. */
-    onApplyLocal?: (palette: number[][]) => void;
-}>(({ onColorsExtracted, onColorsUpdate, existingPairs = [], aiEnabled = true, onApplyLocal }) => {
-    const translate = useTranslate();
-    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);
-    const [isDragOver, setIsDragOver] = useState<boolean>(false);
-
-    // 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]);
-
-    // Shared validation + preview setup for a file coming from either the file
-    // input or a drag-and-drop, so the two paths can never drift apart.
-    const processFile = useCallback((file: File) => {
-        // Validate file type
-        if (!file.type.startsWith('image/')) {
-            alert(translate('colorSelector.imageExtractor.invalid_file_type'));
-            return;
-        }
-
-        // Validate file size
-        if (file.size > MAX_IMAGE_MB * 1024 * 1024) {
-            alert(translate('colorSelector.imageExtractor.file_too_large', { limit: MAX_IMAGE_MB }));
-            return;
-        }
-
-        setUploadedFile(file);
-
-        // Create preview URL
-        const previewUrl = URL.createObjectURL(file);
-        setImageUrl(previewUrl);
-    }, [translate]);
-
-    // Handle file selection for upload
-    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0];
-        if (file) {
-            processFile(file);
-        }
-    };
-
-    // Drag-and-drop onto the upload dropzone
-    const handleDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-        event.preventDefault();
-        event.stopPropagation();
-        setIsDragOver(true);
-    }, []);
-
-    const handleDragLeave = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-        event.preventDefault();
-        event.stopPropagation();
-        setIsDragOver(false);
-    }, []);
-
-    const handleDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-        event.preventDefault();
-        event.stopPropagation();
-        setIsDragOver(false);
-
-        const file = event.dataTransfer.files?.[0];
-        if (file) {
-            processFile(file);
-        }
-    }, [processFile]);
-
-    // 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(translate('colorSelector.imageExtractor.no_palette_error'));
-            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 || translate('colorSelector.imageExtractor.theme_generation_failed'));
-            }
-        } catch (error) {
-            console.error('Theme generation error:', error);
-            setThemeError(
-                error instanceof Error
-                    ? error.message
-                    : translate('colorSelector.imageExtractor.theme_generation_failed')
-            );
-        } finally {
-            setIsGeneratingTheme(false);
-        }
-    }, [extractedPalette, themePrompt, existingPairs, onColorsUpdate, axios, translate]);
-
-    return (
-        <Box sx={{ mt: 3, p: 3, borderRadius: 2 }}>
-            <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                <PaletteIcon />
-                {aiEnabled
-                    ? translate('colorSelector.imageExtractor.title_ai')
-                    : translate('colorSelector.imageExtractor.title_local')}
-            </Typography>
-
-            <Divider sx={{ mb: 3 }} />
-
-            {/* Image Upload Section */}
-            <Box sx={{ mb: 3 }}>
-                {!imageUrl ? (
-                    <Box
-                        onDragEnter={handleDragOver}
-                        onDragOver={handleDragOver}
-                        onDragLeave={handleDragLeave}
-                        onDrop={handleDrop}
-                        sx={{
-                            textAlign: 'center',
-                            py: 4,
-                            backgroundColor: isDragOver ? 'rgba(25, 118, 210, 0.08)' : 'rgba(0,0,0,0.02)',
-                            borderRadius: 1,
-                            border: isDragOver ? '2px dashed #1976d2' : '2px dashed #e0e0e0',
-                            transition: 'background-color 0.2s ease, border-color 0.2s ease',
-                        }}
-                    >
-                        <Input
-                            type="file"
-                            inputProps={{ accept: 'image/*' }}
-                            onChange={handleFileSelect}
-                            sx={{ display: 'none' }}
-                            id="color-extractor-upload"
-                        />
-                        <Typography variant="body1" color="textSecondary" gutterBottom>
-                            {translate('colorSelector.imageExtractor.upload_prompt')}
-                        </Typography>
-                        <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
-                            {translate('colorSelector.imageExtractor.upload_hint')}
-                        </Typography>
-                        <label htmlFor="color-extractor-upload">
-                            <Button
-                                variant="contained"
-                                component="span"
-                                startIcon={<CloudUploadIcon />}
-                                size="large"
-                            >
-                                {translate('colorSelector.imageExtractor.upload_button')}
-                            </Button>
-                        </label>
-                        <Typography variant="caption" color="textSecondary" sx={{ display: 'block', mt: 1.5 }}>
-                            {translate('colorSelector.imageExtractor.drop_hint')}
-                        </Typography>
-                    </Box>
-                ) : (
-                    <Card sx={{ maxWidth: 400, mb: 3 }}>
-                        <Box sx={{ position: 'relative' }}>
-                            <CardMedia
-                                component="img"
-                                height="200"
-                                image={imageUrl}
-                                alt={translate('colorSelector.imageExtractor.uploaded_image_alt')}
-                                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
-                    sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 2,
-                        mb: 3,
-                        p: 2,
-                        backgroundColor: 'rgba(25, 118, 210, 0.04)',
-                        borderRadius: 1
-                    }}>
-                    <CircularProgress size={20} />
-                    <Typography>{translate('colorSelector.imageExtractor.extracting')}</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>
-                        {translate('colorSelector.imageExtractor.extracted_colors', { count: extractedPalette.length })}
-                    </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 ? `(${translate('colorSelector.imageExtractor.dominant_label')})` : ''}`}
-                                >
-                                    <Typography
-                                        variant="caption"
-                                        sx={{
-                                            color: getContrastColor(hexColor),
-                                            fontWeight: 'bold',
-                                            fontSize: '0.8rem',
-                                        }}
-                                    >
-                                        {index + 1}
-                                    </Typography>
-                                </Box>
-                            );
-                        })}
-                    </Box>
-
-                    {/* Theme Generation Controls */}
-                    <Box sx={{ mb: 3 }}>
-                        {aiEnabled && (
-                            <TextField
-                                fullWidth
-                                multiline
-                                rows={2}
-                                placeholder={translate('colorSelector.imageExtractor.theme_description_placeholder')}
-                                value={themePrompt}
-                                onChange={(e) => setThemePrompt(e.target.value)}
-                                sx={{ mb: 2 }}
-                                label={translate('colorSelector.imageExtractor.theme_description_label')}
-                            />
-                        )}
-
-                        <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-                            {onApplyLocal && (
-                                <Button
-                                    variant={aiEnabled ? 'outlined' : 'contained'}
-                                    startIcon={<UpdateIcon />}
-                                    onClick={() => onApplyLocal(extractedPalette)}
-                                    color="primary"
-                                >
-                                    {translate('colorSelector.imageExtractor.apply_colors_button')}
-                                </Button>
-                            )}
-                            {aiEnabled && (
-                                <Button
-                                    variant="contained"
-                                    startIcon={isGeneratingTheme ? <CircularProgress size={16} /> : <AutoFixHighIcon />}
-                                    onClick={handleGenerateTheme}
-                                    disabled={isGeneratingTheme}
-                                    color="primary"
-                                >
-                                    {isGeneratingTheme
-                                        ? translate('colorSelector.imageExtractor.generating_button')
-                                        : translate('colorSelector.imageExtractor.generate_button')}
-                                </Button>
-                            )}
-                        </Box>
-                    </Box>
-
-                    <Typography variant="body2" color="textSecondary" sx={{ fontStyle: 'italic' }}>
-                        {onApplyLocal && (
-                            <>
-                                • <strong>{translate('colorSelector.imageExtractor.apply_colors_help_label')}</strong>{' '}
-                                {translate('colorSelector.imageExtractor.apply_colors_help_desc')}
-                                <br />
-                            </>
-                        )}
-                        {aiEnabled && (
-                            <>
-                                • <strong>{translate('colorSelector.imageExtractor.generate_help_label')}</strong>{' '}
-                                {translate('colorSelector.imageExtractor.generate_help_desc')}
-                            </>
-                        )}
-                    </Typography>
-                </Box>
-            )}
-        </Box>
-    );
-});
-
-export default ImageColorExtractor;

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

@@ -1,123 +0,0 @@
-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})`;
-};
-