@bigbinary/neeto-slack-frontend 2.3.0-beta1 → 3.1.0

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/dist/index.js CHANGED
@@ -1,15 +1,22 @@
1
- import * as React from 'react';
2
- import React__default from 'react';
3
1
  import { noop, isNotEmpty } from '@bigbinary/neeto-cist';
4
2
  import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
5
3
  import { Check } from '@bigbinary/neeto-icons';
6
4
  import { Slack } from '@bigbinary/neeto-icons/misc';
7
- import { Typography, Toastr, Button, Pane, Label } from '@bigbinary/neetoui';
5
+ import Typography from '@bigbinary/neetoui/Typography';
6
+ import Button from '@bigbinary/neetoui/Button';
8
7
  import { isEmpty, is } from 'ramda';
9
8
  import { useTranslation, Trans } from 'react-i18next';
9
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
10
10
  import { t as t$1 } from 'i18next';
11
+ import Toastr from '@bigbinary/neetoui/Toastr';
11
12
  import * as yup from 'yup';
12
- import { Form, Select, ActionBlock } from '@bigbinary/neetoui/formik';
13
+ import Pane from '@bigbinary/neetoui/Pane';
14
+ import Label from '@bigbinary/neetoui/Label';
15
+ import Select from '@bigbinary/neetoui/formik/Select';
16
+ import NeetoUIForm from '@bigbinary/neetoui/formik/Form';
17
+ import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
18
+ import * as React from 'react';
19
+ import { memo } from 'react';
13
20
  import classNames from 'classnames';
14
21
  import { useQuery } from '@tanstack/react-query';
15
22
  import axios from 'axios';
@@ -19,17 +26,20 @@ var Field = function Field(_ref) {
19
26
  value = _ref.value,
20
27
  _ref$className = _ref.className,
21
28
  className = _ref$className === void 0 ? "" : _ref$className;
22
- return /*#__PURE__*/React__default.createElement("div", {
23
- className: "neeto-ui-mb-3 neeto-ui-w-full ".concat(className)
24
- }, /*#__PURE__*/React__default.createElement(Typography, {
25
- className: "neeto-ui-text-gray-800 neeto-ui-mb-1",
26
- style: "h5",
27
- weight: "semibold"
28
- }, name), /*#__PURE__*/React__default.createElement(Typography, {
29
- className: "neeto-ui-text-gray-700",
30
- style: "body2",
31
- weight: "normal"
32
- }, value));
29
+ return /*#__PURE__*/jsxs("div", {
30
+ className: "neeto-ui-mb-3 neeto-ui-w-full ".concat(className),
31
+ children: [/*#__PURE__*/jsx(Typography, {
32
+ className: "neeto-ui-text-gray-800 neeto-ui-mb-1",
33
+ style: "h5",
34
+ weight: "semibold",
35
+ children: name
36
+ }), /*#__PURE__*/jsx(Typography, {
37
+ className: "neeto-ui-text-gray-700",
38
+ style: "body2",
39
+ weight: "normal",
40
+ children: value
41
+ })]
42
+ });
33
43
  };
34
44
 
35
45
  function _typeof(o) {
@@ -82,10 +92,10 @@ var CHANNEL_NAME_VALIDAITON_SCHEMA = {
82
92
  }).required().nullable()
83
93
  };
84
94
 
85
- function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
86
- function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
95
+ function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
96
+ function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
87
97
  var buildValidationSchema = function buildValidationSchema(customValidationSchema) {
88
- return yup.object().shape(_objectSpread$2(_objectSpread$2({}, customValidationSchema), CHANNEL_NAME_VALIDAITON_SCHEMA));
98
+ return yup.object().shape(_objectSpread$3(_objectSpread$3({}, customValidationSchema), CHANNEL_NAME_VALIDAITON_SCHEMA));
89
99
  };
