@dashadmin/dash-components 1.3.24 → 1.3.26

package/dist/components/JsonColorSelector/components/ImageColorExtractor.js

@@ -1 +1,283 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Box as r,Button as A,IconButton as D,Typography as i,Card as j,CardMedia as L,CircularProgress as U,Input as O,Alert as F,TextField as H,Divider as K}from"@mui/material";import M from"@mui/icons-material/Delete";import V from"@mui/icons-material/CloudUpload";import $ from"@mui/icons-material/Palette";import q from"@mui/icons-material/AutoFixHigh";import{useState as m,useEffect as _,memo as J,useCallback as N}from"react";import{useAsyncColorThief as Q}from"../useAsyncColorThief";import{getContrastColor as X,rgbArrayToHex as Y}from"../helpers/functions";import{useAxios as Z}from"@dashadmin/dash-axios-hook";const ee=J(({onColorsExtracted:x,onColorsUpdate:h,existingPairs:I=[]})=>{const[c,C]=m(null),[te,v]=m(null),[f,R]=m(""),[y,T]=m(!1),[B,b]=m(null),[n,P]=m([]),w=Z(),{dominantColor:g,palette:p,loading:E,error:k}=Q(c,{colorCount:8,quality:10});_(()=>{p&&p.length>0&&(P(p),x(p))},[p,x]);const S=t=>{const o=t.target.files?.[0];if(o){if(!o.type.startsWith("image/")){alert("Please select a valid image file");return}if(o.size>5*1024*1024){alert("File size must be less than 5MB");return}v(o);const s=URL.createObjectURL(o);C(s)}},z=()=>{c&&c.startsWith("blob:")&&URL.revokeObjectURL(c),C(null),v(null),P([]),x([])},G=N(async()=>{if(!n||n.length===0){b("Please extract colors from an image first");return}T(!0),b(null);try{const t=await w.post("/tenant/tenant/settings/theme-generator",{colors:n,prompt:f,output_format:"json"});if(t.status!==200)throw new Error(`HTTP error! status: ${t.status}`);const o=t.data;if(o.success&&o.data){const s=Object.entries(o.data).map(([d,u])=>({key:d,value:String(u),id:Math.random().toString(36).substring(2,11)})),l=[...I];s.forEach(d=>{const u=l.findIndex(W=>W.key===d.key);u>=0?l[u]=d:l.push(d)}),h&&h(l)}else throw new Error(o.message||"Failed to generate theme")}catch(t){console.error("Theme generation error:",t),b(t instanceof Error?t.message:"Failed to generate theme")}finally{T(!1)}},[n,f,I,h,w]);return a(r,{sx:{mt:3,p:3,borderRadius:2},children:[a(i,{variant:"h6",gutterBottom:!0,sx:{display:"flex",alignItems:"center",gap:1},children:[e($,{}),"AI Theme Generator"]}),e(K,{sx:{mb:3}}),e(r,{sx:{mb:3},children:c?e(j,{sx:{maxWidth:400,mb:3},children:a(r,{sx:{position:"relative"},children:[e(L,{component:"img",height:"200",image:c,alt:"Uploaded image",sx:{objectFit:"contain"}}),e(D,{sx:{position:"absolute",top:8,right:8,backgroundColor:"rgba(255, 255, 255, 0.9)","&:hover":{backgroundColor:"rgba(255, 255, 255, 1)"}},onClick:z,size:"small",children:e(M,{})})]})}):a(r,{sx:{textAlign:"center",py:4,backgroundColor:"rgba(0,0,0,0.02)",borderRadius:1,border:"2px dashed #e0e0e0"},children:[e(O,{type:"file",inputProps:{accept:"image/*"},onChange:S,sx:{display:"none"},id:"color-extractor-upload"}),e(i,{variant:"body1",color:"textSecondary",gutterBottom:!0,children:"Upload an Image to Extract Colors"}),e(i,{variant:"body2",color:"textSecondary",sx:{mb:2},children:"Select an image file and we'll automatically extract a color palette"}),e("label",{htmlFor:"color-extractor-upload",children:e(A,{variant:"contained",component:"span",startIcon:e(V,{}),size:"large",children:"Choose Image"})})]})}),E&&a(r,{display:"flex",alignItems:"center",gap:2,sx:{mb:3,p:2,backgroundColor:"rgba(25, 118, 210, 0.04)",borderRadius:1},children:[e(U,{size:20}),e(i,{children:"Extracting colors from image..."})]}),k&&e(F,{severity:"error",sx:{mb:3},children:k}),B&&e(F,{severity:"error",sx:{mb:3},children:B}),n&&n.length>0&&!E&&a(r,{sx:{mb:3},children:[a(i,{variant:"subtitle1",gutterBottom:!0,children:["Extracted Colors (",n.length," colors found)"]}),e(r,{sx:{display:"flex",flexWrap:"wrap",gap:1,mt:2,mb:3},children:n.map((t,o)=>{const s=Y(t),l=g&&t[0]===g[0]&&t[1]===g[1]&&t[2]===g[2];return e(r,{sx:{width:50,height:50,backgroundColor:s,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",border:l?"3px solid #4caf50":"2px solid #ccc",cursor:"pointer",transition:"transform 0.2s","&:hover":{transform:"scale(1.1)"}},title:`${s} ${l?"(Dominant)":""}`,children:e(i,{variant:"caption",sx:{color:X(s),fontWeight:"bold",fontSize:"0.8rem"},children:o+1})},o)})}),a(r,{sx:{mb:3},children:[e(H,{fullWidth:!0,multiline:!0,rows:2,placeholder:"Optional: Describe the theme style you want (e.g., 'modern and minimalist', 'warm and cozy', 'professional corporate')",value:f,onChange:t=>R(t.target.value),sx:{mb:2},label:"Theme Description (Optional)"}),e(r,{sx:{display:"flex",gap:2,flexWrap:"wrap"},children:e(A,{variant:"contained",startIcon:y?e(U,{size:16}):e(q,{}),onClick:G,disabled:y,color:"primary",children:y?"Generating...":"Generate AI Theme"})})]}),a(i,{variant:"body2",color:"textSecondary",sx:{fontStyle:"italic"},children:["\u2022 ",e("strong",{children:"Generate AI Theme:"})," Uses AI to create a complete color scheme based on extracted colors and your description"]})]})]})});var xe=ee;export{xe as default};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+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 { useState, useEffect, memo, useCallback } from "react";
+import { useAsyncColorThief } from "../useAsyncColorThief";
+import { getContrastColor, rgbArrayToHex } from "../helpers/functions";
+import { useAxios } from "dash-axios-hook";
+const ImageColorExtractor = memo(({ onColorsExtracted, onColorsUpdate, existingPairs = [] }) => {
+  const [imageUrl, setImageUrl] = useState(null);
+  const [uploadedFile, setUploadedFile] = useState(null);
+  const [themePrompt, setThemePrompt] = useState("");
+  const [isGeneratingTheme, setIsGeneratingTheme] = useState(false);
+  const [themeError, setThemeError] = useState(null);
+  const [extractedPalette, setExtractedPalette] = useState([]);
+  const axios = useAxios();
+  const { dominantColor, palette, loading, error } = useAsyncColorThief(imageUrl, {
+    colorCount: 8,
+    quality: 10
+  });
+  useEffect(() => {
+    if (palette && palette.length > 0) {
+      setExtractedPalette(palette);
+      onColorsExtracted(palette);
+    }
+  }, [palette, onColorsExtracted]);
+  const handleFileSelect = (event) => {
+    var _a;
+    const file = (_a = event.target.files) == null ? void 0 : _a[0];
+    if (file) {
+      if (!file.type.startsWith("image/")) {
+        alert("Please select a valid image file");
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        alert("File size must be less than 5MB");
+        return;
+      }
+      setUploadedFile(file);
+      const previewUrl = URL.createObjectURL(file);
+      setImageUrl(previewUrl);
+    }
+  };
+  const handleImageRemove = () => {
+    if (imageUrl && imageUrl.startsWith("blob:")) {
+      URL.revokeObjectURL(imageUrl);
+    }
+    setImageUrl(null);
+    setUploadedFile(null);
+    setExtractedPalette([]);
+    onColorsExtracted([]);
+  };
+  const handleGenerateTheme = useCallback(() => __async(null, null, function* () {
+    if (!extractedPalette || extractedPalette.length === 0) {
+      setThemeError("Please extract colors from an image first");
+      return;
+    }
+    setIsGeneratingTheme(true);
+    setThemeError(null);
+    try {
+      const response = yield 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) {
+        const newPairs = Object.entries(result.data).map(([key, value]) => ({
+          key,
+          value: String(value),
+          id: Math.random().toString(36).substring(2, 11)
+        }));
+        const mergedPairs = [...existingPairs];
+        newPairs.forEach((newPair) => {
+          const existingIndex = mergedPairs.findIndex((existing) => existing.key === newPair.key);
+          if (existingIndex >= 0) {
+            mergedPairs[existingIndex] = newPair;
+          } else {
+            mergedPairs.push(newPair);
+          }
+        });
+        if (onColorsUpdate) {
+          onColorsUpdate(mergedPairs);
+        }
+      } else {
+        throw new Error(result.message || "Failed to generate theme");
+      }
+    } catch (error2) {
+      console.error("Theme generation error:", error2);
+      setThemeError(error2 instanceof Error ? error2.message : "Failed to generate theme");
+    } finally {
+      setIsGeneratingTheme(false);
+    }
+  }), [extractedPalette, themePrompt, existingPairs, onColorsUpdate, axios]);
+  return /* @__PURE__ */ jsxs(Box, { sx: { mt: 3, p: 3, borderRadius: 2 }, children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h6", gutterBottom: true, sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(PaletteIcon, {}),
+      "AI Theme Generator"
+    ] }),
+    /* @__PURE__ */ jsx(Divider, { sx: { mb: 3 } }),
+    /* @__PURE__ */ jsx(Box, { sx: { mb: 3 }, children: !imageUrl ? /* @__PURE__ */ jsxs(Box, { sx: {
+      textAlign: "center",
+      py: 4,
+      backgroundColor: "rgba(0,0,0,0.02)",
+      borderRadius: 1,
+      border: "2px dashed #e0e0e0"
+    }, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "file",
+          inputProps: { accept: "image/*" },
+          onChange: handleFileSelect,
+          sx: { display: "none" },
+          id: "color-extractor-upload"
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", gutterBottom: true, children: "Upload an Image to Extract Colors" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", sx: { mb: 2 }, children: "Select an image file and we'll automatically extract a color palette" }),
+      /* @__PURE__ */ jsx("label", { htmlFor: "color-extractor-upload", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          component: "span",
+          startIcon: /* @__PURE__ */ jsx(CloudUploadIcon, {}),
+          size: "large",
+          children: "Choose Image"
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsx(Card, { sx: { maxWidth: 400, mb: 3 }, children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        CardMedia,
+        {
+          component: "img",
+          height: "200",
+          image: imageUrl,
+          alt: "Uploaded image",
+          sx: { objectFit: "contain" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        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",
+          children: /* @__PURE__ */ jsx(DeleteIcon, {})
+        }
+      )
+    ] }) }) }),
+    loading && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 2, sx: { mb: 3, p: 2, backgroundColor: "rgba(25, 118, 210, 0.04)", borderRadius: 1 }, children: [
+      /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+      /* @__PURE__ */ jsx(Typography, { children: "Extracting colors from image..." })
+    ] }),
+    error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mb: 3 }, children: error }),
+    themeError && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mb: 3 }, children: themeError }),
+    extractedPalette && extractedPalette.length > 0 && !loading && /* @__PURE__ */ jsxs(Box, { sx: { mb: 3 }, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", gutterBottom: true, children: [
+        "Extracted Colors (",
+        extractedPalette.length,
+        " colors found)"
+      ] }),
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: 2, mb: 3 }, children: extractedPalette.map((color, index) => {
+        const hexColor = rgbArrayToHex(color);
+        const isDominant = dominantColor && color[0] === dominantColor[0] && color[1] === dominantColor[1] && color[2] === dominantColor[2];
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            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)" : ""}`,
+            children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                sx: {
+                  color: getContrastColor(hexColor),
+                  fontWeight: "bold",
+                  fontSize: "0.8rem"
+                },
+                children: index + 1
+              }
+            )
+          },
+          index
+        );
+      }) }),
+      /* @__PURE__ */ jsxs(Box, { sx: { mb: 3 }, children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            multiline: true,
+            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)"
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 2, flexWrap: "wrap" }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            startIcon: isGeneratingTheme ? /* @__PURE__ */ jsx(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx(AutoFixHighIcon, {}),
+            onClick: handleGenerateTheme,
+            disabled: isGeneratingTheme,
+            color: "primary",
+            children: isGeneratingTheme ? "Generating..." : "Generate AI Theme"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", sx: { fontStyle: "italic" }, children: [
+        "\u2022 ",
+        /* @__PURE__ */ jsx("strong", { children: "Generate AI Theme:" }),
+        " Uses AI to create a complete color scheme based on extracted colors and your description"
+      ] })
+    ] })
+  ] });
+});
+var ImageColorExtractor_default = ImageColorExtractor;
+export {
+  ImageColorExtractor_default as default
+};

