@cleen/ui 0.1.0 → 0.1.2

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "@cleen/ui",
-  "version": "0.1.0",
-  "private": false,
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./icons": {
-      "import": "./dist/icons/index.js",
-      "types": "./dist/icons/index.d.ts"
-    },
-    "./charts": {
-      "import": "./dist/charts/index.js",
-      "types": "./dist/charts/index.d.ts"
-    }
-  },
-  "scripts": {
-    "dev": "tsup --watch --onSuccess 'tsc'",
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "format": "prettier --write \"src/**/*.{ts,tsx}\""
-  },
-  "dependencies": {
-    "@cleen/ui-core": "*",
-    "@wavesurfer/react": "^1.0.12",
-    "apexcharts": "^5.3.0",
-    "react-apexcharts": "^2.1.0",
-    "react-day-picker": "^9.11.1",
-    "react-icons": "^5.3.0",
-    "react-select": "^5.10.2",
-    "react-toastify": "^11.0.5",
-    "wavesurfer.js": "^7.12.1"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.23.1"
-  },
-  "devDependencies": {
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@types/react-router-dom": "^5.3.3",
-    "tsup": "^8.5.1",
-    "typescript": "~5.8.3",
-    "tailwindcss": "^3.4.17"
-  }
-}
+{
+  "name": "@cleen/ui",
+  "version": "0.1.2",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./icons": {
+      "import": "./dist/icons/index.js",
+      "types": "./dist/icons/index.d.ts"
+    },
+    "./charts": {
+      "import": "./dist/charts/index.js",
+      "types": "./dist/charts/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "tsup --watch --onSuccess 'tsc'",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "@cleen/ui-core": "*",
+    "@wavesurfer/react": "^1.0.12",
+    "apexcharts": "^5.3.0",
+    "react-apexcharts": "^2.1.0",
+    "react-day-picker": "^9.11.1",
+    "react-icons": "^5.3.0",
+    "react-select": "^5.10.2",
+    "react-toastify": "^11.0.5",
+    "wavesurfer.js": "^7.12.1"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@types/react-router-dom": "^5.3.3",
+    "tailwindcss": "^3.4.17",
+    "tsup": "^8.5.1",
+    "typescript": "~5.8.3"
+  }
+}

package/src/charts/chart/Chart.tsx

@@ -1,82 +0,0 @@
-import { cn } from '@cleen/ui-core';
-import type { ApexOptions } from 'apexcharts';
-import { forwardRef, type CSSProperties } from 'react';
-import ReactApexChart from 'react-apexcharts';
-import { defaultOptions } from './constant';
-
-export interface ChartProps {
-  /**
-   * Type of chart to render. [Apexcharts API Reference](https://apexcharts.com/docs/options/chart/type/)
-   */
-  type?: ReactApexChart['props']['type'];
-  /**
-   * Chart data series. [Apexcharts API Reference](https://apexcharts.com/docs/options/series/)
-   */
-  series: ApexOptions['series'];
-  /**
-   * Chart options. [Apexcharts API Reference](https://apexcharts.com/docs/options/annotations/)
-   */
-  options?: ApexOptions;
-  /**
-   * Chart width. [Apexcharts API Reference](https://apexcharts.com/docs/options/chart/width/)
-   */
-  width?: string | number;
-  /**
-   * Chart height. [Apexcharts API Reference](https://apexcharts.com/docs/options/chart/height/)
-   */
-  height?: string | number;
-  /**
-   * Additional CSS class names applied to the wrapper of the chart
-   */
-  className?: string;
-
-  /**
-   * Additional CSS style props applied to the wrapper of the chart
-   */
-  style?: CSSProperties;
-}
-
-/**
- * Chart component built on ApexCharts
- * Provides a flexible wrapper for various chart types
- */
-export const Chart = forwardRef<
-  InstanceType<typeof ReactApexChart>,
-  ChartProps
->(function Chart(
-  {
-    type = 'line',
-    series,
-    options = {},
-    width = '100%',
-    height = 350,
-    className,
-    style,
-  },
-  ref
-) {
-  const mergedOptions: ApexOptions = {
-    ...defaultOptions,
-    ...options,
-    chart: {
-      ...defaultOptions.chart,
-      ...options.chart,
-      type,
-    },
-  };
-
-  return (
-    <div className={cn('cleen', className)} style={style}>
-      <ReactApexChart
-        options={mergedOptions}
-        series={series}
-        type={type}
-        width={width}
-        height={height}
-        ref={ref}
-      />
-    </div>
-  );
-});
-
-export default Chart;

