@verifiedinc-public/shared-ui-elements 1.2.2 → 1.3.1

package/dist/styles/colors.d.ts

@@ -21,3 +21,28 @@ export declare const darkGrey = "#797979";
 export declare const lightGreyContrast: "#bdbdbd";
 export declare const greyContrast: "#9e9e9e";
 export declare const darkGreyContrast: "#757575";
+export declare const colors: {
+    textDisabled: string;
+    white: string;
+    black: string;
+    green: string;
+    lightGreen: string;
+    darkGreen: string;
+    blue: string;
+    lightBlue: string;
+    darkBlue: string;
+    red: string;
+    lightRed: string;
+    darkRed: string;
+    yellow: string;
+    lightYellow: string;
+    darkYellow: string;
+    warningContrast: string;
+    infoContrast: string;
+    lightGrey: string;
+    grey: string;
+    darkGrey: string;
+    lightGreyContrast: "#bdbdbd";
+    greyContrast: "#9e9e9e";
+    darkGreyContrast: "#757575";
+};

package/dist/styles/index.d.ts

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

package/dist/styles/shadows.d.ts

@@ -0,0 +1,3 @@
+export declare const shadows: {
+    bottomSheet: string;
+};

package/dist/styles/theme.d.ts

@@ -1,21 +1,34 @@
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        neutralContrast: true;
+        warningContrast: true;
+        infoContrast: true;
+    }
+}
 declare module '@mui/material/styles' {
     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'];
     }
 }
 declare module '@mui/material' {
     interface ButtonPropsColorOverrides {
         neutral: true;
         neutralContrast: true;
+        warningContrast: true;
     }
     interface SvgIconPropsColorOverrides {
         neutral: true;
         neutralContrast: true;
+        warningContrast: true;
     }
 }
 interface ThemeOptions {

package/dist/styles/typography.d.ts

@@ -0,0 +1,85 @@
+export declare const typography: {
+    h1: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    h2: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    h3: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    h4: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    h5: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    h6: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    subtitle1: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    subtitle2: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    body1: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    body2: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    button: {
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+        textTransform: "uppercase";
+    };
+    caption: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    overline: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        lineHeight: number;
+    };
+    label: {
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: number;
+        textTransform: "uppercase";
+    };
+};

package/dist/utils/string/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toCapitalize';
+export * from './toSentenceCase';

package/dist/utils/string/toCapitalize.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Capitalize the first letter of every word, e.g "hello world" -> "Hello World"
+ * @param str
+ */
+export declare function toCapitalize(str: string): string;

package/dist/utils/string/toSentenceCase.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Capitalize the first letter of a string e.g "hello world" -> "Hello world"
+ * @param str
+ */
+export declare function toSentenceCase(str: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "keywords": [],
@@ -33,7 +33,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prebuild": "rm -rf dist",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && esbuild dist/shared-ui-elements.mjs --minify --outfile=dist/shared-ui-elements.mjs --allow-overwrite",
     "prepublishOnly": "npm run build",
     "publish:prerelease": "npm version prerelease --preid=beta && npm publish --tag beta"
   },

package/src/components/form/DateInput.tsx

@@ -1,8 +1,9 @@
-import { Box, TextField, type TextFieldProps } from '@mui/material';
 import { forwardRef, useState, type ChangeEventHandler } from 'react';
+import { Box, TextField, type TextFieldProps } from '@mui/material';
+
 import { masks } from '../../utils/masks';
+
 import { InputMask } from './InputMask';
