major refactor
- move common components to own folder - add tsconfig for common reference and build - update configuration files for global JSX support - modify checkbox creation with specific required option
This commit is contained in:
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,16 +0,0 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
Generated
+8
-262
@@ -1,16 +1,13 @@
|
||||
{
|
||||
"name": "scelta-carriera",
|
||||
"version": "0.0.0",
|
||||
"name": "@elixforms/scelta-carriera",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "scelta-carriera",
|
||||
"version": "0.0.0",
|
||||
"name": "@elixforms/scelta-carriera",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@fluentui/react": "^8.125.5",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"vite-plugin-css-injected-by-js": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -432,219 +429,6 @@
|
||||
"node": "^20.19.0 || ^22.13.0 || >=24"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/date-time-utilities": {
|
||||
"version": "8.6.11",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.6.11.tgz",
|
||||
"integrity": "sha512-zq49tveFzmzwgaJ73rVvxu9+rqhPBIAJSbevciIQnmvv6dlh2GzZcL14Zevk9QV+q6CWaF6yzvhT11E2TpAv8Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/dom-utilities": {
|
||||
"version": "2.3.10",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.3.10.tgz",
|
||||
"integrity": "sha512-6WDImiLqTOpkEtfUKSStcTDpzmJfL6ZammomcjawN9xH/8u8G3Hx72CIt2MNck9giw/oUlNLJFdWRAjeP3rmPQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/font-icons-mdl2": {
|
||||
"version": "8.5.72",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.5.72.tgz",
|
||||
"integrity": "sha512-RsdXbnu77uahoFu8GQMyLLeO5FyT+5AvtXhYjm662rs1NaEo89FcbJUjG9UZ2OkWPCNoGmhiFoOVPJwx0TQ6+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"@fluentui/style-utilities": "^8.15.0",
|
||||
"@fluentui/utilities": "^8.17.2",
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/foundation-legacy": {
|
||||
"version": "8.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.6.5.tgz",
|
||||
"integrity": "sha512-ZI8idXy9LMbMS8ixmoUCBfzWUhZyhNp1L2IpX7Nr2MDrAqBbmZcmltCEUMFGpjevI0CDT0H2fRXpWlGbh31+4A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/merge-styles": "^8.6.14",
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"@fluentui/style-utilities": "^8.15.0",
|
||||
"@fluentui/utilities": "^8.17.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.8.0 <20.0.0",
|
||||
"react": ">=16.8.0 <20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/keyboard-key": {
|
||||
"version": "0.4.23",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.4.23.tgz",
|
||||
"integrity": "sha512-9GXeyUqNJUdg5JiQUZeGPiKnRzMRi9YEUn1l9zq6X/imYdMhxHrxpVZS12129cBfgvPyxt9ceJpywSfmLWqlKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/merge-styles": {
|
||||
"version": "8.6.14",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.6.14.tgz",
|
||||
"integrity": "sha512-vghuHFAfQgS9WLIIs4kgDOCh/DHd5vGIddP4/bzposhlAVLZR6wUBqldm9AuCdY88r5LyCRMavVJLV+Up3xdvA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/react": {
|
||||
"version": "8.125.5",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.125.5.tgz",
|
||||
"integrity": "sha512-7+tFsQuTlxlg16wSJpngbX+2I1ISa7AL6ip/a8GkLkKR6gcGlkIvK03ixE63fJTCeMHFTJNExcKbdWydAC5WDQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/date-time-utilities": "^8.6.11",
|
||||
"@fluentui/font-icons-mdl2": "^8.5.72",
|
||||
"@fluentui/foundation-legacy": "^8.6.5",
|
||||
"@fluentui/merge-styles": "^8.6.14",
|
||||
"@fluentui/react-focus": "^8.10.5",
|
||||
"@fluentui/react-hooks": "^8.10.2",
|
||||
"@fluentui/react-portal-compat-context": "^9.0.15",
|
||||
"@fluentui/react-window-provider": "^2.3.2",
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"@fluentui/style-utilities": "^8.15.0",
|
||||
"@fluentui/theme": "^2.7.2",
|
||||
"@fluentui/utilities": "^8.17.2",
|
||||
"@microsoft/load-themed-styles": "^1.10.26",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.8.0 <20.0.0",
|
||||
"@types/react-dom": ">=16.8.0 <20.0.0",
|
||||
"react": ">=16.8.0 <20.0.0",
|
||||
"react-dom": ">=16.8.0 <20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/react-focus": {
|
||||
"version": "8.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.10.5.tgz",
|
||||
"integrity": "sha512-Jix/4i7ABjgj4a7Ac4JTAWxJkgytpwYTuSM7rtQEfRa4kSRy9E1Ak7NibFexm1kkUkBkFTnp9x1dE27rv+ECJQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/keyboard-key": "^0.4.23",
|
||||
"@fluentui/merge-styles": "^8.6.14",
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"@fluentui/style-utilities": "^8.15.0",
|
||||
"@fluentui/utilities": "^8.17.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.8.0 <20.0.0",
|
||||
"react": ">=16.8.0 <20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/react-hooks": {
|
||||
"version": "8.10.2",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.10.2.tgz",
|
||||
"integrity": "sha512-HAd5cX50yKW/LljWlwt+FpSpdS/pNJutk9kMb7FyzxfoGBulL7sj6vX2HvxhSKyJMRKuTstXTdfJmsh22+3W3w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/react-window-provider": "^2.3.2",
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"@fluentui/utilities": "^8.17.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.8.0 <20.0.0",
|
||||
"react": ">=16.8.0 <20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/react-portal-compat-context": {
|
||||
"version": "9.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat-context/-/react-portal-compat-context-9.0.15.tgz",
|
||||
"integrity": "sha512-DpV+qtFvM3dmH1j8ZD+YcM5vaTvmQPHUAx6tQnnmIoYJWs2R0wU/L5p2EajXy7zSg74jrDbDRxzaziamoOaJdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@swc/helpers": "^0.5.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.14.0 <20.0.0",
|
||||
"react": ">=16.14.0 <20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/react-window-provider": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.3.2.tgz",
|
||||
"integrity": "sha512-T15zFPIWr9De8hNkapne7YyvcxclyTK2bMXXHZwbWLkVeH/lGHRG0CIy/calNGKa86wuzMJhq8iqFW2W6+EwVQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.8.0 <20.0.0",
|
||||
"react": ">=16.8.0 <20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/set-version": {
|
||||
"version": "8.2.24",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.24.tgz",
|
||||
"integrity": "sha512-8uNi2ThvNgF+6d3q2luFVVdk/wZV0AbRfJ85kkvf2+oSRY+f6QVK0w13vMorNhA5puumKcZniZoAfUF02w7NSg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/style-utilities": {
|
||||
"version": "8.15.0",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.15.0.tgz",
|
||||
"integrity": "sha512-g+hmc2z5iHMI1j4DqihYSws9ERzuT44mjfNGE1ywYqCB8MAzNzAPpyiosWOtI4cWZUQfnqzokpdSKkYF3quM8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/merge-styles": "^8.6.14",
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"@fluentui/theme": "^2.7.2",
|
||||
"@fluentui/utilities": "^8.17.2",
|
||||
"@microsoft/load-themed-styles": "^1.10.26",
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/theme": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.7.2.tgz",
|
||||
"integrity": "sha512-UXGNfGa/1bLmYrOpmHXdvyc7CzlNSKUQAADweTncbNoMF1DvscWEjPj5kxFgCmOU8wVtvvn4GraNNUSWtNxeeA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/merge-styles": "^8.6.14",
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"@fluentui/utilities": "^8.17.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.8.0 <20.0.0",
|
||||
"react": ">=16.8.0 <20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fluentui/utilities": {
|
||||
"version": "8.17.2",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.17.2.tgz",
|
||||
"integrity": "sha512-TmeWVtGN+Lk0mch7tuRcbkeMdrBwltI68fvQbPwcNLo4igFtTInMmjEnVJGa7pBQN5lQAmHYqB9IJI6RZU/t6w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/dom-utilities": "^2.3.10",
|
||||
"@fluentui/merge-styles": "^8.6.14",
|
||||
"@fluentui/react-window-provider": "^2.3.2",
|
||||
"@fluentui/set-version": "^8.2.24",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.8.0 <20.0.0",
|
||||
"react": ">=16.8.0 <20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanfs/core": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
|
||||
@@ -761,12 +545,6 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@microsoft/load-themed-styles": {
|
||||
"version": "1.10.295",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.10.295.tgz",
|
||||
"integrity": "sha512-W+IzEBw8a6LOOfRJM02dTT7BDZijxm+Z7lhtOAz1+y9vQm1Kdz9jlAO+qCEKsfxtUOmKilW8DIRqFw2aUgKeGg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@napi-rs/wasm-runtime": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
|
||||
@@ -1339,15 +1117,6 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.21.tgz",
|
||||
"integrity": "sha512-jI/VAmtdjB/RnI8GTnokyX7Ug8c+g+ffD6QRLa6XQewtnGyukKkKSk3wLTM3b5cjt1jNh9x0jfVlagdN2gDKQg==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"tslib": "^2.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tybys/wasm-util": {
|
||||
"version": "0.10.1",
|
||||
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
|
||||
@@ -1383,6 +1152,7 @@
|
||||
"version": "19.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
|
||||
"integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
@@ -1392,6 +1162,7 @@
|
||||
"version": "19.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
||||
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0"
|
||||
@@ -1603,6 +1374,7 @@
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
@@ -2625,27 +2397,6 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.2.5",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
|
||||
"integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.2.5",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
|
||||
"integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.2.5"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
|
||||
@@ -3060,12 +2811,6 @@
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.27.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
||||
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
|
||||
@@ -3167,6 +2912,7 @@
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"devOptional": true,
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "scelta-carriera",
|
||||
"name": "@elixforms/scelta-carriera",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
@@ -10,9 +10,6 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fluentui/react": "^8.125.5",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"vite-plugin-css-injected-by-js": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
+52
-21
@@ -1,20 +1,20 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
// import reactLogo from './assets/react.svg'
|
||||
// import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import './App.css'
|
||||
import * as ElixForms from './components/ElixFormsComponent';
|
||||
import * as ElixForms from '@common/src/ElixFormsComponent';
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
/** @type {import('./components/ElixFormsComponent').ElixFormsComponent} */
|
||||
var myElixFormsReact = new ElixForms.ElixFormsReact();
|
||||
|
||||
myElixFormsReact.props = {
|
||||
/** @type {import('@common/src/ElixFormsComponent').ElixFormsReact} */
|
||||
var myElixFormsReact = new ElixForms.ElixFormsReact({
|
||||
description: "This is a custom form created with ElixFormsReact component.",
|
||||
isDarkTheme: false,
|
||||
environmentMessage: "TESTING!",
|
||||
hasTeamsContext: false,
|
||||
userDisplayName: "John Doe",
|
||||
/*
|
||||
additionalFieldsJson: JSON.stringify([
|
||||
{
|
||||
@@ -85,20 +85,51 @@ function App() {
|
||||
]),
|
||||
*/
|
||||
customFormFieldsConfiguration: (
|
||||
/** @type {import('./components/IElixFormsComponentCustomFormFieldFactory').IElixFormsComponentCustomFormFieldFactory} */
|
||||
formFieldFactory
|
||||
) => (
|
||||
<>
|
||||
{formFieldFactory.createTextInput("name", "Name", true)}
|
||||
{formFieldFactory.createTextAreaInput("description", "Description")}
|
||||
{formFieldFactory.createNumberInput("number", "Number")}
|
||||
{formFieldFactory.createBooleanInput("boolean", "Boolean")}
|
||||
{formFieldFactory.createRadioInput("radio", "Radio", [{ "value": 1, "label": "Opzione 1" }, { "value": 2, "label": "Opzione 2" }, { "value": 3, "label": "Altra opzione" }])}
|
||||
{formFieldFactory.createDropdownInput("dropdown", "Dropdown", [{ "value": 0, "label": "Not applicable" }, { "value": 1, "label": "Goal 1: No poverty" }, { "value": 2, "label": "Goal 2: Zero hunger" }, { "value": 3, "label": "Goal 3: Good health and well-being" }])}
|
||||
{formFieldFactory.createCheckboxInput("checkbox", "Checkbox", [{ "value": 0, "label": "Check 1" }, { "value": 1, "label": "Check 2" }, { "value": 2, "label": "Check 3" }])}
|
||||
</>
|
||||
)
|
||||
};
|
||||
/** @type {import('../../common/src/IElixFormsComponentCustomFormFieldFactory').IElixFormsComponentCustomFormFieldFactory} */
|
||||
formFieldFactory) => (
|
||||
<>
|
||||
{/* {formFieldFactory.createTextInput("required", "Campo Required", true)}
|
||||
{formFieldFactory.createNumberInput("number", "Number")}
|
||||
{formFieldFactory.createBooleanInput("boolean", "Boolean")}
|
||||
{formFieldFactory.createRadioInput("radio", "Radio", [{ "value": 1, "label": "Opzione 1" }, { "value": 2, "label": "Opzione 2" }, { "value": 3, "label": "Altra opzione" }])}
|
||||
{formFieldFactory.createDropdownInput("dropdown", "Dropdown", [{ "value": 0, "label": "Not applicable" }, { "value": 1, "label": "Goal 1: No poverty" }, { "value": 2, "label": "Goal 2: Zero hunger" }, { "value": 3, "label": "Goal 3: Good health and well-being" }])}
|
||||
{formFieldFactory.createCheckboxInput("checkbox", "Checkbox", [{ "value": 0, "label": "Check 1" }, { "value": 1, "label": "Check 2" }, { "value": 2, "label": "Check 3" }])} */}
|
||||
{formFieldFactory.createDropdownInput("COL0015", "COL0015 Goals", [
|
||||
{ "value": 0, "label": "Not applicable" },
|
||||
{ "value": 1, "label": "Goal 1: No poverty" },
|
||||
{ "value": 2, "label": "Goal 2: Zero hunger" },
|
||||
{ "value": 3, "label": "Goal 3: Good health and well-being" },
|
||||
{ "value": 4, "label": "Goal 4: Quality education" },
|
||||
{ "value": 5, "label": "Goal 5: Gender equality" },
|
||||
{ "value": 6, "label": "Goal 6: Clean water and sanitation" },
|
||||
{ "value": 7, "label": "Goal 7: Affordable and clean energy" },
|
||||
{ "value": 8, "label": "Goal 8: Decent work and economic growth" },
|
||||
{ "value": 9, "label": "Goal 9: Industry, Innovation, and Infrastructure" },
|
||||
{ "value": 10, "label": "Goal 10: Reduced inequalities" },
|
||||
{ "value": 11, "label": "Goal 11: Sustainable cities and communities" },
|
||||
{ "value": 12, "label": "Goal 12: Responsible consumption and production" },
|
||||
{ "value": 13, "label": "Goal 13: Climate action" },
|
||||
{ "value": 14, "label": "Goal 14: Life below water" },
|
||||
{ "value": 15, "label": "Goal 15: Life on land" },
|
||||
{ "value": 16, "label": "Goal 16: Peace, justice and strong institutions" },
|
||||
{ "value": 17, "label": "Goal 17: Partnerships for the goals" }
|
||||
], true)}
|
||||
{formFieldFactory.createTextInput("COL0002", "Campo STRING", true)}
|
||||
{formFieldFactory.createTextAreaInput("COL0003", "Campo TEXTAREA", true)}
|
||||
{formFieldFactory.createBooleanInput("COL0004", "Campo BOOLEAN", true)}
|
||||
{formFieldFactory.createRadioInput("COL0005", "Campo RADIO", [
|
||||
{ "value": 1, "label": "Opzione 1" },
|
||||
{ "value": 2, "label": "Opzione 2" },
|
||||
{ "value": 3, "label": "Altra opzione" }
|
||||
], true)}
|
||||
{formFieldFactory.createCheckboxInput("COL0006", "Campo CHECKBOX", [
|
||||
{ "value": 4, "label": "Check 1" },
|
||||
{ "value": 5, "label": "Check 2" },
|
||||
{ "value": 6, "label": "Altro check" }
|
||||
])}
|
||||
</>
|
||||
)
|
||||
});
|
||||
|
||||
var elixFormsReactRender = myElixFormsReact.render();
|
||||
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.elixFormsComponent {
|
||||
overflow: hidden;
|
||||
padding: 1em;
|
||||
color: "[theme:bodyText, default: #323130]";
|
||||
color: var(--bodyText);
|
||||
&.teams {
|
||||
font-family: $ms-font-family-fallbacks;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcomeImage {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.links {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: "[theme:link, default:#03787c]";
|
||||
color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: "[theme:linkHovered, default: #014446]";
|
||||
color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import ElixFormsComponentAbstract from './ElixFormsComponentAbstract';
|
||||
|
||||
export default class ElixFormsComponent extends ElixFormsComponentAbstract {
|
||||
// public override createCustomFormFields(): React.ReactElement {
|
||||
// // const textTest = this.CreateTextInput("COL0018", "TEXT INPUT");
|
||||
// // const checkTest = this.CreateCheckboxInput("COL0090", "CHECKBOX INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
|
||||
// // const radioTest = this.CreateRadioInput("COL0091", "RADIO INPUT", new Map<number, string>([ [1, "Option 1"], [2, "Option 2"], [3, "Option 3"] ]));
|
||||
// // const boolTest = this.CreateBooleanInput("COL0092", "BOOLEAN INPUT");
|
||||
// // const textareaTest = this.CreateTextAreaInput("COL0093", "TEXTAREA INPUT");
|
||||
|
||||
// return (<></>);
|
||||
// }
|
||||
}
|
||||
|
||||
export { ElixFormsComponent as ElixFormsReact };
|
||||
@@ -1,301 +0,0 @@
|
||||
import * as FluentUI from '@fluentui/react';
|
||||
import { IElixFormsComponentFormState } from './IElixFormsComponentFormState';
|
||||
import { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
|
||||
import { ElixFormsElement } from './ElixFormsElement';
|
||||
import { QueryParamHelper } from './QueryParamHelper';
|
||||
import { Component, FormEvent, JSX } from 'react';
|
||||
import React from 'react';
|
||||
import { IElixFormsComponentCustomFormFieldFactory } from './IElixFormsComponentCustomFormFieldFactory';
|
||||
import { ElixFormsCheckboxOption, ElixFormsDropdownOption, ElixFormsRadioOption } from './ElixFormsTypes';
|
||||
|
||||
export default abstract class ElixFormsComponentAbstract extends Component<IElixFormsComponentProperties, IElixFormsComponentFormState> {
|
||||
constructor(props: IElixFormsComponentProperties) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
formData: {}
|
||||
};
|
||||
}
|
||||
|
||||
private checkboxValues = new Map<string, number[]>();
|
||||
|
||||
private mandatoryFormFieldNames: string[] = [
|
||||
"RWE2_MODULE_ID",
|
||||
"RWE2_REQUEST_ID",
|
||||
"custom-workflow-back-url",
|
||||
"custom-workflow-generic-id",
|
||||
"custom-workflow-current-tabrel-genid",
|
||||
"custom-workflow-source-field",
|
||||
"crc",
|
||||
"MODULE_TESTMODE_KEY",
|
||||
"ELANG"
|
||||
];
|
||||
|
||||
private createMandatoryFormFields(queryParams: URLSearchParams) : JSX.Element {
|
||||
const hiddenInputs: JSX.Element[] = [];
|
||||
|
||||
// Create a hidden input for each mandatory Elix parameter
|
||||
this.mandatoryFormFieldNames.forEach(paramName => {
|
||||
const value = queryParams.get(paramName) ?? "";
|
||||
// Create the input element
|
||||
hiddenInputs.push(this.createHiddenInput(paramName));
|
||||
});
|
||||
|
||||
return <>{hiddenInputs}</>;
|
||||
}
|
||||
|
||||
private createAdditionalFormFields() : React.ReactElement {
|
||||
const schema = JSON.parse(this.props.additionalFieldsJson || "[]");
|
||||
|
||||
return (
|
||||
<>
|
||||
{schema.map((field: { key: React.Key | null | undefined; }) => (
|
||||
<div key={field.key}>
|
||||
{this.renderField(field)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
public createCustomFormFields(callback: (formFieldFactory: IElixFormsComponentCustomFormFieldFactory) => JSX.Element = () => <></>): JSX.Element {
|
||||
const formFieldFactory = {
|
||||
createBooleanInput: (name: string, label: string, required: boolean = false) =>
|
||||
this.createBooleanInput(name, label, required),
|
||||
createCheckboxInput: (name: string, label: string, options: Array<ElixFormsCheckboxOption>, required: boolean = false) =>
|
||||
this.createCheckboxInput(name, label, options, required),
|
||||
createDropdownInput: (name: string, label: string, options: Array<ElixFormsDropdownOption>, required: boolean = false) =>
|
||||
this.createDropdownInput(name, label, options, required),
|
||||
createHiddenInput: (name: string) =>
|
||||
this.createHiddenInput(name),
|
||||
createNumberInput: (name: string, label: string, required: boolean = false) =>
|
||||
this.createNumberInput(name, label, required),
|
||||
createRadioInput: (name: string, label: string, options: Array<ElixFormsRadioOption>, required: boolean = false) =>
|
||||
this.createRadioInput(name, label, options, required),
|
||||
createTextInput: (name: string, label: string, required: boolean = false) =>
|
||||
this.createTextInput(name, label, required),
|
||||
createTextAreaInput: (name: string, label: string, required: boolean = false) =>
|
||||
this.createTextAreaInput(name, label, required),
|
||||
};
|
||||
|
||||
return callback(formFieldFactory);
|
||||
}
|
||||
|
||||
public override render(): React.ReactElement<IElixFormsComponentProperties> {
|
||||
const {
|
||||
description,
|
||||
isDarkTheme,
|
||||
environmentMessage,
|
||||
hasTeamsContext,
|
||||
userDisplayName,
|
||||
additionalFieldsJson,
|
||||
customFormFieldsConfiguration
|
||||
} = this.props;
|
||||
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
|
||||
return (
|
||||
<section>
|
||||
{/* className={`${styles.elixFormsReact} ${hasTeamsContext ? styles.teams : ''}`} */}
|
||||
<div>{environmentMessage}</div>
|
||||
<div>{description}</div>
|
||||
<form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post">
|
||||
{this.createMandatoryFormFields(queryParams)}
|
||||
{this.createAdditionalFormFields()}
|
||||
{this.createCustomFormFields(customFormFieldsConfiguration)}
|
||||
<input type="submit" value="Submit"/>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
private createCheckboxInput(paramName: string, label: string, values: Array<ElixFormsCheckboxOption>, required: boolean = false) : JSX.Element {
|
||||
const checkedValues = QueryParamHelper.getCheckedFromQuery(paramName);
|
||||
|
||||
if (!this.checkboxValues.get(paramName)) {
|
||||
this.checkboxValues.set(paramName, checkedValues);
|
||||
}
|
||||
|
||||
const checkboxes: React.ReactElement[] = [];
|
||||
const stackTokens = { childrenGap: 10 };
|
||||
|
||||
values.forEach((entry, entryIndex) => {
|
||||
const id = `${paramName}_${entryIndex}`;
|
||||
checkboxes.push(
|
||||
<FluentUI.Checkbox title={label} key={id} id={id} label={entry.label} defaultChecked={checkedValues.indexOf(entryIndex) !== -1} required={required} className='isiportalPartialAdminCheckboxFieldItem'
|
||||
onChange={(_, checked) => {
|
||||
const currentCheckboxValues = this.checkboxValues.get(paramName)!;
|
||||
const checkboxIndex = currentCheckboxValues.indexOf(entryIndex) ?? -1;
|
||||
if (checked && checkboxIndex === -1) {
|
||||
currentCheckboxValues.push(entryIndex);
|
||||
} else if (!checked && checkboxIndex !== -1) {
|
||||
currentCheckboxValues.splice(checkboxIndex, 1);
|
||||
}
|
||||
this.setState({ formData: { ...this.state.formData, [paramName]: currentCheckboxValues.join(',').trim() ?? '' } }, () =>
|
||||
console.log(`Checkbox ${id} changed to ${checked}. Current values for ${paramName}: ${this.state.formData[paramName]}`));
|
||||
}} />
|
||||
);
|
||||
});
|
||||
|
||||
return new ElixFormsElement(
|
||||
<><FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label></>,
|
||||
<><FluentUI.Stack tokens={stackTokens}>
|
||||
{checkboxes}
|
||||
</FluentUI.Stack>
|
||||
<input type='hidden' id={paramName} name={paramName} value={this.state.formData[paramName] ?? ''} />
|
||||
</>
|
||||
).render();
|
||||
}
|
||||
|
||||
private createRadioInput(paramName: string, label: string, values: Array<ElixFormsRadioOption>, required: boolean = false) : JSX.Element {
|
||||
const radioValue = QueryParamHelper.getOptionFromQuery(paramName);
|
||||
const radios: FluentUI.IChoiceGroupOption[] = [];
|
||||
|
||||
values.forEach((entry, _) => {
|
||||
const id = `${paramName}_${entry.value}`;
|
||||
radios.push(
|
||||
{
|
||||
key: id,
|
||||
text: entry.label,
|
||||
id: id,
|
||||
name: paramName,
|
||||
value: entry.value,
|
||||
className: 'isiportalPartialAdminFormFieldRadio'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return new ElixFormsElement(
|
||||
<></>,
|
||||
<FluentUI.ChoiceGroup
|
||||
name={paramName}
|
||||
label={label}
|
||||
options={radios}
|
||||
required={required}
|
||||
defaultSelectedKey={`${paramName}_${radioValue}`}
|
||||
/>
|
||||
).render();
|
||||
}
|
||||
|
||||
private createBooleanInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
|
||||
const boolValue = QueryParamHelper.getOptionFromQuery(paramName);
|
||||
const radios: FluentUI.IChoiceGroupOption[] = [];
|
||||
|
||||
[{ "value": "true", "label": "Sì" }, { "value": "false", "label": "No" }].forEach((val) => {
|
||||
const id = `${paramName}_${val.value}`;
|
||||
radios.push(
|
||||
{
|
||||
key: id,
|
||||
text: val.label,
|
||||
id: id,
|
||||
name: paramName,
|
||||
value: val.value,
|
||||
className: 'isiportalPartialAdminFormFieldRadio'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return new ElixFormsElement(
|
||||
<></>,
|
||||
<FluentUI.ChoiceGroup
|
||||
name={paramName}
|
||||
label={label}
|
||||
options={radios}
|
||||
required={required}
|
||||
defaultSelectedKey={`${paramName}_${boolValue}`}
|
||||
/>
|
||||
).render();
|
||||
}
|
||||
|
||||
private createTextAreaInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
|
||||
const textareaValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
|
||||
return new ElixFormsElement(
|
||||
<FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
|
||||
<FluentUI.TextField id={paramName} name={paramName} defaultValue={textareaValue} multiline rows={4} required={required} className='isiportalPartialAdminFormFieldMultiLineText' />
|
||||
).render();
|
||||
}
|
||||
|
||||
private createTextInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
|
||||
const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
|
||||
return new ElixFormsElement(
|
||||
<FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
|
||||
<FluentUI.TextField id={paramName} name={paramName} defaultValue={textValue} required={required} className='isiportalPartialAdminFormFieldSingleLineText' />
|
||||
).render();
|
||||
}
|
||||
|
||||
private createHiddenInput(paramName: string) : JSX.Element {
|
||||
const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
|
||||
return <><input type='text' id={paramName} name={paramName} defaultValue={textValue} /><br/></>;
|
||||
}
|
||||
|
||||
private createNumberInput(paramName: string, label: string, required: boolean = false) : JSX.Element {
|
||||
const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
|
||||
return new ElixFormsElement(
|
||||
<FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
|
||||
<FluentUI.TextField id={paramName} name={paramName} defaultValue={textValue} type="number" required={required} className='isiportalPartialAdminFormFieldSingleLineText' />
|
||||
).render();
|
||||
}
|
||||
|
||||
private createDropdownInput(paramName: string, label: string, values: Array<ElixFormsDropdownOption>, required: boolean = false): JSX.Element {
|
||||
const selectedValue = QueryParamHelper.getOptionFromQuery(paramName);
|
||||
const options: FluentUI.IDropdownOption[] = [];
|
||||
|
||||
values.forEach(entry => {
|
||||
const id = `${paramName}_${entry.value}`;
|
||||
options.push(
|
||||
{
|
||||
key: id,
|
||||
text: entry.label
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return new ElixFormsElement(
|
||||
<FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
|
||||
<FluentUI.Dropdown
|
||||
id={paramName}
|
||||
options={options}
|
||||
selectedKey={selectedValue?.toString()}
|
||||
placeholder='---'
|
||||
required={required}
|
||||
className='isiportalPartialAdminFormFieldSelect'
|
||||
/>
|
||||
).render();
|
||||
}
|
||||
|
||||
private renderField(field: any): JSX.Element {
|
||||
//const value = this.state.formData[field.key] || "";
|
||||
|
||||
switch (field.type) {
|
||||
case "text":
|
||||
return this.createTextInput(field.key, field.label, field.required ?? false);
|
||||
|
||||
case "textarea":
|
||||
return this.createTextAreaInput(field.key, field.label, field.required ?? false);
|
||||
|
||||
case "radio":
|
||||
return this.createRadioInput(field.key, field.label,
|
||||
new Array<ElixFormsRadioOption>().concat(...field.options.map((o: any) => [[o.value, o.label]])),
|
||||
field.required ?? false);
|
||||
|
||||
case "boolean":
|
||||
return this.createBooleanInput(field.key, field.label, field.required ?? false);
|
||||
|
||||
case "checkbox":
|
||||
return this.createCheckboxInput(field.key, field.label,
|
||||
new Array<ElixFormsCheckboxOption>().concat(...field.options.map((o: any) => [[o.value, o.label]])),
|
||||
field.required ?? false);
|
||||
|
||||
case "number":
|
||||
return this.createNumberInput(field.key, field.label, field.required ?? false);
|
||||
|
||||
case "dropdown":
|
||||
return this.createDropdownInput(field.key, field.label,
|
||||
new Array<ElixFormsDropdownOption>().concat(...field.options.map((o: any) => [[o.value, o.label]])),
|
||||
field.required ?? false);
|
||||
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import React, { JSX } from "react";
|
||||
|
||||
// Class to encapsulate the label and input elements
|
||||
export class ElixFormsElement {
|
||||
label: JSX.Element;
|
||||
input: JSX.Element;
|
||||
separator: string;
|
||||
constructor(labelElement: React.ReactElement, inputElement: React.ReactElement, separator: string = "")
|
||||
{
|
||||
if (!labelElement || !inputElement) {
|
||||
throw new Error("labelElement and inputElement are required.");
|
||||
}
|
||||
|
||||
this.label = labelElement;
|
||||
this.input = inputElement;
|
||||
this.separator = separator;
|
||||
}
|
||||
|
||||
// Optional: render both elements together
|
||||
render() : JSX.Element {
|
||||
return (<><div className="iuFieldContainer">
|
||||
<div className="attrDisplay_left attrDisplay_label"><div className="iuLabelContainer"><div className="attrDisplay_center"><div className="attrDisplay_middle">
|
||||
{this.label}{this.separator}
|
||||
</div></div><div className="iuClearContainer"> </div></div></div>
|
||||
<div className="attrDisplay_right attrDisplay_input"><div className="iuInputContainer iuTypeString"><div className="attrDisplay_center"><div className="attrDisplay_middle">
|
||||
{this.input}
|
||||
</div></div><div className="iuClearContainer"> </div></div></div>
|
||||
</div></>);
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export type ElixFormsCheckboxOption = { value: number, label: string };
|
||||
export type ElixFormsDropdownOption = { value: number, label: string };
|
||||
export type ElixFormsRadioOption = { value: number, label: string };
|
||||
@@ -1,13 +0,0 @@
|
||||
import { JSX } from "react";
|
||||
import { ElixFormsCheckboxOption, ElixFormsDropdownOption, ElixFormsRadioOption } from "./ElixFormsTypes";
|
||||
|
||||
export type IElixFormsComponentCustomFormFieldFactory = {
|
||||
createBooleanInput: (name: string, label: string, required?: boolean) => JSX.Element;
|
||||
createCheckboxInput: (name: string, label: string, options: Array<ElixFormsCheckboxOption>, required?: boolean) => JSX.Element;
|
||||
createDropdownInput: (name: string, label: string, options: Array<ElixFormsDropdownOption>, required?: boolean) => JSX.Element;
|
||||
createHiddenInput: (name: string) => JSX.Element;
|
||||
createNumberInput: (name: string, label: string, required?: boolean) => JSX.Element;
|
||||
createRadioInput: (name: string, label: string, options: Array<ElixFormsRadioOption>, required?: boolean) => JSX.Element;
|
||||
createTextInput: (name: string, label: string, required?: boolean) => JSX.Element;
|
||||
createTextAreaInput: (name: string, label: string, required?: boolean) => JSX.Element;
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
|
||||
export interface IElixFormsComponentFormState {
|
||||
formData: { [key: string]: any; };
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import { JSX } from "react";
|
||||
import { IElixFormsComponentCustomFormFieldFactory } from "./IElixFormsComponentCustomFormFieldFactory";
|
||||
|
||||
export interface IElixFormsComponentProperties {
|
||||
description: string;
|
||||
isDarkTheme: boolean;
|
||||
environmentMessage: string;
|
||||
hasTeamsContext: boolean;
|
||||
userDisplayName: string;
|
||||
additionalFieldsJson?: string;
|
||||
customFormFieldsConfiguration?: (formFieldFactory: IElixFormsComponentCustomFormFieldFactory) => JSX.Element;
|
||||
}
|
||||
|
||||
// Additional Fields JSON Schema
|
||||
/* // To test, just copy-paste the following JSON in the "Additional Fields JSON" property of the web part. Remember to remove comments before pasting.
|
||||
[
|
||||
{
|
||||
"key": "field1",
|
||||
"type": "text",
|
||||
"label": "Field 1",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"key": "field2",
|
||||
"type": "checkbox",
|
||||
"label": "Field 2",
|
||||
"options": [
|
||||
{ "value": 1, "label": "Checkbox Option 1" },
|
||||
{ "value": 2, "label": "Checkbox Option 2" },
|
||||
{ "value": 3, "label": "Checkbox Option 3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "field3",
|
||||
"type": "radio",
|
||||
"label": "Field 3",
|
||||
"required": true,
|
||||
"options": [
|
||||
{ "value": 1, "label": "Radio Option 1" },
|
||||
{ "value": 2, "label": "Radio Option 2" },
|
||||
{ "value": 3, "label": "Radio Option 3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "field4",
|
||||
"type": "boolean",
|
||||
"label": "Field 4"
|
||||
},
|
||||
{
|
||||
"key": "field5",
|
||||
"type": "textarea",
|
||||
"label": "Field 5",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"key": "field6",
|
||||
"type": "number",
|
||||
"label": "Field 6"
|
||||
},
|
||||
{
|
||||
"key": "field7",
|
||||
"type": "dropdown",
|
||||
"label": "Field 7",
|
||||
"required": true,
|
||||
"options": [
|
||||
{ "value": 1, "label": "Dropdown Option 1" },
|
||||
{ "value": 2, "label": "Dropdown Option 2" },
|
||||
{ "value": 3, "label": "Dropdown Option 3" }
|
||||
]
|
||||
}
|
||||
]
|
||||
*/
|
||||
@@ -1,41 +0,0 @@
|
||||
export class QueryParamHelper {
|
||||
public static getCheckedFromQuery(paramName: string): number[] {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const values = params.get(paramName) ?? "";
|
||||
|
||||
console.debug(`getCheckedFromQuery(${paramName}) = ${values}`);
|
||||
|
||||
return values.split(',')
|
||||
.map(Number)
|
||||
.filter(n => !isNaN(n));
|
||||
}
|
||||
|
||||
public static getOptionFromQuery(paramName: string): number | undefined {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const num = Number.parseInt(params.get(paramName) ?? "-1");
|
||||
|
||||
console.debug(`getOptionFromQuery(${paramName}) = ${num}`);
|
||||
|
||||
return num;
|
||||
}
|
||||
|
||||
public static getBooleanFromQuery(paramName: string): boolean | undefined {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const boolValue = params.get(paramName) === undefined || params.get(paramName) === null ? undefined :
|
||||
params.get(paramName)?.toLowerCase() === "true" ? true : false;
|
||||
|
||||
console.debug(`getBooleanFromQuery(${paramName}) = ${boolValue}`);
|
||||
|
||||
return boolValue;
|
||||
}
|
||||
|
||||
public static getDecodedTextFromQuery(paramName: string): string | undefined {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const textValue = params.get(paramName) === undefined || params.get(paramName) === null ? undefined :
|
||||
decodeURIComponent(params.get(paramName) as string);
|
||||
|
||||
console.debug(`getDecodedTextFromQuery(${paramName}) = ${textValue}`);
|
||||
|
||||
return textValue;
|
||||
}
|
||||
}
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
declare module "*.css";
|
||||
declare module "*.svg";
|
||||
declare module "*.png";
|
||||
@@ -3,7 +3,10 @@ import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
const rootElement = document.getElementById('root')
|
||||
if (!rootElement) throw new Error('Root element not found')
|
||||
|
||||
createRoot(rootElement).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "../tsconfig.base.json",
|
||||
"references": [
|
||||
{
|
||||
"path": "../common"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"outDir": "dist",
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
//"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
||||
import path from "path";
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
@@ -18,8 +19,22 @@ export default defineConfig({
|
||||
manualChunks: undefined, // disabilita la creazione di chunk multipli
|
||||
entryFileNames: 'scelta-carriera.js', // nome del file finale
|
||||
assetFileNames: '[name].[ext]' // evita hash nei nomi
|
||||
}
|
||||
},
|
||||
},
|
||||
sourcemap: true,
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"@common": path.resolve(__dirname, "../common"),
|
||||
// "react": path.resolve(__dirname, "node_modules/react"),
|
||||
// "react-dom": path.resolve(__dirname, "node_modules/react-dom")
|
||||
}
|
||||
},
|
||||
server: {
|
||||
fs: {
|
||||
allow: [
|
||||
".." // permette import fuori dalla cartella del progetto
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user