@ceed/cds 0.0.177-beta.5 → 0.0.178

package/src/framer-entrypoint.ts

@@ -1,433 +0,0 @@
-import { ControlType, PropertyControls } from "framer";
-import React, {
-  ElementType,
-  ReactNode,
-  RefObject,
-  createElement,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { Badge } from "./index.js";
-import { useTheme } from "@mui/joy";
-
-export * from "./index.js";
-
-// For each component, we need to export the property controls for Framer Code Components
-export { autocompletePropertyControls } from "./components/Autocomplete/Autocomplete.framer";
-export { accordionsPropertyControls } from "./components/Accordions/Accordions.framer";
-export { avatarPropertyControls } from "./components/Avatar/Avatar.framer";
-export { badgePropertyControls } from "./components/Badge/Badge.framer";
-export { breadcrumbsPropertyControls } from "./components/Breadcrumbs/Breadcrumbs.framer";
-export { buttonPropertyControls } from "./components/Button/Button.framer";
-export { checkboxPropertyControls } from "./components/Checkbox/Checkbox.framer";
-export { calendarPropertyControls } from "./components/Calendar/Calendar.framer";
-export { chipPropertyControls } from "./components/Chip/Chip.framer";
-export { containerPropertyControls } from "./components/Container/Container.framer";
-export { currencyInputPropertyControls } from "./components/CurrencyInput/CurrencyInput.framer";
-export { dataTablePropertyControls } from "./components/DataTable/DataTable.framer";
-export { datePickerPropertyControls } from "./components/DatePicker/DatePicker.framer";
-export { dateRangePickerPropertyControls } from "./components/DateRangePicker/DateRangePicker.framer";
-export { dialogFramePropertyControls } from "./components/DialogFrame/DialogFrame.framer";
-export { dividerPropertyControls } from "./components/Divider/Divider.framer";
-export { formControlPropertyControls } from "./components/FormControl/FormControl.framer";
-export { iconButtonPropertyControls } from "./components/IconButton/IconButton.framer";
-export { inputPropertyControls } from "./components/Input/Input.framer";
-export { linkPropertyControls } from "./components/Link/Link.framer";
-export { markdownPropertyControls } from "./components/Markdown/Markdown.framer";
-export { menuButtonPropertyControls } from "./components/MenuButton/MenuButton.framer";
-export { modalFramePropertyControls } from "./components/Modal/Modal.framer";
-export { monthPickerPropertyControls } from "./components/MonthPicker/MonthPicker.framer";
-export { monthRangePickerPropertyControls } from "./components/MonthRangePicker/MonthRangePicker.framer";
-export { navigatorPropertyControls } from "./components/Navigator/Navigator.framer";
-export { paginationPropertyControls } from "./components/Pagination/Pagination.framer";
-export { percentageInputPropertyControls } from './components/PercentageInput/PercentageInput.framer';
-export { radioListPropertyControls } from "./components/RadioList/RadioList.framer";
-export { selectPropertyControls } from "./components/Select/Select.framer";
-export { sheetPropertyControls } from "./components/Sheet/Sheet.framer";
-export { skeletonPropertyControls } from "./components/Skeleton/Skeleton.framer";
-export { stepperPropertyControls } from './components/Stepper/Stepper.framer';
-export { switchPropertyControls } from "./components/Switch/Switch.framer";
-export { tabsPropertyControls } from "./components/Tabs/Tabs.framer";
-export { textareaPropertyControls } from "./components/Textarea/Textarea.framer";
-export { typographyPropertyControls } from "./components/Typography/Typography.framer";
-export { uploaderPropertyControls } from "./components/Uploader/Uploader.framer";
-
-export const commonPropertyControls: PropertyControls = {
-  useNumbering: {
-    title: "💫 Numbering",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  numbering: {
-    title: " ",
-    type: ControlType.Number,
-    defaultValue: 1,
-    hidden: ({ useNumbering }: any) => !useNumbering,
-  },
-  useResponsiveMargin: {
-    title: "💫 Responsive Margin",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  responsiveMargin: {
-    title: " ",
-    type: ControlType.Object,
-    buttonTitle: "Set Margin",
-    hidden: ({ useResponsiveMargin }: any) => !useResponsiveMargin,
-    controls: {
-      xs: {
-        type: ControlType.FusedNumber,
-        defaultValue: 0,
-        toggleKey: "xsMixed",
-        toggleTitles: ["All", "Individual"],
-        valueKeys: [
-          "xsMarginTop",
-          "xsMarginRight",
-          "xsMarginBottom",
-          "xsMarginLeft",
-        ],
-        valueLabels: ["T", "R", "B", "L"],
-      },
-      sm: {
-        type: ControlType.FusedNumber,
-        defaultValue: 0,
-        toggleKey: "smMixed",
-        toggleTitles: ["All", "Individual"],
-        valueKeys: [
-          "smMarginTop",
-          "smMarginRight",
-          "smMarginBottom",
-          "smMarginLeft",
-        ],
-        valueLabels: ["T", "R", "B", "L"],
-      },
-      md: {
-        type: ControlType.FusedNumber,
-        defaultValue: 0,
-        toggleKey: "mdMixed",
-        toggleTitles: ["All", "Individual"],
-        valueKeys: [
-          "mdMarginTop",
-          "mdMarginRight",
-          "mdMarginBottom",
-          "mdMarginLeft",
-        ],
-        valueLabels: ["T", "R", "B", "L"],
-      },
-      lg: {
-        type: ControlType.FusedNumber,
-        defaultValue: 0,
-        toggleKey: "lgMixed",
-        toggleTitles: ["All", "Individual"],
-        valueKeys: [
-          "lgMarginTop",
-          "lgMarginRight",
-          "lgMarginBottom",
-          "lgMarginLeft",
-        ],
-        valueLabels: ["T", "R", "B", "L"],
-      },
-      xl: {
-        type: ControlType.FusedNumber,
-        defaultValue: 0,
-        toggleKey: "xlMixed",
-        toggleTitles: ["All", "Individual"],
-        valueKeys: [
-          "xlMarginTop",
-          "xlMarginRight",
-          "xlMarginBottom",
-          "xlMarginLeft",
-        ],
-        valueLabels: ["T", "R", "B", "L"],
-      },
-    },
-  },
-};
-
-const withResponsiveMargin = (Component: ElementType) => {
-  return ({
-    useResponsiveMargin,
-    responsiveMargin,
-    ...props
-  }: {
-    useResponsiveMargin?: boolean;
-    responsiveMargin?: Partial<{
-      xs: number;
-      sm: number;
-      md: number;
-      lg: number;
-      xl: number;
-      xsMixed: boolean;
-      smMixed: boolean;
-      mdMixed: boolean;
-      lgMixed: boolean;
-      xlMixed: boolean;
-      xsMarginTop: number;
-      smMarginTop: number;
-      mdMarginTop: number;
-      lgMarginTop: number;
-      xlMarginTop: number;
-      xsMarginRight: number;
-      smMarginRight: number;
-      mdMarginRight: number;
-      lgMarginRight: number;
-      xlMarginRight: number;
-      xsMarginBottom: number;
-      smMarginBottom: number;
-      mdMarginBottom: number;
-      lgMarginBottom: number;
-      xlMarginBottom: number;
-      xsMarginLeft: number;
-      smMarginLeft: number;
-      mdMarginLeft: number;
-      lgMarginLeft: number;
-      xlMarginLeft: number;
-    }>;
-  }) => {
-    const [style, setStyle] = useState({} as Record<string, any>);
-    const handleXsChange = () => {
-      if (!responsiveMargin?.xsMixed) {
-        setStyle({ margin: responsiveMargin?.xs });
-      } else {
-        setStyle({
-          marginLeft: responsiveMargin?.xsMarginLeft,
-          marginRight: responsiveMargin?.xsMarginRight,
-          marginTop: responsiveMargin?.xsMarginTop,
-          marginBottom: responsiveMargin?.xsMarginBottom,
-        });
-      }
-    };
-    const handleSmChange = () => {
-      if (!responsiveMargin?.smMixed) {
-        setStyle({ margin: responsiveMargin?.sm });
-      } else {
-        setStyle({
-          marginLeft: responsiveMargin?.smMarginLeft,
-          marginRight: responsiveMargin?.smMarginRight,
-          marginTop: responsiveMargin?.smMarginTop,
-          marginBottom: responsiveMargin?.smMarginBottom,
-        });
-      }
-    };
-    const handleMdChange = () => {
-      if (!responsiveMargin?.mdMixed) {
-        setStyle({ margin: responsiveMargin?.md });
-      } else {
-        setStyle({
-          marginLeft: responsiveMargin?.mdMarginLeft,
-          marginRight: responsiveMargin?.mdMarginRight,
-          marginTop: responsiveMargin?.mdMarginTop,
-          marginBottom: responsiveMargin?.mdMarginBottom,
-        });
-      }
-    };
-    const handleLgChange = () => {
-      if (!responsiveMargin?.lgMixed) {
-        setStyle({ margin: responsiveMargin?.lg });
-      } else {
-        setStyle({
-          marginLeft: responsiveMargin?.lgMarginLeft,
-          marginRight: responsiveMargin?.lgMarginRight,
-          marginTop: responsiveMargin?.lgMarginTop,
-          marginBottom: responsiveMargin?.lgMarginBottom,
-        });
-      }
-    };
-    const handleXlChange = () => {
-      if (!responsiveMargin?.xlMixed) {
-        setStyle({ margin: responsiveMargin?.xl });
-      } else {
-        setStyle({
-          marginLeft: responsiveMargin?.xlMarginLeft,
-          marginRight: responsiveMargin?.xlMarginRight,
-          marginTop: responsiveMargin?.xlMarginTop,
-          marginBottom: responsiveMargin?.xlMarginBottom,
-        });
-      }
-    };
-
-    if (!useResponsiveMargin) {
-      return createElement(Component, props);
-    }
-
-    return createElement(ResponsiveEmitter, {
-      onXsChange: handleXsChange,
-      onSmChange: handleSmChange,
-      onMdChange: handleMdChange,
-      onLgChange: handleLgChange,
-      onXlChange: handleXlChange,
-      children: createElement(Component, { ...props, sx: style }),
-    });
-  };
-};
-
-export const withCommonControls = (Component: ElementType) => {
-  const wrappedComponent = withResponsiveMargin(Component);
-
-  return ({ useNumbering, numbering, ...props }: any) => {
-    const components: { Component: ElementType; props: any }[] = [
-      {
-        Component: wrappedComponent,
-        props,
-      },
-    ];
-    if (useNumbering) {
-      components.push({
-        Component: Badge,
-        props: {
-          color: "neutral",
-          badgeContent: numbering,
-          style: {
-            display: "inherit",
-          },
-          anchorOrigin: {
-            vertical: "top",
-            horizontal: "left",
-          },
-        },
-      });
-    }
-
-    return components.reduce((acc, { Component, props }) => {
-      return [React.createElement(Component, props, ...acc)];
-    }, [] as React.ReactElement[]);
-  };
-};
-
-const useElementResizeEffect = (element: HTMLElement, callback: () => void) => {
-  useEffect(() => {
-    const observer = new ResizeObserver(callback);
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [element]);
-};
-
-export const useResponsive = (
-  rootElement: HTMLElement
-): "xs" | "sm" | "md" | "lg" | "xl" => {
-  const theme = useTheme();
-  const [point, setPoint] = useState<"xs" | "sm" | "md" | "lg" | "xl">("xs");
-
-  useElementResizeEffect(rootElement, () => {
-    setPoint(
-      theme.breakpoints.keys.reduce((acc, key) => {
-        const point = theme.breakpoints.values[key];
-        if (rootElement.offsetWidth >= point) {
-          return key;
-        }
-        return acc;
-      }, "xs")
-    );
-  });
-
-  return point;
-};
-
-export const useCanvasResponsive = (
-  ref?: RefObject<any>
-): "xs" | "sm" | "md" | "lg" | "xl" => {
-  const rootElement: HTMLElement = useMemo(
-    () =>
-      findParentElement(ref?.current, ".groundNodeWrapper")?.querySelector(
-        "div[id]"
-      ) ||
-      document.querySelector<HTMLElement>(
-        "#canvas-container .groundNodeWrapper > div[id]"
-      ) ||
-      document.body,
-    [document, ref?.current]
-  );
-
-  return useResponsive(rootElement);
-};
-
-export const ResponsiveEmitter = (props: {
-  children: ReactNode;
-  onXsChange?: () => void;
-  onSmChange?: () => void;
-  onMdChange?: () => void;
-  onLgChange?: () => void;
-  onXlChange?: () => void;
-}) => {
-  const {
-    children,
-    onXsChange,
-    onSmChange,
-    onMdChange,
-    onLgChange,
-    onXlChange,
-  } = props;
-
-  const childRef = useRef<HTMLDivElement>(null);
-
-  const breakpoint = useCanvasResponsive(childRef);
-
-  useEffect(() => {
-    if (breakpoint === "xl" && onXlChange) {
-      onXlChange();
-      return;
-    } else if (breakpoint === "lg" && onLgChange) {
-      onLgChange();
-      return;
-    } else if (breakpoint === "md" && onMdChange) {
-      onMdChange();
-      return;
-    } else if (breakpoint === "sm" && onSmChange) {
-      onSmChange();
-      return;
-    } else if (breakpoint === "xs" && onXsChange) {
-      onXsChange();
-      return;
-    }
-  }, [breakpoint, onXsChange, onSmChange, onMdChange, onLgChange, onXlChange]);
-
-  return createElement("div", {
-    ref: childRef,
-    style: {
-      width: 0,
-      height: 0,
-      position: "sticky",
-      display: "none",
-    },
-  });
-};
-
-function findParentElement(
-  element: HTMLElement | null | undefined,
-  selector: string
-): HTMLElement | null {
-  if (!element) {
-    return null;
-  }
-
-  if (element.matches(selector)) {
-    return element;
-  }
-
-  return findParentElement(element.parentElement, selector);
-}
-
-export const responsiveEmitterPropertyControls: PropertyControls = {
-  onXsChange: {
-    title: "onXsChange",
-    type: ControlType.EventHandler,
-  },
-  onSmChange: {
-    title: "onSmChange",
-    type: ControlType.EventHandler,
-  },
-  onMdChange: {
-    title: "onMdChange",
-    type: ControlType.EventHandler,
-  },
-  onLgChange: {
-    title: "onLgChange",
-    type: ControlType.EventHandler,
-  },
-  onXlChange: {
-    title: "onXlChange",
-    type: ControlType.EventHandler,
-  },
-};

package/src/hooks/use-controlled-state/index.ts

@@ -1,37 +0,0 @@
-import { useState, useCallback, useEffect, useRef } from "react";
-
-export function useControlledState<T>(
-  controlledValue: T | undefined,
-  defaultValue: T,
-  onChange?: (value: T) => void,
-  options?: { disableStrict?: boolean }
-): [T, (value: T | ((prev: T) => T)) => void] {
-  const { current: isControlled } = useRef(controlledValue !== undefined);
-  const [displayValue, setDisplayValue] = useState<T>(
-    controlledValue ?? defaultValue
-  );
-
-  useEffect(() => {
-    if (isControlled) {
-      setDisplayValue((controlledValue as T) ?? defaultValue);
-    }
-  }, [controlledValue, defaultValue, isControlled]);
-
-  const handleChange = useCallback(
-    (value: T | ((prev: T) => T)) => {
-      const newValue =
-        typeof value === "function"
-          ? (value as (prev: T) => T)(displayValue)
-          : value;
-
-      if (options?.disableStrict || !isControlled) {
-        setDisplayValue(newValue);
-      }
-
-      onChange?.(newValue);
-    },
-    [isControlled, onChange, displayValue, options]
-  );
-
-  return [displayValue, handleChange];
-}

package/src/index.ts

@@ -1,173 +0,0 @@
-export {
-  useTheme,
-  useColorScheme,
-  useThemeProps,
-  // Custom UI
-  ButtonGroup,
-  boxClasses,
-  buttonClasses,
-  checkboxClasses,
-  dividerClasses,
-  iconButtonClasses,
-  inputClasses,
-  menuClasses,
-  menuButtonClasses,
-  menuItemClasses,
-  optionClasses,
-  radioClasses,
-  radioGroupClasses,
-  selectClasses,
-  switchClasses,
-  tableClasses,
-  textareaClasses,
-  typographyClasses,
-  formControlClasses,
-  formLabelClasses,
-  formHelperTextClasses,
-  gridClasses,
-  stackClasses,
-  sheetClasses,
-  modalClasses,
-  modalCloseClasses,
-  modalDialogClasses,
-  modalOverflowClasses,
-  dialogTitleClasses,
-  dialogContentClasses,
-  dialogActionsClasses,
-  tooltipClasses,
-  tabsClasses,
-  tabListClasses,
-  tabPanelClasses,
-  // Pure JoyUI
-  accordionClasses,
-  accordionDetailsClasses,
-  accordionGroupClasses as accordionsClasses,
-  accordionSummaryClasses,
-  AutocompleteListbox,
-  AutocompleteOption,
-  autocompleteClasses,
-  autocompleteListboxClasses,
-  autocompleteOptionClasses,
-  avatarClasses,
-  avatarGroupClasses,
-  AspectRatio,
-  aspectRatioClasses,
-  Badge,
-  badgeClasses,
-  breadcrumbsClasses,
-  Card,
-  cardClasses,
-  CardActions,
-  cardActionsClasses,
-  CardContent,
-  cardContentClasses,
-  CardCover,
-  cardCoverClasses,
-  CardOverflow,
-  cardOverflowClasses,
-  Chip,
-  chipClasses,
-  CircularProgress,
-  circularProgressClasses,
-  drawerClasses,
-  LinearProgress,
-  linearProgressClasses,
-  List,
-  listClasses,
-  ListDivider,
-  listDividerClasses,
-  ListItem,
-  listItemClasses,
-  ListItemButton,
-  listItemButtonClasses,
-  ListItemContent,
-  listItemContentClasses,
-  ListItemDecorator,
-  listItemDecoratorClasses,
-  ListSubheader,
-  listSubheaderClasses,
-  Link,
-  linkClasses,
-  Slider,
-  sliderClasses,
-  stepClasses,
-  StepButton,
-  stepButtonClasses,
-  stepperClasses,
-  Skeleton,
-  skeletonClasses,
-} from "@mui/joy";
-export {
-  Autocomplete,
-  Accordion,
-  Accordions,
-  AccordionDetails,
-  AccordionSummary,
-  Avatar,
-  AvatarGroup,
-  Box,
-  Breadcrumbs,
-  Button,
-  Calendar,
-  Checkbox,
-  Container,
-  CurrencyInput,
-  DataTable,
-  DatePicker,
-  DateRangePicker,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  DialogFrame,
-  Divider,
-  Drawer,
-  Dropdown,
-  extendTheme,
-  InsetDrawer,
-  FormControl,
-  FormHelperText,
-  FormLabel,
-  Grid,
-  IconButton,
-  Input,
-  Markdown,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Modal,
-  ModalClose,
-  ModalDialog,
-  ModalOverflow,
-  ModalFrame,
-  MonthPicker,
-  MonthRangePicker,
-  NavigationGroup,
-  NavigationItem,
-  Navigator,
-  Pagination,
-  PercentageInput,
-  Radio,
-  RadioGroup,
-  RadioList,
-  Select,
-  Step,
-  StepIndicator,
-  Stepper,
-  Option,
-  Sheet,
-  Stack,
-  Switch,
-  theme,
-  Table,
-  TableHead,
-  TableBody,
-  Tabs,
-  Tab,
-  TabList,
-  TabPanel,
-  Textarea,
-  ThemeProvider,
-  Tooltip,
-  Typography,
-  Uploader,
-} from "./components/index.js";

package/src/libs/rehype-accent/index.ts

@@ -1,46 +0,0 @@
-import { TextColor } from "@mui/joy/styles/types";
-import { type Node } from "unist";
-import { visit } from "unist-util-visit";
-
-export function rehypeAccent(options: { accentColor?: TextColor }) {
-  const { accentColor } = options;
-
-  return (tree: Node) => {
-    // TODO: unist-util-visit에서 타입 추론이 잘 안됨..
-    visit(tree, "text", ((node: any, index, parent) => {
-      const value = node.value;
-
-      const regex = /\|\|.*?\|\|/g;
-
-      let match;
-      let lastIndex = 0;
-
-      const newNodes = [];
-      while ((match = regex.exec(value)) !== null) {
-        if (match.index > lastIndex) {
-          newNodes.push({
-            type: "text",
-            value: value.slice(lastIndex, match.index),
-          });
-        }
-        const innerText = match[0].split("||")[1];
-        newNodes.push({
-          type: "element",
-          tagName: "p",
-          properties: { textColor: accentColor },
-          children: [{ type: "text", value: innerText }],
-        });
-
-        lastIndex = match.index + match[0].length;
-      }
-
-      if (lastIndex < value.length) {
-        newNodes.push({ type: "text", value: value.slice(lastIndex) });
-      }
-
-      if (newNodes.length) {
-        parent.children.splice(index, 1, ...newNodes);
-      }
-    }));
-  };
-}