robobyte-front-builder 1.0.17 → 1.0.21

package/src/views/builder/inspector/fields/DonutRingsEditorField.jsx

@@ -0,0 +1,337 @@
+import { useState } from 'react'
+import {
+  Box, Button, Dialog, DialogTitle, DialogContent, DialogActions,
+  Typography, IconButton, TextField, Divider, Tooltip,
+  ToggleButtonGroup, ToggleButton,
+} from '@mui/material'
+import { Add, Close, DeleteOutline, DragIndicator } from '@mui/icons-material'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const PALETTE = [
+  '#1976d2','#e91e63','#4caf50','#ff9800','#9c27b0',
+  '#00bcd4','#f44336','#009688','#3f51b5','#ff5722',
+  '#8bc34a','#607d8b',
+]
+
+const COLOR_MODES = [
+  { value: 'tints',   label: 'Tints',   title: 'Generate monochromatic tints of the base color' },
+  { value: 'palette', label: 'Palette', title: 'Use the global fallback palette' },
+  { value: 'data',    label: 'Data',    title: 'Only use colors from the data — no fallback coloring' },
+  { value: 'custom',  label: 'Custom',  title: 'Define a custom color list for this ring' },
+]
+
+const defaultRing = (index) => ({
+  id:         Date.now() + Math.random(),
+  name:       '',
+  field:      '',
+  nameField:  '',
+  valueField: '',
+  colorMode:  'tints',
+  color:      PALETTE[index % PALETTE.length],
+  customColors: '',
+})
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const SX = {
+  input: {
+    '& .MuiInputBase-root':               { color: '#e0e0e0', fontSize: 12 },
+    '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+    '& .MuiInputLabel-root':              { color: '#aaa',   fontSize: 12 },
+    '& input':                            { py: '5px', px: 1 },
+  },
+  toggle: {
+    '& .MuiToggleButton-root': {
+      fontSize: 11, py: '3px', px: 1, color: '#999',
+      borderColor: '#444',
+      '&.Mui-selected': { color: '#90caf9', bgcolor: 'rgba(144,202,249,0.1)', borderColor: '#90caf9' },
+      '&:hover': { bgcolor: 'rgba(255,255,255,0.05)' },
+    },
+  },
+}
+
+// ── Color mode preview ────────────────────────────────────────────────────────
+
+function ColorModePreview({ mode, baseColor }) {
+  if (mode === 'tints' && baseColor) {
+    const steps = 5
+    return (
+      <Box sx={{ display: 'flex', gap: 0.4 }}>
+        {Array.from({ length: steps }, (_, i) => {
+          const t = (i * 0.6) / (steps - 1)
+          const hex = baseColor.replace('#', '')
+          try {
+            const r = Math.round(parseInt(hex.slice(0,2),16) + (255 - parseInt(hex.slice(0,2),16)) * t)
+            const g = Math.round(parseInt(hex.slice(2,4),16) + (255 - parseInt(hex.slice(2,4),16)) * t)
+            const b = Math.round(parseInt(hex.slice(4,6),16) + (255 - parseInt(hex.slice(4,6),16)) * t)
+            return <Box key={i} sx={{ width: 13, height: 13, borderRadius: '2px', bgcolor: `rgb(${r},${g},${b})` }} />
+          } catch { return null }
+        })}
+      </Box>
+    )
+  }
+  if (mode === 'palette') {
+    return (
+      <Box sx={{ display: 'flex', gap: 0.4 }}>
+        {PALETTE.slice(0, 5).map(c => (
+          <Box key={c} sx={{ width: 13, height: 13, borderRadius: '2px', bgcolor: c }} />
+        ))}
+      </Box>
+    )
+  }
+  if (mode === 'data') {
+    return <Typography sx={{ fontSize: 10, color: '#666', fontStyle: 'italic' }}>from data field</Typography>
+  }
+  return null
+}
+
+// ── Single ring row ───────────────────────────────────────────────────────────
+
+function RingRow({ ring, index, onChange, onRemove }) {
+  const upd = (k, v) => onChange({ ...ring, [k]: v })
+  const mode = ring.colorMode || 'tints'
+  const needsBaseColor = mode === 'tints'
+  const needsCustom    = mode === 'custom'
+
+  return (
+    <Box sx={{
+      mb: 1.5, p: 1.5, borderRadius: 1,
+      border: '1px solid #3a3a3a',
+      bgcolor: '#1e1e1e',
+      borderLeft: `3px solid ${ring.color || '#555'}`,
+    }}>
+      {/* Header */}
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.25, gap: 1 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flex: 1 }}>
+          <DragIndicator sx={{ fontSize: 15, color: '#555' }} />
+          <Typography sx={{ fontSize: 10, color: '#888', fontWeight: 600, textTransform: 'uppercase' }}>
+            Ring {index + 1}
+          </Typography>
+          <Typography sx={{ fontSize: 10, color: '#555' }}>
+            {index === 0 ? '(innermost)' : `(layer ${index + 1})`}
+          </Typography>
+        </Box>
+        <Tooltip title='Remove ring'>
+          <IconButton size='small' onClick={onRemove}
+            sx={{ color: '#555', '&:hover': { color: '#f44336' }, p: '2px' }}>
+            <DeleteOutline sx={{ fontSize: 15 }} />
+          </IconButton>
+        </Tooltip>
+      </Box>
+
+      {/* Row 1: Data Field + Ring Label */}
+      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, mb: 1 }}>
+        <TextField
+          label='Data Field *' size='small' value={ring.field}
+          onChange={e => upd('field', e.target.value)}
+          placeholder='e.g. thisYear'
+          sx={SX.input} InputLabelProps={{ shrink: true }}
+        />
+        <TextField
+          label='Ring Label' size='small' value={ring.name}
+          onChange={e => upd('name', e.target.value)}
+          placeholder='e.g. This Year'
+          sx={SX.input} InputLabelProps={{ shrink: true }}
+        />
+      </Box>
+
+      {/* Row 2: Slice Label / Value field overrides */}
+      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, mb: 1.25 }}>
+        <TextField
+          label='Slice Label Field' size='small' value={ring.nameField}
+          onChange={e => upd('nameField', e.target.value)}
+          placeholder='default: name'
+          sx={SX.input} InputLabelProps={{ shrink: true }}
+        />
+        <TextField
+          label='Slice Value Field' size='small' value={ring.valueField}
+          onChange={e => upd('valueField', e.target.value)}
+          placeholder='default: value'
+          sx={SX.input} InputLabelProps={{ shrink: true }}
+        />
+      </Box>
+
+      {/* Color schema */}
+      <Box sx={{ mb: needsBaseColor || needsCustom ? 1 : 0 }}>
+        <Typography sx={{ fontSize: 10, color: '#888', mb: 0.75 }}>Color Schema</Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+          <ToggleButtonGroup
+            size='small'
+            exclusive
+            value={mode}
+            onChange={(_, v) => v && upd('colorMode', v)}
+            sx={SX.toggle}
+          >
+            {COLOR_MODES.map(m => (
+              <Tooltip key={m.value} title={m.title} placement='top'>
+                <ToggleButton value={m.value}>{m.label}</ToggleButton>
+              </Tooltip>
+            ))}
+          </ToggleButtonGroup>
+          <ColorModePreview mode={mode} baseColor={ring.color} />
+        </Box>
+      </Box>
+
+      {/* Base color picker — shown for Tints mode */}
+      {needsBaseColor && (
+        <Box>
+          <Typography sx={{ fontSize: 10, color: '#888', mb: 0.5 }}>
+            Base Color
+          </Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Box sx={{
+              width: 22, height: 22, borderRadius: '4px',
+              bgcolor: ring.color || '#888',
+              border: '1px solid #555', flexShrink: 0,
+              overflow: 'hidden', position: 'relative',
+            }}>
+              <input
+                type='color'
+                value={ring.color || '#1976d2'}
+                onChange={e => upd('color', e.target.value)}
+                style={{
+                  position: 'absolute', inset: 0, width: '200%', height: '200%',
+                  border: 'none', padding: 0, cursor: 'pointer', opacity: 0,
+                }}
+              />
+            </Box>
+            <TextField
+              size='small' value={ring.color}
+              onChange={e => upd('color', e.target.value)}
+              sx={{ ...SX.input, width: 100 }}
+              inputProps={{ style: { fontFamily: 'monospace', fontSize: 11 } }}
+            />
+            <Box sx={{ display: 'flex', gap: 0.4, flexWrap: 'wrap', flex: 1 }}>
+              {PALETTE.map(c => (
+                <Box key={c} onClick={() => upd('color', c)} sx={{
+                  width: 13, height: 13, borderRadius: '3px', bgcolor: c,
+                  cursor: 'pointer',
+                  border: ring.color === c ? '2px solid #fff' : '1px solid transparent',
+                  transition: 'transform .1s', '&:hover': { transform: 'scale(1.2)' },
+                }} />
+              ))}
+            </Box>
+          </Box>
+        </Box>
+      )}
+
+      {/* Custom colors — shown for Custom mode */}
+      {needsCustom && (
+        <Box>
+          <Typography sx={{ fontSize: 10, color: '#888', mb: 0.5 }}>
+            Custom Colors <Typography component='span' sx={{ fontSize: 10, color: '#555' }}>(JSON array)</Typography>
+          </Typography>
+          <TextField
+            fullWidth size='small'
+            value={ring.customColors || ''}
+            onChange={e => upd('customColors', e.target.value)}
+            placeholder='["#1976d2","#e91e63","#4caf50","#ff9800"]'
+            sx={SX.input}
+            InputLabelProps={{ shrink: true }}
+          />
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export default function DonutRingsEditorField({ field, onChange }) {
+  const [open, setOpen] = useState(false)
+
+  const rings = Array.isArray(field?.value) ? field.value : []
+  const save  = (next) => onChange({ valueType: 'value', value: next })
+
+  const addRing    = () => save([...rings, defaultRing(rings.length)])
+  const updateRing = (i, updated) => save(rings.map((r, idx) => idx === i ? updated : r))
+  const removeRing = (i)          => save(rings.filter((_, idx) => idx !== i))
+
+  return (
+    <>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Button
+          size='small' variant='outlined'
+          onClick={() => setOpen(true)}
+          sx={{
+            fontSize: 11, py: 0.5, px: 1.5,
+            borderColor: '#555', color: '#ccc',
+            '&:hover': { borderColor: '#888', bgcolor: 'rgba(255,255,255,0.04)' },
+          }}
+        >
+          Configure Rings
+        </Button>
+        {rings.length > 0 && (
+          <Typography sx={{ fontSize: 11, color: '#888' }}>
+            {rings.length} ring{rings.length !== 1 ? 's' : ''}
+          </Typography>
+        )}
+        {rings.length > 0 && (
+          <Box sx={{ display: 'flex', gap: 0.4 }}>
+            {rings.slice(0, 8).map((r, i) => (
+              <Box key={i} sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: r.color || '#666' }} />
+            ))}
+          </Box>
+        )}
+      </Box>
+
+      <Dialog
+        open={open} onClose={() => setOpen(false)}
+        maxWidth='sm' fullWidth
+        PaperProps={{ sx: { bgcolor: '#1a1a1a', color: '#e0e0e0', backgroundImage: 'none' } }}
+      >
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 1 }}>
+          <Box>
+            <Typography sx={{ fontWeight: 600, fontSize: 14 }}>Configure Rings</Typography>
+            <Typography sx={{ fontSize: 11, color: '#888', mt: 0.25 }}>
+              First ring is innermost · each ring is a separate data array
+            </Typography>
+          </Box>
+          <IconButton size='small' onClick={() => setOpen(false)} sx={{ color: '#888' }}>
+            <Close sx={{ fontSize: 18 }} />
+          </IconButton>
+        </DialogTitle>
+
+        <Divider sx={{ borderColor: '#333' }} />
+
+        <DialogContent sx={{ pt: 2, pb: 1 }}>
+          {rings.length === 0 && (
+            <Box sx={{ textAlign: 'center', py: 3 }}>
+              <Typography sx={{ fontSize: 12, color: '#666', mb: 0.5 }}>No rings yet.</Typography>
+              <Typography sx={{ fontSize: 11, color: '#555' }}>
+                Add a ring and point its Data Field to an array in your data.
+              </Typography>
+            </Box>
+          )}
+          {rings.map((r, i) => (
+            <RingRow
+              key={r.id ?? i}
+              ring={r}
+              index={i}
+              onChange={updated => updateRing(i, updated)}
+              onRemove={() => removeRing(i)}
+            />
+          ))}
+          <Button
+            startIcon={<Add />} onClick={addRing} size='small'
+            sx={{ mt: 0.5, fontSize: 12, color: '#90caf9', '&:hover': { bgcolor: 'rgba(144,202,249,0.08)' } }}
+          >
+            Add Ring
+          </Button>
+        </DialogContent>
+
+        <Divider sx={{ borderColor: '#333' }} />
+
+        <DialogActions sx={{ px: 2, py: 1 }}>
+          <Button
+            onClick={() => setOpen(false)} size='small' variant='contained'
+            sx={{ fontSize: 12, bgcolor: '#333', '&:hover': { bgcolor: '#444' } }}
+          >
+            Done
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}