@lunit/design-system 2.1.0 → 2.2.3

package/src/components/Button/utils/getIconButtonPaddingBySizeAndKind.ts

@@ -1,13 +1,10 @@
-import { OUTLINED_BORDER_WIDTH } from "../const";
+import { OUTLINED_BORDER_WIDTH } from '../const';
 
-import type { ButtonProps } from "../Button.types";
-import { ToggleButtonProps } from "@/components/ToggleButton/ToggleButton.types";
+import type { ButtonProps } from '../Button.types';
+import { ToggleButtonProps } from '@/components/ToggleButton/ToggleButton.types';
 
-type GetIconButtonPaddingBySizeAndKindProps = Pick<
-  ButtonProps,
-  "kind" | "size"
-> &
-  Pick<ToggleButtonProps, "selected">;
+type GetIconButtonPaddingBySizeAndKindProps = Pick<ButtonProps, 'kind' | 'size'> &
+  Pick<ToggleButtonProps, 'selected'>;
 
 /**
  * When kind is outlined,
@@ -19,20 +16,14 @@ export const getIconButtonPaddingBySizeAndKind = ({
   size,
   selected = false,
 }: GetIconButtonPaddingBySizeAndKindProps) => {
-  if (size === "small") {
-    return kind === "outlined" && !selected
-      ? `${4 - OUTLINED_BORDER_WIDTH}px`
-      : "4px";
+  if (size === 'small') {
+    return kind === 'outlined' && !selected ? `${4 - OUTLINED_BORDER_WIDTH}px` : '4px';
   }
 
-  if (size === "medium") {
-    return kind === "outlined" && !selected
-      ? `${8 - OUTLINED_BORDER_WIDTH}px`
-      : "8px";
+  if (size === 'medium') {
+    return kind === 'outlined' && !selected ? `${8 - OUTLINED_BORDER_WIDTH}px` : '8px';
   }
 
   // size === "large"
-  return kind === "outlined" && !selected
-    ? `${12 - OUTLINED_BORDER_WIDTH}px`
-    : "12px";
+  return kind === 'outlined' && !selected ? `${12 - OUTLINED_BORDER_WIDTH}px` : '12px';
 };

package/src/components/Checkbox/Checkbox.tsx

@@ -1,22 +1,22 @@
-import React from "react";
-import { styled } from "@mui/material/styles";
-import MuiCheckbox from "@mui/material/Checkbox";
-import type { CheckboxProps } from "@mui/material";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import MuiCheckbox from '@mui/material/Checkbox';
+import type { CheckboxProps } from '@mui/material';
 
 const CustomCheckbox = styled(MuiCheckbox)(({ theme }) => ({
   width: 20,
   height: 20,
   padding: 0,
-  "&.Mui-disabled": {
+  '&.Mui-disabled': {
     opacity: 0.38,
   },
-  "&.Mui-focusVisible:after": {
+  '&.Mui-focusVisible:after': {
     content: '""',
-    position: "absolute",
+    position: 'absolute',
     width: 24,
     height: 24,
-    border: `1px solid ${theme.palette.lunit_token.core.focused}`,
-    borderRadius: "7px",
+    border: `1px solid ${theme.palette.lunit_token.core.status_focused}`,
+    borderRadius: '7px',
   },
 }));
 
@@ -25,21 +25,15 @@ const iconSize = {
   height: 18,
 };
 
-const DefaultIcon = styled("span")(({ theme }) => ({
+const DefaultIcon = styled('span')(({ theme }) => ({
   ...iconSize,
-  borderRadius: "20%",
+  borderRadius: '20%',
   boxShadow: `inset 0 0 0 1.5px ${theme.palette.lunit_token.component.selectcontrol_off}`,
 }));
 
 const CheckedIcon = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -52,13 +46,7 @@ const CheckedIcon = () => {
 
 const IndeterminateIcon = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Checkbox/index.ts

@@ -1 +1 @@
-export { default } from "./Checkbox";
+export { default } from './Checkbox';

package/src/components/Chip/Chip.styled.ts

@@ -1,34 +1,30 @@
-import { Chip as MuiChip, styled } from "@mui/material";
-import { CHIP_COLORS } from "./consts";
+import { Chip as MuiChip, styled } from '@mui/material';
+import { CHIP_COLORS } from './consts';
 
-import type { Theme } from "@mui/material/styles";
+import type { Theme } from '@mui/material/styles';
 import type {
   ChipColor,
   OutlinedChipProps,
   BaseContainedChipProps,
   EnableContainedChipProps,
-} from "./Chip.types";
+} from './Chip.types';
 
 const COMMON_STYLES = {
-  height: "22px",
-  width: "auto",
-  minWidth: "22px",
-  boxShadow: "none",
-  "&.Mui-disabled": {
+  height: '22px',
+  width: 'auto',
+  minWidth: '22px',
+  boxShadow: 'none',
+  '&.Mui-disabled': {
     opacity: 1,
   },
-  "& .MuiChip-label": {
+  '& .MuiChip-label': {
     padding: 0,
-    marginInline: "8px",
+    marginInline: '8px',
   },
 };
 
-const getColorToken = (
-  token: "text" | "bg",
-  theme: Theme,
-  color?: ChipColor
-) => {
-  if (token === "text") {
+const getColorToken = (token: 'text' | 'bg', theme: Theme, color?: ChipColor) => {
+  if (token === 'text') {
     switch (color) {
       case CHIP_COLORS.PRIMARY:
         return theme.palette.lunit_token.component.chip_primary_text;
@@ -62,96 +58,97 @@ const getColorToken = (
 };
 
 export const StyledOutlinedChip = styled(MuiChip, {
-  shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
+  shouldForwardProp: (prop) => !['color'].includes(prop.toString()),
 })<OutlinedChipProps>(({ theme, color }) => ({
   ...COMMON_STYLES,
   ...theme.typography.caption,
 
-  color: getColorToken("text", theme, color),
-  borderColor: getColorToken("text", theme, color),
+  color: getColorToken('text', theme, color),
+  borderColor: getColorToken('text', theme, color),
 }));
 
 export const StyledContainedChipBase = styled(MuiChip, {
-  shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
+  shouldForwardProp: (prop) => !['color'].includes(prop.toString()),
 })<BaseContainedChipProps>(() => ({ theme, color }) => ({
   ...COMMON_STYLES,
   ...theme.typography.caption,
 
   color: theme.palette.lunit_token.core.text_normal,
-  backgroundColor: getColorToken("bg", theme, color),
+  backgroundColor: getColorToken('bg', theme, color),
 
-  "& .MuiSvgIcon-root": {
-    marginBlock: "3px",
-    marginLeft: "3px",
-    marginRight: "4px",
-    height: "16px",
-    width: "16px",
-    color: getColorToken("text", theme, color),
+  '& .MuiSvgIcon-root': {
+    marginBlock: '3px',
+    marginLeft: '3px',
+    marginRight: '4px',
+    height: '16px',
+    width: '16px',
+    color: getColorToken('text', theme, color),
   },
-  "& .MuiChip-avatar": {
-    marginBlock: "3px",
-    marginLeft: "4px",
-    marginRight: "5px",
-    height: "14px",
-    width: "14px",
-    fontSize: "11px",
+  '& .MuiChip-avatar': {
+    marginBlock: '3px',
+    marginLeft: '4px',
+    marginRight: '5px',
+    height: '14px',
+    width: '14px',
+    fontSize: '11px',
     fontWeight: 500,
-    lineHeight: "16px",
-    display: "flex",
-    textAlign: "center",
-    alignItems: "center",
-    color: getColorToken("bg", theme, color),
-    backgroundColor: getColorToken("text", theme, color),
+    lineHeight: '16px',
+    display: 'flex',
+    textAlign: 'center',
+    alignItems: 'center',
+    color: getColorToken('bg', theme, color),
+    backgroundColor: getColorToken('text', theme, color),
   },
 }));
 
 export const StyledContainedChipEnable = styled(StyledContainedChipBase, {
-  shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
+  shouldForwardProp: (prop) => !['color'].includes(prop.toString()),
 })<EnableContainedChipProps>(() => ({ theme, color }) => ({
   /**
    * Setting the z-index of the chip to 0 and the z-index of the pseudo element to -1
    * allows the pseudo element(hover layer) to be rendered between the chip and the chip's children.
    */
