@lunit/oui 1.0.1-alpha.13 → 1.0.1-alpha.2

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,50 @@
+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

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

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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,29 @@
+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

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

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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,194 @@
+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

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +1,87 @@
+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,
+};

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { CloseSmall } from '../../icons';
+
+import { Box } from '@mui/material';
+import theme from '../../theme';
+import { Button } from '../Button';
+
+import {
+  StyledDialog,
+  StyledHeaderBox,
+  StyledDialogTitle,
+  StyledDialogContent,
+  StyledDialogActions,
+} from './Dialog.styled';
+import type { DialogProps } from './Dialog.types';
+
+function Dialog({
+  open,
+  title,
+  icon,
+  closable,
+  isPrompt,
+  cancelText,
+  submitText,
+  onClose,
+  text,
+  children,
+  dialogAction,
+  buttonSize = 'small',
+  loading = false,
+  disableSubmit = false,
+  sx,
+}: DialogProps) {
+  const handleClose = (event: object | null, reason: string) => {
+    if (onClose) {
+      onClose(event, reason);
+    }
+  };
+  const displayChildren = !text && !!children;
+
+  return (
+    <StyledDialog
+      open={open}
+      onClose={handleClose}
+      displayChildren={displayChildren}
+      isPrompt={isPrompt}
+      sx={sx}
+      className="customDialog"
+      PaperProps={{
+        className: 'dialogPaper',
+      }}
+    >
+      <StyledHeaderBox
+        isPrompt={isPrompt}
+        displayChildren={displayChildren}
+        className="dialogTitle"
+      >
+        <Box>
+          <StyledDialogTitle>
+            {icon && <div className="dialogIcon">{icon}</div>}
+            {title}
+          </StyledDialogTitle>
+        </Box>
+        {closable && (
+          <Button
+            size="small"
+            variant="ghost"
+            label=""
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onClick={(event: any) => handleClose(event, 'cancel')}
+            icon={<CloseSmall />}
+            sx={{ color: theme.palette.neutralGrey[0] }}
+          />
+        )}
+      </StyledHeaderBox>
+
+      {!displayChildren && <StyledDialogContent>{text}</StyledDialogContent>}
+      {displayChildren && (
+        <StyledDialogContent className="childrenDialog">{children}</StyledDialogContent>
+      )}
+
+      {dialogAction && <StyledDialogActions>{dialogAction}</StyledDialogActions>}
+
+      {!dialogAction && (cancelText || submitText) && (
+        <StyledDialogActions>
+          {cancelText && (
+            <Button
+              label={cancelText}
+              size={buttonSize}
+              variant="ghost"
+              onClick={() => handleClose(null, 'cancel')}
+            />
+          )}
+
+          {submitText && (
+            <Button
+              disabled={disableSubmit}
+              loading={loading}
+              label={submitText}
+              size={buttonSize}
+              sx={loading ? { width: '75px' } : null}
+              onClick={() => handleClose(null, 'submit')}
+            />
+          )}
+        </StyledDialogActions>
+      )}
+    </StyledDialog>
+  );
+}
+
+export default Dialog;

package/src/components/Dialog/Dialog.types.ts

@@ -0,0 +1,19 @@
+import type { SxProps } from '@mui/system';
+
+export interface DialogProps {
+  open: boolean;
+  title?: string;
+  icon?: React.ReactNode;
+  closable?: boolean;
+  isPrompt?: boolean;
+  cancelText?: string;
+  submitText?: string;
+  onClose?: (event: object | null, reason: string) => void;
+  text?: string;
+  children?: React.ReactNode;
+  dialogAction?: React.ReactNode;
+  buttonSize?: 'small' | 'medium' | 'large';
+  loading?: boolean;
+  disableSubmit?: boolean;
+  sx?: SxProps;
+}

package/src/components/Dialog/index.ts

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

package/src/components/Divider/Divider.styled.ts

@@ -0,0 +1,24 @@
+import { Divider } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import type { DividerProps } from './Divider.types';
+
+const BaseDivider = styled(Divider)<DividerProps>(({ theme, orientation }) => {
+  if (orientation === 'vertical') {
+    return {
+      background: theme.palette.neutralGrey[65],
+      border: 'none',
+      height: '100%',
+      outline: 'none',
+      width: '1px',
+    };
+  }
+  return {
+    background: theme.palette.neutralGrey[65],
+    border: 'none',
+    height: '1px',
+    outline: 'none',
+    width: '100%',
+  };
+});
+
+export default BaseDivider;

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import BaseDivider from './Divider.styled';
+import type { DividerProps } from './Divider.types';
+
+function Divider({ orientation = 'vertical', ...props }: DividerProps) {
+  return (
+    <BaseDivider
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+export default Divider;

package/src/components/Divider/Divider.types.ts

@@ -0,0 +1,7 @@
+import type { DividerProps as MuiDividerProps } from '@mui/material';
+
+interface DividerProps extends MuiDividerProps {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export type { DividerProps };

package/src/components/Divider/index.ts

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