@epam/ai-dial-deployment-creation-form 1.0.1 → 1.0.2

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.
Files changed (3) hide show
  1. package/components/DeploymentCreationForm/DeploymentCreationForm.d.ts.map +1 -1
  2. package/index.js +111 -110
  3. package/package.json +2 -2
package/components/DeploymentCreationForm/DeploymentCreationForm.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DeploymentCreationForm.d.ts","sourceRoot":"","sources":["../../../src/components/DeploymentCreationForm/DeploymentCreationForm.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAGzF,sGAAsG;AACtG,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAoGlE,CAAC"}
1
+ {"version":3,"file":"DeploymentCreationForm.d.ts","sourceRoot":"","sources":["../../../src/components/DeploymentCreationForm/DeploymentCreationForm.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAqB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAGzF,sGAAsG;AACtG,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAqGlE,CAAC"}
package/index.js CHANGED
@@ -1,28 +1,28 @@
1
- import { mergeClasses as e } from "@epam/ai-dial-chat-shared";
2
- import { ButtonAppearance as t, ButtonVariant as n, DIAL_ICON_SIZE as r, DIAL_KIT_ICON_STROKE as i, DangerIconButton as a, ElementSize as o, Input as s, LinkButton as c, Popup as l, Select as u, TagInput as d, Textarea as f } from "@epam/ai-dial-ui-kit";
3
- import { useEffect as p, useRef as m, useState as h } from "react";
4
- import { IconPencil as g, IconPlus as _, IconTrashX as v } from "@tabler/icons-react";
5
- import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
1
+ import { TAG_INPUT_TAG_CLASS_NAME as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
2
+ import { ButtonAppearance as n, ButtonVariant as r, DIAL_ICON_SIZE as i, DIAL_KIT_ICON_STROKE as a, DangerIconButton as o, ElementSize as s, Input as c, LinkButton as l, Popup as u, Select as d, TagInput as f, Textarea as p } from "@epam/ai-dial-ui-kit";
3
+ import { useEffect as m, useRef as h, useState as g } from "react";
4
+ import { IconPencil as _, IconPlus as v, IconTrashX as y } from "@tabler/icons-react";
5
+ import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
6
6
  //#region src/components/DeploymentLocalesField/DeploymentLocalesField.tsx
7
- var S = (e, t, n) => ({
7
+ var C = (e, t, n) => ({
8
8
  id: e,
9
9
  language: n.find((e) => !t.has(e.code))?.code ?? "",
10
10
  name: "",
11
11
  description: ""
12
- }), C = ({ value: d, onChange: C, availableLocaleOptions: w = [], labels: T, className: E, summaryClassName: D = "dial-body-text text-secondary", rowLabelClassName: O = "dial-tiny-lead-text text-secondary", requiredMarkClassName: k = "text-error" }) => {
13
- let { summaryLabel: A, editLabel: j, popupTitle: M, addLocaleLabel: N, localeRowLabel: P = "Locale", languageLabel: F, nameLabel: I, namePlaceholder: L, descriptionLabel: R, descriptionPlaceholder: z, deleteAriaLabel: B, cancelLabel: V = "Cancel", saveLabel: H = "Save" } = T, [U, W] = h(!1), [G, K] = h([]), q = m(0);
14
- p(() => {
15
- U && K(d.length > 0 ? d : [S(`locale-row-${++q.current}`, /* @__PURE__ */ new Set(), w)]);
12
+ }), w = ({ value: e, onChange: f, availableLocaleOptions: w = [], labels: T, className: E, summaryClassName: D = "dial-body-text text-secondary", rowLabelClassName: O = "dial-tiny-lead-text text-secondary", requiredMarkClassName: k = "text-error" }) => {
13
+ let { summaryLabel: A, editLabel: j, popupTitle: M, addLocaleLabel: N, localeRowLabel: P = "Locale", languageLabel: F, nameLabel: I, namePlaceholder: L, descriptionLabel: R, descriptionPlaceholder: z, deleteAriaLabel: B, cancelLabel: V = "Cancel", saveLabel: H = "Save" } = T, [U, W] = g(!1), [G, K] = g([]), q = h(0);
14
+ m(() => {
15
+ U && K(e.length > 0 ? e : [C(`locale-row-${++q.current}`, /* @__PURE__ */ new Set(), w)]);
16
16
  }, [
17
17
  U,
18
- d,
18
+ e,
19
19
  w
20
20
  ]);
21
21
  let J = () => W(!0), Y = () => W(!1), X = () => {
22
- C(G.filter((e) => e.language && e.name)), W(!1);
22
+ f(G.filter((e) => e.language && e.name)), W(!1);
23
23
  }, Z = () => {
24
24
  let e = new Set(G.map((e) => e.language).filter(Boolean));
25
- K((t) => [...t, S(`locale-row-${++q.current}`, e, w)]);
25
+ K((t) => [...t, C(`locale-row-${++q.current}`, e, w)]);
26
26
  }, Q = (e, t) => {
27
27
  K((n) => n.map((n) => n.id === e ? {
28
28
  ...n,
@@ -31,24 +31,24 @@ var S = (e, t, n) => ({
31
31
  }, $ = (e) => {
32
32
  K((t) => t.filter((t) => t.id !== e));
33
33
  }, ee = (e) => w.find((t) => t.code === e)?.label ?? e.toUpperCase(), te = G.some((e) => !e.language || !e.name);
34
- return /* @__PURE__ */ x("div", {
35
- className: e("flex items-center gap-2", E),
34
+ return /* @__PURE__ */ S("div", {
35
+ className: t("flex items-center gap-2", E),
36
36
  children: [
37
- /* @__PURE__ */ b("span", {
37
+ /* @__PURE__ */ x("span", {
38
38
  className: D,
39
- children: `${A}: ${d.length > 0 ? d.map((e) => `[${ee(e.language)}]`).join(", ") : "—"}`
39
+ children: `${A}: ${e.length > 0 ? e.map((e) => `[${ee(e.language)}]`).join(", ") : "—"}`
40
40
  }),
41
- /* @__PURE__ */ b(c, {
41
+ /* @__PURE__ */ x(l, {
42
42
  label: j,
43
- iconBefore: /* @__PURE__ */ b(g, {
44
- size: r.SM,
43
+ iconBefore: /* @__PURE__ */ x(_, {
44
+ size: i.SM,
45
45
  "aria-hidden": !0,
46
- stroke: i
46
+ stroke: a
47
47
  }),
48
48
  className: "!px-0",
49
49
  onClick: J
50
50
  }),
51
- /* @__PURE__ */ b(l, {
51
+ /* @__PURE__ */ x(u, {
52
52
  open: U,
53
53
  header: M,
54
54
  onClose: Y,
@@ -57,67 +57,67 @@ var S = (e, t, n) => ({
57
57
  onClick: Y
58
58
  }, {
59
59
  label: H,
60
- variant: n.Primary,
60
+ variant: r.Primary,
61
61
  disabled: te,
62
62
  onClick: X
63
63
  }],
64
- children: /* @__PURE__ */ x("div", {
64
+ children: /* @__PURE__ */ S("div", {
65
65
  className: "flex flex-col gap-8 px-6 py-3",
66
- children: [G.map((e, n) => {
67
- let c = new Set(G.filter((t) => t.id !== e.id).map((e) => e.language).filter(Boolean));
68
- return /* @__PURE__ */ x("div", {
66
+ children: [G.map((e, t) => {
67
+ let r = new Set(G.filter((t) => t.id !== e.id).map((e) => e.language).filter(Boolean));
68
+ return /* @__PURE__ */ S("div", {
69
69
  className: "flex flex-col gap-2",
70
- children: [/* @__PURE__ */ x("div", {
70
+ children: [/* @__PURE__ */ S("div", {
71
71
  className: "flex items-center justify-between",
72
- children: [/* @__PURE__ */ x("span", {
72
+ children: [/* @__PURE__ */ S("span", {
73
73
  className: O,
74
74
  children: [
75
75
  P,
76
76
  " ",
77
- n + 1
77
+ t + 1
78
78
  ]
79
- }), /* @__PURE__ */ b(a, {
80
- appearance: t.Ghost,
81
- size: o.Small,
82
- icon: /* @__PURE__ */ b(v, {
83
- size: r.SM,
79
+ }), /* @__PURE__ */ x(o, {
80
+ appearance: n.Ghost,
81
+ size: s.Small,
82
+ icon: /* @__PURE__ */ x(y, {
83
+ size: i.SM,
84
84
  "aria-hidden": !0,
85
- stroke: i
85
+ stroke: a
86
86
  }),
87
- "aria-label": `${B} ${n + 1}`,
87
+ "aria-label": `${B} ${t + 1}`,
88
88
  onClick: () => $(e.id)
89
89
  })]
90
- }), /* @__PURE__ */ x("div", {
90
+ }), /* @__PURE__ */ S("div", {
91
91
  role: "group",
92
- "aria-label": `${P} ${n + 1}`,
92
+ "aria-label": `${P} ${t + 1}`,
93
93
  className: "flex flex-col gap-5",
94
- children: [/* @__PURE__ */ x("div", {
94
+ children: [/* @__PURE__ */ S("div", {
95
95
  className: "flex items-start gap-5",
96
- children: [/* @__PURE__ */ b(u, {
96
+ children: [/* @__PURE__ */ x(d, {
97
97
  id: `${e.id}-language`,
98
98
  labelProps: { label: F },
99
99
  className: "shrink-0 basis-20",
100
100
  options: w.map((e) => ({
101
101
  value: e.code,
102
102
  label: e.label,
103
- disabled: c.has(e.code)
103
+ disabled: r.has(e.code)
104
104
  })),
105
105
  value: e.language,
106
106
  onChange: (t) => Q(e.id, { language: t })
107
- }), /* @__PURE__ */ b(s, {
107
+ }), /* @__PURE__ */ x(c, {
108
108
  id: `${e.id}-name`,
109
109
  containerClassName: "min-w-0 flex-1",
110
110
  required: !0,
111
111
  value: e.name,
112
112
  onChange: (t) => Q(e.id, { name: t ?? "" }),
113
- labelProps: { label: /* @__PURE__ */ x(y, { children: [I, /* @__PURE__ */ b("span", {
113
+ labelProps: { label: /* @__PURE__ */ S(b, { children: [I, /* @__PURE__ */ x("span", {
114
114
  "aria-hidden": !0,
115
115
  className: k,
116
116
  children: "*"
117
117
  })] }) },
118
118
  placeholder: L
119
119
  })]
120
- }), /* @__PURE__ */ b(f, {
120
+ }), /* @__PURE__ */ x(p, {
121
121
  id: `${e.id}-description`,
122
122
  resize: !0,
123
123
  value: e.description,
@@ -127,12 +127,12 @@ var S = (e, t, n) => ({
127
127
  })]
128
128
  })]
129
129
  }, e.id);
130
- }), /* @__PURE__ */ b(c, {
130
+ }), /* @__PURE__ */ x(l, {
131
131
  label: N,
132
- iconBefore: /* @__PURE__ */ b(_, {
133
- size: r.SM,
132
+ iconBefore: /* @__PURE__ */ x(v, {
133
+ size: i.SM,
134
134
  "aria-hidden": !0,
135
- stroke: i
135
+ stroke: a
136
136
  }),
137
137
  className: "self-start",
138
138
  onClick: Z,
@@ -142,88 +142,89 @@ var S = (e, t, n) => ({
142
142
  })
143
143
  ]
144
144
  });
145
- }, w = ({ values: t, errors: n, onChange: r, onNameBlur: i, onVersionBlur: a, labels: o, styles: c, availableLocaleOptions: l = [] }) => {
146
- let u = m(null), h = m(null), g = m(!1), _ = !!(n.name || n.version);
147
- return p(() => {
148
- _ && !g.current && (n.name ? u : h).current?.focus(), g.current = _;
145
+ }, T = ({ values: n, errors: r, onChange: i, onNameBlur: a, onVersionBlur: o, labels: s, styles: l, availableLocaleOptions: u = [] }) => {
146
+ let d = h(null), g = h(null), _ = h(!1), v = !!(r.name || r.version);
147
+ return m(() => {
148
+ v && !_.current && (r.name ? d : g).current?.focus(), _.current = v;
149
149
  }, [
150
- _,
151
- n.name,
152
- n.version
153
- ]), /* @__PURE__ */ x("div", {
154
- role: o.ariaLabel ? "group" : void 0,
155
- "aria-label": o.ariaLabel,
156
- className: e("flex flex-col gap-4", c?.root),
150
+ v,
151
+ r.name,
152
+ r.version
153
+ ]), /* @__PURE__ */ S("div", {
154
+ role: s.ariaLabel ? "group" : void 0,
155
+ "aria-label": s.ariaLabel,
156
+ className: t("flex flex-col gap-4", l?.root),
157
157
  children: [
158
- /* @__PURE__ */ b(s, {
158
+ /* @__PURE__ */ x(c, {
159
159
  id: "deployment-creation-form-name",
160
- inputRef: u,
161
- value: t.name,
162
- onChange: (e) => r({ name: e ?? "" }),
163
- onBlur: i,
160
+ inputRef: d,
161
+ value: n.name,
162
+ onChange: (e) => i({ name: e ?? "" }),
163
+ onBlur: a,
164
164
  labelProps: {
165
- label: o.name.label,
165
+ label: s.name.label,
166
166
  required: !0
167
167
  },
168
- placeholder: o.name.placeholder,
169
- error: n.name || void 0,
170
- invalid: !!n.name,
171
- containerClassName: c?.field
168
+ placeholder: s.name.placeholder,
169
+ error: r.name || void 0,
170
+ invalid: !!r.name,
171
+ containerClassName: l?.field
172
172
  }),
173
- /* @__PURE__ */ b(f, {
173
+ /* @__PURE__ */ x(p, {
174
174
  id: "deployment-creation-form-description",
175
- value: t.description,
176
- onChange: (e) => r({ description: e }),
177
- labelProps: { label: o.description.label },
178
- placeholder: o.description.placeholder,
179
- containerClassName: c?.field
175
+ value: n.description,
176
+ onChange: (e) => i({ description: e }),
177
+ labelProps: { label: s.description.label },
178
+ placeholder: s.description.placeholder,
179
+ containerClassName: l?.field
180
180
  }),
181
- /* @__PURE__ */ b(C, {
182
- value: t.otherLocales,
183
- onChange: (e) => r({ otherLocales: e }),
184
- availableLocaleOptions: l,
185
- labels: o.otherLocales,
186
- className: c?.field
181
+ /* @__PURE__ */ x(w, {
182
+ value: n.otherLocales,
183
+ onChange: (e) => i({ otherLocales: e }),
184
+ availableLocaleOptions: u,
185
+ labels: s.otherLocales,
186
+ className: l?.field
187
187
  }),
188
- /* @__PURE__ */ b(s, {
188
+ /* @__PURE__ */ x(c, {
189
189
  id: "deployment-creation-form-icon-url",
190
- value: t.iconUrl,
191
- onChange: (e) => r({ iconUrl: e ?? "" }),
192
- labelProps: { label: o.iconUrl.label },
193
- placeholder: o.iconUrl.placeholder,
194
- containerClassName: c?.field
190
+ value: n.iconUrl,
191
+ onChange: (e) => i({ iconUrl: e ?? "" }),
192
+ labelProps: { label: s.iconUrl.label },
193
+ placeholder: s.iconUrl.placeholder,
194
+ containerClassName: l?.field
195
195
  }),
196
- /* @__PURE__ */ b(s, {
196
+ /* @__PURE__ */ x(c, {
197
197
  id: "deployment-creation-form-version",
198
- inputRef: h,
199
- value: t.version,
200
- onChange: (e) => r({ version: e ?? "" }),
201
- onBlur: a,
202
- labelProps: { label: o.version.label },
203
- placeholder: o.version.placeholder,
204
- error: n.version || void 0,
205
- invalid: !!n.version,
206
- containerClassName: c?.field
198
+ inputRef: g,
199
+ value: n.version,
200
+ onChange: (e) => i({ version: e ?? "" }),
201
+ onBlur: o,
202
+ labelProps: { label: s.version.label },
203
+ placeholder: s.version.placeholder,
204
+ error: r.version || void 0,
205
+ invalid: !!r.version,
206
+ containerClassName: l?.field
207
207
  }),
208
- /* @__PURE__ */ b("div", {
209
- className: c?.field,
210
- children: /* @__PURE__ */ b(d, {
208
+ /* @__PURE__ */ x("div", {
209
+ className: l?.field,
210
+ children: /* @__PURE__ */ x(f, {
211
211
  id: "deployment-creation-form-topics",
212
- labelProps: { label: o.topics.label },
213
- placeholder: o.topics.placeholder,
214
- value: t.topics,
215
- onChange: (e) => r({ topics: e })
212
+ labelProps: { label: s.topics.label },
213
+ placeholder: s.topics.placeholder,
214
+ value: n.topics,
215
+ onChange: (e) => i({ topics: e }),
216
+ tagClassName: e
216
217
  })
217
218
  })
218
219
  ]
219
220
  });
220
- }, T = /* @__PURE__ */ function(e) {
221
+ }, E = /* @__PURE__ */ function(e) {
221
222
  return e.Required = "required", e.InvalidFormat = "invalid-format", e.TooLong = "too-long", e;
222
- }({}), E = /^[a-zA-Z0-9 _.-]+$/, D = /^[a-zA-Z0-9._-]+$/, O = (e, t = {}) => {
223
+ }({}), D = /^[a-zA-Z0-9 _.-]+$/, O = /^[a-zA-Z0-9._-]+$/, k = (e, t = {}) => {
223
224
  let n = {}, r = e.name.trim();
224
- r ? t.validateNamePattern && !E.test(r) && (n.name = T.InvalidFormat) : n.name = T.Required;
225
+ r ? t.validateNamePattern && !D.test(r) && (n.name = E.InvalidFormat) : n.name = E.Required;
225
226
  let i = e.version.trim();
226
- return t.validateVersionPattern && i && !D.test(i) && (n.version = T.InvalidFormat), n;
227
+ return t.validateVersionPattern && i && !O.test(i) && (n.version = E.InvalidFormat), n;
227
228
  };
228
229
  //#endregion
229
- export { T as DeploymentCreationFieldErrorCode, w as DeploymentCreationForm, C as DeploymentLocalesField, E as NAME_PATTERN, D as VERSION_PATTERN, O as validateDeploymentCreationFields };
230
+ export { E as DeploymentCreationFieldErrorCode, T as DeploymentCreationForm, w as DeploymentLocalesField, D as NAME_PATTERN, O as VERSION_PATTERN, k as validateDeploymentCreationFields };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-deployment-creation-form",
3
3
  "description": "Shared General-step field set for creating and editing a DIAL deployment",
4
- "version": "1.0.1",
4
+ "version": "1.0.2",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -16,7 +16,7 @@
16
16
  }
17
17
  },
18
18
  "peerDependencies": {
19
- "@epam/ai-dial-chat-shared": "1.0.1",
19
+ "@epam/ai-dial-chat-shared": "1.0.2",
20
20
  "@epam/ai-dial-ui-kit": "*",
21
21
  "@tabler/icons-react": "*",
22
22
  "react": "^19.0.0"