@ceed/cds 0.0.177-beta.5 → 0.0.177

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,348 +0,0 @@
-import React, { ComponentProps } from "react";
-import {
-  CssBaseline,
-  CssVarsProvider,
-  checkboxClasses,
-  extendTheme,
-  StyleOverrides,
-  Theme,
-  GlobalStyles,
-  inputClasses,
-} from "@mui/joy";
-import {
-  CalendarOwnerState,
-  CalendarProps,
-  CalendarSlot,
-} from "../Calendar/types.js";
-import { ColorSystemOptions } from "@mui/joy/styles/extendTheme";
-import { CurrencyInput } from "../CurrencyInput";
-import { DatePickerProps } from "../DatePicker";
-import { DateRangePickerProps } from "../DateRangePicker";
-import { MonthPickerProps } from "../MonthPicker";
-import { MonthRangePickerProps } from "../MonthRangePicker";
-import { PercentageInputProps } from "../PercentageInput";
-
-declare module "@mui/joy/styles" {
-  interface TypographySystemOverrides {
-    "marketing-lg": true;
-    "marketing-md": true;
-    "marketing-sm": true;
-  }
-  interface Components {
-    Calendar?: {
-      defaultProps?: Partial<CalendarProps>;
-      styleOverrides?: StyleOverrides<CalendarSlot, CalendarOwnerState, Theme>;
-    };
-    CurrencyInput?: {
-      defaultProps?: Partial<ComponentProps<typeof CurrencyInput>>;
-      styleOverrides?: StyleOverrides<"root", {}, Theme>;
-    };
-    DatePicker?: {
-      defaultProps?: Partial<DatePickerProps>;
-      styleOverrides?: StyleOverrides<"root" | "popper" | "sheet", {}, Theme>;
-    };
-    DateRangePicker?: {
-      defaultProps?: Partial<DateRangePickerProps>;
-      styleOverrides?: StyleOverrides<"root" | "popper" | "sheet", {}, Theme>;
-    };
-    MonthPicker?: {
-      defaultProps?: Partial<MonthPickerProps>;
-      styleOverrides?: StyleOverrides<"root" | "popper" | "sheet", {}, Theme>;
-    };
-    MonthRangePicker?: {
-      defaultProps?: Partial<MonthRangePickerProps>;
-      styleOverrides?: StyleOverrides<"root" | "popper" | "sheet", {}, Theme>;
-    };
-    PercentageInput?: {
-      defaultProps?: Partial<PercentageInputProps>;
-      styleOverrides?: StyleOverrides<"root", {}, Theme>;
-    };
-  }
-}
-
-declare module "@mui/joy/Avatar" {
-  interface AvatarPropsSizeOverrides {
-    xs: true;
-  }
-}
-
-const colorScheme: ColorSystemOptions = {
-  palette: {
-    danger: {
-      "50": "#FEF3F2",
-      "100": "#FDE6E5",
-      "200": "#FBC7C4",
-      "300": "#F89E99",
-      "400": "#F46E66",
-      "500": "#DC0D00",
-      "600": "#AB0F00",
-      "700": "#791000",
-      "800": "#430A0A",
-      "900": "#240505",
-    },
-    neutral: {
-      "50": "#FAFBFC",
-      "100": "#F3F5F7",
-      "200": "#EBECF0",
-      "300": "#D1D5DB",
-      "400": "#A2AAB8",
-      "500": "#5E6C83",
-      "600": "#505E79",
-      "700": "#253858",
-      "800": "#071B36",
-      "900": "#0B0D0E",
-    },
-    primary: {
-      "50": "#F2F7FE",
-      "100": "#E8F0FD",
-      "200": "#CCDFFC",
-      "300": "#9DC1F9",
-      "400": "#4D8EF3",
-      "500": "#015DEE",
-      "600": "#0154D6",
-      "700": "#0141A7",
-      "800": "#00255F",
-      "900": "#000F26",
-    },
-    warning: {
-      "50": "#FEF8F2",
-      "100": "#FEF1E5",
-      "200": "#FCE1C4",
-      "300": "#FABD7F",
-      "400": "#F57C00",
-      "500": "#AF5100",
-      "600": "#843600",
-      "700": "#672600",
-      "800": "#421400",
-      "900": "#1d1002",
-    },
-  },
-};
-
-const defaultTheme: Partial<Theme> = extendTheme({
-  cssVarPrefix: "ceed",
-  spacing: 4,
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 360,
-      md: 600,
-      lg: 900,
-      xl: 1280,
-    },
-  },
-  fontFamily: {
-    display:
-      '"Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol")',
-  },
-  typography: {
-    "marketing-lg": {
-      color:
-        "var(--ceed-palette-text-primary, var(--ceed-palette-neutral-800, #171A1C))",
-      fontFamily:
-        'var(--ceed-fontFamily-display, "Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"))',
-      fontSize: "var(--ceed-fontSize-marketing-lg, 2.625rem)",
-      fontWeight: "var(--ceed-fontWeight-lg, 600)",
-      letterSpacing: "-0.025em",
-      lineHeight: "var(--ceed-lineHeight-xs, 1.33334)",
-    },
-    "marketing-md": {
-      color:
-        "var(--ceed-palette-text-primary, var(--ceed-palette-neutral-800, #171A1C))",
-      fontFamily:
-        'var(--ceed-fontFamily-display, "Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"))',
-      fontSize: "var(--ceed-fontSize-marketing-md, 2rem)",
-      fontWeight: "var(--ceed-fontWeight-lg, 600)",
-      letterSpacing: "-0.025em",
-      lineHeight: "var(--ceed-lineHeight-xs, 1.33334)",
-    },
-    "marketing-sm": {
-      color:
-        "var(--ceed-palette-text-primary, var(--ceed-palette-neutral-800, #171A1C))",
-      fontFamily:
-        'var(--ceed-fontFamily-display, "Poppins", var(--ceed-fontFamily-fallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"))',
-      fontSize: "var(--ceed-fontSize-marketing-sm, 1.5rem)",
-      fontWeight: "var(--ceed-fontWeight-md, 500)",
-      letterSpacing: "-0.025em",
-      lineHeight: "var(--ceed-lineHeight-xs, 1.33334)",
-    },
-  },
-  colorSchemes: {
-    light: colorScheme,
-    dark: colorScheme,
-  },
-  components: {
-    DatePicker: {
-      defaultProps: {
-        size: "md",
-      },
-      styleOverrides: {
-        root: {
-          [`.${inputClasses.root}`]: {
-            // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-            "font-family": "monospace",
-          },
-        },
-      },
-    },
-    DateRangePicker: {
-      defaultProps: {
-        size: "md",
-      },
-      styleOverrides: {
-        root: {
-          [`.${inputClasses.root}`]: {
-            // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-            "font-family": "monospace",
-          },
-        },
-      },
-    },
-    MonthPicker: {
-      defaultProps: {
-        size: "md",
-      },
-      styleOverrides: {
-        root: {
-          [`.${inputClasses.root}`]: {
-            // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-            "font-family": "monospace",
-          },
-        },
-      },
-    },
-    MonthRangePicker: {
-      defaultProps: {
-        size: "md",
-      },
-      styleOverrides: {
-        root: {
-          [`.${inputClasses.root}`]: {
-            // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-            "font-family": "monospace",
-          },
-        },
-      },
-    },
-    PercentageInput: {
-      defaultProps: {
-        size: "md",
-      },
-      styleOverrides: {
-        root: {
-          [`.${inputClasses.root}`]: {
-            // NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
-            "font-family": "monospace",
-          },
-        },
-      },
-    },
-    JoyTypography: {
-      defaultProps: {
-        levelMapping: {
-          "marketing-lg": "div",
-          "marketing-md": "div",
-          "marketing-sm": "div",
-        },
-      },
-    },
-    JoyTable: {
-      defaultProps: {
-        size: "sm",
-        borderAxis: "bothBetween",
-      },
-      styleOverrides: {
-        root: ({ theme }) => ({
-          "--TableRow-stripeBackground": theme.palette.background.level1,
-          "--TableCell-selectedBackground": theme.palette.background.level2,
-          "--TableRow-hoverBackground": theme.palette.background.level3,
-
-          "& tbody tr:has([type=checkbox]:not(:checked)) th": {
-            "--TableCell-headBackground": "transparent",
-          },
-          "& tbody tr:has([type=checkbox]:checked):hover th": {
-            "--TableCell-headBackground": "var(--TableRow-hoverBackground)",
-          },
-          [`& tbody tr:has([type=checkbox]:checked):not(:hover) th`]: {
-            "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
-          },
-          [`& tbody tr:has([type=checkbox]:checked):not(:hover) td`]: {
-            "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
-          },
-
-          [`& .${checkboxClasses.root}`]: {
-            verticalAlign: "middle",
-          },
-        }),
-      },
-    },
-    JoyTooltip: {
-      defaultProps: {
-        size: "sm",
-        placement: "top",
-      },
-    },
-    JoyAvatar: {
-      styleOverrides: {
-        root: ({ ownerState }) => ({
-          ...(ownerState.size === "xs" && {
-            width: "24px",
-            height: "24px",
-            fontSize: "12px",
-          }),
-        }),
-      },
-    },
-    JoyDialogTitle: {
-      styleOverrides: {
-        root: {
-          fontWeight: 'var(--ceed-fontWeight-xl, 700)',
-        },
-      },
-    },
-  },
-});
-
-export { CssBaseline, defaultTheme as theme, extendTheme };
-
-function ThemeProvider(props: { children?: React.ReactNode; theme?: Theme }) {
-  const theme = props.theme || (defaultTheme as Theme);
-
-  return (
-    <>
-      <CssVarsProvider theme={theme}>
-        <CssBaseline />
-        <GlobalStyles
-          styles={{
-            body: {
-              "--ceed-fontSize-marketing-lg": "2.625rem",
-              "--ceed-fontSize-marketing-md": "2rem",
-              "--ceed-fontSize-marketing-sm": "1.5rem",
-
-              [theme.breakpoints.down("md")]: {
-                "--ceed-fontSize-xs": `calc(${theme.fontSize.xs} * 0.875)`,
-                "--ceed-fontSize-sm": `calc(${theme.fontSize.sm} * 0.875)`,
-                "--ceed-fontSize-md": `calc(${theme.fontSize.md} * 0.875)`,
-                "--ceed-fontSize-lg": `calc(${theme.fontSize.lg} * 0.875)`,
-                "--ceed-fontSize-xl": `calc(${theme.fontSize.xl} * 0.875)`,
-                "--ceed-fontSize-xl2": `calc(${theme.fontSize.xl2} * 0.875)`,
-                "--ceed-fontSize-xl3": `calc(${theme.fontSize.xl3} * 0.875)`,
-                "--ceed-fontSize-xl4": `calc(${theme.fontSize.xl4} * 0.875)`,
-
-                // Only typography fontSize
-                "--ceed-fontSize-marketing-lg": `calc(2.625rem * 0.875)`,
-                "--ceed-fontSize-marketing-md": `calc(2rem * 0.875)`,
-                "--ceed-fontSize-marketing-sm": `calc(1.5rem * 0.875)`,
-              },
-            },
-          }}
-        />
-        {props.children}
-      </CssVarsProvider>
-    </>
-  );
-}
-
-export { ThemeProvider };
-
-ThemeProvider.displayName = "ThemeProvider";

