@lunit/design-system 1.0.0-a.1 → 1.0.0-a.2

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

@@ -0,0 +1,162 @@
+import { Chip as MuiChip, styled } from "@mui/material";
+import { CHIP_COLORS } from "./consts";
+
+import type { Theme } from "@mui/material/styles";
+import type {
+  ChipColor,
+  OutlinedChipProps,
+  BaseContainedChipProps,
+} from "./Chip.types";
+
+const COMMON_STYLES = {
+  "&.MuiChip-root": {
+    height: "22px",
+    width: "auto",
+    minWidth: "22px",
+  },
+  "&.Mui-disabled": {
+    opacity: 1,
+  },
+  "& .MuiChip-label": {
+    display: "flex",
+    alignItems: "center",
+    textAlign: "center",
+    padding: 0,
+    marginInline: "8px",
+  },
+};
+
+const getColorToken = (
+  token: "text" | "bg",
+  theme: Theme,
+  color?: ChipColor
+) => {
+  if (token === "text") {
+    switch (color) {
+      case CHIP_COLORS.PRIMARY:
+        return theme.palette.token.component.chip_primary_text;
+      case CHIP_COLORS.SECONDARY:
+        return theme.palette.token.component.chip_secondary_text;
+      case CHIP_COLORS.ERROR:
+        return theme.palette.token.component.chip_error_text;
+      case CHIP_COLORS.WARNING:
+        return theme.palette.token.component.chip_warning_text;
+      case CHIP_COLORS.SUCCESS:
+        return theme.palette.token.component.chip_success_text;
+      default:
+        return theme.palette.token.component.chip_primary_text;
+    }
+  } else {
+    switch (color) {
+      case CHIP_COLORS.PRIMARY:
+        return theme.palette.token.component.chip_primary_bg;
+      case CHIP_COLORS.SECONDARY:
+        return theme.palette.token.component.chip_secondary_bg;
+      case CHIP_COLORS.ERROR:
+        return theme.palette.token.component.chip_error_bg;
+      case CHIP_COLORS.WARNING:
+        return theme.palette.token.component.chip_warning_bg;
+      case CHIP_COLORS.SUCCESS:
+        return theme.palette.token.component.chip_success_bg;
+      default:
+        return theme.palette.token.component.chip_primary_bg;
+    }
+  }
+};
+
+export const StyledOutlinedChip = styled(MuiChip, {
+  shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
+})<OutlinedChipProps>(({ theme, color }) => ({
+  ...COMMON_STYLES,
+  ...theme.typography.caption,
+
+  color: getColorToken("text", theme, color),
+  borderColor: getColorToken("text", theme, color),
+}));
+
+export const StyledContainedChipBase = styled(MuiChip, {
+  shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
+})<BaseContainedChipProps>(() => ({ theme, color }) => ({
+  ...COMMON_STYLES,
+  ...theme.typography.caption,
+
+  color: theme.palette.token.core.text_normal,
+  backgroundColor: getColorToken("bg", 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",
+    fontWeight: 500,
+    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()),
+})<BaseContainedChipProps>(() => ({ 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.
+   */
+  "&.MuiChip-root": {
+    position: "relative",
+    left: 0,
+    right: 0,
+    zIndex: 0,
+  },
+  "&:hover": {
+    backgroundColor: getColorToken("bg", theme, color),
+  },
+  "&.MuiChip-root:hover::before": {
+    position: "absolute",
+    zIndex: -1,
+    content: '""',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: theme.palette.token.core.hover,
+    borderRadius: "11px",
+  },
+}));
+
+export const StyledContainedChipDeletable = styled(StyledContainedChipBase, {
+  shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
+})<BaseContainedChipProps>(() => ({ theme, color }) => ({
+  "& .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.token.core.hover,
+    ":hover": {
+      cursor: "pointer",
+      opacity: 1,
+    },
+  },
+}));

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { Avatar } from "@mui/material";
+import { Close16 } from "@lunit/design-system-icons";
+import {
+  StyledOutlinedChip,
+  StyledContainedChipBase,
+  StyledContainedChipEnable,
+  StyledContainedChipDeletable,
+} from "./Chip.styled";
+
+import type {
+  OutlinedChipProps,
+  ReadOnlyContainedChipProps,
+  EnableContainedChipProps,
+  DeletableContainedChipProps,
+  ChipProps,
+  ChipThumbnail,
+} from "./Chip.types";
+
+const Chip = (props: ChipProps) => {
+  const { kind, onDelete, onClick, ...restProps } = props;
+  if (kind === "outlined") return <OutlinedChip {...props} />;
+  else if (onClick) return <EnableContainedChip {...props} />;
+  else if (onDelete) return <DeletableContainedChip {...props} />;
+
+  return <ReadOnlyContainedChip {...restProps} />;
+};
+
+const OutlinedChip = (props: OutlinedChipProps) => {
+  const { color = "primary", ...restProps } = props;
+
+  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.length === 0) return <Avatar />;
+  return <Avatar>{thumbnail.slice(0, 1).toLocaleUpperCase()}</Avatar>;
+};
+const getIcon = (thumbnail: ChipThumbnail | undefined) => {
+  if (thumbnail && typeof thumbnail !== "string") return thumbnail;
+  return undefined;
+};
+const getLabelMargin = (
+  thumbnail: ChipThumbnail | undefined,
+  deletable?: boolean
+) => {
+  return {
+    marginLeft: thumbnail ? "0px" : "8px",
+    marginRight: deletable ? "0px" : "8px",
+  };
+};
+
+const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
+  const { color = "primary", thumbnail, sx, ...restProps } = props;
+
+  return (
+    <StyledContainedChipBase
+      {...restProps}
+      disabled
+      avatar={getAvatar(thumbnail)}
+      icon={getIcon(thumbnail)}
+      color={color}
+      sx={{
+        "& .MuiChip-label": {
+          ...getLabelMargin(thumbnail),
+        },
+        ...sx,
+      }}
+    />
+  );
+};
+
+const EnableContainedChip = (props: EnableContainedChipProps) => {
+  const { color = "primary", thumbnail, onClick, sx, ...restProps } = props;
+
+  return (
+    <StyledContainedChipEnable
+      {...restProps}
+      onClick={onClick}
+      avatar={getAvatar(thumbnail)}
+      icon={getIcon(thumbnail)}
+      color={color}
+      sx={{
+        "& .MuiChip-label": {
+          ...getLabelMargin(thumbnail),
+        },
+      }}
+    />
+  );
+};
+
+const DeleteIconWithHoverLayer = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <>
+      <Close16 />
+      <Close16 className="delete-icon-hover-layer" onClick={onClick} />
+    </>
+  );
+};
+const DeletableContainedChip = (props: DeletableContainedChipProps) => {
+  const { color = "primary", thumbnail, onDelete, sx, ...restProps } = props;
+
+  return (
+    <StyledContainedChipDeletable
+      {...restProps}
+      color={color}
+      onDelete={onDelete}
+      deleteIcon={<DeleteIconWithHoverLayer onClick={onDelete} />}
+      avatar={getAvatar(thumbnail)}
+      icon={getIcon(thumbnail)}
+      sx={{
+        "& .MuiChip-label": {
+          ...getLabelMargin(thumbnail, Boolean(onDelete)),
+        },
+        ...sx,
+      }}
+    />
+  );
+};
+
+export default Chip;

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