-  position: "relative",
+  position: 'relative',
   left: 0,
   right: 0,
   zIndex: 0,
-  "&:hover": {
-    backgroundColor: getColorToken("bg", theme, color),
+  '&:hover': {
+    backgroundColor: getColorToken('bg', theme, color),
   },
-  "&:hover::before": {
-    position: "absolute",
+  '&:hover::before': {
+    position: 'absolute',
     zIndex: -1,
     content: '""',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: theme.palette.lunit_token.core.hover,
-    borderRadius: "11px",
+    backgroundColor: theme.palette.lunit_token.core.status_hover,
+    borderRadius: '11px',
   },
 }));
 
-export const StyledContainedChipDeletable = styled(
-  StyledContainedChipBase
-)<BaseContainedChipProps>(() => ({ theme }) => ({
-  "& .MuiChip-deleteIcon": {
-    marginLeft: "4px",
-    marginRight: "3px",
-  },
+export const StyledContainedChipDeletable = styled(StyledContainedChipBase)<BaseContainedChipProps>(
+  () =>
+    ({ theme }) => ({
+      '& .MuiChip-deleteIcon': {
+        marginLeft: '4px',
+        marginRight: '3px',
+      },
 
-  "& .delete-icon-hover-layer": {
-    position: "absolute",
-    zIndex: 1000,
-    top: 0,
-    left: "auto",
-    right: 0,
-    bottom: 0,
-    opacity: 0,
-    color: theme.palette.lunit_token.core.hover,
-    ":hover": {
-      cursor: "pointer",
-      opacity: 1,
-    },
-  },
-}));
+      '& .delete-icon-hover-layer': {
+        position: 'absolute',
+        zIndex: 1000,
+        top: 0,
+        left: 'auto',
+        right: 0,
+        bottom: 0,
+        opacity: 0,
+        color: theme.palette.lunit_token.core.status_hover,
+        ':hover': {
+          cursor: 'pointer',
+          opacity: 1,
+        },
+      },
+    }),
+);

