feat: changed some pipeline files

.github/workflows/ci.yml

@@ -28,12 +28,9 @@ jobs:
       - run: npm run bootstrap
       - run: npm run cs-format
       - run: npm run cs-check
+      - run: npm run build:web
 
-      - name: Build with Netlify badge
-        run: npm run build:web
-        env:
-          VITE_SHOW_NETLIFY_BADGE: true
-          NODE_OPTIONS: --max_old_space_size=4096
+      # - name: Build with Netlify badge
 
       - if: matrix.node-version == '18.x'
         uses: actions/upload-artifact@v3

packages/form-sculpt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-sculpt",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "This package help to generate mui forms with yup validation from json data",
   "homepage": "https://github.com/AmshenShanu07/form-sculpt",
   "license": "Apache-2.0",

packages/form-sculpt/src/App.tsx

@@ -1,27 +1,62 @@
+import { LocaleObject } from 'yup';
+import React from 'react';
 import Form from './Components/Form';
-import { sampleJsonField } from './sampleData';
-// import { ButtonTemplateProps } from './Context/PropContext/type';
+import { validationSchema } from './sampleData';
+import { ButtonTemplateProps } from './Context/PropContext/type';
 
-// const ButtonTemplate: React.FC<ButtonTemplateProps> = ({ errors, values }) => {
+const ButtonTemplate: React.FC<ButtonTemplateProps> = ({ errors, values }) => {
 
-//   return (
-//     <React.Fragment>
-//       <button type='submit'>Submit</button>
-//       <button onClick={() => console.log(errors)}>Errors</button>
-//       <button onClick={() => console.log(values)}>Values</button>
-//     </React.Fragment>
-//   );
-// };
+  return (
+    <React.Fragment>
+      <button type='submit'>Submit</button>
+      <button onClick={() => console.log(errors)}>Err  ors</button>
+      <button onClick={() => console.log(values)}>Values</button>
+    </React.Fragment>
+  );
+};
 
 const App = () => {
   const uploadFile = async (file: File) => {
     const url = await URL.createObjectURL(file);
     return url;
   };
 
+  const validationSampleFuntion = (data:any, otherData?: any) => {
+    console.log(data);
+    return JSON.stringify({ key: 'some_key', values: { ...data }, type:'email',  ...otherData });
+  };
+
+  const validationMsgs:LocaleObject = {
+    mixed:{
+      required: 'this is required field',
+      notType: validationSampleFuntion,
+
+    },
+    string: {
+      email: validationSampleFuntion({ type: 'email' }),
+      url: validationSampleFuntion({ type: 'url' }),
+      max: (data) => validationSampleFuntion({},{ ...data }),
+      min: (data) => validationSampleFuntion({},{ ...data }),
+    },
+    number: {
+      integer: validationSampleFuntion,
+      max: validationSampleFuntion,
+      min: validationSampleFuntion,
+    }
+
+  };
+
   return (
     <div>
-      <Form schema={sampleJsonField} onSubmit={(d) => console.log(d)} onFileUpload={uploadFile} />
+      <Form 
+        schema={validationSchema}
+        globalValidationMessages={validationMsgs}
+        onSubmit={(d) => console.log(d)}
+        onFileUpload={uploadFile}
+        templates={{
+          ButtonTemplates:ButtonTemplate
+        }}
+      />
     </div>
   );
 };

packages/form-sculpt/src/Components/Fields/date.tsx

@@ -53,7 +53,7 @@ const FormDate = (props: InputFieldProps) => {
                     error: error[data.key] || '' ? true : false,
                     helperText:
                       error[data.key] || ''
-                        ? (error[data.key]?.message as string).replace(data.key, data.fieldLabel.label)
+                        ? error[data.key]?.message?.toString().replace(data.key, data.fieldLabel.label)
                         : '',
                   },
                 }}

packages/form-sculpt/src/Components/Fields/datetime.tsx

@@ -53,7 +53,7 @@ const FormDateTime = (props: InputFieldProps) => {
                     error: error[data.key] || '' ? true : false,
                     helperText:
                       error[data.key] || ''
-                        ? (error[data.key]?.message as string).replace(data.key, data.fieldLabel.label)
+                        ? error[data.key]?.message?.toString().replace(data.key, data.fieldLabel.label)
                         : '',
                   },
                 }}

packages/form-sculpt/src/Components/Fields/radio.tsx

