@bigbinary/neeto-form-frontend 1.2.5 → 1.2.7
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 +153 -81
- package/dist/index.cjs.js +14084 -21409
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +14144 -21469
- package/dist/index.js.map +1 -1
- package/dist/main.css +2 -1
- package/dist/main.css.map +1 -0
- package/package.json +142 -88
- 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,9 +1,16 @@
|
|
|
1
|
-
#
|
|
1
|
+
# neeto-form-nano
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
products.
|
|
3
|
+
## Publish instructions
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
[Building and releasing](./docs/building-and-releasing.md)
|
|
6
|
+
|
|
7
|
+
[Engine and package installation](./docs/engine-and-package-installation.md)
|
|
8
|
+
|
|
9
|
+
## @bigbinary/neeto-form-frontend
|
|
10
|
+
|
|
11
|
+
neetoFormFrontend is the library that manages forms across neeto products.
|
|
12
|
+
|
|
13
|
+
### Installation
|
|
7
14
|
|
|
8
15
|
```zsh
|
|
9
16
|
yarn add @bigbinary/neeto-form-frontend
|
|
@@ -38,23 +45,7 @@ module.exports = {
|
|
|
38
45
|
};
|
|
39
46
|
```
|
|
40
47
|
|
|
41
|
-
|
|
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
|
|
48
|
+
### Components
|
|
58
49
|
|
|
59
50
|
`BuildForm` component is used to render a form builder.
|
|
60
51
|
|
|
@@ -62,26 +53,26 @@ const App = () => {
|
|
|
62
53
|
import { BuildForm } from "@bigbinary/neeto-form-frontend";
|
|
63
54
|
```
|
|
64
55
|
|
|
65
|
-
| prop
|
|
66
|
-
|
|
|
67
|
-
| `id`
|
|
68
|
-
| `onUpdate`
|
|
69
|
-
| `buildRequestArgs`
|
|
70
|
-
| `showAddQuestionDivider`
|
|
71
|
-
| `nonRemovableFields`
|
|
72
|
-
| `submitButtonProps`
|
|
73
|
-
| `cancelButtonProps`
|
|
74
|
-
| `requiredFields`
|
|
75
|
-
| `questionKinds`
|
|
76
|
-
| `isKindAlreadyActive`
|
|
77
|
-
| `getActiveKindDetails`
|
|
78
|
-
| `showLoader`
|
|
79
|
-
| `kindUniqueOn`
|
|
80
|
-
| `isFieldRequired`
|
|
81
|
-
| `isFieldLabelDisabled`
|
|
82
|
-
| `isQuestionDeletable`
|
|
83
|
-
| `allowAdditionalGuests`
|
|
84
|
-
| `disabledAddButtonTooltipProps`
|
|
56
|
+
| prop | type | description |
|
|
57
|
+
| ------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
58
|
+
| `id` | `string` | Form id |
|
|
59
|
+
| `onUpdate` | `function` | Callback for form update |
|
|
60
|
+
| `buildRequestArgs` | `object` | Arguments for build request |
|
|
61
|
+
| `showAddQuestionDivider` | `boolean` | To show add question divider |
|
|
62
|
+
| `nonRemovableFields` | `string[]` | Field kinds that cant be deleted from a form. Accepts array of kinds: `name`, `email`, `phone`, `rating`, `checkbox`, `dropdown` |
|
|
63
|
+
| `submitButtonProps` | `object` | Props for submit button |
|
|
64
|
+
| `cancelButtonProps` | `object` | Props for cancel button |
|
|
65
|
+
| `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` |
|
|
66
|
+
| `questionKinds` | `object[]` | To override default question kinds |
|
|
67
|
+
| `isKindAlreadyActive` | `function` | To override the logic for equality checking of question kinds. The function will receive `activeQuestions` and `kind` as arguments |
|
|
68
|
+
| `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` |
|
|
69
|
+
| `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` |
|
|
70
|
+
| `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"]` |
|
|
71
|
+
| `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 |
|
|
72
|
+
| `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. |
|
|
73
|
+
| `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. |
|
|
74
|
+
| `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) |
|
|
75
|
+
| `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
76
|
|
|
86
77
|
`ExternalForm` component is used to render a form.
|
|
87
78
|
|
|
@@ -167,7 +158,7 @@ Following components are currently available:
|
|
|
167
158
|
- `Integer`
|
|
168
159
|
- `Decimal`
|
|
169
160
|
|
|
170
|
-
|
|
161
|
+
### Hooks
|
|
171
162
|
|
|
172
163
|
`useBuildFormState` hook is used to get the form state.
|
|
173
164
|
|
|
@@ -250,57 +241,138 @@ _`useForm` & `useForms` uses react-query's useQuery hook under the hood._
|
|
|
250
241
|
_We can pass in extra options supported by react-query to these hooks. We can
|
|
251
242
|
also destructure all react-query supported props from the response._
|
|
252
243
|
|
|
253
|
-
##
|
|
244
|
+
## neetoFormEngine
|
|
254
245
|
|
|
255
|
-
|
|
246
|
+
neetoForm engine adds features to build form and attach it to any model. It will
|
|
247
|
+
store submissions as well.
|
|
256
248
|
|
|
257
|
-
|
|
258
|
-
yarn install
|
|
259
|
-
```
|
|
249
|
+
### Installation
|
|
260
250
|
|
|
261
|
-
|
|
262
|
-
[neeto-form-engine](https://github.com/bigbinary/neeto-form-engine) in the host
|
|
263
|
-
application.
|
|
251
|
+
1. Add this line to your application's Gemfile:
|
|
264
252
|
|
|
265
|
-
|
|
253
|
+
```ruby
|
|
254
|
+
gem "neeto-form-engine", git: "https://github.com/bigbinary/neeto-form-engine.git", branch: "master"
|
|
255
|
+
```
|
|
266
256
|
|
|
267
|
-
|
|
268
|
-
yarn build
|
|
269
|
-
```
|
|
257
|
+
2. And then execute:
|
|
270
258
|
|
|
271
|
-
|
|
259
|
+
```shell
|
|
260
|
+
bundle install
|
|
261
|
+
```
|
|
272
262
|
|
|
273
|
-
|
|
263
|
+
3. Install the migrations
|
|
274
264
|
|
|
275
|
-
|
|
265
|
+
```shell
|
|
266
|
+
bin/rails neeto_form_engine:install:migrations
|
|
267
|
+
```
|
|
276
268
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
```
|
|
269
|
+
4. Run the migrations
|
|
270
|
+
|
|
271
|
+
```shell
|
|
272
|
+
rake db:migrate
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
5. Create file `neeto_form_engine.rb` under `config/initializers` to provide the
|
|
276
|
+
`owner_class` information
|
|
277
|
+
|
|
278
|
+
```ruby
|
|
279
|
+
NeetoFormEngine.owner_class = "Organization"
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
6. Configure models to add below association to the provided owner class
|
|
283
|
+
|
|
284
|
+
```ruby
|
|
285
|
+
has_many :forms, class_name: "::NeetoFormEngine::Form", as: :owner
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
7. Configure models to add below association to scope submission records
|
|
289
|
+
(optional)
|
|
290
|
+
|
|
291
|
+
```ruby
|
|
292
|
+
has_one :submission, class_name: "::NeetoFormEngine::Submission", as: :record
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
8. Configure model to add below association to attach form (optional)
|
|
296
|
+
|
|
297
|
+
```ruby
|
|
298
|
+
has_one :form, class_name: "::NeetoFormEngine::Form", as: :attachable
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
9. Add this line to your application's `config/routes.rb` file (replace `at` to
|
|
302
|
+
your desired route):
|
|
303
|
+
|
|
304
|
+
```ruby
|
|
305
|
+
mount NeetoFormEngine::Engine, at: "/form"
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
10. Start your application and navigate to `/form` (or the route you gave on
|
|
309
|
+
step 3) to manage your forms.
|
|
310
|
+
|
|
311
|
+
### Development
|
|
312
|
+
|
|
313
|
+
1. Add this line to your application's Gemfile (replace the path to the local
|
|
314
|
+
copy of neetoForm' engine):
|
|
315
|
+
|
|
316
|
+
```ruby
|
|
317
|
+
gem "neeto-form-engine", path: "../neeto-form-engine"
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
2. And then execute:
|
|
321
|
+
|
|
322
|
+
```shell
|
|
323
|
+
bundle install
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
3. Install the migrations
|
|
327
|
+
|
|
328
|
+
```shell
|
|
329
|
+
bin/rails neeto_form:install:migrations
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
4. Run the migrations
|
|
333
|
+
|
|
334
|
+
```shell
|
|
335
|
+
rake db:migrate
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
5. Create file `neeto_form.rb` under `config/initializers` to provide the
|
|
339
|
+
`owner_class` information
|
|
340
|
+
|
|
341
|
+
```ruby
|
|
342
|
+
NeetoFormEngine.owner_class = "Organization"
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
6. Configure models to add below association to the provided owner class
|
|
346
|
+
|
|
347
|
+
```ruby
|
|
348
|
+
has_many :forms, class_name: "::NeetoFormEngine::Form", as: :owner
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
7. Configure models to add below association to scope submission records
|
|
352
|
+
(optional)
|
|
353
|
+
|
|
354
|
+
```ruby
|
|
355
|
+
has_one :submission, class_name: "::NeetoFormEngine::Submission", as: :record
|
|
356
|
+
```
|
|
357
|
+
|
|
358
|
+
8. Configure model to add below association to attach form (optional)
|
|
280
359
|
|
|
281
|
-
|
|
360
|
+
```ruby
|
|
361
|
+
has_one :form, class_name: "::NeetoFormEngine::Form", as: :attachable
|
|
362
|
+
```
|
|
282
363
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
label is used for bug fixes, `minor` label is used for new features and `major`
|
|
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.
|
|
364
|
+
9. Add this line to your application's `config/routes.rb` file (replace `at` to
|
|
365
|
+
your desired route):
|
|
288
366
|
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
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.
|
|
367
|
+
```ruby
|
|
368
|
+
mount NeetoFormEngine::Engine, at: "/form"
|
|
369
|
+
```
|
|
297
370
|
|
|
298
|
-
|
|
299
|
-
functionality in some of the neeto web-apps locally using `yalc` package
|
|
300
|
-
manager. The usage of yalc is explained in this video:
|
|
301
|
-
https://youtu.be/QBiYGP0Rhe0
|
|
371
|
+
10. Add this line to your application's `.env.development` file:
|
|
302
372
|
|
|
303
|
-
|
|
373
|
+
```yaml
|
|
374
|
+
NEETO_FORM_DEVELOPMENT=true
|
|
375
|
+
```
|
|
304
376
|
|
|
305
|
-
|
|
306
|
-
|
|
377
|
+
11. Start your application and navigate to `/form` (or the route you gave on
|
|
378
|
+
step 3) to manage your forms.
|