package/dist/components/JsonColorSelector/helpers/functions.js

@@ -1 +1,101 @@
-const l=t=>{let r,s,e,a=1;if(t.startsWith("#")){const n=t.replace("#","");n.length===8?(r=parseInt(n.substr(0,2),16),s=parseInt(n.substr(2,2),16),e=parseInt(n.substr(4,2),16),a=parseInt(n.substr(6,2),16)/255):(r=parseInt(n.substr(0,2),16),s=parseInt(n.substr(2,2),16),e=parseInt(n.substr(4,2),16))}else if(t.startsWith("rgb")){const n=t.match(/rgba?\(([^)]+)\)/);if(n){const h=n[1].split(",").map(i=>parseFloat(i.trim()));[r,s,e,a=1]=h}else return"#000000"}else return t.startsWith("hsl"),"#000000";return(.299*r+.587*s+.114*e)/255*a+(1-a)>.5?"#000000":"#ffffff"},m=(t,r)=>{switch(r){case"hex":if(t.rgb.a!==void 0&&t.rgb.a<1){const u=Math.round(t.rgb.a*255).toString(16).padStart(2,"0");return`${t.hex}${u}`}return t.hex;case"rgb":return`rgb(${Math.round(t.rgb.r)}, ${Math.round(t.rgb.g)}, ${Math.round(t.rgb.b)})`;case"rgba":const s=t.rgb.a!==void 0?Number(t.rgb.a.toFixed(2)):1;return`rgba(${Math.round(t.rgb.r)}, ${Math.round(t.rgb.g)}, ${Math.round(t.rgb.b)}, ${s})`;case"hsl":return`hsl(${Math.round(t.hsl.h)}, ${Math.round(t.hsl.s*100)}%, ${Math.round(t.hsl.l*100)}%)`;case"hsla":const e=t.hsl.a!==void 0?Number(t.hsl.a.toFixed(2)):1;return`hsla(${Math.round(t.hsl.h)}, ${Math.round(t.hsl.s*100)}%, ${Math.round(t.hsl.l*100)}%, ${e})`;default:return t.hex}},b=t=>{const r=t.split("--"),s=r[0],e=r[1];return{baseChips:s.split("-").filter(u=>u.length>0),mode:e}},c=t=>{const r=new Set;return t.forEach(s=>{const{mode:e}=b(s.key);e&&r.add(e)}),Array.from(r).sort()},$=t=>{if(!t)return"";switch(t.toLowerCase()){case"light":return"\u2600\uFE0F";case"dark":return"\u{1F319}";default:return t}},x=t=>{const[r,s,e]=t;return`#${((1<<24)+(r<<16)+(s<<8)+e).toString(16).slice(1)}`},M=t=>{const[r,s,e]=t;return`rgb(${r}, ${s}, ${e})`};export{m as convertColor,c as extractAvailableModes,l as getContrastColor,$ as getModeIcon,b as parseColorKey,x as rgbArrayToHex,M as rgbArrayToRgbString};
+const getContrastColor = (color) => {
+  let r, g, b, a = 1;
+  if (color.startsWith("#")) {
+    const hex = color.replace("#", "");
+    if (hex.length === 8) {
+      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 {
+      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")) {
+    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")) {
+    return "#000000";
+  } else {
+    return "#000000";
+  }
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  const effectiveLuminance = luminance * a + (1 - a);
+  return effectiveLuminance > 0.5 ? "#000000" : "#ffffff";
+};
+const convertColor = (color, format) => {
+  switch (format) {
+    case "hex":
+      if (color.rgb.a !== void 0 && color.rgb.a < 1) {
+        const alpha2 = Math.round(color.rgb.a * 255);
+        const alphaHex = alpha2.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 !== void 0 ? 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 !== void 0 ? 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;
+  }
+};
+const parseColorKey = (key) => {
+  const parts = key.split("--");
+  const baseName = parts[0];
+  const mode = parts[1];
+  const baseChips = baseName.split("-").filter((part) => part.length > 0);
+  return { baseChips, mode };
+};
+const extractAvailableModes = (pairs) => {
+  const modes = /* @__PURE__ */ new Set();
+  pairs.forEach((pair) => {
+    const { mode } = parseColorKey(pair.key);
+    if (mode) {
+      modes.add(mode);
+    }
+  });
+  return Array.from(modes).sort();
+};
+const getModeIcon = (mode) => {
+  if (!mode) return "";
+  switch (mode.toLowerCase()) {
+    case "light":
+      return "\u2600\uFE0F";
+    // Sun icon
+    case "dark":
+      return "\u{1F319}";
+    // Moon icon
+    default:
+      return mode;
+  }
+};
+const rgbArrayToHex = (rgb) => {
+  const [r, g, b] = rgb;
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+};
+const rgbArrayToRgbString = (rgb) => {
+  const [r, g, b] = rgb;
+  return `rgb(${r}, ${g}, ${b})`;
+};
+export {
+  convertColor,
+  extractAvailableModes,
+  getContrastColor,
+  getModeIcon,
+  parseColorKey,
+  rgbArrayToHex,
+  rgbArrayToRgbString
+};

package/dist/components/JsonColorSelector/useAsyncColorThief.js

@@ -1 +1,105 @@
-import{useState as f,useEffect as d,useCallback as C}from"react";const m=(t,n={})=>{const[u,l]=f({dominantColor:null,palette:null,loading:!1,error:null}),s=C(async i=>{if(i){l(e=>({...e,loading:!0,error:null}));try{const e=(await import("colorthief")).default,r=new Image;r.crossOrigin="anonymous",r.onload=()=>{try{const o=new e,a=o.getColor(r),c=o.getPalette(r,n.colorCount||5,n.quality||10);l({dominantColor:a,palette:c,loading:!1,error:null})}catch(o){console.error("Color extraction error:",o),l(a=>({...a,loading:!1,error:`Failed to extract colors: ${o instanceof Error?o.message:"Unknown error"}`}))}},r.onerror=()=>{l(o=>({...o,loading:!1,error:"Failed to load image"}))},r.src=i}catch(e){console.error("ColorThief import error:",e),l(r=>({...r,loading:!1,error:`Failed to load Color Thief: ${e instanceof Error?e.message:"Unknown error"}`}))}}},[n.colorCount,n.quality]);return d(()=>{t?s(t):l({dominantColor:null,palette:null,loading:!1,error:null})},[t,s]),u};export{m as useAsyncColorThief};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { useState, useEffect, useCallback } from "react";
+const useAsyncColorThief = (imageSource, options = {}) => {
+  const [result, setResult] = useState({
+    dominantColor: null,
+    palette: null,
+    loading: false,
+    error: null
+  });
+  const extractColors = useCallback((src) => __async(null, null, function* () {
+    if (!src) return;
+    setResult((prev) => __spreadProps(__spreadValues({}, prev), { loading: true, error: null }));
+    try {
+      const ColorThief = (yield import("colorthief")).default;
+      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) => __spreadProps(__spreadValues({}, prev), {
+            loading: false,
+            error: `Failed to extract colors: ${error instanceof Error ? error.message : "Unknown error"}`
+          }));
+        }
+      };
+      img.onerror = () => {
+        setResult((prev) => __spreadProps(__spreadValues({}, prev), {
+          loading: false,
+          error: "Failed to load image"
+        }));
+      };
+      img.src = src;
+    } catch (error) {
+      console.error("ColorThief import error:", error);
+      setResult((prev) => __spreadProps(__spreadValues({}, 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 {
+      setResult({
+        dominantColor: null,
+        palette: null,
+        loading: false,
+        error: null
+      });
+    }
+  }, [imageSource, extractColors]);
+  return result;
+};
+export {
+  useAsyncColorThief
+};

package/dist/components/ListActive/ListActive.js

@@ -1 +1,126 @@
-import{Fragment as b,jsx as r,jsxs as v}from"react/jsx-runtime";import{useCallback as h,useEffect as C,useState as u}from"react";import{useRecordContext as I,useUpdate as y}from"react-admin";import{Switch as x,Box as S}from"@mui/material";import{AttributeToField as w}from"@dashadmin/dash-auto-admin/src/mui/AttributeToField";import B from"@dashadmin/dash-auto-admin/src/mui/AttributeToInput";const D=({method:s,attribute:e,resourceConfig:i,activeLabel:c="Activo",inactiveLabel:l="Inactivo",enableLabel:F="Activar",disableLabel:T="Desactivar",showLabel:A=!1})=>{const[,L]=u(!0),[d,{isLoading:k}]=y(),t=I(),[n,m]=u(!1),p=o=>{console.error(o)},g=h(async o=>{try{await d(i.model+"/partial/"+t.id,{id:t.id,data:{[e.attribute]:o},previousData:t,meta:{method:"POST"}},{onSuccess:()=>{m(o)},onSettled:(a,f)=>{f&&p(f)}})}catch(a){p(a)}},[d,t]);switch(C(()=>{L(!1),t&&e&&e.attribute in t&&m(!!t[e.attribute])},[t,e]),s){case"create":case"edit":return B(s,i,{...e,custom:!1,type:Boolean});case"view":return w(s,i,{...e,custom:!1,type:Boolean});case"list":return r("div",{children:v(S,{children:[r(x,{size:"small",onChange:(o,a)=>g(a),checked:n}),A?n?c:l:r(b,{})]})});default:return v(b,{children:[e.label,": ",n?c:l]})}};var K=D;export{K as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { useRecordContext, useUpdate } from "react-admin";
+import { Switch, Box } from "@mui/material";
+import { AttributeToField } from "dash-auto-admin/src/mui/AttributeToField";
+import AttributeToInput from "dash-auto-admin/src/mui/AttributeToInput";
+const ListActive = ({
+  method,
+  attribute,
+  resourceConfig,
+  activeLabel = "Activo",
+  inactiveLabel = "Inactivo",
+  enableLabel = "Activar",
+  disableLabel = "Desactivar",
+  showLabel = false
+}) => {
+  const [, setLoading] = useState(true);
+  const [update, { isLoading: updateLoading }] = useUpdate();
+  const record = useRecordContext();
+  const [is_active, setIsActive] = useState(false);
+  const onError = (error) => {
+    console.error(error);
+  };
+  const onChange = useCallback(
+    (value) => __async(null, null, function* () {
+      try {
+        yield update(
+          resourceConfig.model + "/partial/" + record.id,
+          {
+            id: record.id,
+            data: { [attribute.attribute]: value },
+            previousData: record,
+            meta: {
+              method: "POST"
+            }
+          },
+          {
+            onSuccess: () => {
+              setIsActive(value);
+            },
+            onSettled: (data, error) => {
+              if (error) onError(error);
+            }
+          }
+        );
+      } catch (error) {
+        onError(error);
+      }
+    }),
+    [update, record]
+  );
+  useEffect(() => {
+    setLoading(false);
+    if (record && attribute && attribute.attribute in record) {
+      setIsActive(!!record[attribute.attribute]);
+    }
+  }, [record, attribute]);
+  switch (method) {
+    case "create":
+    case "edit":
+      return AttributeToInput(method, resourceConfig, __spreadProps(__spreadValues({}, attribute), { custom: false, type: Boolean }));
+    case "view":
+      return AttributeToField(method, resourceConfig, __spreadProps(__spreadValues({}, attribute), { custom: false, type: Boolean }));
+    case "list":
+      return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            size: "small",
+            onChange: (e, value) => onChange(value),
+            checked: is_active
+          }
+        ),
+        showLabel ? is_active ? activeLabel : inactiveLabel : /* @__PURE__ */ jsx(Fragment, {})
+      ] }) });
+    default:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        attribute.label,
+        ": ",
+        is_active ? activeLabel : inactiveLabel
+      ] });
+  }
+};
+var ListActive_default = ListActive;
+export {
+  ListActive_default as default
+};