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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/README.md +3 -29
  2. package/dist/components/index.mjs +1 -0
  3. package/dist/hooks/index.mjs +1 -0
  4. package/dist/index.mjs +1 -0
  5. package/dist/shared/index-CTvz4BbG.mjs +105 -0
  6. package/dist/shared/phone.schema-XBbyizhq.mjs +1 -0
  7. package/dist/shared/shadows-fgmuXym6.mjs +1 -0
  8. package/dist/shared/unix.schema-CMYTtXco.mjs +1 -0
  9. package/dist/shared/useQRCode-DXiPIj-D.mjs +1 -0
  10. package/dist/shared/useSearchParams-CW9y02Ym.mjs +1 -0
  11. package/dist/styles/index.mjs +1 -0
  12. package/dist/utils/masks/index.mjs +1 -0
  13. package/dist/utils/string/index.mjs +1 -0
  14. package/dist/validations/index.mjs +1 -0
  15. package/package.json +29 -8
  16. package/dist/shared-ui-elements.mjs +0 -105
  17. package/src/components/Alert/Alert.tsx +0 -8
  18. package/src/components/Alert/FullWidthAlert.tsx +0 -27
  19. package/src/components/Alert/index.ts +0 -2
  20. package/src/components/Backdrop/index.tsx +0 -34
  21. package/src/components/Banners/Banner.tsx +0 -42
  22. package/src/components/Banners/ExactBirthdayBanner.tsx +0 -18
  23. package/src/components/Banners/ResendPhoneBanner.tsx +0 -55
  24. package/src/components/Banners/TestPhoneNumbersBanner.tsx +0 -25
  25. package/src/components/Banners/index.tsx +0 -4
  26. package/src/components/Button/index.tsx +0 -8
  27. package/src/components/CredentialRequestsEditor/CredentialRequestsEditor.context.tsx +0 -98
  28. package/src/components/CredentialRequestsEditor/components/CredentialRequestsField.tsx +0 -103
  29. package/src/components/CredentialRequestsEditor/components/DataFieldAccordion.tsx +0 -337
  30. package/src/components/CredentialRequestsEditor/components/DataFieldDeleteModal.tsx +0 -64
  31. package/src/components/CredentialRequestsEditor/components/DataFieldDescription.tsx +0 -68
  32. package/src/components/CredentialRequestsEditor/components/DataFieldMandatory.tsx +0 -84
  33. package/src/components/CredentialRequestsEditor/components/DataFieldMulti.tsx +0 -74
  34. package/src/components/CredentialRequestsEditor/components/DataFieldOptionType.tsx +0 -84
  35. package/src/components/CredentialRequestsEditor/components/DataFieldSection.tsx +0 -48
  36. package/src/components/CredentialRequestsEditor/components/DataFieldUserInput.tsx +0 -71
  37. package/src/components/CredentialRequestsEditor/components/RadioOption.tsx +0 -89
  38. package/src/components/CredentialRequestsEditor/contexts/CredentialRequestFieldContext.tsx +0 -36
  39. package/src/components/CredentialRequestsEditor/index.tsx +0 -15
  40. package/src/components/CredentialRequestsEditor/types/compositeCredentialSchema.ts +0 -1
  41. package/src/components/CredentialRequestsEditor/types/credentialSchemasDto.ts +0 -3
  42. package/src/components/CredentialRequestsEditor/types/form.ts +0 -28
  43. package/src/components/CredentialRequestsEditor/types/mandatoryEnum.ts +0 -5
  44. package/src/components/CredentialRequestsEditor/utils/buildDataFieldValue.ts +0 -65
  45. package/src/components/CredentialRequestsEditor/utils/prettyField.ts +0 -16
  46. package/src/components/Image.tsx +0 -10
  47. package/src/components/QRCodeDisplay/index.tsx +0 -50
  48. package/src/components/RequiredLabel/index.tsx +0 -15
  49. package/src/components/Snackbar/index.tsx +0 -156
  50. package/src/components/TextField/index.tsx +0 -8
  51. package/src/components/Tip/index.tsx +0 -18
  52. package/src/components/Typography/index.tsx +0 -8
  53. package/src/components/When.tsx +0 -28
  54. package/src/components/form/CountrySelector.tsx +0 -96
  55. package/src/components/form/DataFieldClearAdornment.tsx +0 -28
  56. package/src/components/form/DateInput.tsx +0 -78
  57. package/src/components/form/DefaultInput.tsx +0 -26
  58. package/src/components/form/InputMask.tsx +0 -41
  59. package/src/components/form/OTPInput.tsx +0 -254
  60. package/src/components/form/PhoneInput.tsx +0 -152
  61. package/src/components/form/SSNInput.tsx +0 -99
  62. package/src/components/form/SelectInput.tsx +0 -101
  63. package/src/components/form/TextMaskCustom.tsx +0 -48
  64. package/src/components/form/index.ts +0 -5
  65. package/src/components/index.ts +0 -13
  66. package/src/components/terms/AcceptTermsNotice.tsx +0 -27
  67. package/src/components/terms/LegalLink.tsx +0 -22
  68. package/src/components/verified/VerifiedImage.tsx +0 -272
  69. package/src/components/verified/VerifiedIncLogo.tsx +0 -11
  70. package/src/components/verified/index.ts +0 -2
  71. package/src/hooks/index.ts +0 -6
  72. package/src/hooks/useCallbackRef.ts +0 -22
  73. package/src/hooks/useCopyToClipboard.ts +0 -76
  74. package/src/hooks/useDisclosure.ts +0 -96
  75. package/src/hooks/useLocalStorage.ts +0 -24
  76. package/src/hooks/usePrevious.ts +0 -17
  77. package/src/hooks/useQRCode.ts +0 -62
  78. package/src/hooks/useSearchParams.ts +0 -7
  79. package/src/index.ts +0 -13
  80. package/src/stories/components/Alert.stories.tsx +0 -41
  81. package/src/stories/components/Button.stories.ts +0 -49
  82. package/src/stories/components/CredentialRequestsEditor.stories.tsx +0 -98
  83. package/src/stories/components/QRCodeDisplay.stories.tsx +0 -60
  84. package/src/stories/components/TextField.stories.ts +0 -59
  85. package/src/stories/components/Typography.stories.ts +0 -140
  86. package/src/stories/components/VerifiedImage.stories.tsx +0 -32
  87. package/src/stories/components/form/DateInput.stories.ts +0 -36
  88. package/src/stories/components/form/OTPInput.stories.tsx +0 -90
  89. package/src/stories/components/form/PhoneInput.stories.tsx +0 -34
  90. package/src/stories/components/form/SSNInput.stories.ts +0 -30
  91. package/src/stories/components/form/SelectInput.stories.ts +0 -39
  92. package/src/stories/hooks/useCopyToClipboard.stories.tsx +0 -45
  93. package/src/styles/colors.ts +0 -60
  94. package/src/styles/index.ts +0 -3
  95. package/src/styles/shadows.ts +0 -6
  96. package/src/styles/theme.ts +0 -257
  97. package/src/styles/typography.ts +0 -86
  98. package/src/utils/date.ts +0 -32
  99. package/src/utils/index.ts +0 -6
  100. package/src/utils/masks/index.ts +0 -6
  101. package/src/utils/omitProperty.ts +0 -19
  102. package/src/utils/phone.ts +0 -76
  103. package/src/utils/ssn.ts +0 -8
  104. package/src/utils/string/index.ts +0 -2
  105. package/src/utils/string/toCapitalize.ts +0 -13
  106. package/src/utils/string/toSentenceCase.ts +0 -7
  107. package/src/utils/wrapPromise.ts +0 -19
  108. package/src/validations/date.schema.ts +0 -18
  109. package/src/validations/description.schema.ts +0 -5
  110. package/src/validations/email.schema.ts +0 -3
  111. package/src/validations/field.schema.ts +0 -3
  112. package/src/validations/index.ts +0 -8
  113. package/src/validations/phone.schema.ts +0 -6
  114. package/src/validations/ssn.schema.ts +0 -24
  115. package/src/validations/state.schema.ts +0 -3
  116. package/src/validations/unix.schema.ts +0 -11