package/src/components/Chip/Chip.tsx

@@ -1,12 +1,12 @@
-import React from "react";
-import { Avatar } from "@mui/material";
-import Close16 from "@lunit/design-system-icons/Close16";
+import React from 'react';
+import { Avatar } from '@mui/material';
+import Close16 from '@lunit/design-system-icons/Close16';
 import {
   StyledOutlinedChip,
   StyledContainedChipBase,
   StyledContainedChipEnable,
   StyledContainedChipDeletable,
-} from "./Chip.styled";
+} from './Chip.styled';
 
 import type {
   OutlinedChipProps,
@@ -16,57 +16,36 @@ import type {
   ChipProps,
   ChipType,
   ChipThumbnail,
-} from "./Chip.types";
-
-const Chip: ChipType = (props: ChipProps) => {
-  const { kind, variant, onDelete, onClick, ...restProps } = props;
-
-  const isOutlined = kind === "outlined" || variant === "outlined";
-
-  if (isOutlined) return <OutlinedChip {...props} />;
-  else if (onClick) return <EnableContainedChip {...props} />;
-  else if (onDelete) return <DeletableContainedChip {...props} />;
-
-  return <ReadOnlyContainedChip {...restProps} />;
-};
+} from './Chip.types';
 
 const OutlinedChip = (props: OutlinedChipProps) => {
-  const { color = "primary", ...restProps } = props;
+  const { color = 'primary', ...restProps } = props;
 
-  return (
-    <StyledOutlinedChip
-      {...restProps}
-      variant="outlined"
-      disabled
-      color={color}
-    />
-  );
+  return <StyledOutlinedChip {...restProps} variant="outlined" disabled color={color} />;
 };
 
 /**
  * Conditional styling for contained chip
  */
 const getAvatar = (thumbnail: ChipThumbnail | undefined) => {
-  if (!thumbnail || typeof thumbnail !== "string") return;
+  if (!thumbnail || typeof thumbnail !== 'string') return;
   if (thumbnail.length === 0) return <Avatar />;
   return <Avatar>{thumbnail.slice(0, 1).toLocaleUpperCase()}</Avatar>;
 };
 const getIcon = (thumbnail: ChipThumbnail | undefined) => {
-  if (thumbnail && typeof thumbnail !== "string") return thumbnail;
+  if (thumbnail && typeof thumbnail !== 'string') return thumbnail;
   return undefined;
 };
