@bigbinary/neeto-form-frontend 1.2.6 → 1.2.8
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 +77 -273
- package/dist/index.cjs.js +14070 -21395
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +14130 -21455
- package/dist/index.js.map +1 -1
- package/dist/main.css +2 -1
- package/dist/main.css.map +1 -0
- package/package.json +143 -89
- package/types.d.ts +3 -0
- package/index.d.ts +0 -268
- /package/{src → app/javascript/src}/translations/de.json +0 -0
- /package/{src → app/javascript/src}/translations/en.json +0 -0
package/README.md
CHANGED
|
@@ -1,306 +1,110 @@
|
|
|
1
|
-
#
|
|
1
|
+
# neeto-form-nano
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
products.
|
|
3
|
+
The `neeto-form-nano` allows us to build forms within neeto applications. This nano exports `@bigbinary/neeto-form-frontend` NPM package and `neeto-form-engine` Rails engine.
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
# Contents
|
|
6
|
+
1. [Development with Host Application](#development-with-host-application)
|
|
7
|
+
- [Engine](#engine)
|
|
8
|
+
- [Frontend package](#frontend-package)
|
|
9
|
+
- [Installation](#installation-1)
|
|
10
|
+
- [Usage](#usage)
|
|
11
|
+
2. [Instructions for Publishing](#instructions-for-publishing)
|
|
7
12
|
|
|
8
|
-
|
|
9
|
-
yarn add @bigbinary/neeto-form-frontend
|
|
10
|
-
```
|
|
13
|
+
# Development with Host Application
|
|
11
14
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
## Engine
|
|
16
|
+
The engine adds setup for form on backend and allows us to attach forms to any model. It also stores submissions.
|
|
17
|
+
|
|
18
|
+
### Installation
|
|
15
19
|
|
|
16
|
-
|
|
17
|
-
yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1 formik@2.2.9 @bigbinary/neeto-commons-frontend
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Import stylesheet from the following location:
|
|
21
|
-
|
|
22
|
-
```scss
|
|
23
|
-
@import "@bigbinary/neeto-form-frontend/dist/main.css";
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
This package relies on the host project's tailwind configuration. So add
|
|
27
|
-
neeto-form-frontend to your project's tailwind.config.js file:
|
|
28
|
-
|
|
29
|
-
```js
|
|
30
|
-
module.exports = {
|
|
31
|
-
purge: {
|
|
32
|
-
content: [
|
|
33
|
-
// ... other content directories
|
|
34
|
-
"./node_modules/@bigbinary/neeto-form-frontend/**/*.js",
|
|
35
|
-
],
|
|
36
|
-
},
|
|
37
|
-
// ... other tailwind config options
|
|
38
|
-
};
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
Add `NeetoFormProvider` to the root of your application:
|
|
42
|
-
|
|
43
|
-
```jsx
|
|
44
|
-
import React from "react";
|
|
45
|
-
|
|
46
|
-
import { NeetoFormProvider } from "@bigbinary/neeto-form-frontend";
|
|
47
|
-
|
|
48
|
-
const App = () => {
|
|
49
|
-
return (
|
|
50
|
-
<>
|
|
51
|
-
<NeetoFormProvider>{/* Other children */}</NeetoFormProvider>
|
|
52
|
-
</>
|
|
53
|
-
);
|
|
54
|
-
};
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Components
|
|
58
|
-
|
|
59
|
-
`BuildForm` component is used to render a form builder.
|
|
60
|
-
|
|
61
|
-
```js
|
|
62
|
-
import { BuildForm } from "@bigbinary/neeto-form-frontend";
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
| prop | type | description |
|
|
66
|
-
| ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
67
|
-
| `id` | `string` | Form id |
|
|
68
|
-
| `onUpdate` | `function` | Callback for form update |
|
|
69
|
-
| `buildRequestArgs` | `object` | Arguments for build request |
|
|
70
|
-
| `showAddQuestionDivider` | `boolean` | To show add question divider |
|
|
71
|
-
| `nonRemovableFields` | `string[]` | Field kinds that cant be deleted from a form. Accepts array of kinds: `name`, `email`, `phone`, `rating`, `checkbox`, `dropdown` |
|
|
72
|
-
| `submitButtonProps` | `object` | Props for submit button |
|
|
73
|
-
| `cancelButtonProps` | `object` | Props for cancel button |
|
|
74
|
-
| `requiredFields` | `string[]` | Fields that are required. Provided fields will be treated as required by default in the External form, the checkbox for toggling `required` will be hidden for the fields. Accepts array of kinds: `name`, `email`, `phone`, `rating`, `checkbox`, `dropdown` |
|
|
75
|
-
| `questionKinds` | `object[]` | To override default question kinds |
|
|
76
|
-
| `isKindAlreadyActive` | `function` | To override the logic for equality checking of question kinds. The function will receive `activeQuestions` and `kind` as arguments |
|
|
77
|
-
| `getActiveKindDetails` | `function` | To override the logic for extracting the details of the specified item. The function will receive `allQuestionKinds` and `item` as arguments and returns `kind`, `label`, `FieldComponent`, `FieldIcon` and `isSingular` props for the specified `item` |
|
|
78
|
-
| `showLoader` | `boolean` | To specify whether we need to show a page loader while loading questions. If specified as `true` a page loader will be displayed otherwise placeholder data will be shown while loading questions. The default value will be `false` |
|
|
79
|
-
| `kindUniqueOn` | `string[]` | To specify the prop used for uniquely identifying each question kind. Accepts the path of the prop as a `string[]`. The default value will be `["type"]` |
|
|
80
|
-
| `isFieldRequired` | `(item: Item) => boolean;` | To specify whether a question is required or not. The function will receive `item` as an argument and returns a boolean value. Fields that return `true` will be treated as required by default in the External form |
|
|
81
|
-
| `isFieldLabelDisabled` | `(item: Item) => boolean;` | To specify whether a question label input is disabled or not. The function will receive `item` as an argument and returns a boolean value. |
|
|
82
|
-
| `isQuestionDeletable` | `(item: Item) => boolean;` | To specify whether a question is deletable or not. The function will receive `item` as an argument and returns a boolean value. Fields that return `true` cannot be removed from a form. |
|
|
83
|
-
| `allowAdditionalGuests` | `boolean` | To specify whether we need to allow additional guests input field in the form. If specified as `true` a checkbox will be displayed in the form to allow additional guests. The default value will be `false`. (neetoCal specific) |
|
|
84
|
-
| `disabledAddButtonTooltipProps` | `object` | To specify the custom tooltip for disabled button when there are no more questions to add. By default the tooltip will be `No more question fields to add` |
|
|
85
|
-
|
|
86
|
-
`ExternalForm` component is used to render a form.
|
|
87
|
-
|
|
88
|
-
```js
|
|
89
|
-
import { ExternalForm } from "@bigbinary/neeto-form-frontend";
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
| prop | type | description |
|
|
93
|
-
| --------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
94
|
-
| `formId` | `string` | Form id |
|
|
95
|
-
| `customSubmitHandler` | `function` | Custom submit handler to be called instead of internal submit handlers |
|
|
96
|
-
| `onBeforeSubmit` | `(responses, formikValues) => updatedResponses` | Callback for before form submit, if the form responses needs to be updated, return the updated responses from this callback. The updated responses will be sent to the server. If the callback doesn't return anythong or returns a falsy value, the form will submit with the original responses. |
|
|
97
|
-
| `onCreateSuccess` | `function` | Callback for form creation success |
|
|
98
|
-
| `showTitle` | `boolean` | To show form title |
|
|
99
|
-
| `submitRequestArgs` | `object` | Arguments for form submit request payload |
|
|
100
|
-
| `footer` | `React.Component` | To render a Footer Component |
|
|
101
|
-
| `submitButtonProps` | `object` | Props for submit button |
|
|
102
|
-
| `cancelButtonProps` | `object` | Props for cancel button |
|
|
103
|
-
| `resetButtonProps` | `object` | Props for reset button |
|
|
104
|
-
| `showPrefixIcons` | `boolean` | To show prefix icons in input fields |
|
|
105
|
-
| `displayThankYou` | `boolean` | To show thank you message after form submit |
|
|
106
|
-
| `className` | `string` | To apply custom class to the form wrapper |
|
|
107
|
-
| `submissionId` | `string` | To set submission id for updating the form |
|
|
108
|
-
| `preview` | `boolean` | To show form in preview mode |
|
|
109
|
-
| `preserveValues` | `boolean` | To preserve form values in localStorage |
|
|
110
|
-
| `formTitle` | `string` | To set form title |
|
|
111
|
-
| `titleProps` | `object` | To set props for form title |
|
|
112
|
-
| `clearValuesOnSubmit` | `boolean` | To clear local storage values on submit |
|
|
113
|
-
| `clearValuesOnReset` | `boolean` | To clear local storage values on reset |
|
|
114
|
-
| `formDomProps` | `object` | To set props for form element |
|
|
115
|
-
| `initialValues` | `object` | To set initial values for form |
|
|
116
|
-
| `editorProps` | `object` | To set neetoEditor props for `rich_text` input field |
|
|
117
|
-
| `onChange` | `function` | Callback for form field values change |
|
|
118
|
-
| `customValidator` | `(question) => Yup.Schema or null` | Custom validator for form fields, it should return an yup validation schema based on the question proeprties. To make use of the default validation for a question type, return `null` |
|
|
119
|
-
|
|
120
|
-
`Submission` component is used to render a form result.
|
|
121
|
-
|
|
122
|
-
```js
|
|
123
|
-
import { Submission } from "@bigbinary/neeto-form-frontend";
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
| prop | type | description |
|
|
127
|
-
| -------------------- | -------- | --------------------------------------- |
|
|
128
|
-
| `formId` | `string` | Form id |
|
|
129
|
-
| `submissionId` | `string` | Submission id |
|
|
130
|
-
| `className` | `string` | To apply custom class component wrapper |
|
|
131
|
-
| `questionLabelProps` | `object` | To override props for question label |
|
|
132
|
-
| `answerProps` | `object` | To override props for answer text |
|
|
133
|
-
|
|
134
|
-
`Fields` component provides access to all the components used in building forms.
|
|
135
|
-
|
|
136
|
-
```js
|
|
137
|
-
import { Fields } from "@bigbinary/neeto-form-frontend";
|
|
138
|
-
|
|
139
|
-
const {
|
|
140
|
-
Email,
|
|
141
|
-
Dropdown,
|
|
142
|
-
ShortText,
|
|
143
|
-
LongText,
|
|
144
|
-
MultipleChoice,
|
|
145
|
-
SingleChoice,
|
|
146
|
-
Phone,
|
|
147
|
-
Rating,
|
|
148
|
-
Terms,
|
|
149
|
-
StarRating,
|
|
150
|
-
} = Fields;
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
Following components are currently available:
|
|
154
|
-
|
|
155
|
-
- `Email`
|
|
156
|
-
- `Dropdown`
|
|
157
|
-
- `ShortText`
|
|
158
|
-
- `LongText`
|
|
159
|
-
- `MultipleChoice`
|
|
160
|
-
- `SingleChoice`
|
|
161
|
-
- `Phone`
|
|
162
|
-
- `Rating`
|
|
163
|
-
- `Terms`
|
|
164
|
-
- `StarRating`
|
|
165
|
-
- `Additional guests (neetoCal specific)`
|
|
166
|
-
- `Condition`
|
|
167
|
-
- `Integer`
|
|
168
|
-
- `Decimal`
|
|
169
|
-
|
|
170
|
-
## Hooks
|
|
171
|
-
|
|
172
|
-
`useBuildFormState` hook is used to get the form state.
|
|
173
|
-
|
|
174
|
-
```js
|
|
175
|
-
import { useBuildFormState, BuildForm } from "@bigbinary/neeto-form-frontend";
|
|
176
|
-
|
|
177
|
-
const FormBuilder = () => {
|
|
178
|
-
const {
|
|
179
|
-
values,
|
|
180
|
-
dirty,
|
|
181
|
-
isSubmitting,
|
|
182
|
-
isValid,
|
|
183
|
-
submitForm,
|
|
184
|
-
resetForm,
|
|
185
|
-
errors,
|
|
186
|
-
} = useBuildFormState();
|
|
187
|
-
|
|
188
|
-
return <BuildForm />;
|
|
189
|
-
};
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
`useFormSubmission` hook is used to fetch the form submission data.
|
|
193
|
-
|
|
194
|
-
```js
|
|
195
|
-
import { useFormSubmission } from "@bigbinary/neeto-form-frontend";
|
|
196
|
-
|
|
197
|
-
const Component = () => {
|
|
198
|
-
const { submission, isLoading } = useFormSubmission({
|
|
199
|
-
formId: "form-id",
|
|
200
|
-
submissionId: "submission-id",
|
|
201
|
-
});
|
|
202
|
-
|
|
203
|
-
return <></>;
|
|
204
|
-
};
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
`useForms` hook is used to fetch all the forms.
|
|
208
|
-
|
|
209
|
-
`useForm` hook is used to fetch all details of a form.
|
|
210
|
-
|
|
211
|
-
`useCreateForm` hooks is used to create a form.
|
|
20
|
+
1. Add this line to your application's Gemfile:
|
|
212
21
|
|
|
213
|
-
|
|
22
|
+
```ruby
|
|
23
|
+
source "NEETO_GEM_SERVER_URL" do
|
|
24
|
+
# ...existing gems
|
|
214
25
|
|
|
215
|
-
|
|
26
|
+
gem 'neeto-form-engine'
|
|
27
|
+
end
|
|
28
|
+
```
|
|
216
29
|
|
|
217
|
-
|
|
30
|
+
2. And then execute:
|
|
218
31
|
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
useForm,
|
|
223
|
-
useCreateForm,
|
|
224
|
-
useUpdateForm,
|
|
225
|
-
useDeleteForm,
|
|
226
|
-
} from "@bigbinary/neeto-form-frontend";
|
|
32
|
+
```shell
|
|
33
|
+
bundle install
|
|
34
|
+
```
|
|
227
35
|
|
|
228
|
-
|
|
229
|
-
const { data: forms, isLoading } = useForms();
|
|
230
|
-
const { data: form, isLoading } = useForm({ formId: "form-id" });
|
|
36
|
+
3. Install the migrations
|
|
231
37
|
|
|
232
|
-
|
|
233
|
-
|
|
38
|
+
```shell
|
|
39
|
+
bundle exec rails neeto_form_engine:install:migrations
|
|
40
|
+
```
|
|
234
41
|
|
|
235
|
-
|
|
236
|
-
updateForm({ id: "form-id", values: payload });
|
|
42
|
+
4. Run the migrations
|
|
237
43
|
|
|
238
|
-
|
|
239
|
-
|
|
44
|
+
```shell
|
|
45
|
+
bundle exec rails db:migrate
|
|
46
|
+
```
|
|
240
47
|
|
|
241
|
-
|
|
242
|
-
};
|
|
243
|
-
```
|
|
48
|
+
5. Add this line to your application's `config/routes.rb` file (replace `at` to your desired route):
|
|
244
49
|
|
|
245
|
-
|
|
246
|
-
|
|
50
|
+
```ruby
|
|
51
|
+
mount NeetoFormEngine::Engine, at: "/neeto_form_engine"
|
|
52
|
+
```
|
|
247
53
|
|
|
248
|
-
|
|
54
|
+
6. Create file `neeto_form_engine.rb` under `config/initializers` to provide the `owner_class` information
|
|
249
55
|
|
|
250
|
-
|
|
251
|
-
|
|
56
|
+
```ruby
|
|
57
|
+
NeetoFormEngine.owner_class = "Organization"
|
|
58
|
+
```
|
|
252
59
|
|
|
253
|
-
|
|
60
|
+
7. Configure models to add below association to the provided owner class
|
|
254
61
|
|
|
255
|
-
|
|
62
|
+
```ruby
|
|
63
|
+
has_many :forms, class_name: "::NeetoFormEngine::Form", as: :owner
|
|
64
|
+
```
|
|
256
65
|
|
|
257
|
-
|
|
258
|
-
yarn install
|
|
259
|
-
```
|
|
66
|
+
8. Configure models to add below association to scope submission records (optional)
|
|
260
67
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
68
|
+
```ruby
|
|
69
|
+
has_one :submission, class_name: "::NeetoFormEngine::Submission", as: :record
|
|
70
|
+
```
|
|
264
71
|
|
|
265
|
-
|
|
72
|
+
9. Configure model to add below association to attach form (optional)
|
|
266
73
|
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
```
|
|
74
|
+
```ruby
|
|
75
|
+
has_one :form, class_name: "::NeetoFormEngine::Form", as: :attachable
|
|
76
|
+
```
|
|
270
77
|
|
|
271
|
-
|
|
78
|
+
## Frontend package
|
|
79
|
+
The frontend package allows us to create forms across neeto products.
|
|
272
80
|
|
|
273
|
-
|
|
81
|
+
### Installation
|
|
274
82
|
|
|
275
|
-
|
|
83
|
+
1. Install the NPM package
|
|
84
|
+
```zsh
|
|
85
|
+
yarn add @bigbinary/neeto-form-frontend
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
2. The frontend package has a few peer dependencies that are required for
|
|
89
|
+
the proper functioning of the package. Install all the peer dependencies using
|
|
90
|
+
the below command:
|
|
276
91
|
|
|
277
|
-
```zsh
|
|
278
|
-
|
|
279
|
-
```
|
|
92
|
+
```zsh
|
|
93
|
+
yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1 formik@2.2.9 @bigbinary/neeto-commons-frontend
|
|
94
|
+
```
|
|
280
95
|
|
|
281
|
-
|
|
96
|
+
3. Import stylesheet from the following location:
|
|
282
97
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
label is used for breaking changes. You can checkout the
|
|
287
|
-
`Create and publish releases` workflow in GitHub Actions to get a live update.
|
|
98
|
+
```scss
|
|
99
|
+
@import "@bigbinary/neeto-form-frontend/dist/main.css";
|
|
100
|
+
```
|
|
288
101
|
|
|
289
|
-
|
|
290
|
-
For that first you need to create a PR to update the version number in the
|
|
291
|
-
`package.json` file and merge it to the `main` branch. After merging the PR, you
|
|
292
|
-
need to create a
|
|
293
|
-
[new github release](https://github.com/bigbinary/neeto-form-frontend/releases/new)
|
|
294
|
-
from main branch. Whenever a new release is created with a new version number,
|
|
295
|
-
the github actions will automatically publish the built package to npm. You can
|
|
296
|
-
checkout the `Publish to npm` workflow in GitHub Actions to get a live update.
|
|
102
|
+
### Usage
|
|
297
103
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
https://youtu.be/QBiYGP0Rhe0
|
|
104
|
+
You can learn more about the usage here:
|
|
105
|
+
1. [Components](./docs/frontend/components.md)
|
|
106
|
+
2. [Hooks](./docs/frontend/hooks.md)
|
|
302
107
|
|
|
303
|
-
|
|
108
|
+
# Instructions for Publishing
|
|
304
109
|
|
|
305
|
-
|
|
306
|
-
- [neetoCRM](https://github.com/bigbinary/neeto-crm-web)
|
|
110
|
+
Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.
|