attempting to run form builder from local source

This commit is contained in:
jasquat 2022-07-15 09:15:13 -04:00
parent f5f5e86524
commit 58888c14d4
5 changed files with 180 additions and 118 deletions

View File

@ -46,6 +46,8 @@ module.exports = {
babel: {
presets: [
'@babel/preset-env',
'@babel/preset-flow',
['@babel/preset-react', { runtime: 'automatic' }],
'@babel/preset-typescript',
],

255
package-lock.json generated
View File

@ -11,7 +11,10 @@
"@babel/core": "^7.18.6",
"@babel/plugin-transform-react-jsx": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0",
"@fortawesome/fontawesome-svg-core": "*",
"@fortawesome/free-solid-svg-icons": "*",
"@fortawesome/react-fontawesome": "*",
"@ginkgo-bioworks/react-json-schema-form-builder": "file:../../react-json-schema-form-builder",
"@monaco-editor/react": "^4.4.5",
"@rjsf/core": "^4.2.0",
"@tanstack/react-table": "^8.2.2",
@ -28,21 +31,27 @@
"bpmn-js": "^9.1.0",
"bpmn-js-properties-panel": "^1.2.0",
"bpmn-js-spiffworkflow": "^0.0.8",
"classnames": "*",
"craco": "^0.0.3",
"date-fns": "^2.28.0",
"diagram-js": "^8.5.0",
"dmn-js": "^12.2.0",
"dmn-js-properties-panel": "^1.1.0",
"dmn-js-shared": "^12.1.1",
"jest-environment-jsdom": "*",
"keycloak-js": "^18.0.1",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-beautiful-dnd": "*",
"react-bootstrap": "^2.4.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.2.0",
"react-jsonschema-form": "^1.8.1",
"react-jss": "*",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-select": "*",
"reactstrap": "*",
"serve": "^14.0.0",
"timepicker": "^1.13.18",
"typescript": "^4.7.4",
@ -68,6 +77,63 @@
"ts-migrate": "^0.1.30"
}
},
"../../react-json-schema-form-builder": {
"name": "@ginkgo-bioworks/react-json-schema-form-builder",
"version": "2.9.0",
"license": "Apache-2.0",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^5.15.3 || ^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.14",
"classnames": "^2.2.6",
"jest-environment-jsdom": "^28.1.2",
"react-beautiful-dnd": "^13.0.0",
"react-jss": "^10.4.0",
"react-select": "^5.0.0",
"reactstrap": "^8.10.0 || ^9.0.0"
},
"devDependencies": {
"@babel/core": "^7.16.7",
"@babel/preset-env": "^7.16.7",
"@babel/preset-flow": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"babel-jest": "^28.1.0",
"bootstrap": "^5.1.3",
"coveralls": "^3.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"eslint": "^7.25.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-config-standard": "^16.0.2",
"eslint-config-standard-react": "^11.0.1",
"eslint-plugin-flowtype": "^5.10.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"flow-bin": "^0.179.0",
"flow-typed": "^3.2.1",
"jest": "^28.1.2",
"microbundle": "^0.14.2",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"reactstrap": "^9.0.0",
"rimraf": "^3.0.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"bootstrap": "^4.6.0 || ^5.1.3",
"react": "^16.x || ^17.x"
}
},
"../bpmn-js-properties-panel": {
"extraneous": true
},
@ -2751,80 +2817,20 @@
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.1.19",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
"integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
"react": ">=16.x"
"react": ">=16.3"
}
},
"node_modules/@ginkgo-bioworks/react-json-schema-form-builder": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/@ginkgo-bioworks/react-json-schema-form-builder/-/react-json-schema-form-builder-2.9.0.tgz",
"integrity": "sha512-jbpAzY/PdrgD1h/hWeZVWdpp5Pp1Dh5bzbknIBfBwVsx42C4ix2yaRCWk8B4gDcDxw49TKUqtODURMTDsHmXTg==",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^5.15.3 || ^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.14",
"classnames": "^2.2.6",
"react-beautiful-dnd": "^13.0.0",
"react-jss": "^10.4.0",
"react-select": "^5.0.0",
"reactstrap": "^8.10.0 || ^9.0.0"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"bootstrap": "^4.6.0 || ^5.1.3",
"react": "^16.x || ^17.x"
}
},
"node_modules/@ginkgo-bioworks/react-json-schema-form-builder/node_modules/react-beautiful-dnd": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
"integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
"dependencies": {
"@babel/runtime": "^7.9.2",
"css-box-model": "^1.2.0",
"memoize-one": "^5.1.1",
"raf-schd": "^4.0.2",
"react-redux": "^7.2.0",
"redux": "^4.0.4",
"use-memo-one": "^1.1.1"
},
"peerDependencies": {
"react": "^16.8.5 || ^17.0.0",
"react-dom": "^16.8.5 || ^17.0.0"
}
},
"node_modules/@ginkgo-bioworks/react-json-schema-form-builder/node_modules/react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"scheduler": "^0.20.2"
},
"peerDependencies": {
"react": "17.0.2"
}
},
"node_modules/@ginkgo-bioworks/react-json-schema-form-builder/node_modules/scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
"resolved": "../../react-json-schema-form-builder",
"link": true
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.9.5",
@ -20089,6 +20095,24 @@
"node": ">=14"
}
},
"node_modules/react-beautiful-dnd": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
"integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
"dependencies": {
"@babel/runtime": "^7.9.2",
"css-box-model": "^1.2.0",
"memoize-one": "^5.1.1",
"raf-schd": "^4.0.2",
"react-redux": "^7.2.0",
"redux": "^4.0.4",
"use-memo-one": "^1.1.1"
},
"peerDependencies": {
"react": "^16.8.5 || ^17.0.0",
"react-dom": "^16.8.5 || ^17.0.0"
}
},
"node_modules/react-bootstrap": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.4.0.tgz",
@ -27893,63 +27917,56 @@
}
},
"@fortawesome/react-fontawesome": {
"version": "0.1.19",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
"integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
"requires": {
"prop-types": "^15.8.1"
}
},
"@ginkgo-bioworks/react-json-schema-form-builder": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/@ginkgo-bioworks/react-json-schema-form-builder/-/react-json-schema-form-builder-2.9.0.tgz",
"integrity": "sha512-jbpAzY/PdrgD1h/hWeZVWdpp5Pp1Dh5bzbknIBfBwVsx42C4ix2yaRCWk8B4gDcDxw49TKUqtODURMTDsHmXTg==",
"version": "file:../../react-json-schema-form-builder",
"requires": {
"@babel/core": "^7.16.7",
"@babel/preset-env": "^7.16.7",
"@babel/preset-flow": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^5.15.3 || ^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.14",
"babel-jest": "^28.1.0",
"bootstrap": "^5.1.3",
"classnames": "^2.2.6",
"coveralls": "^3.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"eslint": "^7.25.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-config-standard": "^16.0.2",
"eslint-config-standard-react": "^11.0.1",
"eslint-plugin-flowtype": "^5.10.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"flow-bin": "^0.179.0",
"flow-typed": "^3.2.1",
"jest": "^28.1.2",
"jest-environment-jsdom": "^28.1.2",
"microbundle": "^0.14.2",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.14.0",
"react-beautiful-dnd": "^13.0.0",
"react-dom": "^16.14.0",
"react-jss": "^10.4.0",
"react-select": "^5.0.0",
"reactstrap": "^8.10.0 || ^9.0.0"
},
"dependencies": {
"react-beautiful-dnd": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
"integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
"requires": {
"@babel/runtime": "^7.9.2",
"css-box-model": "^1.2.0",
"memoize-one": "^5.1.1",
"raf-schd": "^4.0.2",
"react-redux": "^7.2.0",
"redux": "^4.0.4",
"use-memo-one": "^1.1.1"
}
},
"react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
"peer": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"scheduler": "^0.20.2"
}
},
"scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
"peer": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
}
"reactstrap": "^9.0.0",
"rimraf": "^3.0.2"
}
},
"@humanwhocodes/config-array": {
@ -40276,7 +40293,7 @@
"@csstools/postcss-stepped-value-functions": "^1.0.0",
"@csstools/postcss-trigonometric-functions": "^1.0.1",
"@csstools/postcss-unset-value": "^1.0.1",
"autoprefixer": "^10.4.7",
"autoprefixer": "10.4.5",
"browserslist": "^4.21.0",
"css-blank-pseudo": "^3.0.3",
"css-has-pseudo": "^3.0.4",
@ -40780,6 +40797,20 @@
"whatwg-fetch": "^3.6.2"
}
},
"react-beautiful-dnd": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
"integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
"requires": {
"@babel/runtime": "^7.9.2",
"css-box-model": "^1.2.0",
"memoize-one": "^5.1.1",
"raf-schd": "^4.0.2",
"react-redux": "^7.2.0",
"redux": "^4.0.4",
"use-memo-one": "^1.1.1"
}
},
"react-bootstrap": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.4.0.tgz",