-const getLabelMargin = (
-  thumbnail: ChipThumbnail | undefined,
-  deletable?: boolean
-) => {
+const getLabelMargin = (thumbnail: ChipThumbnail | undefined, deletable?: boolean) => {
   return {
-    marginLeft: thumbnail ? "0px" : "8px",
-    marginRight: deletable ? "0px" : "8px",
+    marginLeft: thumbnail ? '0px' : '8px',
+    marginRight: deletable ? '0px' : '8px',
   };
 };
 
 const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
-  const { color = "primary", thumbnail, sx, variant, ...restProps } = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { color = 'primary', thumbnail, sx, variant, ...restProps } = props;
 
   return (
     <StyledContainedChipBase
@@ -76,7 +55,7 @@ const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
       icon={getIcon(thumbnail)}
       color={color}
       sx={{
-        "& .MuiChip-label": {
+        '& .MuiChip-label': {
           ...getLabelMargin(thumbnail),
         },
         ...sx,
@@ -86,15 +65,8 @@ const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
 };
 
 const EnableContainedChip = (props: EnableContainedChipProps) => {
-  const {
-    color = "primary",
-    thumbnail,
-    onDelete,
-    onClick,
-    sx,
-    variant,
-    ...restProps
-  } = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { color = 'primary', thumbnail, onClick, variant, ...restProps } = props;
 
   return (
     <StyledContainedChipEnable
@@ -104,7 +76,7 @@ const EnableContainedChip = (props: EnableContainedChipProps) => {
       icon={getIcon(thumbnail)}
       color={color}
       sx={{
-        "& .MuiChip-label": {
+        '& .MuiChip-label': {
           ...getLabelMargin(thumbnail),
         },
       }}
@@ -121,14 +93,8 @@ const DeleteIconWithHoverLayer = ({ onClick }: { onClick: () => void }) => {
   );
 };
 const DeletableContainedChip = (props: DeletableContainedChipProps) => {
-  const {
-    color = "primary",
-    thumbnail,
-    onDelete,
-    sx,
-    variant,
-    ...restProps
-  } = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { color = 'primary', thumbnail, onDelete, sx, variant, ...restProps } = props;
 
   return (
     <StyledContainedChipDeletable
@@ -139,7 +105,7 @@ const DeletableContainedChip = (props: DeletableContainedChipProps) => {
       avatar={getAvatar(thumbnail)}
       icon={getIcon(thumbnail)}
       sx={{
-        "& .MuiChip-label": {
+        '& .MuiChip-label': {
           ...getLabelMargin(thumbnail, Boolean(onDelete)),
         },
         ...sx,
@@ -148,4 +114,16 @@ const DeletableContainedChip = (props: DeletableContainedChipProps) => {
   );
 };
 
+const Chip: ChipType = (props: ChipProps) => {
+  const { kind, variant, onDelete, onClick, ...restProps } = props;
+
+  const isOutlined = kind === 'outlined' || variant === 'outlined';
+
+  if (isOutlined) return <OutlinedChip {...props} />;
+  if (onClick) return <EnableContainedChip {...props} />;
+  if (onDelete) return <DeletableContainedChip {...props} />;
+
+  return <ReadOnlyContainedChip {...restProps} />;
+};
+
 export default Chip;

package/src/components/Chip/Chip.types.ts

@@ -1,13 +1,13 @@
-import { CHIP_COLORS } from "./consts";
+import type React from 'react';
+import { CHIP_COLORS } from './consts';
 
-import type {
-  ChipProps as MuiChipProps,
-  ChipTypeMap as MuiChipTypeMap,
-} from "@mui/material";
-import type { OverridableComponent } from "@mui/material/OverridableComponent";
+import type { ChipProps as MuiChipProps, ChipTypeMap as MuiChipTypeMap } from '@mui/material';
+import type { OverridableComponent } from '@mui/material/OverridableComponent';
 
-type DesignSystemChipKind = "outlined" | "contained";
-type DesignSystemAndMuiContainedChipKind = "filled" | "contained";
+import type { JSX } from 'react';
+
+type DesignSystemChipKind = 'outlined' | 'contained';
+type DesignSystemAndMuiContainedChipKind = 'filled' | 'contained';
 type ColorKeys = keyof typeof CHIP_COLORS;
 export type ChipColor = (typeof CHIP_COLORS)[ColorKeys];
 export type ChipThumbnail = string | JSX.Element;
@@ -16,31 +16,25 @@ export type ChipThumbnail = string | JSX.Element;
  * Mui Chip's variant is 'kind' in our design system
  */
 export interface BaseChipProps
-  extends Pick<
-    MuiChipProps,
-    "label" | "sx" | "style" | "classes" | "onDelete"
-  > {
+  extends Pick<MuiChipProps, 'label' | 'sx' | 'style' | 'classes' | 'onDelete'> {
   // either kind or variant
   kind?: DesignSystemChipKind;
-  variant?: "outlined" | DesignSystemAndMuiContainedChipKind;
+  variant?: 'outlined' | DesignSystemAndMuiContainedChipKind;
   // mui variant = outlined | "filled" | undefined
   color?: ChipColor;
 }
 
 export interface OutlinedChipProps extends BaseChipProps {
-  kind?: "outlined";
-  variant?: "outlined";
+  kind?: 'outlined';
+  variant?: 'outlined';
   onClick?: never;
   onDelete?: never;
 }
 
 export interface BaseContainedChipProps
   extends BaseChipProps,
-    Omit<
-      MuiChipProps,
-      "color" | "size" | "avatar" | "deleteIcon" | "icon" | "variant"
-    > {
-  kind?: "contained";
+    Omit<MuiChipProps, 'color' | 'size' | 'avatar' | 'deleteIcon' | 'icon' | 'variant'> {
+  kind?: 'contained';
   variant?: DesignSystemAndMuiContainedChipKind;
   thumbnail?: ChipThumbnail;
   onClick?: () => void;
@@ -66,12 +60,12 @@ export type ContainedChipProps =
 
 export type ChipProps = OutlinedChipProps | ContainedChipProps;
 
-export type ChipTypeMap<
+export interface ChipTypeMap<
   P = {},
-  D extends React.ElementType = MuiChipTypeMap["defaultComponent"]
-> = {
+  D extends React.ElementType = MuiChipTypeMap['defaultComponent'],
+> {
   props: P & ChipProps;
   defaultComponent: D;
-};
+}
 
 export type ChipType = OverridableComponent<ChipTypeMap>;

package/src/components/Chip/consts.ts

@@ -1,7 +1,7 @@
 export const CHIP_COLORS = {
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  ERROR: "error",
-  WARNING: "warning",
-  SUCCESS: "success",
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  ERROR: 'error',
+  WARNING: 'warning',
+  SUCCESS: 'success',
 } as const;

package/src/components/Chip/index.ts

@@ -1 +1 @@
-export { default } from "./Chip";
+export { default } from './Chip';

package/src/components/DataTable/DataTable.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Box } from "@mui/material";
+import React from 'react';
+import { Box } from '@mui/material';
 
 const DataTable = () => {
   return <Box>DataTable</Box>;

package/src/components/DataTable/index.ts

@@ -1 +1 @@
-export { default } from "./DataTable";
+export { default } from './DataTable';

package/src/components/DatePicker/DatePicker.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Box } from "@mui/material";
+import React from 'react';
+import { Box } from '@mui/material';
 
 const DatePicker = () => {
   return <Box>DatePicker</Box>;

package/src/components/DatePicker/index.ts

@@ -1 +1 @@
-export { default } from "./DatePicker";
+export { default } from './DatePicker';