@weareconceptstudio/form 0.1.4 → 0.1.6

package/dist/form/Item/index.js

@@ -9,7 +9,14 @@ const FormItem = ({ label, name, children, className, errorKey, required = true,
     const { translate } = useTranslation();
     const { formState } = useInput({
         name,
-        rules: useRules({ rules, required, requiredMessage }),
+        rules: useRules({
+            rules,
+            required,
+            requiredMessage,
+            errorKey: errorKey || label,
+            // @ts-ignore
+            childType: children?.type?.displayName || children?.type?.name || '',
+        }),
         errorKey: errorKey || label,
     });
     const hasError = !!lodashGet(formState.errors, name);

package/dist/form/hooks/rules.d.ts

@@ -7,5 +7,11 @@ export function validationPatterns({ type, pattern, message, translate }: {
     value: any;
     message: any;
 };
-export function useRules(props: any): any[];
+export function useRules({ rules, required, requiredMessage, childType, errorKey }: {
+    rules: any;
+    required: any;
+    requiredMessage: any;
+    childType: any;
+    errorKey: any;
+}): any[];
 export function mapValidationRules(errorKey: any, rules: any): any;

package/dist/form/hooks/rules.js

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from '@weareconceptstudio/core';
 export const validationPatterns = ({ type, pattern, message, translate }) => {
-    console.log({ type });
     switch (type) {
         case 'email':
             return { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/g, message: message || translate('validateMessages.email') };
@@ -13,20 +12,23 @@ export const validationPatterns = ({ type, pattern, message, translate }) => {
             return { value: pattern, message };
     }
 };
-export const useRules = (props) => {
+export const useRules = ({ rules, required, requiredMessage, childType, errorKey }) => {
+    const { translate } = useTranslation();
     return useMemo(() => {
-        let r = [...props.rules];
-        if (props.required) {
-            r.unshift({ required: true, message: props.requiredMessage });
+        let r = [...rules];
+        if (required) {
+            r.unshift({ required: true, message: requiredMessage });
+            if (childType.toLowerCase() === 'input' || childType.toLowerCase() === 'textarea') {
+                r.push({
+                    validator: (value) => {
+                        return value?.trim().length > 0 || translate('validateMessages.whitespace', { errorKey: translate(errorKey) });
+                    },
+                });
+            }
         }
-        // TODO: Whitespace
-        // validator: (value) => {
-        //     return !!value.trim();
-        // },
         return r;
-    }, [props]);
+    }, [rules, required, requiredMessage, childType, errorKey]);
 };
-// TODO: rule messages from translations
 export const mapValidationRules = (errorKey, rules) => {
     const { translate } = useTranslation();
     return rules?.reduce((acc, rule) => {

package/dist/styles/formStyle.js

@@ -31,15 +31,14 @@ const FormStyle = createGlobalStyle `${css `
 		}
 	}
 
-	.react-select__menu,
-	.react-select__menu-list {
+	/* .react-select__menu-list {
 		scrollbar-width: none;
 		-ms-overflow-style: none;
 
 		&::-webkit-scrollbar {
 			display: none;
 		}
-	}
+	} */
 
 	input::-webkit-outer-spin-button,
 	input::-webkit-inner-spin-button,
@@ -286,7 +285,7 @@ const FormStyle = createGlobalStyle `${css `
 				.react-select__option {
 					color: var(--form_selectOptionColor);
 					line-height: var(--form_lineHeight);
-					font-size: var(--form_p2);
+					font-size: var(--form_p3);
 					font-family: var(--form_Font);
 					font-weight: 500;
 					padding: var(--form_inputPadTBL) var(--form_inputPadR) var(--form_inputPadTBL) var(--form_inputPadTBL);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/form",
-	"version": "0.1.4",
+	"version": "0.1.6",
 	"description": "Concept Studio Form",
 	"author": "Concept Studio",
 	"license": "ISC",