@ceed/cds 0.0.177-beta.5 → 0.0.177

package/src/components/Drawer/index.ts

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

package/src/components/Dropdown/Dropdown.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-import { Dropdown as JoyDropdown } from "@mui/joy";
-import { motion } from "framer-motion";
-
-const MotionDropdown = motion(JoyDropdown);
-
-const Dropdown = MotionDropdown;
-
-export { Dropdown };
-
-Dropdown.displayName = "Dropdown";

package/src/components/Dropdown/index.ts

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

package/src/components/FormControl/FormControl.framer.ts

@@ -1,27 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const formControlPropertyControls: PropertyControls = {
-  size: {
-    type: ControlType.Enum,
-    options: ["sm", "md", "lg"],
-    defaultValue: "sm",
-  },
-  label: {
-    title: "Label",
-    type: ControlType.String,
-    defaultValue: "Label",
-  },
-  content: {
-    title: "Contents",
-    type: ControlType.Array,
-    control: {
-      title: "Content",
-      type: ControlType.ComponentInstance,
-    },
-  },
-  required: {
-    type: ControlType.Boolean,
-    title: "Required",
-    defaultValue: false,
-  },
-};

package/src/components/FormControl/FormControl.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import {
-  FormControl as JoyFormControl,
-  styled,
-  formLabelClasses,
-} from "@mui/joy";
-import { motion } from "framer-motion";
-
-const MotionFormControl = motion(JoyFormControl);
-
-const FormControl = styled(MotionFormControl)(({ theme }) => ({
-  [`.${formLabelClasses.root}`]: {
-    display: "block",
-  },
-  [`.${formLabelClasses.asterisk}`]: {
-    marginLeft: theme.spacing(0.5),
-  },
-}));
-
-export { FormControl };
-
-FormControl.displayName = "FormControl";

package/src/components/FormControl/index.ts

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

package/src/components/FormHelperText/FormHelperText.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-import { FormHelperText as JoyFormHelperText } from "@mui/joy";
-import { motion } from "framer-motion";
-
-const MotionFormHelperText = motion(JoyFormHelperText);
-
-const FormHelperText = MotionFormHelperText;
-
-export { FormHelperText };
-
-FormHelperText.displayName = "FormHelperText";

package/src/components/FormHelperText/index.ts

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

package/src/components/FormLabel/FormLabel.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-import { FormLabel as JoyFormLabel } from "@mui/joy";
-import { motion } from "framer-motion";
-
-const MotionFormLabel = motion(JoyFormLabel);
-
-const FormLabel = MotionFormLabel;
-
-export { FormLabel };
-
-FormLabel.displayName = "FormLabel";

package/src/components/FormLabel/index.ts

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

package/src/components/Grid/Grid.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-import { Grid as JoyGrid } from "@mui/joy";
-import { motion } from "framer-motion";
-
-const MotionGrid = motion(JoyGrid);
-
-const Grid = MotionGrid;
-
-export { Grid };
-
-Grid.displayName = "Grid";

package/src/components/Grid/index.ts

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

package/src/components/IconButton/IconButton.framer.ts

