@nwon/react-mui-hook-form 2.0.7 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +36 -7
  2. package/package.json +1 -89
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # React-Mui-Hook-Form
2
2
 
3
- Creating forms in [React](https://react.dev/) is harder then one might think 🙈. After a lot of trying we settled on a solution we are quite happy with. We basically use the awesome work of the following three packages in order to provide easy to use translatable form elements:
3
+ Creating forms in [React](https://react.dev/) is harder than one might think 🙈. After a lot of trying we settled on a solution we are quite happy with. We basically use the awesome work of the following three packages in order to provide easy to use translatable form elements:
4
4
 
5
5
  - [MUI](https://mui.com/)
6
6
  - [React Hook Form](https://react-hook-form.com/)
@@ -70,17 +70,27 @@ This package includes basic input components and some helpers to make your life
70
70
 
71
71
  ### Input components
72
72
 
73
- We provide a bunch of form elements that can be used in a React Hook Form Context:
73
+ We provide a bunch of form elements that can be used in a React Hook Form Context. We offer the following base types:
74
74
 
75
- - [InputText](./src/formFields/baseTypes/InputText/InputText.tsx)
75
+ - [InputAutoComplete](./src/formFields/baseTypes/InputAutoComplete/InputAutoComplete.tsx)
76
+ - [InputCheckbox](./src/formFields/baseTypes/InputCheckbox/InputCheckbox.tsx)
77
+ - [InputDatePicker](./src/formFields/baseTypes/InputDatePicker/InputDatePicker.tsx)
78
+ - [InputDateTimePicker](./src/formFields/baseTypes/InputDateTimePicker/InputDateTimePicker.tsx)
79
+ - [InputOutlinedInput](./src/formFields/baseTypes/InputOutlinedInput/InputOutlinedInput.tsx)
80
+ - [InputRadio](./src/formFields/baseTypes/InputRadio/InputRadio.tsx)
76
81
  - [InputSelect](./src/formFields/baseTypes/InputSelect/InputSelect.tsx)
77
82
  - [InputSelectFromEnum](./src/formFields/baseTypes/InputSelectFromEnum/InputSelectFromEnum.tsx)
78
- - [InputRadio](./src/formFields/baseTypes/InputRadio/InputRadio.tsx)
79
- - [InputCheckbox](./src/formFields/baseTypes/InputCheckbox/InputCheckbox.tsx)
83
+ - [InputSlider](./src/formFields/baseTypes/InputSlider/InputSlider.tsx)
84
+ - [InputSwitch](./src/formFields/baseTypes/InputSwitch/InputSwitch.tsx)
85
+ - [InputTextField](./src/formFields/baseTypes/InputTextField/InputTextField.tsx)
86
+ - [InputTimePicker](./src/formFields/baseTypes/InputTimePicker/InputTimePicker.tsx)
87
+ - [InputToggleButton](./src/formFields/baseTypes/InputToggleButton/InputToggleButton.tsx)
88
+ - [InputToggleButtonGroup](./src/formFields/baseTypes/InputToggleButtonGroup/InputToggleButtonGroup.tsx)
89
+
90
+ On top we offer widely used inputs with some flavor:
91
+
80
92
  - [InputEmail](./src/formFields/InputEmail/InputEmail.tsx)
81
93
  - [InputPasswordSet](./src/formFields/InputPasswordSet/InputPasswordSet.tsx)
82
- - [InputDateTimePicker](./src/formFields/baseTypes/InputDateTimePicker/InputDateTimePicker.tsx)
83
- - [InputAutoComplete](./src/formFields/baseTypes/InputAutoComplete/InputAutoComplete.tsx)
84
94
 
85
95
  ### React Hook Form Enhancements
86
96
 
@@ -90,6 +100,25 @@ We also provide very slightly enhanced versions of
90
100
  - useForm replacement [useHookForm](./src/formFields/formHelper/useHookForm.ts)
91
101
  - useFormContext replacement [useHookFormContext](./src/formFields/formHelper/useHookFormContext.ts)
92
102
 
103
+ ### Error handling
104
+
105
+ All of our Inputs include some basic error handling. Displaying and marking them as accordingly.
106
+
107
+ We also offer components for display errors for a given field name:
108
+
109
+ - [FormFieldError](./src/formFields/errors/FormFieldError.tsx)
110
+
111
+ Or for some error message:
112
+
113
+ - [FormFieldErrorDisplay](./src/formFields/errors/FormFieldErrorDisplay.tsx)
114
+
115
+ We also expose the internally used hooks for retrieving errors:
116
+
117
+ - [useFormFieldError](./src/formFields/errors/useFormFieldError.ts)
118
+ - [useFormFieldHasError](./src/formFields/errors/useFormFieldHasError.ts)
119
+
120
+ All of our error related hooks and components can handle nested keys and arrays.
121
+
93
122
  ### Little helpers
94
123
 
95
124
  And some little helpers:
package/package.json CHANGED
@@ -1,89 +1 @@
1
- {
2
- "name": "@nwon/react-mui-hook-form",
3
- "version": "2.0.7",
4
- "type": "module",
5
- "keywords": [
6
- "react",
7
- "MUI",
8
- "React Hook Form",
9
- "forms",
10
- "typescript"
11
- ],
12
- "repository": {
13
- "type": "git",
14
- "url": "https://gitlab.com/nwon-group/nwon-tooling/npm-packages/react-mui-hook-form"
15
- },
16
- "description": "Making react forms easy - A connection of MUI and React Hook Form",
17
- "types": "dist/packageExports.d.ts",
18
- "main": "dist/packageExports.js",
19
- "cracoConfig": "craco.config.cjs",
20
- "scripts": {},
21
- "files": [
22
- "dist",
23
- "readme.md",
24
- "license"
25
- ],
26
- "author": "NWON",
27
- "license": "MIT",
28
- "devDependencies": {
29
- "@babel/core": "^7.24.7",
30
- "@babel/plugin-transform-runtime": "^7.24.7",
31
- "@babel/preset-flow": "^7.24.7",
32
- "@babel/preset-react": "^7.24.7",
33
- "@babel/runtime": "^7.21.0",
34
- "@craco/craco": "^7.1.0",
35
- "@mui/icons-material": "^6.4.3",
36
- "@mui/lab": "^6.0.0-beta.26",
37
- "@mui/material": "^6.4.3",
38
- "@mui/x-date-pickers": "^7.27.0",
39
- "@nvon/baseline": "^0.36.0",
40
- "@nvon/eslint-config": "^1.21.1",
41
- "@nvon/node-toolbox": "^0.20.4",
42
- "@rollup/plugin-babel": "^6.0.4",
43
- "@rollup/plugin-typescript": "^11.1.6",
44
- "@types/lodash-es": "^4.17.6",
45
- "@types/node": "^18.11.11",
46
- "@types/react-dom": ">=17.0.0",
47
- "@types/webpack": "^4.41.32",
48
- "cross-env": "^7.0.3",
49
- "dayjs": "^1.11.10",
50
- "i18next": "^22.4.10",
51
- "lodash-es": "^4.17.21",
52
- "npm": "^9.5.0",
53
- "react-hook-form": "^7.41.3",
54
- "react-i18next": "^11.18.5",
55
- "react-number-format": "^5.4.2",
56
- "react-scripts": "^5.0.1",
57
- "rimraf": "^3.0.2",
58
- "rollup": "^3.29.4",
59
- "rollup-plugin-sass": "^1.13.1",
60
- "typescript": "^4.9.5"
61
- },
62
- "peerDependencies": {
63
- "@mui/icons-material": "^6.4.3",
64
- "@mui/lab": "^6.0.0-beta.26",
65
- "@mui/material": "^6.4.3",
66
- "@mui/x-date-pickers": "^7.25.0",
67
- "@nvon/baseline": "^0.36.0",
68
- "dayjs": "^1.11.10",
69
- "i18next": "^22.4.10",
70
- "lodash-es": "^4.17.21",
71
- "react": ">=17.0.0",
72
- "react-dom": ">=17.0.0",
73
- "react-hook-form": "^7.41.3",
74
- "react-i18next": "^11.18.5",
75
- "react-number-format": "^5.4.2"
76
- },
77
- "browserslist": {
78
- "production": [
79
- ">0.2%",
80
- "not dead",
81
- "not op_mini all"
82
- ],
83
- "development": [
84
- "last 1 chrome version",
85
- "last 1 firefox version",
86
- "last 1 safari version"
87
- ]
88
- }
89
- }
1
+ {"name":"@nwon/react-mui-hook-form","version":"2.0.9","type":"module","keywords":["react","MUI","React Hook Form","forms","typescript"],"repository":{"type":"git","url":"https://gitlab.com/nwon-group/nwon-tooling/npm-packages/react-mui-hook-form"},"description":"Making react forms easy - A connection of MUI and React Hook Form","types":"dist/packageExports.d.ts","main":"dist/packageExports.js","cracoConfig":"craco.config.cjs","scripts":{},"files":["dist","readme.md","license"],"author":"NWON","license":"MIT","devDependencies":{"@babel/core":"^7.24.7","@babel/plugin-transform-runtime":"^7.24.7","@babel/preset-flow":"^7.24.7","@babel/preset-react":"^7.24.7","@babel/runtime":"^7.21.0","@craco/craco":"^7.1.0","@mui/icons-material":"^6.4.3","@mui/lab":"^6.0.0-beta.26","@mui/material":"^6.4.3","@mui/x-date-pickers":"^7.27.0","@nvon/baseline":"^0.33.0","@nvon/eslint-config":"^1.21.1","@nvon/node-toolbox":"^0.20.4","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-typescript":"^11.1.6","@types/lodash-es":"^4.17.6","@types/node":"^18.11.11","@types/react-dom":">=17.0.0","@types/webpack":"^4.41.32","cross-env":"^7.0.3","dayjs":"^1.11.10","i18next":"^22.4.10","lodash-es":"^4.17.21","npm":"^9.5.0","react-hook-form":"^7.41.3","react-i18next":"^11.18.5","react-number-format":"^5.4.2","react-scripts":"^5.0.1","rimraf":"^3.0.2","rollup":"^3.29.4","rollup-plugin-sass":"^1.13.1","typescript":"^4.9.5"},"peerDependencies":{"@mui/icons-material":"^6.4.3","@mui/lab":"^6.0.0-beta.26","@mui/material":"^6.4.3","@mui/x-date-pickers":"^7.25.0","@nvon/baseline":"^0.33.0","dayjs":"^1.11.10","i18next":">=22.4.10","lodash-es":"^4.17.21","react":">=17.0.0","react-dom":">=17.0.0","react-hook-form":"^7.41.3","react-i18next":">=11.18.5","react-number-format":"^5.4.2"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]}}