Merge pull request #24 from AmshenShanu07/develop

Develop
AmshenShanu07 · Jan 3, 2024 · 297a9b6 · 297a9b6
2 parents 6636fc0 + 317f465
commit 297a9b6
Show file tree

Hide file tree

Showing 28 changed files with 778 additions and 2,035 deletions.
diff --git a/.github/workflows/ci.yml b/.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

diff --git a/Dockerfile b/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" ]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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"
 }
diff --git a/packages/docs/package.json b/packages/docs/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",

diff --git a/packages/form-sculpt/package.json b/packages/form-sculpt/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",

diff --git a/packages/form-sculpt/src/App.tsx b/packages/form-sculpt/src/App.tsx
@@ -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>
   );
 };

diff --git a/packages/form-sculpt/src/Components/Fields/checkboxes.tsx b/packages/form-sculpt/src/Components/Fields/checkboxes.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)}
+                            />
+                          }
                         />
                       </>
                     );

diff --git a/packages/form-sculpt/src/Components/Fields/customComponent.tsx b/packages/form-sculpt/src/Components/Fields/customComponent.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 }}
               />
             );
           }

diff --git a/packages/form-sculpt/src/Components/Fields/date.tsx b/packages/form-sculpt/src/Components/Fields/date.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:

diff --git a/packages/form-sculpt/src/Components/Fields/datetime.tsx b/packages/form-sculpt/src/Components/Fields/datetime.tsx
@@ -5,13 +5,16 @@ import { InputFieldProps } from './type';
 import { DateTimePicker } from '@mui/x-date-pickers';
 import { useProps } from '../../Context/PropContext/hook';
 import { useValueHolder } from '../../Context/DataHolderContext/hook';
