@lunit/oui 1.0.1 → 1.1.0-alpha.2

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

@@ -1,120 +0,0 @@
-import { Chip as MUIChip } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import tinycolor from 'tinycolor2';
-import theme from '../../theme';
-import { ChipProps } from './Chip.types';
-
-const StyledChip = styled(MUIChip, {
-  shouldForwardProp: (prop) => prop !== 'disableRipple',
-})<ChipProps>(({ className }) => {
-  return {
-    height: '24px',
-
-    // Preset Colors
-    '&.presetDefault.MuiChip-colorDefault': {
-      backgroundColor: theme.palette.neutralGrey[70],
-      color: theme.palette.neutralGrey[25],
-    },
-
-    '&.presetUploaded': {
-      backgroundColor: theme.palette.analysisStatus.Uploaded,
-      color: theme.palette.lunitTeal[90],
-    },
-
-    '&.presetAnalyzing': {
-      backgroundColor: theme.palette.analysisStatus.Analyzing,
-      color: theme.palette.purple[80],
-    },
-
-    '&.presetAnalyzed': {
-      backgroundColor: theme.palette.analysisStatus.Analyzed,
-      color: theme.palette.green[50],
-    },
-
-    '&.presetFailed': {
-      color: theme.palette.neutralGrey[0],
-      backgroundColor: `${tinycolor(theme.palette.analysisStatus.FailedEnabled).setAlpha(0.5)}`,
-      border: `1px solid ${theme.palette.analysisStatus.FailedEnabled}`,
-
-      '&.MuiChip-clickable:hover': {
-        backgroundColor: `${tinycolor(theme.palette.analysisStatus.FailedHover).setAlpha(0.5)}`,
-        border: `1px solid ${theme.palette.analysisStatus.FailedHover}`,
-      },
-      '&.MuiChip-clickable:active': {
-        backgroundColor: theme.palette.analysisStatus.FailedSelected,
-        border: `1px solid ${theme.palette.analysisStatus.FailedSelected}`,
-      },
-    },
-
-    '&.presetReady': {
-      color: theme.palette.neutralGrey[0],
-      backgroundColor: `${tinycolor(theme.palette.analysisStatus.Ready).setAlpha(0.5)}`,
-      border: `1px solid ${theme.palette.analysisStatus.Ready}`,
-      '&.MuiChip-clickable:hover': {
-        backgroundColor: `${tinycolor(theme.palette.analysisStatus.ReadyHover).setAlpha(0.5)}`,
-        border: `1px solid ${theme.palette.analysisStatus.ReadyHover}`,
-      },
-      '&.MuiChip-clickable:active': {
-        backgroundColor: theme.palette.analysisStatus.ReadySelected,
-        border: `1px solid ${theme.palette.analysisStatus.ReadySelected}`,
-      },
-    },
-
-    '&.presetInferred': {
-      color: theme.palette.neutralGrey[0],
-      backgroundColor: `${tinycolor(theme.palette.analysisStatus.Inferred).setAlpha(0.5)}`,
-      border: `1px solid ${theme.palette.analysisStatus.Inferred}`,
-      '&.MuiChip-clickable:hover': {
-        backgroundColor: `${tinycolor(theme.palette.analysisStatus.InferredHover).setAlpha(0.5)}`,
-        border: `1px solid ${theme.palette.analysisStatus.InferredHover}`,
-      },
-      '&.MuiChip-clickable:active': {
-        backgroundColor: theme.palette.analysisStatus.InferredSelected,
-        border: `1px solid ${theme.palette.analysisStatus.InferredSelected}`,
-      },
-    },
-
-    '&.presetInvalid': {
-      color: theme.palette.neutralGrey[0],
-      backgroundColor: `${tinycolor(theme.palette.analysisStatus.Invalid).setAlpha(0.5)}`,
-      border: `1px solid ${tinycolor(theme.palette.analysisStatus.Invalid).setAlpha(0.5)}`,
-      '&.MuiChip-clickable:hover': {
-        backgroundColor: `${tinycolor(theme.palette.analysisStatus.InvalidHover).setAlpha(0.5)}`,
-        border: `1px solid ${theme.palette.neutralGrey[0]}`,
-      },
-      '&.MuiChip-clickable:active': {
-        backgroundColor: theme.palette.analysisStatus.InvalidSelected,
-        border: `1px solid ${theme.palette.neutralGrey[0]}`,
-      },
-    },
-
-    // Label Font
-    '.MuiChip-label': {
-      fontStyle: 'normal',
-      fontWeight: className === 'presetDefault' ? '400' : '500',
-      fontSize: '14px',
-      lineHeight: '20px',
-    },
-
-    // Icons position
-    '.MuiChip-icon': {
-      height: '18px',
-      marginRight: '-7px',
-      color: 'unset', // used default set by preset
-    },
-
-    '.MuiChip-deleteIcon': {
-      height: '18px',
-      width: '18px',
-      marginLeft: '-7px',
-      color: theme.palette.neutralGrey[0],
-      '&:hover': {
-        color: theme.palette.neutralGrey[0],
-        borderRadius: '50%',
-        backgroundColor: theme.palette.neutralGrey[90],
-      },
-    },
-  };
-});
-
-export default StyledChip;