View File

@ -6,7 +6,7 @@
"@babel/core": "^7.18.6",
"@babel/plugin-transform-react-jsx": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0",
"@ginkgo-bioworks/react-json-schema-form-builder": "file:../../react-json-schema-form-builder",
"@monaco-editor/react": "^4.4.5",
"@rjsf/core": "^4.2.0",
"@tanstack/react-table": "^8.2.2",
@ -41,7 +41,18 @@
"serve": "^14.0.0",
"timepicker": "^1.13.18",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
"web-vitals": "^2.1.4",
"@fortawesome/fontawesome-svg-core": "*",
"@fortawesome/free-solid-svg-icons": "*",
"@fortawesome/react-fontawesome": "*",
"classnames": "*",
"jest-environment-jsdom": "*",
"react-beautiful-dnd": "*",
"react-jss": "*",
"react-select": "*",
"reactstrap": "*"
},
"overrides": {
"postcss-preset-env": {
@ -50,6 +61,10 @@
"@ginkgo-bioworks/react-json-schema-form-builder": {
"react": "^18.2.0",
"bootstrap": "^5.2.0-beta1"
},
"react-beautiful-dnd": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
},
"scripts": {

View File

@ -1,5 +1,5 @@
// @ts-expect-error TS(7016) FIXME
import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder';
import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder/src';
type OwnProps = {
schema: string;
@ -14,5 +14,6 @@ export default function ReactFormBuilder({ schema, uischema }: OwnProps) {
// });
// }}
// return <main />;
return <FormBuilder schema={schema} uischema={uischema} />;
// return <FormBuilder schema={schema} uischema={uischema} />;
return <FormBuilder schema={schema} />;
}

View File

@ -4,7 +4,20 @@ import { Button, Stack } from 'react-bootstrap';
import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import FileInput from '../components/FileInput';
// import ReactFormBuilder from '../components/ReactFormBuilder';
import ReactFormBuilder from '../components/ReactFormBuilder';
const formSchema = `
{
"title": "Enter a number to multiply with system number",
"description": "Your number will be multiplied with {{system_generated_number}}",
"type": "object",
"required": ["user_generated_number"],
"properties": {
"system_generated_number": {"type": "integer", "title": "System Generated Number", "default": 0},
"user_generated_number": {"type": "integer", "title": "User Generated Number", "default": 0}
}
}
`;
export default function ProcessModelShow() {
const params = useParams();
@ -203,5 +216,5 @@ export default function ProcessModelShow() {
</main>
);
}
// <ReactFormBuilder schema="" uischema="" />
<ReactFormBuilder schema={formSchema} uischema="" />;
}