@ceed/cds 0.0.177-beta.5 → 0.0.177

package/src/components/Select/Select.tsx

@@ -1,122 +0,0 @@
-import React, { useMemo } from "react";
-import {
-  Select as JoySelect,
-  Option as JoyOption,
-  type SelectProps,
-} from "@mui/joy";
-import { type MotionProps, motion } from "framer-motion";
-import FormControl from "../FormControl/index.js";
-import FormLabel from "../FormLabel/index.js";
-import FormHelperText from "../FormHelperText/index.js";
-import { SelectValue } from "@mui/base";
-
-// NOTE: Context를 공유하는 컴포넌트는 한 파일로 번들링되어야 Framer에서 문제 없이 동작할수 있다.
-// 파일별로 필요한 패키지를 모두 import 하도록 되어 있기 때문에 다른 파일에서 내보내면 Context가 고유하게 2개 생기는것이 원인이다.
-const MotionOption = motion(JoyOption);
-const Option = MotionOption;
-
-export { Option };
-
-Option.displayName = "Option";
-
-function Select<OptionValue extends string, Multiple extends boolean = false>(
-  props: {
-    options: { label: string; value: string }[] | string[];
-    label?: string;
-    helperText?: string;
-    error?: boolean;
-    onChange?: (event: {
-      target: { name?: string; value?: SelectValue<OptionValue, Multiple> };
-    }) => void;
-  } & Omit<SelectProps<OptionValue, Multiple>, "onChange"> &
-    MotionProps
-) {
-  // prop destruction
-  const {
-    label,
-    helperText,
-    error,
-    size,
-    color,
-    disabled,
-    required,
-    onChange,
-    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-    sx,
-    className,
-    ...innerProps
-  } = props;
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  const options = useMemo(
-    () =>
-      props.options.map((option) => {
-        if (typeof option !== "object") {
-          return {
-            value: option,
-            label: option,
-          };
-        }
-        return option;
-      }),
-    [props.options]
-  );
-  // effects
-  // handlers
-  const handleChange: SelectProps<OptionValue, Multiple>["onChange"] = (
-    event,
-    newValue
-  ) => {
-    const _event = event || { target: {} };
-    const newEvent = {
-      ..._event,
-      target: {
-        // @ts-expect-error target에 name이 있을 수 있다.
-        name: _event.target?.name || props.name,
-        value: newValue || undefined,
-      },
-    };
-    onChange?.(newEvent);
-  };
-
-  const select = (
-    <JoySelect
-      {...innerProps}
-      required={required}
-      disabled={disabled}
-      size={size}
-      color={error ? "danger" : color}
-      onChange={handleChange}
-    >
-      {options.map((option) => (
-        <Option key={option.value} value={option.value}>
-          {option.label}
-        </Option>
-      ))}
-    </JoySelect>
-  );
-
-  return (
-    <FormControl
-      required={required}
-      disabled={disabled}
-      size={size}
-      color={color}
-      error={error}
-      // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
-      sx={sx}
-      className={className}
-    >
-      {label && <FormLabel>{label}</FormLabel>}
-      {select}
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
-    </FormControl>
-  );
-}
-
-export { Select };
-
-Select.displayName = "Select";

package/src/components/Select/index.ts

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

package/src/components/Sheet/Sheet.framer.ts

@@ -1,16 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const sheetPropertyControls: PropertyControls = {
-  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: "outlined",
-  },
-};

package/src/components/Sheet/Sheet.tsx

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

package/src/components/Sheet/index.ts

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

package/src/components/Skeleton/Skeleton.framer.ts

@@ -1,24 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const skeletonPropertyControls: PropertyControls = {
-  animation: {
-    title: "Animation type",
-    type: ControlType.Enum,
-    options: ["wave", "pulse"],
-  },
-  variant: {
-    title: "Variant",
-    type: ControlType.Enum,
-    options: ["circular", 'rectangular'],
-    defaultValue: "rectangular",
-  },
-  target: {
-    title: "Target",
-    type: ControlType.ComponentInstance,
-  },
-  loading: {
-    title: "Loading",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  }
-};

package/src/components/Stack/Stack.tsx

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

package/src/components/Stack/index.ts

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

package/src/components/Stepper/Stepper.framer.ts

