@verifiedinc-public/shared-ui-elements 1.3.3 → 2.1.0

package/src/stories/components/form/PhoneInput.stories.tsx

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { PhoneInput } from '../../../components/form/PhoneInput';
-import { fn } from '@storybook/test';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/PhoneInput',
-  component: PhoneInput,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  args: {
-    shouldHaveClearButton: true,
-  },
-} satisfies Meta<typeof PhoneInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
-  args: {
-    name: 'date',
-    label: 'Label',
-    onChange: fn(),
-    onValidPhone: fn(),
-    error: false,
-    helperText: 'Helper text',
-  },
-};

package/src/stories/components/form/SSNInput.stories.ts

@@ -1,30 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-
-import { fn } from '@storybook/test';
-import { SSNInput } from '../../../components/form/SSNInput';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/SSNInput',
-  component: SSNInput,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  args: {
-    name: 'ssn',
-    label: 'SSN',
-    error: false,
-    helperText: 'Helper text',
-    shouldHaveCloseAdornment: false,
-    onChange: fn(),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {};

package/src/stories/components/form/SelectInput.stories.ts

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { SelectInput } from '../../../components/form/SelectInput';
-import { fn } from '@storybook/test';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/SelectInput',
-  component: SelectInput,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  args: {
-    InputProps: {
-      name: 'Select Input',
-      label: 'Select Input',
-      error: false,
-      helperText: 'Helper text',
-      sx: { width: '200px' },
-    },
-    onChange: fn(),
-    onClear: fn(),
-    options: [
-      { label: 'Option 1', id: '1' },
-      { label: 'Option 2', id: '2' },
-      { label: 'Option 3', id: '3' },
-    ],
-    defaultOption: { label: 'Option 1', id: '1' },
-  },
-} satisfies Meta<typeof SelectInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {};

package/src/stories/hooks/useCopyToClipboard.stories.tsx