package/src/charts/chart/constant.ts

@@ -1,50 +0,0 @@
-import type { ApexOptions } from 'apexcharts';
-
-export const defaultOptions: ApexOptions = {
-  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',
-  },
-};

package/src/charts/chart/index.ts

@@ -1,2 +0,0 @@
-export { Chart, type ChartProps } from './Chart';
-export * from './variants';

package/src/charts/chart/types/apexcharts.ts

@@ -1,9 +0,0 @@
-import type { ApexOptions } from 'apexcharts';
-
-export type ApexAnnotations = NonNullable<ApexOptions['annotations']>;
-
-export type PointAnnotations = NonNullable<ApexAnnotations['points']>;
-export type PointAnnotation = PointAnnotations[number];
-
-export type XAxisAnnotations = NonNullable<ApexAnnotations['xaxis']>;
-export type XAxisAnnotation = XAxisAnnotations[number];

package/src/charts/chart/variants/BellCurve/BellCurve.tsx

@@ -1,215 +0,0 @@
-import type {
-  PointAnnotation,
-  PointAnnotations,
-  XAxisAnnotation,
-  XAxisAnnotations,
-} from '@/charts/chart/types/apexcharts';
-import { applyDefaults } from '@cleen/ui-core';
-import type { ApexOptions } from 'apexcharts';
-import { forwardRef, useMemo } from 'react';
-import type ReactApexChart from 'react-apexcharts';
-import Chart from '../../Chart';
-import {
-  DEFAULT_CHART_OPTIONS,
-  HIGHLIGHT_LABEL_ANNOTATIONS_PROPS,
-  HIGHLIGHT_MARKER_ANNOTATIONS_PROPS,
-  POINT_ANNOTATIONS_PROPS,
-  RANGE_ANNOTATIONS_PROPS,
-} from './constant';
-import {
-  calculateAnnotationAxisX,
-  getAnnotationAxisX,
-  getAnnotationPointX,
-} from './helper';
-import type { BellCurveSerie, HighlightAnnotation } from './types/bellCurve';
-import type { BellCurveProps } from './types/props';
-
-/**
- * BellCurve component built on ApexCharts
- * Provides a custom BellCurve chart with annotations and series segmentation
- */
-export const BellCurve = forwardRef<ReactApexChart, BellCurveProps>(
-  function BellCurve(
-    {
-      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 = new Map<number, number>();
-      serie.forEach(el => map.set(el.x, el.y));
-
-      return map;
-    }, [serie]);
-    const middlePoint = sortedSerie[Math.floor(sortedSerie.length / 2)];
-
-    const calculatedSeries: ApexOptions['series'] = useMemo(() => {
-      const { below, middle, above } = serie.reduce<{
-        below: BellCurveSerie;
-        middle: BellCurveSerie;
-        above: BellCurveSerie;
-      }>(
-        (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<PointAnnotation>(
-        ([field, value]) => {
-          const x = positions[field as keyof typeof pointAnnotations];
-
-          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<XAxisAnnotation>(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 highlightPointAnnotations: PointAnnotations = [];
-        const highlightLineAnnotations: XAxisAnnotations = [];
-
-        const addLine = ({ x, line }: HighlightAnnotation) => {
-          highlightLineAnnotations.push(
-            applyDefaults(HIGHLIGHT_LABEL_ANNOTATIONS_PROPS, {
-              x,
-              ...line,
-            })
-          );
-        };
-
-        const addPoint = ({ x, y, point }: HighlightAnnotation) => {
-          highlightPointAnnotations.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,
-          highlightLineAnnotations,
-        };
-      }, [highlightAnnotations]);
-
-    return (
-      <Chart
-        series={calculatedSeries}
-        options={{
-          ...applyDefaults(DEFAULT_CHART_OPTIONS, options),
-          annotations: {
-            ...options?.annotations,
-            points: [
-              ...formattedPointAnnotations,
-              ...highlightPointAnnotations,
-              ...(options?.annotations?.points || []),
-            ],
-            xaxis: [
-              ...formattedXAxisAnnotations,
-              ...highlightLineAnnotations,
-              ...(options?.annotations?.xaxis || []),
-            ],
-          },
-        }}
-        height={height}
-        ref={ref}
-        type="area"
-        {...props}
-      />
-    );
-  }
-);

package/src/charts/chart/variants/BellCurve/constant.ts

@@ -1,112 +0,0 @@
-import { ColorHelpers } from '@cleen/ui-core';
-import type { ApexOptions } from 'apexcharts';
-import type {
-  PointAnnotation,
-  XAxisAnnotation,
-} from '@/charts/chart/types/apexcharts';
-
-export const POINT_ANNOTATIONS_PROPS: PointAnnotation = {
-  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',
-    },
-  },
-};
-
-export const RANGE_ANNOTATIONS_PROPS: XAxisAnnotation = {
-  label: {
-    borderColor: 'transparent',
-    style: {
-      color: 'rgba(var(--cleen-white))',
-      background: 'rgba(var(--cleen-primary))',
-    },
-  },
-  fillColor: 'rgba(var(--cleen-primary))',
-};
-
-export const HIGHLIGHT_LABEL_ANNOTATIONS_PROPS: XAxisAnnotation = {
-  label: {
-    borderWidth: 0,
-    offsetY: -15,
-    orientation: 'horizontal',
-    style: {
-      color: 'rgba(var(--cleen-primary))',
-      background: 'transparent',
-      fontSize: '16px',
-      fontWeight: 700,
-    },
-  },
-  borderColor: 'rgba(var(--cleen-primary))',
-};
-
-export const HIGHLIGHT_MARKER_ANNOTATIONS_PROPS: PointAnnotation = {
-  marker: {
-    size: 8,
-    fillColor: 'rgba(var(--cleen-primary))',
-    strokeColor: 'rgba(var(--cleen-white))',
-  },
-};
-
-export const DEFAULT_CHART_OPTIONS: ApexOptions = {
-  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: string | number) {
-        const n = typeof val === 'string' ? Number(val) : val;
-        return `Score: ${n}`;
-      },
-    },
-    y: {
-      formatter: function (val: number) {
-        return `${Number(val).toFixed(4)}`;
-      },
-    },
-  },
-  grid: { show: false },
-  legend: {
-    show: false,
-  },
-};

package/src/charts/chart/variants/BellCurve/helper.ts

@@ -1,116 +0,0 @@
-import type { XAxisAnnotation } from '@/charts/chart/types/apexcharts';
-import type { BellCurveRangeAnnotation } from './types/bellCurve';
-
-export const getAnnotationPointX = (middle: number, sigma: number) => {
-  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,
-  };
-};
-
-export const getAnnotationAxisX = (
-  middle: number,
-  sigma: number,
-  minX: number,
-  maxX: number
-) => {
-  return {
-    middle,
-    leftSigma: middle - sigma,
-    left2Sigma: middle - 2 * sigma,
-    left: minX,
-    rightSigma: middle + sigma,
-    right2Sigma: middle + 2 * sigma,
-    right: maxX,
-  };
-};
-
-export const calculateAnnotationAxisX = (
-  annotation: BellCurveRangeAnnotation,
-  positions: ReturnType<typeof getAnnotationAxisX>
-) => {
-  let props: Partial<XAxisAnnotation> = {};
-
-  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;
-};

package/src/charts/chart/variants/BellCurve/index.ts

@@ -1,2 +0,0 @@
-export { BellCurve } from './BellCurve';
-export type { BellCurveProps } from './types/props';