@superdispatch/ui 0.21.13 → 0.21.14

package/src/avatar/__tests__/Avatar.spec.tsx

@@ -1,71 +0,0 @@
-import { Avatar } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiAvatar).toMatchInlineSnapshot(`undefined`);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Avatar />, ['MuiAvatar'])).toMatchInlineSnapshot(`
-.MuiAvatar-root {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  overflow: hidden;
-  position: relative;
-  font-size: 14px;
-  align-items: center;
-  flex-shrink: 0;
-  font-family: 'Inter', sans-serif;
-  font-weight: 600;
-  line-height: 20px;
-  user-select: none;
-  border-radius: 50%;
-  text-transform: uppercase;
-  justify-content: center;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiAvatar-root {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-@media (min-width: 600px) {
-  .MuiAvatar-root {
-    width: 32px;
-    height: 32px;
-  }
-}
-
-.MuiAvatar-colorDefault {
-  color: Color.Dark300;
-  background-color: Color.Silver300;
-}
-
-.MuiAvatar-rounded {
-  border-radius: 4px;
-}
-
-.MuiAvatar-square {
-  border-radius: 0;
-}
-
-.MuiAvatar-img {
-  color: transparent;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  text-align: center;
-  text-indent: 10000px;
-}
-
-.MuiAvatar-fallback {
-  width: 75%;
-  height: 75%;
-}
-`);
-});

package/src/avatar-button/AvatarButton.stories.tsx

@@ -1,153 +0,0 @@
-import { Meta } from '@storybook/react';
-import { UseState } from '@superdispatch/ui-docs';
-import { Inline } from '../inline/Inline';
-import { Stack } from '../stack/Stack';
-import { AvatarButton } from './AvatarButton';
-
-export default {
-  title: 'Inputs/Avatar Button',
-  component: AvatarButton,
-} as Meta;
-
-export const basic = () => (
-  <Inline space="small" verticalAlign="center">
-    <AvatarButton />
-    <AvatarButton size="large" />
-  </Inline>
-);
-
-export const disabled = () => (
-  <Inline space="small" verticalAlign="center">
-    <AvatarButton disabled={true} />
-    <AvatarButton size="large" disabled={true} />
-  </Inline>
-);
-
-export const loading = () => (
-  <Inline space="small" verticalAlign="center">
-    <AvatarButton isLoading={true} />
-    <AvatarButton size="large" isLoading={true} />
-  </Inline>
-);
-
-export const textBasic = () => (
-  <Inline space="small" verticalAlign="center">
-    <AvatarButton>AB</AvatarButton>
-    <AvatarButton size="large">AB</AvatarButton>
-  </Inline>
-);
-
-export const textDisabled = () => (
-  <Inline space="small" verticalAlign="center">
-    <AvatarButton disabled={true}>AB</AvatarButton>
-    <AvatarButton size="large" disabled={true}>
-      AB
-    </AvatarButton>
-  </Inline>
-);
-
-export const textLoading = () => (
-  <Inline space="small" verticalAlign="center">
-    <AvatarButton isLoading={true}>AB</AvatarButton>
-    <AvatarButton size="large" isLoading={true}>
-      AB
-    </AvatarButton>
-  </Inline>
-);
-
-export const pictureBasic = () => (
-  <Inline space="small" verticalAlign="center">
-    <AvatarButton src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256" />
-    <AvatarButton
-      size="large"
-      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
-    />
-  </Inline>
-);
-
-export const pictureDisabled = () => (
-  <Inline space="small" verticalAlign="center">
-    <AvatarButton
-      disabled={true}
-      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
-    />
-    <AvatarButton
-      size="large"
-      disabled={true}
-      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
-    />
-  </Inline>
-);
-
-export const pictureLoading = () => (
-  <Inline space="small" verticalAlign="center">
-    <AvatarButton
-      isLoading={true}
-      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
-    />
-    <AvatarButton
-      size="large"
-      isLoading={true}
-      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
-    />
-  </Inline>
-);
-
-export const interactive = () => (
-  <UseState initialState={false}>
-    {(state, setState) => {
-      const handleClick = () => {
-        setState(true);
-        setTimeout(() => {
-          setState(false);
-        }, 500);
-      };
-
-      return (
-        <Stack space="small">
-          <Inline space="small" verticalAlign="center">
-            <AvatarButton disabled={state} onClick={handleClick}>
-              SM
-            </AvatarButton>
-            <AvatarButton size="large" disabled={state} onClick={handleClick}>
-              SM
-            </AvatarButton>
-
-            <AvatarButton isLoading={state} onClick={handleClick}>
-              SM
-            </AvatarButton>
-            <AvatarButton size="large" isLoading={state} onClick={handleClick}>
-              SM
-            </AvatarButton>
-          </Inline>
-
-          <Inline space="small" verticalAlign="center">
-            <AvatarButton
-              disabled={state}
-              onClick={handleClick}
-              src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80"
-            />
-            <AvatarButton
-              size="large"
-              disabled={state}
-              onClick={handleClick}
-              src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80"
-            />
-
-            <AvatarButton
-              isLoading={state}
-              onClick={handleClick}
-              src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80"
-            />
-            <AvatarButton
-              size="large"
-              isLoading={state}
-              onClick={handleClick}
-              src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80"
-            />
-          </Inline>
-        </Stack>
-      );
-    }}
-  </UseState>
-);

