formhell 1.0.2 → 1.0.3
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.
- package/README.md +59 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
# formhell
|
|
1
|
+
# formhell <img src="favicon.svg" alt="FormHell icon" width="32" height="32" />
|
|
2
2
|
|
|
3
3
|
Finally escape form hell with FormHell
|
|
4
4
|
|
|
5
5
|
Incredibly robust yet remarkably simple JSON Schema based forms for React.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
7
|
## Why This Library Exists
|
|
10
8
|
|
|
11
9
|
I wrote this library out of pure JSON Schema fatigue.
|
|
@@ -42,6 +40,7 @@ Here's a quick comparison for using FormHell instead of some other headache libr
|
|
|
42
40
|
| Widget overrides by pointer and type | Yes | Usually type-only or custom plumbing |
|
|
43
41
|
| Defaults strategy control | Yes (`all` / `required-only`) | Often limited and super broken |
|
|
44
42
|
| Validation feedback on every change | Yes | Usually yes |
|
|
43
|
+
| Optional MUI or custom theming | Yes | Usually yes |
|
|
45
44
|
|
|
46
45
|
If your form requirements include deep JSON Schema support and your timeline includes "this quarter," this matrix is the point.
|
|
47
46
|
|
|
@@ -66,6 +65,63 @@ import { SchemaForm, SchemaBuilder, SchemaBuilderHelper } from "formhell";
|
|
|
66
65
|
import "formhell/styles.css";
|
|
67
66
|
```
|
|
68
67
|
|
|
68
|
+
## Theming
|
|
69
|
+
|
|
70
|
+
FormHell does not depend on Material UI or any other styling framework. Importing `formhell/styles.css` gives the components a complete default theme, so the library works without a provider or theme package.
|
|
71
|
+
|
|
72
|
+
The components are also designed to participate in a host application's theme. Their styles use CSS custom properties with fallbacks, which means an application can override the FormHell variables at any scope that contains a `SchemaForm`, `SchemaBuilder`, or `SchemaBuilderHelper`:
|
|
73
|
+
|
|
74
|
+
```css
|
|
75
|
+
.checkout-form {
|
|
76
|
+
--raf-color-border: #6b7280;
|
|
77
|
+
--raf-color-border-focus: #0f766e;
|
|
78
|
+
--raf-color-label: #102a43;
|
|
79
|
+
--raf-color-muted: #52657a;
|
|
80
|
+
--raf-color-surface: #ffffff;
|
|
81
|
+
--raf-color-surface-alt: #f3f6fb;
|
|
82
|
+
--raf-color-danger: #b42318;
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Optional Material UI integration
|
|
87
|
+
|
|
88
|
+
When a Material UI theme is present, FormHell automatically consumes MUI's generated CSS variables. Create the theme with `cssVariables: true` and place the FormHell components inside the `ThemeProvider`:
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
|
|
92
|
+
import { SchemaForm } from "formhell";
|
|
93
|
+
import "formhell/styles.css";
|
|
94
|
+
|
|
95
|
+
const theme = createTheme({
|
|
96
|
+
cssVariables: true,
|
|
97
|
+
palette: {
|
|
98
|
+
primary: { main: "#1976d2" },
|
|
99
|
+
secondary: { main: "#526d82" },
|
|
100
|
+
error: { main: "#b42318" },
|
|
101
|
+
background: { default: "#f3f6fb", paper: "#ffffff" },
|
|
102
|
+
text: { primary: "#172b4d", secondary: "#52657a" }
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
<ThemeProvider theme={theme}>
|
|
107
|
+
<CssBaseline />
|
|
108
|
+
<SchemaForm schema={schema} />
|
|
109
|
+
</ThemeProvider>;
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
FormHell maps the available MUI variables to its component roles:
|
|
113
|
+
|
|
114
|
+
- `background.paper` controls form inputs, builder controls, modals, and helper surfaces.
|
|
115
|
+
- `background.default` controls nested objects, builder sections, typeahead menus, and previews.
|
|
116
|
+
- `text.primary` controls labels, headings, input text, and body content.
|
|
117
|
+
- `text.secondary` controls optional labels, summaries, muted copy, and empty states.
|
|
118
|
+
- `divider` controls borders.
|
|
119
|
+
- `primary.main` controls primary actions, focus rings, selected type buttons, and links.
|
|
120
|
+
- `secondary.main` controls secondary actions such as Add Type, info buttons, and tooltip Close buttons.
|
|
121
|
+
- `error.main` controls danger actions, validation errors, and error states.
|
|
122
|
+
|
|
123
|
+
MUI is intentionally not listed as a FormHell dependency. Applications that use another theme system can provide the same CSS custom properties, and applications without a theme continue using FormHell's built-in fallbacks.
|
|
124
|
+
|
|
69
125
|
## Exported Components At A Glance
|
|
70
126
|
|
|
71
127
|
- `SchemaForm`: Render data-entry forms from JSON Schema.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "formhell",
|
|
3
3
|
"author": "Ryan Rutkin",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.3",
|
|
5
5
|
"description": "React JSON Schema form and schema builder library with draft 2020-12 support, robust $ref resolution, and strong defaults handling",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.cjs",
|