@ceed/cds 0.0.177-beta.5 → 0.0.178

package/src/components/CurrencyInput/CurrencyInput.framer.ts

@@ -1,52 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const currencyInputPropertyControls: PropertyControls = {
-  label: {
-    title: "Label",
-    type: ControlType.String,
-  },
-  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,
-  },
-  currency: {
-    title: "Currency",
-    type: ControlType.Enum,
-    options: ['usd', 'krw'],
-    optionTitles: ['USD', 'KRW'],
-  },
-  max: {
-    title: "Max",
-    type: ControlType.Number,
-    defaultValue: undefined,
-  }
-};

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,190 +0,0 @@
-import React, { useCallback, useMemo, useState } from "react";
-import { IntlMessageFormat } from "intl-messageformat";
-import { NumericFormat } from "react-number-format";
-import Input from "../Input/index.js";
-import { InputProps, styled, useThemeProps } from "@mui/joy";
-import { MotionProps } from "framer-motion";
-import { useCurrencySetting } from "./hooks/use-currency-setting.js";
-import { useControlledState } from "../../hooks/use-controlled-state/index.js";
-
-interface MaskProps {
-  onChange: (event: { target: { name?: string; value?: string } }) => void;
-  value: string;
-  name?: string;
-  max?: number;
-  currency: "usd" | "krw";
-}
-
-const TextMaskAdapter = React.forwardRef<HTMLInputElement, MaskProps>(
-  function TextMaskAdapter(props, ref) {
-    // prop destruction
-    const { onChange, ...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
-        getInputRef={ref}
-        allowNegative={false}
-      />
-    );
-  }
-);
-
-interface CurrencyInputProps {
-  currency?: "USD" | "KRW";
-  max?: number;
-  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;
-}
-
-const CurrencyInputRoot = styled(Input, {
-  name: "CurrencyInput",
-  slot: "root",
-  overridesResolver: (props, styles) => styles.root,
-})({});
-
-const CurrencyInput = React.forwardRef<
-  HTMLInputElement,
-  CurrencyInputProps &
-    Omit<InputProps, "value" | "defaultValue" | "onChange"> &
-    MotionProps
->(function CurrencyInput(inProps, ref) {
-  // prop destruction
-  const props = useThemeProps({ props: inProps, name: "CurrencyInput" });
-
-  const {
-    currency = "USD",
-    name,
-    onChange,
-    label,
-    error,
-    helperText,
-    required,
-    disabled,
-    useMinorUnit,
-    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-    sx,
-    className,
-    ...innerProps
-  } = props;
-  // lib hooks
-  const {
-    symbol,
-    thousandSeparator,
-    decimalSeparator,
-    placeholder,
-    fixedDecimalScale,
-    decimalScale,
-  } = useCurrencySetting(currency);
-  // state, ref, querystring hooks
-  const [_value, setValue] = useControlledState(
-    props.value,
-    props.defaultValue,
-    useCallback(
-      (value?: number) => onChange?.({ target: { name, value } }),
-      [onChange, name]
-    )
-  );
-  const value = useMemo(() => {
-    if (_value && useMinorUnit) {
-      return _value / Math.pow(10, decimalScale);
-    }
-    return _value;
-  }, [_value, useMinorUnit, decimalScale]);
-
-  const max = useMemo(() => {
-    if (props.max && useMinorUnit) {
-      return props.max / Math.pow(10, decimalScale);
-    }
-    return props.max;
-  }, [props.max, useMinorUnit, decimalScale]);
-
-  const [isOverLimit, setIsOverLimit] = useState(
-    !!max && !!value && value > max
-  );
-
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-  const handleChange = useCallback(
-    (event: { target: { name?: string; value?: string } }) => {
-      if (event.target.value === "") {
-        setValue(undefined);
-        return;
-      }
-
-      const amount = useMinorUnit
-        ? Number(event.target.value?.replace(decimalSeparator, ""))
-        : Number(event.target.value);
-
-      if (!!max && Number(event.target.value) > max) {
-        setIsOverLimit(true);
-      } else {
-        setIsOverLimit(false);
-      }
-      setValue(amount);
-    },
-    [decimalSeparator, max, useMinorUnit, setValue]
-  );
-
-  return (
-    <CurrencyInputRoot
-      {...innerProps}
-      ref={ref}
-      value={value}
-      placeholder={placeholder}
-      onChange={handleChange}
-      error={error || isOverLimit}
-      disabled={disabled}
-      required={required}
-      color={error || isOverLimit ? "danger" : props.color}
-      label={label}
-      helperText={
-        isOverLimit
-          ? new IntlMessageFormat(
-              `limit: {amount, number, ::currency/${currency} unit-width-narrow}`
-            ).format({ amount: max })
-          : helperText
-      }
-      slotProps={{
-        input: {
-          component: TextMaskAdapter,
-          decimalSeparator,
-          thousandSeparator,
-          prefix: symbol,
-          fixedDecimalScale,
-          decimalScale,
-          "aria-label": innerProps["aria-label"],
-        },
-      }}
-      sx={{
-        ...sx,
-      }}
-      className={className}
-    />
-  );
-});
-
-export { CurrencyInput };