package/src/components/ThemeProvider/index.ts

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

package/src/components/Tooltip/Tooltip.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import { Tooltip as JoyTooltip, TooltipProps } from "@mui/joy";
-import { MotionProps, motion } from "framer-motion";
-
-const MotionTooltip = motion(JoyTooltip);
-
-const Tooltip = (props: TooltipProps & MotionProps) => {
-  // prop destruction
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-
-  return <MotionTooltip {...props} />;
-};
-
-export { Tooltip };
-
-Tooltip.displayName = "Tooltip";

package/src/components/Tooltip/index.ts

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

package/src/components/Typography/Typography.framer.ts

@@ -1,90 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const typographyPropertyControls: PropertyControls = {
-  textAlign: {
-    title: "Text Align",
-    type: ControlType.Enum,
-    options: [undefined, "start", "center", "end"],
-    optionTitles: ["None", "Start", "Center", "End"],
-    defaultValue: undefined,
-  },
-  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",
-  },
-  textColor: {
-    title: "Text Color",
-    type: ControlType.Enum,
-    options: [
-      "text.primary",
-      "text.secondary",
-      "text.icon",
-      "text.tertiary",
-      "inherit",
-      "common.white",
-      "common.black",
-      "success.plainDisabledColor",
-      "success.solidDisabledColor",
-      "success.softDisabledColor",
-      "success.outlinedDisabledColor",
-      "primary.500",
-      "primary.plainDisabledColor",
-      "primary.solidDisabledColor",
-      "primary.softDisabledColor",
-      "primary.outlinedDisabledColor",
-      "neutral.plainDisabledColor",
-      "neutral.solidDisabledColor",
-      "neutral.softDisabledColor",
-      "neutral.outlinedDisabledColor",
-      "danger.500",
-      "danger.plainDisabledColor",
-      "danger.solidDisabledColor",
-      "danger.softDisabledColor",
-      "danger.outlinedDisabledColor",
-      "warning.plainDisabledColor",
-      "warning.solidDisabledColor",
-      "warning.softDisabledColor",
-      "warning.outlinedDisabledColor",
-    ],
-    defaultValue: "inherit",
-  },
-  fontWeight: {
-    title: "Font Weight",
-    type: ControlType.Enum,
-    options: [undefined, "700", "600", "500", "400"],
-    optionTitles: ["Recommend", "Bold", "Semibold", "Medium", "Regular"],
-    defaultValue: undefined,
-  },
-  text: {
-    title: "Text",
-    type: ControlType.String,
-    defaultValue: "Typography",
-    displayTextArea: true,
-  },
-  endDecorator: {
-    title: "End Decorator",
-    type: ControlType.ComponentInstance,
-  },
-  startDecorator: {
-    title: "Start Decorator",
-    type: ControlType.ComponentInstance,
-  },
-};

