@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,230 @@
+import {
+  Chart as ChartJs,
+  CategoryScale,
+  LinearScale,
+  LineController,
+  BarController,
+  BarElement,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  DoughnutController,
+  PieController,
+  RadarController,
+  ScatterController,
+  BubbleController,
+  PolarAreaController,
+  RadialLinearScale,
+  Filler,
+  ChartData,
+} from "chart.js";
+
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import {
+  FunnelChart,
+  FunnelController,
+  TrapezoidElement,
+} from "chartjs-chart-funnel";
+import {
+  Bar,
+  Bubble,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Scatter,
+} from "react-chartjs-2";
+import React from "react";
+
+ChartJs.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineController,
+  BubbleController,
+  DoughnutController,
+  PieController,
+  LineElement,
+  BarController,
+  PolarAreaController,
+  BarElement,
+  RadarController,
+  RadialLinearScale,
+  ScatterController,
+  Title,
+  Tooltip,
+  Filler,
+  Legend,
+  ArcElement,
+  ChartDataLabels,
+  FunnelController,
+  TrapezoidElement
+);
+
+// type 값에 따라서 타입을 지정하기
+type LineChartData = ChartData<"line">;
+type BarChartData = ChartData<"bar">;
+type BubbleChartData = ChartData<"bubble">;
+type DoughnutChartData = ChartData<"doughnut">;
+type PieChartData = ChartData<"pie">;
+type PolarAreaChartData = ChartData<"polarArea">;
+type RadarChartData = ChartData<"radar">;
+type ScatterChartData = ChartData<"scatter">;
+type FunnelChartData = ChartData;
+
+type ChartType = {
+  type:
+    | "line"
+    | "bar"
+    | "bubble"
+    | "doughnut"
+    | "pie"
+    | "polarArea"
+    | "radar"
+    | "scatter"
+    | "funnel";
+  data:
+    | LineChartData
+    | BarChartData
+    | BubbleChartData
+    | DoughnutChartData
+    | PieChartData
+    | PolarAreaChartData
+    | RadarChartData
+    | ScatterChartData
+    | FunnelChartData;
+  options?: object;
+  width?: number;
+  height?: number;
+};
+
+// type ChartType = {
+//   type:
+//     | "line"
+//     | "bar"
+//     | "bubble"
+//     | "doughnut"
+//     | "pie"
+//     | "polarArea"
+//     | "radar"
+//     | "scatter"
+//     | "funnel";
+//   data: ChartData;
+//   options?: object;
+//   width?: number;
+//   height?: number;
+// };
+
+const defaultData = {
+  labels: ["January", "February", "March", "April", "May", "June", "July"],
+  datasets: [
+    {
+      label: "My First Dataset",
+      data: [65, 59, 80, 81, 56, 55, 40],
+      fill: false,
+      borderColor: "rgb(75, 192, 192)",
+      tension: 0.1,
+    },
+  ],
+};
+
+const defaultOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: "top" as const,
+    },
+    title: {
+      display: true,
+      text: "Chart.js Chart",
+    },
+  },
+};
+
+const Chart = (props: ChartType) => {
+  const {
+    type = "line",
+    data = defaultData,
+    options = defaultOptions,
+    width = 800,
+    height = 400,
+  } = props;
+  const canvasEl = React.useRef(null);
+
+  React.useEffect(() => {
+    const canvas = canvasEl.current;
+
+    if (canvas && type === "funnel") {
+      const ctx = (canvas as unknown as HTMLCanvasElement).getContext("2d");
+      if (!ctx) return;
+      console.log("type", type);
+      console.log("data", data);
+      const chart = ChartJs.getChart(ctx);
+      const drawChart = async () => {
+        new FunnelChart(ctx, {
+          data: data as ChartData<"funnel">,
+          options,
+          plugins: [ChartDataLabels],
+        });
+      };
+      chart?.destroy();
+      drawChart();
+    }
+  }, [data, options, type]);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        height: "40vh",
+        width: "80vw",
+      }}
+    >
+      {/* <canvas id="Chart" ref={canvasEl} width={width} height={height}></canvas> */}
+      {type === "line" && (
+        <Line
+          data={data as ChartData<"line">}
+          options={options}
+          width={width}
+          height={height}
+        />
+      )}
+      {type === "bar" && (
+        <Bar data={data as ChartData<"bar">} options={options} />
+      )}
+      {type === "bubble" && (
+        <Bubble data={data as ChartData<"bubble">} options={options} />
+      )}
+      {type === "doughnut" && (
+        <Doughnut data={data as ChartData<"doughnut">} options={options} />
+      )}
+      {type === "pie" && (
+        <Pie data={data as ChartData<"pie">} options={options} />
+      )}
+      {type === "polarArea" && (
+        <PolarArea data={data as ChartData<"polarArea">} options={options} />
+      )}
+      {type === "radar" && (
+        <Radar data={data as ChartData<"radar">} options={options} />
+      )}
+      {type === "scatter" && (
+        <Scatter data={data as ChartData<"scatter">} options={options} />
+      )}
+      {type === "funnel" && (
+        <canvas
+          id="Chart"
+          ref={canvasEl}
+          width={width}
+          height={height}
+        ></canvas>
+      )}
+    </div>
+  );
+};
+
+export default Chart;

