Merge pull request #24 from AmshenShanu07/develop

Develop

Author: AmshenShanu07

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [18.16.x]
 
     steps:
       - uses: actions/checkout@v3

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18
+WORKDIR /usr/src/app
+
+EXPOSE 3000
+EXPOSE 3001
+EXPOSE 3002
+
+COPY package*.json ./
+
+RUN npm i -g [email protected]
+RUN npm install --legacy-peer-deps
+
+COPY . .
+
+RUN npm run clean
+RUN npm run bootstrap
+
+CMD [ "npm", "run", "start:dev" ]

package-lock.json

@@ -10,18 +10,18 @@
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "start:dev": "lerna run --parallel dev ",
-    "start:package":"lerna run dev --scope=form-sculpt",
-    "start:docs":"lerna run dev --scope=docs",
-    "start:playground":"lerna run dev --scope=playground",
+    "start:package": "lerna run dev --scope=form-sculpt",
+    "start:docs": "lerna run dev --scope=docs",
+    "start:playground": "lerna run dev --scope=playground",
     "lint": "lerna run lint",
-    "cs-check":"lerna run cs-check",
-    "cs-format":"lerna run cs-format",
+    "cs-check": "lerna run cs-check",
+    "cs-format": "lerna run cs-format",
     "build": "lerna run build --stream",
     "build:web": "lerna exec --parallel --scope '{playground,docs}' -- npm run build",
     "publish": "lerna run release --stream",
-    "publish:package":"lerna run release --scope=form-sculpt --stream",
-    "publish:docs":"lerna run release --scope=docs --stream",
-    "publish:playground":"lerna run release --scope=playground --stream",
+    "publish:package": "lerna run release --scope=form-sculpt --stream",
+    "publish:docs": "lerna run release --scope=docs --stream",
+    "publish:playground": "lerna run release --scope=playground --stream",
     "clean": "lerna clean --yes"
   },
   "workspaces": [
@@ -37,5 +37,6 @@
     "lerna": "^6.6.2",
     "prettier": "^2.8.8",
     "tslint-config-prettier": "^1.18.0"
-  }
+  },
+  "version": "0.0.0"
 }

package.json

@@ -4,7 +4,7 @@
   "private":true,
   "scripts": {
     "docusaurus": "docusaurus",
-    "dev": "docusaurus start",
+    "dev": "docusaurus start --port 3002",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "release": "npm run build",

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-sculpt",
-  "version": "0.3.13",
+  "version": "0.3.20",
   "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/package.json

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
+
 import Form from './Components/Form';
-import { medAuth } from './sampleData';
+import { chartMar } from './sampleData';
 import { ButtonTemplateProps } from './Context/PropContext/type';
 
-
 const ButtonTemplate: React.FC<ButtonTemplateProps> = ({ errors, values }) => {
+  
   return (
     <React.Fragment>
       <button type='submit'>Submit</button>
@@ -14,10 +15,8 @@ const ButtonTemplate: React.FC<ButtonTemplateProps> = ({ errors, values }) => {
   );
 };
 
-
-
 const App = () => {
-  // const [val, setVal] = useState<string>("Paracitamol");
+  const [val, setVal] = useState<string>("12");
   const uploadFile = async (file: File) => {
     const url = await URL.createObjectURL(file);
     return url;
@@ -26,19 +25,17 @@ const App = () => {
   return (
     <div>
       <Form
-        schema={medAuth}
+        schema={chartMar}
         onSubmit={(d) => console.log(d)}
         onFileUpload={uploadFile}
         defaultValue={{
-          TimesPerDay:'2',
-          RXNumber:"Paracitamol",
-          TimesPerDayIfValueOfTimeofMedicine1Is2:new Date(),
-          TimesPerDayIfValueOfTimeofMedicine2Is2: new Date(),
+          Dose: 0
         }}
         templates={{
-          ButtonTemplates: ButtonTemplate,
+          ButtonTemplates: ButtonTemplate
         }}
-     />
+      />
+      <input type="text" value={val} onChange={(e) => setVal(e.target.value)} />
     </div>
   );
 };

packages/form-sculpt/src/App.tsx

@@ -24,7 +24,7 @@ const FormCheckboxes = (props: InputFieldProps) => {
         {data.options &&
           data.options.map((d: string, i: number) => {
             return (
-              <Box key={i} sx={{ display:'flex', flexWrap:'wrap' }} >
+              <Box key={i} sx={{ display: 'flex', flexWrap: 'wrap' }}>
                 <Controller
                   name={d}
                   control={control}
@@ -51,10 +51,11 @@ const FormCheckboxes = (props: InputFieldProps) => {
                           onClick={(e: any) => onChange(e, data, field.onChange)}
                           checked={(values[data.key] && values[data.key].includes(d)) || false}
                           control={
-                          <Checkbox 
-                            sx={inputFieldStyle?.checkboxes?.fieldStyle || {}}
-                            disabled={Boolean(data.disable)}
-                          />}
+                            <Checkbox
+                              sx={inputFieldStyle?.checkboxes?.fieldStyle || {}}
+                              disabled={Boolean(data.disable)}
+                            />
+                          }
                         />
                       </>
                     );

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

@@ -8,7 +8,7 @@ import { useValueHolder } from '../../Context/DataHolderContext/hook';
 const FormCustomElement = (props: InputFieldProps) => {
   const { control, data, error, onChange } = props;
   const { values } = useValueHolder();
-  const { customFields } = useProps();
+  const { customFields, schema } = useProps();
 
   return (
     <Grid item xs={data.fieldWidth * 12}>
@@ -26,7 +26,7 @@ const FormCustomElement = (props: InputFieldProps) => {
                 value={field.value}
                 error={error[data.key] || {}}
                 onChange={(e: any) => onChange(e, data, field.onChange)}
-                context={{ values, errors: error }}
+                context={{ values, schema, errors: error }}
               />
             );
           }

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

@@ -2,10 +2,10 @@ import { Grid, InputLabel } from '@mui/material';
 import { Controller } from 'react-hook-form';
 
 import { InputFieldProps } from './type';
-// import moment from "moment";
-import { useProps } from '../../Context/PropContext/hook';
 import { DatePicker } from '@mui/x-date-pickers';
+import { useProps } from '../../Context/PropContext/hook';
 import { useValueHolder } from '../../Context/DataHolderContext/hook';
+import dayjs from 'dayjs';
 
 const FormDate = (props: InputFieldProps) => {
   const { control, data, error, onChange } = props;
@@ -39,16 +39,16 @@ const FormDate = (props: InputFieldProps) => {
                 {data.isRequired && <span style={{ color: 'red' }}>*</span>}
               </InputLabel>
               <DatePicker
-                value={new Date(values[data.key])}
+                value={values[data.key]?dayjs(values[data.key]):null}
                 disabled={Boolean(data.disable)}
                 sx={inputFieldStyle?.textField?.fieldStyle || {}}
                 onChange={(e: any) => onChange(e, data, field.onChange)}
                 slotProps={{
                   textField: {
                     fullWidth: true,
                     size: inputFieldSize,
-                    FormHelperTextProps:{
-                      sx:inputFieldStyle?.date?.errorStyle || {}
+                    FormHelperTextProps: {
+                      sx: inputFieldStyle?.date?.errorStyle || {},
                     },
                     error: error[data.key] || '' ? true : false,
                     helperText: