@cleen/ui 0.1.0 → 0.1.1

package/dist/charts/index.js

@@ -0,0 +1,611 @@
+// src/charts/chart/Chart.tsx
+import { cn } from "@cleen/ui-core";
+import { forwardRef } from "react";
+import ReactApexChart from "react-apexcharts";
+
+// src/charts/chart/constant.ts
+var defaultOptions = {
+  chart: {
+    toolbar: {
+      show: true,
+      tools: {
+        download: true,
+        selection: true,
+        zoom: true,
+        zoomin: true,
+        zoomout: true,
+        pan: true,
+        reset: true
+      }
+    },
+    animations: {
+      enabled: true
+    }
+  },
+  dataLabels: {
+    enabled: false
+  },
+  stroke: {
+    curve: "smooth",
+    width: 2
+  },
+  xaxis: {
+    labels: {
+      style: {
+        fontSize: "12px"
+      }
+    }
+  },
+  yaxis: {
+    labels: {
+      style: {
+        fontSize: "12px"
+      }
+    }
+  },
+  legend: {
+    position: "top",
+    horizontalAlign: "left"
+  },
+  tooltip: {
+    enabled: true,
+    theme: "light"
+  }
+};
+
+// src/charts/chart/Chart.tsx
+import { jsx } from "react/jsx-runtime";
+var Chart = forwardRef(function Chart2({
+  type = "line",
+  series,
+  options = {},
+  width = "100%",
+  height = 350,
+  className,
+  style
+}, ref) {
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options,
+    chart: {
+      ...defaultOptions.chart,
+      ...options.chart,
+      type
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("cleen", className), style, children: /* @__PURE__ */ jsx(
+    ReactApexChart,
+    {
+      options: mergedOptions,
+      series,
+      type,
+      width,
+      height,
+      ref
+    }
+  ) });
+});
+var Chart_default = Chart;
+
+// src/charts/chart/variants/BellCurve/BellCurve.tsx
+import { applyDefaults } from "@cleen/ui-core";
+import { forwardRef as forwardRef2, useMemo } from "react";
+
+// src/charts/chart/variants/BellCurve/constant.ts
+import { ColorHelpers } from "@cleen/ui-core";
+var POINT_ANNOTATIONS_PROPS = {
+  marker: {
+    size: 2,
+    fillColor: "rgba(var(--cleen-gray), 0.8)",
+    strokeColor: "rgba(var(--cleen-gray), 0.8)",
+    offsetY: -16,
+    shape: "triangle"
+  },
+  label: {
+    borderWidth: 0,
+    offsetY: -20,
+    style: {
+      color: "rgba(var(--cleen-gray), 0.8)",
+      background: "transparent",
+      fontSize: "11px"
+    }
+  }
+};
+var RANGE_ANNOTATIONS_PROPS = {
+  label: {
+    borderColor: "transparent",
+    style: {
+      color: "rgba(var(--cleen-white))",
+      background: "rgba(var(--cleen-primary))"
+    }
+  },
+  fillColor: "rgba(var(--cleen-primary))"
+};
+var HIGHLIGHT_LABEL_ANNOTATIONS_PROPS = {
+  label: {
+    borderWidth: 0,
+    offsetY: -15,
+    orientation: "horizontal",
+    style: {
+      color: "rgba(var(--cleen-primary))",
+      background: "transparent",
+      fontSize: "16px",
+      fontWeight: 700
+    }
+  },
+  borderColor: "rgba(var(--cleen-primary))"
+};
+var HIGHLIGHT_MARKER_ANNOTATIONS_PROPS = {
+  marker: {
+    size: 8,
+    fillColor: "rgba(var(--cleen-primary))",
+    strokeColor: "rgba(var(--cleen-white))"
+  }
+};
+var DEFAULT_CHART_OPTIONS = {
+  chart: {
+    zoom: { enabled: false },
+    toolbar: { show: false },
+    animations: {
+      enabled: false
+    }
+  },
+  stroke: { curve: "monotoneCubic", width: 2.5 },
+  colors: [
+    ColorHelpers.getComputedColor("var(--cleen-error)"),
+    ColorHelpers.getComputedColor("var(--cleen-primary)"),
+    ColorHelpers.getComputedColor("var(--cleen-success)")
+  ],
+  fill: {
+    type: "gradient",
+    gradient: {
+      shade: "light",
+      type: "vertical",
+      shadeIntensity: 0.6,
+      gradientToColors: [
+        ColorHelpers.getComputedColor("var(--cleen-error)") || "",
+        ColorHelpers.getComputedColor("var(--cleen-primary)") || "",
+        ColorHelpers.getComputedColor("var(--cleen-success)") || ""
+      ],
+      inverseColors: false,
+      opacityFrom: 0.95,
+      opacityTo: 0.6
+    }
+  },
+  yaxis: {
+    show: false
+  },
+  tooltip: {
+    enabled: true,
+    x: {
+      formatter: function(val) {
+        const n = typeof val === "string" ? Number(val) : val;
+        return `Score: ${n}`;
+      }
+    },
+    y: {
+      formatter: function(val) {
+        return `${Number(val).toFixed(4)}`;
+      }
+    }
+  },
+  grid: { show: false },
+  legend: {
+    show: false
+  }
+};
+
+// src/charts/chart/variants/BellCurve/helper.ts
+var getAnnotationPointX = (middle, sigma) => {
+  return {
+    middle,
+    leftSigma: middle - sigma,
+    left2Sigma: middle - 2 * sigma,
+    left: middle - 3 * sigma,
+    rightSigma: middle + 2 * sigma,
+    right2Sigma: middle + 2 * sigma,
+    right: middle + 3 * sigma
+  };
+};
+var getAnnotationAxisX = (middle, sigma, minX, maxX) => {
+  return {
+    middle,
+    leftSigma: middle - sigma,
+    left2Sigma: middle - 2 * sigma,
+    left: minX,
+    rightSigma: middle + sigma,
+    right2Sigma: middle + 2 * sigma,
+    right: maxX
+  };
+};
+var calculateAnnotationAxisX = (annotation, positions) => {
+  let props = {};
+  switch (annotation.type) {
+    case "range":
+      props = {
+        x: positions[annotation.x],
+        x2: positions[annotation.x2]
+      };
+      break;
+    case "offset":
+      props = {
+        x: annotation.x - annotation.offset,
+        x2: annotation.x + annotation.offset
+      };
+      break;
+    case "region":
+      if (annotation.x >= positions.left && annotation.x < positions.left2Sigma) {
+        props = {
+          x: positions.left,
+          x2: positions.left2Sigma
+        };
+      } else if (annotation.x >= positions.left2Sigma && annotation.x < positions.leftSigma) {
+        props = {
+          x: positions.left2Sigma,
+          x2: positions.leftSigma
+        };
+      } else if (annotation.x >= positions.leftSigma && annotation.x < positions.middle) {
+        props = {
+          x: positions.leftSigma,
+          x2: positions.middle
+        };
+      } else if (annotation.x >= positions.middle && annotation.x < positions.rightSigma) {
+        props = {
+          x: positions.middle,
+          x2: positions.rightSigma
+        };
+      } else if (annotation.x >= positions.rightSigma && annotation.x < positions.right2Sigma) {
+        props = {
+          x: positions.rightSigma,
+          x2: positions.right2Sigma
+        };
+      } else if (annotation.x >= positions.right2Sigma && annotation.x < positions.right) {
+        props = {
+          x: positions.right2Sigma,
+          x2: positions.right
+        };
+      }
+      break;
+    case "custom":
+    default:
+      props = {
+        x: annotation.x,
+        x2: annotation.x2
+      };
+      break;
+  }
+  return props;
+};
+
+// src/charts/chart/variants/BellCurve/BellCurve.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BellCurve = forwardRef2(
+  function BellCurve2({
+    serie,
+    labels,
+    sigma,
+    pointAnnotations,
+    rangeAnnotations,
+    highlightAnnotations,
+    options,
+    height = 360,
+    ...props
+  }, ref) {
+    const sortedSerie = useMemo(() => serie.sort((a, b) => a.x - b.x), [serie]);
+    const serieMap = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      serie.forEach((el) => map.set(el.x, el.y));
+      return map;
+    }, [serie]);
+    const middlePoint = sortedSerie[Math.floor(sortedSerie.length / 2)];
+    const calculatedSeries = useMemo(() => {
+      const { below, middle, above } = serie.reduce(
+        (acc, val) => {
+          if (val.x < middlePoint.x - 2 * sigma) {
+            acc.below.push(val);
+          } else if (val.x >= middlePoint.x + 2 * sigma) {
+            if (val.x === middlePoint.x + 2 * sigma) {
+              acc.middle.push(val);
+            }
+            acc.above.push(val);
+          } else {
+            if (val.x === middlePoint.x - 2 * sigma) {
+              acc.below.push(val);
+            }
+            acc.middle.push(val);
+          }
+          return acc;
+        },
+        { below: [], middle: [], above: [] }
+      );
+      return [
+        { name: labels?.below || "Below threshold", data: below },
+        { name: labels?.middle || "Middle grounds", data: middle },
+        { name: labels?.above || "Above threshold", data: above }
+      ];
+    }, [sigma, serie, labels, middlePoint]);
+    const formattedPointAnnotations = useMemo(() => {
+      if (!pointAnnotations) {
+        return [];
+      }
+      const positions = getAnnotationPointX(middlePoint.x, sigma);
+      return Object.entries(pointAnnotations).map(
+        ([field, value]) => {
+          const x = positions[field];
+          return {
+            x,
+            y: serieMap.get(x) || 0,
+            ...applyDefaults(POINT_ANNOTATIONS_PROPS, value)
+          };
+        }
+      );
+    }, [pointAnnotations, sigma, serieMap]);
+    const formattedXAxisAnnotations = useMemo(() => {
+      if (!rangeAnnotations) {
+        return [];
+      }
+      const positions = getAnnotationAxisX(
+        middlePoint.x,
+        sigma,
+        sortedSerie[0].x,
+        sortedSerie[sortedSerie.length - 1].x
+      );
+      return rangeAnnotations.map((annotation) => {
+        const pos = calculateAnnotationAxisX(annotation, positions);
+        return {
+          ...applyDefaults(RANGE_ANNOTATIONS_PROPS, annotation),
+          ...pos
+        };
+      });
+    }, [rangeAnnotations, sigma, sortedSerie]);
+    const { highlightPointAnnotations, highlightLineAnnotations } = useMemo(() => {
+      if (!highlightAnnotations) {
+        return {
+          highlightLineAnnotations: [],
+          highlightPointAnnotations: []
+        };
+      }
+      const highlightPointAnnotations2 = [];
+      const highlightLineAnnotations2 = [];
+      const addLine = ({ x, line }) => {
+        highlightLineAnnotations2.push(
+          applyDefaults(HIGHLIGHT_LABEL_ANNOTATIONS_PROPS, {
+            x,
+            ...line
+          })
+        );
+      };
+      const addPoint = ({ x, y, point }) => {
+        highlightPointAnnotations2.push(
+          applyDefaults(HIGHLIGHT_MARKER_ANNOTATIONS_PROPS, {
+            x,
+            y,
+            ...point
+          })
+        );
+      };
+      highlightAnnotations?.forEach((annotation) => {
+        switch (annotation.show) {
+          case "line":
+            addLine(annotation);
+            break;
+          case "point":
+            addPoint(annotation);
+            break;
+          case "both":
+            addLine(annotation);
+            addPoint(annotation);
+            break;
+          default:
+            break;
+        }
+      });
+      return {
+        highlightPointAnnotations: highlightPointAnnotations2,
+        highlightLineAnnotations: highlightLineAnnotations2
+      };
+    }, [highlightAnnotations]);
+    return /* @__PURE__ */ jsx2(
+      Chart_default,
+      {
+        series: calculatedSeries,
+        options: {
+          ...applyDefaults(DEFAULT_CHART_OPTIONS, options),
+          annotations: {
+            ...options?.annotations,
+            points: [
+              ...formattedPointAnnotations,
+              ...highlightPointAnnotations,
+              ...options?.annotations?.points || []
+            ],
+            xaxis: [
+              ...formattedXAxisAnnotations,
+              ...highlightLineAnnotations,
+              ...options?.annotations?.xaxis || []
+            ]
+          }
+        },
+        height,
+        ref,
+        type: "area",
+        ...props
+      }
+    );
+  }
+);
+
+// src/charts/chart/variants/RadarChart/RadarChart.tsx
+import { applyDefaults as applyDefaults2 } from "@cleen/ui-core";
+import { forwardRef as forwardRef3 } from "react";
+
+// src/charts/chart/variants/RadarChart/constant.ts
+var DEFAULT_CHART_OPTIONS2 = {
+  chart: {
+    type: "radar",
+    zoom: { enabled: false },
+    toolbar: { show: false }
+  },
+  stroke: {
+    width: 2
+  },
+  fill: {
+    opacity: 0.25
+  },
+  markers: {
+    size: 4,
+    colors: "transparent",
+    strokeColors: "transparent"
+  },
+  tooltip: {
+    marker: {
+      show: false
+    }
+  },
+  legend: {
+    show: false
+  }
+};
+
+// src/charts/chart/variants/RadarChart/RadarChart.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var RadarChart = forwardRef3(
+  function RadarChart2({ options, ...props }, ref) {
+    return /* @__PURE__ */ jsx3(
+      Chart_default,
+      {
+        type: "radar",
+        ref,
+        options: applyDefaults2(DEFAULT_CHART_OPTIONS2, options),
+        ...props
+      }
+    );
+  }
+);
+
+// src/charts/chart/variants/ScatterChart/ScatterChart.tsx
+import { applyDefaults as applyDefaults3 } from "@cleen/ui-core";
+import { forwardRef as forwardRef4 } from "react";
+
+// src/charts/chart/variants/ScatterChart/constant.ts
+var DEFAULT_CHART_OPTIONS3 = {
+  chart: {
+    type: "scatter",
+    zoom: { enabled: false },
+    toolbar: { show: false }
+  },
+  markers: {
+    shape: "square",
+    size: 8,
+    strokeWidth: 0
+  },
+  grid: {
+    strokeDashArray: 8
+  },
+  legend: {
+    show: true,
+    horizontalAlign: "right",
+    position: "top",
+    labels: {
+      colors: "rgba(var(--cleen-gray), 0.8)"
+    }
+  },
+  yaxis: {
+    axisBorder: {
+      show: true,
+      color: "rgba(var(--cleen-gray), .2)"
+    },
+    labels: {
+      style: {
+        colors: "rgba(var(--cleen-gray), 0.8)"
+      }
+    }
+  },
+  xaxis: {
+    axisBorder: {
+      show: true,
+      color: "rgba(var(--cleen-gray), .2)"
+    },
+    labels: {
+      style: {
+        colors: "rgba(var(--cleen-gray), 0.8)"
+      }
+    }
+  },
+  title: {
+    align: "left",
+    floating: true,
+    style: {
+      color: "rgba(var(--cleen-black))"
+    }
+  }
+};
+
+// src/charts/chart/variants/ScatterChart/ScatterChart.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ScatterChart = forwardRef4(function ScatterChart2({ options, ...props }, ref) {
+  return /* @__PURE__ */ jsx4(
+    Chart_default,
+    {
+      type: "scatter",
+      ref,
+      options: applyDefaults3(DEFAULT_CHART_OPTIONS3, options),
+      ...props
+    }
+  );
+});
+
+// src/charts/simpleChart/SimpleChart.tsx
+import "react";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var SimpleChart = ({
+  width = 240,
+  height = 80,
+  data = [12, 28, 18, 30, 24, 36],
+  className = "",
+  style
+}) => {
+  const max = Math.max(...data, 1);
+  const points = data.map(
+    (d, i) => `${i / (data.length - 1) * width},${height - d / max * height}`
+  ).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className,
+      style,
+      role: "img",
+      "aria-label": "Simple line chart",
+      children: [
+        /* @__PURE__ */ jsx5("rect", { width: "100%", height: "100%", fill: "transparent" }),
+        /* @__PURE__ */ jsx5(
+          "polyline",
+          {
+            fill: "none",
+            stroke: "rgba(59,130,246,0.9)",
+            strokeWidth: 2,
+            points,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "polygon",
+          {
+            points: `${points} ${width},${height} 0,${height}`,
+            fill: "rgba(59,130,246,0.08)"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  BellCurve,
+  Chart,
+  RadarChart,
+  ScatterChart,
+  SimpleChart
+};

package/dist/icons/index.d.ts

@@ -0,0 +1,35 @@
+import react__default from 'react';
+import { IconBaseProps, IconType } from 'react-icons/lib';
+export * from 'react-icons/fa';
+export * from 'react-icons/md';
+export * from 'react-icons/ai';
+export * from 'react-icons/bi';
+export * from 'react-icons/bs';
+export * from 'react-icons/fi';
+export * from 'react-icons/hi';
+export * from 'react-icons/io';
+export * from 'react-icons/ri';
+
+interface IconFromLibraryProps extends IconBaseProps {
+    icon: IconType;
+}
+declare const IconFromLibrary: react__default.FC<IconFromLibraryProps>;
+
+/**
+ * Maps icon names to their corresponding icon components from react-icons.
+ * This allows you to dynamically load icons by name string without importing the entire library.
+ *
+ * @param iconName - The full icon name (e.g., 'FaHome', 'MdSettings', 'AiFillHeart')
+ * @returns The icon component, or null if not found
+ *
+ * @example
+ * ```tsx
+ * const HomeIcon = getIconByName('FaHome');
+ * if (HomeIcon) {
+ *   return <IconFromLibrary icon={HomeIcon} size={24} />;
+ * }
+ * ```
+ */
+declare const getIconByName: (iconName: string) => Promise<IconType | null>;
+
+export { IconFromLibrary, type IconFromLibraryProps, getIconByName };

package/dist/icons/index.js

@@ -0,0 +1,77 @@
+// src/icons/IconFromLibrary.tsx
+import "react";
+import { jsx } from "react/jsx-runtime";
+var IconFromLibrary = ({
+  icon: OriginalIcon,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(OriginalIcon, { ...props });
+};
+
+// src/icons/getIconByName.ts
+var getIconByName = async (iconName) => {
+  if (!iconName || typeof iconName !== "string") {
+    return null;
+  }
+  const prefix = iconName.substring(0, 2);
+  try {
+    let iconModule;
+    switch (prefix) {
+      case "Fa":
+        iconModule = await import("react-icons/fa");
+        break;
+      case "Md":
+        iconModule = await import("react-icons/md");
+        break;
+      case "Ai":
+        iconModule = await import("react-icons/ai");
+        break;
+      case "Bi":
+        iconModule = await import("react-icons/bi");
+        break;
+      case "Bs":
+        iconModule = await import("react-icons/bs");
+        break;
+      case "Fi":
+        iconModule = await import("react-icons/fi");
+        break;
+      case "Hi":
+        iconModule = await import("react-icons/hi");
+        break;
+      case "Io":
+        iconModule = await import("react-icons/io");
+        break;
+      case "Ri":
+        iconModule = await import("react-icons/ri");
+        break;
+      default:
+        console.warn(
+          `Unknown icon library prefix: ${prefix} in icon name: ${iconName}`
+        );
+        return null;
+    }
+    const iconComponent = iconModule[iconName];
+    if (!iconComponent || typeof iconComponent !== "function") {
+      return null;
+    }
+    return iconComponent;
+  } catch (error) {
+    console.error(`Error loading icon "${iconName}":`, error);
+    return null;
+  }
+};
+
+// src/icons/index.ts
+export * from "react-icons/fa";
+export * from "react-icons/md";
+export * from "react-icons/ai";
+export * from "react-icons/bi";
+export * from "react-icons/bs";
+export * from "react-icons/fi";
+export * from "react-icons/hi";
+export * from "react-icons/io";
+export * from "react-icons/ri";
+export {
+  IconFromLibrary,
+  getIconByName
+};