package/src/components/Chip/Chip.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { CloseSmall } from '../../icons';
-import StyledChip from './Chip.styled';
-import type { ChipProps } from './Chip.types';
-import { presetMap } from './Chip.utils';
-
-function Chip({ preset, label, icon, onDelete, onClick, ...otherProps }: ChipProps) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const overwrittenProps: any = {
-    label,
-    icon,
-    onDelete,
-    onClick,
-  };
-  // Remove undefined properties
-  Object.keys(overwrittenProps).forEach((key) =>
-    overwrittenProps[key] === undefined ? delete overwrittenProps[key] : {},
-  );
-
-  const newPreset = preset?.includes('failed') ? 'failed' : preset;
-
-  const customProps = {
-    disableRipple: true,
-    deleteIcon: <CloseSmall />,
-    ...presetMap[newPreset || 'default'],
-    ...overwrittenProps,
-    ...otherProps,
-  };
-
-  return <StyledChip {...customProps} />;
-}
-
-export default Chip;

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

@@ -1,18 +0,0 @@
-import type { ChipProps as MuiChipProps } from '@mui/material';
-
-export type ChipsPreset =
-  | 'default'
-  | 'uploaded'
-  | 'analyzing'
-  | 'analyzed'
-  | 'analysis_failed'
-  | 'qc_failed'
-  | 'ready'
-  | 'inferred'
-  | 'inferencing'
-  | 'invalid';
-
-export interface ChipProps extends MuiChipProps {
-  preset?: ChipsPreset;
-  label?: string;
-}

package/src/components/Chip/Chip.utils.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { Error16, StartT2 } from '../../icons';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const presetMap: any = {
-  default: {
-    className: 'presetDefault',
-    label: 'label',
-    color: 'default',
-  },
-  uploaded: {
-    className: 'presetUploaded',
-    label: 'Uploaded',
-  },
-  analyzing: {
-    className: 'presetAnalyzing',
-    label: 'Analyzing',
-  },
-  analyzed: {
-    className: 'presetAnalyzed',
-    label: 'Analyzed',
-  },
-  failed: {
-    className: 'presetFailed',
-    label: 'Failed',
-    icon: <Error16 />,
-  },
-  ready: {
-    className: 'presetReady',
-    label: 'Ready',
-    icon: <StartT2 />,
-  },
-  inferred: {
-    className: 'presetInferred',
-    label: 'Inferred',
-    icon: <StartT2 />,
-  },
-  inferencing: {
-    className: 'presetAnalyzing',
-    label: 'Analyzing',
-  },
-  invalid: {
-    className: 'presetInvalid',
-    label: 'Invalid',
-    icon: <Error16 />,
-  },
-};
-
-// eslint-disable-next-line import/prefer-default-export
-export { presetMap };

package/src/components/Chip/index.ts

@@ -1,4 +0,0 @@
-import Chip from './Chip';
-import type { ChipProps, ChipsPreset } from './Chip.types';
-
-export { Chip, ChipProps, ChipsPreset };

package/src/components/DataTable/DataTable.styled.ts

