{"_id":"@codewithshinde/form-builder-muijoy","name":"@codewithshinde/form-builder-muijoy","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@codewithshinde/form-builder-muijoy","version":"1.0.0","description":"Leverage Formik-Form-Builder Creator to effortlessly construct MUI-based forms using concise JSON definitions.","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build:types":"tsc","build:js":"tsup","build":"npm run build:types && npm run build:js"},"keywords":["formik-form-builder","MUI","Formik","Form-Builder","JSON","JoyUI","React"],"author":{"name":"codewithshinde"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Anthena-Group/formik-from-builder.git"},"homepage":"https://github.com/Anthena-Group/formik-form-builder#readme","bugs":{"url":"https://github.com/Anthena-Group/formik-form-builder/issues"},"dependencies":{"formik":"^2.4.6","yup":"^1.6.1","@mui/material":"^6.3.1","@mui/joy":"^5.0.0-beta.51","@mui/icons-material":"^6.4.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.0"},"devDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","@ladle/react":"^1.1.2","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","tsup":"^6.1.2","typescript":"^4.7.4"},"peerDependencies":{"react":"^16.8 || ^17 || ^18","react-dom":"^16.8 || ^17 || ^18"},"_id":"@codewithshinde/form-builder-muijoy@1.0.0","gitHead":"1f3dea125d5a1a04b61e3e6b076b664937931db2","_nodeVersion":"20.13.0","_npmVersion":"10.5.2","dist":{"integrity":"sha512-b0sPeq5MLcbohEFtOWRAK4DcKy62Lv8HGxrP7uHPAjP6hkVdK7JzFEgMM34LMbEQWeTlFeejB60yqCbTbzX2KQ==","shasum":"dec255a892bef08dbb0580cbcec9ce96b161b178","tarball":"https://registry.npmjs.org/@codewithshinde/form-builder-muijoy/-/form-builder-muijoy-1.0.0.tgz","fileCount":8,"unpackedSize":203260,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB9B89gCJ+d2f99+EvZ5kAfC615X3UFQ6CoJNDn1B2SpAiBPnz0nlwoy7QacpByhLm9ZNPp5NblNYO7eutds1gYhZw=="}]},"_npmUser":{"name":"karthikshindee","email":"codewithshinde@gmail.com"},"directories":{},"maintainers":[{"name":"karthikshindee","email":"codewithshinde@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/form-builder-muijoy_1.0.0_1755469318380_0.932554313050149"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-17T22:21:58.280Z","1.0.0":"2025-08-17T22:21:58.591Z","modified":"2025-08-17T22:21:58.848Z"},"maintainers":[{"name":"karthikshindee","email":"codewithshinde@gmail.com"}],"description":"Leverage Formik-Form-Builder Creator to effortlessly construct MUI-based forms using concise JSON definitions.","homepage":"https://github.com/Anthena-Group/formik-form-builder#readme","keywords":["formik-form-builder","MUI","Formik","Form-Builder","JSON","JoyUI","React"],"repository":{"type":"git","url":"git+https://github.com/Anthena-Group/formik-from-builder.git"},"author":{"name":"codewithshinde"},"bugs":{"url":"https://github.com/Anthena-Group/formik-form-builder/issues"},"license":"MIT","readme":"# Formik Form Builder\n\nLeverage Formik-Form-Builder Creator to effortlessly construct MUI-based forms using concise JSON definitions.\n\n# Usage\n## Here is a basic example of how to use the Formik Form Builder:\n\nPlay with it [SANBOX](https://codesandbox.io/p/sandbox/formik-form-builder-exmaple-2552ys?file=%2Fsrc%2FApp.js)\n\nThe provided code is a React component that uses `Formik` for form management and a custom `FormBuilder` component to dynamically generate form fields. Below is a detailed explanation of how to use this code, along with examples and usage scenarios.\n\n### 1. **Install Dependencies**\n\nBefore using the code, ensure you have the necessary dependencies installed:\n\n```bash\nnpm install formik-form-builder\n```\n\n```bash\nyarn add formik-form-builder\n```\n\n- **Formik**: A popular library for building forms in React.\n- **Yup**: A schema validation library often used with Formik.\n- **Material-UI (MUI)**: A UI library that provides pre-built components like text fields, checkboxes, etc.\n\n### 2. **Importing Required Modules**\n\nThe code imports several modules from `formik` and a custom `form-builder` module:\n\n```javascript\nimport { Form, Formik } from 'formik';\nimport { ConditionAction, ConditionName, FieldType, FormBuilder, InputTypes, PostCondition, useFormBuilder } from './form-builder';\n```\n\n- **Formik**: Provides the `Formik` component and `Form` helper.\n- **FormBuilder**: A custom component that dynamically generates form fields based on the provided configuration.\n- **useFormBuilder**: A custom hook that initializes form values and validation schema.\n\n### 3. **Defining Form Fields**\n\nThe `fields` array contains the configuration for each form field. Each field is an object with properties like `field`, `type`, `label`, `validation`, `muiProps`, etc.\n\n#### Example Field Configurations:\n\n- **Text Input**:\n\n  ```javascript\n  {\n    field: 'title',\n    type: InputTypes.TEXT,\n    label: 'Property Title',\n    validation: { required: true, message: \"First name is required\" },\n    muiProps: { variant: 'soft', fullWidth: true }\n  }\n  ```\n\n- **Checkbox**:\n\n  ```javascript\n  {\n    field: 'MyCheckBox',\n    type: InputTypes.CHECKBOX,\n    groupLabel: \"\",\n    helperText: \"testing this checkbox with all the values\",\n    initialValue: [],\n    validation: { required: true, message: \"Please accept the terms\", minLength: 1 },\n    muiProps: {},\n    options: [{ label: 'Option 1', value: 'option1', description: \"test is not the only thing people of the memeber of the  ithat is the best of the life of the need of\" }],\n  }\n  ```\n\n- **Radio Button**:\n\n  ```javascript\n  {\n    field: 'radio1',\n    type: InputTypes.RADIO,\n    label: 'radio',\n    groupLabel: 'Gender',\n    initialValue: '',\n    options: [{ label: 'Male', value: 'male' }, { label: 'Female', value: 'female' }],\n    validation: { required: true, message: \"Please accept the terms\" }\n  }\n  ```\n\n- **Select Dropdown**:\n\n  ```javascript\n  {\n    field: 'select1',\n    type: InputTypes.SELECT,\n    label: 'Shazam',\n    helperText: \"They Please select the dog type\",\n    options: [{ label: 'Male', value: 'male' }, { label: 'Female', value: 'female' }, { label: 'select', value: '' }],\n    validation: { required: true, message: \"Please accept the terms\" },\n    gridProps: { xs: 12, sm: 4 }\n  }\n  ```\n\n### 4. **Using `useFormBuilder` Hook**\n\nThe `useFormBuilder` hook is used to generate initial values and validation schema based on the `fields` array:\n\n```javascript\nconst { initailValues, yupSchemaValidation } = useFormBuilder(fields);\n```\n\n- **initailValues**: An object containing the initial values for each field.\n- **yupSchemaValidation**: A Yup validation schema generated based on the validation rules defined in the `fields` array.\n\n### 5. **Formik Integration**\n\nThe `Formik` component is used to manage form state, validation, and submission:\n\n```javascript\n<Formik\n  initialValues={initailValues}\n  validationSchema={yupSchemaValidation}\n  onSubmit={(values, actions) => {\n    setTimeout(() => {\n      console.log(values);\n      alert(JSON.stringify(values, null, 2));\n      actions.setSubmitting(false);\n    }, 1000);\n  }}\n>\n  {({ values }) => (\n    <Form>\n      <FormBuilder group=\"form\" fields={fields} data-test=\"form\" values={values} />\n      <button type=\"submit\">Submit</button>\n    </Form>\n  )}\n</Formik>\n```\n\n- **initialValues**: The initial values for the form fields.\n- **validationSchema**: The Yup validation schema.\n- **onSubmit**: A callback function that is called when the form is submitted.\n- **FormBuilder**: A custom component that renders the form fields based on the `fields` array.\n\n### 6. **Conditional Logic**\n\nThe `conditions` property allows you to define conditional logic for showing/hiding fields based on the values of other fields:\n\n```javascript\nconditions: {\n  action: ConditionAction.SHOW,\n  groups: [{\n    group: \"check\",\n    groupPostCondition: PostCondition.AND,\n    logic: [\n      {\n        field: 'test.firstName',\n        value: \"10\",\n        condition: ConditionName.EQUALS,\n        postCondition: PostCondition.AND\n      },\n    ]\n  }]\n}\n```\n\n- **action**: Specifies whether to `SHOW` or `HIDE` the field based on the condition.\n- **groups**: An array of condition groups.\n- **logic**: An array of conditions that must be met for the action to take effect.\n\n### 7. **Grid Layout**\n\nThe `gridProps` property allows you to define the layout of the form fields using Material-UI's grid system:\n\n```javascript\ngridProps: { xs: 12, sm: 4 }\n```\n\n- **xs**: The number of columns the field should occupy on extra small screens.\n- **sm**: The number of columns the field should occupy on small screens.\n\n### 8. **Form Submission**\n\nWhen the form is submitted, the `onSubmit` function is called, which logs the form values and displays them in an alert:\n\n```javascript\nonSubmit={(values, actions) => {\n  setTimeout(() => {\n    console.log(values);\n    alert(JSON.stringify(values, null, 2));\n    actions.setSubmitting(false);\n  }, 1000);\n}}\n```\n\n### 9. **Complete Example**\n\nHere is the complete example with all the fields and configurations:\n\n```javascript\nimport { Form, Formik } from 'formik';\nimport { ConditionAction, ConditionName, FieldType, FormBuilder, InputTypes, PostCondition, useFormBuilder } from './form-builder';\n\nexport function App() {\n  const fields: FieldType[] = [\n    {\n      field: 'title', type: InputTypes.TEXT, label: 'Property Title',\n      validation: { required: true, message: \"First name is required\" },\n      muiProps: { variant: 'soft', fullWidth: true }\n    },\n    {\n      field: 'test.lastName', type: InputTypes.TEXT, label: 'Last Name', initialValue: 'Doe',\n      helperText: \"Enter your last Name\",\n      validation: { required: true, message: \"First name is required\" },\n      muiProps: { variant: 'soft' },\n      conditions: {\n        action: ConditionAction.SHOW,\n        groups: [{\n          group: \"check\", groupPostCondition: PostCondition.AND, logic: [\n            {\n              field: 'test.firstName', value: \"10\", condition: ConditionName.EQUALS,\n              postCondition: PostCondition.AND\n            },\n          ]\n        }]\n      }\n    },\n    {\n      field: 'test.amount', type: InputTypes.TEXT,\n      label: 'Amount', initialValue: 0,\n      helperText: \"Enter your last Name\",\n      validation: { required: true, message: \"Amount is required\", isPositive: true },\n      muiProps: { variant: 'soft', type: 'number' },\n    },\n    {\n      field: 'test.firstName', type: InputTypes.TEXT, label: 'Last 2', initialValue: 'sssss',\n      helperText: \"Enter your last Name\",\n      validation: { required: true, message: \"First name is required\" },\n      muiProps: { variant: 'soft' }\n    },\n    {\n      field: 'MyCheckBox', type: InputTypes.CHECKBOX, groupLabel: \"\",\n      helperText: \"testing this checkbox with all the values\",\n      initialValue: [],\n      validation: { required: true, message: \"Please accept the terms\", minLength: 1 },\n      muiProps: {},\n      options: [{ label: 'Option 1', value: 'option1', description: \"test is not the only thing people of the memeber of the  ithat is the best of the life of the need of\" }],\n    },\n    {\n      field: 'MyCheckBox2', type: InputTypes.CHECKBOX, groupLabel: \"Choose any one\",\n      helperText: \"testing this checkbox with all the values\",\n      initialValue: [],\n      validation: { required: true, message: \"Please accept the terms\", minLength: 1 },\n      muiProps: {},\n      options: [{ label: 'Option 2', value: 'option2', description: \"testing this option\" }, { label: 'Option 6', value: 'option5', description: \"what do you think I cant test this option \" }],\n    },\n    {\n      field: 'radio1', type: InputTypes.RADIO, label: 'radio',\n      groupLabel: 'Gender',\n      initialValue: '',\n      options: [{ label: 'Male', value: 'male' }, { label: 'Female', value: 'female' }],\n      validation: { required: true, message: \"Please accept the terms\" }\n    },\n    {\n      field: 'radio2', type: InputTypes.RADIO, label: 'radio',\n      groupLabel: 'Gender',\n      initialValue: '',\n      options: [{ label: 'Male334', value: true }, { label: 'Female333', value: false }],\n      validation: { required: true, message: \"Please accept the terms\" }\n    },\n    {\n      field: 'select25', type: InputTypes.RADIO, label: 'Shazam 2', initialValue: '',\n      options: [{ label: 'Male', value: 'male' }, { label: 'Female', value: 'female' }],\n      validation: { required: true, message: \"Please accept the terms\" },\n      gridProps: { xs: 12, sm: 4 }\n    },\n    {\n      field: 'select30', type: InputTypes.AUTO_COMPLETE, label: 'Shazam 2', initialValue: '',\n      options: [{ label: 'Male', value: true }, { label: 'Female', value: false }],\n      validation: { required: true, message: \"Please accept the terms\" },\n      gridProps: { xs: 12, sm: 4 }\n    },\n    {\n      field: 'select1', type: InputTypes.SELECT, label: 'Shazam',\n      helperText: \"They Please select the dog type\",\n      options: [{ label: 'Male', value: 'male' }, { label: 'Female', value: 'female' }, { label: 'select', value: '' }],\n      validation: { required: true, message: \"Please accept the terms\" },\n      gridProps: { xs: 12, sm: 4 }\n    },\n  ];\n\n  const { initailValues, yupSchemaValidation } = useFormBuilder(fields);\n\n  return (\n    <Formik\n      initialValues={initailValues}\n      validationSchema={yupSchemaValidation}\n      onSubmit={(values, actions) => {\n        setTimeout(() => {\n          console.log(values);\n          alert(JSON.stringify(values, null, 2));\n          actions.setSubmitting(false);\n        }, 1000);\n      }}\n    >\n      {({ values }) => (\n        <Form>\n          <FormBuilder group=\"form\" fields={fields} data-test=\"form\" values={values} />\n          <button type=\"submit\">Submit</button>\n        </Form>\n      )}\n    </Formik>\n  );\n}\n\nexport default App;\n```\n\n### 10. **Running the Application**\n\nTo run the application, simply include the `App` component in your main `index.js` or `App.js` file and start the development server:\n\n```bash\nnpm start\n```\n\nThis will start the React application, and you should see the form rendered in your browser.\n\n\n# License\n## This project is licensed under the MIT License. See the LICENSE file for details.\n\nAuthor\nCreated by [codewithshinde](\"https://github.com/codewithshinde\").","readmeFilename":"README.md","_rev":"1-68929f325df50a30b8232f24013f3d06"}