From ab79d7a4b335116bbc066cc6647f80bb68a3f4d9 Mon Sep 17 00:00:00 2001 From: MRBadri Date: Sat, 20 Apr 2024 01:00:03 +0330 Subject: [PATCH 1/2] feat(generator): handle all function for generate form and grid --- apps/docs/src/app/app.tsx | 411 +++++++++++------- packages/core/src/index.ts | 2 +- packages/generator/.babelrc | 12 + packages/generator/.eslintrc.json | 18 + packages/generator/README.md | 7 + packages/generator/package.json | 4 + packages/generator/project.json | 29 ++ packages/generator/src/index.ts | 11 + packages/generator/src/types/public.types.ts | 11 + .../src/utils/actionSubmit/actionSubmit.ts | 22 + .../src/utils/fieldText/fieldText.ts | 18 + .../src/utils/gridContainer/gridContainer.ts | 21 + .../generator/src/utils/gridItem/gridItem.ts | 21 + packages/generator/src/utils/id/id.ts | 12 + packages/generator/tsconfig.json | 17 + packages/generator/tsconfig.lib.json | 24 + tsconfig.base.json | 1 + 17 files changed, 483 insertions(+), 158 deletions(-) create mode 100644 packages/generator/.babelrc create mode 100644 packages/generator/.eslintrc.json create mode 100644 packages/generator/README.md create mode 100644 packages/generator/package.json create mode 100644 packages/generator/project.json create mode 100644 packages/generator/src/index.ts create mode 100644 packages/generator/src/types/public.types.ts create mode 100644 packages/generator/src/utils/actionSubmit/actionSubmit.ts create mode 100644 packages/generator/src/utils/fieldText/fieldText.ts create mode 100644 packages/generator/src/utils/gridContainer/gridContainer.ts create mode 100644 packages/generator/src/utils/gridItem/gridItem.ts create mode 100644 packages/generator/src/utils/id/id.ts create mode 100644 packages/generator/tsconfig.json create mode 100644 packages/generator/tsconfig.lib.json diff --git a/apps/docs/src/app/app.tsx b/apps/docs/src/app/app.tsx index 0f2c879..e19acd0 100644 --- a/apps/docs/src/app/app.tsx +++ b/apps/docs/src/app/app.tsx @@ -5,178 +5,275 @@ import { Link, Route, Routes } from 'react-router-dom'; import { Stack } from '@mui/material'; import { Builder } from '@mui-builder/core'; - -// const createGridContainer = (children, option) => { -// return { -// id: Math.random() * Math.random(), -// groupType: 'grid', -// type: 'container', -// props: { -// children, -// ...option, -// }, -// }; -// }; +import { + generateActionSubmit, + generateFieldText, + generateGridContainer, + generateGridItem, +} from '@mui-builder/generator'; export function App() { const groupList: FormBuilderProps[] = [ - // Fields - { - id: 'form-field-1', - groupType: 'form', - type: 'field-text', - props: { - id: 'Field-One', - formId: '20', - label: 'Field One (Form Id: 20)', - dependesies: ['FieldTwo'], - script: ` - if(formMethod.getValues()?.FieldTwo === "erfan"){ - setProps('FieldTwo' , {label:'i can'}); - return {}; - }`, - api: { - configs: { - url: `return ("https://jsonplaceholder.typicode.com/todo8888s/" + formMethod.getValues()?.FieldTwo);`, - method: 'post', - data: { - test: '1', + generateGridContainer({ + children: [ + generateGridItem({ + children: [ + generateFieldText({ + props: { + id: 'Field-One', + formId: '20', + label: 'Field One (Form Id: 20)', + dependesies: ['FieldTwo'], + script: ` + if(formMethod.getValues()?.FieldTwo === "erfan"){ + setProps('FieldTwo' , {label:'i can'}); + return {}; + }`, + api: { + configs: { + url: `return ("https://jsonplaceholder.typicode.com/todo8888s/" + formMethod.getValues()?.FieldTwo);`, + method: 'post', + data: { + test: '1', + }, + }, + queries: { + enable: ` + if(formMethod.getValues()?.FieldTwo === 'api'){ + return true; + } + return false; + `, + }, + }, + defaultValue: 'default value field one', + }, + }), + ], + }), + + generateGridItem({ + children: generateFieldText({ + props: { + id: 'FieldTwo', + formId: '20', + label: 'Field Two (Form Id: 20)', }, - }, - queries: { - enable: ` - if(formMethod.getValues()?.FieldTwo === 'api'){ - return true; - } - return false; - `, - }, - }, - defaultValue: 'default value field one', - }, - }, - { - id: 'form-field-2', - groupType: 'form', - type: 'field-text', - props: { - id: 'FieldTwo', - formId: '20', - label: 'Field Two (Form Id: 20)', - }, - }, + }), + }), + generateGridItem({ + children: generateFieldText({ + props: { + id: 'Field-Three', + formId: '21', + label: 'Field Three (Form Id: 21)', + // helperText: 'Helper Text', + rule: { + // required: { + // message: 'this is required', + // value: true, + // }, - { - id: 'form-field-2', - groupType: 'grid', - type: 'container', - props: { - rowSpacing: 2, - columnSpacing: 2, - children: [ - { - id: 'form-field-4', - groupType: 'grid', - type: 'item', + validate: ` + if(value === 'val') + return 'rule validate'; + `, + }, + }, + }), + }), + generateGridItem({ + children: generateActionSubmit({ props: { - children: { - id: 'form-field-4', - groupType: 'form', - type: 'field-text', - props: { - id: 'Field4', - formId: '20', - label: 'Field 4 (Form Id: 20)', + formId: '20', + children: 'Submit (20)', + onAction: 'console.log("Form 20: " , values);', + api: { + configs: { + url: `return ("https://jsonplaceholder.typicode.com/Actions/");`, + method: 'post', + data: `return formMethod.getValues();`, + }, + queries: { + enable: false, }, }, }, - }, - - { - id: 'form-field-5', - groupType: 'grid', - type: 'item', + }), + }), + generateGridItem({ + children: generateActionSubmit({ props: { - children: { - id: 'form-field-4', - groupType: 'form', - type: 'field-text', - props: { - id: 'Field4', - formId: '20', - label: 'Field 5 (Form Id: 20)', + formId: '21', + children: 'Submit (21)', + onAction: 'console.log("Form 21: " , values)', + }, + configs: { + loading: { + sx: { + bgcolor: '#c28d2b', }, }, }, - }, - ], - }, - }, + }), + }), + ], + }), + + // Fields + // { + // id: 'form-field-1', + // groupType: 'form', + // type: 'field-text', + // props: { + // id: 'Field-One', + // formId: '20', + // label: 'Field One (Form Id: 20)', + // dependesies: ['FieldTwo'], + // script: ` + // if(formMethod.getValues()?.FieldTwo === "erfan"){ + // setProps('FieldTwo' , {label:'i can'}); + // return {}; + // }`, + // api: { + // configs: { + // url: `return ("https://jsonplaceholder.typicode.com/todo8888s/" + formMethod.getValues()?.FieldTwo);`, + // method: 'post', + // data: { + // test: '1', + // }, + // }, + // queries: { + // enable: ` + // if(formMethod.getValues()?.FieldTwo === 'api'){ + // return true; + // } + // return false; + // `, + // }, + // }, + // defaultValue: 'default value field one', + // }, + // }, + // { + // id: 'form-field-2', + // groupType: 'form', + // type: 'field-text', + // props: { + // id: 'FieldTwo', + // formId: '20', + // label: 'Field Two (Form Id: 20)', + // }, + // }, + + // { + // id: 'form-field-2', + // groupType: 'grid', + // type: 'container', + // props: { + // rowSpacing: 2, + // columnSpacing: 2, + // children: [ + // { + // id: 'form-field-4', + // groupType: 'grid', + // type: 'item', + // props: { + // children: { + // id: 'form-field-4', + // groupType: 'form', + // type: 'field-text', + // props: { + // id: 'Field4', + // formId: '20', + // label: 'Field 4 (Form Id: 20)', + // }, + // }, + // }, + // }, + + // { + // id: 'form-field-5', + // groupType: 'grid', + // type: 'item', + // props: { + // children: { + // id: 'form-field-4', + // groupType: 'form', + // type: 'field-text', + // props: { + // id: 'Field4', + // formId: '20', + // label: 'Field 5 (Form Id: 20)', + // }, + // }, + // }, + // }, + // ], + // }, + // }, + + // { + // id: 'form-field-3', + // groupType: 'form', + // type: 'field-text', + // props: { + // id: 'Field-Three', + // formId: '21', + // label: 'Field Three (Form Id: 21)', + // // helperText: 'Helper Text', + // rule: { + // // required: { + // // message: 'this is required', + // // value: true, + // // }, - { - id: 'form-field-3', - groupType: 'form', - type: 'field-text', - props: { - id: 'Field-Three', - formId: '21', - label: 'Field Three (Form Id: 21)', - // helperText: 'Helper Text', - rule: { - // required: { - // message: 'this is required', - // value: true, - // }, - // validate: (value, formValues) => { - // if(value === 'val') - // return 'rule validate'; - // }, - validate: ` - if(value === 'val') - return 'rule validate'; - `, - }, - }, - }, + // validate: ` + // if(value === 'val') + // return 'rule validate'; + // `, + // }, + // }, + // }, - // Actions - { - id: 'form-action-1', - groupType: 'form', - type: 'action-submit', - props: { - formId: '20', - children: 'Submit (20)', - onAction: 'console.log("Form 20: " , values);', - api: { - configs: { - url: `return ("https://jsonplaceholder.typicode.com/Actions/");`, - method: 'post', - data: `return formMethod.getValues();`, - }, - queries: { - enable: false, - }, - }, - }, - }, - { - id: 'form-action-2', - groupType: 'form', - type: 'action-submit', - props: { - formId: '21', - children: 'Submit (21)', - onAction: 'console.log("Form 21: " , values)', - }, - configs: { - loading: { - sx: { - bgcolor: '#c28d2b', - }, - }, - }, - }, + // // Actions + // { + // id: 'form-action-1', + // groupType: 'form', + // type: 'action-submit', + // props: { + // formId: '20', + // children: 'Submit (20)', + // onAction: 'console.log("Form 20: " , values);', + // api: { + // configs: { + // url: `return ("https://jsonplaceholder.typicode.com/Actions/");`, + // method: 'post', + // data: `return formMethod.getValues();`, + // }, + // queries: { + // enable: false, + // }, + // }, + // }, + // }, + // { + // id: 'form-action-2', + // groupType: 'form', + // type: 'action-submit', + // props: { + // formId: '21', + // children: 'Submit (21)', + // onAction: 'console.log("Form 21: " , values)', + // }, + // configs: { + // loading: { + // sx: { + // bgcolor: '#c28d2b', + // }, + // }, + // }, + // }, ]; return ( diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 6560a9c..2d5d929 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,2 +1,2 @@ export * from './components/builder/builder'; -export * from './components/builder/builder.types'; +export type * from './components/builder/builder.types'; diff --git a/packages/generator/.babelrc b/packages/generator/.babelrc new file mode 100644 index 0000000..1ea870e --- /dev/null +++ b/packages/generator/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nx/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/packages/generator/.eslintrc.json b/packages/generator/.eslintrc.json new file mode 100644 index 0000000..a39ac5d --- /dev/null +++ b/packages/generator/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["plugin:@nx/react", "../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/packages/generator/README.md b/packages/generator/README.md new file mode 100644 index 0000000..0e557fb --- /dev/null +++ b/packages/generator/README.md @@ -0,0 +1,7 @@ +# generator + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test generator` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/packages/generator/package.json b/packages/generator/package.json new file mode 100644 index 0000000..caf3299 --- /dev/null +++ b/packages/generator/package.json @@ -0,0 +1,4 @@ +{ + "name": "@mui-builder/generator", + "version": "0.0.1" +} diff --git a/packages/generator/project.json b/packages/generator/project.json new file mode 100644 index 0000000..538f275 --- /dev/null +++ b/packages/generator/project.json @@ -0,0 +1,29 @@ +{ + "name": "generator", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "packages/generator/src", + "projectType": "library", + "tags": [], + "targets": { + "build": { + "executor": "@nx/rollup:rollup", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/packages/generator", + "tsConfig": "packages/generator/tsconfig.lib.json", + "project": "packages/generator/package.json", + "entryFile": "packages/generator/src/index.ts", + "external": ["react", "react-dom", "react/jsx-runtime"], + "rollupConfig": "@nx/react/plugins/bundle-rollup", + "compiler": "babel", + "assets": [ + { + "glob": "packages/generator/README.md", + "input": ".", + "output": "." + } + ] + } + } + } +} diff --git a/packages/generator/src/index.ts b/packages/generator/src/index.ts new file mode 100644 index 0000000..14368b0 --- /dev/null +++ b/packages/generator/src/index.ts @@ -0,0 +1,11 @@ +import generateActionSubmit from './utils/actionSubmit/actionSubmit'; +import generateFieldText from './utils/fieldText/fieldText'; +import generateGridContainer from './utils/gridContainer/gridContainer'; +import generateGridItem from './utils/gridItem/gridItem'; + +export { + generateGridContainer, + generateActionSubmit, + generateGridItem, + generateFieldText, +}; diff --git a/packages/generator/src/types/public.types.ts b/packages/generator/src/types/public.types.ts new file mode 100644 index 0000000..57beded --- /dev/null +++ b/packages/generator/src/types/public.types.ts @@ -0,0 +1,11 @@ +import { FormBuilderProps } from '@mui-builder/core'; +import { Configs } from '@mui-builder/form'; + +export type GeneratorProps = { + children?: C; + props?: T; + configs?: Configs; +}; +export type Generator = ( + props: GeneratorProps +) => FormBuilderProps; diff --git a/packages/generator/src/utils/actionSubmit/actionSubmit.ts b/packages/generator/src/utils/actionSubmit/actionSubmit.ts new file mode 100644 index 0000000..050d3b7 --- /dev/null +++ b/packages/generator/src/utils/actionSubmit/actionSubmit.ts @@ -0,0 +1,22 @@ +import { SubmitFieldProps } from 'packages/components/form/src/components/actions/submit/submit.types'; + +import { Generator } from '../../types/public.types'; + +import generateID from '../id/id'; + +const generateActionSubmit: Generator = ({ + props, + configs, +}) => { + return { + id: generateID(), + groupType: 'form', + type: 'action-submit', + props: { + ...(props as SubmitFieldProps), + }, + configs, + }; +}; + +export default generateActionSubmit; diff --git a/packages/generator/src/utils/fieldText/fieldText.ts b/packages/generator/src/utils/fieldText/fieldText.ts new file mode 100644 index 0000000..41bba89 --- /dev/null +++ b/packages/generator/src/utils/fieldText/fieldText.ts @@ -0,0 +1,18 @@ +import { TextProps } from 'packages/components/form/src/components/fields/text/text.types'; + +import { Generator } from '../../types/public.types'; + +import generateID from '../id/id'; + +const generateFieldText: Generator = ({ props }) => { + return { + id: generateID(), + groupType: 'form', + type: 'field-text', + props: { + ...props, + }, + }; +}; + +export default generateFieldText; diff --git a/packages/generator/src/utils/gridContainer/gridContainer.ts b/packages/generator/src/utils/gridContainer/gridContainer.ts new file mode 100644 index 0000000..9f2e34b --- /dev/null +++ b/packages/generator/src/utils/gridContainer/gridContainer.ts @@ -0,0 +1,21 @@ +import { GridProps } from '@mui-builder/grid'; + +import { Generator } from '../../types/public.types'; + +import generateID from '../id/id'; + +const generateGridContainer: Generator = ({ children, props }) => { + return { + id: generateID(), + groupType: 'grid', + type: 'container', + props: { + rowSpacing: 20, + columnSpacing: 20, + children, + ...props, + }, + }; +}; + +export default generateGridContainer; diff --git a/packages/generator/src/utils/gridItem/gridItem.ts b/packages/generator/src/utils/gridItem/gridItem.ts new file mode 100644 index 0000000..a2c248f --- /dev/null +++ b/packages/generator/src/utils/gridItem/gridItem.ts @@ -0,0 +1,21 @@ +import { GridProps } from '@mui-builder/grid'; + +import { Generator } from '../../types/public.types'; + +import generateID from '../id/id'; + +const generateGridItem: Generator = ({ children, props }) => { + return { + id: generateID(), + groupType: 'grid', + type: 'container', + props: { + rowSpacing: 2, + columnSpacing: 2, + children, + ...props, + }, + }; +}; + +export default generateGridItem; diff --git a/packages/generator/src/utils/id/id.ts b/packages/generator/src/utils/id/id.ts new file mode 100644 index 0000000..5d33169 --- /dev/null +++ b/packages/generator/src/utils/id/id.ts @@ -0,0 +1,12 @@ +function generateID(): string { + // Create a timestamp in milliseconds + const timestamp = new Date().getTime(); + + // Generate a random number based on the timestamp + const randomPart = Math.floor((Math.random() + 1) * timestamp); + + // Convert to base-36 (numbers + letters), and get the substring to ensure a fixed length + return `${timestamp.toString(36)}-${randomPart.toString(36)}`; +} + +export default generateID; diff --git a/packages/generator/tsconfig.json b/packages/generator/tsconfig.json new file mode 100644 index 0000000..95cfeb2 --- /dev/null +++ b/packages/generator/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "jsx": "react-jsx", + "allowJs": false, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + } + ], + "extends": "../../tsconfig.base.json" +} diff --git a/packages/generator/tsconfig.lib.json b/packages/generator/tsconfig.lib.json new file mode 100644 index 0000000..cfc4843 --- /dev/null +++ b/packages/generator/tsconfig.lib.json @@ -0,0 +1,24 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": [ + "node", + + "@nx/react/typings/cssmodule.d.ts", + "@nx/react/typings/image.d.ts" + ] + }, + "exclude": [ + "jest.config.ts", + "src/**/*.spec.ts", + "src/**/*.test.ts", + "src/**/*.spec.tsx", + "src/**/*.test.tsx", + "src/**/*.spec.js", + "src/**/*.test.js", + "src/**/*.spec.jsx", + "src/**/*.test.jsx" + ], + "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"] +} diff --git a/tsconfig.base.json b/tsconfig.base.json index b070152..8f3df05 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -17,6 +17,7 @@ "paths": { "@mui-builder/core": ["packages/core/src/index.ts"], "@mui-builder/form": ["packages/components/form/src/index.ts"], + "@mui-builder/generator": ["packages/generator/src/index.ts"], "@mui-builder/grid": ["packages/components/grid/src/index.ts"], "@mui-builder/utils": ["packages/utils/src/index.ts"] } From 8d0ad0ab04d3092afc27047be58cd53c7f0ee24d Mon Sep 17 00:00:00 2001 From: MRBadri Date: Sat, 20 Apr 2024 13:13:53 +0330 Subject: [PATCH 2/2] fix: issue on grid item --- apps/docs/src/app/app.tsx | 2 +- packages/generator/src/utils/gridContainer/gridContainer.ts | 4 ++-- packages/generator/src/utils/gridItem/gridItem.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/src/app/app.tsx b/apps/docs/src/app/app.tsx index e19acd0..14f11d6 100644 --- a/apps/docs/src/app/app.tsx +++ b/apps/docs/src/app/app.tsx @@ -120,7 +120,7 @@ export function App() { ], }), - // Fields + // // Fields // { // id: 'form-field-1', // groupType: 'form', diff --git a/packages/generator/src/utils/gridContainer/gridContainer.ts b/packages/generator/src/utils/gridContainer/gridContainer.ts index 9f2e34b..dad71f3 100644 --- a/packages/generator/src/utils/gridContainer/gridContainer.ts +++ b/packages/generator/src/utils/gridContainer/gridContainer.ts @@ -10,8 +10,8 @@ const generateGridContainer: Generator = ({ children, props }) => { groupType: 'grid', type: 'container', props: { - rowSpacing: 20, - columnSpacing: 20, + rowSpacing: 2, + columnSpacing: 2, children, ...props, }, diff --git a/packages/generator/src/utils/gridItem/gridItem.ts b/packages/generator/src/utils/gridItem/gridItem.ts index a2c248f..1cce04a 100644 --- a/packages/generator/src/utils/gridItem/gridItem.ts +++ b/packages/generator/src/utils/gridItem/gridItem.ts @@ -8,7 +8,7 @@ const generateGridItem: Generator = ({ children, props }) => { return { id: generateID(), groupType: 'grid', - type: 'container', + type: 'item', props: { rowSpacing: 2, columnSpacing: 2,