@superdispatch/ui 0.21.6 → 0.21.13

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

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

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

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

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

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

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

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

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