@@ -1,66 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-const DataGridContainer = styled('div')(({ theme }) => ({
-  height: '100%',
-  width: '100%',
-  '.MuiDataGrid-root': {
-    border: 'none',
-    overflowY: 'hidden',
-    borderRadius: 0,
-    '.MuiDataGrid-withBorderColor': {
-      borderColor: theme.palette.neutralGrey[80],
-    },
-    '.MuiDataGrid-withBorder': {
-      borderRight: `1px solid ${theme.palette.neutralGrey[80]}`,
-      padding: theme.spacing(0, 2),
-      height: '40px',
-      '&:last-child': { borderRight: 'none' },
-    },
-    '.MuiDataGrid-row': {
-      '&:last-child .MuiDataGrid-cell': {
-        borderBottom: `1px solid ${theme.palette.neutralGrey[80]}`,
-      },
-      '.MuiDataGrid-cellCheckbox': {
-        borderRight: 0,
-      },
-      '&:hover': { backgroundColor: theme.palette.others.RowHover },
-      '&.Mui-selected': {
-        backgroundColor: theme.palette.others.RowHover,
-        border: 'transparent',
-        '&:hover': { backgroundColor: theme.palette.others.RowHover },
-      },
-      '& .hover-shown': { opacity: 0 },
-      '&:hover .hover-shown, & .hover-shown.menu-active': { opacity: 1 },
-    },
-    '.MuiDataGrid-cell': {
-      ...theme.typography.body5,
-      borderBottom: `1px solid ${theme.palette.neutralGrey[80]}`,
-      padding: theme.spacing(0, 2),
-      '&:focus, &:focus-within, &:focus-visible': { outline: 'none' },
-    },
-    '.MuiDataGrid-columnSeparator': { position: 'relative' },
-    '.MuiDataGrid-iconSeparator': { display: 'none' },
-    '.MuiDataGrid-columnHeader': {
-      '&:focus': { outline: 'none' },
-    },
-    '.MuiDataGrid-columnHeaderTitleContainer': {
-      padding: 0,
-      '&:focus': { outline: 'none' },
-    },
-  },
-  '.MuiDataGrid-columnHeaders': {
-    borderTop: `1px solid ${theme.palette.neutralGrey[80]}`,
-    borderBottom: `1px solid ${theme.palette.neutralGrey[80]}`,
-    borderRadius: 0,
-    '&:focus': { outline: 'none' },
-    '.MuiDataGrid-columnHeaderCheckbox': {
-      borderRight: 0,
-    },
-  },
-  '.MuiDataGrid-columnHeaderTitle': {
-    ...theme.typography.body_b1,
-    color: theme.palette.neutralGrey[40],
-  },
-}));
-
-export default DataGridContainer;

package/src/components/DataTable/DataTable.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { DataGrid } from '@mui/x-data-grid';
-import { DataGridProps } from '@mui/x-data-grid';
-import DataGridContainer from './DataTable.styled';
-import { Checkbox } from '../Checkbox';
-
-function DataTable({ rows, columns, ...otherProps }: DataGridProps) {
-  return (
-    <DataGridContainer>
-      <DataGrid
-        rows={rows}
-        columns={columns}
-        columnHeaderHeight={40}
-        rowHeight={40}
-        showColumnVerticalBorder
-        showCellVerticalBorder
-        disableColumnMenu
-        hideFooter
-        slots={{
-          noRowsOverlay: () => <div />,
-          baseCheckbox: Checkbox,
-        }}
-        {...otherProps}
-      />
-    </DataGridContainer>
-  );
-}
-
-export default DataTable;

package/src/components/DataTable/index.ts

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

package/src/components/DatePicker/DatePicker.styled.ts

@@ -1,19 +0,0 @@
-import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
-import { styled } from '@mui/material/styles';
-
-const StyledDatePicker = styled(DesktopDatePicker)(({ theme }) => ({
-  '.MuiInputBase-root': {
-    height: '36px',
-    backgroundColor: theme.palette.neutralGrey[75],
-
-    '&:hover fieldset': {
-      borderColor: theme.palette.neutralGrey[45],
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: theme.palette.lunitTeal[10],
-      borderWidth: '1px',
-    },
-  },
-}));
-
-export { StyledDatePicker };