90
100
  var toSlackUrl = function toSlackUrl(teamName) {
91
101
  return "https://".concat(teamName === null || teamName === void 0 ? void 0 : teamName.replace(/\s/g, "").toLowerCase(), ".slack.com");
@@ -95,30 +105,19 @@ var slackChannelRefresh = function slackChannelRefresh(channelRefreshHandler) {
95
105
  Toastr.success(t$1("neetoSlack.slack.channelListRefreshToastr"));
96
106
  };
97
107
 
98
- function _extends$1() {
99
- _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
100
- for (var i = 1; i < arguments.length; i++) {
101
- var source = arguments[i];
102
- for (var key in source) {
103
- if (Object.prototype.hasOwnProperty.call(source, key)) {
104
- target[key] = source[key];
105
- }
106
- }
107
- }
108
- return target;
109
- };
110
- return _extends$1.apply(this, arguments);
111
- }
112
-
113
108
  var ChannelSelectOption = function ChannelSelectOption(_ref) {
114
109
  var label = _ref.label,
115
110
  isPrivate = _ref.isPrivate;
116
- return /*#__PURE__*/React__default.createElement("div", {
117
- className: "flex items-center justify-between"
118
- }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement(Typography, {
119
- className: "neeto-ui-text-gray-500 italic",
120
- style: "body3"
121
- }, isPrivate ? "private" : ""));
111
+ return /*#__PURE__*/jsxs("div", {
112
+ className: "flex items-center justify-between",
113
+ children: [/*#__PURE__*/jsx("span", {
114
+ children: label
115
+ }), /*#__PURE__*/jsx(Typography, {
116
+ className: "neeto-ui-text-gray-500 italic",
117
+ style: "body3",
118
+ children: isPrivate ? "private" : ""
119
+ })]
120
+ });
122
121
  };
123
122
 
