@bigbinary/neeto-rules-frontend 0.0.66
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 +423 -0
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -0
- package/dist/main.css +2 -0
- package/dist/main.css.map +1 -0
- package/package.json +139 -0
package/README.md
ADDED
|
@@ -0,0 +1,423 @@
|
|
|
1
|
+
# @bigbinary/neeto-rules-frontend
|
|
2
|
+
|
|
3
|
+
neetoRulesFrontend is the library that manages automation rules across neeto products.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```zsh
|
|
8
|
+
yarn add @bigbinary/neeto-rules-frontend
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**neetoRulesFrontend** has a few peer dependencies that are required for the proper
|
|
12
|
+
functioning of the package. Install all the peer dependencies using the below
|
|
13
|
+
command:
|
|
14
|
+
|
|
15
|
+
```zsh
|
|
16
|
+
yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
<NeetoRulesForm data={initialProps}>
|
|
23
|
+
{({ formattedValues, values, ...formikBag }) => (
|
|
24
|
+
<>
|
|
25
|
+
<InputField name="name" data={initialProps} />
|
|
26
|
+
<TextareaField name="description" data={initialProps} />
|
|
27
|
+
<SelectField name="projectId" data={initialProps} />
|
|
28
|
+
<Events name="events" data={initialProps} />
|
|
29
|
+
<RadioField name="performer" data={initialProps} />
|
|
30
|
+
<Card title="Conditions">
|
|
31
|
+
<Conditions name="conditions" data={initialProps} />
|
|
32
|
+
</Card>
|
|
33
|
+
<ConditionGroups name="conditionGroups" data={initialProps} />
|
|
34
|
+
<Actions name="actions" data={initialProps} />
|
|
35
|
+
</>
|
|
36
|
+
)}
|
|
37
|
+
</NeetoRulesForm>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## NeetoRules API
|
|
41
|
+
|
|
42
|
+
| Prop Name | Description |
|
|
43
|
+
| ------------ | ------------------------------------------------------------------------------------------------------------------ |
|
|
44
|
+
| data | Object `{ [fieldName] : FieldProps }` [FieldProps](#field-props) |
|
|
45
|
+
| children | `children?: React.ReactNode ({ formattedValues, ...props: FormikProps<Values>}) => ReactNode` |
|
|
46
|
+
| className | To provide external classnames to Form component. `string` |
|
|
47
|
+
| handleSubmit | `(values: Values, formikBag: FormikBag) => void` [FormikBag](https://formik.org/docs/api/withFormik#the-formikbag) |
|
|
48
|
+
| handleCancel | Callback on clicking Form cancel button. |
|
|
49
|
+
|
|
50
|
+
### Field Props
|
|
51
|
+
|
|
52
|
+
| Prop | Description |
|
|
53
|
+
| ---------------- | ----------------------------------------------------------------------------------- |
|
|
54
|
+
| name | Name of the field `string` |
|
|
55
|
+
| label | To specify the text to be displayed above the field. `string` |
|
|
56
|
+
| type | Type of the field. [Supported Field Types](#field-types) `string` |
|
|
57
|
+
| value | Default value of the Field. It can be string or array based on the field type. |
|
|
58
|
+
| componentProps | Component specific props. [Component Props](#component-props) |
|
|
59
|
+
| options | `[{ label: "", value: ""}]` For [Field Types](#field-types) `radio` and `dropdown`. |
|
|
60
|
+
| conditionOptions | If [Field Type](#field-types) is `condition` [Options](#options) |
|
|
61
|
+
| eventOptions | If [Field Type](#field-types) is `events` [Options](#options) |
|
|
62
|
+
| actionOptions | If [Field Type](#field-types) is `actions` [Options](#options) |
|
|
63
|
+
|
|
64
|
+
#### Options
|
|
65
|
+
|
|
66
|
+
| Prop | Description |
|
|
67
|
+
| --------------- | --------------------------------------------------------------------- |
|
|
68
|
+
| label | Option label `string` |
|
|
69
|
+
| value | Option value `string` |
|
|
70
|
+
| type | Type of the option field |
|
|
71
|
+
| dropdownOptions | If the `type` is `dropdown`, `multi-select`, or `multi-select-create` |
|
|
72
|
+
|
|
73
|
+
### Field Types
|
|
74
|
+
|
|
75
|
+
- `text`
|
|
76
|
+
- `long-text`
|
|
77
|
+
- `dropdown`
|
|
78
|
+
- `radio`
|
|
79
|
+
- `events`
|
|
80
|
+
- `actions`
|
|
81
|
+
- `condition`
|
|
82
|
+
- `condition-group`
|
|
83
|
+
|
|
84
|
+
### Component Props
|
|
85
|
+
|
|
86
|
+
| Prop | Description | Default value |
|
|
87
|
+
| -------- | ---------------------------------------------------------------- | ------------- |
|
|
88
|
+
| required | To specify whether the input field is required or not. `Boolean` | `true` |
|
|
89
|
+
|
|
90
|
+
## Field Components
|
|
91
|
+
|
|
92
|
+
### InputField
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
const initialProps = {
|
|
96
|
+
...otherProps,
|
|
97
|
+
firstName: {
|
|
98
|
+
label: "First Name",
|
|
99
|
+
type: "text",
|
|
100
|
+
value: "", // Default value.
|
|
101
|
+
componentProps: {
|
|
102
|
+
placeholder: "Enter name",
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
<InputField name="firstName" data={initialProps} />;
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
#### API
|
|
111
|
+
|
|
112
|
+
| Prop | Description |
|
|
113
|
+
| ----- | ------------------------------------------------------------------------- |
|
|
114
|
+
| data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
|
|
115
|
+
| name | Name of the field. The name should be same as that in the initialProp |
|
|
116
|
+
| label | To specify the text to be displayed above the field. `string` |
|
|
117
|
+
|
|
118
|
+
### TextareaField
|
|
119
|
+
|
|
120
|
+
```jsx
|
|
121
|
+
const initialProps = {
|
|
122
|
+
...otherProps,
|
|
123
|
+
description: {
|
|
124
|
+
label: "Description",
|
|
125
|
+
type: "long-text",
|
|
126
|
+
value: "", // Default value.
|
|
127
|
+
},
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
<TextareaField name="description" data={initialProps} />;
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
#### API
|
|
134
|
+
|
|
135
|
+
| Prop | Description |
|
|
136
|
+
| ----- | ------------------------------------------------------------------------------ |
|
|
137
|
+
| data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
|
|
138
|
+
| name | Name of the field. The name should be same as that in the initialProp `string` |
|
|
139
|
+
| label | To specify the text to be displayed above the field. `string` |
|
|
140
|
+
|
|
141
|
+
### SelectField
|
|
142
|
+
|
|
143
|
+
```jsx
|
|
144
|
+
const initialProps = {
|
|
145
|
+
...otherProps,
|
|
146
|
+
user: {
|
|
147
|
+
label: "Project",
|
|
148
|
+
type: "dropdown",
|
|
149
|
+
options: [{ label: "Oliver", value: "oliver" }],
|
|
150
|
+
value: "oliver", // Default selected option will be Oliver
|
|
151
|
+
},
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
<SelectField name="user" data={initialProps} />;
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
#### API
|
|
158
|
+
|
|
159
|
+
| Prop | Description |
|
|
160
|
+
| -------- | ------------------------------------------------------------------------- |
|
|
161
|
+
| data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
|
|
162
|
+
| name | Name of the field. The name should be same as that in the initialProp |
|
|
163
|
+
| label | To specify the text to be displayed above the field. `string` |
|
|
164
|
+
| options | To provide options for the Select input. `[{label, value}]`. |
|
|
165
|
+
| onChange | `(value, setValue) => void` `setValue` is to set the new value |
|
|
166
|
+
|
|
167
|
+
### RadioField
|
|
168
|
+
|
|
169
|
+
```jsx
|
|
170
|
+
const initialProps = {
|
|
171
|
+
...otherProps,
|
|
172
|
+
performer: {
|
|
173
|
+
label: "Performer",
|
|
174
|
+
type: "radio",
|
|
175
|
+
value: "any", // Default selected value will be "any"
|
|
176
|
+
options: [
|
|
177
|
+
{ label: "Admin", value: "admin" },
|
|
178
|
+
{ label: "Any", value: "any" },
|
|
179
|
+
],
|
|
180
|
+
},
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
<RadioField name="performer" data={initialProps} />;
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
#### API
|
|
187
|
+
|
|
188
|
+
| Prop | Description |
|
|
189
|
+
| ------- | ------------------------------------------------------------------------- |
|
|
190
|
+
| data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
|
|
191
|
+
| name | Name of the field. The name should be same as that in the initialProp |
|
|
192
|
+
| label | To specify the text to be displayed above the field. `string` |
|
|
193
|
+
| options | To provide options for the Radio input. `[{label, value}]`. |
|
|
194
|
+
|
|
195
|
+
### Events
|
|
196
|
+
|
|
197
|
+
```jsx
|
|
198
|
+
const initialProps = {
|
|
199
|
+
...otherProps,
|
|
200
|
+
events: {
|
|
201
|
+
label: "Events",
|
|
202
|
+
type: "events",
|
|
203
|
+
value: [{ id: "1", name: "when_created" }], // Default value
|
|
204
|
+
eventOptions: [
|
|
205
|
+
{ label: "When Created", value: "when_created" },
|
|
206
|
+
{ label: "When Updated", value: "when_updated" },
|
|
207
|
+
{ label: "When Assigned", value: "when_deleted" },
|
|
208
|
+
],
|
|
209
|
+
},
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
<Events name="events" data={initialProps} />;
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
#### API
|
|
216
|
+
|
|
217
|
+
| Prop | Description |
|
|
218
|
+
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
219
|
+
| data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
|
|
220
|
+
| name | Name of the field. The name should be same as that in the initialProp |
|
|
221
|
+
| label | To specify the text to be displayed above the field. `string` |
|
|
222
|
+
| onSelectEvent | `(name, selectedOption) => void` This method will trigger when we select an event option. The `name` is to refer the event in the formik context. |
|
|
223
|
+
|
|
224
|
+
### Conditions
|
|
225
|
+
|
|
226
|
+
```jsx
|
|
227
|
+
const initialProps = {
|
|
228
|
+
...otherProps,
|
|
229
|
+
conditions: {
|
|
230
|
+
label: "Conditions",
|
|
231
|
+
type: "condition",
|
|
232
|
+
conditionOptions: [
|
|
233
|
+
{
|
|
234
|
+
value: "status",
|
|
235
|
+
label: "Status",
|
|
236
|
+
type: "dropdown", // Types : text, textarea, dropdown, multi-select, multi-select-create, date.
|
|
237
|
+
dropdownOptions: [
|
|
238
|
+
{ label: "Open", value: "open" },
|
|
239
|
+
{ label: "Closed", value: "closed" },
|
|
240
|
+
],
|
|
241
|
+
},
|
|
242
|
+
{ value: "name", label: "Name", type: "text" },
|
|
243
|
+
{
|
|
244
|
+
value: "tags",
|
|
245
|
+
label: "Tags",
|
|
246
|
+
type: "multi-select-create",
|
|
247
|
+
},
|
|
248
|
+
],
|
|
249
|
+
value: [
|
|
250
|
+
{
|
|
251
|
+
id: "1",
|
|
252
|
+
field: "status",
|
|
253
|
+
verb: "is",
|
|
254
|
+
value: "open",
|
|
255
|
+
joinType: "and_operator",
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
id: "2",
|
|
259
|
+
field: "name",
|
|
260
|
+
verb: "is",
|
|
261
|
+
value: "Test",
|
|
262
|
+
joinType: "and_operator",
|
|
263
|
+
},
|
|
264
|
+
],
|
|
265
|
+
},
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
<Card title="Conditions">
|
|
269
|
+
<Conditions name="conditions" data={initialProps} />
|
|
270
|
+
</Card>;
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
#### API
|
|
274
|
+
|
|
275
|
+
| Prop | Description |
|
|
276
|
+
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
277
|
+
| data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
|
|
278
|
+
| name | Name of the field. The name should be same as that in the initialProp |
|
|
279
|
+
| label | To specify the text to be displayed above the field. `string` |
|
|
280
|
+
| isConditionGroup | To specify whether the component is part of `ConditionGroups` field. Default is `false` |
|
|
281
|
+
| onSelectCondition | `(name, selectedOption) => void` This method will trigger when we select a condition. The `name` is to refer the condition in the formik context. |
|
|
282
|
+
| selectedConditionOptions | `(selectedCondition)=> [{label, value}]` To provide options for the selected condition if the type of selected condition is `dropdown`, `multi-select`, or `multi-select-create` |
|
|
283
|
+
|
|
284
|
+
### ConditionGroups
|
|
285
|
+
|
|
286
|
+
```jsx
|
|
287
|
+
const initialProps = {
|
|
288
|
+
...otherProps,
|
|
289
|
+
conditionGroups: {
|
|
290
|
+
label: "Condition Groups",
|
|
291
|
+
type: "condition-group",
|
|
292
|
+
conditionOptions: [
|
|
293
|
+
{
|
|
294
|
+
value: "status",
|
|
295
|
+
label: "Status",
|
|
296
|
+
type: "dropdown", // Types : text, textarea, dropdown, multi-select, multi-select-create, date.
|
|
297
|
+
dropdownOptions: [
|
|
298
|
+
{ label: "Open", value: "open" },
|
|
299
|
+
{ label: "Closed", value: "closed" },
|
|
300
|
+
],
|
|
301
|
+
},
|
|
302
|
+
{ value: "name", label: "Name", type: "text" },
|
|
303
|
+
{
|
|
304
|
+
value: "tags",
|
|
305
|
+
label: "Tags",
|
|
306
|
+
type: "multi-select-create",
|
|
307
|
+
},
|
|
308
|
+
],
|
|
309
|
+
value: [
|
|
310
|
+
{
|
|
311
|
+
id: "1",
|
|
312
|
+
joinType: "and_operator",
|
|
313
|
+
conditions: [
|
|
314
|
+
{
|
|
315
|
+
id: "1",
|
|
316
|
+
field: "status", Specify the value of the selected condition.
|
|
317
|
+
verb: "is",
|
|
318
|
+
value: "open",
|
|
319
|
+
joinType: "and_operator",
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
id: "2",
|
|
323
|
+
field: "name",
|
|
324
|
+
verb: "is",
|
|
325
|
+
value: "Test",
|
|
326
|
+
joinType: "and_operator",
|
|
327
|
+
},
|
|
328
|
+
],
|
|
329
|
+
},
|
|
330
|
+
],
|
|
331
|
+
},
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
<ConditionGroups name="conditionGroups" data={initialProps} />
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
#### API
|
|
338
|
+
|
|
339
|
+
| Prop | Description |
|
|
340
|
+
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
341
|
+
| data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
|
|
342
|
+
| name | Name of the field. The name should be same as that in the initialProp |
|
|
343
|
+
| label | To specify the text to be displayed above the field. `string` |
|
|
344
|
+
| onSelectCondition | `(name, selectedOption) => void` This method will trigger when we select a condition. The `name` is to refer the condition in the formik context. |
|
|
345
|
+
| selectedConditionOptions | `(selectedCondition)=> [{label, value}]` To provide options for the selected condition if the type of selected condition is `dropdown`, `multi-select`, or `multi-select-create` |
|
|
346
|
+
|
|
347
|
+
### Actions
|
|
348
|
+
|
|
349
|
+
```jsx
|
|
350
|
+
const initialProps = {
|
|
351
|
+
...otherProps,
|
|
352
|
+
actions: {
|
|
353
|
+
label: "Actions",
|
|
354
|
+
type: "actions",
|
|
355
|
+
actionOptions: [
|
|
356
|
+
{
|
|
357
|
+
value: "change_status",
|
|
358
|
+
label: "Change Status",
|
|
359
|
+
type: "dropdown", // Types : emailToIds, email, dropdown, list, multiSelect, note
|
|
360
|
+
dropdownOptions: [
|
|
361
|
+
{ label: "Open", value: "open" },
|
|
362
|
+
{ label: "Closed", value: "closed" },
|
|
363
|
+
],
|
|
364
|
+
},
|
|
365
|
+
{
|
|
366
|
+
value: "email_to",
|
|
367
|
+
label: "Email To",
|
|
368
|
+
type: "emailToIds",
|
|
369
|
+
hideSubject: true, // Hide subject field if this prop is true
|
|
370
|
+
},
|
|
371
|
+
],
|
|
372
|
+
value: [
|
|
373
|
+
{
|
|
374
|
+
id: "1",
|
|
375
|
+
name: "email_to", // Specify the value of the selected action.
|
|
376
|
+
metadata: { emails: ["a@a.com"], subject: "test", body: "test" },
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
id: "2",
|
|
380
|
+
name: "change_status",
|
|
381
|
+
metadata: { value: "closed" },
|
|
382
|
+
},
|
|
383
|
+
],
|
|
384
|
+
},
|
|
385
|
+
};
|
|
386
|
+
|
|
387
|
+
<Actions name="fieldName" data={initialProps} />;
|
|
388
|
+
```
|
|
389
|
+
|
|
390
|
+
#### API
|
|
391
|
+
|
|
392
|
+
| Prop | Description |
|
|
393
|
+
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
394
|
+
| data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
|
|
395
|
+
| name | Name of the field. The name should be same as that in the initialProp |
|
|
396
|
+
| label | To specify the text to be displayed above the field. `string` |
|
|
397
|
+
| onSelectAction | `(name, selectedOption) => void` This method will trigger when we select an action. The `name` is to refer the action in the formik context. |
|
|
398
|
+
| selectedActionOptions | `(selectedAction)=> [{label, value}]` To provide options for the selected action if the type of selected action is `dropdown`, or `multi-select` |
|
|
399
|
+
|
|
400
|
+
### Example: Refer [Example App](https://github.com/bigbinary/neeto-rules-frontend/blob/main/example/src/App.jsx)
|
|
401
|
+
|
|
402
|
+
## Development
|
|
403
|
+
|
|
404
|
+
Install all the dependencies by executing the following command
|
|
405
|
+
|
|
406
|
+
```zsh
|
|
407
|
+
yarn install
|
|
408
|
+
```
|
|
409
|
+
|
|
410
|
+
Start the development server using the `yarn start` command. `Port: 8080`
|
|
411
|
+
|
|
412
|
+
## Building
|
|
413
|
+
|
|
414
|
+
The neetoRulesFrontend package gets auto-published to npm for every new merge to the
|
|
415
|
+
main branch. You can checkout the `publish` workflow in git actions to get a
|
|
416
|
+
live update.
|
|
417
|
+
|
|
418
|
+
## Integrations
|
|
419
|
+
|
|
420
|
+
| Project | Pages |
|
|
421
|
+
| ----------------- | ---------------------------------------- |
|
|
422
|
+
| neeto-desk-web | Automation rules, views, Canned response |
|
|
423
|
+
| neeto-planner-web | Automation rules |
|