@superdispatch/ui-lab 0.50.5 → 0.50.6

package/src/email-autocomplate/CloseIcon.tsx

@@ -1,20 +0,0 @@
-import { SvgIcon, SvgIconProps } from '@material-ui/core';
-import { Color } from '@superdispatch/ui';
-import { ReactElement } from 'react';
-
-export function CloseIcon(props: SvgIconProps): ReactElement {
-  return (
-    <SvgIcon
-      {...props}
-      viewBox="0 0 6 6"
-      style={{ width: '6px', height: '6px' }}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.72278 2.99999L5.91671 0.806074L5.19396 0.0833282L3.00004 2.27725L0.80612 0.0833282L0.083374 0.806076L2.27729 2.99999L0.083374 5.19391L0.80612 5.91666L3.00004 3.72274L5.19396 5.91666L5.91671 5.19392L3.72278 2.99999Z"
-        fill={Color.Dark100}
-      />
-    </SvgIcon>
-  );
-}

package/src/email-autocomplate/EmailAutocomplete.stories.tsx

@@ -1,47 +0,0 @@
-import { Meta } from '@storybook/react';
-import { UseState } from '@superdispatch/ui-docs';
-import { Box } from '@superdispatch/ui-lab';
-import { EmailAutocomplete } from './EmailAutocomplete';
-
-export default {
-  title: 'Inputs/EmailAutocomplete',
-  component: EmailAutocomplete,
-  decorators: [
-    (Story) => (
-      <Box maxWidth="400px">
-        <Story />
-      </Box>
-    ),
-  ],
-} as Meta;
-
-const options = [
-  'test@example.com',
-  'user@example.com',
-  'admin@example.com',
-  'test@mail.com,test2@mail.com',
-];
-
-export const basic = () => (
-  <UseState initialState={[]}>
-    {(state, setState) => (
-      <EmailAutocomplete options={options} value={state} onChange={setState} />
-    )}
-  </UseState>
-);
-
-export const textarea = () => (
-  <UseState initialState={[]}>
-    {(state, setState) => (
-      <EmailAutocomplete
-        options={options}
-        value={state}
-        onChange={setState}
-        TextFieldProps={{
-          multiline: true,
-          placeholder: 'Enter email addresses',
-        }}
-      />
-    )}
-  </UseState>
-);

package/src/email-autocomplate/EmailAutocomplete.tsx

@@ -1,138 +0,0 @@
-import {
-  IconButton,
-  TextField,
-  TextFieldProps as TextFieldPropsType,
-} from '@material-ui/core';
-import {
-  Autocomplete,
-  AutocompleteChangeReason,
-  AutocompleteProps,
-} from '@material-ui/lab';
-import { Inline, Tag } from '@superdispatch/ui';
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { TextBox } from '../text-box/TextBox';
-import { CloseIcon } from './CloseIcon';
-
-const MultipleFieldText = styled(TextField)`
-  /* Inline input next to tags rather than next line on focus */
-  & {
-    width: 100%;
-    margin-top: 8px;
-    overflow: hidden;
-  }
-
-  && .MuiAutocomplete-inputRoot {
-    flex-direction: column;
-    align-items: flex-start;
-    width: 100%;
-    gap: 8px;
-
-    & .MuiAutocomplete-input {
-      width: 100%;
-    }
-  }
-`;
-
-export interface EmailAutocompleteProps
-  extends Omit<
-    AutocompleteProps<string, true, true, true>,
-    'onChange' | 'renderInput' | 'renderTags'
-  > {
-  options: string[];
-  TextFieldProps?: Omit<TextFieldPropsType, 'onChange' | 'onBlur'>;
-
-  onAdd?: (value: string) => void;
-  onRemove?: (value: string) => void;
-  onChange?: (
-    value: string[] | undefined,
-    reason: AutocompleteChangeReason,
-  ) => void;
-}
-
-export const EmailAutocomplete = forwardRef<
-  HTMLDivElement,
-  Omit<EmailAutocompleteProps, 'ref'>
->(({ value, onChange, TextFieldProps, ...props }, ref) => {
-  function handleDelete(index: number): void {
-    const filteredOrders = value?.filter(
-      (_item, fieldIndex) => fieldIndex !== index,
-    );
-    void onChange?.(filteredOrders, 'remove-option');
-  }
-
-  return (
-    <Autocomplete
-      {...props}
-      ref={ref}
-      multiple={true}
-      freeSolo={true}
-      value={value}
-      disableClearable={true}
-      filterSelectedOptions={true}
-      filterOptions={(filterOptions) => {
-        return filterOptions.filter((option) => option !== '');
-      }}
-      onChange={(_event, selectedValue, reason) => {
-        const emails = selectedValue
-          .flatMap((item) => item.split(','))
-          .map((item) => item.trim());
-
-        onChange?.(emails, reason);
-      }}
-      renderTags={(items) => {
-        return (
-          <Inline space="xxsmall">
-            {items.map((option, index) => {
-              return (
-                <Tag key={index} color="grey" variant="subtle">
-                  <Inline space="xxsmall">
-                    <TextBox wrapOverflow={true} color="primary">
-                      {option}
-                    </TextBox>
-
-                    <IconButton
-                      size="small"
-                      onClick={() => {
-                        handleDelete(index);
-                      }}
-                    >
-                      <CloseIcon />
-                    </IconButton>
-                  </Inline>
-                </Tag>
-              );
-            })}
-          </Inline>
-        );
-      }}
-      renderInput={(params) => (
-        <MultipleFieldText
-          {...params}
-          {...TextFieldProps}
-          InputProps={{
-            ...TextFieldProps?.InputProps,
-            ...params.InputProps,
-            startAdornment: params.InputProps.startAdornment,
-          }}
-          onChange={(event) => {
-            const text = event.target.value.replace(/,/g, '');
-            const hasCommaOrSpace = /,|\s/.test(event.target.value);
-
-            if (hasCommaOrSpace && text.trim() !== '') {
-              onChange?.([...(value || []), text.trim()], 'select-option');
-            }
-          }}
-          onBlur={(event) => {
-            const text = event.target.value;
-            if (text.trim() !== '') {
-              onChange?.([...(value || []), text.trim()], 'select-option');
-            }
-          }}
-        />
-      )}
-    />
-  );
-});
-
-EmailAutocomplete.displayName = 'EmailAutocomplete';

