@ceed/cds 0.0.177-beta.5 → 0.0.178

package/src/components/DateRangePicker/DateRangePicker.framer.ts

@@ -1,79 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const dateRangePickerPropertyControls: PropertyControls = {
-  onChange: {
-    title: "onChange",
-    type: ControlType.EventHandler,
-  },
-  disabled: {
-    title: "Disabled",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  required: {
-    title: "Required",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  value: {
-    title: "Value",
-    type: ControlType.String,
-    defaultValue: "2024/04/03 - 2024/04/20",
-  },
-  format: {
-    title: "Format",
-    type: ControlType.Enum,
-    options: [
-      "YYYY-MM-DD",
-      "YYYY/MM/DD",
-      "YYYY.MM.DD",
-      "MM-DD-YYYY",
-      "MM/DD/YYYY",
-      "MM.DD.YYYY",
-      "DD-MM-YYYY",
-      "DD/MM/YYYY",
-      "DD.MM.YYYY",
-    ],
-    defaultValue: "YYYY-MM-DD",
-    description: "노출될 날짜 형식을 결정합니다.",
-  },
-  label: {
-    title: "Label",
-    type: ControlType.String,
-    defaultValue: "",
-  },
-  error: {
-    title: "Error",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  helperText: {
-    title: "Helper Text",
-    type: ControlType.String,
-    defaultValue: "",
-  },
-  size: {
-    title: "Size",
-    type: ControlType.Enum,
-    options: ['sm', 'md', 'lg'],
-    optionTitles: ['Small', 'Medium', 'Large'],
-  },
-  minDate: {
-    title: "Minimum Date",
-    type: ControlType.String,
-  },
-  maxDate: {
-    title: "Maximum Date",
-    type: ControlType.String,
-  },
-  disableFuture: {
-    title: "Disable Future",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  disablePast: {
-    title: "Disable Past",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-};

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -1,362 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { IMaskInput, IMask } from "react-imask";
-import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
-import { styled, useThemeProps } from "@mui/joy";
-import { FocusTrap, ClickAwayListener, Popper } from "@mui/base";
-import Input from "../Input/index.js";
-import IconButton from "../IconButton/index.js";
-import Sheet from "../Sheet/index.js";
-import Calendar from "../Calendar/index.js";
-import DialogActions from "../DialogActions/index.js";
-import Button from "../Button/index.js";
-import { useControlledState } from "../../hooks/use-controlled-state/index.js";
-
-const StyledPopper = styled(Popper, {
-  name: "DateRangePicker",
-  slot: "popper",
-})(({ theme }) => ({
-  zIndex: theme.zIndex.tooltip,
-}));
-
-const CalendarSheet = styled(Sheet, {
-  name: "DateRangePicker",
-  slot: "sheet",
-  overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-  zIndex: theme.zIndex.tooltip,
-  width: "264px",
-  boxShadow: theme.shadow.md,
-  borderRadius: theme.radius.md,
-}));
-
-const DateRangePickerRoot = styled("div", {
-  name: "DateRangePicker",
-  slot: "root",
-  overridesResolver: (props, styles) => styles.root,
-})({
-  width: "100%",
-});
-
-interface MaskProps {
-  onChange: (event: { target: { name?: string; value: string } }) => void;
-  name?: string;
-  format: string;
-}
-
-const formatValueString = ([date1, date2]: [Date, Date], format: string) => {
-  const getStr = (date: Date) => {
-    let day = `${date.getDate()}`;
-    let month = `${date.getMonth() + 1}`;
-    const year = date.getFullYear();
-
-    if (Number(day) < 10) day = "0" + day;
-    if (Number(month) < 10) month = "0" + month;
-
-    return format
-      .replace(/YYYY/g, year.toString())
-      .replace(/MM/g, month)
-      .replace(/DD/g, day);
-  };
-
-  return [getStr(date1), date2 ? getStr(date2) : ""].join(" - ");
-};
-
-function parseDate(dateString: string, format: string): Date {
-  const formatParts = format.split(/[-./\s]/);
-  const dateParts = dateString.split(/[-./\s]/);
-
-  let day, month, year;
-
-  for (let i = 0; i < formatParts.length; i++) {
-    const value = parseInt(dateParts[i], 10);
-
-    switch (formatParts[i]) {
-      case "DD":
-        day = value;
-        break;
-      case "MM":
-        month = value - 1; // JavaScript months are 0-indexed
-        break;
-      case "YYYY":
-        year = value;
-        break;
-    }
-  }
-
-  const result = new Date(year!, month!, day!);
-
-  return result;
-}
-
-const parseDates = (str: string, format: string) => {
-  const date1 = str.split(" - ")[0] || "";
-  const date2 = str.split(" - ")[1] || "";
-
-  return [parseDate(date1, format), parseDate(date2, format)];
-};
-
-const formatToPattern = (format: string): string => {
-  return `${format} - ${format}`
-    .replace(/YYYY/g, "Y")
-    .replace(/MM/g, "M")
-    .replace(/DD/g, "D")
-    .replace(/[^YMD\s]/g, (match) => `${match}\``);
-};
-
-const TextMaskAdapter = React.forwardRef<HTMLInputElement, MaskProps>(
-  function TextMaskAdapter(props, ref) {
-    const { onChange, format, ...other } = props;
-    return (
-      <IMaskInput
-        {...other}
-        inputRef={ref}
-        onAccept={(value: any) =>
-          onChange({ target: { name: props.name, value } })
-        }
-        mask={Date as any} // enable date mask
-        // other options are optional
-        pattern={formatToPattern(format)} // Pattern mask with defined blocks, default is 'd{.}`m{.}`Y'
-        // you can provide your own blocks definitions, default blocks for date mask are:
-        blocks={{
-          D: {
-            mask: IMask.MaskedRange,
-            from: 1,
-            to: 31,
-            maxLength: 2,
-          },
-          M: {
-            mask: IMask.MaskedRange,
-            from: 1,
-            to: 12,
-            maxLength: 2,
-          },
-          Y: {
-            mask: IMask.MaskedRange,
-            from: 1900,
-            to: 9999,
-          },
-        }}
-        // define date -> str convertion
-        format={(dates: [Date, Date]) => formatValueString(dates, format)}
-        // define str -> date convertion
-        parse={(str) => parseDates(str, format)}
-        // optional interval options
-        // min={new Date(2000, 0, 1)} // defaults to `1900-01-01`
-        // max={new Date(2020, 0, 1)} // defaults to `9999-01-01`
-        autofix="pad"
-        overwrite
-      />
-    );
-  }
-);
-
-interface BaseDateRangePickerProps {
-  value?: string;
-  defaultValue?: string;
-  onChange?: (event: { target: { name?: string; value: string } }) => void;
-  name?: string;
-  disabled?: boolean;
-  required?: boolean;
-  label?: React.ReactNode;
-  error?: boolean;
-  helperText?: React.ReactNode;
-  minDate?: string;
-  maxDate?: string;
-  disableFuture?: boolean;
-  disablePast?: boolean;
-  format?: string;
-}
-
-export type DateRangePickerProps = BaseDateRangePickerProps &
-  Omit<
-    React.ComponentProps<typeof Input>,
-    "onChange" | "value" | "defaultValue"
-  >;
-
-const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps>(
-  (inProps: DateRangePickerProps, ref) => {
-    // prop destruction
-    const props = useThemeProps({ props: inProps, name: "DateRangePicker" });
-    const {
-      onChange,
-      disabled,
-      label,
-      error,
-      helperText,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      required,
-      // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-      sx,
-      className,
-      format = "YYYY/MM/DD",
-      size,
-      ...innerProps
-    } = props;
-
-    // lib hooks
-    // state, ref, querystring hooks
-    const innerRef = useRef<HTMLInputElement>(null);
-    const [value, setValue] = useControlledState(
-      props.value,
-      props.defaultValue || "",
-      useCallback(
-        (value: string) => onChange?.({ target: { name: props.name, value } }),
-        [props.name, onChange]
-      ),
-      { disableStrict: true }
-    );
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-    // form hooks
-    // query hooks
-    // calculated values
-    const open = Boolean(anchorEl);
-    const calendarValue = useMemo(
-      () => (value ? (parseDates(value, format) as [Date, Date]) : undefined),
-      [value, format]
-    );
-
-    // effects
-    useEffect(() => {
-      if (!anchorEl) {
-        // NOTE: 변경된 값을 blur이벤트 핸들러에서 다룰려면 calendar tooltip이 닫힐 때 blur 이벤트를 발생시켜야 한다.
-        innerRef.current?.blur();
-      }
-    }, [anchorEl, innerRef]);
-
-    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement, [
-      innerRef,
-    ]);
-    // handlers
-    const handleChange = useCallback(
-      (event: { target: { name?: string; value: string } }) => {
-        setValue(event.target.value);
-      },
-      [setValue]
-    );
-
-    const handleCalendarToggle = useCallback(
-      (event: React.MouseEvent<HTMLElement>) => {
-        setAnchorEl(anchorEl ? null : event.currentTarget);
-        innerRef.current?.focus();
-      },
-      [anchorEl, setAnchorEl, innerRef]
-    );
-
-    const handleCalendarChange = useCallback(
-      ([date1, date2]: [Date, Date | undefined]) => {
-        if (!date1 || !date2) return;
-        setValue(formatValueString([date1, date2 as any], format));
-        setAnchorEl(null);
-      },
-      [setValue, setAnchorEl, format]
-    );
-
-    return (
-      <DateRangePickerRoot>
-        <FocusTrap open>
-          <>
-            <Input
-              {...innerProps}
-              color={error ? "danger" : innerProps.color}
-              ref={ref}
-              size={size}
-              value={value}
-              onChange={handleChange}
-              disabled={disabled}
-              required={required}
-              placeholder={`${format} - ${format}`}
-              slotProps={{
-                input: { component: TextMaskAdapter, ref: innerRef, format },
-              }}
-              error={error}
-              className={className}
-              sx={sx}
-              endDecorator={
-                <IconButton
-                  variant="plain"
-                  onClick={handleCalendarToggle}
-                  aria-label="Toggle Calendar"
-                  aria-controls="date-range-picker-popper"
-                  aria-haspopup="dialog"
-                  aria-expanded={open}
-                >
-                  <CalendarTodayIcon />
-                </IconButton>
-              }
-              label={label}
-              helperText={helperText}
-            />
-
-            {open && (
-              <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
-                <StyledPopper
-                  id="date-range-picker-popper"
-                  open
-                  anchorEl={anchorEl}
-                  placement="bottom-end"
-                  // NOTE: 값이 변경 되기전 blur 이벤트 방지
-                  onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
-                  modifiers={[
-                    {
-                      name: "offset",
-                      options: {
-                        offset: [4, 4],
-                      },
-                    },
-                  ]}
-                  aria-label="Calendar Tooltip"
-                  aria-expanded={open}
-                >
-                  <CalendarSheet tabIndex={-1} role="presentation">
-                    <Calendar
-                      rangeSelection
-                      defaultValue={calendarValue}
-                      onChange={handleCalendarChange}
-                      minDate={minDate ? new Date(minDate) : undefined}
-                      maxDate={maxDate ? new Date(maxDate) : undefined}
-                      disableFuture={disableFuture}
-                      disablePast={disablePast}
-                    />
-                    <DialogActions
-                      sx={{
-                        p: 1,
-                      }}
-                    >
-                      <Button
-                        size={size}
-                        variant="plain"
-                        color="neutral"
-                        onClick={() => {
-                          setValue("");
-                          setAnchorEl(null);
-                        }}
-                      >
-                        Clear
-                      </Button>
-                    </DialogActions>
-                  </CalendarSheet>
-                </StyledPopper>
-              </ClickAwayListener>
-            )}
-          </>
-        </FocusTrap>
-      </DateRangePickerRoot>
-    );
-  }
-);
-
-export { DateRangePicker };
-
-DateRangePicker.displayName = "DateRangePicker";

package/src/components/DateRangePicker/index.ts

@@ -1,3 +0,0 @@
-import { DateRangePicker } from "./DateRangePicker.js";
-export * from "./DateRangePicker.js";
-export default DateRangePicker;

package/src/components/DialogActions/DialogActions.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { DialogActions as JoyDialogActions, styled } from "@mui/joy";
-import { motion } from "framer-motion";
-
-const MotionDialogActions = motion(JoyDialogActions);
-
-const StyledDialogActions = styled(MotionDialogActions)(({ theme }) => ({
-  padding: theme.spacing(2),
-  gap: theme.spacing(2),
-  flexDirection: "row",
-  justifyContent: "flex-end",
-}));
-
-const DialogActions = StyledDialogActions;
-
-export { DialogActions };
-
-DialogActions.displayName = "DialogActions";

package/src/components/DialogActions/index.ts

@@ -1,3 +0,0 @@
-import { DialogActions } from "./DialogActions.js";
-export * from "./DialogActions.js";
-export default DialogActions;

package/src/components/DialogContent/DialogContent.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { DialogContent as JoyDialogContent, styled } from "@mui/joy";
-import { motion } from "framer-motion";
-
-const MotionDialogContent = motion(JoyDialogContent);
-
-const StyledDialogContent = styled(MotionDialogContent)(({ theme }) => ({
-  padding: theme.spacing(0, 6, 5),
-}))
-
-const DialogContent = StyledDialogContent;
-
-export { DialogContent };
-
-DialogContent.displayName = "DialogContent";

package/src/components/DialogContent/index.ts

@@ -1,3 +0,0 @@
-import { DialogContent } from "./DialogContent.js";
-export * from "./DialogContent.js";
-export default DialogContent;

package/src/components/DialogFrame/DialogFrame.framer.ts

@@ -1,27 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const dialogFramePropertyControls: PropertyControls = {
-  title: {
-    type: ControlType.String,
-    defaultValue: "Title",
-  },
-  content: {
-    title: "Content",
-    type: ControlType.ComponentInstance,
-  },
-  actions: {
-    title: "Actions",
-    type: ControlType.ComponentInstance,
-  },
-  size: {
-    title: "Size",
-    type: ControlType.Enum,
-    options: ["sm", "md", "lg"],
-    defaultValue: "md",
-  },
-  fullscreen: {
-    title: "Fullscreen",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  }
-};

package/src/components/DialogFrame/DialogFrame.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-import DialogTitle from "../DialogTitle/index.js";
-import DialogContent from "../DialogContent/index.js";
-import { ModalDialog } from "../Modal/index.js";
-import DialogActions from "../DialogActions/index.js";
-import { styled } from "@mui/joy";
-
-const StyledDialogFrame = styled(ModalDialog, {
-  name: "Dialog",
-  slot: "Root",
-})({
-  padding: 0,
-});
-
-interface DialogFrameProps {
-  title: React.ReactNode;
-  children: React.ReactNode;
-  actions: React.ReactNode;
-  fullscreen?: boolean;
-}
-
-const DialogFrame = React.forwardRef<
-  HTMLDivElement,
-  Omit<
-    React.ComponentProps<typeof StyledDialogFrame>,
-    "title" | "children"
-  > &
-    DialogFrameProps
->((props, ref) => {
-  // prop destruction
-  const { title, children, actions, fullscreen, ...innerProps } = props;
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-
-  return (
-    <StyledDialogFrame
-      layout={fullscreen ? "fullscreen" : "center"}
-      ref={ref}
-      {...innerProps}
-    >
-      <DialogTitle>{title}</DialogTitle>
-      <DialogContent>{children}</DialogContent>
-      <DialogActions>{actions}</DialogActions>
-    </StyledDialogFrame>
-  );
-});
-
-export { DialogFrame };
-
-DialogFrame.displayName = "DialogFrame";

package/src/components/DialogFrame/index.ts

@@ -1,3 +0,0 @@
-import { DialogFrame } from "./DialogFrame.js";
-export * from "./DialogFrame.js";
-export default DialogFrame;

package/src/components/DialogTitle/DialogTitle.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { DialogTitle as JoyDialogTitle, styled } from "@mui/joy";
-import { motion } from "framer-motion";
-
-const MotionDialogTitle = motion(JoyDialogTitle);
-
-const StyledDialogTitle = styled(MotionDialogTitle)(({ theme }) => ({
-  padding: theme.spacing(4, 6),
-}));
-
-const DialogTitle = StyledDialogTitle;
-
-export { DialogTitle };
-
-DialogTitle.displayName = "DialogTitle";

package/src/components/DialogTitle/index.ts

@@ -1,3 +0,0 @@
-import { DialogTitle } from "./DialogTitle.js";
-export * from "./DialogTitle.js";
-export default DialogTitle;

package/src/components/Divider/Divider.framer.ts

@@ -1,13 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const dividerPropertyControls: PropertyControls = {
-  text: {
-    type: ControlType.String,
-    defaultValue: undefined,
-  },
-  orientation: {
-    title: "Orientation",
-    type: ControlType.Enum,
-    options: ["horizontal", "vertical"],
-  },
-};

package/src/components/Divider/Divider.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import { Divider as JoyDivider, DividerProps } from "@mui/joy";
-import { MotionProps, motion } from "framer-motion";
-
-const MotionDivider = motion(JoyDivider);
-
-const Divider = (props: DividerProps & MotionProps) => {
-  // prop destruction
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-
-  return <MotionDivider {...props} />;
-};
-
-export { Divider };
-
-Divider.displayName = "Divider";

package/src/components/Divider/index.ts

@@ -1,3 +0,0 @@
-import { Divider } from "./Divider.js";
-export * from "./Divider.js";
-export default Divider;

package/src/components/Drawer/Drawer.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { Drawer as JoyDrawer, DrawerProps, useTheme } from "@mui/joy";
-import { MotionProps, motion } from "framer-motion";
-
-const MotionDrawer = motion(JoyDrawer);
-
-const Drawer = (props: DrawerProps & MotionProps) => {
-  // prop destruction
-  const { children, size, ...innerProps } = props;
-  // lib hooks
-  const theme = useTheme();
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-
-  return (
-    <MotionDrawer
-      {...innerProps}
-      slotProps={{
-        ...innerProps.slotProps,
-        content: {
-          ...innerProps.slotProps?.content,
-          sx: {
-            bgcolor: "transparent",
-            boxShadow: "none",
-
-            [theme.breakpoints.down("md")]: {
-              width: "100%",
-            },
-          },
-        },
-      }}
-      sx={{
-        ...props.sx,
-        "--Drawer-horizontalSize": {
-          sm: "360px",
-          md: "600px",
-          lg: "900px",
-        }[size || "md"],
-      }}
-    >
-      {children}
-    </MotionDrawer>
-  );
-};
-
-export { Drawer };
-
-Drawer.displayName = "Drawer";