@weing-dev/ui-kit-primitive 0.0.1 → 0.0.2

package/src/components/Chart/Chart.tsx

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

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

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

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

@@ -1,78 +0,0 @@
-/* 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

@@ -1,14 +0,0 @@
-.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;
-  }
-}