@@ -0,0 +1,56 @@
+import { CHIP_COLORS } from "./consts";
+
+import type { ChipProps as MuiChipProps, SxProps } from "@mui/material";
+
+type ColorKeys = keyof typeof CHIP_COLORS;
+export type ChipColor = typeof CHIP_COLORS[ColorKeys];
+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"
+  > {
+  kind?: "outlined" | "contained";
+  color?: ChipColor;
+}
+
+export interface OutlinedChipProps extends BaseChipProps {
+  kind?: "outlined";
+  onClick?: never;
+  onDelete?: never;
+}
+
+export interface BaseContainedChipProps
+  extends BaseChipProps,
+    Omit<
+      MuiChipProps,
+      "color" | "size" | "variant" | "avatar" | "deleteIcon" | "icon"
+    > {
+  kind?: "contained";
+  thumbnail?: ChipThumbnail;
+  onClick?: () => void;
+}
+
+export interface ReadOnlyContainedChipProps extends BaseContainedChipProps {
+  onClick?: never;
+  onDelete?: never;
+}
+export interface EnableContainedChipProps extends BaseContainedChipProps {
+  onClick: () => void;
+  onDelete?: never;
+}
+export interface DeletableContainedChipProps extends BaseContainedChipProps {
+  onClick?: never;
+  onDelete: () => void;
+}
+
+export type ContainedChipProps =
+  | EnableContainedChipProps
+  | ReadOnlyContainedChipProps
+  | DeletableContainedChipProps;
+
+export type ChipProps = OutlinedChipProps | ContainedChipProps;

