@logora/debate 0.3.50 → 0.3.52

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 (2) hide show
  1. package/dist/components/input/argument_input/ArgumentInput.js +146 -146
  2. package/package.json +1 -1
package/dist/components/input/argument_input/ArgumentInput.js CHANGED
@@ -1,9 +1,9 @@
1
- import { jsxs as _, jsx as i } from "react/jsx-runtime";
1
+ import { jsxs as _, jsx as s } from "react/jsx-runtime";
2
2
  import $e from "@rooks/use-sessionstorage-state";
3
3
  import { useRef as qe, useState as c, useEffect as M, Suspense as De, lazy as We } from "react";
4
4
  import { useIntl as Ye, FormattedMessage as ce } from "react-intl";
5
5
  import { useLocation as ke } from "react-router";
6
- import w from "classnames";
6
+ import S from "classnames";
7
7
  import n from "./ArgumentInput.module.scss.js";
8
8
  import { useDataProvider as Re } from "../../data/data_provider/useDataProvider.js";
9
9
  import { useList as je } from "../../list/list_provider/useList.js";
@@ -20,156 +20,156 @@ import { Avatar as et } from "../../user/avatar/Avatar.js";
20
20
  import { AuthorBox as tt } from "../../user/author_box/AuthorBox.js";
21
21
  import { TextEditor as nt } from "../text_editor/TextEditor.js";
22
22
  import { Icon as at } from "../../icons/icon/Icon.js";
