@ceed/cds 0.0.177-beta.5 → 0.0.178

package/src/components/MonthRangePicker/MonthRangePicker.tsx

@@ -1,343 +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: "MonthRangePicker",
-  slot: "popper",
-})(({ theme }) => ({
-  zIndex: theme.zIndex.tooltip,
-}));
-
-const CalendarSheet = styled(Sheet, {
-  name: "MonthRangePicker",
-  slot: "sheet",
-  overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-  zIndex: theme.zIndex.tooltip,
-  width: "264px",
-  boxShadow: theme.shadow.md,
-  borderRadius: theme.radius.md,
-}));
-
-const MonthRangePickerRoot = styled("div", {
-  name: "MonthRangePicker",
-  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 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);
-  };
-
-  return [getStr(date1), date2 ? getStr(date2) : ""].join(" - ");
-};
-
-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 parseDates = (str: string): [Date, Date] => {
-  const date1 = str.split(" - ")[0] || "";
-  const date2 = str.split(" - ")[1] || "";
-
-  return [parseDate(date1), parseDate(date2)];
-};
-
-const formatToPattern = (format: string): string => {
-  return `${format} - ${format}`
-    .replace(/YYYY/g, "Y")
-    .replace(/MM/g, "m")
-    .replace(/[^YMm\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
-        // you can provide your own blocks definitions, default blocks for date mask are:
-        blocks={{
-          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={parseDates}
-        autofix="pad"
-        overwrite
-      />
-    );
-  }
-);
-
-interface BaseMonthRangePickerProps {
-  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 MonthRangePickerProps = BaseMonthRangePickerProps &
-  Omit<
-    React.ComponentProps<typeof Input>,
-    "onChange" | "value" | "defaultValue"
-  >;
-
-const MonthRangePicker = forwardRef<HTMLInputElement, MonthRangePickerProps>(
-  (inProps: MonthRangePickerProps, ref) => {
-    // prop destruction
-    const props = useThemeProps({ props: inProps, name: "MonthRangePicker" });
-    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);
-    const calendarValue = useMemo(
-      () => (value ? (parseDates(value) as [Date, Date]) : undefined),
-      [value]
-    );
-
-    // 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 (
-      <MonthRangePickerRoot>
-        <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,
-                // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-                fontFamily: "monospace",
-              }}
-              endDecorator={
-                <IconButton
-                  variant="plain"
-                  onClick={handleCalendarToggle}
-                  aria-label="Toggle Calendar"
-                  aria-controls="month-range-picker-popper"
-                  aria-haspopup="dialog"
-                  aria-expanded={open}
-                >
-                  <CalendarTodayIcon />
-                </IconButton>
-              }
-              label={label}
-              helperText={helperText}
-            />
-
-            {open && (
-              <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
-                <StyledPopper
-                  id="month-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
-                      view="month"
-                      views={["month"]}
-                      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>
-      </MonthRangePickerRoot>
-    );
-  }
-);
-
-export { MonthRangePicker };
-
-MonthRangePicker.displayName = "MonthRangePicker";

package/src/components/MonthRangePicker/index.ts

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

package/src/components/NavigationGroup/NavigationGroup.tsx

@@ -1,65 +0,0 @@
-import React, { ComponentProps, ReactNode } from "react";
-import {
-  Accordion as JoyAccordion,
-  AccordionSummary as JoyAccordionSummary,
-  AccordionDetails as JoyAccordionDetails,
-  styled,
-  accordionSummaryClasses,
-  Stack,
-} from "@mui/joy";
-
-const AccordionSummary = styled(JoyAccordionSummary, {
-  name: "NavigationGroup",
-  slot: "Summary",
-  shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level",
-})<{ useIcon?: boolean; level?: number }>(({ theme, useIcon, level }) => ({
-  [`& .${accordionSummaryClasses.button}`]: {
-    padding: theme.spacing(4, 6, 4, (useIcon ? 6 : 8) + (level || 0) * 8),
-
-    [`&.${accordionSummaryClasses.expanded}`]: {
-      color: theme.palette.primary.plainColor,
-      "--Icon-color": theme.palette.primary.plainColor,
-    },
-  },
-}));
-
-const AccordionDetails = styled(JoyAccordionDetails, {
-  name: "NavigationGroup",
-  slot: "Details",
-})(({ theme }) => ({
-  "--AccordionDetails-transition": "grid-template-rows 0.2s ease, padding-block 0.2s ease",
-  backgroundColor: theme.palette.background.level1,
-}));
-
-function NavigationGroup(
-  props: Omit<ComponentProps<typeof JoyAccordion>, "title"> & {
-    title: string | ReactNode;
-    startDecorator?: ReactNode;
-    children: ReactNode;
-    level?: number;
-  }
-) {
-  // prop destruction
-  const { title, children, startDecorator, level, ...rest } = props;
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-
-  return (
-    <JoyAccordion {...rest}>
-      <AccordionSummary useIcon={!!startDecorator} level={level}>
-        <Stack direction="row" gap={4}>
-          {startDecorator}
-          {title}
-        </Stack>
-      </AccordionSummary>
-      <AccordionDetails>{children}</AccordionDetails>
-    </JoyAccordion>
-  );
-}
-
-export { NavigationGroup };

package/src/components/NavigationGroup/index.ts

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

package/src/components/NavigationItem/NavigationItem.tsx

@@ -1,75 +0,0 @@
-import React, { ComponentProps, ReactNode } from "react";
-import {
-  ListItem as JoyListItem,
-  ListItemButton as JoyListItemButton,
-  ListItemDecorator as JoyListItemDecorator,
-  styled,
-  listItemButtonClasses,
-} from "@mui/joy";
-
-const ListItemButton = styled(JoyListItemButton, {
-  name: "NavigationItem",
-  slot: "Button",
-  shouldForwardProp: (prop) => prop !== "useIcon" && prop !== "level",
-})<{ useIcon?: boolean; level?: number }>(({ theme, useIcon, level }) => ({
-  padding: theme.spacing(4, 6, 4, (useIcon ? 6 : 8) + (level || 0) * 8),
-  gap: theme.spacing(4),
-  fontWeight: 500,
-
-  "&:hover": {
-    backgroundColor: theme.palette.neutral.plainHoverBg,
-  },
-  "&:active": {
-    backgroundColor: theme.palette.neutral.plainActiveBg,
-  },
-
-  [`&.${listItemButtonClasses.selected}`]: {
-    color: theme.palette.primary.plainColor,
-    "--Icon-color": theme.palette.primary.plainColor,
-
-    "&:not(:hover):not(:active)": {
-      backgroundColor: theme.palette.background.surface,
-    },
-  },
-}));
-
-function NavigationItem(
-  props: Omit<ComponentProps<typeof JoyListItem>, "onClick"> & {
-    id: string;
-    startDecorator?: ReactNode;
-    level?: number;
-    selected?: boolean;
-    children: ReactNode;
-    onClick?: (id: string) => void;
-  }
-) {
-  // prop destruction
-  const { children, startDecorator, level, selected, id, onClick, ...rest } = props;
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-  const handleClick = () => {
-    onClick?.(id)
-  }
-
-  return (
-    <JoyListItem {...rest}>
-      <ListItemButton
-        level={level}
-        useIcon={!!startDecorator}
-        selected={selected}
-        aria-current={selected}
-        onClick={handleClick}
-      >
-        {startDecorator && <JoyListItemDecorator>{startDecorator}</JoyListItemDecorator>}
-        {children}
-      </ListItemButton>
-    </JoyListItem>
-  );
-}
-
-export { NavigationItem };

package/src/components/NavigationItem/index.ts

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

package/src/components/Navigator/Navigator.framer.ts

@@ -1,55 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const navigatorPropertyControls: PropertyControls = {
-  level: {
-    type: ControlType.Number,
-    defaultValue: 0,
-    description: "Navigator의 레벨입니다. 레벨에 따라 좌측 여백을 조정할 수 있습니다.",
-  },
-  items: {
-    type: ControlType.Array,
-    control: {
-      type: ControlType.Object,
-      controls: {
-        type: { type: ControlType.Enum, options: ["item", "group"], defaultValue: "item" },
-        title: {
-          type: ControlType.String,
-          defaultValue: "Home",
-          description: "시각적으로 Navigator에 노출되는 값입니다.",
-        },
-        selected: {
-          type: ControlType.Boolean,
-          defaultValue: false,
-          hidden: (props: any) => props.type !== "item",
-          description: "Yes로 설정하면 selected 스타일로 노출됩니다.",
-        },
-        expanded: {
-          type: ControlType.Boolean,
-          defaultValue: false,
-          hidden: (props: any) => props.type !== "group",
-          description: "Yes로 설정하면 기본적으로 펼처진 상태로 노출됩니다.(새로고침이 필요할지도 몰라요)",
-        },
-        showStartDecorator: { type: ControlType.Boolean, defaultValue: false, description: "Yes로 설정하면 startDecorator를 설정할 수 있습니다" },
-        // NOTE: framer에서 MaterialIcon으로 replace된다.
-        startDecorator: { type: ControlType.Object, controls: {} },
-      },
-    },
-    defaultValue: [
-      { type: "item", title: "Home", content: [] },
-      {
-        type: "group",
-        title: "Projects",
-        content: [],
-      },
-    ],
-  },
-  contents: {
-    title: "Contents",
-    type: ControlType.Array,
-    control: { type: ControlType.ComponentInstance },
-    defaultValue: [],
-    description:
-      "NavigationGroup하위에 노출될 값입니다. 다른 Navigator를 넣어서 navigation을 구성할 수도 있습니다.\n\nNavigator에 존재하는 NavigationGroup에 순차적으로 주입됩니다.(불편하지만 framer의 제약으로 인해 이렇게 구성했습니다.)",
-  },
-  onSelect: { type: ControlType.EventHandler },
-};

package/src/components/Navigator/Navigator.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import { NavigationGroup } from "../NavigationGroup/index.js";
-import { NavigationItem } from "../NavigationItem/index.js";
-
-type NavigatorItemProperty = {
-  id: string;
-  type: "item";
-  title: string | React.ReactNode;
-  startDecorator?: React.ReactNode;
-  selected?: boolean;
-};
-
-type NavigatorGroupProperty = {
-  type: "group";
-  title: string | React.ReactNode;
-  startDecorator?: React.ReactNode;
-  expanded?: boolean;
-  content: React.ReactNode;
-};
-
-function Navigator(props: {
-  level?: number;
-  items: (NavigatorItemProperty | NavigatorGroupProperty)[];
-  onSelect?: (id: string) => void;
-}) {
-  // prop destruction
-  const { items, level = 0, onSelect } = props;
-
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-  const handleItemClick = (id: string) => {
-    onSelect?.(id);
-  }
-
-  return (
-    <div>
-      {items.map((item, index) => {
-        if (item.type === "item") {
-          return (
-            <NavigationItem
-              key={item.id}
-              id={item.id}
-              startDecorator={item.startDecorator}
-              selected={item.selected}
-              level={level}
-              onClick={handleItemClick}
-            >
-              {item.title}
-            </NavigationItem>
-          );
-        } else if (item.type === "group") {
-          return (
-            <NavigationGroup
-              key={index}
-              title={item.title}
-              startDecorator={item.startDecorator}
-              level={level}
-              defaultExpanded={item.expanded}
-            >
-              {item.content}
-            </NavigationGroup>
-          );
-        }
-        return null;
-      })}
-    </div>
-  );
-}
-
-export { Navigator };
-Navigator.displayName = "Navigator";

package/src/components/Navigator/index.ts

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

package/src/components/Pagination/Pagination.framer.ts

@@ -1,31 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const paginationPropertyControls: PropertyControls = {
-  page: {
-    type: ControlType.Number,
-    title: "Page",
-    defaultValue: 1,
-    description: "현재 페이지",
-  },
-  rowCount: {
-    type: ControlType.Number,
-    title: "Row count",
-    defaultValue: 20,
-    description: "총 행 수",
-  },
-  pageSize: {
-    type: ControlType.Number,
-    title: "Page size",
-    defaultValue: 25,
-    description: "한 페이지에 표시할 행 수",
-  },
-  size: {
-    type: ControlType.Enum,
-    title: "Size",
-    options: ["sm", "md", "lg"],
-    defaultValue: "md",
-  },
-  onPageChange: {
-    type: ControlType.EventHandler,
-  },
-};