@superdispatch/ui 0.21.13 → 0.21.14

package/src/number-field/NumberField.stories.tsx

@@ -1,123 +0,0 @@
-import { UseState } from '@superdispatch/ui-docs';
-import { NumberField } from '..';
-
-export default { title: 'Inputs/NumberField', component: NumberField };
-
-export const basic = () => (
-  <UseState initialState={0}>
-    {(value, setValue) => (
-      <NumberField
-        value={value}
-        label="Label"
-        helperText="helperText"
-        onChange={(event) => {
-          setValue(event.target.value);
-        }}
-      />
-    )}
-  </UseState>
-);
-
-export const decimalSeparator = () => (
-  <UseState initialState={0}>
-    {(value, setValue) => (
-      <NumberField
-        value={value}
-        label="Separator :"
-        helperText="helperText"
-        inputProps={{
-          decimalSeparator: ':',
-        }}
-        onChange={(event) => {
-          setValue(event.target.value);
-        }}
-      />
-    )}
-  </UseState>
-);
-
-export const decimalScale = () => (
-  <UseState initialState={0}>
-    {(value, setValue) => (
-      <NumberField
-        value={value}
-        label="Decimal scale 2"
-        helperText="helperText"
-        inputProps={{
-          decimalScale: 2,
-        }}
-        onChange={(event) => {
-          setValue(event.target.value);
-        }}
-      />
-    )}
-  </UseState>
-);
-
-export const prefix = () => (
-  <UseState initialState={0}>
-    {(value, setValue) => (
-      <NumberField
-        value={value}
-        label="Prefix $"
-        helperText="helperText"
-        inputProps={{
-          prefix: '$',
-        }}
-        onChange={(event) => {
-          setValue(event.target.value);
-        }}
-      />
-    )}
-  </UseState>
-);
-
-export const withoutSeparator = () => (
-  <UseState initialState={0}>
-    {(value, setValue) => (
-      <NumberField
-        value={value}
-        label="Label"
-        helperText="helperText"
-        inputProps={{
-          thousandSeparator: false,
-        }}
-        onChange={(event) => {
-          setValue(event.target.value);
-        }}
-      />
-    )}
-  </UseState>
-);
-
-export const error = () => (
-  <UseState initialState={0}>
-    {(value, setValue) => (
-      <NumberField
-        value={value}
-        label="Label"
-        helperText="Error Text"
-        error={true}
-        onChange={(event) => {
-          setValue(event.target.value);
-        }}
-      />
-    )}
-  </UseState>
-);
-
-export const format = () => (
-  <UseState initialState={0}>
-    {(value, setValue) => (
-      <NumberField
-        value={value}
-        inputProps={{
-          format: '### ### ### ###',
-        }}
-        onChange={(event) => {
-          setValue(event.target.value);
-        }}
-      />
-    )}
-  </UseState>
-);

package/src/number-field/NumberField.tsx