+import dayjs from 'dayjs';
 
 const FormDateTime = (props: InputFieldProps) => {
   const { control, data, error, onChange } = props;
 
   const { inputFieldSize, inputFieldStyle, templates } = useProps();
   const { values } = useValueHolder();
 
+
+
   return (
     <Grid item xs={data.fieldWidth * 12}>
       <Controller
@@ -38,16 +41,16 @@ const FormDateTime = (props: InputFieldProps) => {
                 {data.isRequired && <span style={{ color: 'red' }}>*</span>}
               </InputLabel>
               <DateTimePicker
-                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?.dateTime?.errorStyle || {}
+                    FormHelperTextProps: {
+                      sx: inputFieldStyle?.dateTime?.errorStyle || {},
                     },
                     error: error[data.key] || '' ? true : false,
                     helperText:

diff --git a/packages/form-sculpt/src/Components/Fields/file.tsx b/packages/form-sculpt/src/Components/Fields/file.tsx
@@ -80,9 +80,7 @@ const FormFileUpload = (props: InputFieldProps) => {
       <input type='file' hidden name={key} ref={inputRef} onChange={onUpload} accept={getInputFileAccept()} />
       <Grid container>
         <Grid item xs={12}>
-          <InputLabel sx={inputFieldStyle?.file?.labelStyle || {}} >
-            {fieldLabel.label}
-          </InputLabel>
+          <InputLabel sx={inputFieldStyle?.file?.labelStyle || {}}>{fieldLabel.label}</InputLabel>
         </Grid>
         <Grid item xs={12} sx={{ mt: 2 }}>
           <Typography variant='subtitle2' color='grey'>

diff --git a/packages/form-sculpt/src/Components/Fields/multiFile.tsx b/packages/form-sculpt/src/Components/Fields/multiFile.tsx
@@ -77,7 +77,6 @@ const FormMultiFileUpload = (props: InputFieldProps) => {
 
       tempFileUrls.push({ fileName: file.name, fileUrl: url });
     }
-    console.log(tempFileUrls);
 
     setValues({ ...values, [key]: [...tempFileUrls] });
   };
@@ -102,9 +101,7 @@ const FormMultiFileUpload = (props: InputFieldProps) => {
       <input multiple hidden accept={getInputFileAccept()} name={key} type='file' ref={inputRef} onChange={onUpload} />
       <Grid container>
         <Grid item xs={12}>
-          <InputLabel sx={inputFieldStyle?.multiFile?.labelStyle || {}} >
-            {fieldLabel.label}
-          </InputLabel>
+          <InputLabel sx={inputFieldStyle?.multiFile?.labelStyle || {}}>{fieldLabel.label}</InputLabel>
         </Grid>
         {files.map((file, i) => (
           <Grid item xs={12} sx={{ mt: i == 0 ? 2 : 0.5 }} key={i}>

diff --git a/packages/form-sculpt/src/Components/Fields/radio.tsx b/packages/form-sculpt/src/Components/Fields/radio.tsx
@@ -47,7 +47,7 @@ const FormRadio = (props: InputFieldProps) => {
                     />
                   ))}
               </RadioGroup>
-              <Typography  sx={inputFieldStyle?.radio?.errorStyle || {}} variant='subtitle2' color='#d32f2f'>
+              <Typography sx={inputFieldStyle?.radio?.errorStyle || {}} variant='subtitle2' color='#d32f2f'>
                 {error[data.key] || ''
                   ? (error[data.key]?.message as string).replace(data.key, data.fieldLabel.label)
                   : ''}

diff --git a/packages/form-sculpt/src/Components/Fields/select.tsx b/packages/form-sculpt/src/Components/Fields/select.tsx
@@ -49,7 +49,7 @@ const FormSelect = (props: InputFieldProps) => {
                 }
                 select
                 FormHelperTextProps={{
-                  sx:inputFieldStyle?.select?.errorStyle || {}
+                  sx: inputFieldStyle?.select?.errorStyle || {},
                 }}
                 size={inputFieldSize}
               >

diff --git a/packages/form-sculpt/src/Components/Fields/textArea.tsx b/packages/form-sculpt/src/Components/Fields/textArea.tsx
@@ -5,7 +5,7 @@ import { InputFieldProps } from './type';
 import { useProps } from '../../Context/PropContext/hook';
 
 const FormTextArea = (props: InputFieldProps) => {
-  const { control, data, error, onChange, } = props;
+  const { control, data, error, onChange } = props;
 
   const { inputFieldSize, templates, inputFieldStyle } = useProps();
 
@@ -31,7 +31,7 @@ const FormTextArea = (props: InputFieldProps) => {
 
           return (
             <>
-              <InputLabel sx={inputFieldStyle?.textArea?.labelStyle || {}}  >
+              <InputLabel sx={inputFieldStyle?.textArea?.labelStyle || {}}>
                 {data.fieldLabel.label}
                 {data.isRequired && <span style={{ color: 'red' }}>*</span>}
               </InputLabel>
@@ -44,7 +44,7 @@ const FormTextArea = (props: InputFieldProps) => {
                 disabled={Boolean(data.disable)}
                 minRows={3}
                 FormHelperTextProps={{
-                  sx:inputFieldStyle?.textArea?.errorStyle || {}
+                  sx: inputFieldStyle?.textArea?.errorStyle || {},
                 }}
                 size={inputFieldSize}
                 placeholder={data.fieldLabel.placeholderText}

diff --git a/packages/form-sculpt/src/Components/Fields/textField.tsx b/packages/form-sculpt/src/Components/Fields/textField.tsx
@@ -54,7 +54,7 @@ const FormTextField = (props: InputFieldProps) => {
                 placeholder={data.fieldLabel.placeholderText}
                 error={error[data.key] || '' ? true : false}
                 FormHelperTextProps={{
-                  sx:inputFieldStyle?.textField?.errorStyle || {}
+                  sx: inputFieldStyle?.textField?.errorStyle || {},
                 }}
                 helperText={
                   error[data.key] || ''

diff --git a/packages/form-sculpt/src/Components/Fields/time.tsx b/packages/form-sculpt/src/Components/Fields/time.tsx
@@ -2,7 +2,6 @@ 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 { TimePicker } from '@mui/x-date-pickers';
 import { useValueHolder } from '../../Context/DataHolderContext/hook';
@@ -49,8 +48,8 @@ const FormTime = (props: InputFieldProps) => {
                     fullWidth: true,
                     size: inputFieldSize,
                     error: error[data.key] || '' ? true : false,
-                    FormHelperTextProps:{
-                      sx:inputFieldStyle?.time?.errorStyle || {}
+                    FormHelperTextProps: {
+                      sx: inputFieldStyle?.time?.errorStyle || {},
                     },
                     helperText:
                       error[data.key] || ''