@@ -1,49 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const iconButtonPropertyControls: PropertyControls = {
-  icon: {
-    title: "Icon",
-    type: ControlType.ComponentInstance,
-  },
-  onClick: {
-    title: "onClick",
-    type: ControlType.EventHandler,
-  },
-  disabled: {
-    title: "Disabled",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  color: {
-    title: "Color",
-    type: ControlType.Enum,
-    options: ["primary", "neutral", "danger", "success", "warning"],
-    optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
-  },
-  variant: {
-    title: "Variant",
-    type: ControlType.Enum,
-    options: ["solid", "outlined", "soft", "plain"],
-  },
-  size: {
-    title: "Size",
-    type: ControlType.Enum,
-    options: ["sm", "md", "lg"],
-    defaultValue: "md",
-  },
-  // for withModal
-  modalContents: {
-    title: "Modal Contents",
-    type: ControlType.Array,
-    control: {
-      type: ControlType.ComponentInstance,
-    },
-  },
-  enablePortal: {
-    type: ControlType.Boolean,
-    description: '해당 버튼과 연결된 모달이 컨텐츠 안에서 열리면 이 값을 Yes로 설정해 보세요.',
-    defaultValue: false,
-    // TODO: modalContents의 길이가 0일때는 해당 옵션이 안보였으면 좋겠는데, 적용이 안됨.
-    hidden: ({ modalContents }) => modalContents.length === 0,
-  },
-};

package/src/components/IconButton/IconButton.tsx

@@ -1,42 +0,0 @@
-import React, { forwardRef, ElementType } from "react";
-import {
-  IconButton as JoyIconButton,
-  IconButtonProps as JoyIconButtonProps,
-} from "@mui/joy";
-import { MotionProps, motion } from "framer-motion";
-
-const MotionIconButton = motion(JoyIconButton);
-
-type PolymorphicProps<C extends ElementType> = {
-  component?: C;
-  ref?: React.Ref<any>;
-} & Omit<React.ComponentPropsWithoutRef<C>, keyof JoyIconButtonProps>;
-
-type IconButtonProps<C extends ElementType = "button"> = JoyIconButtonProps &
-  MotionProps &
-  PolymorphicProps<C>;
-
-const IconButton = forwardRef(
-  <C extends ElementType = "button">(
-    { ...props }: IconButtonProps<C>,
-    ref: React.Ref<any>
-  ) => {
-    // prop destruction
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-
-    return <MotionIconButton ref={ref} {...props} />;
-  }
-) as <C extends ElementType = "button">(
-  props: IconButtonProps<C> & { ref?: React.Ref<any> }
-) => JSX.Element;
-
-export { IconButton };
-
-// @ts-expect-error
-IconButton.displayName = "IconButton";

package/src/components/IconButton/index.ts

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

package/src/components/Input/Input.framer.ts

@@ -1,77 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const inputPropertyControls: PropertyControls = {
-  label: {
-    title: "Label",
-    type: ControlType.String,
-  },
-  helperText: {
-    title: "Helper Text",
-    type: ControlType.String,
-  },
-  error: {
-    title: "Error",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  onChange: {
-    type: ControlType.EventHandler,
-  },
-  disabled: {
-    title: "Disabled",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  required:{
-    title: "Required",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  readOnly: {
-    title: "Readonly",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  enableClearable: {
-    title: "Enable Clearable",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  color: {
-    title: "Color",
-    type: ControlType.Enum,
-    options: ["primary", "neutral", "danger", "success", "warning"],
-    optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
-    defaultValue: "neutral",
-  },
-  variant: {
-    title: "Variant",
-    type: ControlType.Enum,
-    options: ["solid", "outlined", "soft", "plain"],
-    defaultValue: "outlined",
-  },
-  defaultValue: {
-    title: "Value",
-    type: ControlType.String,
-    defaultValue: "",
-  },
-  placeholder: {
-    title: "Placeholder",
-    type: ControlType.String,
-    defaultValue: "Type in here...",
-  },
-  endDecorator: {
-    title: "End Decorator",
-    type: ControlType.ComponentInstance,
-  },
-  startDecorator: {
-    title: "Start Decorator",
-    type: ControlType.ComponentInstance,
-  },
-  size: {
-    title: "Size",
-    type: ControlType.Enum,
-    options: ["sm", "md", "lg"],
-    defaultValue: "md",
-  },
-};

package/src/components/Input/Input.tsx

@@ -1,132 +0,0 @@
-import React, { useCallback } from "react";
-import { Input as JoyInput, type InputProps } from "@mui/joy";
-import { type MotionProps, motion } from "framer-motion";
-import ClearIcon from "@mui/icons-material/Close";
-import FormControl from "../FormControl/index.js";
-import FormLabel from "../FormLabel/index.js";
-import FormHelperText from "../FormHelperText/index.js";
-import IconButton from "../IconButton/index.js";
-import { useControlledState } from "../../hooks/use-controlled-state/index.js";
-import Stack from "../Stack/index.js";
-
-const MotionInput = motion(JoyInput);
-
-const Input = React.forwardRef<
-  HTMLInputElement,
-  {
-    label?: React.ReactNode;
-    helperText?: React.ReactNode;
-    error?: boolean;
-    enableClearable?: boolean;
-  } & InputProps &
-    MotionProps
->((props, ref) => {
-  // prop destruction
-  const {
-    label,
-    helperText,
-    error,
-    style,
-    size,
-    color,
-    disabled,
-    required,
-    onChange,
-    name,
-    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-    sx,
-    className,
-    enableClearable,
-    ...innerProps
-  } = props;
-  // lib hooks
-  // state, ref, querystring hooks
-  const [value, setValue] = useControlledState(
-    props.value,
-    props.defaultValue,
-    useCallback(
-      (value?: string | number | readonly string[]) => {
-        onChange?.({
-          /**
-           * @see https://github.com/Ecube-Labs/hds/pull/36#discussion_r1722720909
-           * NOTE: onChange(React.SyntheticEvent)의 타입과 맞지 않아 타입 에러가 발생. 이대로 사용하다가 문제가 생기면 대응한다.
-           */
-          // @ts-expect-error
-          target: { value: value?.toString() || "", name: name || "" },
-        });
-      },
-      [onChange, name]
-    )
-  );
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    setValue(e.target.value);
-  };
-
-  const handleClear = () => {
-    setValue(props.defaultValue || "");
-  };
-
-  const input = (
-    <MotionInput
-      value={value}
-      name={name}
-      onChange={handleChange}
-      required={required}
-      color={error ? "danger" : color}
-      disabled={disabled}
-      slotProps={{
-        input: { ref, ...innerProps.slotProps?.input },
-        ...innerProps.slotProps,
-      }}
-      {...innerProps}
-      endDecorator={
-        enableClearable ? (
-          <Stack
-            gap={1}
-            direction="row"
-          >
-            {innerProps.endDecorator}
-            {value && (
-              <IconButton
-                // NOTE: clear 이후에도 focus를 유지하기 위해 mouseDown 이벤트를 막는다.
-                onMouseDown={(e) => e.preventDefault()}
-                onClick={handleClear}
-                aria-label="Clear"
-              >
-                <ClearIcon />
-              </IconButton>
-            )}
-          </Stack>
-        ) : (
-          innerProps.endDecorator
-        )
-      }
-    />
-  );
-
-  return (
-    <FormControl
-      required={required}
-      color={color}
-      size={size}
-      error={error}
-      disabled={disabled}
-      // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-      sx={sx}
-      className={className}
-    >
-      {label && <FormLabel>{label}</FormLabel>}
-      {input}
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
-    </FormControl>
-  );
-});
-
-export { Input };
-
-Input.displayName = "Input";

package/src/components/Input/index.ts

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

package/src/components/InsetDrawer/InsetDrawer.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { Drawer as JoyDrawer, DrawerProps } from "@mui/joy";
-import { MotionProps, motion } from "framer-motion";
-
-const MotionDrawer = motion(JoyDrawer);
-
-const InsetDrawer = (props: DrawerProps & MotionProps) => {
-  // prop destruction
-  const { children, ...innerProps } = props;
-  // lib hooks
-  // 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",
-            p: { md: 3, sm: 0 },
-            boxShadow: "none",
-          },
-        },
-      }}
-    >
-      {children}
-    </MotionDrawer>
-  );
-};
-
-export { InsetDrawer };
-
-InsetDrawer.displayName = "InsetDrawer";