@@ -1,98 +0,0 @@
-import {
-  InputProps as StandardInputProps,
-  StandardTextFieldProps,
-  TextField,
-} from '@material-ui/core';
-import {
-  ChangeEvent,
-  forwardRef,
-  ForwardRefExoticComponent,
-  InputHTMLAttributes,
-} from 'react';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
-import { useUID } from '../utils/useUID';
-
-type SafeNumberFormatProps = Pick<
-  NumberFormatProps,
-  | 'value'
-  | 'onChange'
-  | 'getInputRef'
-  | 'decimalScale'
-  | 'onValueChange'
-  | 'isNumericString'
-  | 'decimalSeparator'
-  | 'thousandSeparator'
-  | 'fixedDecimalScale'
-  | 'thousandsGroupStyle'
->;
-
-interface NumberFormatCustomProps
-  extends Omit<SafeNumberFormatProps, 'getInputRef' | 'onValueChange'>,
-    Omit<
-      StandardTextFieldProps,
-      'ref' | keyof InputHTMLAttributes<HTMLInputElement>
-    > {
-  disableValueParsing?: boolean;
-  format?: NumberFormatProps['format'];
-}
-
-export interface NumberFieldProps
-  extends Omit<StandardTextFieldProps, 'InputProps' | 'inputProps'>,
-    Omit<SafeNumberFormatProps, keyof StandardTextFieldProps> {
-  InputProps?: Partial<Omit<StandardInputProps, 'inputComponent'>>;
-  inputProps?: NumberFormatCustomProps & StandardTextFieldProps['inputProps'];
-}
-
-function NumberInputComponent({
-  value,
-  inputRef,
-  onChange,
-  isNumericString = true,
-  thousandSeparator = true,
-  disableValueParsing,
-  ...props
-}: NumberFormatCustomProps): JSX.Element {
-  return (
-    <NumberFormat
-      {...props}
-      value={value ?? ''}
-      inputMode="decimal"
-      getInputRef={inputRef}
-      isNumericString={isNumericString}
-      thousandSeparator={thousandSeparator}
-      allowedDecimalSeparators={['.', ',']}
-      onValueChange={(values) => {
-        const floatValue = !Number.isNaN(Number(values.floatValue))
-          ? values.floatValue
-          : null;
-
-        const event = {
-          target: {
-            value: disableValueParsing ? values.value : floatValue,
-          },
-        } as ChangeEvent<HTMLInputElement>;
-
-        onChange?.(event);
-      }}
-    />
-  );
-}
-
-export const NumberField: ForwardRefExoticComponent<NumberFieldProps> =
-  forwardRef(({ id, InputProps, ...props }, ref) => {
-    const uid = useUID(id);
-
-    return (
-      <TextField
-        {...props}
-        ref={ref}
-        id={uid}
-        InputProps={{
-          ...InputProps,
-          inputComponent: NumberInputComponent,
-        }}
-      />
-    );
-  });
-
-NumberField.displayName = 'NumberField';

package/src/overflow-text/OverflowText.stories.tsx

@@ -1,32 +0,0 @@
-import { Meta } from '@storybook/react';
-import { Box } from '@superdispatch/ui-lab';
-import { OverflowText } from './OverflowText';
-
-export default {
-  title: 'Data Display/OverflowText',
-  component: OverflowText,
-  decorators: [
-    (Story) => (
-      <Box maxWidth="200px">
-        <Story />
-      </Box>
-    ),
-  ],
-} as Meta;
-
-export const basic = () => (
-  <OverflowText>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </OverflowText>
-);
-
-export const customTooltip = () => (
-  <OverflowText
-    TooltipProps={{
-      title:
-        'Sed felis libero, interdum sit amet congue et, pretium vel massa.',
-    }}
-  >
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </OverflowText>
-);

package/src/overflow-text/OverflowText.tsx