package/src/components/Chip/consts.ts

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

package/src/components/Chip/index.ts

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

package/src/components/DataTable/DataTable.tsx

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

package/src/components/DataTable/index.ts

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

package/src/components/DatePicker/DatePicker.tsx

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

package/src/components/DatePicker/index.ts

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

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { Box } from '@mui/material'
+
+const Dropdown = () => {
+    return (
+        <Box>Dropdown</Box>
+    )
+}
+
+export default Dropdown

package/src/components/Dropdown/index.ts

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

package/src/components/FormLabel/FormLabel.styled.ts

@@ -0,0 +1,8 @@
+import { FormControlLabel, styled } from "@mui/material";
+
+export const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+  marginLeft: 0,
+  '& .MuiTypography-root': {
+    marginLeft: theme.spacing(2),
+  }
+}))

package/src/components/FormLabel/FormLabel.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { FormControlLabelProps } from "@mui/material";
+import { StyledFormControlLabel } from "./FormLabel.styled";
+
+const FormLabel = (props: FormControlLabelProps) => {
+  return <StyledFormControlLabel {...props} />;
+};
+
+export default FormLabel;

package/src/components/FormLabel/index.ts

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

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Box } from "@mui/material";
+
+const Modal = () => {
+  return <Box>Modal</Box>;
+};
+
+export default Modal;

package/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from "./Modal";

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import MuiRadio, { RadioProps } from "@mui/material/Radio";
+
+const CustomRadio = styled(MuiRadio)(({ theme }) => ({
+  padding: 0,
+  "&.Mui-disabled": {
+    opacity: 0.38,
+  },
+  "&.Mui-focusVisible:after": {
+    content: '""',
+    position: "absolute",
+    display: "block",
+    width: 24,
+    height: 24,
+    backgroundColor: theme.palette.token.core.focused,
+    maskImage:
+      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath" +
+      " fill-rule='evenodd' clip-rule='evenodd' d='M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 " +
+      "5.37258 0 12C0 18.6274 5.37258 24 12 24Z' /%3E%3C/svg%3E\")",
+  },
+}));
+
+const iconSize = {
+  width: 20,
+  height: 20,
+};
+
+const DefaultIcon = styled("span")(({ theme }) => ({
+  ...iconSize,
+  backgroundColor: theme.palette.token.component.selectcontrol_off,
+  maskImage:
+    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
+    " fill-rule='evenodd' clip-rule='evenodd' d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 " +
+    "10 17.5ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z' /%3E%3C/svg%3E\")",
+}));
+
+const CheckedIcon = styled("span")(({ theme }) => ({
+  ...iconSize,
+  backgroundColor: theme.palette.token.component.selectcontrol_on,
+  maskImage:
+    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
+    " fill-rule='evenodd' clip-rule='evenodd' d='M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5" +
+    " 7.23858 5 10C5 12.7614 7.23858 15 10 15ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z' /%3E%3C/svg%3E\")",
+}));
+
+const Radio = (props: RadioProps) => {
+  return (
+    <CustomRadio
+      disableRipple
+      icon={<DefaultIcon />}
+      checkedIcon={<CheckedIcon />}
+      {...props}
+    />
+  );
+};
+
+export default Radio;

package/src/components/Radio/index.ts

@@ -0,0 +1 @@
+export { default } from "./Radio";

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,2 @@
+import RadioGroup from "@mui/material/RadioGroup";
+export default RadioGroup;

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Box } from "@mui/material";
+
+const TextField = () => {
+  return <Box>TextField</Box>;
+};
+
+export default TextField;

package/src/components/TextField/index.ts

@@ -0,0 +1 @@
+export { default } from "./TextField";

package/src/components/Toggle/Toggle.styled.ts

