@verifiedinc-public/shared-ui-elements 0.11.6 → 0.12.0

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

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

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

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

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

@@ -0,0 +1,34 @@
+import { colors } 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 = colors.grey['400'];
+export const greyContrast = colors.grey['500'];
+export const darkGreyContrast = colors.grey['600'];

package/src/styles/index.ts

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

package/src/styles/theme.ts

@@ -0,0 +1,209 @@
+import { createTheme } from '@mui/material';
+import * as colors from './colors';
+
+declare module '@mui/material/styles' {
+  // custom palette
+  interface Palette {
+    neutral: Palette['primary'];
+    neutralContrast: Palette['primary'];
+  }
+
+  interface PaletteOptions {
+    neutral: PaletteOptions['primary'];
+    neutralContrast: PaletteOptions['primary'];
+  }
+}
+
+// add neutral color palette as color option for buttons
+declare module '@mui/material' {
+  interface ButtonPropsColorOverrides {
+    neutral: true;
+    neutralContrast: true;
+  }
+  interface SvgIconPropsColorOverrides {
+    neutral: true;
+    neutralContrast: true;
+  }
+}
+
+interface ThemeOptions {
+  primaryFontFace: Record<string, any>;
+}
+
+export const theme = ({ primaryFontFace }: ThemeOptions) =>
+  createTheme({
+    typography: {
+      fontFamily: primaryFontFace.style.fontFamily,
+    },
+    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,
+      },
+    },
+    components: {
+      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,
+            },
+          },
+        },
+      },
+      MuiAlert: {
+        styleOverrides: {
+          root: {
+            maxWidth: '339px',
+          },
+          action: {
+            padding: '8px 0',
+            marginRight: 0,
+            alignItems: 'center',
+            '& button, & a': {
+              lineHeight: '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,
+            },
+          },
+        },
+      },
+    },
+  });

package/src/utils/date.ts

@@ -0,0 +1,41 @@
+/**
+ * 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('/');
+};
+
+// Get the minimum date instance with the given date, month, and year.
+export const getMinDateInstance = (
+  minDate = 1,
+  minMonth = 1,
+  minYear = 1900,
+): Date => {
+  return new Date(minYear, minMonth - 1, minDate, 0, 0, 0, 0);
+};
+
+// Get the maximum date instance.
+export const getMaxDateInstance = (allowFutureDates = true): Date => {
+  const nowDate = new Date();
+  const maxDate = allowFutureDates ? 31 : nowDate.getDate();
+  const maxMonth = allowFutureDates ? 12 : nowDate.getMonth() + 1;
+  const maxYear = allowFutureDates ? 2200 : nowDate.getFullYear();
+
+  return new Date(maxYear, maxMonth - 1, maxDate, 23, 59, 59, 999);
+};

package/src/utils/index.ts

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

package/src/utils/masks/index.ts

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

@@ -0,0 +1,19 @@
+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;
+  }
+}

package/src/utils/phone.ts

@@ -0,0 +1,76 @@
+import parsePhoneNumber, { isValidPhoneNumber } from 'libphonenumber-js';
+import find from 'lodash/find';
+
+interface CountryData {
+  countryName: string;
+  countryCode: string;
+  emoji: string;
+  mask: string;
+}
+
+export const countries: CountryData[] = [
+  {
+    countryName: 'Canada',
+    countryCode: 'CA',
+    emoji: '🇨🇦',
+    mask: '{+}{1} (000) 000-0000',
+  },
+  {
+    countryName: 'United States',
+    countryCode: 'US',
+    emoji: '🇺🇸',
+    mask: '{+}{1} (000) 000-0000',
+  },
+  {
+    countryName: 'Brazil',
+    countryCode: 'BR',
+    emoji: '🇧🇷',
+    mask: '{+}{55} (00) 00000-0000',
+  },
+];
+
+export function parseToPhoneNational(internationalPhone: string): string {
+  const phoneMeta = parsePhoneNumber(internationalPhone);
+  if (!phoneMeta) return internationalPhone;
+  return `+${phoneMeta.countryCallingCode} ${phoneMeta.formatNational()}`;
+}
+
+/**
+ * Get phone data by the international phone string.
+ * @param internationalPhone
+ */
+export function getPhoneData(
+  internationalPhone: string,
+): CountryData | undefined {
+  const phoneMeta = parsePhoneNumber(internationalPhone);
+  return countries.find((c) => c.countryCode === phoneMeta?.country);
+}
+
+/**
+ * Get phone data by property and value match.
+ * @param fieldName
+ * @param value
+ */
+export function getPhoneDataByFieldName(
+  fieldName: keyof CountryData,
+  value: string,
+): CountryData | undefined {
+  return find(countries, { [fieldName]: value });
+}
+
+/**
+ * Helper to sort countries by country name.
+ * @param a
+ * @param b
+ */
+export const sortByCountryName = (a: CountryData, b: CountryData) =>
+  a.countryName.localeCompare(b.countryName);
+
+/**
+ * Validate phone when it is valid and contains a country.
+ * @param internationalPhone
+ */
+export const validatePhone = (internationalPhone: string) => {
+  const phoneMeta = parsePhoneNumber(internationalPhone);
+  return isValidPhoneNumber(internationalPhone) && !!phoneMeta?.country;
+};