package/src/components/InsetDrawer/index.ts

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

package/src/components/Link/Link.framer.ts

@@ -1,58 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const linkPropertyControls: PropertyControls = {
-  text: {
-    title: "Text",
-    type: ControlType.String,
-    defaultValue: "Link",
-  },
-  href: {
-    title: "Href",
-    type: ControlType.Link,
-  },
-  disabled: {
-    title: "Disabled",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  level: {
-    title: "Level",
-    type: ControlType.Enum,
-    options: [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "title-lg",
-      "title-md",
-      "title-sm",
-      "marketing-lg",
-      "marketing-md",
-      "marketing-sm",
-      "body-lg",
-      "body-md",
-      "body-sm",
-      "body-xs",
-      "inherit",
-    ],
-    defaultValue: "body-md",
-  },
-  color: {
-    title: "Color",
-    type: ControlType.Enum,
-    options: ["primary", "neutral", "danger", "success", "warning"],
-    optionTitles: ["Primary", "Neutral", "Danger", "Success", "Warning"],
-  },
-  variant: {
-    title: "Variant",
-    type: ControlType.Enum,
-    options: ["solid", "outlined", "soft", "plain"],
-    defaultValue: "plain",
-  },
-  underline: {
-    title: "Underline",
-    type: ControlType.Enum,
-    options: ["always", "none"],
-    optionTitles: ["Always", "None"],
-  },
-};

package/src/components/Markdown/Markdown.framer.ts

@@ -1,77 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const markdownPropertyControls: PropertyControls = {
-  text: {
-    title: "Text",
-    type: ControlType.String,
-    defaultValue: "This is **markdown**.",
-    displayTextArea: true,
-  },
-  textAlign: {
-    title: "Text Align",
-    type: ControlType.Enum,
-    options: [undefined, "start", "center", "end"],
-    optionTitles: ["None", "Start", "Center", "End"],
-    defaultValue: undefined,
-  },
-  defaultLevel: {
-    title: "defaultLevel",
-    type: ControlType.Enum,
-    options: [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "title-lg",
-      "title-md",
-      "title-sm",
-      "marketing-lg",
-      "marketing-md",
-      "marketing-sm",
-      "body-lg",
-      "body-md",
-      "body-sm",
-      "body-xs",
-      "inherit",
-    ],
-    defaultValue: "body-md",
-  },
-  defaultLinkAction: {
-    title: "defaultLinkAction",
-    type: ControlType.Enum,
-    options: ["self", "blank", "parent", "top", "unfencedTop"],
-    defaultValue: "self",
-  },
-  textColor: {
-    title: "Text Color",
-    type: ControlType.Enum,
-    options: [
-      "text.primary",
-      "text.secondary",
-      "text.icon",
-      "text.tertiary",
-      "inherit",
-      "common.white",
-      "common.black",
-      "primary.500",
-      "danger.500",
-    ],
-    defaultValue: "inherit",
-  },
-  accentColor: {
-    title: "Accent Color",
-    type: ControlType.Enum,
-    options: [
-      "text.primary",
-      "text.secondary",
-      "text.icon",
-      "text.tertiary",
-      "inherit",
-      "common.white",
-      "common.black",
-      "primary.500",
-      "danger.500",
-    ],
-    defaultValue: "danger.500",
-  },
-};