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

package/src/components/Button/Button.module.scss

@@ -1,156 +0,0 @@
-@layer Button {
-  .ButtonIcon {
-    flex-shrink: 0;
-    // margin: 0 auto;
-  }
-
-  .ButtonRoot {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--default-color, #b1916b);
-    border: 1px solid var(--border-color, #b1916b);
-
-    &.circle {
-      aspect-ratio: 1 / 1 !important;
-      border-radius: 50% !important;
-      padding: 0 !important;
-    }
-
-    &:not(.circle) {
-      &.isFitted {
-        flex: 1;
-      }
-    }
-
-    &:not(.link) {
-      padding: 0 12px;
-      border-radius: var(--radius, 4px);
-      &.large {
-        height: 48px;
-      }
-
-      &.medium {
-        height: 40px;
-      }
-
-      &.small {
-        height: 32px;
-      }
-    }
-
-    &:hover {
-      background-color: var(--hover-bg-color, #b1916b);
-      border-color: var(--hover-border-color);
-    }
-    // &:active {
-    //   background-color: var(--active-color, #b1916b);
-    // }
-
-    &:disabled {
-      pointer-events: none;
-    }
-  }
-
-  .ButtonText {
-    color: var(--color, #fff);
-    &.large {
-      @include buttonLarge;
-      line-height: 24px;
-    }
-
-    &.medium {
-      @include buttonMedium;
-      line-height: 24px;
-    }
-
-    &.small {
-      @include buttonSmall;
-      line-height: 24px;
-    }
-  }
-}
-
-// // color
-// .contained {
-//   &.cyan {
-//     color: var(--cyan-cyan-100, #fff);
-//     background-color: var(--cyan-cyan-40, #00b4b4);
-
-//     &:hover {
-//       background-color: var(--cyan-cyan-50, #00caca);
-//     }
-
-//     &:active {
-//       background-color: var(--cyan-cyan-30, #009797);
-//     }
-//   }
-
-//   &:disabled {
-//     background-color: var(--simentic-surf-container-highest, #d0d2d5);
-//   }
-// }
-
-// .outlined {
-//   &.cyan {
-//     border-color: var(--cyan-cyan-40, #00b4b4);
-//     color: var(--cyan-cyan-40, #00b4b4);
-
-//     &:hover {
-//       border-color: var(--cyan-cyan-50, #00caca);
-//       color: var(--cyan-cyan-50, #00caca);
-//       background-color: var(--cyan-cyan-99, #f0fcfc);
-//     }
-
-//     &:active {
-//       border-color: var(--cyan-cyan-20, #007b7b);
-//       color: var(--cyan-cyan-20, #007b7b);
-//     }
-//   }
-
-//   &:disabled {
-//     color: var(--simentic-surf-container-highest, #d0d2d5);
-//     border-color: var(--simentic-surf-container-highest, #d0d2d5);
-//     pointer-events: none;
-//   }
-// }
-
-// // size
-// .Button {
-//   padding: 4px 12px;
-//   border-radius: 8px;
-//   border: 1px solid transparent;
-
-//   &.rounded {
-//     border-radius: 24px;
-//   }
-
-//   &.large {
-//     @include button1;
-//     min-height: 48px;
-//   }
-
-//   &.medium {
-//     @include button2;
-//     min-height: 40px;
-//   }
-
-//   &.small {
-//     @include button3;
-//     min-height: 32px;
-//   }
-
-//   &:disabled {
-//     cursor: not-allowed;
-//     pointer-events: none;
-//   }
-// }
-
-// .IconButton {
-//   width: auto;
-//   aspect-ratio: 1 /1;
-//   padding: 0;
-//   &.rounded {
-//     border-radius: 50%;
-//   }
-// }

package/src/components/Button/Button.tsx

@@ -1,190 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import React from "react";
-import cn from "classnames/bind";
-import styles from "./Button.module.scss";
-import { Icon as IconComponent } from "../Icon/Icon";
-import {
-  ButtonContext,
-  ButtonProvider,
-  ButtonProviderProps,
-  initialState,
-} from "./Button.context";
-import useButtonColors from "./Button.colors";
-
-const cx = cn.bind(styles);
-
-type TextProps = React.PropsWithChildren<{
-  className?: string;
-}>;
-
-const Text = (props: TextProps) => {
-  const { className } = props;
-  const { isLoading, loadingText, spinner, colorType } =
-    React.use(ButtonContext);
-  const { size, variant, disabled } = React.use(ButtonContext);
-  const buttonColors = useButtonColors();
-  const colorSet = buttonColors[disabled ? "disabled" : colorType];
-
-  return (
-    <span
-      className={cx("ButtonText", variant, size, className, {
-        disabled,
-      })}
-      style={{
-        "--color": colorSet[variant].color,
-      }}
-    >
-      {isLoading ? (
-        <React.Fragment>
-          {spinner}
-          {loadingText}
-        </React.Fragment>
-      ) : (
-        props.children
-      )}
-    </span>
-  );
-};
-
-type IconProps = React.PropsWithChildren<
-  React.ComponentProps<typeof IconComponent>
-> & {
-  className?: string;
-};
-
-const Icon = (props: IconProps) => {
-  const { className, name, color } = props;
-  const { size, disabled, variant, colorType } = React.use(ButtonContext);
-
-  const buttonColors = useButtonColors();
-  const colorSet = buttonColors[disabled ? "disabled" : colorType];
-
-  const iconSize = React.useMemo(() => {
-    switch (size) {
-      case "large":
-        return 24;
-      default:
-        return 20;
-    }
-  }, [size]);
-
-  return (
-    <IconComponent
-      name={name}
-      className={cx("ButtonIcon", size, className, {
-        disabled,
-      })}
-      color={color ?? colorSet[variant].color}
-      size={iconSize}
-    />
-  );
-};
-
-/** 버튼 컴포넌트 */
-const Root = (
-  props: ButtonProviderProps & {
-    radius?: number;
-    rounded?: boolean;
-    circle?: boolean;
-  } & React.JSX.IntrinsicElements["button"]
-) => {
-  const {
-    children,
-    shapeType = initialState.shapeType,
-    colorType = initialState.colorType,
-    variant = initialState.variant,
-    isLoading = initialState.isLoading,
-    spinner = initialState.spinner,
-    loadingText = initialState.loadingText,
-    disabled = initialState.disabled,
-    size = initialState.size,
-    isFitted = initialState.isFitted,
-    radius = 8,
-    rounded,
-    circle,
-    ...rest
-  } = props;
-
-  const contextValue = React.useMemo(() => {
-    return {
-      ...initialState,
-      ...props,
-      shapeType,
-      colorType,
-      variant,
-      isLoading,
-      spinner,
-      loadingText,
-      disabled,
-      size,
-      isFitted,
-    };
-  }, [
-    props,
-    shapeType,
-    colorType,
-    variant,
-    isLoading,
-    spinner,
-    loadingText,
-    disabled,
-    size,
-    isFitted,
-  ]);
-
-  const buttonColors = useButtonColors(shapeType);
-  const colorSet = buttonColors[colorType];
-
-  // 버튼 색상
-  const defaultColor = !disabled
-    ? colorSet[variant].backgroundColor
-    : buttonColors["disabled"][variant].backgroundColor;
-  const borderColor = !disabled
-    ? colorSet[variant].borderColor
-    : buttonColors["disabled"][variant].borderColor;
-  const hoverColor = colorSet[variant].hover.color;
-  const activeColor = colorSet[variant].hover.backgroundColor;
-  const hoverBackgroundColor = colorSet[variant].hover.backgroundColor;
-  const hoverBorderColor = colorSet[variant].hover.borderColor;
-
-  return (
-    <ButtonProvider {...contextValue}>
-      <button
-        {...rest}
-        className={cx("ButtonRoot", variant, size, rest.className, {
-          loading: isLoading,
-          disabled,
-          rounded,
-          circle,
-          isFitted,
-        })}
-        style={{
-          "--radius": `${radius}px`,
-          "--default-color": defaultColor,
-          "--hover-color": hoverColor,
-          "--active-color": activeColor,
-          "--hover-bg-color": hoverBackgroundColor,
-          "--border-color": borderColor,
-          "--hover-border-color": hoverBorderColor,
-          ...rest.style,
-        }}
-        disabled={disabled}
-        onClick={props.onClick}
-      >
-        {children}
-      </button>
-    </ButtonProvider>
-  );
-};
-
-interface IButton {
-  Text: typeof Text;
-  Icon: typeof Icon;
-  Root: typeof Root;
-}
-
-export default {
-  Text,
-  Icon,
-  Root,
-} as IButton;

package/src/components/Button/Button.type.ts

@@ -1,11 +0,0 @@
-import React from "react";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const colorType = ["cyan"] as const;
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  colorType?: (typeof colorType)[number];
-  size?: "small" | "medium" | "large" | "xLarge";
-  outlined?: "squared" | "rounded";
-  maxWidth?: number | string;
-  circle?: boolean;
-};

package/src/components/Calendar/Calendar.context.tsx

@@ -1,138 +0,0 @@
-import React from "react";
-import dayjs from "dayjs";
-import timezone from "dayjs/plugin/timezone";
-import utc from "dayjs/plugin/utc";
-import { LangType } from "./dayjs.util";
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-type CalendarContextType = {
-  addWeek: (val?: number) => void;
-  subtractWeek: (val?: number) => void;
-  addMonth: (val?: number) => void;
-  subtractMonth: (val?: number) => void;
-  /** 컬럼 선택시 핸들러 */
-  handleDatePress?: (date: string | string[]) => void;
-  /** 현재 날짜 */
-  currentDate?: string;
-  /** 월 첫 날 (현재 날짜 기준) */
-  currentMonthFirst?: string;
-  /** 주차 첫 날 (현재 날짜 기준) */
-  currentWeekFirst?: string;
-  /** 주말 노출 여부 */
-  isWeekend: boolean;
-  /** 평일 노출 여부 */
-  isWeekDay: boolean;
-  /** 월요일부터 시작 여부 */
-  isMondayStart: boolean;
-  /** 캘린더 타입 */
-  calendarType?: "week" | "month";
-  /** 언어 설정 */
-  lang?: LangType;
-  /** 선택 불가 날짜 목록 */
-  excludeDates?: string[];
-  /** 선택된 날짜 */
-  selectedDate?: string | string[];
-  /** min Date (최소 일자)*/
-  minDate?: string;
-  /** max Date (최대 일자) */
-  maxDate?: string;
-};
-
-const initialState: CalendarContextType = {
-  addMonth: () => {},
-  addWeek: () => {},
-  subtractMonth: () => {},
-  subtractWeek: () => {},
-  isWeekDay: true,
-  isWeekend: true,
-  isMondayStart: false,
-  calendarType: "month",
-  lang: "ko",
-  excludeDates: [],
-};
-
-export const CalendarContext =
-  React.createContext<CalendarContextType>(initialState);
-
-export type CalendarProviderProps = React.PropsWithChildren<{
-  /** 컬럼 선택시 핸들러 */
-  handleDatePress?: (date: string | string[]) => void;
-  currentDate?: string;
-  isWeekend?: boolean;
-  isWeekDay?: boolean;
-  isMondayStart?: boolean;
-  calendarType?: "week" | "month";
-  /** 선택 불가 날짜 목록 */
-  excludeDates?: string[];
-  /** 언어 설정 */
-  lang?: LangType;
-  /** 선택된 날짜 */
-  selectedDate?: string | string[];
-  /** min Date (최소 일자)*/
-  minDate?: string;
-  /** max Date (최대 일자) */
-  maxDate?: string;
-}>;
-
-export const CalendarProvider = (props: CalendarProviderProps) => {
-  const { children } = props;
-
-  const [currentDate, setCurrentDate] = React.useState<string>(
-    dayjs(props.currentDate).toString()
-  );
-
-  const [currentMonthFirst, setCurrentMonthFirst] = React.useState(
-    dayjs(props.currentDate).set("date", 1).toString()
-  );
-
-  const [currentWeekFirst, setCurrentWeekFirst] = React.useState(
-    dayjs(props.currentDate).startOf("week").toString()
-  );
-
-  const setCurrent = (value: number = 1, type: "week" | "month") => {
-    const newDate = dayjs(currentDate).add(value, type).format("YYYY-MM-DD");
-
-    setCurrentDate(newDate);
-
-    setCurrentWeekFirst(dayjs(newDate).startOf("week").format("YYYY-MM-DD"));
-    setCurrentMonthFirst(dayjs(newDate).set("date", 1).format("YYYY-MM-DD"));
-  };
-
-  React.useEffect(() => {
-    if (props.currentDate) {
-      setCurrentDate(dayjs(props.currentDate).toString());
-      setCurrentMonthFirst(
-        dayjs(props.currentDate).set('date', 1).format('YYYY-MM-DD'),
-      );
-      setCurrentWeekFirst(dayjs(props.currentDate).startOf('week').format("YYYY-MM-DD"));
-    }
-  }, [props.currentDate]);
-
-  return (
-    <CalendarContext.Provider
-      value={{
-        ...props,
-        currentDate,
-        currentMonthFirst,
-        currentWeekFirst,
-        addWeek: (val: number = 1) => setCurrent.call(null, val, "week"),
-        addMonth: (val: number = 1) => setCurrent.call(null, val, "month"),
-        subtractWeek: (val: number = 1) =>
-          setCurrent.call(null, val * -1, "week"),
-        subtractMonth: (val: number = 1) =>
-          setCurrent.call(null, val * -1, "month"),
-        isWeekend: props.isWeekend ?? true,
-        isWeekDay: props.isWeekDay ?? true,
-        isMondayStart: props.isMondayStart ?? false,
-        calendarType: props.calendarType ?? "month",
-        handleDatePress: props.handleDatePress,
-        selectedDate: props.selectedDate,
-        excludeDates: props.excludeDates,
-      }}
-    >
-      {children}
-    </CalendarContext.Provider>
-  );
-};

package/src/components/Calendar/Calendar.module.scss

@@ -1,116 +0,0 @@
-@layer Calendar {
-  .CaledarRoot {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1 auto;
-  }
-
-  .CalendarHeaderDate {
-    @include bodyBoldMedium;
-    color: var(--Neutral-10, #1a1c20);
-  }
-
-  .CalendarDayTextList {
-    display: grid;
-    flex-direction: row;
-    align-items: center;
-    flex-shrink: 0;
-    padding: 8px 0;
-  }
-
-  .CalednarDayTextColumn {
-    @include captionRegularLarge;
-    color: var(--Neutral-10, #1a1c20);
-    height: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
-    &.sunday {
-      color: #cc054b;
-    }
-
-    &.saturday {
-      color: #2a3480;
-    }
-  }
-
-  .CalendarBody {
-    flex: 1 auto;
-    display: grid;
-    // gap: 1px;
-
-    .CalendarBodyColumn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 36px;
-      margin-block: 4px;
-      cursor: pointer;
-      position: relative;
-      &.selected {
-        background-color: var(--Primary-50, #f5f5f5);
-      }
-
-      &.between {
-        background-color: #919eab14;
-      }
-      &.start::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 50%; /* 오른쪽 반만 덮음 */
-        bottom: 0;
-        right: 0;
-        background-color: #919eab14;
-      }
-      &.end::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 50%; /* 왼쪽 반만 덮음 */
-        background-color: #919eab14;
-      }
-      &.both {
-        border-radius: 50%;
-      }
-
-      &.today {
-        color: var(--pMain, orange);
-      }
-
-      &.sunday {
-        color: #cc054b;
-      }
-
-      &.saturday {
-        color: #2a3480;
-      }
-
-      &:disabled {
-        pointer-events: none;
-        color: var(--Neutral-40, #8c8c8c);
-      }
-
-      .CalendarBodyColumnText {
-        @include captionRegularLarge;
-        width: 36px;
-        line-height: 36px;
-        // color: var(--Neutral-10, #1a1c20);
-
-        &.selected {
-          border-radius: 50%;
-
-          aspect-ratio: 1;
-
-          color: var(--Primary-50, #f5f5f5);
-          background-color: var(--pMain, orange);
-        }
-      }
-    }
-  }
-}