@rovula/ui 0.0.31 → 0.0.32

package/src/stories/ColorPreview.tsx

@@ -1,45 +1,134 @@
-import React from "react";
+import { srgbToHex } from "@/utils/colors";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "..";
 
-export default function ColorPreview({
-  colorName,
-  colorCode,
-  isSmall,
-}: {
-  colorName: string;
-  colorCode: string;
-  isSmall: boolean;
-}) {
-  if (isSmall) {
-    return (
-      <div className=" flex-1 h-[120px] flex flex-col rounded-xl shadow-lg overflow-hidden">
-        <div className="flex flex-1" style={{ backgroundColor: colorCode }} />
+export const ColorBox = ({ className }: { className: string }) => {
+  const boxRef = useRef<HTMLDivElement>(null);
+  const [hex, setHex] = useState("");
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (boxRef.current) {
+      const bgColor = window.getComputedStyle(boxRef.current).backgroundColor;
+      const hexColor = srgbToHex(bgColor);
+
+      setHex(hexColor);
+    }
+  }, []);
+
+  useEffect(() => {
+    let time: NodeJS.Timeout | undefined;
+
+    if (isOpen) {
+      setTimeout(() => {
+        setOpen(false);
+      }, 1000);
+    }
+
+    return () => {
+      if (time) {
+        clearTimeout(time);
+      }
+    };
+  }, [isOpen]);
+
+  return (
+    <div className="flex flex-1 flex-col gap-1">
+      <Popover open={isOpen}>
+        <PopoverTrigger
+          onClick={() => {
+            if (className) {
+              navigator.clipboard
+                .writeText(className)
+                .then(() => {
+                  console.log("ClassName copied to clipboard");
+                })
+                .catch((err) => {
+                  console.error("Failed to copy className: ", err);
+                });
+            }
+            setOpen(true);
+          }}
+        >
+          <div
+            ref={boxRef}
+            className={`${className} h-12 rounded border shadow`}
+          />
+        </PopoverTrigger>
+        <PopoverContent className="p-3 w-fit min-w-fit">
+          Copied to clipboard
+        </PopoverContent>
+      </Popover>
+      <div className="text-gray-500 flex flex-col justify-center items-center">
+        <div style={{ fontSize: 12, whiteSpace: "pre" }}>{className}</div>
         <div
-          className={
-            "bg-white p-3 px-3  flex flex-col justify-center items-start"
-          }
+          style={{
+            fontSize: 12,
+            textTransform: "uppercase",
+            whiteSpace: "pre",
+          }}
         >
-          <h3 className="text-black leading-3 p-0">{colorName}</h3>
+          {hex || "Loading..."}
         </div>
       </div>
-    );
-  }
+    </div>
+  );
+};
+
+export const ColorItems = ({
+  title,
+  subTitle,
+  colors,
+  col = -1,
+}: {
+  title?: string;
+  subTitle?: string;
+  colors: string[];
+  col?: number;
+}) => {
+  const gridColumnsClass = useMemo(() => {
+    if (col !== undefined) {
+      switch (col) {
+        case 1:
+          return "grid grid-cols-1";
+        case 2:
+          return "grid grid-cols-2";
+        case 3:
+          return "grid grid-cols-3";
+        case 4:
+          return "grid grid-cols-4";
+        case 5:
+          return "grid grid-cols-5";
+        case 6:
+          return "grid grid-cols-6";
+        case 7:
+          return "grid grid-cols-7";
+        case 8:
+          return "grid grid-cols-8";
+        case 9:
+          return "grid grid-cols-9";
+        case 10:
+          return "grid grid-cols-10";
+        default:
+          return colors.length >= 8 ? "grid grid-cols-4" : `flex `;
+      }
+    }
+  }, [col]);
 
   return (
-    <div className=" flex-1 h-[160px] flex flex-col rounded-xl shadow-lg overflow-hidden">
-      <div className="flex flex-1" style={{ backgroundColor: colorCode }} />
+    <div className="flex flex-wrap flex-col">
+      {title && <div style={{ fontSize: 16, fontWeight: "600" }}>{title}</div>}
+      {subTitle && (
+        <div style={{ fontSize: 14, fontWeight: "600" }}>{subTitle}</div>
+      )}
       <div
-        className={
-          "bg-white p-3 px-6  flex flex-col justify-center items-start"
-        }
+        className={` gap-2 mt-3 ${gridColumnsClass}`}
+        style={{ marginTop: 12 }}
       >
-        <h3 className="text-black leading-3 p-0 text-error">{colorName}</h3>
-        <div
-          className="text-gray-600 leading-1 p-0 m-0"
-          style={{ fontSize: "8px" }}
-        >
-          {colorCode}
-        </div>
+        {colors.map((color) => (
+          <ColorBox key={color} className={color} />
+        ))}
       </div>
     </div>
   );
-}
+};

package/src/theme/main-preset.js

@@ -204,6 +204,14 @@ module.exports = {
             fontFamily: "var(--small8-family, 'Poppins')",
           },
         ],
+        small9: [
+          "var(--small9-size, 8px)",
+          {
+            lineHeight: "var(--small9-line-height, 10px)",
+            fontWeight: "var(--small9-weight, 400)",
+            fontFamily: "var(--small9-family, 'Poppins')",
+          },
+        ],
         label1: [
           "var(--label-label1-size, 12px)",
           {

package/src/theme/plugins/utilities/typography.js

@@ -74,6 +74,9 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small8": {
       "@apply text-small8": {},
     },
+    ".typography-small9": {
+      "@apply text-small9": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },

package/src/theme/presets/colors.js

@@ -76,9 +76,6 @@ module.exports = {
         "function-default-hover-bg": withColorMixin(
           "--function-default-hover-bg"
         ),
-        "function-default-hover-bg": withColorMixin(
-          "--function-default-hover-bg"
-        ),
         "function-default-stroke": withColorMixin("--function-default-stroke"),
         "function-default-icon": withColorMixin("--function-default-icon"),
         "function-default-outline": withColorMixin(

package/src/utils/colors.ts

@@ -0,0 +1,33 @@
+export const srgbToHex = (color: string) => {
+  if (color.startsWith("color(")) {
+    const rgbValues = color.match(/([\d.]+)/g);
+
+    if (rgbValues && rgbValues.length >= 3) {
+      const [r, g, b] = rgbValues
+        .slice(0, 3)
+        .map((x) => Math.round(parseFloat(x) * 255));
+      let hex = `#${[r, g, b]
+        .map((x) => ("0" + x.toString(16)).slice(-2))
+        .join("")}`;
+
+      if (rgbValues.length === 4) {
+        const alpha = Math.round(parseFloat(rgbValues[3]) * 255);
+        hex += ("0" + alpha.toString(16)).slice(-2);
+      }
+
+      return hex;
+    }
+  } else if (color.startsWith("#")) {
+    return color;
+  } else {
+    const rgbValues = color.match(/\d+/g);
+    if (rgbValues && rgbValues.length >= 3) {
+      return `#${rgbValues
+        .slice(0, 3)
+        .map((x) => ("0" + parseInt(x).toString(16)).slice(-2))
+        .join("")}`;
+    }
+  }
+
+  return color;
+};