@weing-dev/ui-kit-primitive 0.0.0

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

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

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

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

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

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