@cleen/ui 0.1.0

package/package.json

@@ -0,0 +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"
+  }
+}

package/src/charts/chart/Chart.tsx

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,50 @@
+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

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

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,215 @@
+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

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,116 @@
+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

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

package/src/charts/chart/variants/BellCurve/types/bellCurve.ts

@@ -0,0 +1,47 @@
+import type {
+  PointAnnotation,
+  XAxisAnnotation,
+} from '@/charts/chart/types/apexcharts';
+
+export type BellPoints =
+  | 'middle'
+  | 'leftSigma'
+  | 'left2Sigma'
+  | 'left'
+  | 'rightSigma'
+  | 'right2Sigma'
+  | 'right';
+
+export type BellCurveSerie = {
+  x: number;
+  y: number;
+}[];
+
+export interface HighlightAnnotation {
+  x: number;
+  y?: number;
+  show?: 'line' | 'point' | 'both';
+  line?: XAxisAnnotation;
+  point?: PointAnnotation;
+}
+
+type RangeAnnotation = Omit<XAxisAnnotation, 'x' | 'x2'>;
+
+export type BellCurveRangeAnnotation =
+  | (RangeAnnotation & {
+      type: 'range';
+      x: BellPoints;
+      x2: BellPoints;
+    })
+  | (RangeAnnotation & {
+      type: 'region';
+      x: number;
+    })
+  | (RangeAnnotation & {
+      type: 'offset';
+      x: number;
+      offset: number;
+    })
+  | (XAxisAnnotation & {
+      type: 'custom';
+    });