@react-form-builder/viewer-bundle 3.6.0 → 4.1.0
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/LICENSE +21 -0
- package/README.md +113 -2
- package/dist/index.iife.js +62 -136
- package/dist/index.umd.js +62 -136
- package/dist/rsuite-no-reset-rtl.min.css +1 -1
- package/dist/rsuite-no-reset.min.css +1 -1
- package/package.json +7 -5
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023-present Optimajet Limited
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -2,6 +2,117 @@
|
|
|
2
2
|
|
|
3
3
|
This library is part of the [React Form Builder](https://formengine.io/) project.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
# OptimaJet React Form Builder RSuite components library
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
This library is part of the [React Form Builder](https://formengine.io/) project.
|
|
8
|
+
|
|
9
|
+
This package contains visual components based on [React Suite](https://rsuitejs.com/). To learn how to use the package, see
|
|
10
|
+
our [documentation](https://formengine.io/documentation/).
|
|
11
|
+
|
|
12
|
+
## Key Features
|
|
13
|
+
|
|
14
|
+
- **UI-Agnostic Components:** Works seamlessly with any UI
|
|
15
|
+
library ([MUI](https://mui.com/), [Ant Design](https://ant.design/), [shadcn/ui](https://ui.shadcn.com/)
|
|
16
|
+
and [others](https://formengine.io/documentation/custom-components))
|
|
17
|
+
- **Pre-Built React Suite Integration:** Includes a ready-to-use component
|
|
18
|
+
library – [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite).
|
|
19
|
+
- Framework Support:
|
|
20
|
+
- **Next.js Integration**: Seamlessly works with [Next.js](https://formengine.io/documentation/usage-with-nextjs).
|
|
21
|
+
- **Remix Compatibility**: Fully supports [Remix](https://formengine.io/documentation/usage-with-remix).
|
|
22
|
+
- **Framework-Agnostic**: Can also be used [without any framework](https://formengine.io/documentation/installation#cdn) via CDN.
|
|
23
|
+
- **Multi-Database Support:** Compatible with MySQL, PostgreSQL, MongoDB, SQLite, and more.
|
|
24
|
+
- **Built-in Validation with Zod:** Includes pre-configured validation rules powered by [Zod](https://github.com/colinhacks/zod).
|
|
25
|
+
- **Extensible Validation Support:** Works
|
|
26
|
+
with [Yup](https://github.com/jquense/yup), [AJV](https://github.com/ajv-validator/ajv), [Zod](https://github.com/colinhacks/zod),
|
|
27
|
+
[Superstruct](https://github.com/ianstormtaylor/superstruct),
|
|
28
|
+
[Joi](https://github.com/hapijs/joi), and other custom validation libraries.
|
|
29
|
+
- **Responsive Layouts**: Build forms that automatically [adapt](https://formengine.io/documentation/adaptive-layout) to all screen sizes.
|
|
30
|
+
- **Custom Actions**: Enhance forms with interactive logic through [custom JavaScript code](https://formengine.io/documentation/actions).
|
|
31
|
+
- **Dynamic Properties**: Implement real-time component changes with [MobX](https://github.com/mobxjs/mobx)-powered reactive properties.
|
|
32
|
+
- **Flexible Storage Options**:
|
|
33
|
+
- Store complete form definitions as JSON.
|
|
34
|
+
- Programmatically generate forms [via code](https://formengine.io/documentation/building-forms-via-code).
|
|
35
|
+
|
|
36
|
+
## Install
|
|
37
|
+
|
|
38
|
+
No installation required. Just include the script via CDN or host it on your own server.
|
|
39
|
+
|
|
40
|
+
## Quickstart
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<!DOCTYPE html>
|
|
44
|
+
<html lang="en">
|
|
45
|
+
<head>
|
|
46
|
+
<meta charset="UTF-8">
|
|
47
|
+
<title>FormEngine bundle embedding example</title>
|
|
48
|
+
<script src="https://unpkg.com/@react-form-builder/viewer-bundle@latest/dist/index.iife.js" async defer></script>
|
|
49
|
+
</head>
|
|
50
|
+
<body style="margin: 20px">
|
|
51
|
+
<div id="viewer"></div>
|
|
52
|
+
|
|
53
|
+
<script type="text/javascript">
|
|
54
|
+
window.onload = function () {
|
|
55
|
+
const {buildForm, renderFormViewer, rSuiteComponents} = window.FormEngineViewerBundle;
|
|
56
|
+
|
|
57
|
+
const simpleForm = buildForm({errorType: 'RsErrorMessage'})
|
|
58
|
+
.component('container', 'RsContainer')
|
|
59
|
+
.style({flexDirection: 'row'})
|
|
60
|
+
.children((builder) =>
|
|
61
|
+
builder
|
|
62
|
+
.component('firstName', 'RsInput')
|
|
63
|
+
.prop('placeholder', 'Enter your first name')
|
|
64
|
+
.prop('label', 'First Name')
|
|
65
|
+
.validation('required')
|
|
66
|
+
|
|
67
|
+
.component('lastName', 'RsInput')
|
|
68
|
+
.prop('placeholder', 'Enter your last name')
|
|
69
|
+
.prop('label', 'Last Name')
|
|
70
|
+
.validation('required')
|
|
71
|
+
)
|
|
72
|
+
|
|
73
|
+
.component('birthDate', 'RsDatePicker')
|
|
74
|
+
.prop('label', 'Birth Date')
|
|
75
|
+
.prop('oneTap', true)
|
|
76
|
+
.validation('min').args({value: '1900-01-07T12:25:37.000Z'})
|
|
77
|
+
|
|
78
|
+
.component('submit', 'RsButton')
|
|
79
|
+
.prop('children', 'Submit')
|
|
80
|
+
.prop('color', 'blue')
|
|
81
|
+
.prop('appearance', 'primary')
|
|
82
|
+
.event('onClick')
|
|
83
|
+
.commonAction('validate').args({failOnError: true})
|
|
84
|
+
.customAction('onSubmit')
|
|
85
|
+
.json()
|
|
86
|
+
|
|
87
|
+
const props = {
|
|
88
|
+
view: rSuiteComponents.viewWithCss,
|
|
89
|
+
getForm: () => simpleForm,
|
|
90
|
+
actions: {
|
|
91
|
+
onSubmit: (e) => {
|
|
92
|
+
// submit the form to the backend
|
|
93
|
+
alert('Form data: ' + JSON.stringify(e.data))
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
window.viewerRoot = renderFormViewer('viewer', props)
|
|
99
|
+
}
|
|
100
|
+
</script>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Resources
|
|
106
|
+
|
|
107
|
+
- [Website](https://formengine.io/)
|
|
108
|
+
- [Documentation](https://formengine.io/documentation)
|
|
109
|
+
- [Demo](https://demo.formengine.io/)
|
|
110
|
+
|
|
111
|
+
## Licensing
|
|
112
|
+
|
|
113
|
+
This library is distributed under the MIT license.
|
|
114
|
+
|
|
115
|
+
Important: Some features and modules (e.g., Form Designer) are only available under a commercial license.
|
|
116
|
+
|
|
117
|
+
If you are interested in using the full version of the product, please [contact us](mailto:sales@optimajet.com) or visit
|
|
118
|
+
the [product website](https://formengine.io/pricing) for licensing information.
|