package/src/components/DatePicker/DatePicker.tsx

@@ -1,194 +0,0 @@
-import React from 'react';
-import { useState, useMemo, useEffect } from 'react';
-import { CloseSmall, ArrowLeft, ArrowRight } from '../../icons';
-
-import { StyledDatePicker } from './DatePicker.styled';
-import type { DatePickerProps } from './DatePicker.types';
-import { Button } from '../Button';
-
-import theme from '../../theme';
-
-function DatePicker({ alignment, placeholder, onChange, value, ...props }: DatePickerProps) {
-  const [open, setOpen] = useState<boolean>(false);
-  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-
-  const { slots, slotProps, ...otherProps } = props;
-
-  const handleFieldClick = () => {
-    setOpen(true);
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleChange = (date: Date | null, context: any) => {
-    setSelectedDate(date);
-    if (onChange) onChange(date, context);
-    setOpen(false);
-  };
-
-  const handleFieldClearClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    handleChange(null, null);
-  };
-
-  const popperPlacement = useMemo(() => {
-    switch (alignment) {
-      case 'left':
-        return 'bottom-start';
-      case 'right':
-        return 'bottom-end';
-      default:
-        return 'bottom';
-    }
-  }, [alignment]);
-
-  useEffect(() => {
-    if (value === null && selectedDate !== null) {
-      setSelectedDate(null);
-    }
-    if (value !== null && selectedDate === null) {
-      setSelectedDate(value!);
-    }
-  }, [value, selectedDate, setSelectedDate]);
-
-  const canUseToday = useMemo(() => {
-    const today = new Date();
-    if (props.minDate && today < props.minDate) return false;
-    if (props.maxDate && today > props.maxDate) return false;
-    return true;
-  }, [props.minDate, props.maxDate]);
-
-  return (
-    <StyledDatePicker
-      open={open}
-      value={selectedDate}
-      onChange={handleChange}
-      // onOpen={() => setOpen(true)}
-      onClose={() => setOpen(false)}
-      views={['year', 'month', 'day']}
-      slots={{
-        inputAdornment: () => {
-          if (selectedDate) {
-            return (
-              <Button
-                variant="ghost"
-                color="secondary"
-                size="small"
-                icon={<CloseSmall />}
-                sx={{
-                  color: theme.palette.neutralGrey[0],
-                  borderColor: 'transparent !important',
-                }}
-                onClick={handleFieldClearClick}
-              />
-            );
-          }
-          return null;
-        },
-        leftArrowIcon: ArrowLeft,
-        rightArrowIcon: ArrowRight,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ...(slots as any),
-      }}
-      slotProps={{
-        switchViewButton: {
-          sx: {
-            display: 'none',
-          },
-        },
-        textField: {
-          variant: 'outlined',
-          onClick: handleFieldClick,
-          InputProps: {
-            placeholder: placeholder || 'mm/dd/yyyy',
-            sx: {
-              borderRadius: '8px',
-              // According to designer, the width of the date picker should be enforced at 320px
-              // when the placement is bottom. that is why we have !important here.
-              width: popperPlacement === 'bottom' ? '320px !important' : 'auto',
-              borderColor: 'red',
-              ...theme.typography.body5,
-
-              '& input': {
-                textTransform: 'lowercase',
-              },
-              '& ::placeholder': {
-                textTransform: 'none',
-              },
-            },
-            onMouseDown: (e: React.MouseEvent<HTMLInputElement>) => {
-              const element = e.target as HTMLElement;
-              if (element.tagName === 'INPUT') {
-                e.preventDefault();
-              }
-            },
-          },
-        },
-        popper: {
-          placement: popperPlacement,
-          modifiers: [
-            {
-              name: 'offset',
-              enabled: true,
-              options: {
-                offset: [0, 8],
-              },
-            },
-          ],
-          sx: {
-            '& .MuiPickersDay-today': {
-              border: `1px solid ${theme.palette.neutralGrey[0]} !important`,
-              borderRadius: '50%',
-            },
-
-            '& .MuiPickersDay-root:hover': {
-              border: `1px solid ${theme.palette.neutralGrey[0]}`,
-              borderRadius: '50%',
-            },
-
-            '& .MuiPickersDay-root.Mui-selected': {
-              backgroundColor: `${theme.palette.lunitTeal[40]} !important`,
-              color: `${theme.palette.neutralGrey[97]} !important`,
-            },
-          },
-        },
-        desktopPaper: {
-          sx: {
-            background: theme.palette.neutralGrey[70],
-          },
-        },
-        previousIconButton: {
-          sx: {
-            color: theme.palette.neutralGrey[0],
-          },
-        },
-        nextIconButton: {
-          sx: {
-            color: theme.palette.neutralGrey[0],
-          },
-        },
-        actionBar: {
-          actions: ['today'],
-          sx: {
-            '& button': {
-              color: `${theme.palette.lunitTeal[40]} !important`,
-              textTransform: 'capitalize',
-              pointerEvents: canUseToday ? 'auto' : 'none',
-              opacity: canUseToday ? 1 : 0.4,
-            },
-          },
-        },
-        day: {
-          sx: {
-            backgroundColor: 'transparent !important',
-          },
-        },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ...(slotProps as any),
-      }}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      {...(otherProps as any)}
-    />
-  );
-}
-
-export default DatePicker;