@@ -1,114 +0,0 @@
-import {
-  Tooltip,
-  TooltipProps,
-  Typography,
-  TypographyProps,
-} from '@material-ui/core';
-import { CSSProperties, makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import {
-  ElementType,
-  forwardRef,
-  ForwardRefExoticComponent,
-  useState,
-} from 'react';
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-import { VisibilityObserver } from '../utils/VisibilityObserver';
-
-const useStyles = makeStyles(
-  (
-    theme: SuperDispatchTheme,
-  ): Record<'root' | 'truncated' | 'sentinel', CSSProperties> => ({
-    root: {
-      marginBottom: -1,
-      borderBottom: '1px dashed transparent',
-      transition: theme.transitions.create('border'),
-
-      '&$truncated': {
-        cursor: 'pointer',
-        borderBottomColor: Color.Silver500,
-      },
-    },
-    truncated: {},
-    sentinel: {
-      width: 1,
-      height: '100%',
-      display: 'inline-block',
-    },
-  }),
-  { name: 'SD-OverflowText' },
-);
-
-export interface OverflowTextProps extends Omit<TypographyProps, 'noWrap'> {
-  component?: ElementType;
-  disableUnderline?: boolean;
-  TooltipProps?: Omit<Partial<TooltipProps>, 'open' | 'children'>;
-}
-
-export const OverflowText: ForwardRefExoticComponent<OverflowTextProps> =
-  forwardRef(
-    (
-      {
-        onClick,
-        children,
-        className,
-        disableUnderline,
-        TooltipProps: {
-          title = children,
-          enterDelay = 1000,
-          ...tooltipProps
-        } = {} as const,
-        ...props
-      },
-      rootRef,
-    ) => {
-      const [isOpen, setIsOpen] = useState(false);
-      const styles = useStyles();
-      return (
-        <VisibilityObserver
-          render={({ ref, visibility }) => {
-            const isTooltipEnabled = !!children && visibility === 'invisible';
-
-            return (
-              <Tooltip
-                {...tooltipProps}
-                enterDelay={1000}
-                title={title || ''}
-                disableFocusListener={true}
-                open={isOpen && isTooltipEnabled}
-                onOpen={() => {
-                  setIsOpen(true);
-                }}
-                onClose={() => {
-                  setIsOpen(false);
-                }}
-              >
-                <Typography
-                  {...props}
-                  ref={rootRef}
-                  noWrap={true}
-                  onClick={(event) => {
-                    setIsOpen(true);
-                    onClick?.(event);
-                  }}
-                  className={clsx(
-                    styles.root,
-                    {
-                      [styles.truncated]:
-                        !disableUnderline && visibility === 'invisible',
-                    },
-                    className,
-                  )}
-                >
-                  {children}
-
-                  {!!children && <span ref={ref} className={styles.sentinel} />}
-                </Typography>
-              </Tooltip>
-            );
-          }}
-        />
-      );
-    },
-  );

package/src/overflow-text/__tests__/OverflowText.spec.tsx

@@ -1,24 +0,0 @@
-import { renderCSS } from '@superdispatch/ui-testutils';
-import { OverflowText } from '../OverflowText';
-
-it('checks component css', () => {
-  expect(renderCSS(<OverflowText />, ['SD-OverflowText']))
-    .toMatchInlineSnapshot(`
-    .SD-OverflowText-root {
-      transition: border 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-      border-bottom: 1px dashed transparent;
-      margin-bottom: -1px;
-    }
-
-    .SD-OverflowText-root.SD-OverflowText-truncated {
-      cursor: pointer;
-      border-bottom-color: Color.Silver500;
-    }
-
-    .SD-OverflowText-sentinel {
-      width: 1px;
-      height: 100%;
-      display: inline-block;
-    }
-  `);
-});

package/src/pagination/Pagination.stories.tsx

@@ -1,36 +0,0 @@
-import { Pagination } from '@material-ui/lab';
-import { Meta } from '@storybook/react';
-import { Stack } from '@superdispatch/ui';
-import { PropsLink } from '@superdispatch/ui-docs';
-import { Box } from '@superdispatch/ui-lab';
-
-export default {
-  title: 'Inputs/Pagination',
-  component: Pagination,
-  decorators: [
-    (Story) => (
-      <Box backgroundColor="White">
-        <Story />
-      </Box>
-    ),
-  ],
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/pagination/#props" />
-    ),
-  },
-} as Meta;
-
-export const basic = () => (
-  <Stack space="medium">
-    <Pagination count={154} page={5} siblingCount={3} />
-
-    <Pagination count={154} page={13} siblingCount={3} />
-
-    <Pagination count={154} page={147} siblingCount={3} />
-  </Stack>
-);
-
-export const disabled = () => (
-  <Pagination count={154} page={1} siblingCount={3} disabled={true} />
-);

package/src/pagination/PaginationOverrides.ts

