@layers-app/shared 0.2.8 → 0.3.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.
Files changed (121) hide show
  1. package/dist/api/giphy/slice.d.ts +1 -1
  2. package/dist/api/giphy/slice.d.ts.map +1 -1
  3. package/dist/api/unsplash/slice.d.ts +1 -1
  4. package/dist/api/unsplash/slice.d.ts.map +1 -1
  5. package/dist/assets/layers-logo-icon.svg2.js +4 -0
  6. package/dist/components/AliasTextInput/AliasTextInput.d.ts.map +1 -1
  7. package/dist/components/AliasTextInput/AliasTextInput.js +8 -7
  8. package/dist/components/AppContainer/AppContainer.module.css.js +1 -1
  9. package/dist/components/AppContainer/components/menus/HelpMenu/HelpMenu.d.ts.map +1 -1
  10. package/dist/components/AppContainer/components/menus/HelpMenu/HelpMenu.js +123 -114
  11. package/dist/components/AppContainer/components/menus/HelpMenu/HelpMenu.module.css.js +1 -1
  12. package/dist/components/AppShell/AppShell.module.css.js +5 -5
  13. package/dist/components/AttachmentsGalleryModal/components/ShakePlayer/ShakaPlayer.module.css.js +4 -4
  14. package/dist/components/AttachmentsGalleryModal/styles.module.css.js +14 -14
  15. package/dist/components/AttachmentsPreview/AttachmentsPreview.module.css.js +1 -1
  16. package/dist/components/BouncingLogo/BouncingLogo.module.css.js +8 -8
  17. package/dist/components/CollapsibleContainer/CollapsibleContainer.module.css.js +1 -1
  18. package/dist/components/CommentComposer/CommentComposer.module.css.js +4 -4
  19. package/dist/components/CommunitiesDialog/index.d.ts.map +1 -1
  20. package/dist/components/CommunitiesDialog/index.js +47 -46
  21. package/dist/components/CommunitiesDialog/styles.module.css.js +1 -1
  22. package/dist/components/Copyright/Copyright.module.css.js +1 -1
  23. package/dist/components/Copyright/index.d.ts.map +1 -1
  24. package/dist/components/Copyright/index.js +8 -7
  25. package/dist/components/CustomKBD/CustomKBD.module.css.js +1 -1
  26. package/dist/components/EmojiPicker/EmojiPicker.module.css.js +8 -8
  27. package/dist/components/EntityTitle/EntityTitle.module.css.js +1 -1
  28. package/dist/components/ErrorPage/components/Error404.d.ts.map +1 -1
  29. package/dist/components/FeatureProgress/FeatureProgress.module.css.js +49 -49
  30. package/dist/components/FilePicker/FilePicker.d.ts +2 -4
  31. package/dist/components/FilePicker/FilePicker.d.ts.map +1 -1
  32. package/dist/components/FilePicker/FilePicker.js +236 -247
  33. package/dist/components/FilePicker/FilePicker.module.css.js +10 -12
  34. package/dist/components/FilePicker/FilePickerGallery.d.ts.map +1 -1
  35. package/dist/components/FilePicker/FilePickerGallery.js +33 -59
  36. package/dist/components/FilePicker/FilePickerGiphy.d.ts +1 -1
  37. package/dist/components/FilePicker/FilePickerGiphy.d.ts.map +1 -1
  38. package/dist/components/FilePicker/FilePickerGiphy.js +51 -52
  39. package/dist/components/FilePicker/FilePickerLink.d.ts.map +1 -1
  40. package/dist/components/FilePicker/FilePickerLink.js +19 -22
  41. package/dist/components/FilePicker/FilePickerUnsplash.d.ts +1 -1
  42. package/dist/components/FilePicker/FilePickerUnsplash.d.ts.map +1 -1
  43. package/dist/components/FilePicker/FilePickerUnsplash.js +64 -65
  44. package/dist/components/FilePicker/FilePickerUpload.d.ts.map +1 -1
  45. package/dist/components/FilePicker/FilePickerUpload.js +35 -51
  46. package/dist/components/FilePicker/api/giphyApi.d.ts +2 -2
  47. package/dist/components/FilePicker/api/giphyApi.d.ts.map +1 -1
  48. package/dist/components/FilePicker/api/giphyApi.js +11 -14
  49. package/dist/components/FilePicker/api/unsplashApi.d.ts +2 -2
  50. package/dist/components/FilePicker/api/unsplashApi.d.ts.map +1 -1
  51. package/dist/components/FilePicker/api/unsplashApi.js +14 -19
  52. package/dist/components/FilePicker/index.d.ts +0 -1
  53. package/dist/components/FilePicker/index.d.ts.map +1 -1
  54. package/dist/components/FormViewer/FormViewer.module.css.js +20 -20
  55. package/dist/components/FormViewer/components/fields/DragOptions/DragOptions.module.css.js +1 -1
  56. package/dist/components/FormViewer/components/fields/DropdownField/DropdownField.module.css.js +1 -1
  57. package/dist/components/FormViewer/components/fields/EditableContent/EditableContent.module.css.js +1 -1
  58. package/dist/components/FormViewer/components/fields/SelectableCard/PictureSelectableCard.d.ts.map +1 -1
  59. package/dist/components/FormViewer/components/fields/SelectableCard/PictureSelectableCard.js +70 -72
  60. package/dist/components/FormViewer/components/fields/SelectableCard/SelectableCard.module.css.js +8 -8
  61. package/dist/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.module.css.js +4 -4
  62. package/dist/components/FormViewer/helpers/conditions.d.ts +84 -84
  63. package/dist/components/FormViewer/helpers/helpers.d.ts +84 -84
  64. package/dist/components/FormViewer/helpers/steps.d.ts +84 -84
  65. package/dist/components/FormViewer/helpers/steps.d.ts.map +1 -1
  66. package/dist/components/FormViewer/helpers/steps.js +22 -21
  67. package/dist/components/FormViewer/hooks/useActiveControl.d.ts +71 -71
  68. package/dist/components/FormViewer/hooks/useActiveStep.d.ts +84 -84
  69. package/dist/components/FormViewer/store/formStore.d.ts +357 -357
  70. package/dist/components/FormViewer/store/formStore.d.ts.map +1 -1
  71. package/dist/components/FormViewer/store/formStoreApi.d.ts +178 -178
  72. package/dist/components/FormViewer/store/selectors.d.ts +23861 -23861
  73. package/dist/components/FormViewer/types/schemes.d.ts +1139 -1139
  74. package/dist/components/ImageCropper/ImageCropper.module.css.js +38 -38
  75. package/dist/components/IntegrationFlowAnimation/IntegrationFlowAnimation.module.css.js +11 -11
  76. package/dist/components/LanguagePicker/LanguagePicker.module.css.js +1 -1
  77. package/dist/components/Loaders/styles.module.css.js +6 -6
  78. package/dist/components/Logotype.d.ts +4 -3
  79. package/dist/components/Logotype.d.ts.map +1 -1
  80. package/dist/components/Logotype.js +56 -33
  81. package/dist/components/MediaLibrary/MediaLibrary.module.css.js +2 -2
  82. package/dist/components/NavMenu/NavMenu.module.css.js +12 -12
  83. package/dist/components/NavbarResizer/NavbarResizer.module.css.js +2 -2
  84. package/dist/components/NotPublicPanel/NotPublicPanel.module.css.js +11 -11
  85. package/dist/components/Notification/Notification.module.css.js +1 -1
  86. package/dist/components/OnBoarding/OnBoardingPage.js +35 -35
  87. package/dist/components/OnBoarding/steps/DifferentLayouts/styles.module.css.js +3 -3
  88. package/dist/components/OnBoarding/steps/styles.module.css.js +9 -9
  89. package/dist/components/OnBoarding/styles.module.css.js +7 -7
  90. package/dist/components/SearchFilters/SearchFilters.module.css.js +1 -1
  91. package/dist/components/SettingsSection/styles.module.css.js +1 -1
  92. package/dist/components/StorageUsageProgress/StorageUsageProgress.module.css.js +1 -1
  93. package/dist/components/WorkspaceAvatar/WorkspaceAvatar.js +10 -10
  94. package/dist/components/table/FrontTable.d.ts.map +1 -1
  95. package/dist/components/table/hooks/useColumnsResizing.d.ts.map +1 -1
  96. package/dist/config/brand.d.ts +48 -0
  97. package/dist/config/brand.d.ts.map +1 -0
  98. package/dist/config/brand.js +69 -0
  99. package/dist/config/envConfig.d.ts +70 -0
  100. package/dist/config/envConfig.d.ts.map +1 -0
  101. package/dist/config/envConfig.js +29 -0
  102. package/dist/constants.d.ts +1 -1
  103. package/dist/constants.d.ts.map +1 -1
  104. package/dist/constants.js +7 -6
  105. package/dist/helpers/showFeatureFeedback.module.css.js +4 -4
  106. package/dist/helpers/showNotifications.module.css.js +1 -1
  107. package/dist/hooks/useDisableWindowScroll.js +3 -3
  108. package/dist/index.css +1 -1
  109. package/dist/index.d.ts +2 -0
  110. package/dist/index.d.ts.map +1 -1
  111. package/dist/index.js +429 -423
  112. package/dist/lang/locales/ui_en.json.js +15 -15
  113. package/dist/lang/locales/ui_es.json.js +13 -13
  114. package/dist/lang/locales/ui_ru.json.js +12 -12
  115. package/docs/README.md +499 -499
  116. package/package.json +75 -78
  117. package/dist/assets/svg/default_icon.svg.js +0 -4
  118. package/dist/components/FilePicker/coverCollections.d.ts +0 -4
  119. package/dist/components/FilePicker/coverCollections.d.ts.map +0 -1
  120. package/dist/components/FilePicker/coverCollections.js +0 -164
  121. /package/dist/assets/{svg/layers-logo-full.svg.js → layers-logo-full.svg2.js} +0 -0