package/src/components/DatePicker/DatePicker.types.ts

@@ -1,8 +0,0 @@
-import type { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
-
-export type DatePickerAlignment = 'left' | 'center' | 'right';
-
-export interface DatePickerProps extends MuiDatePickerProps<Date> {
-  alignment?: DatePickerAlignment;
-  placeholder?: string;
-}

package/src/components/DatePicker/index.ts

@@ -1,4 +0,0 @@
-import DatePicker from './DatePicker';
-import type { DatePickerProps } from './DatePicker.types';
-
-export { DatePicker, DatePickerProps };

package/src/components/Dialog/Dialog.styled.ts

@@ -1,87 +0,0 @@
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
-import type { DialogProps } from './Dialog.types';
-
-interface StyledDialogProps extends DialogProps {
-  displayChildren: boolean;
-  isPrompt?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  sx?: any;
-}
-
-interface StyledDialogTitleProps {
-  displayChildren: boolean;
-  isPrompt?: boolean;
-}
-
-const StyledDialog = styled(Dialog, {
-  shouldForwardProp: (prop) => prop !== 'displayChildren' && prop !== 'isPrompt',
-})<StyledDialogProps>(({ theme, displayChildren, isPrompt, sx }) => {
-  return {
-    '& .MuiDialog-paper': {
-      backgroundColor: theme.palette.neutralGrey[90],
-      width: displayChildren && !isPrompt ? 'auto' : '320px',
-      maxWidth: displayChildren && !isPrompt ? 'none' : '320px',
-      borderRadius: '8px',
-      padding: '28px 20px 24px 20px',
-    },
-    ...sx,
-  };
-});
-
-const StyledHeaderBox = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'displayChildren' && prop !== 'isPrompt',
-})<StyledDialogTitleProps>(({ displayChildren, isPrompt }) => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  height: '24px',
-  marginBottom: displayChildren && !isPrompt ? '32px' : '16px',
-}));
-
-const StyledTitle = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
-  ...theme.typography.body_sb1,
-  padding: 0,
-  display: 'flex',
-  '& .dialogIcon': {
-    display: 'flex',
-    marginRight: '8px',
-  },
-}));
-
-const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
-  ...theme.typography.body5,
-  marginBottom: '16px',
-  padding: 0,
-  whiteSpace: 'pre-line',
-
-  '&.childrenDialog': {
-    display: 'flex',
-    borderTop: 0,
-    borderBottom: 0,
-    maxHeight: 'fit-content',
-  },
-}));
-
-const StyledDialogActions = styled(DialogActions)(() => ({
-  padding: 0,
-  margin: '0 12px',
-}));
-
-export {
-  StyledDialog,
-  StyledHeaderBox,
-  StyledTitle,
-  StyledDialogTitle,
-  StyledDialogContent,
-  StyledDialogActions,
-};