@bigbinary/neeto-rules-frontend 0.3.5 → 0.3.6

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 CHANGED
@@ -1,465 +1,19 @@
1
- # @bigbinary/neeto-rules-frontend
1
+ # neeto-rules-nano
2
2
 
3
- neetoRulesFrontend is the library that manages automation rules across neeto
4
- products.
3
+ This repo acts as the source of truth for the new nano's structure, configs,
4
+ data etc.
5
5
 
6
- ## Installation
6
+ # Local Development Setup
7
7
 
8
- ```zsh
9
- yarn add @bigbinary/neeto-rules-frontend
10
- ```
8
+ 1. Setup
9
+ [Instructions](https://github.com/bigbinary/neeto-engineering/tree/main/Local-Development-Setup).
11
10
 
12
- **neetoRulesFrontend** has a few peer dependencies that are required for the
13
- proper functioning of the package. Install all the peer dependencies using the
14
- below command:
11
+ 2. Run `yarn build` to bundle the app.
15
12
 
16
- ```zsh
17
- yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1
18
- ```
13
+ 3. Visit http://spinkart.lvh.me:9100 and login with email `oliver@example.com`
14
+ and password `welcome`.
19
15
 
20
- ## Usage
16
+ # Publish instructions
21
17
 
22
- ```jsx
23
- <NeetoRulesForm data={initialProps}>
24
- {({ formattedValues, values, ...formikBag }) => (
25
- <>
26
- <InputField name="name" data={initialProps} />
27
- <TextareaField name="description" data={initialProps} />
28
- <SelectField name="projectId" data={initialProps} />
29
- <Events name="events" data={initialProps} performerName="performer" />
30
- <Card title="Conditions">
31
- <Conditions name="conditions" data={initialProps} />
32
- </Card>
33
- <Actions name="actions" data={initialProps} />
34
- </>
35
- )}
36
- </NeetoRulesForm>
37
- ```
38
-
39
- ```jsx
40
- <RulePreview {...{ isLoading, isOpen, ruleDetails, onClose }} />
41
- ```
42
-
43
- ## NeetoRules API
44
-
45
- | Prop Name | Description |
46
- | ------------ | ------------------------------------------------------------------------------------------------------------------ |
47
- | data | Object `{ [fieldName] : FieldProps }` [FieldProps](#field-props) |
48
- | children | `children?: React.ReactNode ({ formattedValues, ...props: FormikProps<Values>}) => ReactNode` |
49
- | className | To provide external classnames to Form component. `string` |
50
- | handleSubmit | `(values: Values, formikBag: FormikBag) => void` [FormikBag](https://formik.org/docs/api/withFormik#the-formikbag) |
51
- | handleCancel | Callback on clicking Form cancel button. |
52
-
53
- ### Field Props
54
-
55
- | Prop | Description |
56
- | ---------------- | --------------------------------------------------------------------------------------------------- |
57
- | name | Name of the field `string` |
58
- | label | To specify the text to be displayed above the field. `string` |
59
- | type | Type of the field. [Supported Field Types](#field-types) `string` |
60
- | value | Default value of the Field. It can be string or array based on the field type. |
61
- | componentProps | Component specific props. [Component Props](#component-props) |
62
- | options | `[{ label: "", value: ""}]` For [Field Types](#field-types) `radio`, `dropdown` and `multi-select`. |
63
- | conditionOptions | If [Field Type](#field-types) is `condition` [Options](#options) |
64
- | eventOptions | If [Field Type](#field-types) is `events` [Options](#options) |
65
- | actionOptions | If [Field Type](#field-types) is `actions` [Options](#options) |
66
-
67
- #### Options
68
-
69
- | Prop | Description |
70
- | --------------- | --------------------------------------------------------------------- |
71
- | label | Option label `string` |
72
- | value | Option value `string` |
73
- | type | Type of the option field |
74
- | dropdownOptions | If the `type` is `dropdown`, `multi-select`, or `multi-select-create` |
75
-
76
- ### Field Types
77
-
78
- - `text`
79
- - `long-text`
80
- - `dropdown`
81
- - `multi-select`
82
- - `radio`
83
- - `events`
84
- - `actions`
85
- - `condition`
86
-
87
- ### Component Props
88
-
89
- | Prop | Description | Default value |
90
- | -------- | ---------------------------------------------------------------- | ------------- |
91
- | required | To specify whether the input field is required or not. `Boolean` | `true` |
92
-
93
- ## Custom Action Component
94
-
95
- **neetoRulesFrontend** allows to pass custom action components from host
96
- application. Below is an example for customize task component which is being
97
- sent by neeto-crm in action options.
98
-
99
- ```jsx
100
- {
101
- label: "Add task",
102
- value: "add_task",
103
- placeholder: "Task",
104
- component: TaskComponent,
105
- validation: TASK_VALIDATION,
106
- },
107
- ```
108
-
109
- ## Field Components
110
-
111
- ### InputField
112
-
113
- ```jsx
114
- const initialProps = {
115
- ...otherProps,
116
- firstName: {
117
- label: "First Name",
118
- type: "text",
119
- value: "", // Default value.
120
- componentProps: {
121
- placeholder: "Enter name",
122
- },
123
- },
124
- };
125
-
126
- <InputField name="firstName" data={initialProps} />;
127
- ```
128
-
129
- #### API
130
-
131
- | Prop | Description |
132
- | ----- | ------------------------------------------------------------------------- |
133
- | data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
134
- | name | Name of the field. The name should be same as that in the initialProp. |
135
- | label | To specify the text to be displayed above the field. `string` |
136
-
137
- ### TextareaField
138
-
139
- ```jsx
140
- const initialProps = {
141
- ...otherProps,
142
- description: {
143
- label: "Description",
144
- type: "long-text",
145
- value: "", // Default value.
146
- },
147
- };
148
-
149
- <TextareaField name="description" data={initialProps} />;
150
- ```
151
-
152
- #### API
153
-
154
- | Prop | Description |
155
- | ----- | ------------------------------------------------------------------------------- |
156
- | data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
157
- | name | Name of the field. The name should be same as that in the initialProp. `string` |
158
- | label | To specify the text to be displayed above the field. `string` |
159
-
160
- ### SelectField
161
-
162
- ```jsx
163
- const initialProps = {
164
- ...otherProps,
165
- user: {
166
- label: "Project",
167
- type: "dropdown",
168
- options: [{ label: "Oliver", value: "oliver" }],
169
- value: "oliver", // Default selected option will be Oliver
170
- },
171
- };
172
-
173
- <SelectField name="user" data={initialProps} />;
174
- ```
175
-
176
- #### API
177
-
178
- | Prop | Description |
179
- | -------- | ------------------------------------------------------------------------- |
180
- | data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
181
- | name | Name of the field. The name should be same as that in the initialProp. |
182
- | label | To specify the text to be displayed above the field. `string` |
183
- | options | To provide options for the Select input. `[{label, value}]`. |
184
- | onChange | `(value, setValue) => void` `setValue` is to set the new value |
185
-
186
- ### MultiSelectField
187
-
188
- ```jsx
189
- const initialProps = {
190
- ...otherProps,
191
- users: {
192
- label: "Projects",
193
- type: "multi-select",
194
- options: [
195
- { label: "Oliver", value: "oliver" },
196
- { label: "John", value: "john" },
197
- ],
198
- value: ["oliver"], // Default selected option will be Oliver
199
- },
200
- };
201
-
202
- <MultiSelectField name="users" data={initialProps} />;
203
- ```
204
-
205
- #### API
206
-
207
- | Prop | Description |
208
- | -------- | ------------------------------------------------------------------------- |
209
- | data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
210
- | name | Name of the field. The name should be same as that in the initialProp. |
211
- | label | To specify the text to be displayed above the field. `string` |
212
- | options | To provide options for the Select input. `[{label, value}]` |
213
- | onChange | `(value, setValue) => void` `setValue` is to set the new value |
214
-
215
- ### RadioField
216
-
217
- ```jsx
218
- const initialProps = {
219
- ...otherProps,
220
- performer: {
221
- label: "Performer",
222
- type: "radio",
223
- value: "any", // Default selected value will be "any"
224
- options: [
225
- { label: "Admin", value: "admin" },
226
- { label: "Any", value: "any" },
227
- ],
228
- },
229
- };
230
-
231
- <RadioField name="performer" data={initialProps} />;
232
- ```
233
-
234
- #### API
235
-
236
- | Prop | Description |
237
- | ------- | ------------------------------------------------------------------------- |
238
- | data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
239
- | name | Name of the field. The name should be same as that in the initialProp. |
240
- | label | To specify the text to be displayed above the field. `string` |
241
- | options | To provide options for the Radio input. `[{label, value}]` |
242
-
243
- ### EventConditions
244
-
245
- ```jsx
246
- const initialProps = {
247
- ...otherProps,
248
- events: {
249
- label: "Events",
250
- type: "events",
251
- value: [{ id: "1", name: "created" }], // Default value
252
- eventOptions: [
253
- { label: "Created", value: "created" },
254
- { label: "Updated", value: "updated" },
255
- { label: "Assigned", value: "deleted" },
256
- ],
257
- defaultData: {
258
- name: "deleted",
259
- performer: "admin",
260
- message: "When deleted by admin",
261
- },
262
- },
263
- };
264
-
265
- <EventConditions
266
- name="events"
267
- data={initialProps}
268
- performerName="performer"
269
- conditionsName="conditions"
270
- />;
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
- | performerName | Name of the performer field. The performerName should be same as that in the initialProp |
280
- | conditionsName | Name of the conditions field. The conditionsName should be same as that in the initialProp |
281
- | label | To specify the text to be displayed above the field. `string` |
282
- | 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. |
283
-
284
- ### Conditions
285
-
286
- ```jsx
287
- const initialProps = {
288
- ...otherProps,
289
- conditions: {
290
- label: "Conditions",
291
- type: "condition",
292
- conditionOptions: [
293
- {
294
- value: "status",
295
- label: "Status",
296
- type: "dropdown", // Types : text, number, email, decimal, url, dropdown, multi-select, multi-select-create, date.
297
- allowMatching: ["is", "is_not", "any_of", "none_of"],
298
- dropdownOptions: [
299
- { label: "Open", value: "open" },
300
- { label: "Closed", value: "closed" },
301
- ],
302
- additionalData: {
303
- any_of: "multi-select",
304
- none_of: "multi-select",
305
- },
306
- },
307
- {
308
- value: "name",
309
- label: "Name",
310
- type: "text",
311
- allowMatching: ["is", "is_not"],
312
- },
313
- {
314
- value: "tags",
315
- label: "Tags",
316
- type: "multi-select-create",
317
- allowMatching: ["contains_any_of", "contains_none_of"],
318
- },
319
- ],
320
- value: [
321
- {
322
- id: "1",
323
- field: "status",
324
- verb: "is",
325
- metadata: { value: "open" },
326
- joinType: "and_operator",
327
- },
328
- {
329
- id: "2",
330
- field: "name",
331
- verb: "is",
332
- metadata: { value: "Test" },
333
- joinType: "and_operator",
334
- },
335
- {
336
- id: "3",
337
- field: "tags",
338
- verb: "contains_any_of",
339
- metadata: { values: ["Test", "Open"] },
340
- joinType: "and_operator",
341
- },
342
- ],
343
- },
344
- };
345
-
346
- <Card title="Conditions">
347
- <Conditions name="conditions" data={initialProps} />
348
- </Card>;
349
- ```
350
-
351
- #### API
352
-
353
- | Prop | Description |
354
- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
355
- | data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
356
- | name | Name of the field. The name should be same as that in the initialProp |
357
- | label | To specify the text to be displayed above the field. `string` |
358
- | onSelectCondition | `(name, selectedOption) => void` This method will trigger when we select a condition. The `name` is to refer the condition in the formik context. |
359
- | 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`. |
360
- | isCallback | To specify if there is a preview callback function for the conditions. `Boolean` |
361
- | previewCallback | `(conditions) => void` This method will trigger when we click the preview button of the conditions. |
362
-
363
- ### Actions
364
-
365
- ```jsx
366
- const initialProps = {
367
- ...otherProps,
368
- actions: {
369
- label: "Actions",
370
- type: "actions",
371
- actionOptions: [
372
- {
373
- value: "add_tags",
374
- label: "Add Tags",
375
- type: "multiSelect", // Types : emailToIds, emailTo, email, dropdown, list, multiSelect, note, date, text, textarea, decimal, number, regex, longText
376
- hideSeparator: true,
377
- placeholder: "Select tags",
378
- dropdownOptions: [
379
- { label: "Open", value: "open" },
380
- { label: "Close", value: "close" },
381
- { label: "Hold", value: "hold" },
382
- ],
383
- },
384
- {
385
- value: "email_to",
386
- label: "Email To",
387
- type: "emailToIds",
388
- separator: "as",
389
- hideSubject: true, // Hide subject field if this prop is true
390
- },
391
- {
392
- value: "send_sms",
393
- label: "Send sms",
394
- type: "longText",
395
- },
396
- ],
397
- value: [
398
- {
399
- id: "1",
400
- name: "email_to", // Specify the value of the selected action.
401
- metadata: { emails: ["a@a.com"], subject: "test", body: "test" },
402
- },
403
- {
404
- id: "2",
405
- name: "add_tags",
406
- metadata: { values: ["close"] },
407
- },
408
- ],
409
- },
410
- };
411
-
412
- <Actions name="fieldName" data={initialProps} />;
413
- ```
414
-
415
- #### API
416
-
417
- | Prop | Description |
418
- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
419
- | data | The same `initialProp` that is passed to `data` prop in `NeetoRulesForm`. |
420
- | name | Name of the field. The name should be same as that in the initialProp |
421
- | label | To specify the text to be displayed above the field. `string` |
422
- | onSelectAction | `(name, selectedOption) => void` This method will trigger when we select an action. The `name` is to refer the action in the formik context. |
423
- | selectedActionOptions | `(selectedAction)=> [{label, value}]` To provide options for the selected action if the type of selected action is `dropdown`, or `multi-select` |
424
-
425
- ### Example: Refer [Example App](https://github.com/bigbinary/neeto-rules-frontend/blob/main/example/src/App.jsx)
426
-
427
- ## Development
428
-
429
- Install all the dependencies by executing the following command
430
-
431
- ```zsh
432
- yarn install
433
- ```
434
-
435
- Start the development server using the `yarn start` command. `Port: 8080`
436
-
437
- # Building and releasing.
438
-
439
- The `@bigbinary/neeto-rules-frontend` package gets published to NPM when we
440
- merge a PR with `patch`, `minor` or `major` label to the `main` branch. The
441
- `patch` label is used for bug fixes, `minor` label is used for new features and
442
- `major` label is used for breaking changes. You can checkout the
443
- `Create and publish releases` workflow in GitHub Actions to get a live update.
444
-
445
- In case if you missed to add the label, you can manually publish the package.
446
- For that first you need to create a PR to update the version number in the
447
- `package.json` file and merge it to the `main` branch. After merging the PR, you
448
- need to create a
449
- [new github release](https://github.com/bigbinary/neeto-rules-frontend/releases/new)
450
- from main branch. Whenever a new release is created with a new version number,
451
- the github actions will automatically publish the built package to npm. You can
452
- checkout the `Publish to npm` workflow in GitHub Actions to get a live update.
453
-
454
- Please note that before publishing the package, you need to verify the
455
- functionality in some of the neeto web-apps locally using `yalc` package
456
- manager. The usage of yalc is explained in this video:
457
- https://youtu.be/QBiYGP0Rhe0
458
-
459
- ## Integrations
460
-
461
- | Project | Pages |
462
- | ----------------- | ----------------------------------------- |
463
- | neeto-desk-web | Automation rules, Views, Canned responses |
464
- | neeto-planner-web | Automation rules |
465
- | neeto-crm-web | Automation rules |
18
+ 1. [Engine and package installation](./docs/engine-and-package-installation.md)
19
+ 2. [Building and releasing](./docs/building-and-releasing.md)