@ceed/cds 0.0.177-beta.5 → 0.0.177

package/src/components/Pagination/Pagination.tsx

@@ -1,239 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import PreviousIcon from "@mui/icons-material/ChevronLeft";
-import NextIcon from "@mui/icons-material/ChevronRight";
-import { styled } from "@mui/joy";
-import Button from "../Button";
-import IconButton from "../IconButton";
-import Stack from "../Stack";
-import { useControlledState } from "../../hooks/use-controlled-state";
-
-const PaginationButton = styled(Button, {
-  name: "Pagination",
-  slot: "button",
-})(({ theme, active, size }) => ({
-  "--Button-size": {
-    sm: "32px",
-    md: "40px",
-    lg: "48px",
-  }[size as "sm" | "md" | "lg"],
-  width: "var(--Button-size)",
-  height: "var(--Button-size)",
-  backgroundColor: active
-    ? theme.vars.palette.primary.softHoverBg
-    : "transparent",
-  color: active
-    ? theme.vars.palette.primary.softColor
-    : theme.vars.palette.neutral.plainColor,
-  "&:hover": {
-    color: active
-      ? theme.vars.palette.primary.softColor
-      : theme.vars.palette.neutral.softColor,
-    backgroundColor: active
-      ? theme.vars.palette.primary.softActiveBg
-      : theme.vars.palette.neutral.softHoverBg,
-  },
-}));
-
-const PaginationIconButton = styled(IconButton, {
-  name: "Pagination",
-  slot: "button",
-})(({ theme, size }) => ({
-  "--IconButton-size": {
-    sm: "32px",
-    md: "40px",
-    lg: "48px",
-  }[size as "sm" | "md" | "lg"],
-  "--Icon-fontSize": "20px",
-  width: "var(--IconButton-size)",
-  height: "var(--IconButton-size)",
-  color: theme.vars.palette.neutral.plainColor,
-  "&:hover": {
-    color: theme.vars.palette.neutral.softColor,
-    backgroundColor: theme.vars.palette.neutral.softHoverBg,
-  },
-}));
-
-const PaginationRoot = styled(Stack, {
-  name: "Pagination",
-  slot: "root",
-})({});
-
-const PaginationContainer = styled(Stack, {
-  name: "Pagination",
-  slot: "container",
-})<{ size: "sm" | "md" | "lg" }>(({ theme, size }) => ({
-  gap: {
-    sm: theme.spacing(1),
-    md: theme.spacing(1.5),
-    lg: theme.spacing(2),
-  }[size],
-}));
-
-interface PaginationProps extends React.ComponentProps<typeof PaginationRoot> {
-  paginationModel: {
-    page: number;
-    pageSize: number;
-  };
-  defaultPaginationModel?: {
-    page: number;
-    pageSize: number;
-  };
-  rowCount: number;
-  onPageChange: (newPage: number) => void;
-  size?: "sm" | "md" | "lg";
-}
-
-function Pagination(props: PaginationProps) {
-  // prop destruction
-  const {
-    paginationModel: _paginationModel,
-    defaultPaginationModel = { page: 1, pageSize: 25 },
-    onPageChange,
-    rowCount,
-    size = "md",
-    ...innerProps
-  } = props;
-
-  const [paginationModel, setPaginationModel] = useControlledState(
-    _paginationModel,
-    defaultPaginationModel,
-    useCallback(
-      (newPage: { page: number; pageSize: number }) => {
-        onPageChange(newPage.page);
-      },
-      [onPageChange]
-    )
-  );
-
-  const handlePageChange = (newPage: number) => {
-    setPaginationModel({ ...paginationModel, page: newPage });
-  };
-
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  const firstPage = 1;
-  const lastPage = Math.max(
-    firstPage,
-    Math.ceil(rowCount / paginationModel.pageSize)
-  );
-  const beforePages = [
-    paginationModel.page - 2,
-    paginationModel.page - 1,
-  ].filter((p) => p > 1);
-  const afterPages = [
-    paginationModel.page + 1,
-    paginationModel.page + 2,
-  ].filter((p) => p <= lastPage - 1);
-  const isMoreAfterPages = lastPage > 1 && paginationModel.page < lastPage - 3;
-  const isMoreBeforePages = lastPage > 1 && paginationModel.page > 4;
-
-  // Add this effect to handle rowCount changes
-  useEffect(() => {
-    if (paginationModel.page > lastPage) {
-      setPaginationModel({ ...paginationModel, page: lastPage });
-    }
-  }, [rowCount, paginationModel, lastPage, setPaginationModel]);
-
-  // effects
-  // handlers
-
-  return (
-    <PaginationRoot {...innerProps}>
-      <PaginationContainer direction="row" size={size} alignItems="center">
-        <PaginationIconButton
-          size={size}
-          variant="plain"
-          color="neutral"
-          onClick={() => handlePageChange(paginationModel.page - 1)}
-          disabled={paginationModel.page === firstPage}
-          aria-label="Previous page"
-        >
-          <PreviousIcon />
-        </PaginationIconButton>
-        {paginationModel.page !== firstPage && (
-          <PaginationButton
-            size={size}
-            variant="plain"
-            color="neutral"
-            onClick={() => handlePageChange(firstPage)}
-          >
-            {firstPage}
-          </PaginationButton>
-        )}
-        {isMoreBeforePages && (
-          <PaginationButton
-            size={size}
-            variant="plain"
-            color="neutral"
-            onClick={() => handlePageChange(paginationModel.page - 3)}
-            aria-label="More previous pages"
-          >
-            ...
-          </PaginationButton>
-        )}
-        {beforePages.map((p) => (
-          <PaginationButton
-            key={p}
-            size={size}
-            variant="plain"
-            color="neutral"
-            onClick={() => handlePageChange(p)}
-          >
-            {p}
-          </PaginationButton>
-        ))}
-        <PaginationButton active size={size} aria-current="page">
-          {paginationModel.page}
-        </PaginationButton>
-        {afterPages.map((p) => (
-          <PaginationButton
-            key={p}
-            size={size}
-            variant="plain"
-            color="neutral"
-            onClick={() => handlePageChange(p)}
-          >
-            {p}
-          </PaginationButton>
-        ))}
-        {isMoreAfterPages && (
-          <PaginationButton
-            size={size}
-            variant="plain"
-            color="neutral"
-            aria-label="More next pages"
-            onClick={() => handlePageChange(paginationModel.page + 3)}
-          >
-            ...
-          </PaginationButton>
-        )}
-        {paginationModel.page !== lastPage && (
-          <PaginationButton
-            size={size}
-            variant="plain"
-            color="neutral"
-            onClick={() => handlePageChange(lastPage)}
-          >
-            {lastPage}
-          </PaginationButton>
-        )}
-        <PaginationIconButton
-          size={size}
-          variant="plain"
-          color="neutral"
-          onClick={() => handlePageChange(paginationModel.page + 1)}
-          disabled={paginationModel.page === lastPage}
-          aria-label="Next page"
-        >
-          <NextIcon />
-        </PaginationIconButton>
-      </PaginationContainer>
-    </PaginationRoot>
-  );
-}
-
-export { Pagination };
-Pagination.displayName = "Pagination";

