fix(validation): impossible to switch the language for validation errors (#173)

* fix localization during validation
* add Lang and Theme switcher to storybook

Author: hozblok

.storybook/decorators/index.ts

@@ -1 +1,2 @@
 export * from './withTheme';
+export * from './withLang';

.storybook/decorators/withLang.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import type {Decorator} from '@storybook/react';
+import {Lang, configure} from '../../src';
+
+export const withLang: Decorator = (Story, context) => {
+    const lang = context.globals.lang;
+
+    React.useEffect(() => {
+        configure({
+            lang: lang as Lang,
+        });
+    }, [lang]);
+
+    return <Story key={lang} {...context} />;
+};

.storybook/preview.ts

@@ -1,6 +1,6 @@
-import {withTheme} from './decorators';
+import {withTheme, withLang} from './decorators';
 
-export const decorators = [withTheme];
+export const decorators = [withTheme, withLang];
 
 export const parameters = {
     actions: {argTypesRegex: '^on[A-Z].*'},
@@ -11,3 +11,30 @@ export const parameters = {
         },
     },
 };
+
+export const globalTypes = {
+    theme: {
+        defaultValue: 'light',
+        toolbar: {
+            title: 'Theme',
+            icon: 'mirror',
+            items: [
+                {value: 'light', right: '☼', title: 'Light'},
+                {value: 'dark', right: '☾', title: 'Dark'},
+                {value: 'light-hc', right: '☼', title: 'High Contrast Light (beta)'},
+                {value: 'dark-hc', right: '☾', title: 'High Contrast Dark (beta)'},
+            ],
+        },
+    },
+    lang: {
+        defaultValue: 'en',
+        toolbar: {
+            title: 'Language',
+            icon: 'globe',
+            items: [
+                {value: 'en', right: '🇬🇧', title: 'En'},
+                {value: 'ru', right: '🇷🇺', title: 'Ru'},
+            ],
+        },
+    },
+}

src/lib/kit/validators/validators.ts

@@ -27,9 +27,10 @@ export interface GetArrayValidatorParams extends CommonValidatorParams {
 export const getArrayValidator = (params: GetArrayValidatorParams = {}) => {
     const {ignoreRequiredCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, customErrorMessages} =
         params;
-    const errorMessages = {...ErrorMessages, ...customErrorMessages};
 
     return (spec: ArraySpec, value?: ArrayValue) => {
+        const errorMessages = {...ErrorMessages, ...customErrorMessages};
+
         const valueLength = value?.length || 0;
 
         if (!ignoreRequiredCheck && spec.required && !_.isArray(value)) {
@@ -60,9 +61,10 @@ export interface GetBooleanValidatorParams extends CommonValidatorParams {}
 
 export const getBooleanValidator = (params: GetBooleanValidatorParams = {}) => {
     const {ignoreRequiredCheck, customErrorMessages} = params;
-    const errorMessages = {...ErrorMessages, ...customErrorMessages};
 
     return (spec: BooleanSpec, value?: boolean) => {
+        const errorMessages = {...ErrorMessages, ...customErrorMessages};
+
         if (!ignoreRequiredCheck && spec.required && !value) {
             return errorMessages.REQUIRED;
         }
@@ -95,10 +97,11 @@ export const getNumberValidator = (params: GetNumberValidatorParams = {}) => {
         ignoreZeroStart,
         customErrorMessages,
     } = params;
-    const errorMessages = {...ErrorMessages, ...customErrorMessages};
 
     // eslint-disable-next-line complexity
     return (spec: NumberSpec, value: string | number = '') => {
+        const errorMessages = {...ErrorMessages, ...customErrorMessages};
+
         const stringValue = String(value);
 
         if (!ignoreRequiredCheck && spec.required && !stringValue.length) {
@@ -165,9 +168,10 @@ export interface GetObjectValidatorParams extends CommonValidatorParams {}
 
 export const getObjectValidator = (params: GetObjectValidatorParams = {}) => {
     const {ignoreRequiredCheck, customErrorMessages} = params;
-    const errorMessages = {...ErrorMessages, ...customErrorMessages};
 
     return (spec: ObjectSpec, value?: ObjectValue) => {
+        const errorMessages = {...ErrorMessages, ...customErrorMessages};
+
         if (!ignoreRequiredCheck && spec.required && !value) {
             return errorMessages.REQUIRED;
         }
@@ -194,10 +198,11 @@ export const getStringValidator = (params: GetStringValidatorParams = {}) => {
         ignoreRegExpCheck,
         customErrorMessages,
     } = params;
-    const errorMessages = {...ErrorMessages, ...customErrorMessages};
 
     // eslint-disable-next-line complexity
     return (spec: StringSpec, value = '') => {
+        const errorMessages = {...ErrorMessages, ...customErrorMessages};
+
         const valueLength = value?.length;
 
         if (!ignoreRequiredCheck && spec.required && !valueLength) {