add: dynamic form generation based on json-schema
All checks were successful
checks-impure / test (pull_request) Successful in 12s
checks / test (pull_request) Successful in 1m43s

This commit is contained in:
Johannes Kirschbauer 2023-09-02 17:06:22 +02:00
parent d30f640321
commit 10c4d26b58
5 changed files with 863 additions and 401 deletions

View File

@ -254,7 +254,7 @@
};
};
"@babel/runtime" = {
"7.22.10" = {
"7.22.11" = {
depInfo = {
regenerator-runtime = {
descriptor = "^0.14.0";
@ -263,13 +263,13 @@
};
};
fetchInfo = {
narHash = "sha256-5ecEDXI/B/XZUtU3VFGYjC1yAMqmmoqb9Jyu03CI1rQ=";
narHash = "sha256-u4IYeznySCACZfl7/j6Fwdz0J5eRLYRntlijjEtZQb0=";
type = "tarball";
url = "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz";
url = "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.11.tgz";
};
ident = "@babel/runtime";
ltype = "file";
version = "7.22.10";
version = "7.22.11";
};
};
"@babel/types" = {
@ -311,7 +311,7 @@
};
"@babel/runtime" = {
descriptor = "^7.18.3";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
"@emotion/hash" = {
@ -459,7 +459,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.18.3";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
"@emotion/babel-plugin" = {
@ -574,7 +574,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.18.3";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
"@emotion/babel-plugin" = {
@ -1104,7 +1104,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.22.6";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
"@emotion/is-prop-valid" = {
@ -1119,7 +1119,7 @@
};
"@mui/utils" = {
descriptor = "^5.14.5";
pin = "5.14.5";
pin = "5.14.7";
runtime = true;
};
"@popperjs/core" = {
@ -1183,7 +1183,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.22.6";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
};
@ -1214,7 +1214,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.22.6";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
"@mui/base" = {
@ -1239,7 +1239,7 @@
};
"@mui/utils" = {
descriptor = "^5.14.5";
pin = "5.14.5";
pin = "5.14.7";
runtime = true;
};
"@types/react-transition-group" = {
@ -1308,12 +1308,12 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.22.6";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
"@mui/utils" = {
descriptor = "^5.14.5";
pin = "5.14.5";
pin = "5.14.7";
runtime = true;
};
prop-types = {
@ -1346,7 +1346,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.21.0";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
"@emotion/cache" = {
@ -1393,7 +1393,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.22.6";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
"@mui/private-theming" = {
@ -1413,7 +1413,7 @@
};
"@mui/utils" = {
descriptor = "^5.14.5";
pin = "5.14.5";
pin = "5.14.7";
runtime = true;
};
clsx = {
@ -1479,11 +1479,11 @@
};
};
"@mui/utils" = {
"5.14.5" = {
"5.14.7" = {
depInfo = {
"@babel/runtime" = {
descriptor = "^7.22.6";
pin = "7.22.10";
descriptor = "^7.22.10";
pin = "7.22.11";
runtime = true;
};
"@types/prop-types" = {
@ -1508,9 +1508,9 @@
};
};
fetchInfo = {
narHash = "sha256-mym+STz4KseB2TDlXB8qkcPKpvNQDU4r+9xTC99m84U=";
narHash = "sha256-bvWlZoYxVVHqprNjDYZQtl6vrpx6BZNUe/t8J+REcHk=";
type = "tarball";
url = "https://registry.npmjs.org/@mui/utils/-/utils-5.14.5.tgz";
url = "https://registry.npmjs.org/@mui/utils/-/utils-5.14.7.tgz";
};
ident = "@mui/utils";
ltype = "file";
@ -1519,7 +1519,7 @@
descriptor = "^17.0.0 || ^18.0.0";
};
};
version = "5.14.5";
version = "5.14.7";
};
};
"@next/env" = {
@ -2080,6 +2080,172 @@
version = "2.11.8";
};
};
"@rjsf/core" = {
"5.12.1" = {
depInfo = {
lodash = {
descriptor = "^4.17.21";
pin = "4.17.21";
runtime = true;
};
lodash-es = {
descriptor = "^4.17.21";
pin = "4.17.21";
runtime = true;
};
markdown-to-jsx = {
descriptor = "^7.3.2";
pin = "7.3.2";
runtime = true;
};
nanoid = {
descriptor = "^3.3.6";
pin = "3.3.6";
runtime = true;
};
prop-types = {
descriptor = "^15.8.1";
pin = "15.8.1";
runtime = true;
};
};
fetchInfo = {
narHash = "sha256-TYa/k9q0Au9+0l7qyLaa2XMyQ6bHZqRniGzzo7BFDWk=";
type = "tarball";
url = "https://registry.npmjs.org/@rjsf/core/-/core-5.12.1.tgz";
};
ident = "@rjsf/core";
ltype = "file";
peerInfo = {
"@rjsf/utils" = {
descriptor = "^5.8.x";
};
react = {
descriptor = "^16.14.0 || >=17";
};
};
version = "5.12.1";
};
};
"@rjsf/mui" = {
"5.12.1" = {
fetchInfo = {
narHash = "sha256-HS37nzO3SsWJycV8yvqrEjtcb9w8GxtivBBWArBhziU=";
type = "tarball";
url = "https://registry.npmjs.org/@rjsf/mui/-/mui-5.12.1.tgz";
};
ident = "@rjsf/mui";
ltype = "file";
peerInfo = {
"@emotion/react" = {
descriptor = "^11.7.0";
};
"@emotion/styled" = {
descriptor = "^11.6.0";
};
"@mui/icons-material" = {
descriptor = "^5.2.0";
};
"@mui/material" = {
descriptor = "^5.2.2";
};
"@rjsf/core" = {
descriptor = "^5.8.x";
};
"@rjsf/utils" = {
descriptor = "^5.8.x";
};
react = {
descriptor = ">=17";
};
};
treeInfo = { };
version = "5.12.1";
};
};
"@rjsf/utils" = {
"5.12.1" = {
depInfo = {
json-schema-merge-allof = {
descriptor = "^0.8.1";
pin = "0.8.1";
runtime = true;
};
jsonpointer = {
descriptor = "^5.0.1";
pin = "5.0.1";
runtime = true;
};
lodash = {
descriptor = "^4.17.21";
pin = "4.17.21";
runtime = true;
};
lodash-es = {
descriptor = "^4.17.21";
pin = "4.17.21";
runtime = true;
};
react-is = {
descriptor = "^18.2.0";
pin = "18.2.0";
runtime = true;
};
};
fetchInfo = {
narHash = "sha256-CR5Jmw9hCiLFWgoxBDdhuzItZz/Y60pAX0T0IxMQKJM=";
type = "tarball";
url = "https://registry.npmjs.org/@rjsf/utils/-/utils-5.12.1.tgz";
};
ident = "@rjsf/utils";
ltype = "file";
peerInfo = {
react = {
descriptor = "^16.14.0 || >=17";
};
};
version = "5.12.1";
};
};
"@rjsf/validator-ajv8" = {
"5.12.1" = {
depInfo = {
ajv = {
descriptor = "^8.12.0";
pin = "8.12.0";
runtime = true;
};
ajv-formats = {
descriptor = "^2.1.1";
pin = "2.1.1";
runtime = true;
};
lodash = {
descriptor = "^4.17.21";
pin = "4.17.21";
runtime = true;
};
lodash-es = {
descriptor = "^4.17.21";
pin = "4.17.21";
runtime = true;
};
};
fetchInfo = {
narHash = "sha256-w28JPlFA1Pnc3K/qBmPqwnlgQf6Pa/b7e7UY1zCvJjg=";
type = "tarball";
url = "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.12.1.tgz";
};
ident = "@rjsf/validator-ajv8";
ltype = "file";
peerInfo = {
"@rjsf/utils" = {
descriptor = "^5.8.x";
};
};
version = "5.12.1";
};
};
"@rollup/plugin-commonjs" = {
"22.0.2" = {
depInfo = {
@ -4627,7 +4793,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.12.5";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
cosmiconfig = {
@ -5209,6 +5375,69 @@
version = "4.1.4";
};
};
compute-gcd = {
"1.2.1" = {
depInfo = {
"validate.io-array" = {
descriptor = "^1.0.3";
pin = "1.0.6";
runtime = true;
};
"validate.io-function" = {
descriptor = "^1.0.2";
pin = "1.0.2";
runtime = true;
};
"validate.io-integer-array" = {
descriptor = "^1.0.0";
pin = "1.0.0";
runtime = true;
};
};
fetchInfo = {
narHash = "sha256-d0KQIsd8wClVDFno5ovxwZeZrxT8Eds/EZeee1vP9tk=";
type = "tarball";
url = "https://registry.npmjs.org/compute-gcd/-/compute-gcd-1.2.1.tgz";
};
ident = "compute-gcd";
ltype = "file";
version = "1.2.1";
};
};
compute-lcm = {
"1.1.2" = {
depInfo = {
compute-gcd = {
descriptor = "^1.2.1";
pin = "1.2.1";
runtime = true;
};
"validate.io-array" = {
descriptor = "^1.0.3";
pin = "1.0.6";
runtime = true;
};
"validate.io-function" = {
descriptor = "^1.0.2";
pin = "1.0.2";
runtime = true;
};
"validate.io-integer-array" = {
descriptor = "^1.0.0";
pin = "1.0.0";
runtime = true;
};
};
fetchInfo = {
narHash = "sha256-1KY8MWyNiiL/EbcaST1NDtJ/EVlphHN1zvMkEkEBUDA=";
type = "tarball";
url = "https://registry.npmjs.org/compute-lcm/-/compute-lcm-1.1.2.tgz";
};
ident = "compute-lcm";
ltype = "file";
version = "1.1.2";
};
};
concat-map = {
"0.0.1" = {
fetchInfo = {
@ -5834,7 +6063,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.1.2";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
};
@ -5851,7 +6080,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.8.7";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
csstype = {
@ -7430,7 +7659,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.20.7";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
aria-query = {
@ -9857,6 +10086,54 @@
version = "2.3.1";
};
};
json-schema-compare = {
"0.2.2" = {
depInfo = {
lodash = {
descriptor = "^4.17.4";
pin = "4.17.21";
runtime = true;
};
};
fetchInfo = {
narHash = "sha256-C0qcy7sHg0SseMH51wBxWKNSOuMKIsdYJrKZiorAD6g=";
type = "tarball";
url = "https://registry.npmjs.org/json-schema-compare/-/json-schema-compare-0.2.2.tgz";
};
ident = "json-schema-compare";
ltype = "file";
version = "0.2.2";
};
};
json-schema-merge-allof = {
"0.8.1" = {
depInfo = {
compute-lcm = {
descriptor = "^1.1.2";
pin = "1.1.2";
runtime = true;
};
json-schema-compare = {
descriptor = "^0.2.2";
pin = "0.2.2";
runtime = true;
};
lodash = {
descriptor = "^4.17.20";
pin = "4.17.21";
runtime = true;
};
};
fetchInfo = {
narHash = "sha256-XjBzD/iGKHCog9JktMJ7IV/hD3y/B7P7GPpCx+z3Ah4=";
type = "tarball";
url = "https://registry.npmjs.org/json-schema-merge-allof/-/json-schema-merge-allof-0.8.1.tgz";
};
ident = "json-schema-merge-allof";
ltype = "file";
version = "0.8.1";
};
};
json-schema-ref-parser = {
"5.1.3" = {
depInfo = {
@ -10223,6 +10500,19 @@
version = "4.17.21";
};
};
lodash-es = {
"4.17.21" = {
fetchInfo = {
narHash = "sha256-2l4E89z3xMFn6MP9E0rVVNFWnB1oUINVGzno0F9CL3g=";
type = "tarball";
url = "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz";
};
ident = "lodash-es";
ltype = "file";
treeInfo = { };
version = "4.17.21";
};
};
"lodash.get" = {
"4.4.2" = {
fetchInfo = {
@ -10402,6 +10692,24 @@
version = "0.25.9";
};
};
markdown-to-jsx = {
"7.3.2" = {
fetchInfo = {
narHash = "sha256-9sSiMN7r0b//8QFL72wsY4tkOpztRB0yDqV+1RUN97Q=";
type = "tarball";
url = "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.3.2.tgz";
};
ident = "markdown-to-jsx";
ltype = "file";
peerInfo = {
react = {
descriptor = ">= 0.14.0";
};
};
treeInfo = { };
version = "7.3.2";
};
};
matcher = {
"1.1.1" = {
depInfo = {
@ -10584,6 +10892,26 @@
pin = "5.14.5";
runtime = true;
};
"@rjsf/core" = {
descriptor = "^5.12.1";
pin = "5.12.1";
runtime = true;
};
"@rjsf/mui" = {
descriptor = "^5.12.1";
pin = "5.12.1";
runtime = true;
};
"@rjsf/validator-ajv8" = {
descriptor = "^5.12.1";
pin = "5.12.1";
runtime = true;
};
"@types/json-schema" = {
descriptor = "^7.0.12";
pin = "7.0.12";
runtime = true;
};
"@types/node" = {
descriptor = "20.4.7";
pin = "20.4.7";
@ -10810,7 +11138,7 @@
key = "supports-color/5.5.0";
};
"node_modules/@babel/runtime" = {
key = "@babel/runtime/7.22.10";
key = "@babel/runtime/7.22.11";
};
"node_modules/@babel/types" = {
key = "@babel/types/7.22.10";
@ -10956,7 +11284,7 @@
key = "@mui/types/7.2.4";
};
"node_modules/@mui/utils" = {
key = "@mui/utils/5.14.5";
key = "@mui/utils/5.14.7";
};
"node_modules/@next/env" = {
key = "@next/env/13.4.12";
@ -11049,6 +11377,24 @@
"node_modules/@popperjs/core" = {
key = "@popperjs/core/2.11.8";
};
"node_modules/@rjsf/core" = {
key = "@rjsf/core/5.12.1";
};
"node_modules/@rjsf/mui" = {
key = "@rjsf/mui/5.12.1";
};
"node_modules/@rjsf/utils" = {
key = "@rjsf/utils/5.12.1";
};
"node_modules/@rjsf/validator-ajv8" = {
key = "@rjsf/validator-ajv8/5.12.1";
};
"node_modules/@rjsf/validator-ajv8/node_modules/ajv" = {
key = "ajv/8.12.0";
};
"node_modules/@rjsf/validator-ajv8/node_modules/json-schema-traverse" = {
key = "json-schema-traverse/1.0.0";
};
"node_modules/@rollup/plugin-commonjs" = {
dev = true;
key = "@rollup/plugin-commonjs/22.0.2";
@ -11256,7 +11602,6 @@
key = "@types/estree/0.0.39";
};
"node_modules/@types/json-schema" = {
dev = true;
key = "@types/json-schema/7.0.12";
};
"node_modules/@types/json5" = {
@ -11334,15 +11679,12 @@
key = "ajv/6.12.6";
};
"node_modules/ajv-formats" = {
dev = true;
key = "ajv-formats/2.1.1";
};
"node_modules/ajv-formats/node_modules/ajv" = {
dev = true;
key = "ajv/8.12.0";
};
"node_modules/ajv-formats/node_modules/json-schema-traverse" = {
dev = true;
key = "json-schema-traverse/1.0.0";
};
"node_modules/ansi-colors" = {
@ -11542,6 +11884,12 @@
dev = true;
key = "compare-versions/4.1.4";
};
"node_modules/compute-gcd" = {
key = "compute-gcd/1.2.1";
};
"node_modules/compute-lcm" = {
key = "compute-lcm/1.1.2";
};
"node_modules/concat-map" = {
key = "concat-map/0.0.1";
};
@ -11936,7 +12284,6 @@
key = "execa/5.1.1";
};
"node_modules/fast-deep-equal" = {
dev = true;
key = "fast-deep-equal/3.1.3";
};
"node_modules/fast-equals" = {
@ -12323,6 +12670,12 @@
"node_modules/json-parse-even-better-errors" = {
key = "json-parse-even-better-errors/2.3.1";
};
"node_modules/json-schema-compare" = {
key = "json-schema-compare/0.2.2";
};
"node_modules/json-schema-merge-allof" = {
key = "json-schema-merge-allof/0.8.1";
};
"node_modules/json-schema-ref-parser" = {
dev = true;
key = "json-schema-ref-parser/5.1.3";
@ -12364,7 +12717,6 @@
key = "jsonpath-plus/7.1.0";
};
"node_modules/jsonpointer" = {
dev = true;
key = "jsonpointer/5.0.1";
};
"node_modules/jsonschema" = {
@ -12404,6 +12756,9 @@
"node_modules/lodash" = {
key = "lodash/4.17.21";
};
"node_modules/lodash-es" = {
key = "lodash-es/4.17.21";
};
"node_modules/lodash.get" = {
dev = true;
key = "lodash.get/4.4.2";
@ -12451,6 +12806,9 @@
dev = true;
key = "magic-string/0.25.9";
};
"node_modules/markdown-to-jsx" = {
key = "markdown-to-jsx/7.3.2";
};
"node_modules/matcher" = {
dev = true;
key = "matcher/1.1.1";
@ -12742,7 +13100,6 @@
key = "proxy-from-env/1.1.0";
};
"node_modules/punycode" = {
dev = true;
key = "punycode/2.3.0";
};
"node_modules/queue-microtask" = {
@ -12822,7 +13179,6 @@
key = "require-directory/2.1.1";
};
"node_modules/require-from-string" = {
dev = true;
key = "require-from-string/2.0.2";
};
"node_modules/reserved" = {
@ -13100,7 +13456,6 @@
key = "update-browserslist-db/1.0.11";
};
"node_modules/uri-js" = {
dev = true;
key = "uri-js/4.4.1";
};
"node_modules/urijs" = {
@ -13121,6 +13476,21 @@
dev = true;
key = "validate-npm-package-name/3.0.0";
};
"node_modules/validate.io-array" = {
key = "validate.io-array/1.0.6";
};
"node_modules/validate.io-function" = {
key = "validate.io-function/1.0.2";
};
"node_modules/validate.io-integer" = {
key = "validate.io-integer/1.0.5";
};
"node_modules/validate.io-integer-array" = {
key = "validate.io-integer-array/1.0.0";
};
"node_modules/validate.io-number" = {
key = "validate.io-number/1.0.3";
};
"node_modules/validator" = {
dev = true;
key = "validator/13.11.0";
@ -15143,7 +15513,7 @@
depInfo = {
"@babel/runtime" = {
descriptor = "^7.5.5";
pin = "7.22.10";
pin = "7.22.11";
runtime = true;
};
dom-helpers = {
@ -17311,6 +17681,88 @@
version = "3.0.0";
};
};
"validate.io-array" = {
"1.0.6" = {
fetchInfo = {
narHash = "sha256-hTj+pWYWlZgbr1jdb6kfr7k2vnYZAyN8d1VwQdBITjg=";
type = "tarball";
url = "https://registry.npmjs.org/validate.io-array/-/validate.io-array-1.0.6.tgz";
};
ident = "validate.io-array";
ltype = "file";
treeInfo = { };
version = "1.0.6";
};
};
"validate.io-function" = {
"1.0.2" = {
fetchInfo = {
narHash = "sha256-MG3+IDs5WavAbTvbFkZczGZ/NfcAG3QP94E2r2bnchQ=";
type = "tarball";
url = "https://registry.npmjs.org/validate.io-function/-/validate.io-function-1.0.2.tgz";
};
ident = "validate.io-function";
ltype = "file";
treeInfo = { };
version = "1.0.2";
};
};
"validate.io-integer" = {
"1.0.5" = {
depInfo = {
"validate.io-number" = {
descriptor = "^1.0.3";
pin = "1.0.3";
runtime = true;
};
};
fetchInfo = {
narHash = "sha256-yf1eZKbJtm4w+AwPpBtwiCOgIk08joKjkqAmXDjPj3k=";
type = "tarball";
url = "https://registry.npmjs.org/validate.io-integer/-/validate.io-integer-1.0.5.tgz";
};
ident = "validate.io-integer";
ltype = "file";
version = "1.0.5";
};
};
"validate.io-integer-array" = {
"1.0.0" = {
depInfo = {
"validate.io-array" = {
descriptor = "^1.0.3";
pin = "1.0.6";
runtime = true;
};
"validate.io-integer" = {
descriptor = "^1.0.4";
pin = "1.0.5";
runtime = true;
};
};
fetchInfo = {
narHash = "sha256-2yabi9Qb/A7B2T29xrl2nxTfgV97SCQe9eOl8GE36gQ=";
type = "tarball";
url = "https://registry.npmjs.org/validate.io-integer-array/-/validate.io-integer-array-1.0.0.tgz";
};
ident = "validate.io-integer-array";
ltype = "file";
version = "1.0.0";
};
};
"validate.io-number" = {
"1.0.3" = {
fetchInfo = {
narHash = "sha256-tlQD45K0CSB8ih58xTdP8blRdYk1fzLWF3+2r8VEAXw=";
type = "tarball";
url = "https://registry.npmjs.org/validate.io-number/-/validate.io-number-1.0.3.tgz";
};
ident = "validate.io-number";
ltype = "file";
treeInfo = { };
version = "1.0.3";
};
};
validator = {
"13.11.0" = {
fetchInfo = {

View File

@ -12,6 +12,10 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.3",
"@mui/material": "^5.14.3",
"@rjsf/core": "^5.12.1",
"@rjsf/mui": "^5.12.1",
"@rjsf/validator-ajv8": "^5.12.1",
"@types/json-schema": "^7.0.12",
"autoprefixer": "10.4.14",
"axios": "^1.4.0",
"classnames": "^2.3.2",
@ -353,9 +357,9 @@
}
},
"node_modules/@babel/runtime": {
"version": "7.22.10",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
"integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
"version": "7.22.11",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.11.tgz",
"integrity": "sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==",
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
@ -955,11 +959,11 @@
}
},
"node_modules/@mui/utils": {
"version": "5.14.5",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.5.tgz",
"integrity": "sha512-6Hzw63VR9C5xYv+CbjndoRLU6Gntal8rJ5W+GUzkyHrGWIyYPWZPa6AevnyGioySNETATe1H9oXS8f/7qgIHJA==",
"version": "5.14.7",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.7.tgz",
"integrity": "sha512-RtheP/aBoPogVdi8vj8Vo2IFnRa4mZVmnD0RGlVZ49yF60rZs+xP4/KbpIrTr83xVs34QmHQ2aQ+IX7I0a0dDw==",
"dependencies": {
"@babel/runtime": "^7.22.6",
"@babel/runtime": "^7.22.10",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^18.2.1",
"prop-types": "^15.8.1",
@ -1277,6 +1281,98 @@
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rjsf/core": {
"version": "5.12.1",
"resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.12.1.tgz",
"integrity": "sha512-1YFhZ90/uHRx1akQmDdIjBxGMjs/5gtuTLUFwl6GbOwTm2fhZRh3qXRFyTXz81Oy6TGcbrxBJEYvFg2iHjYKCA==",
"dependencies": {
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"markdown-to-jsx": "^7.3.2",
"nanoid": "^3.3.6",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"@rjsf/utils": "^5.8.x",
"react": "^16.14.0 || >=17"
}
},
"node_modules/@rjsf/mui": {
"version": "5.12.1",
"resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.12.1.tgz",
"integrity": "sha512-d7cNFIdt6N24m5NPrNSqfCe2SUyUjX48Goo7z4J9vOHWxo5kdDfBEa3UwNA/DR9lo+9cYY7QTvKbgrTkxWU58A==",
"engines": {
"node": ">=14"
},
"peerDependencies": {
"@emotion/react": "^11.7.0",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.2.0",
"@mui/material": "^5.2.2",
"@rjsf/core": "^5.8.x",
"@rjsf/utils": "^5.8.x",
"react": ">=17"
}
},
"node_modules/@rjsf/utils": {
"version": "5.12.1",
"resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.12.1.tgz",
"integrity": "sha512-/k8+7WdLwhaYsOQvH5BQINipj2IJvjEW3QQv4jQQ7sXtkpdUjieZayRfaE8DHfRdm9HjgJURJFDy3EODkWPl6A==",
"peer": true,
"dependencies": {
"json-schema-merge-allof": "^0.8.1",
"jsonpointer": "^5.0.1",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"react-is": "^18.2.0"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": "^16.14.0 || >=17"
}
},
"node_modules/@rjsf/validator-ajv8": {
"version": "5.12.1",
"resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.12.1.tgz",
"integrity": "sha512-m4QO44yp60LTIfd4RPUu/h07B8U9umbD3I4Nh4iv9oyUudncaZFFXRopKcBm08v30VkN0tjMwuu0SxGDpzMtHA==",
"dependencies": {
"ajv": "^8.12.0",
"ajv-formats": "^2.1.1",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"@rjsf/utils": "^5.8.x"
}
},
"node_modules/@rjsf/validator-ajv8/node_modules/ajv": {
"version": "8.12.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
"dependencies": {
"fast-deep-equal": "^3.1.1",
"json-schema-traverse": "^1.0.0",
"require-from-string": "^2.0.2",
"uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/@rjsf/validator-ajv8/node_modules/json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
},
"node_modules/@rollup/plugin-commonjs": {
"version": "22.0.2",
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-22.0.2.tgz",
@ -1987,8 +2083,7 @@
"node_modules/@types/json-schema": {
"version": "7.0.12",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
"dev": true
"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
},
"node_modules/@types/json5": {
"version": "0.0.29",
@ -2218,7 +2313,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
"dev": true,
"dependencies": {
"ajv": "^8.0.0"
},
@ -2235,7 +2329,6 @@
"version": "8.12.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
"dev": true,
"dependencies": {
"fast-deep-equal": "^3.1.1",
"json-schema-traverse": "^1.0.0",
@ -2250,8 +2343,7 @@
"node_modules/ajv-formats/node_modules/json-schema-traverse": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
"dev": true
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
},
"node_modules/ansi-colors": {
"version": "4.1.3",
@ -2869,6 +2961,29 @@
"integrity": "sha512-FemMreK9xNyL8gQevsdRMrvO4lFCkQP7qbuktn1q8ndcNk1+0mz7lgE7b/sNvbhVgY4w6tMN1FDp6aADjqw2rw==",
"dev": true
},
"node_modules/compute-gcd": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/compute-gcd/-/compute-gcd-1.2.1.tgz",
"integrity": "sha512-TwMbxBNz0l71+8Sc4czv13h4kEqnchV9igQZBi6QUaz09dnz13juGnnaWWJTRsP3brxOoxeB4SA2WELLw1hCtg==",
"peer": true,
"dependencies": {
"validate.io-array": "^1.0.3",
"validate.io-function": "^1.0.2",
"validate.io-integer-array": "^1.0.0"
}
},
"node_modules/compute-lcm": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/compute-lcm/-/compute-lcm-1.1.2.tgz",
"integrity": "sha512-OFNPdQAXnQhDSKioX8/XYT6sdUlXwpeMjfd6ApxMJfyZ4GxmLR1xvMERctlYhlHwIiz6CSpBc2+qYKjHGZw4TQ==",
"peer": true,
"dependencies": {
"compute-gcd": "^1.2.1",
"validate.io-array": "^1.0.3",
"validate.io-function": "^1.0.2",
"validate.io-integer-array": "^1.0.0"
}
},
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -4226,8 +4341,7 @@
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"node_modules/fast-equals": {
"version": "5.0.1",
@ -5353,6 +5467,29 @@
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
},
"node_modules/json-schema-compare": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/json-schema-compare/-/json-schema-compare-0.2.2.tgz",
"integrity": "sha512-c4WYmDKyJXhs7WWvAWm3uIYnfyWFoIp+JEoX34rctVvEkMYCPGhXtvmFFXiffBbxfZsvQ0RNnV5H7GvDF5HCqQ==",
"peer": true,
"dependencies": {
"lodash": "^4.17.4"
}
},
"node_modules/json-schema-merge-allof": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/json-schema-merge-allof/-/json-schema-merge-allof-0.8.1.tgz",
"integrity": "sha512-CTUKmIlPJbsWfzRRnOXz+0MjIqvnleIXwFTzz+t9T86HnYX/Rozria6ZVGLktAU9e+NygNljveP+yxqtQp/Q4w==",
"peer": true,
"dependencies": {
"compute-lcm": "^1.1.2",
"json-schema-compare": "^0.2.2",
"lodash": "^4.17.20"
},
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/json-schema-ref-parser": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/json-schema-ref-parser/-/json-schema-ref-parser-5.1.3.tgz",
@ -5452,7 +5589,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
"integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -5551,6 +5687,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash.get": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
@ -5637,6 +5778,17 @@
"sourcemap-codec": "^1.4.8"
}
},
"node_modules/markdown-to-jsx": {
"version": "7.3.2",
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.3.2.tgz",
"integrity": "sha512-B+28F5ucp83aQm+OxNrPkS8z0tMKaeHiy0lHJs3LqCyDQFtWuenaIrkaVTgAm1pf1AU85LXltva86hlaT17i8Q==",
"engines": {
"node": ">= 10"
},
"peerDependencies": {
"react": ">= 0.14.0"
}
},
"node_modules/matcher": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/matcher/-/matcher-1.1.1.tgz",
@ -6688,7 +6840,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
"dev": true,
"engines": {
"node": ">=6"
}
@ -6962,7 +7113,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -7875,7 +8025,6 @@
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
"dev": true,
"dependencies": {
"punycode": "^2.1.0"
}
@ -7917,6 +8066,43 @@
"builtins": "^1.0.3"
}
},
"node_modules/validate.io-array": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/validate.io-array/-/validate.io-array-1.0.6.tgz",
"integrity": "sha512-DeOy7CnPEziggrOO5CZhVKJw6S3Yi7e9e65R1Nl/RTN1vTQKnzjfvks0/8kQ40FP/dsjRAOd4hxmJ7uLa6vxkg==",
"peer": true
},
"node_modules/validate.io-function": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/validate.io-function/-/validate.io-function-1.0.2.tgz",
"integrity": "sha512-LlFybRJEriSuBnUhQyG5bwglhh50EpTL2ul23MPIuR1odjO7XaMLFV8vHGwp7AZciFxtYOeiSCT5st+XSPONiQ==",
"peer": true
},
"node_modules/validate.io-integer": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/validate.io-integer/-/validate.io-integer-1.0.5.tgz",
"integrity": "sha512-22izsYSLojN/P6bppBqhgUDjCkr5RY2jd+N2a3DCAUey8ydvrZ/OkGvFPR7qfOpwR2LC5p4Ngzxz36g5Vgr/hQ==",
"peer": true,
"dependencies": {
"validate.io-number": "^1.0.3"
}
},
"node_modules/validate.io-integer-array": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/validate.io-integer-array/-/validate.io-integer-array-1.0.0.tgz",
"integrity": "sha512-mTrMk/1ytQHtCY0oNO3dztafHYyGU88KL+jRxWuzfOmQb+4qqnWmI+gykvGp8usKZOM0H7keJHEbRaFiYA0VrA==",
"peer": true,
"dependencies": {
"validate.io-array": "^1.0.3",
"validate.io-integer": "^1.0.4"
}
},
"node_modules/validate.io-number": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/validate.io-number/-/validate.io-number-1.0.3.tgz",
"integrity": "sha512-kRAyotcbNaSYoDnXvb4MHg/0a1egJdLwS6oJ38TJY7aw9n93Fl/3blIXdyYvPOp55CNxywooG/3BcrwNrBpcSg==",
"peer": true
},
"node_modules/validator": {
"version": "13.11.0",
"resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",

View File

@ -16,6 +16,10 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.3",
"@mui/material": "^5.14.3",
"@rjsf/core": "^5.12.1",
"@rjsf/mui": "^5.12.1",
"@rjsf/validator-ajv8": "^5.12.1",
"@types/json-schema": "^7.0.12",
"autoprefixer": "10.4.14",
"axios": "^1.4.0",
"classnames": "^2.3.2",

View File

@ -1,355 +1,64 @@
"use client";
import React, { ReactNode, useEffect, useMemo, useState } from "react";
import {
Box,
Button,
MenuItem,
Select,
Step,
StepLabel,
Stepper,
Typography,
} from "@mui/material";
import {
Control,
Controller,
Form,
useForm,
UseFormWatch,
} from "react-hook-form";
import { DashboardCard } from "@/components/card";
import Info from "@mui/icons-material/Info";
import { Check, Usb } from "@mui/icons-material";
import toast from "react-hot-toast";
import { buffer } from "stream/consumers";
import { useForm } from "react-hook-form";
type StepId = "select" | "create" | "install";
import { JSONSchema7 } from "json-schema";
import { useMemo, useState } from "react";
import { schema } from "./schema";
import Form from "@rjsf/mui";
import validator from "@rjsf/validator-ajv8";
import { Button } from "@mui/material";
type Step = {
id: StepId;
label: string;
children?: ReactNode;
};
const steps: Step[] = [
{
id: "select",
label: "Image",
},
{
id: "create",
label: "Customize new template",
},
{
id: "install",
label: "Install",
},
];
const serverImagesData = [
{
id: "1",
name: "Cassies Gaming PC",
},
{
id: "2",
name: "Ivern office",
},
{
id: "3",
name: "Dad's working pc",
},
{
id: "4",
name: "Sisters's pony preset",
},
];
interface StepContentProps {
id: StepId;
control: Control<FormValues>;
watch: UseFormWatch<FormValues>;
interface CreateMachineFormProps {
schema: JSONSchema7;
initialValues: any;
}
const StepContent = (props: StepContentProps) => {
const { id, control, watch } = props;
const [hasWebUsb, setHasWebUsb] = useState<boolean>(false);
useEffect(() => {
setHasWebUsb(Boolean(navigator?.usb));
}, []);
const content: Record<StepId, ReactNode> = {
select: (
<div>
<div className="">
<Typography component="div" variant="overline" className="h-full">
Select an image
</Typography>
<Controller
name="image"
control={control}
render={({ field }) => (
<Select
{...field}
defaultValue={control._defaultValues.image}
fullWidth
>
{imageOptions.map(({ id, label }) => (
<MenuItem key={id} value={id}>
{label}
</MenuItem>
))}
</Select>
)}
/>
<div className="w-full py-4">
<DashboardCard title={<Info />}>
<div className="w-full py-2">
<Typography className="pb-4">
{watch("image") === "new"
? `You selected the option to create a new system image. Configure your predefined options, such as programs, clans, etc. in
the following steps.`
: `You selected the option to reuse an existing system image. Please select one
from the list below`}
</Typography>
{watch("image") === "existing" && (
<Controller
name="source"
control={control}
render={({ field }) => (
<Select
{...field}
defaultValue={control._defaultValues.source}
fullWidth
>
{serverImagesData.map(({ id, name }) => (
<MenuItem key={id} value={id}>
{name}
</MenuItem>
))}
</Select>
)}
/>
)}
</div>
</DashboardCard>
</div>
</div>
</div>
),
create: (
<div className="flex w-full flex-col">
<div className="my-3 w-full p-4">
Formular generated from nix flake jsonschema
</div>
</div>
),
install: (
<div className="flex w-full justify-center">
<Button
color="secondary"
type="submit"
startIcon={<Usb />}
variant="contained"
>
{hasWebUsb ? "Flash USB Device" : "Download installer image"}
</Button>
</div>
),
};
return (
<div className="mt-4 flex p-4">
<div className="flex w-full flex-col">
<Typography
component="div"
variant="overline"
className="flex w-full justify-center"
>
{watch("image") == "new"
? "Create system template"
: "Choose existing"}
</Typography>
<div className="my-3 w-full p-4">{content[id]}</div>
</div>
</div>
);
};
type FormValues = {
image: ImageOption;
source: string;
};
type ImageOption = "new" | "existing";
type ImageOptions = {
id: ImageOption;
label: string;
}[];
const imageOptions: ImageOptions = [
{
id: "new",
label: "New image",
const defaultValues = Object.entries(schema.properties || {}).reduce(
(acc, [key, value]) => {
/*@ts-ignore*/
const init: any = value?.default;
if (init) {
return {
...acc,
[key]: init,
};
}
return acc;
},
{
id: "existing",
label: "Previously created image",
},
];
{},
);
const defaultValues: FormValues = {
image: "new",
source: serverImagesData[0].id,
};
function CreateMachineForm(props: CreateMachineFormProps) {
const { schema, initialValues } = props;
export default function AddNode() {
const { handleSubmit, control, watch, reset, formState } =
useForm<FormValues>({
defaultValues,
});
const [activeStep, setActiveStep] = useState<number>(0);
const [usb, setUsb] = useState<USB | undefined>(undefined);
useEffect(() => {
setUsb(navigator?.usb);
}, []);
const handleNext = () => {
if (activeStep < visibleSteps.length - 1) {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
}
};
const handleBack = () => {
if (activeStep > 0) {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
}
};
const handleReset = () => {
setActiveStep(0);
reset();
};
async function onSubmit(data: any) {
console.log({ data }, "To be submitted");
if (usb) {
let device;
try {
device = await usb.requestDevice({
filters: [{}],
});
toast.success(`Connected to '${device.productName}'`);
} catch (error) {
console.log({ error });
toast.error("Couldn't connect to usb device");
}
if (device) {
// await device.open();
// await device.selectConfiguration(1);
// await device.claimInterface(0);
// const data = new Uint8Array([1, 2, 3]);
// device.transferOut(2, data);
}
} else {
//Offer the image as download
const blob = new Blob(["data"]);
let url = window.URL.createObjectURL(blob);
let a = document.createElement("a");
a.href = url;
a.download = "image.iso";
a.click();
}
return true;
}
const imageValue = watch("image");
const visibleSteps = useMemo(
() =>
steps.filter((s) => {
if (imageValue == "existing" && s.id == "create") {
return false;
}
return true;
}),
[imageValue],
);
// console.log({})
const currentStep = visibleSteps.at(activeStep);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Box sx={{ width: "100%" }}>
<Stepper activeStep={activeStep} color="secondary">
{visibleSteps.map(({ label }, index) => {
const stepProps: { completed?: boolean } = {};
const labelProps: {
optional?: React.ReactNode;
} = {};
return (
<Step
sx={{
".MuiStepIcon-root.Mui-active": {
color: "secondary.main",
},
".MuiStepIcon-root.Mui-completed": {
color: "secondary.main",
},
}}
key={label}
{...stepProps}
>
<StepLabel {...labelProps}>{label}</StepLabel>
</Step>
);
})}
</Stepper>
{activeStep === visibleSteps.length ? (
<>
<Typography variant="h5" sx={{ mt: 2, mb: 1 }}>
Image succesfully downloaded
</Typography>
<Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
<Box sx={{ flex: "1 1 auto" }} />
<Button color="secondary" onClick={handleReset}>
Reset
</Button>
</Box>
</>
) : (
<>
{currentStep && (
<StepContent
id={currentStep.id}
control={control}
watch={watch}
/>
)}
<Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
<Button
color="secondary"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
Back
</Button>
<Box sx={{ flex: "1 1 auto" }} />
{activeStep !== visibleSteps.length - 1 && (
<Button onClick={handleNext} color="secondary">
{activeStep <= visibleSteps.length - 1 && "Next"}
</Button>
)}
{activeStep === visibleSteps.length - 1 && (
<Button color="secondary" onClick={handleReset}>
Reset
</Button>
)}
</Box>
</>
)}
</Box>
</form>
<Form
acceptcharset="utf-8"
// @ts-ignore
extraErrors={{
__errors: ["Global error; Server said no"],
// @ts-ignore
name: {
__errors: ["Name is already in use"],
},
}}
schema={schema}
validator={validator}
liveValidate={true}
templates={{
ButtonTemplates: {
SubmitButton: (props) => (
<Button type="submit" variant="contained" color="secondary">
Create Machine
</Button>
),
},
}}
/>
);
}
export default function CreateMachine() {
return <CreateMachineForm schema={schema} initialValues={defaultValues} />;
}

View File

@ -0,0 +1,111 @@
import { RJSFSchema } from "@rjsf/utils";
export const schema: RJSFSchema = {
type: "object",
properties: {
name: {
type: "string",
default: "John-nixi",
description: "The name of the machine",
},
age: {
type: "integer",
default: 42,
description: "The age of the user",
maximum: 40,
},
role: {
enum: ["New York", "Amsterdam", "Hong Kong"],
description: "Role of the user",
},
kernelModules: {
type: "array",
items: {
type: "string",
},
default: ["nvme", "xhci_pci", "ahci"],
description: "A list of enabled kernel modules",
},
userIds: {
type: "array",
items: {
type: "object",
properties: {
user: {
type: "string",
},
id: {
type: "integer",
},
},
},
default: [
{
user: "John",
id: 12,
},
],
description: "Some attributes",
},
xdg: {
type: "object",
properties: {
portal: {
type: "object",
properties: {
xdgOpenUsePortal: {
type: "boolean",
default: false,
},
enable: {
type: "boolean",
default: false,
},
lxqt: {
type: "object",
properties: {
enable: {
type: "boolean",
default: false,
},
styles: {
type: "array",
items: {
type: "string",
},
},
},
},
extraPortals: {
type: "array",
items: {
type: "string",
},
},
wlr: {
type: "object",
properties: {
enable: {
type: "boolean",
default: false,
},
settings: {
type: "object",
default: {
screencast: {
output_name: "HDMI-A-1",
max_fps: 30,
exec_before: "disable_notifications.sh",
exec_after: "enable_notifications.sh",
chooser_type: "simple",
chooser_cmd: "${pkgs.slurp}/bin/slurp -f %o -or",
},
},
},
},
},
},
},
},
},
},
};