package/src/components/CurrencyInput/hooks/use-currency-setting.ts

@@ -1,174 +0,0 @@
-import React from "react";
-import IntlMessageFormat from "intl-messageformat";
-
-/**
- * @see https://docs.adyen.com/development-resources/currency-codes/
- */
-const CURRENCY_DECIMAL_MAP = {
-  AED: 2,
-  ALL: 2,
-  AMD: 2,
-  ANG: 2,
-  AOA: 2,
-  ARS: 2,
-  AUD: 2,
-  AWG: 2,
-  AZN: 2,
-  BAM: 2,
-  BBD: 2,
-  BDT: 2,
-  BGN: 2,
-  BHD: 3,
-  BMD: 2,
-  BND: 2,
-  BOB: 2,
-  BRL: 2,
-  BSD: 2,
-  BWP: 2,
-  BYN: 2,
-  BZD: 2,
-  CAD: 2,
-  CHF: 2,
-  CLP: 2,
-  CNH: 2,
-  CNY: 2,
-  COP: 2,
-  CRC: 2,
-  CUP: 2,
-  CVE: 0,
-  CZK: 2,
-  DJF: 0,
-  DKK: 2,
-  DOP: 2,
-  DZD: 2,
-  EGP: 2,
-  ETB: 2,
-  EUR: 2,
-  FJD: 2,
-  FKP: 2,
-  GBP: 2,
-  GEL: 2,
-  GHS: 2,
-  GIP: 2,
-  GMD: 2,
-  GNF: 0,
-  GTQ: 2,
-  GYD: 2,
-  HKD: 2,
-  HNL: 2,
-  HTG: 2,
-  HUF: 2,
-  IDR: 0,
-  ILS: 2,
-  INR: 2,
-  IQD: 3,
-  ISK: 2,
-  JMD: 2,
-  JOD: 3,
-  JPY: 0,
-  KES: 2,
-  KGS: 2,
-  KHR: 2,
-  KMF: 0,
-  KRW: 0,
-  KWD: 3,
-  KYD: 2,
-  KZT: 2,
-  LAK: 2,
-  LBP: 2,
-  LKR: 2,
-  LYD: 3,
-  MAD: 2,
-  MDL: 2,
-  MKD: 2,
-  MMK: 2,
-  MNT: 2,
-  MOP: 2,
-  MRU: 2,
-  MUR: 2,
-  MVR: 2,
-  MWK: 2,
-  MXN: 2,
-  MYR: 2,
-  MZN: 2,
-  NAD: 2,
-  NGN: 2,
-  NIO: 2,
-  NOK: 2,
-  NPR: 2,
-  NZD: 2,
-  OMR: 3,
-  PAB: 2,
-  PEN: 2,
-  PGK: 2,
-  PHP: 2,
-  PKR: 2,
-  PLN: 2,
-  PYG: 0,
-  QAR: 2,
-  RON: 2,
-  RSD: 2,
-  RUB: 2,
-  RWF: 0,
-  SAR: 2,
-  SBD: 2,
-  SCR: 2,
-  SEK: 2,
-  SGD: 2,
-  SHP: 2,
-  SLE: 2,
-  SOS: 2,
-  SRD: 2,
-  STN: 2,
-  SVC: 2,
-  SZL: 2,
-  THB: 2,
-  TND: 3,
-  TOP: 2,
-  TRY: 2,
-  TTD: 2,
-  TWD: 2,
-  TZS: 2,
-  UAH: 2,
-  UGX: 0,
-  USD: 2,
-  UYU: 2,
-  UZS: 2,
-  VEF: 2,
-  VND: 0,
-  VUV: 0,
-  WST: 2,
-  XAF: 0,
-  XCD: 2,
-  XOF: 0,
-  XPF: 0,
-  YER: 2,
-  ZAR: 2,
-  ZMW: 2,
-};
-
-export const useCurrencySetting = (
-  currencyCode: "USD" | "KRW" | "BHD" = "USD"
-) => {
-  const [symbol, thousandSeparator, decimalSeparator, ...rest] =
-    new IntlMessageFormat(
-      `{amount, number, ::currency/${currencyCode} unit-width-narrow}`
-    )
-      .format({ amount: 1000 })
-      .toString()
-      .replace(/\d/g, "")
-      .split("");
-
-  const decimalScale = CURRENCY_DECIMAL_MAP[currencyCode];
-
-  return {
-    symbol: `${symbol} `,
-    thousandSeparator,
-    decimalSeparator,
-    placeholder: decimalSeparator
-      ? `${symbol} 0${decimalSeparator}${Array.from(Array(decimalScale)).map(()=>0).join('')}`
-      : `${symbol} 0`,
-    fixedDecimalScale: !!decimalSeparator,
-    decimalScale,
-  };
-};

package/src/components/CurrencyInput/index.ts

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

package/src/components/DataTable/DataTable.framer.ts

