@weareconceptstudio/form 0.1.5 → 0.1.7

package/dist/error-message/index.d.ts

@@ -1,12 +1,5 @@
 export default ErrorMessage;
-declare function ErrorMessage({ as, errors, name, message, render, ...rest }: {
-    [x: string]: any;
-    as: any;
-    errors: any;
-    name: any;
-    message: any;
-    render: any;
-}): any;
+declare function ErrorMessage(props: any): any;
 declare namespace ErrorMessage {
     let displayName: string;
 }

package/dist/error-message/index.js

@@ -1,23 +1,24 @@
 import React, { Fragment, isValidElement, cloneElement, createElement } from 'react';
 import { useFormContext, get } from 'react-hook-form';
-const ErrorMessage = ({ as, errors, name, message, render, ...rest }) => {
+const ErrorMessage = (props) => {
+    const { as, errors, name, message, render, ...rest } = props;
     const methods = useFormContext();
     const error = get(errors || methods.formState.errors, name);
     if (!error) {
         return null;
     }
     const { message: messageFromRegister, types } = error;
-    const props = Object.assign({}, rest, {
+    const inlineProps = Object.assign({}, rest, {
         children: messageFromRegister || message,
     });
     return isValidElement(as)
-        ? cloneElement(as, props)
+        ? cloneElement(as, inlineProps)
         : render
             ? render({
                 message: messageFromRegister || message,
                 messages: types,
             })
-            : createElement(as || Fragment, props);
+            : createElement(as || Fragment, inlineProps);
 };
 if (process.env.NODE_ENV !== 'production') {
     ErrorMessage.displayName = 'ErrorMessage';

package/dist/form/Item/index.js

@@ -1,30 +1,44 @@
-import React, { cloneElement, isValidElement } from 'react';
+import React, { cloneElement, isValidElement, useRef } from 'react';
 import lodashGet from 'lodash.get';
 import classNames from 'classnames';
-import { useTranslation } from '@weareconceptstudio/core';
+import { isForwardRefChild, useTranslation } from '@weareconceptstudio/core';
 import ErrorMessage from '../../error-message';
 import { useInput } from '../hooks/useInput';
 import { useRules } from '../hooks/rules';
 const FormItem = ({ label, name, children, className, errorKey, required = true, requiredMessage, rules = [] }) => {
+    if (!isValidElement(children)) {
+        return null;
+    }
+    const childRef = useRef(null);
     const { translate } = useTranslation();
     const { formState } = useInput({
         name,
-        rules: useRules({ rules, required, requiredMessage }),
+        rules: useRules({
+            rules,
+            required,
+            requiredMessage,
+            errorKey: errorKey || label,
+            // @ts-ignore
+            childType: childRef?.current?.childType || '',
+        }),
         errorKey: errorKey || label,
     });
     const hasError = !!lodashGet(formState.errors, name);
     const classString = classNames('form-item', {
         [className]: className,
         'has-error': hasError,
-        disabled: isValidElement(children) && children.props.disabled,
+        // @ts-ignore
+        disabled: children.props.disabled,
     });
+    // @ts-ignore
+    const inlineProps = isForwardRefChild(children) ? { ref: childRef, name } : { name };
     return (React.createElement("div", { className: classString },
         React.createElement("div", { className: 'form-item-row' },
             label ? (React.createElement("div", { className: 'form-item-label' },
                 React.createElement("label", { htmlFor: name, "data-required": required },
                     translate(label),
                     required ? React.createElement("span", { className: 'required-symbol' }, "*") : null))) : null,
-            React.createElement("div", { className: 'form-item-control' }, isValidElement(children) && cloneElement(children, { name })),
+            React.createElement("div", { className: 'form-item-control' }, cloneElement(children, inlineProps)),
             React.createElement(ErrorMessage, { name: name, as: React.createElement("div", { className: 'error-message' }) }))));
 };
 export default FormItem;

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

@@ -12,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/input/Input.d.ts

@@ -1,6 +1,3 @@
 export default Input;
-declare function Input(props: any): React.JSX.Element;
-declare namespace Input {
-    let displayName: string;
-}
+declare const Input: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/dist/input/Input.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import BaseInput from './BaseInput';
 import { useInput } from '../form/hooks/useInput';
 import { useTranslation } from '@weareconceptstudio/core';
-const Input = (props) => {
+const Input = forwardRef((props, ref) => {
+    useImperativeHandle(ref, () => ({ childType: 'input' }));
     const { name, autoComplete = 'new-password', onChange, onFocus, onBlur, onKeyDown, onKeyUp, disabled, className, type = 'text', placeholder } = props;
     const { translate } = useTranslation();
     const { field } = useInput({
@@ -13,7 +14,7 @@ const Input = (props) => {
     });
     return (React.createElement(BaseInput, { ...props, value: field.value, disabled: disabled },
         React.createElement("input", { type: type, onFocus: onFocus, onKeyUp: onKeyUp, disabled: disabled, className: className, onKeyDown: onKeyDown, placeholder: translate(placeholder), autoComplete: autoComplete, ...field })));
-};
+});
 if (process.env.NODE_ENV !== 'production') {
     Input.displayName = 'Input';
 }

package/dist/input/TextArea/index.d.ts

@@ -1,6 +1,3 @@
 export default TextArea;
-declare function TextArea(props: any): React.JSX.Element;
-declare namespace TextArea {
-    let displayName: string;
-}
+declare const TextArea: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/dist/input/TextArea/index.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import BaseInput from '../BaseInput';
 import { useInput } from '../../form/hooks/useInput';
 import { useTranslation } from '@weareconceptstudio/core';
-const TextArea = (props) => {
+const TextArea = forwardRef((props, ref) => {
+    useImperativeHandle(ref, () => ({ childType: 'textarea' }));
     const { translate } = useTranslation();
     const { name, placeholder, rows = 5, onChange, onFocus, onBlur, onKeyDown, onKeyUp, disabled, className, autoComplete } = props;
     const input = name ? useInput({ name, onChange, onBlur }) : null;
@@ -12,7 +13,7 @@ const TextArea = (props) => {
     };
     return (React.createElement(BaseInput, { ...props },
         React.createElement("textarea", { ...field, rows: rows, onFocus: onFocus, onKeyUp: onKeyUp, disabled: disabled, className: className, onKeyDown: onKeyDown, autoComplete: autoComplete, placeholder: translate(placeholder) })));
-};
+});
 if (process.env.NODE_ENV !== 'production') {
     TextArea.displayName = 'TextArea';
 }

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);
@@ -396,6 +395,11 @@ const FormStyle = createGlobalStyle `${css `
 		font-weight: 400;
 		color: var(--form_errorMessageColor);
 		transform: translateY(var(--form_errorDistance));
+		text-transform: lowercase;
+
+		&::first-letter {
+			text-transform: uppercase;
+		}
 	}
 
 	/* //! Disabled Styles */

package/dist/upload/UploadButton/index.js

@@ -3,7 +3,7 @@ import { rawFileToAsset } from '../utils';
 import UploadButtonStyle from './style';
 const UploadButton = (props) => {
     const { accept, disabled, multiple, setFileList } = props;
-    const inputRef = useRef();
+    const inputRef = useRef(null);
     const handleFiles = async (files) => {
         const newFiles = [];
         for (let i = 0; i < files.length; i++) {

package/dist/upload/utils.d.ts

@@ -1,4 +1,4 @@
-export function typeFromMime(mime: any): "document" | "image" | "video" | "audio" | "pdf";
+export function typeFromMime(mime: any): "audio" | "video" | "image" | "document" | "pdf";
 export function rawFileToAsset({ rawFile, isReplace }: {
     rawFile: any;
     isReplace?: boolean;

package/package.json

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