@dashadmin/dash-components 1.3.17 → 1.3.20

package/dist/components/JsonColorSelector/JsonColorSelector.tsx.bkup

@@ -0,0 +1,746 @@
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+import { useRecordContext } from 'react-admin';
+import { useFormContext } from 'react-hook-form';
+import { 
+    Box, 
+    Button, 
+    IconButton, 
+    TextField, 
+    Typography, 
+    Table, 
+    TableBody, 
+    TableCell, 
+    TableContainer, 
+    TableHead, 
+    TableRow, 
+    Paper,
+    Popover,
+    Slider,
+    Grid,
+    Input,
+    Tabs,
+    Tab
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import { useState, useEffect, useCallback } from 'react';
+
+interface KeyValuePair {
+    key: string;
+    value: string;
+    id: string;
+}
+
+interface RGB {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+
+interface HSL {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+
+// Custom MUI-style color picker component
+const MuiColorPicker = ({ color, onChange }: { color: string, onChange: (color: string) => void }) => {
+    const [tabValue, setTabValue] = useState(0);
+    const [rgb, setRgb] = useState<RGB>({ r: 0, g: 0, b: 0, a: 1 });
+    const [hsl, setHsl] = useState<HSL>({ h: 0, s: 0, l: 0, a: 1 });
+    const [hex, setHex] = useState('#000000');
+    
+    // Parse the initial color
+    useEffect(() => {
+        if (color.startsWith('#')) {
+            setHex(color);
+            setRgb(hexToRgb(color));
+            setHsl(rgbToHsl(hexToRgb(color)));
+        } else if (color.startsWith('rgb')) {
+            const rgbValues = parseRgb(color);
+            setRgb(rgbValues);
+            setHex(rgbToHex(rgbValues));
+            setHsl(rgbToHsl(rgbValues));
+        }
+    }, [color]);
+    
+    // Convert hex to rgb
+    const hexToRgb = (hex: string): RGB => {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+            a: 1
+        } : { r: 0, g: 0, b: 0, a: 1 };
+    };
+    
+    // Convert rgb to hex
+    const rgbToHex = (rgb: RGB): string => {
+        return '#' + ((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1);
+    };
+    
+    // Parse rgb string
+    const parseRgb = (rgbStr: string): RGB => {
+        const match = rgbStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/);
+        if (match) {
+            return {
+                r: parseInt(match[1]),
+                g: parseInt(match[2]),
+                b: parseInt(match[3]),
+                a: match[4] ? parseFloat(match[4]) : 1
+            };
+        }
+        return { r: 0, g: 0, b: 0, a: 1 };
+    };
+    
+    // Convert rgb to hsl
+    const rgbToHsl = (rgb: RGB): HSL => {
+        const r = rgb.r / 255;
+        const g = rgb.g / 255;
+        const b = rgb.b / 255;
+        
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0, s = 0, l = (max + min) / 2;
+        
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            
+            switch (max) {
+                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+                case g: h = (b - r) / d + 2; break;
+                case b: h = (r - g) / d + 4; break;
+            }
+            
+            h /= 6;
+        }
+        
+        return { h: h * 360, s: s * 100, l: l * 100, a: rgb.a };
+    };
+    
+    // Convert hsl to rgb
+    const hslToRgb = (hsl: HSL): RGB => {
+        const h = hsl.h / 360;
+        const s = hsl.s / 100;
+        const l = hsl.l / 100;
+        
+        let r, g, b;
+        
+        if (s === 0) {
+            r = g = b = l;
+        } else {
+            const hue2rgb = (p: number, q: number, t: number) => {
+                if (t < 0) t += 1;
+                if (t > 1) t -= 1;
+                if (t < 1/6) return p + (q - p) * 6 * t;
+                if (t < 1/2) return q;
+                if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+                return p;
+            };
+            
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            
+            r = hue2rgb(p, q, h + 1/3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1/3);
+        }
+        
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255),
+            a: hsl.a
+        };
+    };
+    
+    // Handle RGB changes
+    const handleRgbChange = (channel: keyof RGB, value: number) => {
+        const newRgb = { ...rgb, [channel]: value };
+        setRgb(newRgb);
+        setHex(rgbToHex(newRgb));
+        setHsl(rgbToHsl(newRgb));
+        
+        if (channel === 'a') {
+            onChange(`rgba(${newRgb.r}, ${newRgb.g}, ${newRgb.b}, ${newRgb.a})`);
+        } else {
+            onChange(rgbToHex(newRgb));
+        }
+    };
+    
+    // Handle HSL changes
+    const handleHslChange = (channel: keyof HSL, value: number) => {
+        const newHsl = { ...hsl, [channel]: value };
+        setHsl(newHsl);
+        const newRgb = hslToRgb(newHsl);
+        setRgb(newRgb);
+        setHex(rgbToHex(newRgb));
+        
+        if (channel === 'a') {
+            onChange(`rgba(${newRgb.r}, ${newRgb.g}, ${newRgb.b}, ${newRgb.a})`);
+        } else {
+            onChange(rgbToHex(newRgb));
+        }
+    };
+    
+    // Handle hex input change
+    const handleHexChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newHex = event.target.value;
+        if (/^#[0-9A-F]{6}$/i.test(newHex)) {
+            setHex(newHex);
+            const newRgb = hexToRgb(newHex);
+            setRgb(newRgb);
+            setHsl(rgbToHsl(newRgb));
+            onChange(newHex);
+        }
+    };
+    
+    // Generate color palette
+    const generateColorPalette = () => {
+        const colors = [];
+        const baseColors = [
+            '#f44336', '#e91e63', '#9c27b0', '#673ab7', 
+            '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4',
+            '#009688', '#4caf50', '#8bc34a', '#cddc39', 
+            '#ffeb3b', '#ffc107', '#ff9800', '#ff5722',
+            '#795548', '#9e9e9e', '#607d8b', '#000000'
+        ];
+        
+        for (let i = 0; i < baseColors.length; i++) {
+            colors.push(
+                <Box 
+                    key={i}
+                    onClick={() => {
+                        setHex(baseColors[i]);
+                        const newRgb = hexToRgb(baseColors[i]);
+                        setRgb(newRgb);
+                        setHsl(rgbToHsl(newRgb));
+                        onChange(baseColors[i]);
+                    }}
+                    sx={{
+                        width: 24,
+                        height: 24,
+                        backgroundColor: baseColors[i],
+                        cursor: 'pointer',
+                        border: hex === baseColors[i] ? '2px solid #fff' : '1px solid #ccc',
+                        boxShadow: hex === baseColors[i] ? '0 0 0 1px #000' : 'none',
+                        borderRadius: '2px',
+                        margin: '2px'
+                    }}
+                />
+            );
+        }
+        
+        return (
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', maxWidth: 240, mb: 2 }}>
+                {colors}
+            </Box>
+        );
+    };
+    
+    // Color preview
+    const colorPreview = (
+        <Box sx={{ 
+            width: '100%', 
+            height: 40, 
+            backgroundColor: rgb.a < 1 ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})` : hex,
+            borderRadius: 1,
+            border: '1px solid #ccc',
+            mb: 2,
+            backgroundImage: rgb.a < 1 ? 'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)' : 'none',
+            backgroundSize: '10px 10px',
+            backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px'
+        }} />
+    );
+    
+    return (
+        <Box sx={{ p: 2, width: 240 }}>
+            {colorPreview}
+            
+            {generateColorPalette()}
+            
+            <Tabs 
+                value={tabValue} 
+                onChange={(_, newValue) => setTabValue(newValue)}
+                sx={{ mb: 2 }}
+                variant="fullWidth"
+            >
+                <Tab label="RGB" />
+                <Tab label="HSL" />
+                <Tab label="HEX" />
+            </Tabs>
+            
+            {tabValue === 0 && (
+                <Box>
+                    <Grid container spacing={2} alignItems="center" sx={{ mb: 1 }}>
+                        <Grid item xs={2}>
+                            <Typography>R</Typography>
+                        </Grid>
+                        <Grid item xs={7}>
+                            <Slider
+                                value={rgb.r}
+                                min={0}
+                                max={255}
+                                onChange={(_, value) => handleRgbChange('r', value as number)}
+                                sx={{ 
+                                    color: 'red',
+                                    '& .MuiSlider-thumb': {
+                                        backgroundColor: 'red',
+                                    }
+                                }}
+                            />
+                        </Grid>
+                        <Grid item xs={3}>
+                            <Input
+                                value={rgb.r}
+                                size="small"
+                                onChange={(e) => {
+                                    const val = parseInt(e.target.value);
+                                    if (!isNaN(val) && val >= 0 && val <= 255) {
+                                        handleRgbChange('r', val);
+                                    }
+                                }}
+                                inputProps={{
+                                    min: 0,
+                                    max: 255,
+                                    type: 'number',
+                                }}
+                            />
+                        </Grid>
+                    </Grid>
+                    
+                    {/* Similar Grid containers for G, B, and A channels */}
+                    {/* ... */}
+                </Box>
+            )}
+            
+            {/* Similar blocks for HSL and HEX tabs */}
+            {/* ... */}
+        </Box>
+    );
+};
+
+export const JsonEdit: React.FC<IDashAutoAdminCustomFieldComponent> = (props) => {
+    const { method, attribute, resourceConfig } = props;
+    const record = useRecordContext();
+    const { setValue, getValues } = useFormContext();
+    
+    const attributePath = attribute.attribute;
+    const isNestedSetting = attributePath.startsWith('settings.');
+    const settingsPath = isNestedSetting ? attributePath.split('.').slice(1).join('.') : attributePath;
+    
+    const [pairs, setPairs] = useState<KeyValuePair[]>([]);
+    const [keyError, setKeyError] = useState<{[key: string]: string}>({});
+    
+    // State for color picker - simplified to a single active picker ID
+    const [activePickerId, setActivePickerId] = useState<string | null>(null);
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+    
+    useEffect(() => {
+        let initialValue: Record<string, any> = {};
+        
+        if (isNestedSetting && record?.settings) {
+            const settings = record.settings || {};
+            initialValue = getNestedValue(settings, settingsPath) || {};
+        } else if (record?.[attributePath]) {
+            initialValue = record[attributePath] || {};
+        }
+        
+        const initialPairs = Object.entries(initialValue).map(([key, value]) => ({
+            key,
+            value: String(value),
+            id: generateId()
+        }));
+        
+        setPairs(initialPairs);
+    }, [record, attributePath]);
+    
+    const getNestedValue = (obj: any, path: string): any => {
+        if (!path) return obj;
+        const keys = path.split('.');
+        return keys.reduce((o, key) => (o && o[key] !== undefined ? o[key] : {}), obj);
+    };
+    
+    const setNestedValue = (obj: any, path: string, value: any): any => {
+        if (!path) return value;
+        
+        const keys = path.split('.');
+        const lastKey = keys.pop();
+        const lastObj = keys.reduce((o, key) => {
+            if (o[key] === undefined) o[key] = {};
+            return o[key];
+        }, obj);
+        
+        if (lastKey) {
+            lastObj[lastKey] = value;
+        }
+        return obj;
+    };
+    
+    const generateId = (): string => {
+        return Math.random().toString(36).substring(2, 11);
+    };
+    
+    const addPair = () => {
+        setPairs([...pairs, { key: '', value: '#000000', id: generateId() }]);
+    };
+    
+    const removePair = (id: string) => {
+        setPairs(pairs.filter(pair => pair.id !== id));
+        updateFormValue(pairs.filter(pair => pair.id !== id));
+    };
+    
+    const handleKeyChange = (id: string, newKey: string) => {
+        const isDuplicate = pairs.some(pair => pair.id !== id && pair.key === newKey);
+        
+        if (isDuplicate) {
+            setKeyError({...keyError, [id]: 'Duplicate key'});
+        } else {
+            setKeyError({...keyError, [id]: ''});
+        }
+        
+        const updatedPairs = pairs.map(pair => 
+            pair.id === id ? { ...pair, key: newKey } : pair
+        );
+        
+        setPairs(updatedPairs);
+        updateFormValue(updatedPairs);
+    };
+    
+    const handleColorChange = (id: string, newColor: string) => {
+        const updatedPairs = pairs.map(pair => 
+            pair.id === id ? { ...pair, value: newColor } : pair
+        );
+        
+        setPairs(updatedPairs);
+        updateFormValue(updatedPairs);
+    };
+    
+    const updateFormValue = (currentPairs: KeyValuePair[]) => {
+        const obj = currentPairs.reduce((acc, pair) => {
+            if (pair.key.trim()) {
+                acc[pair.key] = pair.value;
+            }
+            return acc;
+        }, {} as Record<string, any>);
+        
+        if (isNestedSetting) {
+            const currentSettings = getValues('settings') || {};
+            const updatedSettings = setNestedValue({...currentSettings}, settingsPath, obj);
+            setValue('settings', updatedSettings, { shouldDirty: true });
+        } else {
+            setValue(attributePath, obj, { shouldDirty: true });
+        }
+    };
+    
+    // Simplified handler for opening the color picker
+    const handleOpenColorPicker = useCallback((event: React.MouseEvent<HTMLElement>, id: string) => {
+        // Stop event propagation to prevent any parent handlers from firing
+        event.stopPropagation();
+        
+        // Set both states in a single render cycle
+        setAnchorEl(event.currentTarget);
+        setActivePickerId(id);
+    }, []);
+    
+    // Simplified handler for closing the color picker
+    const handleCloseColorPicker = useCallback(() => {
+        setAnchorEl(null);
+        setActivePickerId(null);
+    }, []);
+    
+    return (
+        <Box sx={{ mt: 1, mb: 2 }}>
+            <Typography variant="subtitle1" gutterBottom>
+                {attribute.label || 'Color Settings'}
+            </Typography>
+            
+            <TableContainer component={Paper} sx={{ mb: 2 }}>
+                <Table size="small">
+                    <TableHead>
+                        <TableRow>
+                            <TableCell width="40%">Key</TableCell>
+                            <TableCell width="50%">Color</TableCell>
+                            <TableCell width="10%" align="center">Actions</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {pairs.map((pair) => (
+                            <TableRow key={pair.id}>
+                                <TableCell>
+                                    <TextField
+                                        fullWidth
+                                        size="small"
+                                        value={pair.key}
+                                        onChange={(e) => handleKeyChange(pair.id, e.target.value)}
+                                        error={!!keyError[pair.id]}
+                                        helperText={keyError[pair.id]}
+                                    />
+                                </TableCell>
+                                <TableCell>
+                                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                                        {/* Simplified color box with explicit onClick handler */}
+                                        <Box
+                                            onClick={(e) => handleOpenColorPicker(e, pair.id)}
+                                            sx={{
+                                                width: 36,
+                                                height: 36,
+                                                borderRadius: 1,
+                                                border: '2px solid #ccc',
+                                                backgroundColor: pair.value,
+                                                cursor: 'pointer',
+                                                backgroundImage: pair.value.includes('rgba') ? 
+                                                    'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)' : 
+                                                    'none',
+                                                backgroundSize: '10px 10px',
+                                                backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px'
+                                            }}
+                                        />
+                                        <TextField
+                                            fullWidth
+                                            size="small"
+                                            value={pair.value}
+                                            InputProps={{ readOnly: true }}
+                                        />
+                                    </Box>
+                                </TableCell>
+                                <TableCell align="center">
+                                    <IconButton 
+                                        size="small" 
+                                        onClick={() => removePair(pair.id)}
+                                        color="error"
+                                    >
+                                        <DeleteIcon fontSize="small" />
+                                    </IconButton>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            
+            {/* Simplified popover with explicit open condition */}
+            <Popover
+                open={Boolean(anchorEl) && activePickerId !== null}
+                anchorEl={anchorEl}
+                onClose={handleCloseColorPicker}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'left',
+                }}
+                sx={{ 
+                    '& .MuiPopover-paper': { 
+                        boxShadow: 3,
+                        borderRadius: 1
+                    } 
+                }}
+            >
+                {activePickerId && (
+                    <Box p={2}>
+                        {/* Simplified color picker - just a basic palette for testing */}
+                        <Box sx={{ mb: 2 }}>
+                            <Typography variant="subtitle2" gutterBottom>
+                                Select a color
+                            </Typography>
+                            <Box sx={{ 
+                                width: '100%', 
+                                height: 40, 
+                                backgroundColor: pairs.find(p => p.id === activePickerId)?.value || '#000000',
+                                borderRadius: 1,
+                                border: '1px solid #ccc',
+                                mb: 2
+                            }} />
+                            
+                            {/* Basic color palette */}
+                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 2 }}>
+                                {['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', 
+                                  '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39',
+                                  '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', 
+                                  '#607d8b', '#000000'].map((color, index) => (
+                                    <Box 
+                                        key={index}
+                                        onClick={() => {
+                                            handleColorChange(activePickerId, color);
+                                        }}
+                                        sx={{
+                                            width: 24,
+                                            height: 24,
+                                            backgroundColor: color,
+                                            cursor: 'pointer',
+                                            border: '1px solid #ccc',
+                                            borderRadius: '2px'
+                                        }}
+                                    />
+                                ))}
+                            </Box>
+                            
+                            {/* Simple RGB sliders */}
+                            <Typography variant="caption">Red</Typography>
+                            <Slider 
+                                min={0}
+                                max={255}
+                                sx={{ color: 'red' }}
+                                onChange={(_, value) => {
+                                    const currentColor = pairs.find(p => p.id === activePickerId)?.value || '#000000';
+                                    const rgb = hexToRgb(currentColor);
+                                    rgb.r = value as number;
+                                    handleColorChange(activePickerId, rgbToHex(rgb));
+                                }}
+                            />
+                            
+                            <Typography variant="caption">Green</Typography>
+                            <Slider 
+                                min={0}
+                                max={255}
+                                sx={{ color: 'green' }}
+                                onChange={(_, value) => {
+                                    const currentColor = pairs.find(p => p.id === activePickerId)?.value || '#000000';
+                                    const rgb = hexToRgb(currentColor);
+                                    rgb.g = value as number;
+                                    handleColorChange(activePickerId, rgbToHex(rgb));
+                                }}
+                            />
+                            
+                            <Typography variant="caption">Blue</Typography>
+                            <Slider 
+                                min={0}
+                                max={255}
+                                sx={{ color: 'blue' }}
+                                onChange={(_, value) => {
+                                    const currentColor = pairs.find(p => p.id === activePickerId)?.value || '#000000';
+                                    const rgb = hexToRgb(currentColor);
+                                    rgb.b = value as number;
+                                    handleColorChange(activePickerId, rgbToHex(rgb));
+                                }}
+                            />
+                        </Box>
+                    </Box>
+                )}
+            </Popover>
+            
+            <Button 
+                startIcon={<AddIcon />} 
+                variant="outlined" 
+                size="small" 
+                onClick={addPair}
+            >
+                Add Color
+            </Button>
+        </Box>
+    );
+};
+
+// Helper functions for the simplified color picker
+const hexToRgb = (hex: string): { r: number, g: number, b: number } => {
+    // Remove # if present
+    hex = hex.replace(/^#/, '');
+    
+    // Parse the hex values
+    const bigint = parseInt(hex, 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    
+    return { r, g, b };
+};
+
+const rgbToHex = (rgb: { r: number, g: number, b: number }): string => {
+    return '#' + ((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1);
+};
+
+export const JsonView: React.FC<IDashAutoAdminCustomFieldComponent> = (props) => {
+    const { attribute } = props;
+    const record = useRecordContext();
+    
+    const attributePath = attribute.attribute;
+    const isNestedSetting = attributePath.startsWith('settings.');
+    const settingsPath = isNestedSetting ? attributePath.split('.').slice(1).join('.') : attributePath;
+    
+    let displayValue: Record<string, any> = {};
+    
+    if (isNestedSetting && record?.settings) {
+        const settings = record.settings || {};
+        if (settingsPath) {
+            const keys = settingsPath.split('.');
+            displayValue = keys.reduce((o, key) => (o && o[key] !== undefined ? o[key] : {}), settings);
+        } else {
+            displayValue = settings;
+        }
+    } else if (record?.[attributePath]) {
+        displayValue = record[attributePath];
+    }
+    
+    return (
+        <Box sx={{ mt: 1, mb: 2 }}>
+            <Typography variant="subtitle1" gutterBottom>
+                {attribute.label || 'Color Settings'}
+            </Typography>
+            
+            {Object.keys(displayValue).length > 0 ? (
+                <TableContainer component={Paper}>
+                    <Table size="small">
+                        <TableHead>
+                            <TableRow>
+                                <TableCell width="40%">Key</TableCell>
+                                <TableCell width="60%">Color</TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {Object.entries(displayValue).map(([key, value]) => (
+                                <TableRow key={key}>
+                                    <TableCell>{key}</TableCell>
+                                    <TableCell>
+                                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                                            <Box
+                                                sx={{
+                                                    width: 36,
+                                                    height: 36,
+                                                    borderRadius: 1,
+                                                    border: '2px solid #ccc',
+                                                    backgroundColor: value as string,
+                                                    backgroundImage: String(value).includes('rgba') ? 
+                                                        'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)' : 
+                                                        'none',
+                                                    backgroundSize: '10px 10px',
+                                                    backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px'
+                                                }}
+                                            />
+                                            {String(value)}
+                                        </Box>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            ) : (
+                <Typography variant="body2" color="textSecondary">
+                    No colors configured
+                </Typography>
+            )}
+        </Box>
+    );
+};
+
+const JsonColorSelector = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+    switch (method) {
+        case 'edit':
+            return <><JsonEdit attribute={attribute} method={method} resourceConfig={resourceConfig} /></>;
+        case 'create':
+            return <JsonEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+        case 'view':
+            return <JsonView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+        default:
+            return null;
+    }
+};
+
+export default JsonColorSelector;