package/src/utils/wrapPromise.ts

@@ -0,0 +1,19 @@
+type WrappedPromiseEitherResponse<D, Error> =
+  | [Awaited<D>, null]
+  | [null, Error];
+
+/**
+ * Wrap a promise to return an array with the data and the error.
+ * @param promise The promise to wrap
+ * @returns
+ */
+export async function wrapPromise<D, Error = any>(
+  promise: PromiseLike<D>,
+): Promise<WrappedPromiseEitherResponse<D, Error>> {
+  try {
+    const data = await promise;
+    return [data, null];
+  } catch (error) {
+    return [null, error as Error];
+  }
+}

package/src/validations/birthDate.schema.ts

@@ -0,0 +1,54 @@
+import * as zod from 'zod';
+
+const validate = (value: string) => {
+  const now = new Date();
+  const minDate = new Date('1900-01-01');
+  const maxDate = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+    23,
+    59,
+    59,
+    999,
+  );
+  // Safari doesn't allow date strings with hyphens
+  const formattedValue = value.replace(/-/g, '/');
+  const valueDate = new Date(formattedValue);
+
+  if (valueDate >= minDate && valueDate <= maxDate) {
+    const date = Date.parse(String(new Date(formattedValue)));
+    return !isNaN(date);
+  }
+
+  return false;
+};
+
+export const birthDateSchema = zod.string().refine((value: string) => {
+  const regex = /\d{2}-\d{2}-\d{4}/;
+  if (regex.test(value)) {
+    return validate(value);
+  }
+  return false;
+}, 'Date of Birth is invalid');
+
+export const simpleBirthDateSchema = zod.string().refine((value: string) => {
+  const regex = /^\d{2}\d{2}\d{4}$/;
+  if (regex.test(value)) {
+    const formattedValue = `${value.slice(0, 2)}/${value.slice(
+      2,
+      4,
+    )}/${value.slice(4, 8)}`;
+    return validate(formattedValue);
+  }
+  return false;
+}, 'Date of Birth is invalid');
+
+export const shortenBirthDateSchema = zod.string().refine((value: string) => {
+  const regex = /^\d{2}\d{2}$/;
+  if (regex.test(value)) {
+    const formattedValue = `${value.slice(0, 2)}/${value.slice(2, 4)}/1970`;
+    return validate(formattedValue);
+  }
+  return false;
+}, 'Date of Birth is invalid');

package/src/validations/date.schema.ts

@@ -0,0 +1,10 @@
+import * as zod from 'zod';
+
+export const USDateSchema = zod.string().refine((value: string) => {
+  const regex = /^\d{2}\/\d{2}\/\d{4}$/;
+  if (regex.test(value)) {
+    const date = Date.parse(String(new Date(value)));
+    return !isNaN(date);
+  }
+  return false;
+}, 'Date is invalid');

package/src/validations/description.schema.ts

@@ -0,0 +1,5 @@
+import * as zod from 'zod';
+
+export const descriptionSchema = zod
+  .string()
+  .min(3, 'Must have enough description');

package/src/validations/email.schema.ts

@@ -0,0 +1,3 @@
+import { z } from 'zod';
+
+export const emailSchema = z.string().email();

package/src/validations/field.schema.ts

@@ -0,0 +1,3 @@
+import { z } from 'zod';
+
+export const fieldSchema = z.string().min(1);

package/src/validations/index.ts

@@ -0,0 +1,9 @@
+export * from './birthDate.schema';
+export * from './date.schema';
+export * from './description.schema';
+export * from './email.schema';
+export * from './field.schema';
+export * from './phone.schema';
+export * from './ssn.schema';
+export * from './state.schema';
+export * from './unix.schema';

package/src/validations/phone.schema.ts

@@ -0,0 +1,6 @@
+import * as zod from 'zod';
+
+export const phoneSchema = zod.string().refine((value: string) => {
+  const regex = /\+1\d{3}\d{3}\d{4}/;
+  return regex.test(value);
+}, 'Phone is invalid');

package/src/validations/ssn.schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+// SSN schema, validation regex were gathered from: https://uibakery.io/regex-library/ssn
+export const SSNSchema = z
+  .string()
+  .regex(/^(?!666|000|9\d{2})\d{3}(?!00)\d{2}(?!0{4})\d{4}$/);

package/src/validations/state.schema.ts

@@ -0,0 +1,3 @@
+import { z } from 'zod';
+
+export const stateSchema = z.string().min(2).max(2);