@ceed/cds 0.0.186 → 0.0.187-treeshaking.0

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,333 @@
+import React__default, { forwardRef, useMemo, Fragment } from 'react';
+import { styled } from '@mui/joy';
+import PreviousIcon from '../../external/@mui/icons-material/esm/ChevronLeft.js';
+import NextIcon from '../../external/@mui/icons-material/esm/ChevronRight.js';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from '../Button/Button.js';
+import { Typography } from '../Typography/Typography.js';
+import { getCalendarDates, getWeekdayNames, getMonthNameFromIndex } from './utils/index.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { useCalendarProps } from './hooks/use-calendar-props.js';
+import { useCalendar } from './hooks/use-calendar.js';
+
+const CalendarRoot = styled("div", {
+    name: "Calendar",
+    slot: "root",
+})({
+    maxWidth: "264px",
+});
+const CalendarHeader = styled("div", {
+    name: "Calendar",
+    slot: "calendarHeader",
+})(({ theme }) => ({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: theme.spacing(2),
+}));
+const CalendarViewContainer = styled("div", {
+    name: "Calendar",
+    slot: "viewContainer",
+    shouldForwardProp: (prop) => prop !== "calendarType",
+})(({ theme, calendarType }) => ({
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    position: "relative",
+    overflow: "hidden",
+    minHeight: calendarType === "datePicker" ? "250px" : "unset",
+}));
+const CalendarViewTable = styled(motion.table, {
+    name: "Calendar",
+    slot: "viewTable",
+})(({ theme }) => ({
+    borderSpacing: 0,
+    "& td, & th": {
+        padding: 0,
+    },
+    "& th": {
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
+    },
+}));
+const CalendarWeekHeaderContainer = styled("thead", {
+    name: "Calendar",
+    slot: "weekHeaderContainer",
+})({});
+const CalendarDayPickerContainer = styled("tbody", {
+    name: "Calendar",
+    slot: "dayPickerContainer",
+})({});
+const CalendarSwitchViewButton = styled(Button, {
+    name: "Calendar",
+    slot: "switchViewButton",
+})(({ ownerState }) => [
+    ownerState.view === "month" && {
+        pointerEvents: "none",
+    },
+]);
+const CalendarDayCell = styled("td", {
+    name: "Calendar",
+    slot: "dayCell",
+})(({ theme }) => ({
+    // aria-current=date === range에 포함된 버튼
+    "&[aria-current=date]": {
+        position: "relative",
+        "& button[aria-current=date]:not([aria-selected=true]):not(:hover):not(:active)": {
+            backgroundColor: `rgb(${theme.palette.primary.lightChannel})`,
+        },
+        '& + td[aria-hidden] + td[aria-current="date"]::before': {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: "-10px",
+            bottom: 0,
+            width: "16px",
+            backgroundColor: `rgb(${theme.palette.primary.lightChannel})`,
+            zIndex: -1,
+        },
+    },
+}));
+const CalendarMonthCell = styled("td", {
+    name: "Calendar",
+    slot: "monthCell",
+})(({ theme }) => ({
+    // aria-current=date === range에 포함된 버튼
+    "&[aria-current=date]": {
+        position: "relative",
+        "& button[aria-current=date]:not([aria-selected=true]):not(:hover):not(:active)": {
+            backgroundColor: `rgb(${theme.palette.primary.lightChannel})`,
+        },
+        '& + td[aria-hidden] + td[aria-current="date"]::before': {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: "-10px",
+            bottom: 0,
+            width: "16px",
+            backgroundColor: `rgb(${theme.palette.primary.lightChannel})`,
+            zIndex: -1,
+        },
+    },
+}));
+const CalendarMonth = styled(Button, {
+    name: "Calendar",
+    slot: "month",
+    shouldForwardProp: (prop) => prop !== "isSelected",
+})(({ theme, isSelected, disabled }) => [
+    {
+        width: "59px",
+        // height: "32px",
+        textAlign: "center",
+        "&:hover": {
+            color: theme.palette.primary.softColor,
+            backgroundColor: theme.palette.primary.softHoverBg,
+        },
+        "&:active": {
+            color: theme.palette.primary.softColor,
+            backgroundColor: theme.palette.primary.softActiveBg,
+        },
+    },
+    isSelected && {
+        backgroundColor: theme.palette.primary.solidBg,
+        color: theme.palette.primary.solidColor,
+        "&:hover": {
+            color: theme.palette.primary.solidColor,
+            backgroundColor: theme.palette.primary.solidHoverBg,
+        },
+        "&:active": {
+            color: theme.palette.primary.solidColor,
+            backgroundColor: theme.palette.primary.solidActiveBg,
+        },
+    },
+    disabled && {
+        color: theme.palette.neutral.solidDisabledColor,
+        backgroundColor: theme.palette.neutral.solidDisabledBg,
+    },
+]);
+const CalendarDay = styled(Button, {
+    name: "Calendar",
+    slot: "day",
+    shouldForwardProp: (prop) => !["isToday", "isSelected"].includes(prop),
+})(({ theme, isToday, isSelected, disabled }) => [
+    {
+        width: "32px",
+        height: "32px",
+        textAlign: "center",
+        "&:hover": {
+            color: theme.palette.primary.softColor,
+            backgroundColor: theme.palette.primary.softHoverBg,
+        },
+        "&:active": {
+            color: theme.palette.primary.softColor,
+            backgroundColor: theme.palette.primary.softActiveBg,
+        },
+    },
+    // NOTE: enabled, disabled 일때만 border 적용
+    isToday &&
+        !isSelected && {
+        "&:not([aria-current=date]):not(:hover)": {
+            border: `1px solid ${theme.palette.neutral.outlinedBorder}`,
+        },
+    },
+    isSelected && {
+        backgroundColor: theme.palette.primary.solidBg,
+        color: theme.palette.primary.solidColor,
+        "&:hover": {
+            color: theme.palette.primary.solidColor,
+            backgroundColor: theme.palette.primary.solidHoverBg,
+        },
+        "&:active": {
+            color: theme.palette.primary.solidColor,
+            backgroundColor: theme.palette.primary.solidActiveBg,
+        },
+    },
+    disabled && {
+        color: theme.palette.neutral.solidDisabledColor,
+        backgroundColor: theme.palette.neutral.solidDisabledBg,
+    },
+]);
+const variants = {
+    enter: (direction) => {
+        return {
+            x: direction > 0 ? 300 : -300,
+            opacity: 0,
+        };
+    },
+    center: {
+        position: "relative",
+        zIndex: 1,
+        x: 0,
+        opacity: 1,
+    },
+    exit: (direction) => {
+        return {
+            position: "absolute",
+            zIndex: 0,
+            x: direction < 0 ? 300 : -300,
+            opacity: 0,
+        };
+    },
+};
+const swipeConfidenceThreshold = 10000;
+const swipePower = (offset, velocity) => {
+    return Math.abs(offset) * velocity;
+};
+const PickerDays = (props) => {
+    // prop destruction
+    const { ownerState } = props;
+    // lib hooks
+    const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    const calendarDates = useMemo(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+    const weekdayNames = useMemo(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
+    // effects
+    // handlers
+    return (React__default.createElement(CalendarViewContainer, { calendarType: "datePicker" },
+        React__default.createElement(AnimatePresence, { initial: false, custom: ownerState.direction },
+            React__default.createElement(CalendarViewTable
+            // #region framer-motion
+            , { 
+                // #region framer-motion
+                key: `${ownerState.viewMonth.toString()}_${ownerState.direction}`, custom: ownerState.direction, variants: variants, initial: "enter", animate: "center", exit: "exit", transition: {
+                    x: { type: "spring", stiffness: 300, damping: 30 },
+                    opacity: { duration: 0.2 },
+                }, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: (e, { offset, velocity }) => {
+                    const swipe = swipePower(offset.x, velocity.x);
+                    if (swipe < -1e4) {
+                        const date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() + 1);
+                        ownerState.onMonthChange?.(date);
+                    }
+                    else if (swipe > swipeConfidenceThreshold) {
+                        const date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() - 1);
+                        ownerState.onMonthChange?.(date);
+                    }
+                } },
+                React__default.createElement(CalendarWeekHeaderContainer, null,
+                    React__default.createElement("tr", null, weekdayNames.map((name, i) => (React__default.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` },
+                        React__default.createElement("th", null,
+                            React__default.createElement(Typography, { level: "body-xs", textAlign: "center" }, name)),
+                        i < 6 && (React__default.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))))),
+                React__default.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => (React__default.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` },
+                    React__default.createElement("tr", null, weekDates.map((date, i) => date ? (React__default.createElement(Fragment, { key: i },
+                        React__default.createElement(CalendarDayCell, { ...getDayCellProps(date) },
+                            React__default.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)),
+                        i < 6 && (React__default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })))) : (React__default.createElement(Fragment, { key: i },
+                        React__default.createElement("td", null),
+                        i < 6 && (React__default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })))))),
+                    rowIndex < calendarDates.length - 1 && (React__default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" },
+                        React__default.createElement("td", { colSpan: 13, style: { height: 4 } })))))))))));
+};
+const PickerMonths = (props) => {
+    const { ownerState } = props;
+    const { getPickerMonthProps, getMonthCellProps } = useCalendar(ownerState);
+    const chunkedMonths = Array.from({ length: 12 }, (_, i) => i).reduce((acc, month) => {
+        if (acc[acc.length - 1].length === 4) {
+            acc.push([]);
+        }
+        acc[acc.length - 1].push(month);
+        return acc;
+    }, [[]]);
+    const isMonthPicker = !ownerState.views?.find((view) => view === "day");
+    return (React__default.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" },
+        React__default.createElement(AnimatePresence, { initial: false, custom: ownerState.direction },
+            React__default.createElement(CalendarViewTable
+            // #region framer-motion
+            , { 
+                // #region framer-motion
+                key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`, custom: ownerState.direction, variants: variants, initial: "enter", animate: "center", exit: "exit", transition: {
+                    x: { type: "spring", stiffness: 300, damping: 30 },
+                    opacity: { duration: 0.2 },
+                }, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: (e, { offset, velocity }) => {
+                    const swipe = swipePower(offset.x, velocity.x);
+                    if (swipe < -1e4) {
+                        const date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() + 1);
+                        ownerState.onMonthChange?.(date);
+                    }
+                    else if (swipe > swipeConfidenceThreshold) {
+                        const date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() - 1);
+                        ownerState.onMonthChange?.(date);
+                    }
+                } },
+                React__default.createElement("tbody", null, chunkedMonths.map((months, i) => (React__default.createElement(Fragment, { key: i },
+                    React__default.createElement("tr", null, months.map((monthIndex, j) => (React__default.createElement(Fragment, { key: monthIndex },
+                        React__default.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) },
+                            React__default.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))),
+                        j < 3 && (React__default.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))))),
+                    i < chunkedMonths.length - 1 && (React__default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" },
+                        React__default.createElement("td", { colSpan: 7, style: { height: 4 } })))))))))));
+};
+/**
+ * @see https://mui.com/x/api/date-pickers/date-calendar/ 인터페이스 참고
+ */
+const Calendar = forwardRef((inProps, ref) => {
+    // prop destruction
+    const [props, ownerState] = useCalendarProps(inProps);
+    const { value, defaultValue, onChange, locale, onViewChange, onMonthChange, view, views, rangeSelection, minDate, maxDate, disableFuture, disablePast, ...others } = props;
+    // lib hooks
+    const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React__default.createElement(CalendarRoot, { ref: ref, ...others },
+        React__default.createElement(CalendarHeader, null,
+            React__default.createElement(IconButton, { size: "sm", onClick: onPrev, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` },
+                React__default.createElement(PreviousIcon, null)),
+            React__default.createElement(CalendarSwitchViewButton, { ownerState: ownerState, variant: "plain", color: "neutral", onClick: onViewChange, "aria-label": "Switch Calendar View" }, calendarTitle),
+            React__default.createElement(IconButton, { size: "sm", onClick: onNext, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` },
+                React__default.createElement(NextIcon, null))),
+        view === "day" && React__default.createElement(PickerDays, { ownerState: ownerState }),
+        view === "month" && React__default.createElement(PickerMonths, { ownerState: ownerState })));
+});
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/dist/components/Calendar/hooks/use-calendar-props.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { View, CalendarProps } from "../types";
+import type { View, CalendarProps } from "../types.js";
 export declare const useCalendarProps: (inProps: CalendarProps) => readonly [{
     onChange: ((date: [Date, Date | undefined]) => void) | undefined;
     onMonthChange: (newMonth: Date) => void;
@@ -9,7 +9,7 @@ export declare const useCalendarProps: (inProps: CalendarProps) => readonly [{
     locale: string;
     view: View;
     views: View[];
-    slots?: Partial<Record<import("../types").CalendarSlot, React.ElementType<any, keyof React.JSX.IntrinsicElements>>> | undefined;
+    slots?: Partial<Record<import("../types.js").CalendarSlot, React.ElementType<any, keyof React.JSX.IntrinsicElements>>> | undefined;
     rangeSelection?: boolean | undefined;
     minDate?: Date | undefined;
     maxDate?: Date | undefined;
@@ -26,7 +26,7 @@ export declare const useCalendarProps: (inProps: CalendarProps) => readonly [{
     locale: string;
     view: View;
     views: View[];
-    slots?: Partial<Record<import("../types").CalendarSlot, React.ElementType<any, keyof React.JSX.IntrinsicElements>>> | undefined;
+    slots?: Partial<Record<import("../types.js").CalendarSlot, React.ElementType<any, keyof React.JSX.IntrinsicElements>>> | undefined;
     rangeSelection?: boolean | undefined;
     minDate?: Date | undefined;
     maxDate?: Date | undefined;

package/dist/components/Calendar/hooks/use-calendar-props.js

@@ -0,0 +1,74 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useThemeProps } from '@mui/joy';
+
+const resolveView = (view, views) => {
+    return views.includes(view) ? view : views[0];
+};
+const useCalendarProps = (inProps) => {
+    const [uncontrolledView, setUncontrolledView] = useState(() => resolveView(inProps.view || "day", inProps.views || ["day", "month"]));
+    const [uncontrolledValue, setUncontrolledValue] = useState(inProps.defaultValue);
+    const [viewMonth, setViewMonth] = useState(() => {
+        const today = new Date();
+        today.setDate(1);
+        today.setHours(0, 0, 0, 0);
+        return inProps.value?.[0] || inProps.defaultValue?.[0] || today;
+    });
+    const [[page, direction], setPage] = useState([0, 0]);
+    const resolvedView = inProps.view ?? uncontrolledView;
+    const paginate = (newDirection) => {
+        setPage([page + newDirection, newDirection]);
+    };
+    const handleViewMonthChange = useCallback((newMonth) => {
+        setViewMonth(newMonth);
+        if (resolvedView === "month") {
+            if (viewMonth.getFullYear() !== newMonth.getFullYear()) {
+                paginate(newMonth > viewMonth ? 1 : -1);
+            }
+        }
+        else {
+            paginate(newMonth > viewMonth ? 1 : -1);
+        }
+        inProps.onMonthChange?.(newMonth);
+    }, [inProps.onMonthChange, viewMonth, resolvedView]);
+    const props = useThemeProps({
+        props: {
+            locale: "default",
+            views: ["day", "month"],
+            view: resolvedView,
+            value: inProps.value ?? uncontrolledValue,
+            ...inProps,
+            // overrides
+            onChange: inProps.value
+                ? // Controlled
+                    inProps.onChange
+                : // Uncontrolled
+                    (value) => {
+                        setUncontrolledValue(value);
+                        inProps.onChange?.(value);
+                    },
+            onMonthChange: handleViewMonthChange,
+            onViewChange: () => {
+                const newView = resolvedView === "month" ? "day" : "month";
+                const isAllowedView = !inProps.views
+                    ? true
+                    : inProps.views.includes(newView);
+                if (!isAllowedView || inProps.view === newView)
+                    return;
+                if (inProps.onViewChange) {
+                    inProps.onViewChange(newView);
+                }
+                else {
+                    setUncontrolledView(newView);
+                }
+            },
+        },
+        name: "Calendar",
+    });
+    /**
+     * For ownerState
+     */
+    const ownerState = useMemo(() => ({ ...props, viewMonth, direction }), [props, viewMonth, direction]);
+    return [props, ownerState];
+};
+
+export { useCalendarProps };

package/dist/components/Calendar/hooks/use-calendar.d.ts

@@ -1,4 +1,4 @@
-import { CalendarOwnerState } from "../types";
+import { CalendarOwnerState } from "../types.js";
 export declare const useCalendar: (ownerState: CalendarOwnerState) => {
     calendarTitle: string;
     onPrev: () => void;