@@ -1,47 +0,0 @@
-import { StyleRules } from '@material-ui/core';
-import { PaginationItemClassKey, PaginationItemProps } from '@material-ui/lab';
-import { CSSProperties } from '@material-ui/styles';
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-type Overrides<T extends string> = Partial<StyleRules<T>> & {
-  MuiCssBaseline?: CSSProperties | string;
-};
-
-export function overridePagination(theme: SuperDispatchTheme): void {
-  const props: Partial<PaginationItemProps> = {};
-  const overrides: Overrides<PaginationItemClassKey> = {
-    root: {
-      color: Color.Dark400,
-    },
-    page: {
-      '&:hover': {
-        backgroundColor: Color.Silver200,
-      },
-      '&$focusVisible': {
-        borderRadius: 4,
-        backgroundColor: Color.White,
-        border: `1px solid ${Color.Blue100}`,
-      },
-      '&$selected': {
-        backgroundColor: Color.Silver400,
-        '&:hover, &$focusVisible': {
-          backgroundColor: Color.Silver400,
-        },
-        '&$disabled': {
-          color: Color.Dark100,
-          backgroundColor: Color.Silver400,
-        },
-      },
-
-      '&$disabled': {
-        opacity: undefined,
-        color: Color.Dark100,
-      },
-    },
-  };
-
-  // Remove `Object.assign` after official release of `PaginationItem`.
-  Object.assign(theme.props, { MuiPaginationItem: props });
-  Object.assign(theme.overrides, { MuiPaginationItem: overrides });
-}

package/src/pagination/__tests__/Pagination.spec.tsx