package/src/file-drop-zone/FileDropZone.stories.tsx

@@ -1,44 +0,0 @@
-import { Meta } from '@storybook/react';
-import { FileDropZone, toBytes } from './FileDropZone';
-
-export default { title: 'Lab/FileDropZone', component: FileDropZone } as Meta;
-
-export const basic = () => (
-  <FileDropZone
-    onDropAccepted={(files) => {
-      alert(`Accepted files: ${files.map((file) => file.name).join(', ')}`);
-    }}
-  />
-);
-
-export const accept = () => (
-  <FileDropZone
-    accept={['.jpeg', '.jpg', '.png', '.gif']}
-    hintText="or Drag & Drop .jpeg .jpg .png .gif files"
-    onDropAccepted={(files) => {
-      alert(`Accepted files: ${files.map((file) => file.name).join(', ')}`);
-    }}
-  />
-);
-
-export const maxSize = () => (
-  <FileDropZone
-    maxSize={toBytes(20, 'mb')}
-    hintText="or Drag & Drop files less than 20 MB"
-    onDropAccepted={(files) => {
-      alert(`Accepted files: ${files.map((file) => file.name).join(', ')}`);
-    }}
-  />
-);
-
-export const maxFiles = () => (
-  <FileDropZone
-    maxFiles={1}
-    hintText="or Drag & Drop file"
-    onDropAccepted={(files) => {
-      alert(`Accepted files: ${files.map((file) => file.name).join(', ')}`);
-    }}
-  >
-    Upload attachment
-  </FileDropZone>
-);

package/src/file-drop-zone/FileDropZone.tsx