package/src/avatar-button/AvatarButton.tsx

@@ -1,223 +0,0 @@
-import {
-  Avatar,
-  AvatarClassKey,
-  AvatarTypeMap,
-  ButtonBase,
-  CircularProgress,
-} from '@material-ui/core';
-import { ClassNameMap, CSSProperties, makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import {
-  ButtonHTMLAttributes,
-  forwardRef,
-  ForwardRefExoticComponent,
-  ReactNode,
-  Ref,
-  RefAttributes,
-} from 'react';
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export type AvatarButtonClassKey =
-  | 'button'
-  | 'overlay'
-  | 'progress'
-  | 'withIcon'
-  | 'sizeLarge'
-  | Exclude<AvatarClassKey, 'circle'>;
-
-const useStyles = makeStyles(
-  (theme: SuperDispatchTheme): Record<AvatarButtonClassKey, CSSProperties> => {
-    const sm = theme.breakpoints.up('sm');
-
-    return {
-      button: {
-        borderRadius: '50%',
-
-        '&[disabled], &[aria-busy="true"]': {
-          '& > $overlay': {
-            backgroundColor: Color.White50,
-          },
-        },
-
-        '&:not([disabled])[aria-busy="false"]': {
-          '&:hover, &:focus': {
-            '&$withIcon > $overlay': {
-              backgroundColor: Color.Black50,
-
-              '& > svg': { opacity: 1 },
-            },
-
-            '&:not($withIcon) > $overlay': {
-              backgroundColor: Color.Black20,
-            },
-          },
-        },
-      },
-
-      overlay: {
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        position: 'absolute',
-
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-
-        borderRadius: '50%',
-        backgroundColor: Color.Transparent,
-        transition: theme.transitions.create('background-color'),
-
-        '& > svg': {
-          opacity: 0,
-          color: Color.White,
-          transition: theme.transitions.create('opacity'),
-
-          fontSize: theme.spacing(3),
-          [sm]: { fontSize: theme.spacing(2) },
-        },
-      },
-
-      progress: {
-        top: 0,
-        left: 0,
-        position: 'absolute',
-
-        fontSize: theme.spacing(5),
-        [sm]: { fontSize: theme.spacing(4) },
-      },
-
-      withIcon: {},
-
-      sizeLarge: {
-        '& > $root': {
-          ...theme.typography.h2,
-
-          width: theme.spacing(7),
-          height: theme.spacing(7),
-
-          [sm]: {
-            width: theme.spacing(8),
-            height: theme.spacing(8),
-          },
-        },
-
-        '& > $overlay': {
-          '& > $progress': {
-            fontSize: theme.spacing(7),
-            [sm]: { fontSize: theme.spacing(8) },
-          },
-
-          '& > svg': {
-            fontSize: theme.spacing(4),
-            [sm]: { fontSize: theme.spacing(3) },
-          },
-        },
-      },
-
-      root: {},
-
-      colorDefault: {},
-      circular: {},
-      rounded: {},
-      square: {},
-      img: {},
-      fallback: {},
-    };
-  },
-  { name: 'SD-AvatarButton' },
-);
-
-export interface AvatarButtonProps
-  extends RefAttributes<HTMLButtonElement>,
-    ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: 'small' | 'large';
-  icon?: ReactNode;
-  isLoading?: boolean;
-
-  avatarRef?: Ref<HTMLDivElement>;
-  classes?: Partial<ClassNameMap<AvatarButtonClassKey>>;
-
-  variant?: AvatarTypeMap['props']['variant'];
-  alt?: AvatarTypeMap['props']['alt'];
-  src?: AvatarTypeMap['props']['src'];
-  sizes?: AvatarTypeMap['props']['sizes'];
-  srcSet?: AvatarTypeMap['props']['srcSet'];
-  imgProps?: AvatarTypeMap['props']['imgProps'];
-}
-
-export const AvatarButton: ForwardRefExoticComponent<AvatarButtonProps> =
-  forwardRef(
-    (
-      {
-        size,
-        icon,
-        isLoading = false,
-
-        classes,
-        disabled = false,
-        avatarRef,
-        className,
-
-        alt,
-        imgProps,
-        sizes,
-        src,
-        srcSet,
-        variant,
-        children,
-        ...props
-      },
-      ref,
-    ) => {
-      const {
-        button: buttonClassName,
-        overlay: overlayClassName,
-        progress: progressClassName,
-        withIcon: withIconClassName,
-        sizeLarge: sizeLargeClassName,
-        ...avatarClasses
-      } = useStyles({ classes });
-
-      return (
-        <ButtonBase
-          {...props}
-          ref={ref}
-          aria-busy={isLoading}
-          aria-disabled={disabled}
-          disabled={disabled || isLoading}
-          className={clsx(className, buttonClassName, {
-            [withIconClassName]: !!icon,
-            [sizeLargeClassName]: size === 'large',
-          })}
-        >
-          <Avatar
-            ref={avatarRef}
-            classes={avatarClasses}
-            variant={variant}
-            alt={alt}
-            src={src}
-            sizes={sizes}
-            srcSet={srcSet}
-            imgProps={imgProps}
-          >
-            {children}
-          </Avatar>
-
-          <div className={overlayClassName}>
-            {icon}
-
-            {isLoading && (
-              <CircularProgress
-                size="1em"
-                className={progressClassName}
-                thickness={size === 'large' ? 2.5 : 1.5}
-              />
-            )}
-          </div>
-        </ButtonBase>
-      );
-    },
-  );

