From 13b8f41f3f7abba170a0622660e480065cc6c279 Mon Sep 17 00:00:00 2001 From: Geovanni Perez <1775792+geoperez@users.noreply.github.com> Date: Tue, 4 Jun 2024 14:45:46 -0600 Subject: [PATCH] Add Forms support (React Hook Form new dependency, it might change) --- package.json | 7 +- pnpm-lock.yaml | 183 ++++++++++++++++++++++++------------ sample/index.tsx | 49 +++++++++- src/Form/formSettings.ts | 17 ++++ src/Form/index.tsx | 145 ++++++++++++++++++++++++++++ src/Form/styled.ts | 63 +++++++++++++ src/Form/utils.ts | 24 +++++ src/VirtualSelect/index.tsx | 11 +-- src/constants.ts | 32 +++++++ src/index.ts | 1 + tailwind.config.js | 2 + 11 files changed, 457 insertions(+), 77 deletions(-) create mode 100644 src/Form/formSettings.ts create mode 100644 src/Form/index.tsx create mode 100644 src/Form/styled.ts create mode 100644 src/Form/utils.ts diff --git a/package.json b/package.json index 224b3d1..7ef3840 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "uno-dashboard-ux", - "version": "3.50.0", + "version": "4.0.0", "description": "Unosquare Dashboard UX/UI", "main": "dist/index.js", "files": [ @@ -13,6 +13,7 @@ "@tremor/react": "^3.17.2", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-hook-form": "7.51.5", "recharts": "2.12.7", "tailwind-merge": "^2.3.0", "tailwind-styled-components": "^2.2.0", @@ -30,8 +31,8 @@ "@types/uuid": "^9.0.8", "@types/react-dom": "^18.3.0", "@types/recharts": "1.8.29", - "@types/node": "^20.14.0", - "@typescript-eslint/eslint-plugin": "^7.11.0", + "@types/node": "^20.14.1", + "@typescript-eslint/eslint-plugin": "^7.12.0", "autoprefixer": "^10.4.19", "eslint": "^8.57.0", "eslint-config-unosquare": "0.13.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 76bebfb..639881c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-hook-form: + specifier: 7.51.5 + version: 7.51.5(react@18.3.1) recharts: specifier: 2.12.7 version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -50,7 +53,7 @@ importers: version: 0.7.2(@rsbuild/core@0.7.2)(@swc/helpers@0.5.3) '@testing-library/jest-dom': specifier: ^6.4.5 - version: 6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.0)) + version: 6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.1)) '@testing-library/react': specifier: ^16.0.0 version: 16.0.0(@testing-library/dom@10.0.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -58,8 +61,8 @@ importers: specifier: ^29.5.12 version: 29.5.12 '@types/node': - specifier: ^20.14.0 - version: 20.14.0 + specifier: ^20.14.1 + version: 20.14.1 '@types/react': specifier: ^18.3.3 version: 18.3.3 @@ -73,8 +76,8 @@ importers: specifier: ^9.0.8 version: 9.0.8 '@typescript-eslint/eslint-plugin': - specifier: ^7.11.0 - version: 7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) + specifier: ^7.12.0 + version: 7.12.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) autoprefixer: specifier: ^10.4.19 version: 10.4.19(postcss@8.4.38) @@ -98,7 +101,7 @@ importers: version: 9.0.11 jest: specifier: ^29.7.0 - version: 29.7.0(@types/node@20.14.0) + version: 29.7.0(@types/node@20.14.1) jest-environment-jsdom: specifier: ^29.7.0 version: 29.7.0 @@ -116,7 +119,7 @@ importers: version: 3.4.3 ts-jest: specifier: ^29.1.4 - version: 29.1.4(@babel/core@7.23.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.23.2))(jest@29.7.0(@types/node@20.14.0))(typescript@5.4.5) + version: 29.1.4(@babel/core@7.23.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.23.2))(jest@29.7.0(@types/node@20.14.1))(typescript@5.4.5) typescript: specifier: ^5.4.5 version: 5.4.5 @@ -816,8 +819,8 @@ packages: '@types/json5@0.0.29': resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} - '@types/node@20.14.0': - resolution: {integrity: sha512-5cHBxFGJx6L4s56Bubp4fglrEpmyJypsqI6RgzMfBHWUJQGWAAi8cWcgetEbZXHYXo9C2Fa4EEds/uSyS4cxmA==} + '@types/node@20.14.1': + resolution: {integrity: sha512-T2MzSGEu+ysB/FkWfqmhV3PLyQlowdptmmgD20C6QxsS8Fmv5SjpZ1ayXaEC0S21/h5UJ9iA6W/5vSNU5l00OA==} '@types/prop-types@15.7.5': resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} @@ -846,8 +849,8 @@ packages: '@types/yargs@17.0.31': resolution: {integrity: sha512-bocYSx4DI8TmdlvxqGpVNXOgCNR1Jj0gNPhhAY+iz1rgKDAaYrAYdFYnhDV1IFuiuVc9HkOwyDcFxaTElF3/wg==} - '@typescript-eslint/eslint-plugin@7.11.0': - resolution: {integrity: sha512-P+qEahbgeHW4JQ/87FuItjBj8O3MYv5gELDzr8QaQ7fsll1gSMTYb6j87MYyxwf3DtD7uGFB9ShwgmCJB5KmaQ==} + '@typescript-eslint/eslint-plugin@7.12.0': + resolution: {integrity: sha512-7F91fcbuDf/d3S8o21+r3ZncGIke/+eWk0EpO21LXhDfLahriZF9CGj4fbAetEjlaBdjdSm9a6VeXbpbT6Z40Q==} engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: '@typescript-eslint/parser': ^7.0.0 @@ -871,8 +874,12 @@ packages: resolution: {integrity: sha512-27tGdVEiutD4POirLZX4YzT180vevUURJl4wJGmm6TrQoiYwuxTIY98PBp6L2oN+JQxzE0URvYlzJaBHIekXAw==} engines: {node: ^18.18.0 || >=20.0.0} - '@typescript-eslint/type-utils@7.11.0': - resolution: {integrity: sha512-WmppUEgYy+y1NTseNMJ6mCFxt03/7jTOy08bcg7bxJJdsM4nuhnchyBbE8vryveaJUf62noH7LodPSo5Z0WUCg==} + '@typescript-eslint/scope-manager@7.12.0': + resolution: {integrity: sha512-itF1pTnN6F3unPak+kutH9raIkL3lhH1YRPGgt7QQOh43DQKVJXmWkpb+vpc/TiDHs6RSd9CTbDsc/Y+Ygq7kg==} + engines: {node: ^18.18.0 || >=20.0.0} + + '@typescript-eslint/type-utils@7.12.0': + resolution: {integrity: sha512-lib96tyRtMhLxwauDWUp/uW3FMhLA6D0rJ8T7HmH7x23Gk1Gwwu8UZ94NMXBvOELn6flSPiBrCKlehkiXyaqwA==} engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: eslint: ^8.56.0 @@ -885,6 +892,10 @@ packages: resolution: {integrity: sha512-MPEsDRZTyCiXkD4vd3zywDCifi7tatc4K37KqTprCvaXptP7Xlpdw0NR2hRJTetG5TxbWDB79Ys4kLmHliEo/w==} engines: {node: ^18.18.0 || >=20.0.0} + '@typescript-eslint/types@7.12.0': + resolution: {integrity: sha512-o+0Te6eWp2ppKY3mLCU+YA9pVJxhUJE15FV7kxuD9jgwIAa+w/ycGJBMrYDTpVGUM/tgpa9SeMOugSabWFq7bg==} + engines: {node: ^18.18.0 || >=20.0.0} + '@typescript-eslint/typescript-estree@7.11.0': resolution: {integrity: sha512-cxkhZ2C/iyi3/6U9EPc5y+a6csqHItndvN/CzbNXTNrsC3/ASoYQZEt9uMaEp+xFNjasqQyszp5TumAVKKvJeQ==} engines: {node: ^18.18.0 || >=20.0.0} @@ -894,8 +905,17 @@ packages: typescript: optional: true - '@typescript-eslint/utils@7.11.0': - resolution: {integrity: sha512-xlAWwPleNRHwF37AhrZurOxA1wyXowW4PqVXZVUNCLjB48CqdPJoJWkrpH2nij9Q3Lb7rtWindtoXwxjxlKKCA==} + '@typescript-eslint/typescript-estree@7.12.0': + resolution: {integrity: sha512-5bwqLsWBULv1h6pn7cMW5dXX/Y2amRqLaKqsASVwbBHMZSnHqE/HN4vT4fE0aFsiwxYvr98kqOWh1a8ZKXalCQ==} + engines: {node: ^18.18.0 || >=20.0.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + + '@typescript-eslint/utils@7.12.0': + resolution: {integrity: sha512-Y6hhwxwDx41HNpjuYswYp6gDbkiZ8Hin9Bf5aJQn1bpTs3afYY4GX+MPYxma8jtoIV2GRwTM/UJm/2uGCVv+DQ==} engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: eslint: ^8.56.0 @@ -904,6 +924,10 @@ packages: resolution: {integrity: sha512-7syYk4MzjxTEk0g/w3iqtgxnFQspDJfn6QKD36xMuuhTzjcxY7F8EmBLnALjVyaOF1/bVocu3bS/2/F7rXrveQ==} engines: {node: ^18.18.0 || >=20.0.0} + '@typescript-eslint/visitor-keys@7.12.0': + resolution: {integrity: sha512-uZk7DevrQLL3vSnfFl5bj4sL75qC9D6EdjemIdbtkuUmIheWpuiiylSY01JxJE7+zGrOWDZrp1WxOuDntvKrHQ==} + engines: {node: ^18.18.0 || >=20.0.0} + '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} @@ -2679,6 +2703,12 @@ packages: peerDependencies: react: ^18.3.1 + react-hook-form@7.51.5: + resolution: {integrity: sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==} + engines: {node: '>=12.22.0'} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -3666,7 +3696,7 @@ snapshots: '@jest/console@29.7.0': dependencies: '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 chalk: 4.1.2 jest-message-util: 29.7.0 jest-util: 29.7.0 @@ -3679,14 +3709,14 @@ snapshots: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 ansi-escapes: 4.3.2 chalk: 4.1.2 ci-info: 3.9.0 exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@20.14.0) + jest-config: 29.7.0(@types/node@20.14.1) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -3711,7 +3741,7 @@ snapshots: dependencies: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 jest-mock: 29.7.0 '@jest/expect-utils@29.7.0': @@ -3729,7 +3759,7 @@ snapshots: dependencies: '@jest/types': 29.6.3 '@sinonjs/fake-timers': 10.3.0 - '@types/node': 20.14.0 + '@types/node': 20.14.1 jest-message-util: 29.7.0 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -3751,7 +3781,7 @@ snapshots: '@jest/transform': 29.7.0 '@jest/types': 29.6.3 '@jridgewell/trace-mapping': 0.3.18 - '@types/node': 20.14.0 + '@types/node': 20.14.1 chalk: 4.1.2 collect-v8-coverage: 1.0.2 exit: 0.1.2 @@ -3821,7 +3851,7 @@ snapshots: '@jest/schemas': 29.6.3 '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 20.14.0 + '@types/node': 20.14.1 '@types/yargs': 17.0.31 chalk: 4.1.2 @@ -4066,7 +4096,7 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/jest-dom@6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.0))': + '@testing-library/jest-dom@6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.1))': dependencies: '@adobe/css-tools': 4.3.2 '@babel/runtime': 7.24.4 @@ -4079,7 +4109,7 @@ snapshots: optionalDependencies: '@jest/globals': 29.7.0 '@types/jest': 29.5.12 - jest: 29.7.0(@types/node@20.14.0) + jest: 29.7.0(@types/node@20.14.1) '@testing-library/react@16.0.0(@testing-library/dom@10.0.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: @@ -4163,7 +4193,7 @@ snapshots: '@types/graceful-fs@4.1.9': dependencies: - '@types/node': 20.14.0 + '@types/node': 20.14.1 '@types/istanbul-lib-coverage@2.0.6': {} @@ -4182,13 +4212,13 @@ snapshots: '@types/jsdom@20.0.1': dependencies: - '@types/node': 20.14.0 + '@types/node': 20.14.1 '@types/tough-cookie': 4.0.5 parse5: 7.1.2 '@types/json5@0.0.29': {} - '@types/node@20.14.0': + '@types/node@20.14.1': dependencies: undici-types: 5.26.5 @@ -4220,14 +4250,14 @@ snapshots: dependencies: '@types/yargs-parser': 21.0.3 - '@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)': + '@typescript-eslint/eslint-plugin@7.12.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)': dependencies: '@eslint-community/regexpp': 4.10.0 '@typescript-eslint/parser': 7.11.0(eslint@8.57.0)(typescript@5.4.5) - '@typescript-eslint/scope-manager': 7.11.0 - '@typescript-eslint/type-utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5) - '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5) - '@typescript-eslint/visitor-keys': 7.11.0 + '@typescript-eslint/scope-manager': 7.12.0 + '@typescript-eslint/type-utils': 7.12.0(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/utils': 7.12.0(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/visitor-keys': 7.12.0 eslint: 8.57.0 graphemer: 1.4.0 ignore: 5.3.1 @@ -4256,10 +4286,15 @@ snapshots: '@typescript-eslint/types': 7.11.0 '@typescript-eslint/visitor-keys': 7.11.0 - '@typescript-eslint/type-utils@7.11.0(eslint@8.57.0)(typescript@5.4.5)': + '@typescript-eslint/scope-manager@7.12.0': dependencies: - '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5) - '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/types': 7.12.0 + '@typescript-eslint/visitor-keys': 7.12.0 + + '@typescript-eslint/type-utils@7.12.0(eslint@8.57.0)(typescript@5.4.5)': + dependencies: + '@typescript-eslint/typescript-estree': 7.12.0(typescript@5.4.5) + '@typescript-eslint/utils': 7.12.0(eslint@8.57.0)(typescript@5.4.5) debug: 4.3.4 eslint: 8.57.0 ts-api-utils: 1.3.0(typescript@5.4.5) @@ -4270,6 +4305,8 @@ snapshots: '@typescript-eslint/types@7.11.0': {} + '@typescript-eslint/types@7.12.0': {} + '@typescript-eslint/typescript-estree@7.11.0(typescript@5.4.5)': dependencies: '@typescript-eslint/types': 7.11.0 @@ -4285,12 +4322,27 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@7.11.0(eslint@8.57.0)(typescript@5.4.5)': + '@typescript-eslint/typescript-estree@7.12.0(typescript@5.4.5)': + dependencies: + '@typescript-eslint/types': 7.12.0 + '@typescript-eslint/visitor-keys': 7.12.0 + debug: 4.3.4 + globby: 11.1.0 + is-glob: 4.0.3 + minimatch: 9.0.4 + semver: 7.6.0 + ts-api-utils: 1.3.0(typescript@5.4.5) + optionalDependencies: + typescript: 5.4.5 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/utils@7.12.0(eslint@8.57.0)(typescript@5.4.5)': dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) - '@typescript-eslint/scope-manager': 7.11.0 - '@typescript-eslint/types': 7.11.0 - '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5) + '@typescript-eslint/scope-manager': 7.12.0 + '@typescript-eslint/types': 7.12.0 + '@typescript-eslint/typescript-estree': 7.12.0(typescript@5.4.5) eslint: 8.57.0 transitivePeerDependencies: - supports-color @@ -4301,6 +4353,11 @@ snapshots: '@typescript-eslint/types': 7.11.0 eslint-visitor-keys: 3.4.3 + '@typescript-eslint/visitor-keys@7.12.0': + dependencies: + '@typescript-eslint/types': 7.12.0 + eslint-visitor-keys: 3.4.3 + '@ungap/structured-clone@1.2.0': {} abab@2.0.6: {} @@ -4679,13 +4736,13 @@ snapshots: optionalDependencies: typescript: 5.4.5 - create-jest@29.7.0(@types/node@20.14.0): + create-jest@29.7.0(@types/node@20.14.1): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.14.0) + jest-config: 29.7.0(@types/node@20.14.1) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -5019,7 +5076,7 @@ snapshots: eslint-config-unosquare@0.13.1(eslint@8.57.0)(prettier@3.3.0)(typescript@5.4.5): dependencies: - '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/eslint-plugin': 7.12.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/parser': 7.11.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-config-prettier: 9.1.0(eslint@8.57.0) @@ -5660,7 +5717,7 @@ snapshots: '@jest/expect': 29.7.0 '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 chalk: 4.1.2 co: 4.6.0 dedent: 1.5.1 @@ -5680,16 +5737,16 @@ snapshots: - babel-plugin-macros - supports-color - jest-cli@29.7.0(@types/node@20.14.0): + jest-cli@29.7.0(@types/node@20.14.1): dependencies: '@jest/core': 29.7.0 '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@20.14.0) + create-jest: 29.7.0(@types/node@20.14.1) exit: 0.1.2 import-local: 3.1.0 - jest-config: 29.7.0(@types/node@20.14.0) + jest-config: 29.7.0(@types/node@20.14.1) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.6.2 @@ -5699,7 +5756,7 @@ snapshots: - supports-color - ts-node - jest-config@29.7.0(@types/node@20.14.0): + jest-config@29.7.0(@types/node@20.14.1): dependencies: '@babel/core': 7.23.2 '@jest/test-sequencer': 29.7.0 @@ -5724,7 +5781,7 @@ snapshots: slash: 3.0.0 strip-json-comments: 3.1.1 optionalDependencies: - '@types/node': 20.14.0 + '@types/node': 20.14.1 transitivePeerDependencies: - babel-plugin-macros - supports-color @@ -5754,7 +5811,7 @@ snapshots: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 '@types/jsdom': 20.0.1 - '@types/node': 20.14.0 + '@types/node': 20.14.1 jest-mock: 29.7.0 jest-util: 29.7.0 jsdom: 20.0.3 @@ -5768,7 +5825,7 @@ snapshots: '@jest/environment': 29.7.0 '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -5778,7 +5835,7 @@ snapshots: dependencies: '@jest/types': 29.6.3 '@types/graceful-fs': 4.1.9 - '@types/node': 20.14.0 + '@types/node': 20.14.1 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.11 @@ -5817,7 +5874,7 @@ snapshots: jest-mock@29.7.0: dependencies: '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 jest-util: 29.7.0 jest-pnp-resolver@1.2.3(jest-resolve@29.7.0): @@ -5852,7 +5909,7 @@ snapshots: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 chalk: 4.1.2 emittery: 0.13.1 graceful-fs: 4.2.11 @@ -5880,7 +5937,7 @@ snapshots: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 chalk: 4.1.2 cjs-module-lexer: 1.2.3 collect-v8-coverage: 1.0.2 @@ -5926,7 +5983,7 @@ snapshots: jest-util@29.7.0: dependencies: '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 chalk: 4.1.2 ci-info: 3.9.0 graceful-fs: 4.2.11 @@ -5945,7 +6002,7 @@ snapshots: dependencies: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.0 + '@types/node': 20.14.1 ansi-escapes: 4.3.2 chalk: 4.1.2 emittery: 0.13.1 @@ -5954,17 +6011,17 @@ snapshots: jest-worker@29.7.0: dependencies: - '@types/node': 20.14.0 + '@types/node': 20.14.1 jest-util: 29.7.0 merge-stream: 2.0.0 supports-color: 8.1.1 - jest@29.7.0(@types/node@20.14.0): + jest@29.7.0(@types/node@20.14.1): dependencies: '@jest/core': 29.7.0 '@jest/types': 29.6.3 import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@20.14.0) + jest-cli: 29.7.0(@types/node@20.14.1) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -6426,6 +6483,10 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-hook-form@7.51.5(react@18.3.1): + dependencies: + react: 18.3.1 + react-is@16.13.1: {} react-is@17.0.2: {} @@ -6876,11 +6937,11 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-jest@29.1.4(@babel/core@7.23.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.23.2))(jest@29.7.0(@types/node@20.14.0))(typescript@5.4.5): + ts-jest@29.1.4(@babel/core@7.23.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.23.2))(jest@29.7.0(@types/node@20.14.1))(typescript@5.4.5): dependencies: bs-logger: 0.2.6 fast-json-stable-stringify: 2.1.0 - jest: 29.7.0(@types/node@20.14.0) + jest: 29.7.0(@types/node@20.14.1) jest-util: 29.7.0 json5: 2.2.3 lodash.memoize: 4.1.2 diff --git a/sample/index.tsx b/sample/index.tsx index 6e01c17..6ac42bd 100644 --- a/sample/index.tsx +++ b/sample/index.tsx @@ -19,6 +19,7 @@ import { DataChart, ErrorBoundary, Footer, + Form, InfoDialog, MenuContainer, MenuSection, @@ -37,6 +38,7 @@ import { useTheme, useAlertStore, useToggle, + FormFieldTypes, } from '../src'; import '../src/resources/global.css'; import { anotherDataSet, defaultData, getLargeSelectOptions } from './data'; @@ -73,7 +75,7 @@ const onlineColumns: TableColumn[] = [ { label: 'Title', render: (column, { columnIndex, rowIndex }, data, rawData) => ( - + {rawData && ( {String(data)} )} @@ -104,6 +106,38 @@ type onlineDto = { body: string; }; +const fields = [ + { + label: 'Name', + name: 'name', + }, + { + label: 'Age', + name: 'age', + type: FormFieldTypes.Number, + }, + { + label: 'Country', + name: 'country', + type: FormFieldTypes.VirtualSelect, + options: [ + { label: 'USA', value: 'USA' }, + { label: 'Canada', value: 'Canada' }, + { label: 'Mexico', value: 'Mexico' }, + ] + }, + { + label: 'Can Drive?', + name: 'canDrive', + type: FormFieldTypes.Checkbox, + }, + { + label: 'License Date', + name: 'licenseDate', + type: FormFieldTypes.Date, + }, +]; + const Application = () => { const setAlert = useAlertStore((st) => st.setAlert); const [currentOption, setCurrentOption] = React.useState(options.A); @@ -140,6 +174,10 @@ const Application = () => { setCounter((x) => x + 1); }; + const onSave = async (data: unknown) => { + console.log(data); + }; + return ( @@ -297,6 +335,12 @@ const Application = () => { + + + Form +
+ +