@superdispatch/ui-lab 0.21.13 → 0.21.15

package/src/description-item/DescriptionItem.stories.tsx

@@ -1,163 +0,0 @@
-import { Link } from '@material-ui/core';
-import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
-import DomainIcon from '@material-ui/icons/Domain';
-import FingerprintIcon from '@material-ui/icons/Fingerprint';
-import FlightLandIcon from '@material-ui/icons/FlightLand';
-import FlightTakeoffIcon from '@material-ui/icons/FlightTakeoff';
-import NotesIcon from '@material-ui/icons/Notes';
-import PaymentIcon from '@material-ui/icons/Payment';
-import PersonIcon from '@material-ui/icons/Person';
-import RoomIcon from '@material-ui/icons/Room';
-import { Meta } from '@storybook/react';
-import { PhoneLink } from '@superdispatch/phones';
-import { Column, Columns, Inline, Stack } from '@superdispatch/ui';
-import { Box } from '../box/Box';
-import { TextBox } from '../text-box/TextBox';
-import { DescriptionItem } from './DescriptionItem';
-
-export default {
-  title: 'Lab/DescriptionItem',
-  component: DescriptionItem,
-} as Meta;
-
-export const basic = () => (
-  <Box maxWidth="200px">
-    <Stack>
-      <DescriptionItem icon={<PaymentIcon />} aria-label="payment">
-        <Inline space="xxsmall">
-          <TextBox color="purple">$1,503</TextBox>
-          COD
-          <TextBox color="secondary">$49.94/mi</TextBox>
-        </Inline>
-      </DescriptionItem>
-
-      <DescriptionItem icon={<CalendarTodayIcon />} label="Posted">
-        4 hr. ago
-      </DescriptionItem>
-
-      <DescriptionItem icon={<RoomIcon />} aria-label="address">
-        167 Zosh Rd, Dallas, PA 18612
-      </DescriptionItem>
-
-      <DescriptionItem icon={<FingerprintIcon />} label="ID">
-        202CB962AC59075B964B07152D234B70
-      </DescriptionItem>
-
-      <DescriptionItem icon={<NotesIcon />} label="Notes">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-      </DescriptionItem>
-    </Stack>
-  </Box>
-);
-
-export const wrap = () => (
-  <Box maxWidth="200px">
-    <Stack>
-      <DescriptionItem icon={<RoomIcon />} wrap={true}>
-        167 Zosh Rd, Dallas, PA 18612
-      </DescriptionItem>
-
-      <DescriptionItem icon={<FingerprintIcon />} label="ID" wrap={true}>
-        202CB962AC59075B964B07152D234B70
-      </DescriptionItem>
-
-      <DescriptionItem icon={<NotesIcon />} label="Notes" wrap={true}>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-      </DescriptionItem>
-    </Stack>
-  </Box>
-);
-
-export const fallback = () => (
-  <Stack>
-    <DescriptionItem
-      icon={<CalendarTodayIcon />}
-      label="Posted on"
-      fallback="N/A"
-    >
-      {null}
-    </DescriptionItem>
-    <DescriptionItem icon={<RoomIcon />} fallback="No address available" />
-    <DescriptionItem icon={<NotesIcon />} fallback="No delivery notes">
-      {false}
-    </DescriptionItem>
-  </Stack>
-);
-
-export const inset = () => (
-  <Stack>
-    <Stack space="xxsmall">
-      <DescriptionItem icon={<PersonIcon />}>Antony Hoffman</DescriptionItem>
-      <DescriptionItem inset={true}>
-        <PhoneLink phone="303 555 0105" format="national" />
-      </DescriptionItem>
-      <DescriptionItem inset={true}>
-        <Link href="mailto:dustin.russel@example.com">
-          dustin.russel@example.com
-        </Link>
-      </DescriptionItem>
-    </Stack>
-
-    <DescriptionItem icon={<RoomIcon />}>
-      167 Zosh Rd, Dallas, PA 18612
-    </DescriptionItem>
-  </Stack>
-);
-
-export const complex = () => (
-  <Box maxWidth="320px">
-    <Stack>
-      <Columns space="xsmall">
-        <Column width="adaptive">
-          <DescriptionItem icon={<DomainIcon />}>Fast Shipper</DescriptionItem>
-        </Column>
-
-        <Column width="adaptive">
-          <DescriptionItem icon={<CalendarTodayIcon />} label="Received">
-            4 hr. ago
-          </DescriptionItem>
-        </Column>
-      </Columns>
-
-      <Columns space="xsmall">
-        <Column width="adaptive">
-          <DescriptionItem icon={<FingerprintIcon />} label="Load ID">
-            02323
-          </DescriptionItem>
-        </Column>
-
-        <Column width="adaptive">
-          <DescriptionItem icon={<CalendarTodayIcon />} label="Received">
-            4 hr. ago
-          </DescriptionItem>
-        </Column>
-      </Columns>
-
-      <DescriptionItem icon={<FlightTakeoffIcon />}>
-        <Columns space="xxsmall">
-          <Column width="adaptive">
-            <TextBox noWrap={true}>Kansas City, MO 64105</TextBox>
-          </Column>
-          <Column width="adaptive">
-            <TextBox noWrap={true} color="secondary">
-              Oct 04, 2019
-            </TextBox>
-          </Column>
-        </Columns>
-      </DescriptionItem>
-
-      <DescriptionItem icon={<FlightLandIcon />}>
-        <Columns space="xxsmall">
-          <Column width="adaptive">
-            <TextBox noWrap={true}>Roeland Park, KS 66205</TextBox>
-          </Column>
-          <Column width="adaptive">
-            <TextBox noWrap={true} color="secondary">
-              Oct 04, 2019
-            </TextBox>
-          </Column>
-        </Columns>
-      </DescriptionItem>
-    </Stack>
-  </Box>
-);