@@ -1,45 +0,0 @@
-import type { ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '../../components/Button';
-import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
-
-// Render to test the hook implementation.
-function HookRender(props: any): ReactElement {
-  const copyToClipboard = useCopyToClipboard({ type: 'text/plain' });
-  return (
-    <Button
-      onClick={() => {
-        copyToClipboard
-          .copy(props.content as string)
-          .then(() => undefined)
-          .catch(() => undefined);
-      }}
-    >
-      Copy
-    </Button>
-  );
-}
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Hooks/useCopyToClipboard',
-  component: HookRender,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const TextPlain: Story = {
-  args: {
-    content: 'Clicked!',
-  },
-};

package/src/styles/colors.ts

@@ -1,60 +0,0 @@
-import { colors as MUIColors } from '@mui/material';
-
-export const textDisabled = 'rgba(0,0,0,0.26)';
-
-export const white = '#ffffff';
-export const black = '#000000';
-
-export const green = '#0dbc3d';
-export const lightGreen = '#5ef06d';
-export const darkGreen = '#008a01';
-
-export const blue = '#164fd6';
-export const lightBlue = '#657bff';
-export const darkBlue = '#0028a3';
-
-export const red = '#eb0d28';
-export const lightRed = '#ff5952';
-export const darkRed = '#b00000';
-
-export const yellow = '#F5D328';
-export const lightYellow = '#5ef06d';
-export const darkYellow = '#bea008';
-
-export const warningContrast = '#625410';
-
-export const infoContrast = '#09225E';
-
-export const lightGrey = '#F9F9FB';
-export const grey = '#bdbdbd';
-export const darkGrey = '#797979';
-
-export const lightGreyContrast = MUIColors.grey['400'];
-export const greyContrast = MUIColors.grey['500'];
-export const darkGreyContrast = MUIColors.grey['600'];
-
-export const colors = {
-  textDisabled,
-  white,
-  black,
-  green,
-  lightGreen,
-  darkGreen,
-  blue,
-  lightBlue,
-  darkBlue,
-  red,
-  lightRed,
-  darkRed,
-  yellow,
-  lightYellow,
-  darkYellow,
-  warningContrast,
-  infoContrast,
-  lightGrey,
-  grey,
-  darkGrey,
-  lightGreyContrast,
-  greyContrast,
-  darkGreyContrast,
-};

package/src/styles/index.ts

@@ -1,3 +0,0 @@
-export * from './colors';
-export * from './theme';
-export * from './shadows';

package/src/styles/shadows.ts

@@ -1,6 +0,0 @@
-const bottomSheet =
-  '0px -2px 4px -1px rgba(0,0,0,0.2), 0px -4px 5px 0px rgba(0,0,0,0.14), 0px -1px 10px 0px rgba(0,0,0,0.12)';
-
-export const shadows = {
-  bottomSheet,
-};

package/src/styles/theme.ts

@@ -1,257 +0,0 @@
-import { createTheme } from '@mui/material';
-import { colors } from './colors';
-import { typography } from './typography';
-
-declare module '@mui/material/Button' {
-  interface ButtonPropsColorOverrides {
-    neutralContrast: true;
-    warningContrast: true;
-    infoContrast: true;
-  }
-}
-
-declare module '@mui/material/styles' {
-  // custom palette
-  interface Palette {
-    neutral: Palette['primary'];
-    neutralContrast: Palette['primary'];
-    warningContrast: Palette['primary'];
-    infoContrast: Palette['primary'];
-  }
-
-  interface PaletteOptions {
-    neutral: PaletteOptions['primary'];
-    neutralContrast: PaletteOptions['primary'];
-    warningContrast: PaletteOptions['primary'];
-    infoContrast: PaletteOptions['primary'];
-  }
-}
-
-// add neutral color palette as color option for buttons
-declare module '@mui/material' {
-  interface ButtonPropsColorOverrides {
-    neutral: true;
-    neutralContrast: true;
-    warningContrast: true;
-  }
-  interface SvgIconPropsColorOverrides {
-    neutral: true;
-    neutralContrast: true;
-    warningContrast: true;
-  }
-}
-
-interface ThemeOptions {
-  primaryFontFace: Record<string, any>;
-}
-
-export const theme = ({ primaryFontFace }: ThemeOptions) =>
-  createTheme({
-    breakpoints: {
-      values: {
-        xs: 0,
-        sm: 600,
-        md: 900,
-        lg: 1200,
-        xl: 1536,
-      },
-    },
-    typography: {
-      fontFamily: primaryFontFace.style.fontFamily,
-      ...typography,
-    },
-    palette: {
-      text: {
-        disabled: colors.textDisabled,
-      },
-      primary: {
-        main: colors.green,
-        light: colors.lightGreen,
-        dark: colors.darkGreen,
-        contrastText: colors.white,
-      },
-      secondary: {
-        main: colors.blue,
-        light: colors.lightBlue,
-        dark: colors.darkBlue,
-        contrastText: colors.white,
-      },
-      error: {
-        main: colors.red,
-        light: colors.lightRed,
-        dark: colors.darkRed,
-        contrastText: colors.white,
-      },
-      warning: {
-        main: colors.yellow,
-        light: colors.yellow,
-        dark: colors.darkYellow,
-        contrastText: colors.white,
-      },
-      success: {
-        main: colors.green,
-        light: colors.green,
-        dark: colors.darkGreen,
-        contrastText: colors.white,
-      },
-      info: {
-        main: colors.blue,
-        light: colors.lightBlue,
-        dark: colors.darkBlue,
-        contrastText: colors.infoContrast,
-      },
-      neutral: {
-        main: colors.grey,
-        light: colors.lightGrey,
-        dark: colors.darkGrey,
-      },
-      neutralContrast: {
-        main: colors.greyContrast,
-        light: colors.lightGreyContrast,
-        dark: colors.darkGreyContrast,
-      },
-      // We can register custom color to our palette with the augmentColor method.
-      warningContrast: {
-        main: colors.warningContrast,
-      },
-      infoContrast: {
-        main: colors.infoContrast,
-      },
-    },
-    components: {
-      MuiAlert: {
-        styleOverrides: {
-          action: {
-            // the action wrapper is pretty narrow (only fits about 5 characters of text) and the default is to wrap the text, which looks really bad
-            overflowWrap: 'normal',
-            // we want the action text, element, etc to be vertically centered if there are multiple lines of text in the alert body
-            display: 'flex',
-            alignItems: 'center',
-            padding: '8px 0',
-            marginRight: 0,
-            '& button, & a': {
-              lineHeight: '0',
-            },
-          },
-        },
-      },
-      MuiAlertTitle: {
-        styleOverrides: {
-          root: {
-            ...typography.body2,
-            fontSize: '1.1rem',
-            fontWeight: 700,
-          },
-        },
-      },
-      MuiListItemIcon: {
-        styleOverrides: {
-          root: {
-            minWidth: 34,
-          },
-        },
-      },
-      MuiListItemText: {
-        styleOverrides: {
-          primary: {
-            fontWeight: 800,
-          },
-        },
-      },
-      MuiFab: {
-        styleOverrides: {
-          circular: {
-            width: 42,
-            height: 42,
-          },
-          sizeSmall: {
-            width: 40,
-            height: 40,
-          },
-        },
-      },
-      MuiIconButton: {
-        styleOverrides: {
-          root: {
-            '&.Mui-disabled': {
-              svg: {
-                opacity: 0.4,
-              },
-            },
-          },
-        },
-      },
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            fontWeight: 800,
-          },
-        },
-      },
-      MuiDialog: {
-        defaultProps: {
-          maxWidth: 'xs',
-        },
-      },
-      MuiDialogTitle: {
-        styleOverrides: {
-          root: {
-            fontSize: 20,
-            fontWeight: 800,
-            textAlign: 'center',
-          },
-        },
-      },
-      MuiDialogContent: {
-        styleOverrides: {
-          root: {
-            paddingTop: '8px!important',
-            paddingBottom: 8,
-          },
-        },
-      },
-      MuiDialogActions: {
-        styleOverrides: {
-          root: {
-            paddingLeft: 24,
-            paddingRight: 24,
-            paddingBottom: 24,
-            justifyContent: 'space-between',
-            '& .MuiButton-root': {
-              marginTop: 0,
-            },
-          },
-        },
-      },
-      MuiRadio: {
-        styleOverrides: {
-          root: {
-            '&.Mui-disabled': {
-              color: `${colors.grey} !important`,
-            },
-          },
-        },
-      },
-      MuiTableRow: {
-        styleOverrides: {
-          root: {
-            '& th.MuiTableCell-root': {
-              fontSize: 12,
-              fontWeight: 700,
-              letterSpacing: 1,
-            },
-            '& td.MuiTableCell-root': {
-              fontSize: 20,
-              fontWeight: 300,
-            },
-          },
-        },
-      },
-      MuiTextField: {
-        defaultProps: {
-          variant: 'outlined',
-          size: 'small',
-        },
-      },
-    },
-  });