23
- const it = We(() => import("../../modal/side_modal/index.js").then((I) => ({ default: I.SideModal }))), Nt = ({
24
- argumentListId: I,
23
+ const st = We(() => import("../../modal/side_modal/index.js").then((x) => ({ default: x.SideModal }))), Nt = ({
24
+ argumentListId: x,
25
25
  avatarSize: me = 48,
26
- disabled: j = !1,
26
+ disabled: z = !1,
27
27
  positions: a = [],
28
- disabledPositions: S = [],
28
+ disabledPositions: N = [],
29
29
  groupId: v,
30
- groupName: fe,
31
- groupType: z,
32
- hideSourceAction: ge = !1,
33
- isReply: u = !1,
34
- onSubmit: O,
35
- parentId: L,
30
+ groupName: ge,
31
+ groupType: O,
32
+ hideSourceAction: fe = !1,
33
+ isReply: d = !1,
34
+ onSubmit: J,
35
+ parentId: y,
36
36
  placeholder: he,
37
- positionId: b,
37
+ positionId: A,
38
38
  focusOnInit: pe = !1,
39
- activeOnInit: F = !1,
40
- userGuideUrl: J,
39
+ activeOnInit: P = !1,
40
+ userGuideUrl: K,
41
41
  hideUserGuideLink: _e = !1,
42
42
  hideCharCount: Me = !1,
43
43
  disableAutoActivate: ve = !1
44
44
  }) => {
45
- const o = Ye(), K = Re(), x = je(), h = ze(), {
46
- focus: G,
47
- setFocus: N,
48
- setReset: be,
49
- inputContent: P,
50
- setInputContent: Ae,
51
- setInputRichContent: Ce
52
- } = Oe(), { isLoggedIn: A, currentUser: d } = Je(), { errors: B, validate: E } = Ke(), { isMobile: m } = Ge(), we = ke(), H = qe(null), [V, U] = c([]), [$, q] = c(""), [Q, D] = c(null), [l, p] = c(null), [X, Z] = c(null), [ee, te] = c(!1), [C, ne] = c(!1), [ae, ie] = c({}), [f, Ie] = $e(
45
+ const r = Ye(), G = Re(), T = je(), h = ze(), {
46
+ focus: H,
47
+ setFocus: L,
48
+ setReset: Ae,
49
+ inputContent: B,
50
+ setInputContent: be,
51
+ setInputRichContent: we
52
+ } = Oe(), { isLoggedIn: b, currentUser: u } = Je(), { errors: E, validate: V } = Ke(), { isMobile: m } = Ge(), Ce = ke(), Q = qe(null), [U, $] = c([]), [q, D] = c(""), [X, W] = c(null), [l, p] = c(null), [Z, ee] = c(null), [te, ne] = c(!1), [w, ae] = c(!1), [F, se] = c({}), [g, Ie] = $e(
53
53
  "userSide",
54
54
  {}
55
- ), [g, Se] = c(
56
- !A && h?.actions?.disableInputForVisitor
57
- ), W = He(), { showModal: xe } = Qe(), { toast: Y } = Xe() || {}, se = new URLSearchParams(
58
- typeof window < "u" ? window.location.search : we.search
55
+ ), [f, Se] = c(
56
+ !b && h?.actions?.disableInputForVisitor
57
+ ), Y = He(), { showModal: xe } = Qe(), { toast: k } = Xe() || {}, ie = new URLSearchParams(
58
+ typeof window < "u" ? window.location.search : Ce.search
59
59
  );
60
60
  M(() => {
61
61
  Se(
62
- !A && h?.actions?.disableInputForVisitor
62
+ !b && h?.actions?.disableInputForVisitor
63
63
  );
64
- }, [A, h]);
65
- const k = d?.role === "editor" || d?.role === "moderator", oe = d?.moderation_status === "banned";
64
+ }, [b, h]);
65
+ const R = u?.role === "editor" || u?.role === "moderator", oe = u?.moderation_status === "banned";
66
66
  M(() => {
67
67
  let e = null;
68
- typeof window < "u" && (e = se.get("positionId")), b && b != a[2]?.id && a?.find((t) => t.id === b) ? p(b) : e && e != a[2]?.id ? p(e) : f && f.groupId == v && f.positionId != a[2]?.id && p(f.positionId);
69
- }, [b]), M(() => {
70
- F && (R(), N(!0));
71
- }, [F]), M(() => {
68
+ typeof window < "u" && (e = ie.get("positionId")), A && A != a[2]?.id && a?.find((t) => t.id === A) ? p(A) : e && e != a[2]?.id ? p(e) : g && g.groupId == v && g.positionId != a[2]?.id && p(g.positionId);
69
+ }, [A]), M(() => {
70
+ P && (j(), L(!0));
71
+ }, [P]), M(() => {
72
72
  if (typeof window < "u") {
73
- const e = pe || se.get("initArgument");
74
- (e === !0 || e === "true") && (N(!0), Ee());
73
+ const e = pe || ie.get("initArgument");
74
+ (e === !0 || e === "true") && (L(!0), Ee());
75
75
  }
76
76
  }, []), M(() => {
77
- G && (re(), N(!1));
78
- }, [G]), M(() => {
79
- P?.id && (Ne(P), N(!0));
80
- }, [P]);
77
+ H && (re(), L(!1));
78
+ }, [H]), M(() => {
79
+ B?.id && (Ne(B), L(!0));
80
+ }, [B]);
81
81
  const Ne = (e) => {
82
- ie(e), ne(!0), U(e.sources), q(e.content), D(e.rich_content), Z(e.id), re(), p(e.position?.id), JSON.parse(e.rich_content).hasOwnProperty("root") ? Ce(e.rich_content) : Ae(e.content);
82
+ se(e), ae(!0), $(e.sources), D(e.content), W(e.rich_content), ee(e.id), re(), p(e.position?.id), JSON.parse(e.rich_content).hasOwnProperty("root") ? we(e.rich_content) : be(e.content);
83
83
  }, re = () => {
84
- H.current.scrollIntoView(!1);
85
- }, ue = () => {
86
- q(""), D(null), ie({}), Z(null), U([]), be(!0);
87
- }, Te = (e) => {
84
+ Q.current.scrollIntoView(!1);
85
+ }, de = () => {
86
+ D(""), W(null), se({}), ee(null), $([]), Ae(!0);
87
+ }, ye = (e) => {
88
88
  p(e), le(e);
89
- }, ye = () => {
89
+ }, Te = () => {
90
90
  xe(
91
- /* @__PURE__ */ i(De, { fallback: null, children: /* @__PURE__ */ i(
92
- it,
91
+ /* @__PURE__ */ s(De, { fallback: null, children: /* @__PURE__ */ s(
92
+ st,
93
93
  {
94
- modalTitle: o.formatMessage({
94
+ modalTitle: r.formatMessage({
95
95
  id: "modal.side_modal.modal_title",
96
96
  defaultMessage: "Choose your side"
97
97
  }),
98
- onChooseSide: Te,
98
+ onChooseSide: ye,
99
99
  positions: a,
100
- title: fe,
101
- disabledPositions: !u && S,
102
- isNeutral: f && f.groupId == v && f.positionId === a[2]?.id
100
+ title: ge,
101
+ disabledPositions: !d && N,
102
+ isNeutral: g && g.groupId == v && g.positionId === a[2]?.id
103
103
  }
104
104
  ) })
105
105
  );
106
106
  }, Le = () => {
107
- A ? X ? Be() : !a || a?.length === 0 || !S?.find((e) => e?.id === l) && l || k && u ? le(u && k && a[0]?.id) : ye() : W({ loginAction: "argument" });
107
+ b ? Z ? Be() : !a || a?.length === 0 || !N?.find((e) => e?.id === l) && l || R && d ? le(d && R && a[0]?.id) : Te() : Y({ loginAction: "argument" });
108
108
  }, Fe = (e, t) => {
109
- g ? W({ loginAction: "argument" }) : (q(e), D(t), E({ content: e }, [{ content: ["url", null] }]));
109
+ f ? Y({ loginAction: "argument" }) : (D(e), W(t), V({ content: e }, [{ content: ["url", null] }]));
110
110
  }, Pe = (e) => {
111
- U(e);
112
- }, de = [
111
+ $(e);
112
+ }, ue = [
113
113
  { content: ["length", 3] },
114
114
  { content: ["required", null] },
115
115
  { content: ["url", null] },
116
116
  ...!a || a?.length === 0 ? [] : [{ position_id: ["required", null] }]
117
117
  ], le = (e) => {
118
- const t = e || l, r = {
119
- content: $,
120
- rich_content: Q,
118
+ const t = e || l, i = {
119
+ content: q,
120
+ rich_content: X,
121
121
  group_id: v,
122
- ...z && { group_type: z },
122
+ ...O && { group_type: O },
123
123
  ...t && { position_id: t },
124
- is_reply: !!L,
125
- message_id: L || null,
126
- source_ids: V?.map((s) => s.id)
124
+ is_reply: !!y,
125
+ message_id: y || null,
126
+ source_ids: U?.map((o) => o.id)
127
127
  };
128
- E(r, de) && (t && a && a.map((s) => s.id).includes(t) && Ie({
128
+ V(i, ue) && (t && a && a.map((o) => o.id).includes(t) && Ie({
129
129
  groupId: v,
130
130
  positionId: t
131
- }), ue(), K.create("messages", r).then((s) => {
132
- if (s.data.success) {
133
- if (L)
134
- O(s.data.data.resource), Y(
135
- o.formatMessage({
131
+ }), de(), G.create("messages", i).then((o) => {
132
+ if (o.data.success) {
133
+ if (y)
134
+ J(o.data.data.resource), k(
135
+ r.formatMessage({
136
136
  id: "alert.argument_create",
137
137
  defaultMessage: "Your contribution has been sent !"
138
138
  }),
139
139
  {
140
140
  type: "success",
141
- points: o.formatMessage({
141
+ points: r.formatMessage({
142
142
  id: "alert.reply_gain",
143
143
  defaultMessage: " "
144
144
  })
145
145
  }
146
146
  );
147
147
  else {
148
- const T = s.data.data.resource;
149
- let y = I;
150
- t && !m && (y = `argumentList${T.position.id}`), O?.(
151
- $,
148
+ const C = o.data.data.resource;
149
+ let I = x;
150
+ t && !m && (I = `argumentList${C.position.id}`), J?.(
151
+ q,
152
152
  a.find((Ue) => Ue.id === t) || null
153
- ), x.add(y, [T]), Y(
154
- o.formatMessage({
153
+ ), T.add(I, [C]), k(
154
+ r.formatMessage({
155
155
  id: "alert.argument_create",
156
156
  defaultMessage: "Your contribution has been sent !"
157
157
  }),
158
158
  {
159
159
  type: "success",
160
- points: o.formatMessage({
160
+ points: r.formatMessage({
161
161
  id: "alert.argument_create_gain",
162
162
  defaultMessage: "Up to 10 eloquence points"
163
163
  }),
164
164
  category: "ARGUMENT",
165
- contentKey: d.messages_count === 2 ? "alert.third_argument" : "alert.first_argument"
165
+ contentKey: u.messages_count === 2 ? "alert.third_argument" : "alert.first_argument"
166
166
  }
167
167
  );
168
168
  }
169
169
  typeof window < "u" && window.dispatchEvent(
170
170
  new CustomEvent("logora:user_content:created", {
171
171
  detail: {
172
- content: s.data.data?.resource
172
+ content: o.data.data?.resource
173
173
  }
174
174
  })
175
175
  );
@@ -177,41 +177,41 @@ const it = We(() => import("../../modal/side_modal/index.js").then((I) => ({ def
177
177
  }));
178
178
  }, Be = () => {
179
179
  const e = {
180
- content: $,
181
- rich_content: Q,
182
- source_ids: V?.map((t) => t.id),
180
+ content: q,
181
+ rich_content: X,
182
+ source_ids: U?.map((t) => t.id),
183
183
  ...l && { position_id: l }
184
184
  };
185
- E(e, de) && K.update("messages", X, e).then((t) => {
185
+ V(e, ue) && G.update("messages", Z, e).then((t) => {
186
186
  if (t.data.success) {
187
- const r = t.data.data.resource;
188
- let s = I;
189
- if (r.is_reply ? s = `argument_${r.message_id}_reply_list` : l && !m && (s = `argumentList${r.position?.id}`), ae?.position?.id != r.position?.id && !m && !r.is_reply) {
190
- const T = `argumentList${ae.position.id}`, y = `argumentList${r.position.id}`;
191
- x.remove(T, [r]), x.add(y, [r]);
187
+ const i = t.data.data.resource;
188
+ let o = x;
189
+ if (console.log("[updateArgument] API response:", i), console.log("[updateArgument] is_reply:", i.is_reply, "| message_id:", i.message_id, "| editElement.message_id:", F?.message_id, "| parentId prop:", y), i.is_reply ? o = `argument_${i.message_id || F?.message_id}_reply_list` : l && !m && (o = `argumentList${i.position?.id}`), console.log("[updateArgument] listId used for update:", o), F?.position?.id != i.position?.id && !m && !i.is_reply) {
190
+ const C = `argumentList${F.position.id}`, I = `argumentList${i.position.id}`;
191
+ console.log("[updateArgument] position changed, moving from", C, "to", I), T.remove(C, [i]), T.add(I, [i]);
192
192
  } else
193
- x.update(s, [r]);
194
- Y(o.formatMessage({ id: "alert.argument_modify" }), {
193
+ console.log("[updateArgument] calling list.update with listId:", o), T.update(o, [i]);
194
+ k(r.formatMessage({ id: "alert.argument_modify" }), {
195
195
  type: "success"
196
- }), ue();
196
+ }), de();
197
197
  }
198
198
  });
199
199
  }, Ee = () => {
200
- if (!ee) {
201
- te(!0);
200
+ if (!te) {
201
+ ne(!0);
202
202
  const e = setTimeout(() => {
203
- te(!1);
203
+ ne(!1);
204
204
  }, 2e3);
205
205
  return () => clearTimeout(e);
206
206
  }
207
- }, R = () => {
208
- g ? W({ loginAction: "argument" }) : ne(!0);
207
+ }, j = () => {
208
+ f ? Y({ loginAction: "argument" }) : ae(!0);
209
209
  }, Ve = () => {
210
- const e = S.find(
210
+ const e = N.find(
211
211
  (t) => t.id === l
212
212
  );
213
213
  if (e)
214
- return o.formatMessage(
214
+ return r.formatMessage(
215
215
  {
216
216
  id: "info.argument_side_limit",
217
217
  defaultMessage: "You have reached the argument limit (10) for position {position}."
@@ -220,27 +220,27 @@ const it = We(() => import("../../modal/side_modal/index.js").then((I) => ({ def
220
220
  );
221
221
  };
222
222
  return /* @__PURE__ */ _("div", { className: n.inputContainer, children: [
223
- j && /* @__PURE__ */ i("div", { className: n.disabledInputMask, children: oe ? o.formatMessage({
223
+ z && /* @__PURE__ */ s("div", { className: n.disabledInputMask, children: oe ? r.formatMessage({
224
224
  id: "input.argument_input.user_banned",
225
225
  defaultMessage: "You are banned from the debate space."
226
- }) : o.formatMessage({
226
+ }) : r.formatMessage({
227
227
  id: "info.debate_is_inactive",
228
228
  defaultMessage: "Debate is closed"
229
229
  }) }),
230
- /* @__PURE__ */ i(
230
+ /* @__PURE__ */ s(
231
231
  "div",
232
232
  {
233
- className: w(n.argumentInput, {
234
- [n.flash]: ee,
235
- [n.replyInputContainer]: u
233
+ className: S(n.argumentInput, {
234
+ [n.flash]: te,
235
+ [n.replyInputContainer]: d
236
236
  }),
237
- children: /* @__PURE__ */ i("div", { "data-tid": "action_add_argument", ref: H, children: /* @__PURE__ */ _("div", { className: n.argumentInputBox, children: [
238
- a.length > 0 && A && (!u || !k) && /* @__PURE__ */ _("div", { className: n.userPosition, children: [
239
- /* @__PURE__ */ i("div", { children: o.formatMessage({
237
+ children: /* @__PURE__ */ s("div", { "data-tid": "action_add_argument", ref: Q, children: /* @__PURE__ */ _("div", { className: n.argumentInputBox, children: [
238
+ a.length > 0 && b && (!d || !R) && /* @__PURE__ */ _("div", { className: n.userPosition, children: [
239
+ /* @__PURE__ */ s("div", { children: r.formatMessage({
240
240
  id: "input.position",
241
241
  defaultMessage: "Your position"
242
242
  }) }),
243
- /* @__PURE__ */ i(
243
+ /* @__PURE__ */ s(
244
244
  Ze,
245
245
  {
246
246
  activeLabel: l === a[0].id ? 0 : l === a[1].id ? 1 : null,
@@ -253,32 +253,32 @@ const it = We(() => import("../../modal/side_modal/index.js").then((I) => ({ def
253
253
  /* @__PURE__ */ _(
254
254
  "div",
255
255
  {
256
- className: w(n.argumentTextInputBox, {
256
+ className: S(n.argumentTextInputBox, {
257
257
  [n.argumentTextInputBoxisTablet]: !m,
258
- [n.replyEditorRow]: u
258
+ [n.replyEditorRow]: d
259
259
  }),
260
260
  children: [
261
- /* @__PURE__ */ i(
261
+ /* @__PURE__ */ s(
262
262
  "div",
263
263
  {
264
- className: w(n.argumentAuthorContainer, {
264
+ className: S(n.argumentAuthorContainer, {
265
265
  [n.argumentAuthorContainerMobile]: m,
266
- [n.argumentAuthorContainerActivated]: !m && C || u
266
+ [n.argumentAuthorContainerActivated]: !m && w || d
267
267
  }),
268
- children: !m && C || u ? /* @__PURE__ */ i(
268
+ children: !m && w || d ? /* @__PURE__ */ s(
269
269
  et,
270
270
  {
271
- avatarUrl: d.image_url,
272
- userName: d.full_name,
271
+ avatarUrl: u.image_url,
272
+ userName: u.full_name,
273
273
  size: me
274
274
  }
275
- ) : /* @__PURE__ */ i(
275
+ ) : /* @__PURE__ */ s(
276
276
  tt,
277
277
  {
278
- fullName: d?.full_name || o.formatMessage({ id: "default_author.full_name" }),
279
- avatarUrl: d?.image_url,
280
- points: d?.points || 0,
281
- slug: d?.hash_id
278
+ fullName: u?.full_name || r.formatMessage({ id: "default_author.full_name" }),
279
+ avatarUrl: u?.image_url,
280
+ points: u?.points || 0,
281
+ slug: u?.hash_id
282
282
  }
283
283
  )
284
284
  }
@@ -286,13 +286,13 @@ const it = We(() => import("../../modal/side_modal/index.js").then((I) => ({ def
286
286
  /* @__PURE__ */ _(
287
287
  "div",
288
288
  {
289
- onClick: R,
289
+ onClick: j,
290
290
  "data-testid": "argument-input",
291
- className: w(n.textEditorBox, {
292
- [n.replyTextEditorBox]: u
291
+ className: S(n.textEditorBox, {
292
+ [n.replyTextEditorBox]: d
293
293
  }),
294
294
  children: [
295
- /* @__PURE__ */ i(
295
+ /* @__PURE__ */ s(
296
296
  nt,
297
297
  {
298
298
  handleChange: (e, t) => {
@@ -302,39 +302,39 @@ const it = We(() => import("../../modal/side_modal/index.js").then((I) => ({ def
302
302
  Pe(e);
303
303
  },
304
304
  placeholder: he,
305
- "aria-label": o.formatMessage({
305
+ "aria-label": r.formatMessage({
306
306
  id: "input.argument_input.aria_label",
307
307
  defaultMessage: "Message input field"
308
308
  }),
309
309
  onSubmit: Le,
310
- sources: V,
311
- hideSourceAction: ge || g,
310
+ sources: U,
311
+ hideSourceAction: fe || f,
312
312
  uid: `Argument${v}`,
313
- onActivation: R,
314
- showStylesControls: C,
315
- disabled: j || g || oe,
316
- maxLength: g ? !1 : h?.actions?.argumentMaxLength,
317
- disableRichText: h?.actions?.disableRichText || g,
318
- shortBar: u,
319
- hideSubmit: g,
313
+ onActivation: j,
314
+ showStylesControls: w,
315
+ disabled: z || f || oe,
316
+ maxLength: f ? !1 : h?.actions?.argumentMaxLength,
317
+ disableRichText: h?.actions?.disableRichText || f,
318
+ shortBar: d,
319
+ hideSubmit: f,
320
320
  allowedDomains: h?.allowed_sources,
321
- active: F,
321
+ active: P,
322
322
  hideCharCount: Me,
323
323
  disableAutoActivate: ve
324
324
  }
325
325
  ),
326
- B?.content && /* @__PURE__ */ i("div", { className: n.argumentInputWarning, children: B && Object.values(B).map((e, t) => /* @__PURE__ */ i("div", { children: e }, t)) }),
327
- C && S?.find(
326
+ E?.content && /* @__PURE__ */ s("div", { className: n.argumentInputWarning, children: E && Object.values(E).map((e, t) => /* @__PURE__ */ s("div", { children: e }, t)) }),
327
+ w && N?.find(
328
328
  (e) => e.id === l
329
329
  ) && /* @__PURE__ */ _(
330
330
  "div",
331
331
  {
332
- className: w(
332
+ className: S(
333
333
  n.argumentInputWarning,
334
334
  n.disabledPositionWarning
335
335
  ),
336
336
  children: [
337
- /* @__PURE__ */ i(
337
+ /* @__PURE__ */ s(
338
338
  at,
339
339
  {
340
340
  name: "announcement",
@@ -343,24 +343,24 @@ const it = We(() => import("../../modal/side_modal/index.js").then((I) => ({ def
343
343
  width: 20
344
344
  }
345
345
  ),
346
- /* @__PURE__ */ i("div", { className: n.argumentInputWarningText, children: Ve() })
346
+ /* @__PURE__ */ s("div", { className: n.argumentInputWarningText, children: Ve() })
347
347
  ]
348
348
  }
349
349
  ),
350
- C && J && !_e && /* @__PURE__ */ i("div", { className: n.guideMessage, children: /* @__PURE__ */ i(
350
+ w && K && !_e && /* @__PURE__ */ s("div", { className: n.guideMessage, children: /* @__PURE__ */ s(
351
351
  ce,
352
352
  {
353
353
  id: "alert.guide_message",
354
354
  defaultMessage: "Contributions must comply with our {userCharter}.",
355
355
  values: {
356
- userCharter: /* @__PURE__ */ i(
356
+ userCharter: /* @__PURE__ */ s(
357
357
  "a",
358
358
  {
359
359
  className: n.guideMessage,
360
- href: J,
360
+ href: K,
361
361
  target: "_blank",
362
362
  rel: "noreferrer",
363
- children: /* @__PURE__ */ i(
363
+ children: /* @__PURE__ */ s(
364
364
  ce,
365
365
  {
366
366
  id: "alert.user_charter",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@logora/debate",
3
- "version": "0.3.50",
3
+ "version": "0.3.52",
4
4
  "type": "module",
5
5
  "license": "AGPL-3.0",
6
6
  "description": "Design system of @Logora made with React",