@@ -1,187 +0,0 @@
-import { ControlType, ObjectControlDescription, type PropertyControls } from "framer";
-import { autocompletePropertyControls } from "../Autocomplete/Autocomplete.framer.js";
-import { selectPropertyControls } from "../Select/Select.framer.js";
-import { linkPropertyControls } from "../Link/Link.framer.js";
-
-function extractProperty(controls: PropertyControls, propertyNames: string[]) {
-  return propertyNames.reduce((acc: {[key: string]: ObjectControlDescription<any>}, name) => {
-    if (controls[name]) {
-      acc[name] = controls[name] as ObjectControlDescription<any>;
-    }
-    return acc;
-  }, {});
-}
-
-export const dataTablePropertyControls: PropertyControls = {
-  csvUrl: {
-    title: "CSV Data",
-    type: ControlType.File,
-    allowedFileTypes: ["csv"],
-    // NOT WORKING
-    // defaultValue:
-    //     "https://sharadcodes.github.io/noob-cms/data/MOCK_DATA.csv",
-  },
-  checkboxSelection: {
-    title: "Show Checkbox",
-    type: ControlType.Boolean,
-    defaultValue: true,
-  },
-  disableSelectionOnClick: {
-    type: ControlType.Boolean,
-    defaultValue: false,
-    hidden: (props) => props.checkboxSelection === false,
-    description: '체크박스를 통해서만 행을 선택하려면 Yes로 설정하세요.',
-  },
-  noWrap: {
-    type: ControlType.Boolean,
-    defaultValue: false,
-    description: '줄바꿈 없이 cell의 내용을 표시하려면 Yes로 설정하세요.\n단, 내용이 길어질 경우 가려질 수 있습니다.',
-  },
-  hoverRow: {
-    type: ControlType.Boolean,
-    defaultValue: true,
-    description: '마우스를 올렸을 때 행을 강조하려면 Yes로 설정하세요.',
-  },
-  editMode: {
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  stripe: {
-    type: ControlType.Enum,
-    options: [undefined, "odd", "even"],
-    optionTitles: ["None", "Odd", "Even"],
-    defaultValue: undefined,
-  },
-  columns: {
-    type: ControlType.Array,
-    description: "Column의 상세 설정이 필요한 경우 사용",
-    control: {
-      type: ControlType.Object,
-      controls: {
-        field: {
-          type: ControlType.String,
-          description: "Column Name. CSV에 있는 값을 그대로 넣어야 한다.",
-        },
-        width: {
-          type: ControlType.String,
-        },
-        type: {
-          type: ControlType.Enum,
-          defaultValue: "text",
-          options: [
-            "text",
-            "longText",
-            "number",
-            "currency",
-            "date",
-            "select",
-            "autocomplete",
-            "link",
-          ],
-          optionTitles: [
-            "Text",
-            "Long Text",
-            "Number",
-            "Currency",
-            "Date",
-            "Select",
-            "Autocomplete",
-            "Link",
-          ],
-        },
-        resizable: {
-          type: ControlType.Boolean,
-          defaultValue: true,
-        },
-        isColumnEditable: {
-          type: ControlType.Boolean,
-          description: "Column을 수정 가능하게 할지 여부",
-          defaultValue: false,
-        },
-        required: {
-          type: ControlType.Boolean,
-          defaultValue: false,
-        },
-        dateProps: {
-          type: ControlType.Object,
-          controls: {
-            value: {
-              title: "Value",
-              type: ControlType.String,
-              defaultValue: "2024/04/03",
-            },
-          },
-          hidden(props) {
-            return props.type !== "date";
-          },
-        },
-        autoCompleteProps: {
-          type: ControlType.Object,
-          controls: {
-            ...extractProperty(autocompletePropertyControls, [
-              "defaultValue",
-              "options",
-              "placeholder",
-            ]),
-          },
-          hidden(props) {
-            return props.type !== "autocomplete";
-          },
-        },
-        selectProps: {
-          type: ControlType.Object,
-          controls: {
-            ...extractProperty(selectPropertyControls, [
-              "defaultValue",
-              "options",
-              "placeholder",
-            ]),
-          },
-          hidden(props) {
-            return props.type !== "select";
-          },
-        },
-        linkProps: {
-          type: ControlType.Object,
-          controls: {
-            ...extractProperty(linkPropertyControls, ['href'])
-          },
-          hidden(props) {
-            return props.type !== "link";
-          },
-        },
-      },
-    },
-    defaultValue: [],
-  },
-  // pageSize: {
-  //   type: ControlType.Number,
-  //   defaultValue: 20,
-  // },
-  stickyHeader: {
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  stickyFooter: {
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  loading: {
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  pagination: {
-    title: "Pagination",
-    type: ControlType.Boolean,
-    defaultValue: true,
-  },
-  onPaginationModelChange: {
-    type: ControlType.EventHandler,
-  },
-  onSelectionModelChange: {
-    type: ControlType.EventHandler,
-  },
-  toolbar: {
-    type: ControlType.ComponentInstance,
-  },
-};