package/src/styles/typography.ts

@@ -1,86 +0,0 @@
-export const typography = {
-  h1: {
-    fontSize: '2.125rem',
-    fontWeight: 700,
-    letterSpacing: 0,
-    lineHeight: 1.35,
-  },
-  h2: {
-    fontSize: '1.5rem',
-    fontWeight: 700,
-    letterSpacing: 0,
-    lineHeight: 1.33,
-  },
-  h3: {
-    fontSize: '1.25rem',
-    fontWeight: 700,
-    letterSpacing: 0,
-    lineHeight: 1.35,
-  },
-  h4: {
-    fontSize: '1.25rem',
-    fontWeight: 700,
-    letterSpacing: 0,
-    lineHeight: 1.2,
-  },
-  h5: {
-    fontSize: '1rem',
-    fontWeight: 700,
-    letterSpacing: 0,
-    lineHeight: 1.1875,
-  },
-  h6: {
-    fontSize: '1rem',
-    fontWeight: 700,
-    letterSpacing: '0.15px',
-  },
-  subtitle1: {
-    fontSize: '1rem',
-    fontWeight: 700,
-    letterSpacing: 0,
-    lineHeight: 1.1875,
-  },
-  subtitle2: {
-    fontSize: '0.875rem',
-    fontWeight: 700,
-    letterSpacing: 0.1,
-    lineHeight: 1.5,
-  },
-  body1: {
-    fontSize: '1.25rem',
-    fontWeight: 300,
-    letterSpacing: 0,
-    lineHeight: 1.2,
-  },
-  body2: {
-    fontSize: '1rem',
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 1.1875,
-  },
-  button: {
-    // fontSize set by MUI button component sizes, setting it here will screw that up
-    fontWeight: 700,
-    letterSpacing: 0,
-    lineHeight: 1.2,
-    textTransform: 'uppercase' as const,
-  },
-  caption: {
-    fontSize: '0.75rem',
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 1.25,
-  },
-  overline: {
-    fontSize: '0.75rem',
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 1.25,
-  },
-  label: {
-    fontSize: '0.75rem',
-    fontWeight: 700,
-    letterSpacing: 1,
-    textTransform: 'uppercase' as const,
-  },
-};