@@ -1,182 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const stepperPropertyControls: PropertyControls = {
-  steps: {
-    type: ControlType.Array,
-    control: {
-      type: ControlType.Object,
-      controls: {
-        label: {
-          type: ControlType.String,
-          title: "Label",
-        },
-        extraContent: {
-          type: ControlType.String,
-          title: "Extra Content",
-        },
-        indicatorContent: {
-          type: ControlType.String,
-          title: "Indicator Content",
-        },
-      },
-    },
-    defaultValue: [
-      {
-        label: "Step 1",
-        extraContent: "Step 1 extra content",
-        indicatorContent: "1",
-      },
-      {
-        label: "Step 2",
-        extraContent: "Step 2 extra content",
-        indicatorContent: "2",
-      },
-      {
-        label: "Step 3",
-        extraContent: "Step 3 extra content",
-        indicatorContent: "3",
-      },
-    ],
-  },
-  activeStep: {
-    type: ControlType.Number,
-    title: "Active Step",
-    defaultValue: 0,
-  },
-  activeColor: {
-    title: "Active Color",
-    type: ControlType.Enum,
-    options: [
-      "inherit",
-      "common.white",
-      "common.black",
-      "primary.600",
-      "primary.500",
-      "primary.400",
-      "primary.300",
-      "primary.200",
-      "primary.100",
-      "success.600",
-      "success.500",
-      "success.400",
-      "success.300",
-      "success.200",
-      "success.100",
-      "warning.600",
-      "warning.500",
-      "warning.400",
-      "warning.300",
-      "warning.200",
-      "warning.100",
-      "neutral.600",
-      "neutral.500",
-      "neutral.400",
-      "neutral.300",
-      "neutral.200",
-      "neutral.100",
-    ],
-    defaultValue: "primary.500",
-  },
-  activeLineColor: {
-    title: "Active Line Color",
-    type: ControlType.Enum,
-    options: [
-      "inherit",
-      "common.white",
-      "common.black",
-      "primary.600",
-      "primary.500",
-      "primary.400",
-      "primary.300",
-      "primary.200",
-      "primary.100",
-      "success.600",
-      "success.500",
-      "success.400",
-      "success.300",
-      "success.200",
-      "success.100",
-      "warning.600",
-      "warning.500",
-      "warning.400",
-      "warning.300",
-      "warning.200",
-      "warning.100",
-      "neutral.600",
-      "neutral.500",
-      "neutral.400",
-      "neutral.300",
-      "neutral.200",
-      "neutral.100",
-    ],
-    defaultValue: "primary.500",
-  },
-  inactiveColor: {
-    title: "Inactive Color",
-    type: ControlType.Enum,
-    options: [
-      "inherit",
-      "common.white",
-      "common.black",
-      "primary.600",
-      "primary.500",
-      "primary.400",
-      "primary.300",
-      "primary.200",
-      "primary.100",
-      "success.600",
-      "success.500",
-      "success.400",
-      "success.300",
-      "success.200",
-      "success.100",
-      "warning.600",
-      "warning.500",
-      "warning.400",
-      "warning.300",
-      "warning.200",
-      "warning.100",
-      "neutral.600",
-      "neutral.500",
-      "neutral.400",
-      "neutral.300",
-      "neutral.200",
-      "neutral.100",
-    ],
-    defaultValue: "neutral.400",
-  },
-  inactiveLineColor: {
-    title: "Inactive Line Color",
-    type: ControlType.Enum,
-    options: [
-      "inherit",
-      "common.white",
-      "common.black",
-      "primary.600",
-      "primary.500",
-      "primary.400",
-      "primary.300",
-      "primary.200",
-      "primary.100",
-      "success.600",
-      "success.500",
-      "success.400",
-      "success.300",
-      "success.200",
-      "success.100",
-      "warning.600",
-      "warning.500",
-      "warning.400",
-      "warning.300",
-      "warning.200",
-      "warning.100",
-      "neutral.600",
-      "neutral.500",
-      "neutral.400",
-      "neutral.300",
-      "neutral.200",
-      "neutral.100",
-    ],
-    defaultValue: "neutral.300",
-  },
-};

package/src/components/Stepper/Stepper.tsx