package/src/components/Typography/Typography.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import { Typography as JoyTypography, TypographyProps } from "@mui/joy";
-import { MotionProps, motion } from "framer-motion";
-
-const MotionTypography = motion(JoyTypography);
-
-const Typography = (props: TypographyProps & MotionProps) => {
-  // prop destruction
-  // lib hooks
-  // state, ref, querystring hooks
-  // form hooks
-  // query hooks
-  // calculated values
-  // effects
-  // handlers
-
-  return <MotionTypography {...props} />;
-};
-
-export { Typography };
-
-Typography.displayName = "Typography";

package/src/components/Typography/index.ts

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

package/src/components/Uploader/Uploader.framer.ts

@@ -1,119 +0,0 @@
-import { ControlType, type PropertyControls } from "framer";
-
-export const uploaderPropertyControls: PropertyControls = {
-  label: {
-    title: "Label",
-    type: ControlType.String,
-  },
-  error: {
-    title: "Error",
-    type: ControlType.Boolean,
-    defaultValue: false,
-  },
-  uploaded: {
-    title: "Uploaded",
-    type: ControlType.Array,
-    control: {
-      type: ControlType.Object,
-      controls: {
-        name: { type: ControlType.String },
-        size: { type: ControlType.Number },
-      },
-    },
-    defaultValue: [],
-  },
-  size: {
-    title: "Size",
-    type: ControlType.Enum,
-    options: ["sm", "md"],
-    optionTitles: ["Small", "Medium"],
-    defaultValue: "md",
-  },
-  accepts: {
-    title: "Accepts",
-    type: ControlType.Array,
-    control: {
-      type: ControlType.Enum,
-      options: [
-        "image/*",
-        "audio/*",
-        "video/*",
-        ".pdf",
-        ".jpg,.jpeg",
-        ".png",
-        ".txt",
-        ".csv",
-        ".doc,.docx",
-        ".xls,.xlsx",
-        ".ppt,.pptx",
-        ".zip",
-        ".mp3",
-        ".m4a",
-        ".wav",
-        ".aac",
-        ".aa",
-        ".aax",
-        ".aiff",
-        ".wma",
-        ".mp4",
-        ".mov",
-        ".avi",
-        ".wmv",
-        ".avchd",
-        ".webm",
-        ".flv",
-      ],
-      defaultValue: ".pdf",
-      optionTitles: [
-        "Any image file",
-        "Any audio file",
-        "Any video file",
-        ".pdf",
-        ".jpg,.jpeg",
-        ".png",
-        ".txt",
-        ".csv",
-        ".doc,.docx",
-        ".xls,.xlsx",
-        ".ppt,.pptx",
-        ".zip",
-        ".mp3",
-        ".m4a",
-        ".wav",
-        ".aac",
-        ".aa",
-        ".aax",
-        ".aiff",
-        ".wma",
-        ".mp4",
-        ".mov",
-        ".avi",
-        ".wmv",
-        ".avchd",
-        ".webm",
-        ".flv",
-      ]
-    },
-    defaultValue: [],
-  },
-  minCount: {
-    title: "Min Count",
-    type: ControlType.Number,
-    defaultValue: undefined,
-  },
-  maxCount: {
-    title: "Max Count",
-    type: ControlType.Number,
-    defaultValue: undefined,
-  },
-  maxFileSize: {
-    title: "Max File Size(KB)",
-    type: ControlType.Number,
-    defaultValue: undefined,
-  },
-  maxFileTotalSize: {
-    title: "Max File Total Size(KB)",
-    type: ControlType.Number,
-    defaultValue: 3,
-  },
-};