package/src/utils/date.ts

@@ -1,32 +0,0 @@
-/**
- * Formats a timestamp into a pretty format of MM/DD/YYYY.
- * @param timestamp
- * @param separator
- */
-export const formatDateMMDDYYYY = (timestamp?: string): string => {
-  let date = new Date(Number(timestamp));
-
-  if (!timestamp) {
-    const nowDate = new Date();
-    date = new Date(
-      nowDate.getFullYear(),
-      nowDate.getMonth(),
-      nowDate.getDate(),
-    );
-  }
-
-  const day = String(date.getDate()).padStart(2, '0');
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const year = date.getFullYear();
-  return [month, day, year].join('/');
-};
-
-export const formatDateToTimestamp = (
-  dateValue: number | string | Date,
-): string => {
-  const date = new Date(dateValue);
-
-  date.setUTCHours(12);
-
-  return String(+date);
-};

package/src/utils/index.ts

@@ -1,6 +0,0 @@
-export * from './wrapPromise';
-export * from './date';
-export * from './phone';
-export * from './masks/index';
-export * from './omitProperty';
-export * from './ssn';

package/src/utils/masks/index.ts

@@ -1,6 +0,0 @@
-// Summary
-// - 9 means that it accepts only numbers from 0-9.
-export const masks = {
-  // Mask for date of birth in the format of MM/DD/YYYY.
-  DOB_MASK: '99/99/9999',
-};

package/src/utils/omitProperty.ts

@@ -1,19 +0,0 @@
-import _ from 'lodash';
-
-export function omitProperties<T>(obj: T, propertiesToOmit: string[]): T {
-  if (_.isArray(obj)) {
-    // If obj is an array, apply the function to each element
-    return obj.map((item) => omitProperties(item, propertiesToOmit)) as T;
-  } else if (_.isObject(obj)) {
-    // If obj is an object, omit the specified properties
-    let omittedObject: any = _.omit(obj, propertiesToOmit);
-    // Recursively apply the function to each property in the object
-    omittedObject = _.mapValues(omittedObject, (value) =>
-      omitProperties(value, propertiesToOmit),
-    );
-    return omittedObject as T;
-  } else {
-    // If obj is neither an array nor an object, return it as is
-    return obj;
-  }
-}