@@ -1,170 +0,0 @@
-import { CircularProgress, SvgIcon } from '@material-ui/core';
-import { Error } from '@material-ui/icons';
-import { mdiUpload } from '@mdi/js';
-import { CardButton, ColorDynamic, Column, Columns } from '@superdispatch/ui';
-import { forwardRef, ReactElement, ReactNode, Suspense } from 'react';
-import Dropzone, { FileRejection } from 'react-dropzone';
-import styled from 'styled-components';
-
-export function toBytes(input: number, unit: 'kb' | 'mb' | 'gb'): number {
-  if (unit === 'gb') return input * (1 << 30);
-  if (unit === 'mb') return input * (1 << 20);
-  return input * (1 << 10);
-}
-
-const KILOBYTE = 1024;
-const BYTE_UNITS = [
-  'B',
-  'KB',
-  'MB',
-  'GB',
-  'TB',
-  'PB',
-  'EB',
-  'ZB',
-  'YB',
-] as const;
-export function formatBytes(bytes: number): string {
-  if (bytes === 0) return '0 Bytes';
-  const unitIndex = Math.floor(Math.log(bytes) / Math.log(KILOBYTE));
-  const unit = BYTE_UNITS[unitIndex] as string;
-  return `${(bytes / Math.pow(KILOBYTE, unitIndex)).toFixed(2)} ${unit}`;
-}
-
-const StyledCardButton = styled(CardButton)<{
-  status?: 'idle' | 'active' | 'error';
-}>(({ status }) => ({
-  backgroundColor: status === 'active' ? ColorDynamic.Blue50 : undefined,
-}));
-
-interface UploadRejectionProps {
-  maxSize?: number;
-  maxFiles?: number;
-  accept?: string | string[];
-  rejection: FileRejection;
-}
-
-function UploadRejection({
-  maxSize,
-  rejection,
-}: UploadRejectionProps): null | ReactElement {
-  const [error] = rejection.errors;
-  if (!error) return null;
-
-  return (
-    <Columns align="center">
-      <Column width="content">
-        <Error />
-      </Column>
-
-      <Column>
-        {error.code === 'file-too-large'
-          ? maxSize == null
-            ? 'Attachment size is too large'
-            : `Attachment size should be less than ${formatBytes(maxSize)}`
-          : error.message}
-      </Column>
-    </Columns>
-  );
-}
-
-export interface FileDropZoneProps {
-  children?: ReactNode;
-  startIcon?: ReactNode;
-  hintText?: ReactNode;
-  fallback?: ReactNode;
-  disabled?: boolean;
-
-  maxSize?: number;
-  maxFiles?: number;
-  accept?: string | string[];
-  onDropAccepted?: (files: File[]) => void;
-  onDropRejected?: (fileRejections: FileRejection[]) => void;
-}
-
-export const FileDropZone = forwardRef<HTMLButtonElement, FileDropZoneProps>(
-  (props, ref) => {
-    const {
-      // CardButton
-      disabled = false,
-      children = 'Upload Attachments',
-      hintText = 'or Drag & Drop files',
-      startIcon = (
-        <SvgIcon>
-          <path d={mdiUpload} />
-        </SvgIcon>
-      ),
-      fallback = (
-        <CardButton
-          ref={ref}
-          disabled={true}
-          startIcon={<CircularProgress size="1em" color="inherit" />}
-        >
-          Loading dependencies…
-        </CardButton>
-      ),
-
-      // Dropzone
-      accept,
-      maxSize = Infinity,
-      maxFiles = Infinity,
-      onDropRejected,
-      onDropAccepted,
-      ...dropzoneProps
-    } = props;
-
-    return (
-      <Suspense fallback={fallback}>
-        <Dropzone
-          {...dropzoneProps}
-          accept={accept}
-          maxSize={maxSize}
-          maxFiles={maxFiles}
-          disabled={disabled}
-          onDropAccepted={(files) => {
-            onDropAccepted?.(files);
-          }}
-          onDropRejected={(fileRejections) => {
-            onDropRejected?.(fileRejections);
-          }}
-        >
-          {({
-            isDragActive,
-            isDragReject,
-            getRootProps,
-            getInputProps,
-            fileRejections: [fileRejection],
-          }) => {
-            return (
-              <>
-                <input {...getInputProps()} />
-
-                <StyledCardButton
-                  {...getRootProps()}
-                  ref={ref}
-                  hint={hintText}
-                  disabled={disabled}
-                  startIcon={startIcon}
-                  status={
-                    isDragActive ? 'active' : isDragReject ? 'error' : 'idle'
-                  }
-                  error={
-                    !!fileRejection && (
-                      <UploadRejection
-                        accept={accept}
-                        maxSize={maxSize}
-                        rejection={fileRejection}
-                      />
-                    )
-                  }
-                >
-                  {children}
-                </StyledCardButton>
-              </>
-            );
-          }}
-        </Dropzone>
-      </Suspense>
-    );
-  },
-);

package/src/file-list-item/FileListItem.stories.tsx

@@ -1,37 +0,0 @@
-import { Meta } from '@storybook/react';
-import { Stack } from '@superdispatch/ui';
-import { Box } from '../box/Box';
-import { FileListItem } from './FileListItem';
-
-export default {
-  title: 'Lab/FileListItem',
-  component: FileListItem,
-  decorators: [
-    (Story) => (
-      <Box maxWidth="200px">
-        <Story />
-      </Box>
-    ),
-  ],
-} as Meta;
-
-export const basic = () => (
-  <Stack>
-    <FileListItem name="Read this document.txt" />
-    <FileListItem name="TST1208 Dispatcher Info.pdf" />
-    <FileListItem name="TST1208 Dispatcher Info.pdf" canDelete={false} />
-    <FileListItem
-      name="attachment.jpg"
-      url="https://picsum.photos/seed/picsum/1024/768"
-    />
-  </Stack>
-);
-
-export const status = () => (
-  <Stack>
-    <FileListItem name="TST1208 Dispatcher Info.pdf" status="idle" />
-    <FileListItem name="TST1208 Dispatcher Info.pdf" status="loading" />
-    <FileListItem name="TST1208 Dispatcher Info.pdf" status="success" />
-    <FileListItem name="TST1208 Dispatcher Info.pdf" status="error" />
-  </Stack>
-);

