@verifiedinc-public/shared-ui-elements 1.2.1 → 1.3.0

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/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.1",
+  "version": "1.3.0",
   "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"
   },
@@ -98,8 +98,8 @@
     "@fontsource/lato": "^5.0.21",
     "@fontsource/material-icons": "^5.0.18",
     "@mona-health/react-input-mask": "^3.0.3",
-    "@mui/icons-material": ">= ^5",
-    "@mui/material": ">= ^5",
+    "@mui/icons-material": "^5 || ^6",
+    "@mui/material": "^5 || ^6",
     "libphonenumber-js": "^1.11.11",
     "qrcode": "^1.5.4",
     "react": "^18",

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/theme.ts

@@ -1,5 +1,6 @@
 import { createTheme } from '@mui/material';
-import * as colors from './colors';
+import { colors } from './colors';
+import { typography } from './typography';
 
 declare module '@mui/material/styles' {
   // custom palette
@@ -32,8 +33,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: {
@@ -205,5 +216,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;

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

@@ -1,41 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { QRCodeDisplay } from '../../components';
-declare const meta: {
-    title: string;
-    component: typeof QRCodeDisplay;
-    render: (args: any) => import("react").JSX.Element;
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-    argTypes: {
-        asset: {
-            type: "string";
-            description: string;
-        };
-        data: {
-            type: "string";
-            description: string;
-        };
-        svgSize: {
-            type: "number";
-            description: string;
-        };
-        logoSize: {
-            type: "number";
-            description: string;
-        };
-        fill: {
-            type: "string";
-            description: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;

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

@@ -1,44 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { TextField } from '../../components/TextField';
-declare const meta: {
-    title: string;
-    component: typeof TextField;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        variant: {
-            description: string;
-            type: {
-                name: "enum";
-                value: string[];
-            };
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        size: {
-            description: string;
-            type: {
-                name: "enum";
-                value: string[];
-            };
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-    };
-    args: {
-        size: "medium";
-        variant: "standard";
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Outlined: Story;
-export declare const OutlinedFixedLabel: Story;

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

@@ -1,54 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { Typography } from '../../components/Typography';
-declare const meta: {
-    title: string;
-    component: typeof Typography;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        align: {
-            options: string[];
-            control: {
-                type: "radio";
-            };
-            description: string;
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        variant: {
-            options: string[];
-            control: {
-                type: "radio";
-            };
-            description: string;
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        children: {
-            description: string;
-            type: "string";
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Heading1: Story;
-export declare const Heading2: Story;
-export declare const Heading3: Story;
-export declare const Heading4: Story;
-export declare const Heading5: Story;
-export declare const Heading6: Story;
-export declare const Subtitle1: Story;
-export declare const Subtitle2: Story;
-export declare const Body1: Story;
-export declare const Body2: Story;
-export declare const Button: Story;
-export declare const Overline: Story;

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

@@ -1,28 +0,0 @@
-import { VerifiedImage } from '../../components/verified/VerifiedImage';
-declare const _default: {
-    title: string;
-    component: typeof VerifiedImage;
-    parameters: {
-        layout: string;
-    };
-    argTypes: {
-        themeLight: {
-            control: {
-                type: string;
-            };
-        };
-        themeMain: {
-            control: {
-                type: string;
-            };
-        };
-        themeDark: {
-            control: {
-                type: string;
-            };
-        };
-    };
-    tags: string[];
-};
-export default _default;
-export declare const Default: any;

package/dist/stories/components/form/PhoneInput.stories.d.ts

@@ -1,16 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { PhoneInput } from '../../../components/form/PhoneInput';
-declare const meta: {
-    title: string;
-    component: typeof PhoneInput;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    args: {
-        shouldHaveClearButton: true;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;