package/src/components/Chart/README.md

@@ -0,0 +1,85 @@
+# Chart UI
+
+## Contents List
+
+1. [Quick Start](#QuickStart)
+2. [Reference](#Reference)
+3. [Example](#Example)
+
+## Quick Start
+
+```ts
+import { Chart } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+  //...
+
+  return (
+    <Chart
+      type={type}
+      data={data}
+      options={options}
+      width={width}
+      height={height}
+    />
+  );
+};
+```
+
+> ChartImage
+> ![chartImage](./images/barChart.png)
+
+## Reference
+
+### Chart
+
+| Prop                |                                        Type                                         | Required |                                                                                                                                           Default Value                                                                                                                                           |
+| :------------------ | :---------------------------------------------------------------------------------: | :------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| [type](#type)       | line \| bar \| bubble \| doughnut \| pie \| polarArea \| radar \| scatter \| funnel |    ✔️    |                                                                                                                                               line                                                                                                                                                |
+| [data](#data)       |                                      ChartData                                      |    ✔️    | <pre><code>{<br> labels: ["January", "February", "March", "April", "May", "June", "July"],<br> datasets: [<br> {<br> label: "My First Dataset",<br> data: [65, 59, 80, 81, 56, 55, 40],<br> fill: false,<br> borderColor: "rgb(75, 192, 192)",<br> tension: 0.1,<br> },<br> ],<br>};</code></pre> |
+| [options](#options) |                                       Object                                        |    -     |                                             <pre><code>{<br> responsive: true,<br> maintainAspectRatio: false,<br> plugins: {<br> legend: { position: "top" as const, },<br> title: { display: true, text: "Chart.js Chart" }<br> }<br>}</code></pre>                                             |
+| [width](#width)     |                                       Number                                        |    -     |                                                                                                                                                800                                                                                                                                                |
+| [height](#height)   |                                       Number                                        |    -     |                                                                                                                                                400                                                                                                                                                |
+
+| 1
+
+#### type
+
+`Chart`의 `type`을 설정하는 data입니다. 기본값은 `line`으로 prop에 type이 없는 경우, lineChart로 생성됩니다.
+
+#### data
+
+`Chart`를 생성하기 위한 데이터로, 현재 Chart.Js 에서 제공하는 타입으로 설정했습니다.
+
+data는 간략히 요약하면
+
+labels : `Chart`에 표시될 데이터값에 대응하는 이름 -> string 배열<br>
+dataSets: `Chart`에 설정된 `labels`에 대응하는 데이터 목록
+
+이 2가지의 데이터로 구성된 객체입니다.
+
+##### dataSets
+
+dataSets는 기본적으로 `label` 과 `data` 로 구성된 객체 배열입니다. 부가적인 설정(`borderColor`, `backgroundColor`, `borderWidth`..)을 구현하고 싶다면 대부분 이 dataSets를 구성하는 객체에 추가해주시면 됩니다.
+
+| Prop            | Description                    |
+| --------------- | ------------------------------ |
+| label           | 데이터셋 이름                  |
+| data            | 차트 표시에 사용하는 데이터 값 |
+| backgroundColor | 차트 항목 배경 색상            |
+| borderColor     | 차트 항목 테두리 색상          |
+| borderWidth     | 차트 항목 테두리 width         |
+
+`🔔Tip: dataSets의 data타입은 Chart의 type에 따라서 다르기 때문에 data작성 시, 주의가 필요합니다. 이를 지키지 않으면 구현하고자 하는 차트가 생성되지 않을 수 있습니다. `
+
+BubbleChart : `{x : number, y : number , r : number}[]` <br>
+ScatterChart : `{x : number, y : number}[]`<br>
+그 외의 경우 `number[]`으로 진행하되, 특정 type에서도 세부적으로 구현될수 있는 `Chart`의 방식에 따라 데이터를 다르게 설정해야할 수 있습니다.
+
+자세한 내용을 원하신다면 "https://www.chartjs.org/docs/latest/api/interfaces/ChartData.html"를 참조해주세요
+
+#### options
+
+`Chart`타이틀, 애니메이션,`Scale`, `Plugin` 관련 옵션을 입력하는 항목입니다.
+
+자세한 내용을 원하신다면 "https://www.chartjs.org/docs/latest/general/options.html"를 참조해주세요

package/src/components/Chips/Chips.colors.tsx

@@ -0,0 +1,185 @@
+import { Transparent } from "@/styles/baseColor";
+import { colorThemes as colorSet } from "@/styles/color2";
+
+const useChipsColors = () => {
+  const primary = {
+    contained: {
+      backgroundColor: colorSet.primary.pMain,
+      color: colorSet.primary.pContrastText,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: colorSet.primary.pDark,
+        color: colorSet.primary.pContrastText,
+        borderColor: "transparent",
+      },
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: colorSet.primary.pMain,
+      borderColor: colorSet.primary.p48,
+      hover: {
+        backgroundColor: colorSet.primary.p8,
+        color: colorSet.primary.pMain,
+        borderColor: colorSet.primary.pMain,
+      },
+    },
+    soft: {
+      backgroundColor: colorSet.primary.p8,
+      color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: colorSet.primary.p16,
+        color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
+        borderColor: "transparent",
+      },
+    },
+    text: {
+      backgroundColor: "transparent",
+      color: colorSet.primary.pMain,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: colorSet.primary.p8,
+        color: `var(--swapDarkLightDeepGreen, ${colorSet.light.swapDarkLightDeepGreen})`,
+        borderColor: "transparent",
+      },
+    },
+  };
+
+  const inherit = {
+    contained: {
+      backgroundColor: `var(--inheritBgcolor, ${colorSet.light.inheritBgcolor})`,
+      color: `var(--textContrast, ${colorSet.light.textContrast})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: `var(--inheritHover, ${colorSet.light.inheritHover})`,
+        color: `var(--textContrast, ${colorSet.light.textContrast})`,
+        borderColor: "transparent",
+      },
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: Transparent.grey32,
+      hover: {
+        backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
+        color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+        borderColor: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      },
+    },
+    soft: {
+      backgroundColor: Transparent.grey8,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: Transparent.grey24,
+        color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+        borderColor: "transparent",
+      },
+    },
+    text: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
+        color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+        borderColor: "transparent",
+      },
+    },
+  };
+
+  const disabled = {
+    contained: {
+      backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+        color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+        borderColor: "transparent",
+      },
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+      hover: {
+        backgroundColor: "transparent",
+        color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+        borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+      },
+    },
+    soft: {
+      backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+        color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+        borderColor: "transparent",
+      },
+    },
+    text: {
+      backgroundColor: "transparent",
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: "transparent",
+        color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+        borderColor: "transparent",
+      },
+    },
+  };
+
+  const dual = {
+    contained: {
+      backgroundColor: Transparent.grey8,
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: colorSet.primary.pMain,
+        color: `var(--textContrast, ${colorSet.light.textContrast})`,
+        borderColor: "transparent",
+      },
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: Transparent.grey32,
+      hover: {
+        backgroundColor: colorSet.primary.p8,
+        color: colorSet.primary.pMain,
+        borderColor: colorSet.primary.pMain,
+      },
+    },
+    soft: {
+      backgroundColor: Transparent.grey8,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: Transparent.grey24,
+        color: colorSet.primary.p16,
+        borderColor: "transparent",
+      },
+    },
+    text: {
+      backgroundColor: "transparent",
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: "transparent",
+      hover: {
+        backgroundColor: colorSet.primary.p8,
+        color: `var(--swapDarkLightDeepGreen, ${colorSet.light.swapDarkLightDeepGreen})`,
+        borderColor: "transparent",
+      },
+    },
+  };
+
+  return {
+    primary,
+    inherit,
+    disabled,
+    dual,
+  };
+};
+
+export default useChipsColors;

package/src/components/Chips/Chips.module.scss

@@ -0,0 +1,49 @@
+@layer Chips {
+  .ChipsWrapper {
+    padding: 0 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    // &.checked {
+    //   background-color: var(--active-background-color, #007aff);
+    //   color: var(--active-tint-color, #ffffff);
+    //   border: 1px solid var(--active-border-color, #007aff);
+    // }
+    background-color: var(--default-background-color, #edeff2);
+    color: var(--default-tint-color, #000000);
+    border: 1px solid var(--default-border-color, #d9d9d9);
+
+    &.large {
+      height: 48px;
+      @include labelLarge;
+    }
+    &.medium {
+      height: 40px;
+      @include labelMedium;
+    }
+    &.small {
+      height: 32px;
+      @include labelMedium;
+    }
+
+    &.outlined {
+      border-radius: 16px;
+    }
+
+    &.round {
+      border-radius: 22px;
+
+      &.small {
+        border-radius: 16px;
+      }
+    }
+    &.square {
+      border-radius: 8px;
+
+      &.small {
+        border-radius: 4px;
+      }
+    }
+  }
+}

package/src/components/Chips/Chips.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+import React from "react";
+import styles from "./Chips.module.scss";
+import cn from "classnames/bind";
+import useChipsColors from "./Chips.colors";
+
+const cx = cn.bind(styles);
+
+type ChipsProps = React.PropsWithChildren<{
+  className?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  value?: string | string[];
+  id?: string;
+  onClick?: (...args: any) => void;
+  onChange?: (...args: any) => void;
+  size?: "small" | "medium" | "large";
+  variant?: "contained" | "outlined" | "soft" | "text";
+  colorType?: "primary" | "inherit" | "dual";
+  shapeType?: "square" | "round";
+}>;
+
+const Chips = (props: ChipsProps) => {
+  const {
+    className,
+    children,
+    size = "medium",
+    variant = "outlined",
+    colorType = "primary",
+    checked,
+    shapeType = "round",
+    disabled,
+    onClick,
+  } = props;
+  const _chips = React.useRef<HTMLDivElement>(null);
+
+  const chipsColor = useChipsColors();
+  const colorSet = chipsColor[colorType];
+
+  const defaultBackgroundColor = !disabled
+    ? checked
+      ? colorSet[variant].hover.backgroundColor
+      : colorSet[variant].backgroundColor
+    : chipsColor["disabled"][variant].backgroundColor;
+  const defaultBorderColor = !disabled
+    ? checked
+      ? colorSet[variant].hover.borderColor
+      : colorSet[variant].borderColor
+    : chipsColor["disabled"][variant].borderColor;
+  const defaultTintColor = !disabled
+    ? checked
+      ? colorSet[variant].hover.color
+      : colorSet[variant].color
+    : chipsColor["disabled"][variant].color;
+
+  return (
+    <div
+      className={cx("ChipsWrapper", size, variant, className, shapeType, {
+        checked,
+      })}
+      style={{
+        "--default-background-color": defaultBackgroundColor,
+        // "--active-background-color": activeBackgroundColor,
+        "--default-border-color": defaultBorderColor,
+        // "--active-border-color": activeBorderColor,
+        "--default-tint-color": defaultTintColor,
+        // "--active-tint-color": activeTintColor,
+      }}
+      ref={_chips}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Chips;

package/src/components/Comment/Comment.module.scss

@@ -0,0 +1,14 @@
+.CommentWrapper {
+  padding: 8px;
+  background: var(--Gray-Gray99, #f6f8fb);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+
+  .Caption {
+    @include captionRegularSmall;
+    vertical-align: top;
+  }
+}