package/src/file-list-item/FileListItem.tsx

@@ -1,148 +0,0 @@
-import {
-  CircularProgress,
-  IconButton,
-  Link,
-  SvgIcon,
-  SvgIconProps,
-  Tooltip,
-} from '@material-ui/core';
-import { CheckCircle, Delete, Error, Image, Refresh } from '@material-ui/icons';
-import { mdiFilePdfBox, mdiTextBox } from '@mdi/js';
-import {
-  ColorDynamic,
-  Column,
-  Columns,
-  useResponsiveValue,
-  useUID,
-} from '@superdispatch/ui';
-import { forwardRef, memo, ReactNode, useState } from 'react';
-import styled from 'styled-components';
-
-const FileListItemName = styled.div`
-  overflow: hidden;
-  line-height: 22px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const FileListItemProgress = styled(CircularProgress)`
-  font-size: 24px;
-
-  ${({ theme }) => theme.breakpoints.up('sm')} {
-    font-size: 14px;
-  }
-`;
-
-const PdfIcon = memo((props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d={mdiFilePdfBox} />
-  </SvgIcon>
-));
-const TextBoxIcon = memo((props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d={mdiTextBox} />
-  </SvgIcon>
-));
-
-type FileType = 'pdf' | 'image' | 'unknown';
-const PDF_FILE_PATTERN = /\.pdf$/;
-const IMAGE_FILE_PATTERN = /\.(gif|png|jpg|jpeg)$/;
-
-function getFileType(name: string): FileType {
-  if (PDF_FILE_PATTERN.exec(name)) return 'pdf';
-  if (IMAGE_FILE_PATTERN.exec(name)) return 'image';
-  return 'unknown';
-}
-
-export interface FileListItemProps {
-  url?: string;
-  name: string;
-  onRetry?: () => void;
-  onDelete?: () => void;
-  canDelete?: boolean;
-  helperText?: ReactNode;
-  status?: 'idle' | 'loading' | 'error' | 'success';
-}
-export const FileListItem = forwardRef<HTMLDivElement, FileListItemProps>(
-  ({ url, name, status, canDelete = true, onRetry, onDelete }, ref) => {
-    const uid = useUID();
-    const fileType = getFileType(name);
-    const [isHoveredState, setIsHovered] = useState(false);
-    const isHovered = useResponsiveValue(true, isHoveredState);
-
-    return (
-      <div
-        ref={ref}
-        onMouseOver={() => {
-          setIsHovered(true);
-        }}
-        onMouseLeave={() => {
-          setIsHovered(false);
-        }}
-        aria-label="file-list-item"
-      >
-        <Columns align="center" space="xsmall">
-          <Column width="content">
-            {status === 'error' ? (
-              <Error color="error" fontSize="small" />
-            ) : fileType === 'pdf' ? (
-              <PdfIcon color="action" fontSize="small" />
-            ) : fileType === 'image' ? (
-              <Image color="action" fontSize="small" />
-            ) : (
-              <TextBoxIcon color="action" fontSize="small" />
-            )}
-          </Column>
-
-          <Column width="fluid">
-            <FileListItemName id={uid}>
-              {!url ? (
-                name
-              ) : (
-                <Link
-                  href={url}
-                  noWrap={true}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {name}
-                </Link>
-              )}
-            </FileListItemName>
-          </Column>
-
-          {status === 'error' && (
-            <Column width="content">
-              <Tooltip title="Retry">
-                <IconButton size="small" onClick={onRetry}>
-                  <Refresh fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            </Column>
-          )}
-
-          <Column width="content">
-            {status === 'loading' ? (
-              <IconButton size="small" disabled={true}>
-                <FileListItemProgress size="1em" />
-              </IconButton>
-            ) : !isHovered && status === 'success' ? (
-              <IconButton size="small">
-                <CheckCircle
-                  fontSize="small"
-                  htmlColor={ColorDynamic.Green300}
-                />
-              </IconButton>
-            ) : canDelete ? (
-              <Tooltip title="Delete">
-                <IconButton size="small" onClick={onDelete}>
-                  <Delete fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            ) : null}
-          </Column>
-        </Columns>
-      </div>
-    );
-  },
-);