@@ -0,0 +1,162 @@
+import { styled, Switch as MuiSwitch, SwitchProps } from "@mui/material";
+interface ToggleProps extends SwitchProps {
+  toggleSize: 'medium' | 'large'
+}
+
+const toggleStyles = {
+  medium: {
+    root: {
+      width: 28,
+      height: 18,
+      borderRadius: 9,
+    },
+    focus: {
+      width: 34,
+      height: 24,
+      borderRadius: 12,
+    },
+    switch: {
+      transition: "all 100ms ease-in-out",
+    },
+    switchChecked: {
+      transform: 'translateX(10px)',
+    },
+    thumb: {
+        width: 14,
+        height: 14,
+    }
+  },
+  large: {
+    root:{
+      width: 44,
+      height: 24,
+      borderRadius: 12,
+    },
+    focus: {
+      width: 50,
+      height: 30,
+      borderRadius: 14,
+    },
+    switch: {
+      transition: "all 150ms ease-in-out",
+    },
+    switchChecked: {
+      transform: 'translateX(20px)',
+    },
+    thumb: {
+      width: 20,
+      height: 20,
+    },
+  },
+}
+
+const indeterminateStyles = {
+  large: {
+    switchChecked: {
+        top: 8,
+        left: -8,
+    },
+    track: {
+      borderRadius: 12,
+    },
+    thumb: {
+      height: 4,
+      width: 16,
+      borderRadius: 2,
+    },
+  },
+  medium: {
+    switchChecked: {
+        top: 6,
+        left: -4,
+    },
+    track: {
+      borderRadius: 12,
+    },
+    thumb: {
+      height: 2,
+      width: 12,
+      borderRadius: 2,
+    },
+  }
+}
+
+export const CommonToggle = styled(MuiSwitch, {
+  shouldForwardProp: (props) => props !== 'toggleSize',
+})<ToggleProps>(({ theme, toggleSize, disabled }) => {
+  const checkedColor = theme.palette.token.component.selectcontrol_on;
+  const uncheckedColor = theme.palette.token.component.selectcontrol_off;
+  const handlerColor = theme.palette.token.component.selectcontrol_handler;
+
+  const toggleStyle = toggleStyles[toggleSize];
+  const toggleOpacity = disabled ? 0.38 : 1;
+
+  return {
+    ...toggleStyle.root,
+    display: 'flex',
+    padding: 0,
+    overflow: "visible",
+    backgroundColor: "transparent",
+    opacity: toggleOpacity,
+    "& .Mui-focusVisible": {
+       // clear default focus style
+      boxShadow: "none",
+      background: "transparent",
+      borderColor: "transparent",
+      outline: "none",
+      "& + .MuiSwitch-track::after": {
+        ...toggleStyle.focus,
+        content: '""',
+        position: "absolute",
+        border: `1px solid ${checkedColor}`,
+        boxSizing: "border-box",
+        top: -3, // border 1px + offset 2px
+        left: -3, // border 1px + offset 2px
+      }
+    },
+    '& .MuiSwitch-track': {
+      opacity: 1,
+      borderRadius: 12,
+      backgroundColor: uncheckedColor,
+    },
+    '& .MuiSwitch-thumb': {
+      ...toggleStyle.thumb,
+      boxShadow: "0px 0px 1px rgba(0, 0, 0, 0.4)",
+    },
+    '& .MuiSwitch-switchBase': {
+      ...toggleStyle.switch,
+      padding: 2,
+      opacity: 1,
+      '&.Mui-checked': {
+        ...toggleStyle.switchChecked,
+        color: handlerColor,
+        '& + .MuiSwitch-track': {
+          opacity: 1,
+          backgroundColor: checkedColor,
+        },
+      },
+    },
+    '& .Mui-disabled + .MuiSwitch-track': {
+      opacity: 1,
+    },
+  }});
+
+export const CommonIndeterminateToggle = styled(CommonToggle, {
+  shouldForwardProp: (props) => props !== 'toggleSize',
+})(({ toggleSize }) => {
+  const indeterminateStyle = indeterminateStyles[toggleSize];
+
+  return {
+  padding: 0,
+  cursor: "pointer",
+  '& .MuiSwitch-switchBase.Mui-checked': {
+      ...indeterminateStyle.switchChecked,
+      '& + .MuiSwitch-track': {
+        ...indeterminateStyle.track,
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    ...indeterminateStyle.thumb,
+    boxShadow: "none",
+  },
+}});