package/src/description-item/DescriptionItem.tsx

@@ -1,104 +0,0 @@
-import {
-  Color,
-  Column,
-  Columns,
-  Inline,
-  isEmptyReactNode,
-  useUID,
-} from '@superdispatch/ui';
-import { forwardRef, ReactNode } from 'react';
-import styled, { css, SimpleInterpolation } from 'styled-components';
-import { TextBox } from '../text-box/TextBox';
-
-function descriptionItemIconMixin(
-  size: 16 | 20,
-): readonly SimpleInterpolation[] {
-  return css`
-    width: ${size}px;
-    height: ${size + 4}px;
-
-    & > .MuiSvgIcon-root {
-      font-size: ${size}px;
-    }
-  `;
-}
-
-const DescriptionItemIcon = styled.div(
-  ({ theme }) =>
-    css`
-      display: flex;
-      align-items: center;
-
-      & > .MuiSvgIcon-root {
-        color: ${Color.Dark100};
-      }
-
-      ${descriptionItemIconMixin(20)};
-
-      ${theme.breakpoints.up('sm')} {
-        ${descriptionItemIconMixin(16)};
-      }
-    `,
-);
-
-export interface DescriptionItemProps {
-  id?: string;
-  'aria-label'?: string;
-
-  wrap?: boolean;
-  inset?: boolean;
-  icon?: ReactNode;
-  label?: ReactNode;
-  fallback?: ReactNode;
-  children?: ReactNode;
-}
-
-export const DescriptionItem = forwardRef<HTMLDivElement, DescriptionItemProps>(
-  (
-    {
-      icon,
-      wrap,
-      inset,
-      label,
-      children,
-      fallback,
-      id: idProp,
-      'aria-label': ariaLabel,
-    },
-    ref,
-  ) => {
-    const id = useUID(idProp);
-    const labelID = `${id}-label`;
-    const isEmptyChildren = isEmptyReactNode(children);
-
-    return (
-      <Columns id={id} ref={ref} space="xsmall" aria-label={ariaLabel}>
-        {!!(icon || inset) && (
-          <Column width="content">
-            <DescriptionItemIcon>{icon}</DescriptionItemIcon>
-          </Column>
-        )}
-
-        <Column width="adaptive">
-          <Inline space="xxsmall" noWrap={!wrap}>
-            {!!label && (
-              <TextBox as="label" id={labelID} color="secondary">
-                {label}
-              </TextBox>
-            )}
-
-            <TextBox
-              as="div"
-              noWrap={!wrap}
-              wrapOverflow={!!wrap}
-              aria-labelledby={label == null ? undefined : labelID}
-              color={isEmptyChildren && label == null ? 'secondary' : 'primary'}
-            >
-              {isEmptyChildren ? fallback : children}
-            </TextBox>
-          </Inline>
-        </Column>
-      </Columns>
-    );
-  },
-);

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, Color, 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' ? Color.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,145 +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 {
-  Color,
-  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={Color.Green300} />
-              </IconButton>
-            ) : canDelete ? (
-              <Tooltip title="Delete">
-                <IconButton size="small" onClick={onDelete}>
-                  <Delete fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            ) : null}
-          </Column>
-        </Columns>
-      </div>
-    );
-  },
-);