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

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);
-        }
-      }
-    }
-  }
-}

package/src/components/Calendar/Calendar.tsx

@@ -1,440 +0,0 @@
-import React from "react";
-import styles from "./Calendar.module.scss";
-import cn from "classnames/bind";
-import dayjs from "dayjs";
-import {
-  CalendarContext,
-  CalendarProvider,
-  CalendarProviderProps,
-} from "./Calendar.context";
-import {
-  getCalendarColumns,
-  getDayText,
-  getWeekdayColumns,
-} from "./dayjs.util";
-import { Icon } from "../Icon/Icon";
-
-const cx = cn.bind(styles);
-
-type AsBodyProps = {
-  columns: dayjs.Dayjs[];
-  className?: string;
-  columnRender: () => React.ReactNode;
-};
-
-type ColumnAsProps = {
-  date: string;
-  visible: boolean;
-  className?: string;
-  selected: boolean;
-  onClick?: (date: string) => void;
-  disabled: boolean;
-  between: boolean;
-  both: boolean;
-  start: boolean;
-  end: boolean;
-  columns: dayjs.Dayjs[];
-};
-
-type CalendarBodyProps = {
-  as?: (props: AsBodyProps) => React.ReactNode;
-  className?: string;
-  /** 이전, 다음달 채울지 여부 */
-  isFill?: boolean;
-  /** column className */
-  columnClassName?: string;
-  columnAs?: (props: ColumnAsProps) => React.ReactNode;
-};
-
-const Body = (props: CalendarBodyProps) => {
-  const { as, className, isFill, columnClassName, columnAs } = props;
-  const { handleDatePress, excludeDates, minDate, maxDate } =
-    React.useContext(CalendarContext);
-
-  const {
-    currentWeekFirst,
-    currentMonthFirst,
-    calendarType,
-    isWeekend,
-    isWeekDay,
-    isMondayStart,
-    selectedDate,
-  } = React.useContext(CalendarContext);
-
-  const value = React.useMemo(() => {
-    if (Array.isArray(selectedDate)) {
-      return {
-        start: selectedDate[0] || "",
-        end: selectedDate[1] || "",
-      };
-    } else {
-      return {
-        start: selectedDate || "",
-        end: "",
-      };
-    }
-  }, [selectedDate]);
-
-  const weekList = getWeekdayColumns({
-    date: currentWeekFirst ?? "",
-    isWeekDay,
-    isWeekend,
-    isMondayStart,
-  });
-
-  const monthList = getCalendarColumns({
-    date: currentMonthFirst ?? "",
-    isWeekDay,
-    isWeekend,
-    isMondayStart,
-  });
-
-  const list = calendarType === "month" ? monthList : weekList;
-
-  const columns = isWeekend && isWeekDay ? 7 : isWeekend ? 2 : 5;
-
-  const checkDisabled = (date: string) => {
-    if (excludeDates?.includes(date)) {
-      return true;
-    }
-
-    if (minDate && dayjs(date).isBefore(minDate, "day")) {
-      return true;
-    }
-
-    if (maxDate && dayjs(date).isAfter(maxDate, "day")) {
-      return true;
-    }
-
-    return false;
-  };
-
-  const onChange = (date: string) => {
-    if (Array.isArray(selectedDate)) {
-      if (value.start && !value.end) {
-        const isStartBeforeEnd = dayjs(value.start).isBefore(date);
-
-        handleDatePress?.([
-          isStartBeforeEnd ? value.start : date,
-          isStartBeforeEnd ? date : value.end,
-        ]);
-        return;
-      } else {
-        handleDatePress?.([date, ""]);
-        return;
-      }
-    } else {
-      handleDatePress?.(date);
-    }
-  };
-
-  const columnRender = () => {
-    return list.map((item) => {
-      const isStart = dayjs(value.start).isSame(item, "D");
-      const isEnd = dayjs(value.end).isSame(item, "D");
-
-      if (columnAs) {
-        const props = {
-          date: item.format("YYYY-MM-DD"),
-          visible: isFill ? true : item.isSame(currentMonthFirst, "month"),
-          className: columnClassName,
-          selected: isStart || isEnd,
-          onClick: handleDatePress,
-          disabled: checkDisabled(item.format("YYYY-MM-DD")),
-          between:
-            !!value.start &&
-            !!value.end &&
-            dayjs(value.start).isBefore(item) &&
-            dayjs(value.end).isAfter(item),
-          both: isStart && isEnd,
-          start: !!value.start && !!value.end && isStart,
-          end: !!value.start && !!value.end && isEnd,
-          columns: list,
-        };
-
-        return React.createElement(columnAs, {
-          key: item.toString(),
-          ...props,
-        });
-      }
-      return (
-        <button
-          key={item.toString()}
-          className={cx("CalendarBodyColumn", columnClassName, {
-            today: item.isSame(dayjs(), "day"),
-            between:
-              value.start &&
-              value.end &&
-              dayjs(value.start).isBefore(item) &&
-              dayjs(value.end).isAfter(item),
-            both: isStart && isEnd,
-            start: value.start && value.end && isStart,
-            end: value.start && value.end && isEnd,
-          })}
-          disabled={checkDisabled(item.format("YYYY-MM-DD"))}
-          style={{
-            visibility: isFill
-              ? "visible"
-              : item.isSame(currentMonthFirst, "month")
-              ? "visible"
-              : "hidden",
-          }}
-          onClick={onChange?.bind(null, item.format("YYYY-MM-DD"))}
-        >
-          <span
-            className={cx("CalendarBodyColumnText", {
-              selected: isStart || isEnd,
-            })}
-          >
-            {item.format(item.isSame(currentMonthFirst, "month") ? "D" : "M.D")}
-          </span>
-        </button>
-      );
-    });
-  };
-
-  return as ? (
-    as({ columns: list, className, columnRender })
-  ) : (
-    <div
-      className={cx("CalendarBody", className)}
-      style={{
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gridTemplateRows: `repeat(${Math.ceil(list.length / columns)}, 1fr)`,
-      }}
-    >
-      {columnRender()}
-    </div>
-  );
-};
-
-type AsDirectionProps = {
-  disabled?: boolean;
-};
-
-type DirectionButtonProps = {
-  as?: (props: AsDirectionProps) => React.ReactNode;
-  className?: string;
-  disabled?: boolean;
-  moveValue?: number;
-};
-
-const Next = (props: DirectionButtonProps) => {
-  const { as, className, disabled, moveValue } = props;
-  const { calendarType, addMonth, addWeek, maxDate, currentMonthFirst } =
-    React.useContext(CalendarContext);
-
-  const handleClick = React.useCallback(() => {
-    if (calendarType === "month") {
-      addMonth(moveValue);
-    } else {
-      addWeek(moveValue);
-    }
-  }, [addMonth, addWeek, calendarType, moveValue]);
-
-  const isDisabled = disabled
-    ? disabled
-    : maxDate
-    ? dayjs(currentMonthFirst).isSame(maxDate, "month")
-      ? true
-      : false
-    : false;
-
-  return (
-    <button
-      className={cx("CalendarDirectionButton", "next", className)}
-      onClick={handleClick}
-      disabled={isDisabled}
-    >
-      {as ? (
-        as({ disabled: isDisabled })
-      ) : (
-        <Icon
-          name={"GoNext"}
-          size={24}
-          color={isDisabled ? "rgba(0, 0, 0, 0.2)" : undefined}
-        />
-      )}
-    </button>
-  );
-};
-
-const Prev = (props: DirectionButtonProps) => {
-  const { as, className, disabled, moveValue } = props;
-  const {
-    calendarType,
-    subtractWeek,
-    subtractMonth,
-    minDate,
-    currentMonthFirst,
-  } = React.useContext(CalendarContext);
-
-  const handleClick = React.useCallback(() => {
-    if (calendarType === "month") {
-      subtractMonth(moveValue);
-    } else {
-      subtractWeek(moveValue);
-    }
-  }, [calendarType, subtractMonth, moveValue, subtractWeek]);
-
-  const isDisabled = disabled
-    ? disabled
-    : minDate
-    ? dayjs(currentMonthFirst).isSame(minDate, "month")
-    : false;
-
-  return (
-    <button
-      className={cx("CalendarDirectionButton", "prev", className)}
-      onClick={handleClick}
-      disabled={isDisabled}
-    >
-      {as ? (
-        as({ disabled: isDisabled })
-      ) : (
-        <Icon
-          name={"GoBefore"}
-          size={24}
-          color={isDisabled ? "rgba(0, 0, 0, 0.2)" : undefined}
-        />
-      )}
-    </button>
-  );
-};
-
-type AsDayTextProps = {
-  columns: (string | undefined)[];
-};
-
-type DayTextListProps = React.PropsWithChildren<{
-  as?: (props: AsDayTextProps) => React.ReactNode;
-  /** dayColumn */
-  column?: React.ReactElement;
-  className?: string;
-}>;
-
-const DayTextList = (props: DayTextListProps) => {
-  const { as, column = <DayTextColumn />, className } = props;
-  const { isWeekDay, isWeekend, isMondayStart, lang } =
-    React.useContext(CalendarContext);
-
-  const dayList = React.useMemo(() => {
-    const columns = [];
-
-    if (!isWeekDay && !isWeekend) {
-      return [];
-    }
-
-    const weekDayArray = isWeekDay
-      ? new Array(5).fill(0).map((_, index) => {
-          return index + 1;
-        })
-      : [];
-
-    const weekEndArray = isWeekend
-      ? new Array(2).fill(0).map((_, index) => {
-          return (index + 6) % 7;
-        })
-      : [];
-
-    if (!isWeekDay && isWeekend) {
-      return weekEndArray;
-    }
-
-    if (isMondayStart) {
-      columns.push(...weekDayArray, ...weekEndArray);
-    } else {
-      columns.push(weekEndArray[1], ...weekDayArray, weekEndArray[0]);
-    }
-
-    return columns.filter((column) => column !== undefined);
-  }, [isMondayStart, isWeekDay, isWeekend]);
-
-  return as ? (
-    as({ columns: dayList.map((day) => getDayText(day, lang)) })
-  ) : (
-    <div
-      className={cx("CalendarDayTextList", className)}
-      style={{
-        gridTemplateColumns: `repeat(${dayList.length}, 1fr)`,
-      }}
-    >
-      {dayList.map((day) => {
-        return React.cloneElement(column as React.ReactElement<any>, {
-          key: day,
-          children: getDayText(day, lang),
-          day,
-        });
-      })}
-    </div>
-  );
-};
-
-type DayTextProps = React.PropsWithChildren<{
-  day?: number;
-  children?: React.ReactNode;
-  className?: string;
-}>;
-
-const DayTextColumn = (props: DayTextProps) => {
-  const { children, day, className } = props;
-
-  return (
-    <p
-      className={cx("CalednarDayTextColumn", className, {
-        saturday: day === 6,
-        sunday: day === 0,
-      })}
-    >
-      {children}
-    </p>
-  );
-};
-
-type HeaderDateProps = {
-  className?: string;
-  format?: string;
-};
-
-const HeaderDate = (props: HeaderDateProps) => {
-  const { className, format = "YYYY-MM" } = props;
-  const { currentDate } = React.useContext(CalendarContext);
-  return (
-    <p className={cx("CalendarHeaderDate", className)}>
-      {dayjs(currentDate).format(format)}
-    </p>
-  );
-};
-
-type RootProps = CalendarProviderProps & {
-  currentDate?: string;
-  className?: string;
-};
-
-const Root = (props: RootProps) => {
-  const { children, className, ...rest } = props;
-
-  return (
-    <CalendarProvider {...rest}>
-      <div className={cx("CaledarRoot", className)}>{children}</div>
-    </CalendarProvider>
-  );
-};
-
-interface ICalendar {
-  Root: typeof Root;
-  HeaderDate: typeof HeaderDate;
-  DayTextList: typeof DayTextList;
-  Prev: typeof Prev;
-  Next: typeof Next;
-  Body: typeof Body;
-}
-
-export default {
-  Root,
-  HeaderDate,
-  DayTextList,
-  Prev,
-  Next,
-  Body,
-} as ICalendar;