@superdispatch/ui-lab 0.50.3 → 0.50.5

package/src/email-autocomplate/CloseIcon.tsx

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

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

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

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

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

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

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