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

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,67 @@
+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: 1,
+  "&.Mui-disabled": {
+    opacity: 0.38,
+  },
+  "&.Mui-focusVisible:after": {
+    content: '""',
+    position: "absolute",
+    width: 24,
+    height: 24,
+    border: `1px solid ${theme.palette.token.core.focused}`,
+    borderRadius: "7px",
+  },
+}));
+
+const iconSize = {
+  width: 18,
+  height: 18,
+};
+
+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 18 18'%3E%3Cpath" +
+    " fill-rule='evenodd' clip-rule='evenodd' d='M14 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V14C1.5 15.3807 2.61929 16.5 4 16.5H14C15.3807 " +
+    "16.5 16.5 15.3807 16.5 14V4C16.5 2.61929 15.3807 1.5 14 1.5ZM4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 14 0H4Z' /%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 18 18'%3E%3Cpath" +
+    " fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 14 0H4ZM14.2516 " +
+    "7.14413C14.6074 6.72168 14.5533 6.09083 14.1309 5.73508C13.7084 5.37933 13.0776 5.43341 12.7218 5.85586L8.31824 11.0851L5.14993 8.37556C4.7302 8.01661 4.09895 8.06588 3.74 8.48561C3.38105 8.90533 3.43032 9.53658 3.85005 9.89553L7.78416 13.26C7.98672 13.4332 8.25006 13.5184 8.51571 13.4967C8.78135 13.4749 9.02732 13.348 9.19901 13.1441L14.2516 7.14413Z' /%3E%3C/svg%3E\")",
+}));
+
+const IndeterminateIcon = 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 18 18'%3E%3Cpath" +
+    " fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 " +
+    "14 0H4ZM4 8C3.44772 8 3 8.44771 3 9C3 9.5523 3.44771 10 4 10H14C14.5523 10 15 9.5523 15 9C15 8.44772 14.5523 8 14 8H4Z' /%3E%3C/svg%3E\")",
+}));
+
+const Checkbox = (props: CheckboxProps) => {
+  return (
+    <CustomCheckbox
+      disableRipple
+      icon={<DefaultIcon />}
+      checkedIcon={<CheckedIcon />}
+      indeterminateIcon={<IndeterminateIcon />}
+      {...props}
+    />
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/index.ts

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

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

@@ -0,0 +1,164 @@
+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,
+  EnableContainedChipProps,
+} from "./Chip.types";
+
+const COMMON_STYLES = {
+  "&.MuiChip-root": {
+    height: "22px",
+    width: "auto",
+    minWidth: "22px",
+    boxShadow: "none",
+  },
+  "&.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()),
+})<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.
+   */
+  "&.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
+)<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.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/Close16";
+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 } 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;