-import { inputStyle } from './styles/input';
 
 interface DateInputProps extends Omit<TextFieldProps, 'onBlur' | 'onChange'> {
   label?: string;
@@ -43,7 +44,6 @@ function DateInputComponent(
   };
 
   const textFieldStyle: TextFieldProps = {
-    ...inputStyle,
     label,
     error,
     helperText,

package/src/components/form/DefaultInput.tsx

@@ -1,5 +1,4 @@
 import { forwardRef } from 'react';
-import { inputStyle } from './styles/input';
 import { TextField, type TextFieldProps } from '../TextField';
 
 /**
@@ -16,7 +15,6 @@ const DefaultInput = (
   return (
     <TextField
       inputRef={ref}
-      {...inputStyle}
       variant={variant}
       margin={margin}
       fullWidth

package/src/components/form/PhoneInput.tsx

@@ -1,8 +1,8 @@
 import { Box, InputAdornment, type InputProps } from '@mui/material';
 import { type TextFieldProps } from '../TextField';
 import { useEffect, useMemo, useRef, useState } from 'react';
+
 import { getPhoneDataByFieldName } from '../../utils/phone';
-import { inputStyle } from './styles/input';
 import { phoneSchema } from '../../validations/phone.schema';
 
 import { TextMaskCustom } from './TextMaskCustom';
@@ -104,7 +104,6 @@ export function PhoneInput({
 
   const inputProps: TextFieldProps = {
     inputRef,
-    ...inputStyle,
     label,
     name: `_${name}`,
     helperText,

package/src/components/form/SSNInput.tsx

@@ -1,8 +1,8 @@
+import { useState } from 'react';
 import { Box, TextField, type TextFieldProps } from '@mui/material';
-import { useEffect, useState } from 'react';
+
 import { usePrevious } from '../../hooks/usePrevious';
 import { DataFieldClearAdornment } from './DataFieldClearAdornment';
-import { inputStyle } from './styles/input';
 import { TextMaskCustom } from './TextMaskCustom';
 
 type TextStyles = Omit<TextFieldProps, 'onChange'> & { onChange: any };
@@ -42,7 +42,6 @@ export function SSNInput({
   };
 
   const textFieldStyle: TextStyles = {
-    ...inputStyle,
     value,
     onChange: (e: any, nativeEvent: any) => {
       if (!nativeEvent) return;

package/src/components/form/SelectInput.tsx

@@ -4,7 +4,6 @@ import {
   type TextFieldProps as InternalFieldProps,
 } from '@mui/material';
 import { useState } from 'react';
-import { inputStyle } from './styles/input';
 
 interface TextFieldProps extends Omit<InternalFieldProps, 'onChange'> {}
 
@@ -62,7 +61,6 @@ export function SelectInput({
   };
 
   const textFieldStyle: TextFieldProps = {
-    ...inputStyle,
     inputProps: {
       tabIndex: 0,
     },

package/src/styles/colors.ts

@@ -1,4 +1,4 @@
-import { colors } from '@mui/material';
+import { colors as MUIColors } from '@mui/material';
 
 export const textDisabled = 'rgba(0,0,0,0.26)';
 
@@ -29,6 +29,32 @@ 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'];
+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,2 +1,3 @@
 export * from './colors';
 export * from './theme';
+export * from './shadows';

package/src/styles/shadows.ts

@@ -0,0 +1,6 @@
+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,16 +1,29 @@
 import { createTheme } from '@mui/material';
-import * as colors from './colors';
+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'];
   }
 }
 
@@ -19,10 +32,12 @@ declare module '@mui/material' {
   interface ButtonPropsColorOverrides {
     neutral: true;
     neutralContrast: true;
+    warningContrast: true;
   }
   interface SvgIconPropsColorOverrides {
     neutral: true;
     neutralContrast: true;
+    warningContrast: true;
   }
 }
 
@@ -32,8 +47,18 @@ interface ThemeOptions {
 
 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: {
@@ -85,8 +110,43 @@ export const theme = ({ primaryFontFace }: ThemeOptions) =>
         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: {
+          root: {
+            maxWidth: '339px',
+          },
+          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: {
@@ -166,21 +226,6 @@ export const theme = ({ primaryFontFace }: ThemeOptions) =>
           },
         },
       },
-      MuiAlert: {
-        styleOverrides: {
-          root: {
-            maxWidth: '339px',
-          },
-          action: {
-            padding: '8px 0',
-            marginRight: 0,
-            alignItems: 'center',
-            '& button, & a': {
-              lineHeight: '0',
-            },
-          },
-        },
-      },
       MuiRadio: {
         styleOverrides: {
           root: {
@@ -205,5 +250,11 @@ export const theme = ({ primaryFontFace }: ThemeOptions) =>
           },
         },
       },
+      MuiTextField: {
+        defaultProps: {
+          variant: 'outlined',
+          size: 'small',
+        },
+      },
     },
   });

package/src/styles/typography.ts

@@ -0,0 +1,86 @@
+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/string/index.ts

@@ -0,0 +1,2 @@
+export * from './toCapitalize';
+export * from './toSentenceCase';

package/src/utils/string/toCapitalize.ts

@@ -0,0 +1,13 @@
+/**
+ * Capitalize the first letter of every word, e.g "hello world" -> "Hello World"
+ * @param str
+ */
+export function toCapitalize(str: string): string {
+  return str
+    .split(' ')
+    .map(
+      (substr) =>
+        `${substr.charAt(0).toUpperCase()}${substr.slice(1).toLowerCase()}`,
+    )
+    .join(' ');
+}

package/src/utils/string/toSentenceCase.ts

@@ -0,0 +1,7 @@
+/**
+ * Capitalize the first letter of a string e.g "hello world" -> "Hello world"
+ * @param str
+ */
+export function toSentenceCase(str: string) {
+  return `${str.charAt(0).toUpperCase()}${str.slice(1).toLowerCase()}`;
+}

package/dist/components/form/styles/input.d.ts

@@ -1,6 +0,0 @@
-import { TextFieldProps } from '../../../components/TextField';
-/**
- * The base style definition for input fields, it should reflect changes across all inputs.
- */
-export declare const inputStyle: TextFieldProps;
-export declare const readOnlyInputStyle: TextFieldProps;

package/dist/stories/components/Alert.stories.d.ts

@@ -1,11 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Alert } from '../../components/Alert';
-type PropsAndCustomArgs = React.ComponentProps<typeof Alert> & {
-    text?: string;
-    withAction?: boolean;
-};
-declare const meta: Meta<PropsAndCustomArgs>;
-export default meta;
-type Story = StoryObj<PropsAndCustomArgs>;
-export declare const Default: Story;
-export declare const WithButton: Story;

package/dist/stories/components/CredentialRequestsEditor.stories.d.ts

@@ -1,35 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { CredentialRequestsEditor } from '../../components/CredentialRequestsEditor';
-declare const meta: {
-    title: string;
-    component: typeof CredentialRequestsEditor;
-    render: (args: any, { loaded: { credentialRequests, schemas } }: import('@storybook/csf').StoryContext<import('@storybook/react').ReactRenderer, Omit<import('../../components/CredentialRequestsEditor/CredentialRequestsEditor.context').CredentialRequestsEditorProps, "children">>) => import("react").JSX.Element;
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-    argTypes: {
-        credentialRequests: {
-            description: string;
-        };
-        schemas: {
-            description: string;
-        };
-        addButtonText: {
-            type: "string";
-            description: string;
-        };
-        features: {
-            control: "object";
-            description: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;