@ceed/cds 0.0.177-beta.5 → 0.0.178

package/src/components/MonthPicker/MonthPicker.tsx

@@ -1,327 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  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: "MonthPicker",
-  slot: "popper",
-})(({ theme }) => ({
-  zIndex: theme.zIndex.tooltip,
-}));
-
-const CalendarSheet = styled(Sheet, {
-  name: "MonthPicker",
-  slot: "sheet",
-  overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-  width: "264px",
-  boxShadow: theme.shadow.md,
-  borderRadius: theme.radius.md,
-}));
-
-const MonthPickerRoot = styled("div", {
-  name: "MonthPicker",
-  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 = (date: Date, format: string) => {
-  let month = `${date.getMonth() + 1}`;
-  const year = date.getFullYear();
-
-  if (Number(month) < 10) month = "0" + month;
-
-  return format.replace(/YYYY/g, year.toString()).replace(/MM/g, month);
-};
-
-const formatToPattern = (format: string): string => {
-  return format
-    .replace(/YYYY/g, "Y")
-    .replace(/MM/g, "M")
-    .replace(/[^YM\s]/g, (match) => `${match}\``);
-};
-
-function parseDate(dateString: string) {
-  let month, year;
-  const cleanDateString = dateString.replace(/[^\d]/g, "");
-  if (dateString.match(/\d{1,2}.\d{4}/)) {
-    // MMYYYY
-    month = cleanDateString.slice(0, 2);
-    year = cleanDateString.slice(2);
-  } else if (dateString.match(/\d{4}.\d{1,2}/)) {
-    // YYYYMM
-    year = cleanDateString.slice(0, 4);
-    month = cleanDateString.slice(4);
-  }
-  const date = new Date(`${year}/${month}`);
-
-  return date;
-}
-
-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}
-        pattern={formatToPattern(format)}
-        blocks={{
-          M: {
-            mask: IMask.MaskedRange,
-            from: 1,
-            to: 12,
-            maxLength: 2,
-          },
-          Y: {
-            mask: IMask.MaskedRange,
-            from: 1900,
-            to: 9999,
-          },
-        }}
-        format={(date: Date) => formatValueString(date, format)}
-        parse={parseDate}
-        autofix="pad"
-        overwrite
-      />
-    );
-  }
-);
-
-interface BaseMonthPickerProps {
-  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 MonthPickerProps = BaseMonthPickerProps &
-  Omit<
-    React.ComponentProps<typeof Input>,
-    "onChange" | "value" | "defaultValue"
-  >;
-
-const MonthPicker = forwardRef<HTMLInputElement, MonthPickerProps>(
-  (inProps: MonthPickerProps, ref) => {
-    // prop destruction
-    const props = useThemeProps({ props: inProps, name: "MonthPicker" });
-    const {
-      onChange,
-      disabled,
-      label,
-      error,
-      helperText,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      required,
-      // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-      sx,
-      className,
-      format = "YYYY/MM",
-      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);
-
-    // 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]
-    );
-
-    return (
-      <MonthPickerRoot>
-        <FocusTrap open>
-          <>
-            <Input
-              {...innerProps}
-              color={error ? "danger" : innerProps.color}
-              ref={innerRef}
-              size={size}
-              value={value}
-              onChange={handleChange}
-              placeholder={format}
-              disabled={disabled}
-              required={required}
-              slotProps={{
-                input: { component: TextMaskAdapter, ref: innerRef, format },
-              }}
-              error={error}
-              className={className}
-              sx={{
-                ...sx,
-                // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-                fontFamily: "monospace",
-              }}
-              endDecorator={
-                <IconButton
-                  variant="plain"
-                  onClick={handleCalendarToggle}
-                  aria-label="Toggle Calendar"
-                  aria-controls="month-picker-popper"
-                  aria-haspopup="dialog"
-                  aria-expanded={open}
-                >
-                  <CalendarTodayIcon />
-                </IconButton>
-              }
-              label={label}
-              helperText={helperText}
-            />
-
-            {open && (
-              <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
-                <StyledPopper
-                  id="month-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
-                      view="month"
-                      views={["month"]}
-                      value={
-                        !Number.isNaN(new Date(value).getTime())
-                          ? [new Date(value), undefined]
-                          : undefined
-                      }
-                      onChange={([date]) => {
-                        handleChange({
-                          target: {
-                            name: props.name,
-                            value: formatValueString(date, format),
-                          },
-                        });
-                        setAnchorEl(null);
-                      }}
-                      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={() => {
-                          handleChange({
-                            target: {
-                              name: props.name,
-                              value: "",
-                            },
-                          });
-                          setAnchorEl(null);
-                        }}
-                      >
-                        Clear
-                      </Button>
-                    </DialogActions>
-                  </CalendarSheet>
-                </StyledPopper>
-              </ClickAwayListener>
-            )}
-          </>
-        </FocusTrap>
-      </MonthPickerRoot>
-    );
-  }
-);
-
-export { MonthPicker };

package/src/components/MonthPicker/index.ts

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

package/src/components/MonthRangePicker/MonthRangePicker.framer.ts

@@ -1,69 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const monthRangePickerPropertyControls: 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 - 2024/07",
-  },
-  format: {
-    title: "Format",
-    type: ControlType.Enum,
-    options: ["YYYY-MM", "YYYY/MM", "YYYY.MM", "MM-YYYY", "MM/YYYY", "MM.YYYY"],
-    defaultValue: "YYYY-MM",
-    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,
-  }
-};