package/src/components/Pagination/index.ts

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

package/src/components/PercentageInput/PercentageInput.framer.ts

@@ -1,64 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const percentageInputPropertyControls: PropertyControls = {
-  label: {
-    title: "Label",
-    type: ControlType.String,
-  },
-  placeholder: {
-    title: "Placeholder",
-    type: ControlType.String,
-    defaultValue: "Enter a percentage",
-  },
-  helperText: {
-    title: "Helper Text",
-    type: ControlType.String,
-  },
-  error: {
-    title: "Error",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  size: {
-    title: "Size",
-    type: ControlType.Enum,
-    options: ["sm", "md", "lg"],
-    optionTitles: ["Small", "Medium", "Large"],
-  },
-  value: {
-    title: "Value",
-    type: ControlType.Number,
-    defaultValue: undefined,
-  },
-  onChange: {
-    type: ControlType.EventHandler,
-  },
-  disabled: {
-    title: "Disabled",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  required: {
-    title: "Required",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  min: {
-    title: "Minimum",
-    type: ControlType.Number,
-    defaultValue: undefined,
-    description: "최소 퍼센트 값을 설정합니다.",
-  },
-  max: {
-    title: "Maximum",
-    type: ControlType.Number,
-    defaultValue: undefined,
-    description: "최대 퍼센트 값을 설정합니다.",
-  },
-  maxDecimalScale: {
-    title: "Maximum Decimal Scale",
-    type: ControlType.Number,
-    defaultValue: 0,
-    description: "소수점 이하 최대 자리수를 설정합니다.",
-  },
-};

package/src/components/PercentageInput/PercentageInput.tsx

@@ -1,181 +0,0 @@
-import React, { useCallback, useMemo, useState } from "react";
-import { NumericFormat } from "react-number-format";
-import Input from "../Input";
-import { InputProps, styled, useThemeProps } from "@mui/joy";
-import { MotionProps } from "framer-motion";
-import { useControlledState } from "../../hooks/use-controlled-state";
-
-const padDecimal = (value: number, decimalScale: number) => {
-  const [integer, decimal = ""] = `${value}`.split(".");
-  return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
-};
-
-interface MaskProps {
-  onChange: (event: { target: { name?: string; value?: string } }) => void;
-  value: string;
-  name?: string;
-  min?: number;
-  max?: number;
-}
-
-const TextMaskAdapter = React.forwardRef<HTMLInputElement, MaskProps>(
-  function TextMaskAdapter(props, ref) {
-    // prop destruction
-    const { onChange, min, max, ...innerProps } = props;
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return (
-      <NumericFormat
-        {...innerProps}
-        onValueChange={({ value }) => {
-          onChange?.({
-            target: {
-              name: props.name,
-              value,
-            },
-          });
-        }}
-        valueIsNumericString
-        thousandSeparator
-        suffix="%"
-        getInputRef={ref}
-        allowNegative
-      />
-    );
-  }
-);
-
-interface BasePercentageInputProps {
-  value?: number;
-  defaultValue?: number;
-  onChange?: (event: { target: { name?: string; value?: number } }) => void;
-  name?: string;
-  disabled?: boolean;
-  required?: boolean;
-  label?: React.ReactNode;
-  error?: boolean;
-  helperText?: React.ReactNode;
-  useMinorUnit?: boolean;
-  maxDecimalScale?: number;
-  min?: number;
-  max?: number;
-}
-
-export type PercentageInputProps = BasePercentageInputProps &
-  Omit<InputProps, "value" | "defaultValue" | "onChange"> &
-  MotionProps;
-
-const PercentageInputRoot = styled(Input, {
-  name: "PercentageInput",
-  slot: "Root",
-  overridesResolver: (props, styles) => styles.root,
-})({});
-
-const PercentageInput = React.forwardRef<
-  HTMLInputElement,
-  PercentageInputProps
->(function PercentageInput(inProps, ref) {
-  // prop destruction
-  const props = useThemeProps({ props: inProps, name: "PercentageInput" });
-
-  const {
-    name,
-    onChange,
-    label,
-    error,
-    helperText,
-    required,
-    disabled,
-    useMinorUnit,
-    maxDecimalScale = 0,
-    min,
-    max,
-    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-    sx,
-    className,
-    ...innerProps
-  } = props;
-  // lib hooks
-  // state, ref, querystring hooks
-  const [_value, setValue] = useControlledState(
-    props.value,
-    props.defaultValue,
-    useCallback(
-      (value?: number) => onChange?.({ target: { name, value } }),
-      [onChange, name]
-    )
-  );
-  const [internalError, setInternalError] = useState(
-    (max && _value && _value > max) || (min && _value && _value < min)
-  );
-
-  // form hooks
-  // query hooks
-  // calculated values
-  const value = useMemo(() => {
-    if (_value && useMinorUnit) {
-      return _value / Math.pow(10, maxDecimalScale);
-    }
-    return _value;
-  }, [_value, useMinorUnit, maxDecimalScale]);
-
-  // effects
-  // handlers
-  const handleChange = useCallback(
-    (event: { target: { name?: string; value: string } }) => {
-      if (event.target.value === "") {
-        setValue(undefined);
-        return;
-      }
-      const originalAmount = Number(event.target.value);
-
-      if ((min && originalAmount < min) || (max && originalAmount > max)) {
-        setInternalError(true);
-      } else {
-        setInternalError(false);
-      }
-
-      const amount = useMinorUnit
-        ? padDecimal(originalAmount, maxDecimalScale)
-        : originalAmount;
-
-      setValue(amount);
-    },
-    [setValue, useMinorUnit, maxDecimalScale, min, max]
-  );
-
-  return (
-    <PercentageInputRoot
-      {...innerProps}
-      ref={ref}
-      value={value}
-      onChange={handleChange}
-      error={internalError || error}
-      disabled={disabled}
-      required={required}
-      color={internalError || error ? "danger" : props.color}
-      label={label}
-      helperText={helperText}
-      slotProps={{
-        input: {
-          component: TextMaskAdapter,
-          "aria-label": innerProps["aria-label"],
-          decimalScale: maxDecimalScale,
-        },
-      }}
-      sx={{
-        ...sx,
-      }}
-      className={className}
-    />
-  );
-});
-
-export { PercentageInput };
-
-PercentageInput.displayName = "PercentageInput";

package/src/components/PercentageInput/index.ts

@@ -1,3 +0,0 @@
-import { PercentageInput } from './PercentageInput';
-export * from './PercentageInput';
-export default PercentageInput;

package/src/components/Radio/Radio.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { Radio as JoyRadio, RadioGroup as JoyRadioGroup } from "@mui/joy";
-import { motion } from "framer-motion";
-
-const MotionRadio = motion(JoyRadio);
-
-const Radio = MotionRadio;
-
-export { Radio };
-
-Radio.displayName = "Radio";
-
-const MotionRadioGroup = motion(JoyRadioGroup);
-
-const RadioGroup = MotionRadioGroup;
-
-export { RadioGroup };
-
-RadioGroup.displayName = "RadioGroup";

package/src/components/Radio/index.ts

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

package/src/components/RadioList/RadioList.framer.ts

@@ -1,43 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const radioListPropertyControls: PropertyControls = {
-  orientation: {
-    title: "Orientation",
-    type: ControlType.Enum,
-    options: ["vertical", "horizontal"],
-    defaultValue: "vertical",
-  },
-  defaultValue: {
-    title: "Checked Value",
-    type: ControlType.String,
-    defaultValue: "value1",
-  },
-  items: {
-    title: "Items",
-    type: ControlType.Array,
-    control: {
-      type: ControlType.Object,
-      controls: {
-        displayName: {
-          title: "Display Name",
-          type: ControlType.String,
-        },
-        value: { title: "Value", type: ControlType.String },
-        color: {
-          title: "Color",
-          type: ControlType.Enum,
-          options: ["primary", "neutral", "danger", "success", "warning"],
-          optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
-        },
-      },
-    },
-    defaultValue: [
-      { displayName: "Value 1", value: "value1", color: "primary" },
-      { displayName: "Value 2", value: "value2", color: "primary" },
-      { displayName: "Value 3", value: "value3", color: "primary" },
-      { displayName: "Value 4", value: "value4", color: "primary" },
-      { displayName: "Value 5", value: "value5", color: "primary" },
-      { displayName: "Value 6", value: "value6", color: "primary" },
-    ],
-  },
-};

package/src/components/RadioList/RadioList.tsx

@@ -1,30 +0,0 @@
-import React, { ComponentProps, ReactNode } from "react";
-import { Radio, RadioGroup } from "../Radio/Radio.js";
-
-function RadioList(
-  props: {
-    items: { label: ReactNode; value: string }[];
-  } & ComponentProps<typeof RadioGroup>
-) {
-  // prop destruction
-  const { items, ...innerProps } = props;
-
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-  return (
-    <RadioGroup {...innerProps}>
-      {items.map((item) => (
-        <Radio key={`${item.value}`} value={item.value} label={item.label} />
-      ))}
-    </RadioGroup>
-  );
-}
-
-export { RadioList };
-
-RadioList.displayName = "RadioList";

package/src/components/RadioList/index.ts

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

package/src/components/Select/Select.framer.ts

@@ -1,86 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const selectPropertyControls: PropertyControls = {
-  label: {
-    title: "Label",
-    type: ControlType.String,
-  },
-  helperText: {
-    title: "Helper Text",
-    type: ControlType.String,
-  },
-  error: {
-    title: "Error",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  onChange: {
-    title: "onChange",
-    type: ControlType.EventHandler,
-  },
-  defaultListboxOpen: {
-    title: "Opened",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  defaultValue: {
-    title: "Selected Option",
-    type: ControlType.String,
-  },
-  disabled: {
-    title: "Disabled",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  required:{
-    title: "Required",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  placeholder: {
-    title: "Placeholder",
-    type: ControlType.String,
-    defaultValue: "Choose one...",
-  },
-  color: {
-    title: "Color",
-    type: ControlType.Enum,
-    options: ["primary", "neutral", "danger", "success", "warning"],
-    optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
-  },
-  size: {
-    title: "Size",
-    type: ControlType.Enum,
-    options: ["sm", "md", "lg"],
-    defaultValue: "md",
-  },
-  variant: {
-    title: "Variant",
-    type: ControlType.Enum,
-    options: ["outlined", "plain", "solid", "soft"],
-    defaultValue: undefined,
-  },
-  options: {
-    title: "Options",
-    type: ControlType.Array,
-    control: {
-      type: ControlType.Object,
-      controls: {
-        text: {
-          title: "Text",
-          type: ControlType.String,
-        },
-        value: { title: "Value", type: ControlType.String },
-      },
-    },
-    defaultValue: [
-      { text: "Option 1", value: "option1" },
-      { text: "Option 2", value: "option2" },
-    ],
-  },
-  multiple: {
-    title: "Multiple",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  }
-};