@@ -50,7 +50,7 @@ const FormRadio = (props: InputFieldProps) => {
               </RadioGroup>
               <Typography sx={inputFieldStyle?.radio?.errorStyle || {}} variant='subtitle2' color='#d32f2f'>
                 {error[data.key] || ''
-                  ? (error[data.key]?.message as string).replace(data.key, data.fieldLabel.label)
+                  ? error[data.key]?.message?.toString().replace(data.key, data.fieldLabel.label)
                   : ''}
               </Typography>
             </>

packages/form-sculpt/src/Components/Fields/select.tsx

@@ -45,7 +45,7 @@ const FormSelect = (props: InputFieldProps) => {
                 error={error[data.key] || '' ? true : false}
                 helperText={
                   error[data.key] || ''
-                    ? (error[data.key]?.message as string).replace(data.key, data.fieldLabel.label)
+                    ? error[data.key]?.message?.toString().replace(data.key, data.fieldLabel.label)
                     : ''
                 }
                 select

packages/form-sculpt/src/Components/Fields/textArea.tsx

@@ -51,7 +51,7 @@ const FormTextArea = (props: InputFieldProps) => {
                 error={error[data.key] || '' ? true : false}
                 helperText={
                   error[data.key] || ''
-                    ? (error[data.key]?.message as string).replace(data.key, data.fieldLabel.label)
+                    ? error[data.key]?.message?.toString().replace(data.key, data.fieldLabel.label)
                     : ''
                 }
               />

packages/form-sculpt/src/Components/Fields/textField.tsx

@@ -58,7 +58,7 @@ const FormTextField = (props: InputFieldProps) => {
                 }}
                 helperText={
                   error[data.key] || ''
-                    ? (error[data.key]?.message as string).replace(data.key, data.fieldLabel.label)
+                    ? (error[data.key]?.message?.toString() as string).replace(data.key, data.fieldLabel.label)
                     : ''
                 }
               />

packages/form-sculpt/src/Components/Fields/time.tsx

@@ -53,7 +53,7 @@ const FormTime = (props: InputFieldProps) => {
                     },
                     helperText:
                       error[data.key] || ''
-                        ? (error[data.key]?.message as string).replace(data.key, data.fieldLabel.label)
+                        ? error[data.key]?.message?.toString().replace(data.key, data.fieldLabel.label)
                         : '',
                   },
                 }}

packages/form-sculpt/src/Components/Form/FormComponent.tsx

@@ -7,12 +7,14 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
-import getField from '../../utils/getFields';
+
+import getField from '../../Utils/getFields';
 import { useProps } from '../../Context/PropContext/hook';
 import { SchemaType } from '../../Context/PropContext/type';
-import getButtonTemplate from '../../utils/getButtonTemplate';
+import getButtonTemplate from '../../Utils/getButtonTemplate';
 import { useValueHolder } from '../../Context/DataHolderContext/hook';
-import getValidationCriteria from '../../utils/getValidationCriteria';
+import getValidationCriteria from '../../Utils/getValidationCriteria';
+
 
 const FormComponent = () => {
   const [init, setInit] = useState<boolean>(false);
@@ -96,7 +98,7 @@ const FormComponent = () => {
         continue;
       }
 
-      validationSchema[data.key] = getValidationCriteria(data);
+      validationSchema[data.key] = getValidationCriteria(data, globalValidationMessages);
     }
 
     return yup.object(validationSchema);

packages/form-sculpt/src/sampleData.ts

@@ -1332,3 +1332,22 @@ export const ccJson: SchemaType[] = [
     key: 'DragyourfilehereorBrowse',
   },
 ];
+
+export const validationSchema: SchemaType[] = [
+  {
+    fieldLabel: {
+      description: 'Validation test',
+      label: 'validation test',
+      placeholderText: 'validation test'
+    },
+    fieldType: 'textField',
+    fieldWidth:1,
+    isRequired:true,
+    key:'testName',
+    validation: {
+      validation:'limit',
+      max: 10,
+      min:3
+    }
+  }
+];

packages/form-sculpt/src/utils/getValidationCriteria.ts

@@ -19,7 +19,7 @@ const getFormatedDate = (fieldType: string, date: string): string => {
   }
 };
 