@@ -1,129 +0,0 @@
-import React, { ReactNode } from "react";
-import {
-  Stepper as JoyStepper,
-  Step as JoyStep,
-  StepIndicator as JoyStepIndicator,
-  stepClasses,
-  stepIndicatorClasses,
-  styled,
-} from "@mui/joy";
-import CheckIcon from "@mui/icons-material/Check";
-import { motion } from "framer-motion";
-import { TextColor } from "@mui/joy/styles/types";
-import Typography from "../Typography/index.js";
-import Stack from "../Stack/index.js";
-
-const Step = styled(JoyStep)({});
-export { Step };
-Step.displayName = "Step";
-
-const StepIndicator = styled(JoyStepIndicator)({});
-export { StepIndicator };
-StepIndicator.displayName = "StepIndicator";
-
-const StyledStepper = styled(JoyStepper)(({ theme }) => ({
-  "--StepIndicator-size": "24px",
-  "--Step-gap": theme.spacing(2),
-  "--joy-palette-success-solidBg": "var(--joy-palette-success-400)",
-  [`& .${stepIndicatorClasses.root}`]: {
-    fontSize: "var(--ceed-fontSize-xs)",
-  },
-}));
-const MotionStepper = motion(StyledStepper);
-
-interface StepperProps {
-  steps: {
-    indicatorContent?: ReactNode | string;
-    label?: ReactNode | string;
-    extraContent?: ReactNode | string;
-  }[];
-  activeColor?: TextColor;
-  activeLineColor?: TextColor;
-  inactiveColor?: TextColor;
-  inactiveLineColor?: TextColor;
-  activeStep: number;
-}
-
-function Stepper(props: StepperProps) {
-  // prop destruction
-  const {
-    steps,
-    activeColor = "primary.500",
-    inactiveColor = "neutral.400",
-    activeLineColor = "primary.500",
-    inactiveLineColor = "neutral.300",
-    activeStep,
-  } = props;
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-  return (
-    <MotionStepper
-      sx={(theme) => ({
-        "--StepIndicator-size": "24px",
-        "--Step-gap": theme.spacing(2),
-        [`& .${stepIndicatorClasses.root}`]: {
-          fontSize: "var(--ceed-fontSize-xs)",
-        },
-        [`& .${stepClasses.completed}`]: {
-          "&::after": { bgcolor: activeLineColor },
-          [`& .${stepIndicatorClasses.root}`]: {
-            bgcolor: activeColor,
-          },
-        },
-        [`& .${stepClasses.active}`]: {
-          "&::after": { bgcolor: inactiveLineColor },
-          [`& .${stepIndicatorClasses.root}`]: {
-            bgcolor: activeColor,
-          },
-        },
-        [`& .${stepClasses.disabled}`]: {
-          "&::after": { bgcolor: inactiveLineColor },
-          [`& .${stepIndicatorClasses.root}`]: {
-            bgcolor: inactiveColor,
-          },
-        },
-      })}
-    >
-      {steps.map((step, i) => {
-        const active = activeStep === i + 1;
-        const completed = activeStep > i + 1;
-        const disabled = activeStep < i + 1;
-
-        const hasContent = step.label || step.extraContent;
-
-        return (
-          <Step
-            indicator={
-              <StepIndicator variant="solid" color="primary">
-                {completed ? <CheckIcon /> : step.indicatorContent}
-              </StepIndicator>
-            }
-            active={active}
-            completed={completed}
-            disabled={disabled}
-          >
-            {hasContent && (
-              <Stack>
-                {step.label && (
-                  <Typography level="title-sm">{step.label}</Typography>
-                )}
-                {step.extraContent && (
-                  <Typography level="body-xs">{step.extraContent}</Typography>
-                )}
-              </Stack>
-            )}
-          </Step>
-        );
-      })}
-    </MotionStepper>
-  );
-}
-
-export { Stepper };
-
-Stepper.displayName = "Stepper";

package/src/components/Stepper/index.ts

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

package/src/components/Switch/Switch.framer.ts

@@ -1,39 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const switchPropertyControls: PropertyControls = {
-  onChange: {
-    title: "onChange",
-    type: ControlType.EventHandler,
-  },
-  disabled: {
-    title: "Disabled",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  color: {
-    title: "Color",
-    type: ControlType.Enum,
-    options: [undefined, "primary", "neutral", "danger", "success", "warning"],
-    optionTitles: [
-      "Auto",
-      "Primary",
-      "Neutral",
-      "Danger",
-      "Success",
-      "Warning",
-    ],
-    description: "색상을 지정하면 Checked 상태에 관계 없이 색상이 고정됩니다.",
-  },
-  variant: {
-    title: "Variant",
-    type: ControlType.Enum,
-    options: ["solid", "outlined", "soft", "plain"],
-    defaultValue: undefined,
-  },
-  size: {
-    title: "Size",
-    type: ControlType.Enum,
-    options: ["sm", "md", "lg"],
-    defaultValue: "md",
-  },
-};

package/src/components/Switch/Switch.tsx

@@ -1,64 +0,0 @@
-import React from "react";
-import {
-  Switch as JoySwitch,
-  SwitchProps,
-  styled,
-  switchClasses,
-} from "@mui/joy";
-import { MotionProps, motion } from "framer-motion";
-
-const MotionSwitch = motion(JoySwitch);
-
-const StyledThumb = styled(motion.div)({
-  "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
-  display: "inline-flex",
-  justifyContent: "center",
-  alignItems: "center",
-  position: "absolute",
-  left: "var(--Switch-thumbOffset)",
-  width: "var(--Switch-thumbWidth)",
-  height: "var(--Switch-thumbSize)",
-  borderRadius: "var(--Switch-thumbRadius)",
-  boxShadow: "var(--Switch-thumbShadow)",
-  color: "var(--Switch-thumbColor)",
-  backgroundColor: "var(--Switch-thumbBackground)",
-  [`&.${switchClasses.checked}`]: {
-    left: "unset",
-    right: "var(--Switch-thumbOffset)",
-  },
-});
-
-const Thumb = (props: any) => (
-  <StyledThumb {...props} layout transition={spring} />
-);
-
-const spring = {
-  type: "spring",
-  stiffness: 700,
-  damping: 30,
-};
-
-const Switch = (props: SwitchProps & MotionProps) => {
-  // prop destruction
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-
-  return (
-    <MotionSwitch
-      {...props}
-      slots={{
-        thumb: Thumb,
-        ...props.slots,
-      }}
-    />
-  );
-};
-
-export { Switch };
-
-Switch.displayName = "Switch";

package/src/components/Switch/index.ts

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