@x-plat/design-system 0.1.1

package/dist/components/Chart/index.cjs

@@ -0,0 +1,393 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Chart/index.ts
+var Chart_exports = {};
+__export(Chart_exports, {
+  Chart: () => Chart_default
+});
+module.exports = __toCommonJS(Chart_exports);
+
+// src/components/Chart/Chart.tsx
+var import_react = __toESM(require("react"), 1);
+
+// src/tokens/colors.ts
+var colors = {
+  xplat: {
+    red: {
+      50: "#FFF0F0",
+      100: "#FFDDDE",
+      200: "#FFC1C2",
+      300: "#FF9698",
+      400: "#FF5A5D",
+      500: "#FF272B",
+      600: "#F80409",
+      700: "#D40105",
+      800: "#AE0609",
+      900: "#900C0F"
+    },
+    green: {
+      50: "#E5F6EA",
+      100: "#C1E7CC",
+      200: "#98D8AC",
+      300: "#6CCA8B",
+      400: "#47BE72",
+      500: "#10B259",
+      600: "#00A34F",
+      700: "#009143",
+      800: "#007F38",
+      900: "#006024"
+    },
+    orange: {
+      50: "#FFF8EC",
+      100: "#FFF0D3",
+      200: "#FFDDA5",
+      300: "#FFC46D",
+      400: "#FF9F32",
+      500: "#FF820A",
+      600: "#FF6900",
+      700: "#CC4B02",
+      800: "#A13A0B",
+      900: "#82320C"
+    },
+    yellow: {
+      50: "#FFFDE7",
+      100: "#FFFAC1",
+      200: "#FFF186",
+      300: "#FFE041",
+      400: "#FFCC0D",
+      500: "#F0B100",
+      600: "#D18800",
+      700: "#A66002",
+      800: "#894B0A",
+      900: "#743D0F"
+    },
+    blue: {
+      50: "#F1F4FD",
+      100: "#DFE7FA",
+      200: "#C5D4F8",
+      300: "#9EB8F2",
+      400: "#7093EA",
+      500: "#4D6DE3",
+      600: "#3950D7",
+      700: "#303EC5",
+      800: "#2D35A0",
+      900: "#29317F"
+    },
+    lightblue: {
+      50: "#EEFAFF",
+      100: "#D9F4FF",
+      200: "#BBEDFF",
+      300: "#8DE3FF",
+      400: "#57D0FF",
+      500: "#30B6FF",
+      600: "#1999F7",
+      700: "#1280E3",
+      800: "#1566B8",
+      900: "#175791"
+    },
+    purple: {
+      50: "#FBF6FE",
+      100: "#F5EAFD",
+      200: "#EDD8FC",
+      300: "#E0BAF8",
+      400: "#CD8DF3",
+      500: "#B961EB",
+      600: "#A541DC",
+      700: "#9230C5",
+      800: "#782B9E",
+      900: "#62247F"
+    },
+    pink: {
+      50: "#FFF4FE",
+      100: "#FFE7FD",
+      200: "#FFCFFA",
+      300: "#FEA9F1",
+      400: "#FD75E7",
+      500: "#F553DA",
+      600: "#D821B6",
+      700: "#B31892",
+      800: "#921676",
+      900: "#781761"
+    },
+    neutral: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#E5E5E5",
+      300: "#D4D4D4",
+      400: "#A1A1A1",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717"
+    },
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  test: {
+    default: "#ffffff"
+  }
+};
+
+// src/components/Chart/Chart.tsx
+var import_chart = require("chart.js");
+var import_chartjs_plugin_datalabels = __toESM(require("chartjs-plugin-datalabels"), 1);
+var import_react_chartjs_2 = require("react-chartjs-2");
+
+// src/components/Chart/token/colorSet.ts
+var presets = [
+  [
+    colors.xplat.red[100],
+    colors.xplat.red[200],
+    colors.xplat.red[300],
+    colors.xplat.red[400],
+    colors.xplat.red[500],
+    colors.xplat.red[600]
+  ],
+  [
+    colors.xplat.orange[100],
+    colors.xplat.orange[200],
+    colors.xplat.orange[300],
+    colors.xplat.orange[400],
+    colors.xplat.orange[500],
+    colors.xplat.orange[600]
+  ],
+  [
+    colors.xplat.yellow[100],
+    colors.xplat.yellow[200],
+    colors.xplat.yellow[300],
+    colors.xplat.yellow[400],
+    colors.xplat.yellow[500],
+    colors.xplat.yellow[600]
+  ],
+  [
+    colors.xplat.green[100],
+    colors.xplat.green[200],
+    colors.xplat.green[300],
+    colors.xplat.green[400],
+    colors.xplat.green[500],
+    colors.xplat.green[600]
+  ],
+  [
+    colors.xplat.blue[100],
+    colors.xplat.blue[200],
+    colors.xplat.blue[300],
+    colors.xplat.blue[400],
+    colors.xplat.blue[500],
+    colors.xplat.blue[600]
+  ],
+  [
+    colors.xplat.lightblue[100],
+    colors.xplat.lightblue[200],
+    colors.xplat.lightblue[300],
+    colors.xplat.lightblue[400],
+    colors.xplat.lightblue[500],
+    colors.xplat.lightblue[600]
+  ],
+  [
+    colors.xplat.purple[100],
+    colors.xplat.purple[200],
+    colors.xplat.purple[300],
+    colors.xplat.purple[400],
+    colors.xplat.purple[500],
+    colors.xplat.purple[600]
+  ],
+  [
+    colors.xplat.pink[100],
+    colors.xplat.pink[200],
+    colors.xplat.pink[300],
+    colors.xplat.pink[400],
+    colors.xplat.pink[500],
+    colors.xplat.pink[600]
+  ],
+  [
+    colors.xplat.orange[300],
+    colors.xplat.red[300],
+    colors.xplat.yellow[300],
+    colors.xplat.green[300],
+    colors.xplat.blue[300],
+    colors.xplat.lightblue[300]
+  ],
+  [
+    colors.xplat.orange[400],
+    colors.xplat.red[400],
+    colors.xplat.yellow[400],
+    colors.xplat.green[400],
+    colors.xplat.blue[400],
+    colors.xplat.lightblue[400]
+  ],
+  [
+    colors.xplat.orange[500],
+    colors.xplat.red[500],
+    colors.xplat.yellow[500],
+    colors.xplat.green[500],
+    colors.xplat.blue[500],
+    colors.xplat.lightblue[500]
+  ]
+];
+var colorPresets = {
+  line: [
+    presets[0],
+    presets[1],
+    presets[2],
+    presets[3],
+    presets[4],
+    presets[5],
+    presets[6],
+    presets[7]
+  ],
+  bar: [
+    presets[0],
+    presets[1],
+    presets[2],
+    presets[3],
+    presets[4],
+    presets[5],
+    presets[6],
+    presets[7]
+  ],
+  doughnut: [presets[8], presets[9], presets[10]],
+  pie: [presets[8], presets[9], presets[10]]
+};
+
+// src/components/Chart/util.ts
+var getChartColorPreset = (type) => {
+  const index = Math.floor(Math.random() * colorPresets[type].length);
+  return colorPresets[type][index];
+};
+var getIndexColorByPreset = (preset, index) => {
+  const idx = index % preset.length;
+  return preset[idx];
+};
+
+// src/components/Chart/Chart.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+import_chart.Chart.register(
+  import_chart.CategoryScale,
+  import_chart.LinearScale,
+  import_chart.PointElement,
+  import_chart.LineElement,
+  import_chart.BarElement,
+  import_chart.ArcElement,
+  import_chart.Title,
+  import_chart.Tooltip,
+  import_chart.Legend,
+  import_chartjs_plugin_datalabels.default
+);
+var Chart = (props) => {
+  const { type, data, labels } = props;
+  const chartRef = import_react.default.useRef(null);
+  const containerRef = import_react.default.useRef(null);
+  const datasets = import_react.default.useMemo(() => {
+    const pallette = getChartColorPreset(type);
+    return Object.entries(data).map(([key, values], index) => {
+      const uniqueColors = getIndexColorByPreset(pallette, index);
+      if (type === "pie" || type === "doughnut") {
+        return {
+          label: key,
+          data: values,
+          backgroundColor: uniqueColors
+        };
+      }
+      return {
+        label: key,
+        data: values,
+        backgroundColor: uniqueColors,
+        borderColor: uniqueColors,
+        maxBarThickness: 32
+      };
+    });
+  }, [data, type]);
+  const chartData = {
+    labels,
+    datasets
+  };
+  const options = {
+    plugins: {
+      legend: { display: false },
+      datalabels: { display: false },
+      tooltip: { enabled: true }
+    }
+  };
+  if (type === "line" || type === "bar") {
+    options.scales = {
+      y: {
+        beginAtZero: true,
+        drawBorder: false,
+        suggestedMax: Math.max(...Object.values(data).flat()) * 1.2,
+        ticks: {
+          maxTicksLimit: 7
+        }
+      },
+      x: {
+        grid: { display: false },
+        ticks: { display: false }
+      }
+    };
+  }
+  if (type === "pie" || type === "doughnut") {
+    options.plugins.datalabels = {
+      color: colors.xplat.white,
+      font: { weight: "bold" },
+      formatter: (value) => `${value}`
+    };
+  }
+  const renderChart = import_react.default.useMemo(() => {
+    switch (type) {
+      case "line":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_chartjs_2.Line, { ref: chartRef, data: chartData, options });
+      case "bar":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_chartjs_2.Bar, { ref: chartRef, data: chartData, options });
+      case "pie":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_chartjs_2.Pie, { ref: chartRef, data: chartData, options });
+      case "doughnut":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_chartjs_2.Doughnut, { ref: chartRef, data: chartData, options });
+      default:
+        return null;
+    }
+  }, [chartData, options, type]);
+  import_react.default.useEffect(() => {
+    if (!containerRef.current || !chartRef.current) return;
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        chartRef.current?.resize();
+      });
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-chart", ref: containerRef, children: renderChart });
+};
+Chart.displayName = "Chart";
+var Chart_default = Chart;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chart
+});

package/dist/components/Chart/index.css

@@ -0,0 +1,4 @@
+/* src/components/Chart/chart.scss */
+.lib-xplat-chart {
+  width: 100%;
+}

package/dist/components/Chart/index.d.cts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface BasicChartProps {
+    type: "line" | "bar" | "pie" | "doughnut";
+    data: Record<string, number[]>;
+    labels: string[];
+}
+declare const Chart: React.FC<BasicChartProps>;
+
+export { Chart };

package/dist/components/Chart/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface BasicChartProps {
+    type: "line" | "bar" | "pie" | "doughnut";
+    data: Record<string, number[]>;
+    labels: string[];
+}
+declare const Chart: React.FC<BasicChartProps>;
+
+export { Chart };