@verifiedinc-public/shared-ui-elements 0.11.6

package/dist/styles/colors.d.ts

@@ -0,0 +1,23 @@
+export declare const textDisabled = "rgba(0,0,0,0.26)";
+export declare const white = "#ffffff";
+export declare const black = "#000000";
+export declare const green = "#0dbc3d";
+export declare const lightGreen = "#5ef06d";
+export declare const darkGreen = "#008a01";
+export declare const blue = "#164fd6";
+export declare const lightBlue = "#657bff";
+export declare const darkBlue = "#0028a3";
+export declare const red = "#eb0d28";
+export declare const lightRed = "#ff5952";
+export declare const darkRed = "#b00000";
+export declare const yellow = "#F5D328";
+export declare const lightYellow = "#5ef06d";
+export declare const darkYellow = "#bea008";
+export declare const warningContrast = "#625410";
+export declare const infoContrast = "#09225E";
+export declare const lightGrey = "#F9F9FB";
+export declare const grey = "#bdbdbd";
+export declare const darkGrey = "#797979";
+export declare const lightGreyContrast: "#bdbdbd";
+export declare const greyContrast: "#9e9e9e";
+export declare const darkGreyContrast: "#757575";

package/dist/styles/index.d.ts

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

package/dist/styles/theme.d.ts

@@ -0,0 +1,25 @@
+declare module '@mui/material/styles' {
+    interface Palette {
+        neutral: Palette['primary'];
+        neutralContrast: Palette['primary'];
+    }
+    interface PaletteOptions {
+        neutral: PaletteOptions['primary'];
+        neutralContrast: PaletteOptions['primary'];
+    }
+}
+declare module '@mui/material' {
+    interface ButtonPropsColorOverrides {
+        neutral: true;
+        neutralContrast: true;
+    }
+    interface SvgIconPropsColorOverrides {
+        neutral: true;
+        neutralContrast: true;
+    }
+}
+interface ThemeOptions {
+    primaryFontFace: Record<string, any>;
+}
+export declare const theme: ({ primaryFontFace }: ThemeOptions) => import('@mui/material').Theme;
+export {};

package/dist/utils/date.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Formats a timestamp into a pretty format of MM/DD/YYYY.
+ * @param timestamp
+ * @param separator
+ */
+export declare const formatDateMMDDYYYY: (timestamp?: string) => string;
+export declare const getMinDateInstance: (minDate?: number, minMonth?: number, minYear?: number) => Date;
+export declare const getMaxDateInstance: (allowFutureDates?: boolean) => Date;

package/dist/utils/index.d.ts

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

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

@@ -0,0 +1,3 @@
+export declare const masks: {
+    DOB_MASK: string;
+};

package/dist/utils/omitProperty.d.ts

@@ -0,0 +1 @@
+export declare function omitProperties<T>(obj: T, propertiesToOmit: string[]): T;

package/dist/utils/phone.d.ts

@@ -0,0 +1,31 @@
+interface CountryData {
+    countryName: string;
+    countryCode: string;
+    emoji: string;
+    mask: string;
+}
+export declare const countries: CountryData[];
+export declare function parseToPhoneNational(internationalPhone: string): string;
+/**
+ * Get phone data by the international phone string.
+ * @param internationalPhone
+ */
+export declare function getPhoneData(internationalPhone: string): CountryData | undefined;
+/**
+ * Get phone data by property and value match.
+ * @param fieldName
+ * @param value
+ */
+export declare function getPhoneDataByFieldName(fieldName: keyof CountryData, value: string): CountryData | undefined;
+/**
+ * Helper to sort countries by country name.
+ * @param a
+ * @param b
+ */
+export declare const sortByCountryName: (a: CountryData, b: CountryData) => number;
+/**
+ * Validate phone when it is valid and contains a country.
+ * @param internationalPhone
+ */
+export declare const validatePhone: (internationalPhone: string) => boolean;
+export {};

package/dist/utils/wrapPromise.d.ts

@@ -0,0 +1,8 @@
+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 declare function wrapPromise<D, Error = any>(promise: PromiseLike<D>): Promise<WrappedPromiseEitherResponse<D, Error>>;
+export {};

package/dist/validations/birthDate.schema.d.ts

