@lunit/oui 1.0.1 → 1.1.0-alpha.1

package/src/components/Checkbox/Checkbox.utils.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/material';
-import { iconStyle } from './Checkbox.styled';
-
-export const UncheckedIcon = () => {
-  return (
-    <Box
-      component="span"
-      className="checkbox-icon"
-      sx={{
-        ...iconStyle,
-        background: `url("data:image/svg+xml,%0A%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%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' fill='%2399999B'/%3E%3C/svg%3E%0A")`,
-      }}
-    />
-  );
-};
-
-export const CheckedIcon = () => {
-  return (
-    <Box
-      component="span"
-      className="checkbox-icon"
-      sx={{
-        ...iconStyle,
-        background: `url("data:image/svg+xml,%0A%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%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' fill='%2300C9EA'/%3E%3C/svg%3E%0A")`,
-      }}
-    />
-  );
-};
-
-export const IndeterminateIcon = () => {
-  return (
-    <Box
-      component="span"
-      className="checkbox-icon"
-      sx={{
-        ...iconStyle,
-        background: `url("data:image/svg+xml,%0A%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='4' fill='%2300C9EA'/%3E%3Cpath d='M3 9C3 8.44772 3.44772 8 4 8H14C14.5523 8 15 8.44772 15 9V9C15 9.55228 14.5523 10 14 10H4C3.44772 10 3 9.55228 3 9V9Z' fill='white'/%3E%3C/svg%3E%0A")`,
-      }}
-    />
-  );
-};

package/src/components/Checkbox/index.ts

@@ -1,5 +0,0 @@
-import Checkbox from './Checkbox';
-import type { CheckboxProps } from './Checkbox.types';
-
-export { Checkbox };
-export type { CheckboxProps };

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 };