diff --git a/pkgs/ui/nix/pdefs.nix b/pkgs/ui/nix/pdefs.nix index 09ce05601..5224db1ff 100644 --- a/pkgs/ui/nix/pdefs.nix +++ b/pkgs/ui/nix/pdefs.nix @@ -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 = { diff --git a/pkgs/ui/package-lock.json b/pkgs/ui/package-lock.json index 7e1de42c3..5462475ba 100644 --- a/pkgs/ui/package-lock.json +++ b/pkgs/ui/package-lock.json @@ -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", diff --git a/pkgs/ui/package.json b/pkgs/ui/package.json index fdd813308..6ae1b83ee 100644 --- a/pkgs/ui/package.json +++ b/pkgs/ui/package.json @@ -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", diff --git a/pkgs/ui/src/app/machines/add/page.tsx b/pkgs/ui/src/app/machines/add/page.tsx index 5f580c236..3581d0006 100644 --- a/pkgs/ui/src/app/machines/add/page.tsx +++ b/pkgs/ui/src/app/machines/add/page.tsx @@ -1,355 +1,7 @@ "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 { CreateMachineForm } from "@/components/createMachineForm"; -type StepId = "select" | "create" | "install"; - -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; - watch: UseFormWatch; -} -const StepContent = (props: StepContentProps) => { - const { id, control, watch } = props; - - const [hasWebUsb, setHasWebUsb] = useState(false); - useEffect(() => { - setHasWebUsb(Boolean(navigator?.usb)); - }, []); - - const content: Record = { - select: ( -
-
- - Select an image - - ( - - )} - /> -
- }> -
- - {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`} - - {watch("image") === "existing" && ( - ( - - )} - /> - )} -
- -
-
-
- ), - create: ( -
-
- Formular generated from nix flake jsonschema -
-
- ), - install: ( -
- -
- ), - }; - return ( -
-
- - {watch("image") == "new" - ? "Create system template" - : "Choose existing"} - -
{content[id]}
-
-
- ); -}; - -type FormValues = { - image: ImageOption; - source: string; -}; -type ImageOption = "new" | "existing"; - -type ImageOptions = { - id: ImageOption; - label: string; -}[]; -const imageOptions: ImageOptions = [ - { - id: "new", - label: "New image", - }, - { - id: "existing", - label: "Previously created image", - }, -]; - -const defaultValues: FormValues = { - image: "new", - source: serverImagesData[0].id, -}; - -export default function AddNode() { - const { handleSubmit, control, watch, reset, formState } = - useForm({ - defaultValues, - }); - - const [activeStep, setActiveStep] = useState(0); - const [usb, setUsb] = useState(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 ( -
- - - {visibleSteps.map(({ label }, index) => { - const stepProps: { completed?: boolean } = {}; - const labelProps: { - optional?: React.ReactNode; - } = {}; - return ( - - {label} - - ); - })} - - {activeStep === visibleSteps.length ? ( - <> - - Image succesfully downloaded - - - - - - - ) : ( - <> - {currentStep && ( - - )} - - - - - {activeStep !== visibleSteps.length - 1 && ( - - )} - {activeStep === visibleSteps.length - 1 && ( - - )} - - - )} - - - ); +export default function CreateMachine() { + return ; } diff --git a/pkgs/ui/src/components/createMachineForm/customConfig.tsx b/pkgs/ui/src/components/createMachineForm/customConfig.tsx new file mode 100644 index 000000000..fd005fbf3 --- /dev/null +++ b/pkgs/ui/src/components/createMachineForm/customConfig.tsx @@ -0,0 +1,164 @@ +"use client"; +import { useGetMachineSchema } from "@/api/default/default"; +import { Check, Error } from "@mui/icons-material"; +import { + Box, + Button, + LinearProgress, + List, + ListItem, + ListItemIcon, + ListItemText, + Paper, + Typography, +} from "@mui/material"; +import { IChangeEvent, FormProps } from "@rjsf/core"; +import { Form } from "@rjsf/mui"; +import validator from "@rjsf/validator-ajv8"; +import toast from "react-hot-toast"; +import { JSONSchema7 } from "json-schema"; +import { useMemo, useRef } from "react"; +import { FormStepContentProps } from "./interfaces"; +import { + ErrorListProps, + FormContextType, + RJSFSchema, + StrictRJSFSchema, + TranslatableString, +} from "@rjsf/utils"; + +interface PureCustomConfigProps extends FormStepContentProps { + schema: JSONSchema7; + initialValues: any; +} +export function CustomConfig(props: FormStepContentProps) { + const { formHooks } = props; + const { data, isLoading, error } = useGetMachineSchema("mama"); + const schema = useMemo(() => { + if (!isLoading && !error?.message && data?.data) { + return data?.data.schema; + } + return {}; + }, [data, isLoading, error]); + + const initialValues = useMemo( + () => + Object.entries(schema?.properties || {}).reduce((acc, [key, value]) => { + /*@ts-ignore*/ + const init: any = value?.default; + if (init) { + return { + ...acc, + [key]: init, + }; + } + return acc; + }, {}), + [schema], + ); + + return isLoading ? ( + + ) : error?.message ? ( +
{error?.message}
+ ) : ( + + ); +} + +function ErrorList< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any, +>({ errors, registry }: ErrorListProps) { + const { translateString } = registry; + return ( + + + + {translateString(TranslatableString.ErrorsLabel)} + + + {errors.map((error, i: number) => { + return ( + + + + + + + ); + })} + + + + ); +} + +function PureCustomConfig(props: PureCustomConfigProps) { + const { schema, initialValues, formHooks } = props; + const { setValue, watch } = formHooks; + + console.log({ schema }); + + const configData = watch("config") as IChangeEvent; + + console.log({ configData }); + + const setConfig = (data: IChangeEvent) => { + console.log({ data }); + setValue("config", data); + }; + + const formRef = useRef(); + + const validate = () => { + const isValid: boolean = formRef?.current?.validateForm(); + console.log({ isValid }, formRef.current); + if (!isValid) { + formHooks.setError("config", { + message: "invalid config", + }); + toast.error( + "Configuration is invalid. Please check the highlighted fields for details.", + ); + } else { + formHooks.clearErrors("config"); + toast.success("Config seems valid"); + } + }; + + return ( +
( +
+ +
+ ), + }, + }} + /> + ); +} diff --git a/pkgs/ui/src/components/createMachineForm/index.tsx b/pkgs/ui/src/components/createMachineForm/index.tsx new file mode 100644 index 000000000..3c5186a63 --- /dev/null +++ b/pkgs/ui/src/components/createMachineForm/index.tsx @@ -0,0 +1,160 @@ +import { + Box, + Button, + MobileStepper, + Step, + StepLabel, + Stepper, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; +import React, { ReactNode, useState } from "react"; +import { useForm, UseFormReturn } from "react-hook-form"; +import { CustomConfig } from "./customConfig"; +import { CreateMachineForm, FormStep } from "./interfaces"; + +const SC = (props: { children: ReactNode }) => { + return <>{props.children}; +}; + +export function CreateMachineForm() { + const formHooks = useForm({ + defaultValues: { + name: "", + config: {}, + }, + }); + const { handleSubmit, control, watch, reset, formState } = formHooks; + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("sm")); + const [activeStep, setActiveStep] = useState(0); + + const steps: FormStep[] = [ + { + id: "template", + label: "Template", + content:
, + }, + { + id: "modules", + label: "Modules", + content:
, + }, + { + id: "config", + label: "Customize", + content: , + }, + { + id: "save", + label: "Save", + content:
, + }, + ]; + + const handleNext = () => { + if (activeStep < steps.length - 1) { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + } + }; + + const handleBack = () => { + if (activeStep > 0) { + setActiveStep((prevActiveStep) => prevActiveStep - 1); + } + }; + + const handleReset = () => { + setActiveStep(0); + reset(); + }; + const currentStep = steps.at(activeStep); + + async function onSubmit(data: any) { + console.log({ data }, "Aggregated Data; creating machine from"); + } + + const BackButton = () => ( + + ); + + const NextButton = () => ( + <> + {activeStep !== steps.length - 1 && ( + + )} + {activeStep === steps.length - 1 && ( + + )} + + ); + return ( + + + {isMobile && ( + } + nextButton={} + steps={steps.length} + /> + )} + {!isMobile && ( + + {steps.map(({ label }, index) => { + const stepProps: { completed?: boolean } = {}; + const labelProps: { + optional?: React.ReactNode; + } = {}; + return ( + + {label} + + ); + })} + + )} + {/* */} + {/* The step Content */} + {currentStep && currentStep.content} + + {/* Desktop step controls */} + {!isMobile && ( + + + + + + )} + + + ); +} diff --git a/pkgs/ui/src/components/createMachineForm/interfaces.ts b/pkgs/ui/src/components/createMachineForm/interfaces.ts new file mode 100644 index 000000000..e83c9a9e5 --- /dev/null +++ b/pkgs/ui/src/components/createMachineForm/interfaces.ts @@ -0,0 +1,23 @@ +import { ReactElement, ReactNode } from "react"; +import { UseFormReturn } from "react-hook-form"; + +export type StepId = "template" | "modules" | "config" | "save"; + +export type CreateMachineForm = { + name: string; + config: any; +}; + +export type FormHooks = UseFormReturn; + +export type FormStep = { + id: StepId; + label: string; + content: FormStepContent; +}; + +export interface FormStepContentProps { + formHooks: FormHooks; +} + +export type FormStepContent = ReactElement; diff --git a/pkgs/ui/src/components/createMachineForm/saveConfig.tsx b/pkgs/ui/src/components/createMachineForm/saveConfig.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/pkgs/ui/src/components/createMachineForm/selectModules.tsx b/pkgs/ui/src/components/createMachineForm/selectModules.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/pkgs/ui/src/components/createMachineForm/selectTemplate.tsx b/pkgs/ui/src/components/createMachineForm/selectTemplate.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/pkgs/ui/src/data/_schema.ts b/pkgs/ui/src/data/_schema.ts new file mode 100644 index 000000000..7a3b8938d --- /dev/null +++ b/pkgs/ui/src/data/_schema.ts @@ -0,0 +1,88 @@ +import { RJSFSchema } from "@rjsf/utils"; +export const schema: RJSFSchema = { + properties: { + bloatware: { + properties: { + age: { + default: 42, + description: "The age of the user", + type: "integer", + }, + isAdmin: { + default: false, + description: "Is the user an admin?", + type: "boolean", + }, + kernelModules: { + default: ["nvme", "xhci_pci", "ahci"], + description: "A list of enabled kernel modules", + items: { + type: "string", + }, + type: "array", + }, + name: { + default: "John Doe", + description: "The name of the user", + type: "string", + }, + services: { + properties: { + opt: { + default: "foo", + description: "A submodule option", + type: "string", + }, + }, + type: "object", + }, + userIds: { + additionalProperties: { + type: "integer", + }, + default: { + albrecht: 3, + horst: 1, + peter: 2, + }, + description: "Some attributes", + type: "object", + }, + }, + type: "object", + }, + networking: { + properties: { + zerotier: { + properties: { + controller: { + properties: { + enable: { + default: false, + description: + "Whether to enable turn this machine into the networkcontroller.", + type: "boolean", + }, + public: { + default: false, + description: + "everyone can join a public network without having the administrator to accept\n", + type: "boolean", + }, + }, + type: "object", + }, + networkId: { + description: "zerotier networking id\n", + type: "string", + }, + }, + required: ["networkId"], + type: "object", + }, + }, + type: "object", + }, + }, + type: "object", +}; diff --git a/pkgs/ui/src/data/_schema2.ts b/pkgs/ui/src/data/_schema2.ts new file mode 100644 index 000000000..5c311daba --- /dev/null +++ b/pkgs/ui/src/data/_schema2.ts @@ -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", + }, + }, + }, + }, + }, + }, + }, + }, + }, + }, +};