@@ -1,76 +0,0 @@
1
- import parsePhoneNumber, { isValidPhoneNumber } from 'libphonenumber-js';
2
- import find from 'lodash/find';
3
-
4
- interface CountryData {
5
- countryName: string;
6
- countryCode: string;
7
- emoji: string;
8
- mask: string;
9
- }
10
-
11
- export const countries: CountryData[] = [
12
- {
13
- countryName: 'Canada',
14
- countryCode: 'CA',
15
- emoji: '🇨🇦',
16
- mask: '{+}{1} (000) 000-0000',
17
- },
18
- {
19
- countryName: 'United States',
20
- countryCode: 'US',
21
- emoji: '🇺🇸',
22
- mask: '{+}{1} (000) 000-0000',
23
- },
24
- {
25
- countryName: 'Brazil',
26
- countryCode: 'BR',
27
- emoji: '🇧🇷',
28
- mask: '{+}{55} (00) 00000-0000',
29
- },
30
- ];
31
-
32
- export function parseToPhoneNational(internationalPhone: string): string {
33
- const phoneMeta = parsePhoneNumber(internationalPhone);
34
- if (!phoneMeta) return internationalPhone;
35
- return `+${phoneMeta.countryCallingCode} ${phoneMeta.formatNational()}`;
36
- }
37
-
38
- /**
39
- * Get phone data by the international phone string.
40
- * @param internationalPhone
41
- */
42
- export function getPhoneData(
43
- internationalPhone: string,
44
- ): CountryData | undefined {
45
- const phoneMeta = parsePhoneNumber(internationalPhone);
46
- return countries.find((c) => c.countryCode === phoneMeta?.country);
47
- }
48
-
49
- /**
50
- * Get phone data by property and value match.
51
- * @param fieldName
52
- * @param value
53
- */
54
- export function getPhoneDataByFieldName(
55
- fieldName: keyof CountryData,
56
- value: string,
57
- ): CountryData | undefined {
58
- return find(countries, { [fieldName]: value });
59
- }
60
-
61
- /**
62
- * Helper to sort countries by country name.
63
- * @param a
64
- * @param b
65
- */
66
- export const sortByCountryName = (a: CountryData, b: CountryData) =>
67
- a.countryName.localeCompare(b.countryName);
68
-
69
- /**
70
- * Validate phone when it is valid and contains a country.
71
- * @param internationalPhone
72
- */
73
- export const validatePhone = (internationalPhone: string) => {
74
- const phoneMeta = parsePhoneNumber(internationalPhone);
75
- return isValidPhoneNumber(internationalPhone) && !!phoneMeta?.country;
76
- };
package/src/utils/ssn.ts DELETED
@@ -1,8 +0,0 @@
1
- /**
2
- * Formats a SSN to the following format: •••-••-3333
3
- * accepts SSNs with or without dashes (e.g. '111-22-3333' or '11223333')
4
- * @param {string} rawValue the raw value of the ssncredential
5
- * @returns {string} the formatted value
6
- */
7
- export const ssnFormatter = (rawValue: string): string =>
8
- rawValue.replace(/(\d{3})-?(\d{2})-?(\d{4})/, '•••-••-$3');
@@ -1,2 +0,0 @@
1
- export * from './toCapitalize';
2
- export * from './toSentenceCase';
@@ -1,13 +0,0 @@
1
- /**
2
- * Capitalize the first letter of every word, e.g "hello world" -> "Hello World"
3
- * @param str
4
- */
5
- export function toCapitalize(str: string): string {
6
- return str
7
- .split(' ')
8
- .map(
9
- (substr) =>
10
- `${substr.charAt(0).toUpperCase()}${substr.slice(1).toLowerCase()}`,
11
- )
12
- .join(' ');
13
- }
@@ -1,7 +0,0 @@
1
- /**
2
- * Capitalize the first letter of a string e.g "hello world" -> "Hello world"
3
- * @param str
4
- */
5
- export function toSentenceCase(str: string) {
6
- return `${str.charAt(0).toUpperCase()}${str.slice(1).toLowerCase()}`;
7
- }
@@ -1,19 +0,0 @@
1
- type WrappedPromiseEitherResponse<D, Error> =
2
- | [Awaited<D>, null]
3
- | [null, Error];
4
-
5
- /**
6
- * Wrap a promise to return an array with the data and the error.
7
- * @param promise The promise to wrap
8
- * @returns
9
- */
10
- export async function wrapPromise<D, Error = any>(
11
- promise: PromiseLike<D>,
12
- ): Promise<WrappedPromiseEitherResponse<D, Error>> {
13
- try {
14
- const data = await promise;
15
- return [data, null];
16
- } catch (error) {
17
- return [null, error as Error];
18
- }
19
- }
@@ -1,18 +0,0 @@
1
- import * as zod from 'zod';
2
-
3
- export const USDateSchema = zod.string().refine((value: string) => {
4
- const regex = /^\d{2}\/\d{2}\/\d{4}$/;
5
- if (regex.test(value)) {
6
- const date = Date.parse(String(new Date(value)));
7
- return !isNaN(date);
8
- }
9
- return false;
10
- }, 'Date is invalid');
11
-
12
- export const getDateSchemaWithPastValidation = (
13
- message: string,
14
- ): zod.ZodEffects<zod.ZodDate, Date, Date> => {
15
- return zod.date().refine((date) => date.getTime() < Date.now(), {
16
- message,
17
- });
18
- };
@@ -1,5 +0,0 @@
1
- import * as zod from 'zod';
2
-
3
- export const descriptionSchema = zod
4
- .string()
5
- .min(3, 'Must have enough description');
@@ -1,3 +0,0 @@
1
- import { z } from 'zod';
2
-
3
- export const emailSchema = z.string().email();
@@ -1,3 +0,0 @@
1
- import { z } from 'zod';
2
-
3
- export const fieldSchema = z.string().min(1);
@@ -1,8 +0,0 @@
1
- export * from './date.schema';
2
- export * from './description.schema';
3
- export * from './email.schema';
4
- export * from './field.schema';
5
- export * from './phone.schema';
6
- export * from './ssn.schema';
7
- export * from './state.schema';
8
- export * from './unix.schema';
@@ -1,6 +0,0 @@
1
- import * as zod from 'zod';
2
-
3
- export const phoneSchema = zod.string().refine((value: string) => {
4
- const regex = /\+1\d{3}\d{3}\d{4}/;
5
- return regex.test(value);
6
- }, 'Phone is invalid');
@@ -1,24 +0,0 @@
1
- import { z } from 'zod';
2
-
3
- // SSN schema, validation regex were gathered from: https://uibakery.io/regex-library/ssn
4
- export const SSNSchema = z
5
- .string()
6
- .regex(/^(?!666|000|9\d{2})\d{3}(?!00)\d{2}(?!0{4})\d{4}$/);
7
-
8
- /**
9
- * It accepts SSN in the format '•••-••-1900' or '123-45-6789'.
10
- * When dealing with masked SSN, in the backend you will need to call 1-Click API GET to get the unmasked version of SSN again.
11
- * If this is the user input SSN there will be no need to call the 1-Click API GET.
12
- */
13
- // SSN schema, unmasked validation regex were gathered from: https://uibakery.io/regex-library/ssn
14
- export const MaskedAndUnmaskedSSNSchema = z.string().refine(
15
- (val) => {
16
- const maskedRegex = /^•••-••-(\d{4})$/;
17
- const unmaskedRegex = /^(?!666|000|9\d{2})\d{3}(?!00)\d{2}(?!0{4})\d{4}$/;
18
-
19
- return maskedRegex.test(val) || unmaskedRegex.test(val);
20
- },
21
- {
22
- message: 'Invalid SSN',
23
- },
24
- );
@@ -1,3 +0,0 @@
1
- import { z } from 'zod';
2
-
3
- export const stateSchema = z.string().min(2).max(2);
@@ -1,11 +0,0 @@
1
- import { z as zod } from 'zod';
2
-
3
- export const getUnixSchema = (message = 'Invalid Unix string timestamp') => {
4
- return zod.string().refine((value: string) => {
5
- const regex = /^\d+$/; // Checks if the string contains only digits
6
- const isValidRegex = regex.test(value) && !isNaN(Number(value));
7
-
8
- // Added the length check here to ensure that the displayed message is the one in the message parameter
9
- return isValidRegex && value.length >= 10 && value.length <= 13;
10
- }, message);
11
- };