@bigbinary/neeto-slack-frontend 0.3.2 → 0.3.4
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 +4 -610
- package/dist/index.cjs.js +4835 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +4804 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -12,619 +12,13 @@ yarn add @bigbinary/neeto-slack-frontend
|
|
|
12
12
|
|
|
13
13
|
Available components:
|
|
14
14
|
|
|
15
|
-
- [Connect](
|
|
16
|
-
- [Configure](
|
|
17
|
-
- [Finish](
|
|
18
|
-
- [Settings](
|
|
15
|
+
- [Connect](./docs/connect/README.md)
|
|
16
|
+
- [Configure](./docs/configure/README.md)
|
|
17
|
+
- [Finish](./docs/finish/README.md)
|
|
18
|
+
- [Settings](./docs/settings/README.md)
|
|
19
19
|
|
|
20
20
|
View the [example app](./example/src/App.jsx) to see usage.
|
|
21
21
|
|
|
22
|
-
### Connect
|
|
23
|
-
|
|
24
|
-
```js
|
|
25
|
-
const handleRedirect = () => {
|
|
26
|
-
window.location.assign(slackAuthorizationUrl);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
return(
|
|
30
|
-
<Connect handleRedirectToSlack={handleRedirect} />;
|
|
31
|
-
);
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
<table>
|
|
35
|
-
<thead>
|
|
36
|
-
<tr>
|
|
37
|
-
<th>
|
|
38
|
-
|
|
39
|
-
Prop
|
|
40
|
-
|
|
41
|
-
</th>
|
|
42
|
-
<th>
|
|
43
|
-
|
|
44
|
-
Type
|
|
45
|
-
|
|
46
|
-
</th>
|
|
47
|
-
<th>
|
|
48
|
-
|
|
49
|
-
Description
|
|
50
|
-
|
|
51
|
-
</th>
|
|
52
|
-
</tr>
|
|
53
|
-
</thead>
|
|
54
|
-
<tbody>
|
|
55
|
-
|
|
56
|
-
<tr>
|
|
57
|
-
<td style="vertical-align: top;">
|
|
58
|
-
|
|
59
|
-
handleRedirectToSlack
|
|
60
|
-
|
|
61
|
-
</td>
|
|
62
|
-
<td style="vertical-align: top;">
|
|
63
|
-
|
|
64
|
-
Function
|
|
65
|
-
|
|
66
|
-
</td>
|
|
67
|
-
<td style="vertical-align: top;">
|
|
68
|
-
|
|
69
|
-
Handles the redirect to the slack OAuth url
|
|
70
|
-
|
|
71
|
-
</td>
|
|
72
|
-
</tr>
|
|
73
|
-
<tr></tr>
|
|
74
|
-
</tbody>
|
|
75
|
-
</table>
|
|
76
|
-
|
|
77
|
-
### Configure
|
|
78
|
-
|
|
79
|
-
```js
|
|
80
|
-
const CONFIGURE_FORM_INITIAL_VALUES = {
|
|
81
|
-
channels: [
|
|
82
|
-
{ label: "general", value: "K87KJHKS987" },
|
|
83
|
-
{ label: "hq", value: "IJHKJ76889H" },
|
|
84
|
-
],
|
|
85
|
-
selectedChannel: { label: "general", value: "K87KJHKS987" },
|
|
86
|
-
name: "",
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
const { slack, handleSubmit, isSubmitting } = useSlackApi();
|
|
90
|
-
const CONFIGURE_FORM_VALIDATION_SCHEMA = {
|
|
91
|
-
name: yup.string().required(),
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
return (
|
|
95
|
-
<Configure
|
|
96
|
-
teamName={slack.teamName}
|
|
97
|
-
initialFormValues={CONFIGURE_FORM_INITIAL_VALUES}
|
|
98
|
-
handleSubmit={handleSubmit}
|
|
99
|
-
isSubmitting={isSubmitting}
|
|
100
|
-
className="neeto-ui-my-2"
|
|
101
|
-
validationSchema={CONFIGURE_FORM_VALIDATION_SCHEMA}
|
|
102
|
-
>
|
|
103
|
-
<Input name="name" className="neeto-ui-my-2" />
|
|
104
|
-
</Configure>;
|
|
105
|
-
);
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
<table>
|
|
109
|
-
<thead>
|
|
110
|
-
<tr>
|
|
111
|
-
<th>
|
|
112
|
-
|
|
113
|
-
Prop
|
|
114
|
-
|
|
115
|
-
</th>
|
|
116
|
-
<th>
|
|
117
|
-
|
|
118
|
-
Type
|
|
119
|
-
|
|
120
|
-
</th>
|
|
121
|
-
<th>
|
|
122
|
-
|
|
123
|
-
Description
|
|
124
|
-
|
|
125
|
-
</th>
|
|
126
|
-
</tr>
|
|
127
|
-
</thead>
|
|
128
|
-
<tbody>
|
|
129
|
-
|
|
130
|
-
<tr>
|
|
131
|
-
<td style="vertical-align: top;">
|
|
132
|
-
|
|
133
|
-
children
|
|
134
|
-
|
|
135
|
-
</td>
|
|
136
|
-
<td style="vertical-align: top;">
|
|
137
|
-
|
|
138
|
-
Function | JSX.Element
|
|
139
|
-
|
|
140
|
-
</td>
|
|
141
|
-
<td style="vertical-align: top;">
|
|
142
|
-
|
|
143
|
-
Extra form fields to be included in the `Configure` page
|
|
144
|
-
|
|
145
|
-
</td>
|
|
146
|
-
</tr>
|
|
147
|
-
<tr></tr>
|
|
148
|
-
<tr>
|
|
149
|
-
<td style="vertical-align: top;">
|
|
150
|
-
|
|
151
|
-
teamName
|
|
152
|
-
|
|
153
|
-
</td>
|
|
154
|
-
<td style="vertical-align: top;">
|
|
155
|
-
|
|
156
|
-
String
|
|
157
|
-
|
|
158
|
-
</td>
|
|
159
|
-
<td style="vertical-align: top;">
|
|
160
|
-
|
|
161
|
-
Slack team name to be displayed.
|
|
162
|
-
|
|
163
|
-
</td>
|
|
164
|
-
</tr>
|
|
165
|
-
<tr></tr>
|
|
166
|
-
<tr>
|
|
167
|
-
<td style="vertical-align: top;">
|
|
168
|
-
|
|
169
|
-
initialFormValues
|
|
170
|
-
|
|
171
|
-
</td>
|
|
172
|
-
<td style="vertical-align: top;">
|
|
173
|
-
|
|
174
|
-
Object
|
|
175
|
-
|
|
176
|
-
</td>
|
|
177
|
-
<td style="vertical-align: top;">
|
|
178
|
-
|
|
179
|
-
Initial form values for formik. <br/> (Note: Include channels array &
|
|
180
|
-
selectedChannel value) <br/> [Example](./example/src/constants.js)
|
|
181
|
-
|
|
182
|
-
</td>
|
|
183
|
-
</tr>
|
|
184
|
-
<tr></tr>
|
|
185
|
-
<tr>
|
|
186
|
-
<td style="vertical-align: top;">
|
|
187
|
-
|
|
188
|
-
handleSubmit
|
|
189
|
-
|
|
190
|
-
</td>
|
|
191
|
-
<td style="vertical-align: top;">
|
|
192
|
-
|
|
193
|
-
Function
|
|
194
|
-
|
|
195
|
-
</td>
|
|
196
|
-
<td style="vertical-align: top;">
|
|
197
|
-
|
|
198
|
-
Handle formik submit.
|
|
199
|
-
|
|
200
|
-
</td>
|
|
201
|
-
</tr>
|
|
202
|
-
<tr></tr>
|
|
203
|
-
<tr>
|
|
204
|
-
<td style="vertical-align: top;">
|
|
205
|
-
|
|
206
|
-
isSubmitting
|
|
207
|
-
|
|
208
|
-
</td>
|
|
209
|
-
<td style="vertical-align: top;">
|
|
210
|
-
|
|
211
|
-
bool
|
|
212
|
-
|
|
213
|
-
</td>
|
|
214
|
-
<td style="vertical-align: top;">
|
|
215
|
-
|
|
216
|
-
Boolean which is set when submitting the form.
|
|
217
|
-
|
|
218
|
-
</td>
|
|
219
|
-
</tr>
|
|
220
|
-
<tr></tr>
|
|
221
|
-
<tr>
|
|
222
|
-
<td style="vertical-align: top;">
|
|
223
|
-
|
|
224
|
-
className?
|
|
225
|
-
|
|
226
|
-
</td>
|
|
227
|
-
<td style="vertical-align: top;">
|
|
228
|
-
|
|
229
|
-
String
|
|
230
|
-
|
|
231
|
-
</td>
|
|
232
|
-
<td style="vertical-align: top;">
|
|
233
|
-
|
|
234
|
-
Custom classnames to be applied to Configure component
|
|
235
|
-
|
|
236
|
-
</td>
|
|
237
|
-
</tr>
|
|
238
|
-
<tr></tr>
|
|
239
|
-
<tr>
|
|
240
|
-
<td style="vertical-align: top;">
|
|
241
|
-
|
|
242
|
-
validationSchema
|
|
243
|
-
|
|
244
|
-
</td>
|
|
245
|
-
<td style="vertical-align: top;">
|
|
246
|
-
|
|
247
|
-
Object
|
|
248
|
-
|
|
249
|
-
</td>
|
|
250
|
-
<td style="vertical-align: top;">
|
|
251
|
-
|
|
252
|
-
Validation schema for fields using yup.<br/> (Note: No need to include
|
|
253
|
-
selectedChannel validation. Also no need to wrap validationSchema in
|
|
254
|
-
yup.object().shape({..}))<br/> [Example](./example/src/constants.js)
|
|
255
|
-
|
|
256
|
-
</td>
|
|
257
|
-
</tr>
|
|
258
|
-
<tr></tr>
|
|
259
|
-
</tbody>
|
|
260
|
-
</table>
|
|
261
|
-
|
|
262
|
-
### Finish
|
|
263
|
-
|
|
264
|
-
```js
|
|
265
|
-
const selectedChannel = "General";
|
|
266
|
-
const { configuration } = useSlackApi();
|
|
267
|
-
|
|
268
|
-
return (
|
|
269
|
-
<Finish
|
|
270
|
-
selectedChannel={selectedChannel}
|
|
271
|
-
teamName={configuration.teamName}
|
|
272
|
-
otherFields={[
|
|
273
|
-
{
|
|
274
|
-
name: "Update type",
|
|
275
|
-
value: configuration.notificationKind,
|
|
276
|
-
},
|
|
277
|
-
]}
|
|
278
|
-
onBack={() => setActiveTab("configure")}
|
|
279
|
-
onClose={onClose}
|
|
280
|
-
/>
|
|
281
|
-
);
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
<table>
|
|
285
|
-
<thead>
|
|
286
|
-
<tr>
|
|
287
|
-
<th>
|
|
288
|
-
|
|
289
|
-
Prop
|
|
290
|
-
|
|
291
|
-
</th>
|
|
292
|
-
<th>
|
|
293
|
-
|
|
294
|
-
Type
|
|
295
|
-
|
|
296
|
-
</th>
|
|
297
|
-
<th>
|
|
298
|
-
|
|
299
|
-
Description
|
|
300
|
-
|
|
301
|
-
</th>
|
|
302
|
-
</tr>
|
|
303
|
-
</thead>
|
|
304
|
-
<tbody>
|
|
305
|
-
|
|
306
|
-
<tr>
|
|
307
|
-
<td style="vertical-align: top;">
|
|
308
|
-
|
|
309
|
-
children
|
|
310
|
-
|
|
311
|
-
</td>
|
|
312
|
-
<td style="vertical-align: top;">
|
|
313
|
-
|
|
314
|
-
JSX.Element
|
|
315
|
-
|
|
316
|
-
</td>
|
|
317
|
-
<td style="vertical-align: top;">
|
|
318
|
-
|
|
319
|
-
Extra form fields to be included in the Finish page
|
|
320
|
-
|
|
321
|
-
</td>
|
|
322
|
-
</tr>
|
|
323
|
-
<tr></tr>
|
|
324
|
-
<tr>
|
|
325
|
-
<td style="vertical-align: top;">
|
|
326
|
-
|
|
327
|
-
onBack
|
|
328
|
-
|
|
329
|
-
</td>
|
|
330
|
-
<td style="vertical-align: top;">
|
|
331
|
-
|
|
332
|
-
Function
|
|
333
|
-
|
|
334
|
-
</td>
|
|
335
|
-
<td style="vertical-align: top;">
|
|
336
|
-
|
|
337
|
-
Function that handles redirect to Configure page
|
|
338
|
-
|
|
339
|
-
</td>
|
|
340
|
-
</tr>
|
|
341
|
-
<tr></tr>
|
|
342
|
-
<tr>
|
|
343
|
-
<td style="vertical-align: top;">
|
|
344
|
-
|
|
345
|
-
onClose
|
|
346
|
-
|
|
347
|
-
</td>
|
|
348
|
-
<td style="vertical-align: top;">
|
|
349
|
-
|
|
350
|
-
Function
|
|
351
|
-
|
|
352
|
-
</td>
|
|
353
|
-
<td style="vertical-align: top;">
|
|
354
|
-
|
|
355
|
-
Function that handles closing of the modal
|
|
356
|
-
|
|
357
|
-
</td>
|
|
358
|
-
</tr>
|
|
359
|
-
<tr></tr>
|
|
360
|
-
<tr>
|
|
361
|
-
<td style="vertical-align: top;">
|
|
362
|
-
|
|
363
|
-
selectedChannel
|
|
364
|
-
|
|
365
|
-
</td>
|
|
366
|
-
<td style="vertical-align: top;">
|
|
367
|
-
|
|
368
|
-
String
|
|
369
|
-
|
|
370
|
-
</td>
|
|
371
|
-
<td style="vertical-align: top;">
|
|
372
|
-
|
|
373
|
-
Selected slack channel name
|
|
374
|
-
|
|
375
|
-
</td>
|
|
376
|
-
</tr>
|
|
377
|
-
<tr></tr>
|
|
378
|
-
<tr>
|
|
379
|
-
<td style="vertical-align: top;">
|
|
380
|
-
|
|
381
|
-
teamName
|
|
382
|
-
|
|
383
|
-
</td>
|
|
384
|
-
<td style="vertical-align: top;">
|
|
385
|
-
|
|
386
|
-
String
|
|
387
|
-
|
|
388
|
-
</td>
|
|
389
|
-
<td style="vertical-align: top;">
|
|
390
|
-
|
|
391
|
-
Slack team name to be displayed
|
|
392
|
-
|
|
393
|
-
</td>
|
|
394
|
-
</tr>
|
|
395
|
-
<tr></tr>
|
|
396
|
-
<tr>
|
|
397
|
-
<td style="vertical-align: top;">
|
|
398
|
-
|
|
399
|
-
otherFields
|
|
400
|
-
|
|
401
|
-
</td>
|
|
402
|
-
<td style="vertical-align: top;">
|
|
403
|
-
|
|
404
|
-
Array
|
|
405
|
-
|
|
406
|
-
</td>
|
|
407
|
-
<td style="vertical-align: top;">
|
|
408
|
-
|
|
409
|
-
Extra fields that need to be displayed in the finish page.
|
|
410
|
-
[Example](./example/src/components/StepsModal.jsx)
|
|
411
|
-
|
|
412
|
-
</td>
|
|
413
|
-
</tr>
|
|
414
|
-
<tr></tr>
|
|
415
|
-
</tbody>
|
|
416
|
-
</table>
|
|
417
|
-
|
|
418
|
-
### Settings
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
```js
|
|
423
|
-
const SETTINGS_FORM_INITIAL_VALUES = {
|
|
424
|
-
channels: [
|
|
425
|
-
{ label: "general", value: "K87KJHKS987" },
|
|
426
|
-
{ label: "hq", value: "IJHKJ76889H" },
|
|
427
|
-
],
|
|
428
|
-
selectedChannel: { label: "general", value: "K87KJHKS987" },
|
|
429
|
-
name: "",
|
|
430
|
-
};
|
|
431
|
-
|
|
432
|
-
const { slack, handleSubmit, isSubmitting } = useSlackApi();
|
|
433
|
-
const SETTINGS_FORM_VALIDATION_SCHEMA = {
|
|
434
|
-
name: yup.string().required(),
|
|
435
|
-
};
|
|
436
|
-
|
|
437
|
-
return (
|
|
438
|
-
<Settings
|
|
439
|
-
teamName={slack.teamName}
|
|
440
|
-
initialFormValues={SETTINGS_FORM_INITIAL_VALUES}
|
|
441
|
-
handleSubmit={handleSubmit}
|
|
442
|
-
isSubmitting={isSubmitting}
|
|
443
|
-
className="neeto-ui-my-2"
|
|
444
|
-
validationSchema={SETTINGS_FORM_VALIDATION_SCHEMA}
|
|
445
|
-
>
|
|
446
|
-
{({isDisabled, ...formikProps}) => (
|
|
447
|
-
<Input name="name" value={formikProps.values.name} disabled={isDisabled} className="neeto-ui-my-2" />
|
|
448
|
-
)}
|
|
449
|
-
</Settings>;
|
|
450
|
-
);
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
<table>
|
|
454
|
-
<thead>
|
|
455
|
-
<tr>
|
|
456
|
-
<th>
|
|
457
|
-
|
|
458
|
-
Prop
|
|
459
|
-
|
|
460
|
-
</th>
|
|
461
|
-
<th>
|
|
462
|
-
|
|
463
|
-
Type
|
|
464
|
-
|
|
465
|
-
</th>
|
|
466
|
-
<th>
|
|
467
|
-
|
|
468
|
-
Description
|
|
469
|
-
|
|
470
|
-
</th>
|
|
471
|
-
</tr>
|
|
472
|
-
</thead>
|
|
473
|
-
<tbody>
|
|
474
|
-
|
|
475
|
-
<tr>
|
|
476
|
-
<td style="vertical-align: top;">
|
|
477
|
-
|
|
478
|
-
children
|
|
479
|
-
|
|
480
|
-
</td>
|
|
481
|
-
<td style="vertical-align: top;">
|
|
482
|
-
|
|
483
|
-
Function | JSX.Element
|
|
484
|
-
|
|
485
|
-
</td>
|
|
486
|
-
<td style="vertical-align: top;">
|
|
487
|
-
|
|
488
|
-
Extra form fields to be included on the ` Configure` page. `isDisabled` should
|
|
489
|
-
be used to disable fields such that they are enabled only by clicking the edit
|
|
490
|
-
button.
|
|
491
|
-
|
|
492
|
-
</td>
|
|
493
|
-
</tr>
|
|
494
|
-
<tr></tr>
|
|
495
|
-
<tr>
|
|
496
|
-
<td style="vertical-align: top;">
|
|
497
|
-
|
|
498
|
-
loading
|
|
499
|
-
|
|
500
|
-
</td>
|
|
501
|
-
<td style="vertical-align: top;">
|
|
502
|
-
|
|
503
|
-
boolean
|
|
504
|
-
|
|
505
|
-
</td>
|
|
506
|
-
<td style="vertical-align: top;">
|
|
507
|
-
|
|
508
|
-
A spinner is disabled instead of form when loading is true.
|
|
509
|
-
|
|
510
|
-
</td>
|
|
511
|
-
</tr>
|
|
512
|
-
<tr></tr>
|
|
513
|
-
|
|
514
|
-
<tr>
|
|
515
|
-
<td style="vertical-align: top;">
|
|
516
|
-
|
|
517
|
-
teamName
|
|
518
|
-
|
|
519
|
-
</td>
|
|
520
|
-
<td style="vertical-align: top;">
|
|
521
|
-
|
|
522
|
-
String
|
|
523
|
-
|
|
524
|
-
</td>
|
|
525
|
-
<td style="vertical-align: top;">
|
|
526
|
-
|
|
527
|
-
Slack team name to be displayed.
|
|
528
|
-
|
|
529
|
-
</td>
|
|
530
|
-
</tr>
|
|
531
|
-
<tr></tr>
|
|
532
|
-
<tr>
|
|
533
|
-
<td style="vertical-align: top;">
|
|
534
|
-
|
|
535
|
-
initialFormValues
|
|
536
|
-
|
|
537
|
-
</td>
|
|
538
|
-
<td style="vertical-align: top;">
|
|
539
|
-
|
|
540
|
-
Object
|
|
541
|
-
|
|
542
|
-
</td>
|
|
543
|
-
<td style="vertical-align: top;">
|
|
544
|
-
|
|
545
|
-
Initial form values for formik. <br/> (Note: Include channels array &
|
|
546
|
-
selectedChannel value) <br/> [Example](./example/src/constants.js)
|
|
547
|
-
|
|
548
|
-
</td>
|
|
549
|
-
</tr>
|
|
550
|
-
<tr></tr>
|
|
551
|
-
<tr>
|
|
552
|
-
<td style="vertical-align: top;">
|
|
553
|
-
|
|
554
|
-
handleSubmit
|
|
555
|
-
|
|
556
|
-
</td>
|
|
557
|
-
<td style="vertical-align: top;">
|
|
558
|
-
|
|
559
|
-
Function
|
|
560
|
-
|
|
561
|
-
</td>
|
|
562
|
-
<td style="vertical-align: top;">
|
|
563
|
-
|
|
564
|
-
Handle formik submit.
|
|
565
|
-
|
|
566
|
-
</td>
|
|
567
|
-
</tr>
|
|
568
|
-
<tr></tr>
|
|
569
|
-
<tr>
|
|
570
|
-
<td style="vertical-align: top;">
|
|
571
|
-
|
|
572
|
-
isSubmitting
|
|
573
|
-
|
|
574
|
-
</td>
|
|
575
|
-
<td style="vertical-align: top;">
|
|
576
|
-
|
|
577
|
-
bool
|
|
578
|
-
|
|
579
|
-
</td>
|
|
580
|
-
<td style="vertical-align: top;">
|
|
581
|
-
|
|
582
|
-
Boolean which is set when submitting the form.
|
|
583
|
-
|
|
584
|
-
</td>
|
|
585
|
-
</tr>
|
|
586
|
-
<tr></tr>
|
|
587
|
-
<tr>
|
|
588
|
-
<td style="vertical-align: top;">
|
|
589
|
-
|
|
590
|
-
className?
|
|
591
|
-
|
|
592
|
-
</td>
|
|
593
|
-
<td style="vertical-align: top;">
|
|
594
|
-
|
|
595
|
-
String
|
|
596
|
-
|
|
597
|
-
</td>
|
|
598
|
-
<td style="vertical-align: top;">
|
|
599
|
-
|
|
600
|
-
Custom classnames to be applied to Configure component
|
|
601
|
-
|
|
602
|
-
</td>
|
|
603
|
-
</tr>
|
|
604
|
-
<tr></tr>
|
|
605
|
-
<tr>
|
|
606
|
-
<td style="vertical-align: top;">
|
|
607
|
-
|
|
608
|
-
validationSchema
|
|
609
|
-
|
|
610
|
-
</td>
|
|
611
|
-
<td style="vertical-align: top;">
|
|
612
|
-
|
|
613
|
-
Object
|
|
614
|
-
|
|
615
|
-
</td>
|
|
616
|
-
<td style="vertical-align: top;">
|
|
617
|
-
|
|
618
|
-
Validation schema for fields using yup.<br/> (Note: No need to include
|
|
619
|
-
selectedChannel validation. Also no need to wrap validationSchema in
|
|
620
|
-
yup.object().shape({..}))<br/> [Example](./example/src/constants.js)
|
|
621
|
-
|
|
622
|
-
</td>
|
|
623
|
-
</tr>
|
|
624
|
-
<tr></tr>
|
|
625
|
-
</tbody>
|
|
626
|
-
</table>
|
|
627
|
-
|
|
628
22
|
## Development
|
|
629
23
|
|
|
630
24
|
Install all the dependencies by executing the following command
|