package/src/avatar-button/__tests__/AvatarButton.spec.tsx

@@ -1,126 +0,0 @@
-import { renderCSS } from '@superdispatch/ui-testutils';
-import { AvatarButton } from '../AvatarButton';
-
-it('checks component css', () => {
-  expect(renderCSS(<AvatarButton />, ['SD-AvatarButton']))
-    .toMatchInlineSnapshot(`
-    .SD-AvatarButton-button {
-      border-radius: 50%;
-    }
-
-    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:hover.SD-AvatarButton-withIcon
-      > .SD-AvatarButton-overlay,
-    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:focus.SD-AvatarButton-withIcon
-      > .SD-AvatarButton-overlay {
-      background-color: Color.Black50;
-    }
-
-    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:hover:not(.SD-AvatarButton-withIcon)
-      > .SD-AvatarButton-overlay,
-    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:focus:not(.SD-AvatarButton-withIcon)
-      > .SD-AvatarButton-overlay {
-      background-color: Color.Black20;
-    }
-
-    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:hover.SD-AvatarButton-withIcon
-      > .SD-AvatarButton-overlay
-      > svg,
-    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:focus.SD-AvatarButton-withIcon
-      > .SD-AvatarButton-overlay
-      > svg {
-      opacity: 1;
-    }
-
-    .SD-AvatarButton-button[disabled] > .SD-AvatarButton-overlay,
-    .SD-AvatarButton-button[aria-busy='true'] > .SD-AvatarButton-overlay {
-      background-color: Color.White50;
-    }
-
-    .SD-AvatarButton-overlay {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      position: absolute;
-      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-      align-items: center;
-      border-radius: 50%;
-      justify-content: center;
-      background-color: Color.Transparent;
-    }
-
-    .SD-AvatarButton-overlay > svg {
-      color: Color.White;
-      opacity: 0;
-      font-size: 24px;
-      transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    }
-
-    @media (min-width: 600px) {
-      .SD-AvatarButton-overlay > svg {
-        font-size: 16px;
-      }
-    }
-
-    .SD-AvatarButton-progress {
-      top: 0;
-      left: 0;
-      position: absolute;
-      font-size: 40px;
-    }
-
-    @media (min-width: 600px) {
-      .SD-AvatarButton-progress {
-        font-size: 32px;
-      }
-    }
-
-    .SD-AvatarButton-sizeLarge > .SD-AvatarButton-root {
-      width: 56px;
-      height: 56px;
-      font-size: 24px;
-      font-family: 'Inter', sans-serif;
-      font-weight: 500;
-      line-height: 28px;
-    }
-
-    .SD-AvatarButton-sizeLarge
-      > .SD-AvatarButton-overlay
-      > .SD-AvatarButton-progress {
-      font-size: 56px;
-    }
-
-    .SD-AvatarButton-sizeLarge > .SD-AvatarButton-overlay > svg {
-      font-size: 32px;
-    }
-
-    @media (min-width: 600px) {
-      .SD-AvatarButton-sizeLarge > .SD-AvatarButton-overlay > svg {
-        font-size: 24px;
-      }
-    }
-
-    @media (min-width: 600px) {
-      .SD-AvatarButton-sizeLarge
-        > .SD-AvatarButton-overlay
-        > .SD-AvatarButton-progress {
-        font-size: 64px;
-      }
-    }
-
-    @media (min-width: 0px) and (max-width: 599.95px) {
-      .SD-AvatarButton-sizeLarge > .SD-AvatarButton-root {
-        font-size: 22px;
-        line-height: 26px;
-      }
-    }
-
-    @media (min-width: 600px) {
-      .SD-AvatarButton-sizeLarge > .SD-AvatarButton-root {
-        width: 64px;
-        height: 64px;
-      }
-    }
-  `);
-});