@@ -1,79 +1,78 @@
1
- import { jsxs as n, jsx as e } from "react/jsx-runtime";
2
- import { useState as l, useMemo as I, useEffect as b, useCallback as S } from "react";
3
- import { useTranslation as P } from "react-i18next";
4
- import { Search01Icon as T } from "@hugeicons/core-free-icons";
1
+ import { jsxs as c, jsx as t } from "react/jsx-runtime";
2
+ import { useState as m, useMemo as I, useEffect as f, useCallback as x } from "react";
3
+ import { useTranslation as S } from "react-i18next";
4
+ import { Search01Icon as P } from "@hugeicons/core-free-icons";
5
5
  import { HugeiconsIcon as w } from "@hugeicons/react";
6
- import { Stack as C, FocusTrap as z, TextInput as G, Loader as L, Box as k, SimpleGrid as j, AspectRatio as D, Button as F } from "@mantine/core";
7
- import { useDebouncedValue as M, useDebouncedCallback as q } from "@mantine/hooks";
8
- import { NoData as B } from "../NoData/NoData.js";
9
- import { FilePickerSkeletonLoader as N } from "./FilePickerSkeletonLoader.js";
10
- import { useGiphyPhotos as Q } from "./api/giphyApi.js";
11
- import R from "./FilePicker.module.css.js";
12
- const v = (c) => (c || []).reduce((r, o) => (r[o.id] = o, r), {}), W = ({
13
- token: c,
14
- onChange: r
6
+ import { Stack as b, TextInput as z, Loader as L, Box as C, SimpleGrid as T, AspectRatio as j, Button as D } from "@mantine/core";
7
+ import { useDebouncedValue as G, useDebouncedCallback as M } from "@mantine/hooks";
8
+ import { NoData as q } from "../NoData/NoData.js";
9
+ import { FilePickerSkeletonLoader as B } from "./FilePickerSkeletonLoader.js";
10
+ import { useGiphyPhotos as F } from "./api/giphyApi.js";
11
+ import N from "./FilePicker.module.css.js";
12
+ const k = (n) => (n || []).reduce((o, i) => (o[i.id] = i, o), {}), K = ({
13
+ onChange: n
15
14
  }) => {
16
- const { t: o } = P("ui"), [m, y] = l(""), [u] = M(m, 800), [d, p] = l(1), [h, g] = l({}), { data: i, isLoading: s } = Q(
17
- { q: u, limit: 24, offset: (d - 1) * 24 + 1 },
18
- d,
19
- c
15
+ const { t: o } = S("ui"), [i, v] = m(""), [l] = G(i, 800), [u, d] = m(1), [p, h] = m({}), { data: r, isLoading: s } = F(
16
+ { q: l, limit: 24, offset: (u - 1) * 24 + 1 },
17
+ u
20
18
  ), a = I(
21
- () => Object.values({ ...h, ...v(i?.items) }),
22
- [h, i?.items]
23
- ), f = q(() => {
19
+ () => Object.values({ ...p, ...k(r?.items) }),
20
+ [p, r?.items]
21
+ ), g = M(() => {
24
22
  setTimeout(() => {
25
- g((t) => ({ ...t, ...v(i?.items) }));
23
+ h((e) => ({ ...e, ...k(r?.items) }));
26
24
  }, 0);
27
25
  }, 100);
28
- b(() => {
29
- f();
30
- }, [i?.items, f]), b(() => {
31
- g({});
32
- }, [u]);
33
- const x = S(
34
- (t) => {
35
- y(t.currentTarget.value), p(1);
26
+ f(() => {
27
+ g();
28
+ }, [r?.items, g]), f(() => {
29
+ h({});
30
+ }, [l]);
31
+ const y = x(
32
+ (e) => {
33
+ v(e.currentTarget.value), d(1);
36
34
  },
37
35
  []
38
36
  );
39
- return /* @__PURE__ */ n(C, { gap: "sm", children: [
40
- /* @__PURE__ */ e(z, { active: !0, children: /* @__PURE__ */ e(
41
- G,
37
+ return /* @__PURE__ */ c(b, { children: [
38
+ /* @__PURE__ */ t(
39
+ z,
42
40
  {
43
- leftSection: s ? /* @__PURE__ */ e(L, { size: 16 }) : /* @__PURE__ */ e(w, { size: 16, icon: T }),
41
+ leftSection: s ? /* @__PURE__ */ t(L, { size: 16 }) : /* @__PURE__ */ t(w, { size: 16, icon: P }),
44
42
  maxLength: 50,
45
- placeholder: o("changeCover.searchGifs"),
43
+ placeholder: o("changeCover.searchImage"),
46
44
  "data-autofocus": !0,
47
- value: m,
48
- onChange: x
45
+ value: i,
46
+ onChange: y,
47
+ mb: "sm"
49
48
  }
50
- ) }),
51
- /* @__PURE__ */ n(k, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
52
- !!a.length && /* @__PURE__ */ n(C, { gap: 8, children: [
53
- /* @__PURE__ */ e(j, { cols: 4, spacing: 10, children: a.map((t) => /* @__PURE__ */ e(
54
- D,
49
+ ),
50
+ /* @__PURE__ */ c(C, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
51
+ !!a.length && /* @__PURE__ */ c(b, { gap: 8, children: [
52
+ /* @__PURE__ */ t(T, { cols: 4, spacing: 10, children: a.map((e) => /* @__PURE__ */ t(
53
+ j,
55
54
  {
56
- onClick: () => r?.(t.images.original.url),
55
+ onClick: () => n?.(e.images.original.url),
57
56
  ratio: 120 / 65,
58
- className: R.itemImage,
57
+ className: N.itemImage,
59
58
  style: {
60
- backgroundImage: `url(${t.images.preview_webp.url})`
59
+ backgroundImage: `url(${e.images.preview_webp.url})`
61
60
  }
62
61
  },
63
- t.id
62
+ e.id
64
63
  )) }),
65
- i?.hasMore && /* @__PURE__ */ e(
66
- F,
64
+ r?.hasMore && /* @__PURE__ */ t(
65
+ D,
67
66
  {
68
67
  variant: "subtle",
69
68
  loading: s,
70
- onClick: () => p((t) => t + 1),
69
+ onClick: () => d((e) => e + 1),
71
70
  children: o("loadMode")
72
71
  }
73
72
  )
74
73
  ] }),
75
- !a.length && !s && /* @__PURE__ */ e(k, { pb: 16, children: /* @__PURE__ */ e(
76
- B,
74
+ !a.length && !s && /* @__PURE__ */ t(C, { pb: 16, children: /* @__PURE__ */ t(
75
+ q,
77
76
  {
78
77
  size: 120,
79
78
  illustration: "noImage",
@@ -81,10 +80,10 @@ const v = (c) => (c || []).reduce((r, o) => (r[o.id] = o, r), {}), W = ({
81
80
  titleProps: { size: "xs", c: "dimmed" }
82
81
  }
83
82
  ) }),
84
- !a.length && s && /* @__PURE__ */ e(N, {})
83
+ !a.length && s && /* @__PURE__ */ t(B, {})
85
84
  ] })
86
85
  ] });
87
86
  };
88
87
  export {
89
- W as FilePickerGiphy
88
+ K as FilePickerGiphy
90
89
  };
@@ -1 +1 @@
1
- {"version":3,"file":"FilePickerLink.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerLink.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMnC,eAAO,MAAM,cAAc,GAAI,sCAI5B;IACD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;CAC5C,4CAkEA,CAAC"}
1
+ {"version":3,"file":"FilePickerLink.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerLink.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAInC,eAAO,MAAM,cAAc,GAAI,sCAI5B;IACD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;CAC5C,4CA+DA,CAAC"}
@@ -1,51 +1,48 @@
1
- import { jsxs as u, jsx as r } from "react/jsx-runtime";
2
- import { useTranslation as c } from "react-i18next";
3
- import { Stack as m, FocusTrap as d, TextInput as f, Flex as p, Button as h } from "@mantine/core";
1
+ import { jsxs as u, jsx as t } from "react/jsx-runtime";
2
+ import { useTranslation as m } from "react-i18next";
3
+ import { Stack as c, FocusTrap as d, TextInput as f, Flex as p, Button as h } from "@mantine/core";
4
4
  import { useForm as g } from "@mantine/form";
5
5
  import { isValidUrl as v, isImageUrl as k, isVideoUrl as x, isAudioUrl as F } from "../../helpers/validation.js";
6
- import I from "./FilePicker.module.css.js";
7
- import { Search01Icon as L } from "@hugeicons/core-free-icons";
8
- import { HugeiconsIcon as w } from "@hugeicons/react";
9
- const P = ({
10
- onChange: a,
11
- type: o,
12
- isValidMediaUrl: s
6
+ import L from "./FilePicker.module.css.js";
7
+ const U = ({
8
+ onChange: o,
9
+ type: s,
10
+ isValidMediaUrl: a
13
11
  }) => {
14
- const { t } = c("ui"), l = g({
12
+ const { t: i } = m("ui"), l = g({
15
13
  initialValues: {
16
14
  url: ""
17
15
  },
18
16
  validate: {
19
- url: (e) => (e || "").trim().length > 0 && v(e) ? null : t("changeCover.invalidLink")
17
+ url: (e) => (e || "").trim().length > 0 && v(e) ? null : i("changeCover.invalidLink")
20
18
  }
21
19
  }), n = async () => {
22
20
  const { values: e } = l;
23
- let i;
24
- o === "image" ? i = await k(e.url) : o === "video" ? s && s(e.url) ? i = !0 : i = await x(e.url) : o === "audio" ? i = await F(e.url) : i = !0, i ? a?.(e.url) : l.setFieldError("url", t("changeCover.invalidLink"));
21
+ let r;
22
+ s === "image" ? r = await k(e.url) : s === "video" ? a && a(e.url) ? r = !0 : r = await x(e.url) : s === "audio" ? r = await F(e.url) : r = !0, r ? o?.(e.url) : l.setFieldError("url", i("changeCover.invalidLink"));
25
23
  };
26
- return /* @__PURE__ */ u(m, { gap: "sm", children: [
27
- /* @__PURE__ */ r(d, { active: !0, children: /* @__PURE__ */ r(
24
+ return /* @__PURE__ */ u(c, { gap: "sm", children: [
25
+ /* @__PURE__ */ t(d, { active: !0, children: /* @__PURE__ */ t(
28
26
  f,
29
27
  {
30
28
  maxLength: 500,
31
29
  size: "sm",
32
- placeholder: t("changeCover.pasteLink"),
33
- leftSection: /* @__PURE__ */ r(w, { size: 16, icon: L }),
30
+ placeholder: i("changeCover.pasteLink"),
34
31
  "data-autofocus": !0,
35
32
  ...l.getInputProps("url")
36
33
  }
37
34
  ) }),
38
- /* @__PURE__ */ r(p, { justify: "flex-end", align: "center", mt: "sm", children: /* @__PURE__ */ r(
35
+ /* @__PURE__ */ t(p, { justify: "flex-end", align: "center", mt: "sm", children: /* @__PURE__ */ t(
39
36
  h,
40
37
  {
41
38
  onClick: n,
42
- className: I.button,
39
+ className: L.button,
43
40
  disabled: !l.values.url,
44
- children: t("customDrawer.save")
41
+ children: i("customDrawer.save")
45
42
  }
46
43
  ) })
47
44
  ] });
48
45
  };
49
46
  export {
50
- P as FilePickerLink
47
+ U as FilePickerLink
51
48
  };
@@ -1,4 +1,4 @@
1
- export declare const FilePickerUnsplash: ({ onChange, clientId, }: {
1
+ export declare const FilePickerUnsplash: ({ onChange, }: {
2
2
  clientId?: string;
3
3
  onChange?: (v: string) => void;
4
4
  }) => import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"FilePickerUnsplash.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerUnsplash.tsx"],"names":[],"mappings":"AA+BA,eAAO,MAAM,kBAAkB,GAAI,yBAGhC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,4CA0HA,CAAC"}
1
+ {"version":3,"file":"FilePickerUnsplash.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerUnsplash.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,kBAAkB,GAAI,eAEhC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,4CAwHA,CAAC"}
@@ -1,111 +1,110 @@
1
- import { jsxs as a, jsx as e } from "react/jsx-runtime";
2
- import { useState as m, useMemo as T, useEffect as k, useCallback as z } from "react";
3
- import { useTranslation as L } from "react-i18next";
4
- import { Search01Icon as j } from "@hugeicons/core-free-icons";
5
- import { HugeiconsIcon as B } from "@hugeicons/react";
6
- import { Stack as C, FocusTrap as D, TextInput as F, Loader as M, Box as c, SimpleGrid as N, AspectRatio as _, Text as b, Button as q } from "@mantine/core";
7
- import { useDebouncedValue as w, useDebouncedCallback as A } from "@mantine/hooks";
8
- import { NoData as Q } from "../NoData/NoData.js";
9
- import { FilePickerSkeletonLoader as R } from "./FilePickerSkeletonLoader.js";
10
- import { useUnsplashPhotos as U } from "./api/unsplashApi.js";
11
- import y from "./FilePicker.module.css.js";
12
- const v = (l) => (l || []).reduce((s, r) => (s[r.id] = r, s), {}), Z = ({
13
- onChange: l,
14
- clientId: s
1
+ import { jsxs as s, jsx as t } from "react/jsx-runtime";
2
+ import { useState as m, useMemo as P, useEffect as f, useCallback as z } from "react";
3
+ import { useTranslation as T } from "react-i18next";
4
+ import { Search01Icon as L } from "@hugeicons/core-free-icons";
5
+ import { HugeiconsIcon as j } from "@hugeicons/react";
6
+ import { Stack as b, TextInput as B, Loader as D, Box as c, SimpleGrid as M, AspectRatio as N, Text as k, Button as _ } from "@mantine/core";
7
+ import { useDebouncedValue as q, useDebouncedCallback as w } from "@mantine/hooks";
8
+ import { NoData as A } from "../NoData/NoData.js";
9
+ import { FilePickerSkeletonLoader as F } from "./FilePickerSkeletonLoader.js";
10
+ import { useUnsplashPhotos as Q } from "./api/unsplashApi.js";
11
+ import C from "./FilePicker.module.css.js";
12
+ const y = (l) => (l || []).reduce((o, r) => (o[r.id] = r, o), {}), W = ({
13
+ onChange: l
15
14
  }) => {
16
- const { t: r } = L("ui"), [u, x] = m(""), [h] = w(u, 800), [I, p] = m(1), [d, g] = m({}), { data: o, isLoading: n } = U(
15
+ const { t: o } = T("ui"), [r, x] = m(""), [u] = q(r, 800), [v, h] = m(1), [p, d] = m({}), { data: a, isLoading: n } = Q(
17
16
  {
18
- query: h,
19
- page: I,
17
+ query: u,
18
+ page: v,
20
19
  per_page: 24,
21
20
  order_by: "popular"
22
- },
23
- s
24
- ), i = T(
25
- () => Object.values({ ...d, ...v(o?.items) }),
26
- [d, o?.items]
27
- ), f = A(() => {
21
+ }
22
+ ), i = P(
23
+ () => Object.values({ ...p, ...y(a?.items) }),
24
+ [p, a?.items]
25
+ ), g = w(() => {
28
26
  setTimeout(() => {
29
- g((t) => ({ ...t, ...v(o?.items) }));
27
+ d((e) => ({ ...e, ...y(a?.items) }));
30
28
  }, 0);
31
29
  }, 100);
32
- k(() => {
33
- f();
34
- }, [o?.items, f]), k(() => {
35
- g({});
36
- }, [h]);
37
- const S = z(
38
- (t) => {
39
- x(t.currentTarget.value), p(1);
30
+ f(() => {
31
+ g();
32
+ }, [a?.items, g]), f(() => {
33
+ d({});
34
+ }, [u]);
35
+ const I = z(
36
+ (e) => {
37
+ x(e.currentTarget.value), h(1);
40
38
  },
41
39
  []
42
40
  );
43
- return /* @__PURE__ */ a(C, { gap: "sm", children: [
44
- /* @__PURE__ */ e(D, { active: !0, children: /* @__PURE__ */ e(
45
- F,
41
+ return /* @__PURE__ */ s(b, { children: [
42
+ /* @__PURE__ */ t(
43
+ B,
46
44
  {
47
- leftSection: n ? /* @__PURE__ */ e(M, { size: 16 }) : /* @__PURE__ */ e(B, { size: 16, icon: j }),
45
+ leftSection: n ? /* @__PURE__ */ t(D, { size: 16 }) : /* @__PURE__ */ t(j, { size: 16, icon: L }),
48
46
  maxLength: 50,
49
- placeholder: r("changeCover.searchImage"),
47
+ placeholder: o("changeCover.searchImage"),
50
48
  "data-autofocus": !0,
51
- value: u,
52
- onChange: S
49
+ value: r,
50
+ onChange: I,
51
+ mb: "sm"
53
52
  }
54
- ) }),
55
- /* @__PURE__ */ a(c, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
56
- !!i.length && /* @__PURE__ */ a(C, { gap: 8, children: [
57
- /* @__PURE__ */ e(N, { cols: 4, spacing: 10, children: i.map((t) => /* @__PURE__ */ a(c, { children: [
58
- /* @__PURE__ */ e(
59
- _,
53
+ ),
54
+ /* @__PURE__ */ s(c, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
55
+ !!i.length && /* @__PURE__ */ s(b, { gap: 8, children: [
56
+ /* @__PURE__ */ t(M, { cols: 4, spacing: 10, children: i.map((e) => /* @__PURE__ */ s(c, { children: [
57
+ /* @__PURE__ */ t(
58
+ N,
60
59
  {
61
- onClick: () => l?.(t.urls.regular),
60
+ onClick: () => l?.(e.urls.regular),
62
61
  ratio: 120 / 65,
63
- className: y.itemImage,
62
+ className: C.itemImage,
64
63
  style: {
65
- backgroundImage: `url(${t.urls.small})`
64
+ backgroundImage: `url(${e.urls.small})`
66
65
  }
67
66
  }
68
67
  ),
69
- /* @__PURE__ */ e(c, { className: y.imageAuthor, children: /* @__PURE__ */ a(b, { truncate: !0, c: "gray", size: "xs", children: [
70
- r("changeCover.photoBy"),
68
+ /* @__PURE__ */ t(c, { className: C.imageAuthor, children: /* @__PURE__ */ s(k, { truncate: !0, c: "gray", size: "xs", children: [
69
+ o("changeCover.photoBy"),
71
70
  " ",
72
- /* @__PURE__ */ e(
73
- b,
71
+ /* @__PURE__ */ t(
72
+ k,
74
73
  {
75
74
  component: "a",
76
75
  inherit: !0,
77
- href: t.user.links.html,
76
+ href: e.user.links.html,
78
77
  target: "_blank",
79
78
  rel: "noopener noreferrer",
80
- onClick: (P) => P.stopPropagation(),
81
- children: t.user.name
79
+ onClick: (S) => S.stopPropagation(),
80
+ children: e.user.name
82
81
  }
83
82
  )
84
83
  ] }) })
85
- ] }, t.id)) }),
86
- o?.hasMore && /* @__PURE__ */ e(
87
- q,
84
+ ] }, e.id)) }),
85
+ a?.hasMore && /* @__PURE__ */ t(
86
+ _,
88
87
  {
89
88
  variant: "subtle",
90
89
  loading: n,
91
- onClick: () => p((t) => t + 1),
92
- children: r("loadMore")
90
+ onClick: () => h((e) => e + 1),
91
+ children: o("loadMore")
93
92
  }
94
93
  )
95
94
  ] }),
96
- !i.length && !n && /* @__PURE__ */ e(c, { pb: 16, children: /* @__PURE__ */ e(
97
- Q,
95
+ !i.length && !n && /* @__PURE__ */ t(c, { pb: 16, children: /* @__PURE__ */ t(
96
+ A,
98
97
  {
99
98
  size: 120,
100
99
  illustration: "noImage",
101
- description: r("changeCover.noResult"),
100
+ description: o("changeCover.noResult"),
102
101
  titleProps: { size: "xs", c: "dimmed" }
103
102
  }
104
103
  ) }),
105
- !i.length && n && /* @__PURE__ */ e(R, {})
104
+ !i.length && n && /* @__PURE__ */ t(F, {})
106
105
  ] })
107
106
  ] });
108
107
  };
109
108
  export {
110
- Z as FilePickerUnsplash
109
+ W as FilePickerUnsplash
111
110
  };
@@ -1 +1 @@
1
- {"version":3,"file":"FilePickerUpload.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerUpload.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,aAAa,EAEb,YAAY,EAEb,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,OAAO,8BAA8B,CAAC;AAEtC,eAAO,MAAM,gBAAgB,GAAI,+CAK9B;IACD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CAC3C,4CA2GA,CAAC"}
1
+ {"version":3,"file":"FilePickerUpload.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerUpload.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,aAAa,EAEb,YAAY,EAEb,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,OAAO,8BAA8B,CAAC;AAEtC,eAAO,MAAM,gBAAgB,GAAI,+CAK9B;IACD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CAC3C,4CAkGA,CAAC"}
@@ -1,27 +1,28 @@
1
- import { jsx as o, jsxs as f } from "react/jsx-runtime";
2
- import { useCallback as p } from "react";
3
- import { useTranslation as k, Trans as z } from "react-i18next";
4
- import { Image02Icon as M } from "@hugeicons/core-free-icons";
1
+ import { jsx as n, jsxs as m } from "react/jsx-runtime";
2
+ import { useCallback as f } from "react";
3
+ import { useTranslation as M } from "react-i18next";
4
+ import { Image02Icon as k } from "@hugeicons/core-free-icons";
5
5
  import { HugeiconsIcon as v } from "@hugeicons/react";
6
- import { Stack as d, Text as l } from "@mantine/core";
7
- import { Dropzone as I, IMAGE_MIME_TYPE as E } from "@mantine/dropzone";
6
+ import { Stack as d, Text as p } from "@mantine/core";
7
+ import { Dropzone as E, IMAGE_MIME_TYPE as I } from "@mantine/dropzone";
8
8
  import { showNotification as h } from "@mantine/notifications";
9
- import { showErrorNotification as N } from "../../helpers/showNotifications.js";
10
- import S from "./FilePicker.module.css.js";
9
+ import { showErrorNotification as S } from "../../helpers/showNotifications.js";
11
10
  import "@mantine/dropzone/styles.css";
12
- const C = ({
13
- type: s = "image",
11
+ const $ = ({
12
+ type: l = "image",
14
13
  uploading: g,
15
- dropZoneProps: n,
16
- onUpload: c
14
+ dropZoneProps: t,
15
+ onUpload: s
17
16
  }) => {
18
- const { t: e } = k("ui"), u = n?.maxSize != null ? Math.round(n.maxSize / (1024 * 1024)) : 5, a = `filePicker.description.${s}`, x = `filePicker.dropFileHere.${s}`, m = (() => {
19
- const r = e(a, { maxSize: u });
20
- return r !== a ? r : null;
21
- })(), y = p(
17
+ const { t: e } = M("ui"), u = t?.maxSize != null ? Math.round(t.maxSize / (1024 * 1024)) : 5, x = `filePicker.dropFileHere.${l}`, c = `filePicker.description.${l}`, F = e(x, {
18
+ defaultValue: e("dropFileHere")
19
+ }), a = (() => {
20
+ const r = e(c, { maxSize: u });
21
+ return r !== c ? r : null;
22
+ })(), y = f(
22
23
  (r) => {
23
24
  if (r.filter(
24
- (i) => i.errors.some((t) => t.code === "file-invalid-type")
25
+ (o) => o.errors.some((i) => i.code === "file-invalid-type")
25
26
  ).length > 0) {
26
27
  h({
27
28
  color: "blue",
@@ -29,15 +30,15 @@ const C = ({
29
30
  });
30
31
  return;
31
32
  }
32
- if (r.some((i) => i.errors.some((t) => t.code === "file-too-large"))) {
33
- N({
33
+ if (r.some((o) => o.errors.some((i) => i.code === "file-too-large"))) {
34
+ S({
34
35
  title: e("errorMessage"),
35
36
  message: e("filePicker.errors.shouldNotExceed")
36
37
  });
37
38
  return;
38
39
  }
39
40
  if (r.filter(
40
- (i) => i.errors.some((t) => t.code === "too-many-files")
41
+ (o) => o.errors.some((i) => i.code === "too-many-files")
41
42
  ).length > 0) {
42
43
  h({
43
44
  color: "blue",
@@ -47,20 +48,19 @@ const C = ({
47
48
  }
48
49
  },
49
50
  [e]
50
- ), F = p(c, [c]);
51
- return /* @__PURE__ */ o(
52
- I,
51
+ ), z = f(s, [s]);
52
+ return /* @__PURE__ */ n(
53
+ E,
53
54
  {
54
55
  loading: g,
55
- onDrop: F,
56
+ onDrop: z,
56
57
  onReject: y,
57
- maxFiles: n?.maxFiles || 1,
58
- accept: E,
58
+ maxFiles: t?.maxFiles || 1,
59
+ accept: I,
59
60
  px: 60,
60
61
  py: "xl",
61
- className: `${S.pickerDropZone}`,
62
- ...n || {},
63
- children: /* @__PURE__ */ f(
62
+ ...t || {},
63
+ children: /* @__PURE__ */ m(
64
64
  d,
65
65
  {
66
66
  justify: "center",
@@ -69,33 +69,17 @@ const C = ({
69
69
  mih: 89,
70
70
  style: { pointerEvents: "none" },
71
71
  children: [
72
- /* @__PURE__ */ o(
72
+ /* @__PURE__ */ n(
73
73
  v,
74
74
  {
75
75
  size: 32,
76
76
  color: "var(--mantine-color-bright)",
77
- icon: M
77
+ icon: k
78
78
  }
79
79
  ),
80
- /* @__PURE__ */ f(d, { gap: 8, align: "center", children: [
81
- /* @__PURE__ */ o(l, { fw: 500, fz: "sm", c: "bright", lh: "sm", ta: "center", children: /* @__PURE__ */ o(
82
- z,
83
- {
84
- ns: "ui",
85
- i18nKey: x,
86
- components: {
87
- choose: /* @__PURE__ */ o(
88
- l,
89
- {
90
- component: "span",
91
- td: "underline",
92
- c: "var(--primary-color-text, var(--mantine-primary-color-filled))"
93
- }
94
- )
95
- }
96
- }
97
- ) }),
98
- m && /* @__PURE__ */ o(l, { fz: "xs", fw: 400, lh: "140%", c: "dimmed", ta: "center", children: m })
80
+ /* @__PURE__ */ m(d, { gap: 8, align: "center", children: [
81
+ /* @__PURE__ */ n(p, { fw: 500, fz: "sm", c: "bright", lh: "sm", ta: "center", children: F }),
82
+ a && /* @__PURE__ */ n(p, { fz: "xs", fw: 400, lh: "140%", c: "dimmed", ta: "center", children: a })
99
83
  ] })
100
84
  ]
101
85
  }
@@ -104,5 +88,5 @@ const C = ({
104
88
  );
105
89
  };
106
90
  export {
107
- C as FilePickerUpload
91
+ $ as FilePickerUpload
108
92
  };
@@ -5,7 +5,7 @@ type Data = {
5
5
  totalPages: number;
6
6
  hasMore: boolean;
7
7
  };
8
- export declare const fetchGiphyPhotos: (params: ApiGiphy.Request, page?: number, token?: string) => Promise<Data>;
9
- export declare const useGiphyPhotos: (params: ApiGiphy.Request, page: number, token?: string) => import("@tanstack/react-query").UseQueryResult<Data, Error>;
8
+ export declare const fetchGiphyPhotos: (params: ApiGiphy.Request, page?: number, _token?: string) => Promise<Data>;
9
+ export declare const useGiphyPhotos: (params: ApiGiphy.Request, page: number, _token?: string) => import("@tanstack/react-query").UseQueryResult<Data, Error>;
10
10
  export {};
11
11
  //# sourceMappingURL=giphyApi.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"giphyApi.d.ts","sourceRoot":"","sources":["../../../../src/components/FilePicker/api/giphyApi.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAI9C,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,QAAQ,CAAC,OAAO,EACxB,aAAQ,EACR,QAAQ,MAAM,KACb,OAAO,CAAC,IAAI,CA8Bd,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,QAAQ,QAAQ,CAAC,OAAO,EACxB,MAAM,MAAM,EACZ,QAAQ,MAAM,gEAMf,CAAC"}
1
+ {"version":3,"file":"giphyApi.d.ts","sourceRoot":"","sources":["../../../../src/components/FilePicker/api/giphyApi.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,QAAQ,CAAC,OAAO,EACxB,aAAQ,EACR,SAAS,MAAM,KACd,OAAO,CAAC,IAAI,CA2Bd,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,QAAQ,QAAQ,CAAC,OAAO,EACxB,MAAM,MAAM,EACZ,SAAS,MAAM,gEAMhB,CAAC"}
@@ -1,26 +1,23 @@
1
1
  import { useQuery as h } from "@tanstack/react-query";
2
- import p from "query-string";
3
- const u = "1kKxu8nbV5rsb4ieGGw0zERUSw0knTNr", y = async (o, n = 1, i) => {
4
- const a = o.q ? "/gifs/search" : "/gifs/trending", s = await fetch(
5
- `https://api.giphy.com/v1${a}?${p.stringify({
6
- ...o,
7
- api_key: i || u
8
- })}`
2
+ import u from "query-string";
3
+ const g = async (o, n = 1, e) => {
4
+ const a = o.q ? "/gifs/search" : "/gifs/trending", i = await fetch(
5
+ `/v1/media/giphy${a}?${u.stringify(o)}`
9
6
  );
10
- if (!s.ok)
7
+ if (!i.ok)
11
8
  throw new Error("Failed to fetch Giphy photos");
12
- const t = await s.json(), e = t.data, r = Math.ceil(t.pagination.total_count / 12), c = t.pagination.total_count % 12 === 0 || t.pagination.total_count > t.pagination.count + t.pagination.offset;
9
+ const t = await i.json(), s = t.data, r = Math.ceil(t.pagination.total_count / 12), c = t.pagination.total_count % 12 === 0 || t.pagination.total_count > t.pagination.count + t.pagination.offset;
13
10
  return {
14
- items: e,
11
+ items: s,
15
12
  page: n,
16
13
  totalPages: r,
17
14
  hasMore: c
18
15
  };
19
- }, w = (o, n, i) => h({
16
+ }, l = (o, n, e) => h({
20
17
  queryKey: ["giphyPhotos", o, n],
21
- queryFn: () => y(o, n, i)
18
+ queryFn: () => g(o, n)
22
19
  });
23
20
  export {
24
- y as fetchGiphyPhotos,
25
- w as useGiphyPhotos
21
+ g as fetchGiphyPhotos,
22
+ l as useGiphyPhotos
26
23
  };
@@ -5,7 +5,7 @@ type Data = {
5
5
  totalPages: number;
6
6
  hasMore: boolean;
7
7
  };
8
- export declare const fetchUnsplashPhotos: (params: ApiUnsplash.Request, clientId?: string, previousData?: Data) => Promise<Data>;
9
- export declare const useUnsplashPhotos: (params: ApiUnsplash.Request, clientId?: string, rest?: any) => import("@tanstack/react-query").DefinedUseQueryResult<Data, Error>;
8
+ export declare const fetchUnsplashPhotos: (params: ApiUnsplash.Request, _clientId?: string, previousData?: Data) => Promise<Data>;
9
+ export declare const useUnsplashPhotos: (params: ApiUnsplash.Request, _clientId?: string, rest?: any) => import("@tanstack/react-query").DefinedUseQueryResult<Data, Error>;
10
10
  export {};
11
11
  //# sourceMappingURL=unsplashApi.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"unsplashApi.d.ts","sourceRoot":"","sources":["../../../../src/components/FilePicker/api/unsplashApi.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIpD,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,WAAW,CAAC,OAAO,EAC3B,WAAW,MAAM,EACjB,eAAe,IAAI,KAClB,OAAO,CAAC,IAAI,CA4Bd,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,WAAW,CAAC,OAAO,EAC3B,WAAW,MAAM,EACjB,OAAO,GAAG,uEAOX,CAAC"}
1
+ {"version":3,"file":"unsplashApi.d.ts","sourceRoot":"","sources":["../../../../src/components/FilePicker/api/unsplashApi.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,WAAW,CAAC,OAAO,EAC3B,YAAY,MAAM,EAClB,eAAe,IAAI,KAClB,OAAO,CAAC,IAAI,CAuBd,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,WAAW,CAAC,OAAO,EAC3B,YAAY,MAAM,EAClB,OAAO,GAAG,uEAOX,CAAC"}