@@ -0,0 +1,4 @@
+import * as zod from 'zod';
+export declare const birthDateSchema: zod.ZodEffects<zod.ZodString, string, string>;
+export declare const simpleBirthDateSchema: zod.ZodEffects<zod.ZodString, string, string>;
+export declare const shortenBirthDateSchema: zod.ZodEffects<zod.ZodString, string, string>;

package/dist/validations/date.schema.d.ts

@@ -0,0 +1,2 @@
+import * as zod from 'zod';
+export declare const USDateSchema: zod.ZodEffects<zod.ZodString, string, string>;

package/dist/validations/description.schema.d.ts

@@ -0,0 +1,2 @@
+import * as zod from 'zod';
+export declare const descriptionSchema: zod.ZodString;

package/dist/validations/email.schema.d.ts

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export declare const emailSchema: z.ZodString;

package/dist/validations/field.schema.d.ts

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export declare const fieldSchema: z.ZodString;

package/dist/validations/index.d.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/dist/validations/phone.schema.d.ts

@@ -0,0 +1,2 @@
+import * as zod from 'zod';
+export declare const phoneSchema: zod.ZodEffects<zod.ZodString, string, string>;

package/dist/validations/ssn.schema.d.ts

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export declare const SSNSchema: z.ZodString;

package/dist/validations/state.schema.d.ts

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export declare const stateSchema: z.ZodString;

package/dist/validations/unix.schema.d.ts

@@ -0,0 +1,2 @@
+import { z as zod } from 'zod';
+export declare const getUnixSchema: (message?: string) => zod.ZodEffects<zod.ZodString, string, string>;

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@verifiedinc-public/shared-ui-elements",
+  "version": "0.11.6",
+  "description": "A set of UI components, utilities that is shareable with the core apps.",
+  "private": false,
+  "keywords": [],
+  "author": "VerifiedInc",
+  "engines": {
+    "node": ">=20.10.0",
+    "npm": ">=10.x.x"
+  },
+  "main": "/dist/shared-ui-elements.mjs",
+  "types": "/dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/shared-ui-elements.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/shared-ui-elements.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./hooks": {
+      "import": "./dist/shared-ui-elements.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/shared-ui-elements.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./validations": {
+      "import": "./dist/shared-ui-elements.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": {
+      "import": "./dist/shared-ui-elements.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "vitest": "vitest",
+    "lint": "npm run eslint && npm run prettier:check && npm run typecheck",
+    "eslint": "eslint .",
+    "prettier": "prettier --write .",
+    "prettier:check": "prettier --check .",
+    "typecheck": "tsc -b",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prebuild": "rm -rf dist",
+    "build": "tsc && vite build",
+    "prepublishOnly": "npm run build",
+    "publish:prerelease": "npm version prerelease --preid=beta && npm publish --tag beta"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^2.0.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@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",
+    "@storybook/addon-essentials": "^8.3.1",
+    "@storybook/addon-interactions": "^8.3.1",
+    "@storybook/addon-links": "^8.3.1",
+    "@storybook/addon-onboarding": "^8.3.1",
+    "@storybook/addon-themes": "^8.3.1",
+    "@storybook/addon-viewport": "^8.3.1",
+    "@storybook/blocks": "^8.3.1",
+    "@storybook/react": "^8.3.1",
+    "@storybook/react-vite": "^8.3.1",
+    "@storybook/test": "^8.3.1",
+    "@testing-library/dom": "^10.3.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/qrcode": "^1.5.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-vitest": "^0.0.53",
+    "jsdom": "^24.1.0",
+    "libphonenumber-js": "^1.11.11",
+    "prettier": "^3.1.0",
+    "qrcode": "^1.5.4",
+    "react": "^18",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18",
+    "react-hook-form": "^7.52.1",
+    "react-imask": "^7.6.1",
+    "storybook": "^8.3.1",
+    "tsconfig-paths": "^4.2.0",
+    "tsx": "^3.12.4",
+    "typescript": "^5.2.2",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^1.6.0",
+    "zod": "^3.23.8"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@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",
+    "jsdom": "^24.1.0",
+    "libphonenumber-js": "^1.11.11",
+    "qrcode": "^1.5.4",
+    "react": "^18",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18",
+    "react-hook-form": "^7.52.1",
+    "react-imask": "^7.6.1",
+    "zod": "^3.23.8"
+  }
+}