124
123
  var SlackRefreshChannelListButton = withT(function (_ref) {
@@ -126,21 +125,22 @@ var SlackRefreshChannelListButton = withT(function (_ref) {
126
125
  channelRefreshHandler = _ref.channelRefreshHandler,
127
126
  _ref$className = _ref.className,
128
127
  className = _ref$className === void 0 ? "pl-1" : _ref$className;
129
- return /*#__PURE__*/React__default.createElement("div", {
130
- className: "relative top-0 flex justify-center"
131
- }, /*#__PURE__*/React__default.createElement(Button, {
132
- className: className,
133
- label: t("neetoSlack.slack.channelListRefreshButton"),
134
- style: "link",
135
- onClick: function onClick() {
136
- return slackChannelRefresh(channelRefreshHandler);
137
- }
138
- }));
128
+ return /*#__PURE__*/jsx("div", {
129
+ className: "relative top-0 flex justify-center",
130
+ children: /*#__PURE__*/jsx(Button, {
131
+ className: className,
132
+ label: t("neetoSlack.slack.channelListRefreshButton"),
133
+ style: "link",
134
+ onClick: function onClick() {
135
+ return slackChannelRefresh(channelRefreshHandler);
136
+ }
137
+ })
138
+ });
139
139
  });
140
- var SlackRefreshChannelListButton$1 = /*#__PURE__*/React__default.memo(SlackRefreshChannelListButton);
140
+ var SlackRefreshChannelListButton$1 = /*#__PURE__*/memo(SlackRefreshChannelListButton);
141
141
 
142
- function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
143
- function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
142
+ function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
143
+ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
144
144
  var EditPane = function EditPane(_ref) {
145
145
  var _ref$isPaneOpen = _ref.isPaneOpen,
146
146
  isPaneOpen = _ref$isPaneOpen === void 0 ? false : _ref$isPaneOpen,
@@ -148,7 +148,7 @@ var EditPane = function EditPane(_ref) {
148
148
  onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
149
149
  _ref$title = _ref.title,
150
150
  title = _ref$title === void 0 ? "" : _ref$title,
151
- children = _ref.children,
151
+ _children = _ref.children,
152
152
  _ref$initialFormValue = _ref.initialFormValues,
153
153
  initialFormValues = _ref$initialFormValue === void 0 ? {} : _ref$initialFormValue,
154
154
  _ref$handleSubmit = _ref.handleSubmit,
@@ -166,58 +166,77 @@ var EditPane = function EditPane(_ref) {
166
166
  var handleFormSubmit = function handleFormSubmit(values, formikBag) {
167
167
  handleSubmit(values, formikBag);
168
168
  };
169
- return /*#__PURE__*/React__default.createElement(Pane, _extends$1({
169
+ return /*#__PURE__*/jsxs(Pane, _objectSpread$2(_objectSpread$2({
170
170
  onClose: onClose,
171
171
  isOpen: isPaneOpen
172
- }, paneProps), /*#__PURE__*/React__default.createElement(Pane.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
173
- style: "h2",
174
- weight: "semibold"
175
- }, isEmpty(title) ? t("neetoSlack.slack.editPane") : title)), /*#__PURE__*/React__default.createElement(Form, {
176
- className: "neeto-ui-w-full",
177
- formikProps: {
178
- enableReinitialize: true,
179
- initialValues: initialFormValues,
180
- onSubmit: handleFormSubmit,
181
- validationSchema: buildValidationSchema(validationSchema)
182
- }
183
- }, function (formikProps) {
184
- var _formikProps$errors;
185
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement("div", {
186
- className: "neeto-ui-mb-4 neeto-ui-w-full"
187
- }, /*#__PURE__*/React__default.createElement(Label, null, /*#__PURE__*/React__default.createElement(Typography, {
188
- className: "neeto-ui-text-gray-700 neeto-ui-mb-2",
189
- style: "body2",
190
- weight: "bold"
191
- }, t("neetoSlack.slack.configure.sendToDescription"), /*#__PURE__*/React__default.createElement("sup", null, "*"))), /*#__PURE__*/React__default.createElement("div", {
192
- className: "relative flex flex-col items-start gap-y-3"
193
- }, /*#__PURE__*/React__default.createElement(Select, {
194
- isSearchable: true,
195
- required: true,
196
- className: "w-full",
197
- error: formikProps === null || formikProps === void 0 || (_formikProps$errors = formikProps.errors) === null || _formikProps$errors === void 0 ? void 0 : _formikProps$errors.selectedChannel,
198
- name: "selectedChannel",
199
- placeholder: t("neetoSlack.slack.placeholder"),
200
- size: "large",
201
- options: formikProps.values.channels.map(function (_ref2) {
202
- var label = _ref2.label,
203
- value = _ref2.value,
204
- isPrivate = _ref2.isPrivate;
205
- return {
206
- label: /*#__PURE__*/React__default.createElement(ChannelSelectOption, {
207
- isPrivate: isPrivate,
208
- label: label
209
- }),
210
- value: value
211
- };
172
+ }, paneProps), {}, {
173
+ children: [/*#__PURE__*/jsx(Pane.Header, {
174
+ children: /*#__PURE__*/jsx(Typography, {
175
+ style: "h2",
176
+ weight: "semibold",
177
+ children: isEmpty(title) ? t("neetoSlack.slack.editPane") : title
212
178
  })
213
- }), /*#__PURE__*/React__default.createElement(SlackRefreshChannelListButton$1, {
214
- channelRefreshHandler: channelRefreshHandler
215
- }))), is(Function, children) ? children(_objectSpread$1({}, formikProps)) : children), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(ActionBlock, {
216
- cancelButtonProps: {
217
- onClick: onClose
179
+ }), /*#__PURE__*/jsx(NeetoUIForm, {
180
+ className: "neeto-ui-w-full",
181
+ formikProps: {
182
+ enableReinitialize: true,
183
+ initialValues: initialFormValues,
184
+ onSubmit: handleFormSubmit,
185
+ validationSchema: buildValidationSchema(validationSchema)
218
186
  },
219
- isSubmitting: isSubmitting || formikProps.isSubmitting
220
- })));
187
+ children: function children(formikProps) {
188
+ var _formikProps$errors;
189
+ return /*#__PURE__*/jsxs(Fragment, {
190
+ children: [/*#__PURE__*/jsxs(Pane.Body, {
191
+ children: [/*#__PURE__*/jsxs("div", {
192
+ className: "neeto-ui-mb-4 neeto-ui-w-full",
193
+ children: [/*#__PURE__*/jsx(Label, {
194
+ children: /*#__PURE__*/jsxs(Typography, {
195
+ className: "neeto-ui-text-gray-700 neeto-ui-mb-2",
196
+ style: "body2",
197
+ weight: "bold",
198
+ children: [t("neetoSlack.slack.configure.sendToDescription"), /*#__PURE__*/jsx("sup", {
199
+ children: "*"
200
+ })]
201
+ })
202
+ }), /*#__PURE__*/jsxs("div", {
203
+ className: "relative flex flex-col items-start gap-y-3",
204
+ children: [/*#__PURE__*/jsx(Select, {
205
+ isSearchable: true,
206
+ required: true,
207
+ className: "w-full",
208
+ error: formikProps === null || formikProps === void 0 || (_formikProps$errors = formikProps.errors) === null || _formikProps$errors === void 0 ? void 0 : _formikProps$errors.selectedChannel,
209
+ name: "selectedChannel",
210
+ placeholder: t("neetoSlack.slack.placeholder"),
211
+ size: "large",
212
+ options: formikProps.values.channels.map(function (_ref2) {
213
+ var label = _ref2.label,
214
+ value = _ref2.value,
215
+ isPrivate = _ref2.isPrivate;
216
+ return {
217
+ label: /*#__PURE__*/jsx(ChannelSelectOption, {
218
+ isPrivate: isPrivate,
219
+ label: label
220
+ }),
221
+ value: value
222
+ };
223
+ })
224
+ }), /*#__PURE__*/jsx(SlackRefreshChannelListButton$1, {
225
+ channelRefreshHandler: channelRefreshHandler
226
+ })]
227
+ })]
228
+ }), is(Function, _children) ? _children(_objectSpread$2({}, formikProps)) : _children]
229
+ }), /*#__PURE__*/jsx(Pane.Footer, {
230
+ children: /*#__PURE__*/jsx(ActionBlock, {
231
+ cancelButtonProps: {
232
+ onClick: onClose
233
+ },
234
+ isSubmitting: isSubmitting || formikProps.isSubmitting
235
+ })
236
+ })]
237
+ });
238
+ }
239
+ })]
221
240
  }));
222
241
  };
223
242
 
@@ -232,51 +251,57 @@ var Settings = withT(function (_ref) {
232
251
  fields = _ref$fields === void 0 ? [] : _ref$fields,
233
252
  _ref$onEdit = _ref.onEdit,
234
253
  onEdit = _ref$onEdit === void 0 ? noop : _ref$onEdit;
235
- return /*#__PURE__*/React__default.createElement("div", {
236
- className: "mx-auto w-full max-w-3xl"
237
- }, /*#__PURE__*/React__default.createElement("div", {
238
- className: "neeto-ui-border-gray-300 neeto-ui-rounded-xl mt-10 w-full border p-6"
239
- }, /*#__PURE__*/React__default.createElement("div", {
240
- className: "space-y-4"
241
- }, /*#__PURE__*/React__default.createElement(Slack, {
242
- className: "neeto-ui-text-gray-600",
243
- size: 48
244
- }), /*#__PURE__*/React__default.createElement("div", {
245
- className: "flex items-center space-x-4"
246
- }, /*#__PURE__*/React__default.createElement(Typography, {
247
- style: "h2"
248
- }, /*#__PURE__*/React__default.createElement(Trans, {
249
- i18nKey: "neetoSlack.slack.settings.title",
250
- values: {
251
- teamName: teamName
252
- },
253
- components: {
254
- a: /*#__PURE__*/React__default.createElement("a", {
255
- className: "neeto-ui-text-primary-800",
256
- href: isEmpty(slackUrl) ? toSlackUrl(teamName) : slackUrl
257
- })
258
- }
259
- })), /*#__PURE__*/React__default.createElement("div", {
260
- className: "neeto-ui-bg-success-500 neeto-ui-text-white neeto-ui-rounded-full flex items-center justify-center p-1"
261
- }, /*#__PURE__*/React__default.createElement(Check, {
262
- size: 24
263
- }))), fields.map(function (field) {
264
- return /*#__PURE__*/React__default.createElement(Field, {
265
- key: field.name,
266
- name: field.name,
267
- value: field.value
268
- });
269
- }), children), /*#__PURE__*/React__default.createElement(Button, {
270
- className: "mt-8",
271
- label: t("neetoSlack.common.edit"),
272
- onClick: onEdit
273
- })));
254
+ return /*#__PURE__*/jsx("div", {
255
+ className: "mx-auto w-full max-w-3xl",
256
+ children: /*#__PURE__*/jsxs("div", {
257
+ className: "neeto-ui-border-gray-300 neeto-ui-rounded-xl mt-10 w-full border p-6",
258
+ children: [/*#__PURE__*/jsxs("div", {
259
+ className: "space-y-4",
260
+ children: [/*#__PURE__*/jsx(Slack, {
261
+ className: "neeto-ui-text-gray-600",
262
+ size: 48
263
+ }), /*#__PURE__*/jsxs("div", {
264
+ className: "flex items-center space-x-4",
265
+ children: [/*#__PURE__*/jsx(Typography, {
266
+ style: "h2",
267
+ children: /*#__PURE__*/jsx(Trans, {
268
+ i18nKey: "neetoSlack.slack.settings.title",
269
+ values: {
270
+ teamName: teamName
271
+ },
272
+ components: {
273
+ a: /*#__PURE__*/jsx(Button, {
274
+ className: "neeto-ui-text-2xl",
275
+ href: isEmpty(slackUrl) ? toSlackUrl(teamName) : slackUrl,
276
+ style: "link"
277
+ })
278
+ }
279
+ })
280
+ }), /*#__PURE__*/jsx("div", {
281
+ className: "neeto-ui-bg-success-500 neeto-ui-text-white neeto-ui-rounded-full flex items-center justify-center p-1",
282
+ children: /*#__PURE__*/jsx(Check, {
283
+ size: 24
284
+ })
285
+ })]
286
+ }), fields.map(function (field) {
287
+ return /*#__PURE__*/jsx(Field, {
288
+ name: field.name,
289
+ value: field.value
290
+ }, field.name);
291
+ }), children]
292
+ }), /*#__PURE__*/jsx(Button, {
293
+ className: "mt-8",
294
+ label: t("neetoSlack.common.edit"),
295
+ onClick: onEdit
296
+ })]
297
+ })
298
+ });
274
299
  });
275
300
  Settings.EditPane = EditPane;
276
301
 
277
302
  var Configure = withT(function (_ref) {
278
303
  var t = _ref.t,
279
- children = _ref.children,
304
+ _children = _ref.children,
280
305
  teamName = _ref.teamName,
281
306
  _ref$slackUrl = _ref.slackUrl,
282
307
  slackUrl = _ref$slackUrl === void 0 ? "" : _ref$slackUrl,
@@ -288,92 +313,107 @@ var Configure = withT(function (_ref) {
288
313
  channelRefreshHandler = _ref.channelRefreshHandler,
289
314
  _ref$channelSelectLab = _ref.channelSelectLabel,
290
315
  channelSelectLabel = _ref$channelSelectLab === void 0 ? "" : _ref$channelSelectLab;
291
- return /*#__PURE__*/React__default.createElement("div", {
292
- className: classNames("neeto-ui-w-full neeto-ui-space-y-6 mx-auto max-w-lg", className)
293
- }, /*#__PURE__*/React__default.createElement("div", {
294
- className: "neeto-ui-mb-6 neeto-ui-w-full"
295
- }, /*#__PURE__*/React__default.createElement(Typography, {
296
- style: "h3"
297
- }, /*#__PURE__*/React__default.createElement(Trans, {
298
- i18nKey: "neetoSlack.slack.configure.title",
299
- values: {
300
- teamName: teamName
301
- },
302
- components: {
303
- a: /*#__PURE__*/React__default.createElement("a", {
304
- className: "neeto-ui-text-primary-800",
305
- href: isEmpty(slackUrl) ? toSlackUrl(teamName) : slackUrl
306
- })
307
- }
308
- }))), /*#__PURE__*/React__default.createElement(Form, {
309
- className: "neeto-ui-w-full max-w-md",
310
- formikProps: {
311
- enableReinitialize: true,
312
- initialValues: initialFormValues,
313
- onSubmit: handleSubmit,
314
- validationSchema: buildValidationSchema(validationSchema)
315
- }
316
- }, function (formikProps) {
317
- var _formikProps$errors;
318
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
319
- className: "neeto-ui-mb-4 neeto-ui-w-full"
320
- }, /*#__PURE__*/React__default.createElement(Typography, {
321
- className: "neeto-ui-text-gray-700 neeto-ui-mb-3",
322
- style: "body2",
323
- weight: "normal"
324
- }, isEmpty(channelSelectLabel) ? t("neetoSlack.slack.configure.sendToDescription") : channelSelectLabel, /*#__PURE__*/React__default.createElement("sup", null, "*")), /*#__PURE__*/React__default.createElement("div", {
325
- className: "relative flex flex-col items-start gap-y-3"
326
- }, /*#__PURE__*/React__default.createElement(Select, {
327
- isSearchable: true,
328
- required: true,
329
- className: "w-full",
330
- error: formikProps === null || formikProps === void 0 || (_formikProps$errors = formikProps.errors) === null || _formikProps$errors === void 0 ? void 0 : _formikProps$errors.selectedChannel,
331
- name: "selectedChannel",
332
- placeholder: t("neetoSlack.slack.placeholder"),
333
- size: "large",
334
- options: formikProps.values.channels.map(function (_ref2) {
335
- var label = _ref2.label,
336
- value = _ref2.value,
337
- isPrivate = _ref2.isPrivate;
338
- return {
339
- label: /*#__PURE__*/React__default.createElement(ChannelSelectOption, {
340
- isPrivate: isPrivate,
341
- label: label
342
- }),
343
- value: value
344
- };
316
+ return /*#__PURE__*/jsxs("div", {
317
+ className: classNames("neeto-ui-w-full neeto-ui-space-y-6 mx-auto max-w-lg", className),
318
+ children: [/*#__PURE__*/jsx("div", {
319
+ className: "neeto-ui-mb-6 neeto-ui-w-full",
320
+ children: /*#__PURE__*/jsx(Typography, {
321
+ style: "h3",
322
+ children: /*#__PURE__*/jsx(Trans, {
323
+ i18nKey: "neetoSlack.slack.configure.title",
324
+ values: {
325
+ teamName: teamName
326
+ },
327
+ components: {
328
+ a: /*#__PURE__*/jsx(Button, {
329
+ className: "neeto-ui-text-xl",
330
+ href: isEmpty(slackUrl) ? toSlackUrl(teamName) : slackUrl,
331
+ style: "link"
332
+ })
333
+ }
334
+ })
345
335
  })
346
- }), /*#__PURE__*/React__default.createElement(SlackRefreshChannelListButton$1, {
347
- channelRefreshHandler: channelRefreshHandler
348
- }))), is(Function, children) ? children(formikProps) : children, /*#__PURE__*/React__default.createElement(Button, {
349
- label: t("neetoSlack.common.continue"),
350
- loading: isSubmitting,
351
- type: "submit"
352
- }));
353
- }));
336
+ }), /*#__PURE__*/jsx(NeetoUIForm, {
337
+ className: "neeto-ui-w-full max-w-md",
338
+ formikProps: {
339
+ enableReinitialize: true,
340
+ initialValues: initialFormValues,
341
+ onSubmit: handleSubmit,
342
+ validationSchema: buildValidationSchema(validationSchema)
343
+ },
344
+ children: function children(formikProps) {
345
+ var _formikProps$errors;
346
+ return /*#__PURE__*/jsxs(Fragment, {
347
+ children: [/*#__PURE__*/jsxs("div", {
348
+ className: "neeto-ui-mb-4 neeto-ui-w-full",
349
+ children: [/*#__PURE__*/jsxs(Typography, {
350
+ className: "neeto-ui-text-gray-700 neeto-ui-mb-3",
351
+ style: "body2",
352
+ weight: "normal",
353
+ children: [isEmpty(channelSelectLabel) ? t("neetoSlack.slack.configure.sendToDescription") : channelSelectLabel, /*#__PURE__*/jsx("sup", {
354
+ children: "*"
355
+ })]
356
+ }), /*#__PURE__*/jsxs("div", {
357
+ className: "relative flex flex-col items-start gap-y-3",
358
+ children: [/*#__PURE__*/jsx(Select, {
359
+ isSearchable: true,
360
+ required: true,
361
+ className: "w-full",
362
+ error: formikProps === null || formikProps === void 0 || (_formikProps$errors = formikProps.errors) === null || _formikProps$errors === void 0 ? void 0 : _formikProps$errors.selectedChannel,
363
+ name: "selectedChannel",
364
+ placeholder: t("neetoSlack.slack.placeholder"),
365
+ size: "large",
366
+ options: formikProps.values.channels.map(function (_ref2) {
367
+ var label = _ref2.label,
368
+ value = _ref2.value,
369
+ isPrivate = _ref2.isPrivate;
370
+ return {
371
+ label: /*#__PURE__*/jsx(ChannelSelectOption, {
372
+ isPrivate: isPrivate,
373
+ label: label
374
+ }),
375
+ value: value
376
+ };
377
+ })
378
+ }), /*#__PURE__*/jsx(SlackRefreshChannelListButton$1, {
379
+ channelRefreshHandler: channelRefreshHandler
380
+ })]
381
+ })]
382
+ }), is(Function, _children) ? _children(formikProps) : _children, /*#__PURE__*/jsx(Button, {
383
+ label: t("neetoSlack.common.continue"),
384
+ loading: isSubmitting,
385
+ type: "submit"
386
+ })]
387
+ });
388
+ }
389
+ })]
390
+ });
354
391
  });
355
392
 
356
393
  var Connect = withT(function (_ref) {
357
394
  var t = _ref.t,
358
395
  handleRedirectToSlack = _ref.handleRedirectToSlack,
359
396
  isAuthorizeUrlFetching = _ref.isAuthorizeUrlFetching;
360
- return /*#__PURE__*/React__default.createElement("div", {
361
- className: "neeto-ui-w-full mx-auto max-w-lg"
362
- }, /*#__PURE__*/React__default.createElement(Slack, {
363
- size: 32
364
- }), /*#__PURE__*/React__default.createElement(Typography, {
365
- className: "neeto-ui-text-gray-800 neeto-ui-mb-0.5 neeto-ui-mt-6",
366
- style: "h2",
367
- weight: "semibold"
368
- }, t("neetoSlack.slack.connect.title")), /*#__PURE__*/React__default.createElement(Typography, {
369
- className: "neeto-ui-text-gray-700 neeto-ui-mb-4",
370
- style: "body1",
371
- weight: "normal"
372
- }, t("neetoSlack.slack.connect.description")), /*#__PURE__*/React__default.createElement(Button, {
373
- label: t("neetoSlack.slack.connect.loginButton"),
374
- loading: isAuthorizeUrlFetching,
375
- onClick: handleRedirectToSlack
376
- }));
397
+ return /*#__PURE__*/jsxs("div", {
398
+ className: "neeto-ui-w-full mx-auto max-w-lg",
399
+ children: [/*#__PURE__*/jsx(Slack, {
400
+ size: 32
401
+ }), /*#__PURE__*/jsx(Typography, {
402
+ className: "neeto-ui-text-gray-800 neeto-ui-mb-0.5 neeto-ui-mt-6",
403
+ style: "h2",
404
+ weight: "semibold",
405
+ children: t("neetoSlack.slack.connect.title")
406
+ }), /*#__PURE__*/jsx(Typography, {
407
+ className: "neeto-ui-text-gray-700 neeto-ui-mb-4",
408
+ style: "body1",
409
+ weight: "normal",
410
+ children: t("neetoSlack.slack.connect.description")
411
+ }), /*#__PURE__*/jsx(Button, {
412
+ label: t("neetoSlack.slack.connect.loginButton"),
413
+ loading: isAuthorizeUrlFetching,
414
+ onClick: handleRedirectToSlack
415
+ })]
416
+ });
377
417
  });
378
418
 
379
419
  var _path, _defs;
@@ -402,6 +442,8 @@ const SvgSuccess = props => /*#__PURE__*/React.createElement("svg", _extends({
402
442
  height: 344
403
443
  }))));
404
444
 
445
+ function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
446
+ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
405
447
  var Finish = withT(function (_ref) {
406
448
  var t = _ref.t,
407
449
  children = _ref.children,
@@ -417,38 +459,40 @@ var Finish = withT(function (_ref) {
417
459
  buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
418
460
  _ref$secondaryButtonP = _ref.secondaryButtonProps,
419
461
  secondaryButtonProps = _ref$secondaryButtonP === void 0 ? {} : _ref$secondaryButtonP;
420
- return /*#__PURE__*/React__default.createElement("div", {
421
- className: "neeto-ui-w-full mx-auto max-w-lg"
422
- }, /*#__PURE__*/React__default.createElement(SvgSuccess, null), /*#__PURE__*/React__default.createElement(Typography, {
423
- className: "neeto-ui-text-gray-800 neeto-ui-mb-6 neeto-ui-mt-4",
424
- style: "h3",
425
- weight: "bold"
426
- }, /*#__PURE__*/React__default.createElement(Trans, {
427
- i18nKey: "neetoSlack.slack.finish.title",
428
- values: {
429
- teamName: teamName
430
- }
431
- })), isNotEmpty(fields) && fields.map(function (field, index) {
432
- return /*#__PURE__*/React__default.createElement(Field, {
433
- key: field.name,
434
- name: field.name,
435
- value: field.value,
436
- className: classNames("neeto-ui-pt-3 neeto-ui-border-gray-300", {
437
- "border-t": index !== 0
462
+ return /*#__PURE__*/jsxs("div", {
463
+ className: "neeto-ui-w-full mx-auto max-w-lg",
464
+ children: [/*#__PURE__*/jsx(SvgSuccess, {}), /*#__PURE__*/jsx(Typography, {
465
+ className: "neeto-ui-text-gray-800 neeto-ui-mb-6 neeto-ui-mt-4",
466
+ style: "h3",
467
+ weight: "bold",
468
+ children: /*#__PURE__*/jsx(Trans, {
469
+ i18nKey: "neetoSlack.slack.finish.title",
470
+ values: {
471
+ teamName: teamName
472
+ }
438
473
  })
439
- });
440
- }), children, /*#__PURE__*/React__default.createElement("div", {
441
- className: "neeto-ui-flex neeto-ui-w-full neeto-ui-flex-row neeto-ui-mt-6"
442
- }, /*#__PURE__*/React__default.createElement(Button, _extends$1({
443
- className: "neeto-ui-my-1",
444
- label: t("neetoSlack.common.done"),
445
- onClick: onSuccess
446
- }, buttonProps)), isNotEmpty(secondaryButtonProps) && /*#__PURE__*/React__default.createElement(Button, _extends$1({
447
- className: "neeto-ui-my-1 neeto-ui-ml-2",
448
- label: t("neetoSlack.common.edit"),
449
- style: "secondary",
450
- onClick: onBack
451
- }, secondaryButtonProps))));
474
+ }), isNotEmpty(fields) && fields.map(function (field, index) {
475
+ return /*#__PURE__*/jsx(Field, {
476
+ name: field.name,
477
+ value: field.value,
478
+ className: classNames("neeto-ui-pt-3 neeto-ui-border-gray-300", {
479
+ "border-t": index !== 0
480
+ })
481
+ }, field.name);
482
+ }), children, /*#__PURE__*/jsxs("div", {
483
+ className: "neeto-ui-flex neeto-ui-w-full neeto-ui-flex-row neeto-ui-mt-6",
484
+ children: [/*#__PURE__*/jsx(Button, _objectSpread$1({
485
+ className: "neeto-ui-my-1",
486
+ label: t("neetoSlack.common.done"),
487
+ onClick: onSuccess
488
+ }, buttonProps)), isNotEmpty(secondaryButtonProps) && /*#__PURE__*/jsx(Button, _objectSpread$1({
489
+ className: "neeto-ui-my-1 neeto-ui-ml-2",
490
+ label: t("neetoSlack.common.edit"),
491
+ style: "secondary",
492
+ onClick: onBack
493
+ }, secondaryButtonProps))]
494
+ })]
495
+ });
452
496
  });
453
497
 
454
498
  function _objectWithoutPropertiesLoose(source, excluded) {