Release v1.32.0 (#260)

CHANGELOG.md

@@ -7,13 +7,28 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.32.0] - 2025-02-05
+
 ### Added
 
 - Allow to trust a device during step up when RBA is enabled and the new box is checked
 
+### Changed
+
+- Replace remarkable with marked
+- Replace luxon with date-fns
+- Removed zxcvbn dependency and use new `getPasswordStrength` SDK Core's method instead.
+
+### Fixed
+
+- Dedupe React dependencies
+- Display asterix on phone number field's label when required
+- Set a min width on date field's day and year select
+
 ## [1.31.3] - 2025-01-28
 
 ### Fixed
+
 - Fix form phone number field when optional and not valued
 
 ## [1.31.2] - 2025-01-14
@@ -545,7 +560,9 @@ The eye icon is now correctly displayed in the Auth widget.
 
 First version of the SDK Web UI.
 
-[Unreleased]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.31.3...HEAD
+[Unreleased]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.32.0...HEAD
+
+[1.32.0]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.31.3...v1.32.0
 
 [1.31.3]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.31.2...v1.31.3
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@reachfive/identity-ui",
-    "version": "1.31.3",
+    "version": "1.32.0",
     "description": "ReachFive Identity Web UI SDK",
     "author": "ReachFive",
     "repository": {
@@ -31,7 +31,7 @@
         "lint": "eslint -c eslint.config.mjs src/"
     },
     "dependencies": {
-        "@reachfive/identity-core": "^1.35.0",
+        "@reachfive/identity-core": "^1.35.1",
         "buffer": "^6.0.3",
         "char-info": "0.3.2",
         "classnames": "^2.3.2",

src/components/form/fields/dateField.tsx

@@ -19,8 +19,9 @@ const InputRow = styled.div`
     gap: ${inputRowGutter}px;
 `;
 
-const InputCol = styled.div<{ width: number }>`
+const InputCol = styled.div<{ width: number, minWidth?: number }>`
     flex-basis: ${props => props.width}%;
+    ${props => props.minWidth ? `min-width: ${props.minWidth}px;` : undefined}
 `;
 
 type ExtraParams = {
@@ -111,7 +112,7 @@ const DateField = ({
 
     const fields: Partial<Record<(typeof parts)[number], React.ReactNode>> = {
         day: (
-            <InputCol key="day" width={20}>
+            <InputCol key="day" width={20} minWidth={70}>
                 <Select
                     name={`${path}.day`}
                     value={day ?? ''}
@@ -141,7 +142,7 @@ const DateField = ({
             </InputCol>
         ),
         year: (
-            <InputCol key="year" width={30}>
+            <InputCol key="year" width={30} minWidth={100}>
                 <Input
                     type="number"
                     maxLength={4}

src/components/form/fields/phoneNumberField.tsx

@@ -125,6 +125,7 @@ const PhoneNumberField = (props: PhoneNumberFieldProps) => {
             labelText={label}
             {...{ error }}
             showLabel={showLabel}
+            required={required}
         >
             <ReactPhoneNumberInputStyle />
             <PhoneInput

src/components/miscComponent.tsx

@@ -101,7 +101,33 @@ marked.use({
         link({ href, text }) {
             return '<a href="'+ href +'" target="_blank" rel="nofollow noreferrer noopener">' + text + '</a>';
         }
-    }
+    },
+    extensions: [
+        // specific underline markup is missed in marked module
+        // see https://marked.js.org/using_pro#extensions
+        {
+            name: 'underline',
+            level: 'inline',
+            start(src) {
+                return /\+{2}/.exec(src)?.index; // starts with ++
+            },
+            tokenizer(src) {
+                const rule = /^\+{2}([^+\n]+)\+{2}/;
+                const match = rule.exec(src);
+                if (match) {
+                    return {
+                        type: 'underline',
+                        raw: match[0],
+                        text: match[1],
+                        tokens: this.lexer.inlineTokens(match[1])
+                    };
+                }
+            },
+            renderer(token) {
+                return `<u>${token.text}</u>`;
+            },
+        }
+    ]
 })
 
 interface MarkdownContentProps<T> extends HTMLAttributes<T> {

tests/widgets/mfa/__snapshots__/MfaCredentialsWidget.test.js.snap

@@ -46,7 +46,8 @@ exports[`Snapshot mfaCredentials default 1`] = `
             novalidate=""
           >
             <div
-              class="sc-fzplWN ihTKJp"
+              class="sc-fzplWN japiTA"
+              required=""
             >
               <label
                 class="sc-fzoLsD ggcsuZ"

tests/widgets/passwordless/__snapshots__/passwordlessWidget.test.js.snap

@@ -417,6 +417,11 @@ exports[`Snapshot passwordless sms 1`] = `
   margin-bottom: 10px;
 }
 
+.c3 > label::after {
+  content: "\\A0*";
+  color: #dc4e41;
+}
+
 .c5 {
   display: block;
   width: 100%;
@@ -482,6 +487,7 @@ exports[`Snapshot passwordless sms 1`] = `
       >
         <div
           class="c3"
+          required=""
         >
           <label
             class="c4"

types/identity-ui.d.ts

@@ -1,6 +1,6 @@
 /**
- * @reachfive/identity-ui - v1.31.3-develop
- * Compiled Tue, 04 Feb 2025 14:37:11 UTC
+ * @reachfive/identity-ui - v1.32.0
+ * Compiled Wed, 05 Feb 2025 14:52:54 UTC
  *
  * Copyright (c) ReachFive.
  *
@@ -9,10 +9,10 @@
  **/
 import * as React from 'react';
 import React__default, { CSSProperties, ComponentType } from 'react';
-import { Config as Config$1, RemoteSettings, ConsentVersions, CustomField, Client as Client$1, SessionInfo, ConsentType, PasswordPolicy, CustomFieldType, AuthOptions, MFA, PasswordlessResponse, SingleFactorPasswordlessParams, Profile, UserConsent, DeviceCredential } from '@reachfive/identity-core';
+import * as _reachfive_identity_core from '@reachfive/identity-core';
+import { Config as Config$1, RemoteSettings, ConsentVersions, CustomField, Client as Client$1, SessionInfo, ConsentType, PasswordStrengthScore, PasswordPolicy, CustomFieldType, AuthOptions, MFA, PasswordlessResponse, SingleFactorPasswordlessParams, Profile, UserConsent, DeviceCredential } from '@reachfive/identity-core';
 export { Config } from '@reachfive/identity-core';
 import { Country, Value as Value$2 } from 'react-phone-number-input';
-import { DateTime } from 'luxon';
 import * as libphonenumber_js from 'libphonenumber-js';
 import { PasswordlessParams } from '@reachfive/identity-core/es/main/oAuthClient';
 
@@ -257,27 +257,29 @@ declare class CompoundValidator<T, C = {}> {
     create(i18n: I18nResolver): ValidatorInstance<T, C>;
     and(validator: Validator<T, C> | CompoundValidator<T, C>): CompoundValidator<T, C>;
 }
-type VaildatorError = {
-    error: string;
-};
-type ValidatorSuccess = {
-    success?: true;
-};
-type ValidatorResult = boolean | VaildatorError | ValidatorSuccess;
-type ValidatorInstance<T, C> = (value: T, ctx: C) => ValidatorResult;
-type Rule<T, C> = (value: T, ctx: C) => boolean;
+type VaildatorError<Extra = {}> = {
+    valid: false;
+    error?: string;
+} & Extra;
+type ValidatorSuccess<Extra = {}> = {
+    valid: true;
+} & Extra;
+type ValidatorResult<Extra = {}> = VaildatorError<Extra> | ValidatorSuccess<Extra>;
+type ValidatorInstance<T, C, Extra = {}> = (value: T, ctx: C) => Promise<ValidatorResult<Extra>>;
+type RuleResult<E = {}> = boolean | ValidatorSuccess<E> | VaildatorError<E>;
+type Rule<T, C, E = {}> = (value: T, ctx: C) => RuleResult<E> | Promise<RuleResult<E>>;
 type Hint<T> = (value: T) => (string | undefined);
-interface ValidatorOptions<T, C> {
-    rule: Rule<T, C>;
+interface ValidatorOptions<T, C, E = {}> {
+    rule: Rule<T, C, E>;
     hint?: Hint<T> | string;
     parameters?: Record<string, unknown>;
 }
-declare class Validator<T, C = {}> {
-    rule: Rule<T, C>;
+declare class Validator<T, C = {}, E = {}> {
+    rule: Rule<T, C, E>;
     hint: Hint<T>;
     parameters: Record<string, unknown>;
-    constructor({ rule, hint, parameters }: ValidatorOptions<T, C>);
-    create(i18n: I18nResolver): ValidatorInstance<T, C>;
+    constructor({ rule, hint, parameters }: ValidatorOptions<T, C, E>);
+    create(i18n: I18nResolver): ValidatorInstance<T, C, E>;
     and(validator: Validator<T, C> | CompoundValidator<T, C>): CompoundValidator<T, C>;
 }
 
@@ -286,6 +288,8 @@ type RichFormValue<T, K extends string = 'raw'> = Record<K, T>;
 
 /** @todo to refine */
 type FormContext<T> = {
+    client: Client$1;
+    config: Config;
     errorMessage?: string;
     fields: FieldValues<T>;
     hasErrors?: boolean;
@@ -310,7 +314,7 @@ interface Field$1<T, P = {}, E extends Record<string, unknown> = {}, K extends s
     }) => React__default.ReactNode;
     initialize: <M extends Record<PropertyKey, unknown>>(model: M) => FieldValue<T, K>;
     unbind: <M extends Record<PropertyKey, unknown>>(model: M, state: FieldValue<T, K, E>) => M;
-    validate: (data: FieldValue<T, K, E>, ctx: FormContext<any>) => ValidatorResult;
+    validate: (data: FieldValue<T, K, E>, ctx: FormContext<any>) => Promise<ValidatorResult>;
 }
 type FieldValue<T, K extends string = 'raw', E extends Record<string, unknown> = {}> = E & {
     value?: FormValue<T, K>;
@@ -331,7 +335,7 @@ type FieldComponentProps<T, P = {}, E extends Record<string, unknown> = {}, K ex
     i18n: I18nResolver;
     showLabel?: boolean;
     value?: FormValue<T, K>;
-    validation?: ValidatorResult;
+    validation?: ValidatorResult<E>;
 };
 interface Formatter<T, F, K extends string> {
     bind: (value?: T) => FormValue<F, K> | undefined;
@@ -384,9 +388,9 @@ type ExtraParams$2 = {
     locale: string;
     yearDebounce?: number;
 };
-interface DateFieldProps extends FieldComponentProps<DateTime, ExtraParams$2> {
+interface DateFieldProps extends FieldComponentProps<Date, ExtraParams$2> {
 }
-declare function dateField({ key, label, yearDebounce, locale, ...props }: Optional<FieldDefinition<string, DateTime>, 'key' | 'label'> & Optional<ExtraParams$2, 'locale'>, config: Config): FieldCreator<DateTime, DateFieldProps, ExtraParams$2>;
+declare function dateField({ key, label, yearDebounce, locale, ...props }: Optional<FieldDefinition<string, Date>, 'key' | 'label'> & Optional<ExtraParams$2, 'locale'>, config: Config): FieldCreator<Date, DateFieldProps, ExtraParams$2>;
 
 interface Option {
     label: string;
@@ -418,7 +422,6 @@ interface SimplePasswordFieldProps extends FieldComponentProps<string, SimplePas
 }
 declare const simplePasswordField: ({ canShowPassword, placeholder, ...props }: FieldDefinition<string> & SimplePasswordFieldOptions) => FieldCreator<string, SimplePasswordFieldProps, {}, "raw">;
 
-type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;
 interface PasswordRule {
     label: string;
     verify: (value: string) => boolean;
@@ -483,7 +486,7 @@ declare const simpleField: ({ placeholder, type, ...props }: FieldDefinition<str
 declare function birthdateField({ min, max, label, ...props }: Parameters<typeof dateField>[0] & {
     min?: number;
     max?: number;
-}, config: Config): FieldCreator<DateTime<boolean>, DateFieldProps, {
+}, config: Config): FieldCreator<Date, DateFieldProps, {
     locale: string;
     yearDebounce?: number | undefined;
 }, "raw">;
@@ -530,12 +533,12 @@ declare const predefinedFields: {
         blacklist?: string[] | undefined;
         canShowPassword?: boolean | undefined;
         enabledRules: Record<"minLength" | "uppercaseCharacters" | "specialCharacters" | "lowercaseCharacters" | "digitCharacters", PasswordRule>;
-        minStrength: PasswordStrengthScore;
+        minStrength: _reachfive_identity_core.PasswordStrengthScore;
     }>, { passwordPolicy }: Config) => FieldCreator<string, PasswordFieldProps, {
         blacklist?: string[] | undefined;
         canShowPassword?: boolean | undefined;
         enabledRules: Record<"minLength" | "uppercaseCharacters" | "specialCharacters" | "lowercaseCharacters" | "digitCharacters", PasswordRule>;
-        minStrength: PasswordStrengthScore;
+        minStrength: _reachfive_identity_core.PasswordStrengthScore;
     }, "raw">>;
     passwordConfirmation: PredefinedFieldBuilder<({ canShowPassword, placeholder, ...props }: FieldDefinition<string> & {
         canShowPassword?: boolean | undefined;