@@ -1,228 +0,0 @@
-import { Pagination } from '@material-ui/lab';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  // Remove `any` after official release.
-  expect((props as any).MuiPagination).toMatchInlineSnapshot(`undefined`);
-  expect((props as any).MuiPaginationItem).toMatchInlineSnapshot(`Object {}`);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Pagination />, ['MuiPagination', 'MuiPaginationItem']))
-    .toMatchInlineSnapshot(`
-    .MuiPagination-ul {
-      margin: 0;
-      display: flex;
-      padding: 0;
-      flex-wrap: wrap;
-      list-style: none;
-      align-items: center;
-    }
-
-    .MuiPaginationItem-root {
-      color: Color.Dark400;
-      height: 32px;
-      margin: 0 3px;
-      padding: 0 6px;
-      font-size: 14px;
-      min-width: 32px;
-      box-sizing: border-box;
-      text-align: center;
-      font-family: 'Inter', sans-serif;
-      font-weight: 400;
-      line-height: 20px;
-      border-radius: 16px;
-    }
-
-    @media (min-width: 0px) and (max-width: 599.95px) {
-      .MuiPaginationItem-root {
-        font-size: 16px;
-        line-height: 24px;
-      }
-    }
-
-    .MuiPaginationItem-page {
-      transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-        background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    }
-
-    .MuiPaginationItem-page:hover {
-      background-color: Color.Silver200;
-    }
-
-    .MuiPaginationItem-page.Mui-focusVisible {
-      border: 1px solid Color.Blue100;
-      border-radius: 4px;
-      background-color: Color.White;
-    }
-
-    .MuiPaginationItem-page.Mui-selected {
-      background-color: Color.Silver400;
-    }
-
-    .MuiPaginationItem-page.Mui-disabled {
-      color: Color.Dark100;
-    }
-
-    .MuiPaginationItem-page.Mui-selected:hover,
-    .MuiPaginationItem-page.Mui-selected.Mui-focusVisible {
-      background-color: Color.Silver400;
-    }
-
-    .MuiPaginationItem-page.Mui-selected.Mui-disabled {
-      color: Color.Dark100;
-      opacity: 1;
-      background-color: Color.Silver400;
-    }
-
-    @media (hover: none) {
-      .MuiPaginationItem-page.Mui-selected:hover,
-      .MuiPaginationItem-page.Mui-selected.Mui-focusVisible {
-        background-color: Color.Silver300;
-      }
-    }
-
-    @media (hover: none) {
-      .MuiPaginationItem-page:hover {
-        background-color: transparent;
-      }
-    }
-
-    .MuiPaginationItem-sizeSmall {
-      height: 26px;
-      margin: 0 1px;
-      padding: 0 4px;
-      min-width: 26px;
-      border-radius: 13px;
-    }
-
-    .MuiPaginationItem-sizeSmall .MuiPaginationItem-icon {
-      font-size: 1.125rem;
-    }
-
-    .MuiPaginationItem-sizeLarge {
-      height: 40px;
-      padding: 0 10px;
-      font-size: 0.9375rem;
-      min-width: 40px;
-      border-radius: 20px;
-    }
-
-    .MuiPaginationItem-sizeLarge .MuiPaginationItem-icon {
-      font-size: 1.375rem;
-    }
-
-    .MuiPaginationItem-textPrimary.Mui-selected {
-      color: Color.White;
-      background-color: Color.Blue300;
-    }
-
-    .MuiPaginationItem-textPrimary.Mui-selected:hover,
-    .MuiPaginationItem-textPrimary.Mui-selected.Mui-focusVisible {
-      background-color: rgb(0, 81, 178);
-    }
-
-    .MuiPaginationItem-textPrimary.Mui-selected.Mui-disabled {
-      color: Color.Silver400;
-    }
-
-    @media (hover: none) {
-      .MuiPaginationItem-textPrimary.Mui-selected:hover,
-      .MuiPaginationItem-textPrimary.Mui-selected.Mui-focusVisible {
-        background-color: Color.Blue300;
-      }
-    }
-
-    .MuiPaginationItem-textSecondary.Mui-selected {
-      color: Color.White;
-      background-color: #f50057;
-    }
-
-    .MuiPaginationItem-textSecondary.Mui-selected:hover,
-    .MuiPaginationItem-textSecondary.Mui-selected.Mui-focusVisible {
-      background-color: #c51162;
-    }
-
-    .MuiPaginationItem-textSecondary.Mui-selected.Mui-disabled {
-      color: Color.Silver400;
-    }
-
-    @media (hover: none) {
-      .MuiPaginationItem-textSecondary.Mui-selected:hover,
-      .MuiPaginationItem-textSecondary.Mui-selected.Mui-focusVisible {
-        background-color: #f50057;
-      }
-    }
-
-    .MuiPaginationItem-outlined {
-      border: 1px solid rgba(0, 0, 0, 0.23);
-    }
-
-    .MuiPaginationItem-outlined.Mui-selected.Mui-disabled {
-      border: 1px solid rgba(0, 0, 0, 0.12);
-    }
-
-    .MuiPaginationItem-outlinedPrimary.Mui-selected {
-      color: Color.Blue300;
-      border: 1px solid rgba(0, 117, 255, 0.5);
-      background-color: rgba(0, 117, 255, 0.12);
-    }
-
-    .MuiPaginationItem-outlinedPrimary.Mui-selected:hover,
-    .MuiPaginationItem-outlinedPrimary.Mui-selected.Mui-focusVisible {
-      background-color: rgba(0, 117, 255, 0.16);
-    }
-
-    .MuiPaginationItem-outlinedPrimary.Mui-selected.Mui-disabled {
-      color: Color.Silver400;
-    }
-
-    @media (hover: none) {
-      .MuiPaginationItem-outlinedPrimary.Mui-selected:hover,
-      .MuiPaginationItem-outlinedPrimary.Mui-selected.Mui-focusVisible {
-        background-color: transparent;
-      }
-    }
-
-    .MuiPaginationItem-outlinedSecondary.Mui-selected {
-      color: #f50057;
-      border: 1px solid rgba(245, 0, 87, 0.5);
-      background-color: rgba(245, 0, 87, 0.12);
-    }
-
-    .MuiPaginationItem-outlinedSecondary.Mui-selected:hover,
-    .MuiPaginationItem-outlinedSecondary.Mui-selected.Mui-focusVisible {
-      background-color: rgba(245, 0, 87, 0.16);
-    }
-
-    .MuiPaginationItem-outlinedSecondary.Mui-selected.Mui-disabled {
-      color: Color.Silver400;
-    }
-
-    @media (hover: none) {
-      .MuiPaginationItem-outlinedSecondary.Mui-selected:hover,
-      .MuiPaginationItem-outlinedSecondary.Mui-selected.Mui-focusVisible {
-        background-color: transparent;
-      }
-    }
-
-    .MuiPaginationItem-rounded {
-      border-radius: 4px;
-    }
-
-    .MuiPaginationItem-ellipsis {
-      height: auto;
-    }
-
-    .MuiPaginationItem-ellipsis.Mui-disabled {
-      opacity: 0.38;
-    }
-
-    .MuiPaginationItem-icon {
-      margin: 0 -8px;
-      font-size: 1.25rem;
-    }
-  `);
-});