package/src/button/Button.tsx

@@ -1,51 +0,0 @@
-import {
-  Button as MaterialButton,
-  ButtonProps as MuiButtonProps,
-  CircularProgress,
-} from '@material-ui/core';
-import { forwardRef, ForwardRefExoticComponent, RefAttributes } from 'react';
-
-export interface ButtonProps
-  extends RefAttributes<HTMLButtonElement>,
-    Omit<MuiButtonProps, 'color'> {
-  rel?: string;
-  target?: string;
-  isActive?: boolean;
-  isLoading?: boolean;
-  color?: 'primary' | 'error' | 'success' | 'white';
-}
-
-export const Button: ForwardRefExoticComponent<ButtonProps> = forwardRef(
-  (
-    {
-      size,
-      children,
-      disabled,
-      isActive,
-      isLoading,
-      color = 'primary',
-      ...props
-    },
-    ref,
-  ) => (
-    <MaterialButton
-      {...props}
-      ref={ref}
-      size={size}
-      data-color={color}
-      aria-busy={isLoading}
-      aria-expanded={isActive}
-      disabled={disabled || isLoading}
-      color={color === 'primary' ? color : 'default'}
-    >
-      {!isLoading ? (
-        children
-      ) : (
-        <>
-          {children}
-          <CircularProgress size="1em" color="inherit" />
-        </>
-      )}
-    </MaterialButton>
-  ),
-);