-const getValidationCriteria = (data: SchemaType): yup.AnyObject => {
+const getValidationCriteria = (data: SchemaType, customValidation?: yup.LocaleObject): yup.AnyObject => {
   const {
     fieldType,
     validation,
@@ -29,21 +29,21 @@ const getValidationCriteria = (data: SchemaType): yup.AnyObject => {
   let yupObj: any = yup;
 
   if (fieldType === 'checkbox') {
-    yupObj = yupObj['boolean']().typeError(`This field must a boolean value`);
+    yupObj = yupObj['boolean']().typeError(customValidation?.mixed?.notType?undefined:`This field must a boolean value`);
   }
 
   if (fieldType === 'checkboxes') {
     yupObj = yupObj['array']()['of'](yup.string());
 
     if (validation?.min) {
-      yupObj = yupObj['min'](validation.min, `At least ${validation.min} option must be selected`);
+      yupObj = yupObj['min'](validation.min, customValidation?.array?.min?undefined:`At least ${validation.min} option must be selected`);
     }
     if (validation?.max) {
-      yupObj = yupObj['max'](validation.max, `At most ${validation.max} option can be selected`);
+      yupObj = yupObj['max'](validation.max, customValidation?.array?.max?undefined:`At most ${validation.max} option can be selected`);
     }
 
     if (!validation?.min && isRequired) {
-      yupObj = yupObj['min'](1, `${data.key} is a required field`);
+      yupObj = yupObj['min'](1, customValidation?.mixed?.required?undefined:`${data.key} is a required field`);
     }
   }
 
@@ -60,15 +60,15 @@ const getValidationCriteria = (data: SchemaType): yup.AnyObject => {
 
       const validationMsg = `${data.key} must be later than ${getFormatedDate(fieldType, crntDate)}`;
 
-      yupObj = yupObj['min'](dayjs(crntDate), validationMsg);
+      yupObj = yupObj['min'](dayjs(crntDate), customValidation?.date?.min?undefined:validationMsg);
     } else if (validation?.preventFuture) {
       if (fieldType === 'date') {
         crntDate = crntDate.add(1, 'day').format('YYYY-MM-DD');
       } else {
         crntDate = crntDate.format();
       }
       const validationMsg = `${data.key} must be ealier than ${getFormatedDate(fieldType, crntDate)}`;
-      yupObj = yupObj['max'](new Date(crntDate), validationMsg);
+      yupObj = yupObj['max'](new Date(crntDate), customValidation?.date?.max?undefined:validationMsg);
     }
   }
 
@@ -84,46 +84,45 @@ const getValidationCriteria = (data: SchemaType): yup.AnyObject => {
     yupObj = yupObj['array']()['of'](fileTypeSchema);
 
     if (validation?.min) {
-      yupObj = yupObj['min'](validation.min, `At least ${validation.min} files must be uploaded`);
+      yupObj = yupObj['min'](validation.min, customValidation?.string?.min?undefined:`At least ${validation.min} files must be uploaded`);
     }
 
     if (validation?.max) {
-      yupObj = yupObj['max'](validation.max, `At Most ${validation.max} files can be selected`);
+      yupObj = yupObj['max'](validation.max, customValidation?.string?.max?undefined:`At Most ${validation.max} files can be selected`);
     }
 
     if (!validation?.min && isRequired) {
-      yupObj = yupObj['min'](1, `${label} is a required field`);
+      yupObj = yupObj['min'](1, customValidation?.mixed?.required?undefined:`${label} is a required field`);
     }
   }
 
   if (fieldType === 'textField' || fieldType === 'textArea') {
     if (validation?.validation && validation.validation === 'number') {
       const { min, max } = validation;
-      yupObj = yupObj['number']().typeError(`This field field must be valid integer`);
+      yupObj = yupObj['number']().typeError(customValidation?.mixed?.notType?undefined:`This field field must be valid integer`);
 
-      if (min) yupObj = yupObj['min'](min, `This field must be greater than ${min}`);
+      if (min) yupObj = yupObj['min'](min, customValidation?.number?.min?undefined:`This field must be greater than ${min}`);
 
-      if (max) {
-        yupObj = yupObj['max'](max, `${data.key} must be less than ${max}`);
-      }
+      if (max) yupObj = yupObj['max'](max, customValidation?.number?.max?undefined:`${data.key} must be less than ${max}`);
+
     } else if (validation?.validation && validation.validation === 'limit') {
       const { min, max } = validation;
-      yupObj = yupObj['string']().typeError('This field must be a valid string');
+      yupObj = yupObj['string']().typeError(customValidation?.mixed?.notType?undefined:'This field must be a valid string');
 
-      if (min) yupObj = yupObj['min'](min, `This field must have more than ${min} characters.`);
+      if (min) yupObj = yupObj['min'](min, customValidation?.string?.min?undefined:`This field must have more than ${min} characters.`);
 
-      if (max) yupObj = yupObj['max'](max, `This field must have fewer than ${max} characters.`);
+      if (max) yupObj = yupObj['max'](max, customValidation?.string?.max?undefined:`This field must have fewer than ${max} characters.`);
     } else if (validation?.validation && validation.validation === 'email') {
-      yupObj = yupObj['string']()['email']('This field should be a valid email');
+      yupObj = yupObj['string']()['email'](customValidation?.string?.email?undefined:"Enter a valid email");
     } else if (validation?.validation && validation.validation === 'url') {
-      yupObj = yupObj['string']()['url']();
+      yupObj = yupObj['string']()['url'](customValidation?.string?.url?undefined:'Enter a valid url');
     } else {
       yupObj = yupObj['string']();
     }
   }
 
   if (isRequired) {
-    yupObj = yupObj['required']();
+    yupObj = yupObj['required'](customValidation?.mixed?.required?undefined:'This is a required field');
   }
 
   return yupObj;

packages/playground/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.5.1",
-    "form-sculpt": "^0.4.0",
+    "form-sculpt": "0.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },