@replyke/ui-core-react-js 4.0.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 (133) hide show
  1. package/dist/cjs/components/EmojiSuggestions.d.ts +4 -0
  2. package/dist/cjs/components/EmojiSuggestions.js +42 -0
  3. package/dist/cjs/components/EmojiSuggestions.js.map +1 -0
  4. package/dist/cjs/components/FromNow.d.ts +9 -0
  5. package/dist/cjs/components/FromNow.js +51 -0
  6. package/dist/cjs/components/FromNow.js.map +1 -0
  7. package/dist/cjs/components/GiphyContainer.d.ts +14 -0
  8. package/dist/cjs/components/GiphyContainer.js +132 -0
  9. package/dist/cjs/components/GiphyContainer.js.map +1 -0
  10. package/dist/cjs/components/InfiniteScrollTrigger.d.ts +4 -0
  11. package/dist/cjs/components/InfiniteScrollTrigger.js +31 -0
  12. package/dist/cjs/components/InfiniteScrollTrigger.js.map +1 -0
  13. package/dist/cjs/components/Modal.d.ts +8 -0
  14. package/dist/cjs/components/Modal.js +86 -0
  15. package/dist/cjs/components/Modal.js.map +1 -0
  16. package/dist/cjs/components/Skeleton.d.ts +7 -0
  17. package/dist/cjs/components/Skeleton.js +39 -0
  18. package/dist/cjs/components/Skeleton.js.map +1 -0
  19. package/dist/cjs/components/UserAvatar.d.ts +12 -0
  20. package/dist/cjs/components/UserAvatar.js +26 -0
  21. package/dist/cjs/components/UserAvatar.js.map +1 -0
  22. package/dist/cjs/components/index.d.ts +7 -0
  23. package/dist/cjs/components/index.js +23 -0
  24. package/dist/cjs/components/index.js.map +1 -0
  25. package/dist/cjs/constants/index.d.ts +1 -0
  26. package/dist/cjs/constants/index.js +18 -0
  27. package/dist/cjs/constants/index.js.map +1 -0
  28. package/dist/cjs/constants/reset-styles.d.ts +9 -0
  29. package/dist/cjs/constants/reset-styles.js +54 -0
  30. package/dist/cjs/constants/reset-styles.js.map +1 -0
  31. package/dist/cjs/helpers/index.d.ts +1 -0
  32. package/dist/cjs/helpers/index.js +6 -0
  33. package/dist/cjs/helpers/index.js.map +1 -0
  34. package/dist/cjs/helpers/parseContentWithMentions.d.ts +2 -0
  35. package/dist/cjs/helpers/parseContentWithMentions.js +43 -0
  36. package/dist/cjs/helpers/parseContentWithMentions.js.map +1 -0
  37. package/dist/cjs/hooks/index.d.ts +2 -0
  38. package/dist/cjs/hooks/index.js +11 -0
  39. package/dist/cjs/hooks/index.js.map +1 -0
  40. package/dist/cjs/hooks/useTextareaCursorIndicator.d.ts +8 -0
  41. package/dist/cjs/hooks/useTextareaCursorIndicator.js +32 -0
  42. package/dist/cjs/hooks/useTextareaCursorIndicator.js.map +1 -0
  43. package/dist/cjs/hooks/useWidth.d.ts +2 -0
  44. package/dist/cjs/hooks/useWidth.js +28 -0
  45. package/dist/cjs/hooks/useWidth.js.map +1 -0
  46. package/dist/cjs/icons/EllipsisIcon.d.ts +8 -0
  47. package/dist/cjs/icons/EllipsisIcon.js +6 -0
  48. package/dist/cjs/icons/EllipsisIcon.js.map +1 -0
  49. package/dist/cjs/icons/FlagIcon.d.ts +7 -0
  50. package/dist/cjs/icons/FlagIcon.js +8 -0
  51. package/dist/cjs/icons/FlagIcon.js.map +1 -0
  52. package/dist/cjs/icons/HeartFullIcon.d.ts +7 -0
  53. package/dist/cjs/icons/HeartFullIcon.js +6 -0
  54. package/dist/cjs/icons/HeartFullIcon.js.map +1 -0
  55. package/dist/cjs/icons/HeartIcon.d.ts +7 -0
  56. package/dist/cjs/icons/HeartIcon.js +6 -0
  57. package/dist/cjs/icons/HeartIcon.js.map +1 -0
  58. package/dist/cjs/icons/MagnifyingGlassIcon.d.ts +7 -0
  59. package/dist/cjs/icons/MagnifyingGlassIcon.js +6 -0
  60. package/dist/cjs/icons/MagnifyingGlassIcon.js.map +1 -0
  61. package/dist/cjs/icons/index.d.ts +6 -0
  62. package/dist/cjs/icons/index.js +17 -0
  63. package/dist/cjs/icons/index.js.map +1 -0
  64. package/dist/cjs/index.d.ts +5 -0
  65. package/dist/cjs/index.js +22 -0
  66. package/dist/cjs/index.js.map +1 -0
  67. package/dist/esm/components/EmojiSuggestions.d.ts +4 -0
  68. package/dist/esm/components/EmojiSuggestions.js +40 -0
  69. package/dist/esm/components/EmojiSuggestions.js.map +1 -0
  70. package/dist/esm/components/FromNow.d.ts +9 -0
  71. package/dist/esm/components/FromNow.js +46 -0
  72. package/dist/esm/components/FromNow.js.map +1 -0
  73. package/dist/esm/components/GiphyContainer.d.ts +14 -0
  74. package/dist/esm/components/GiphyContainer.js +130 -0
  75. package/dist/esm/components/GiphyContainer.js.map +1 -0
  76. package/dist/esm/components/InfiniteScrollTrigger.d.ts +4 -0
  77. package/dist/esm/components/InfiniteScrollTrigger.js +29 -0
  78. package/dist/esm/components/InfiniteScrollTrigger.js.map +1 -0
  79. package/dist/esm/components/Modal.d.ts +8 -0
  80. package/dist/esm/components/Modal.js +84 -0
  81. package/dist/esm/components/Modal.js.map +1 -0
  82. package/dist/esm/components/Skeleton.d.ts +7 -0
  83. package/dist/esm/components/Skeleton.js +35 -0
  84. package/dist/esm/components/Skeleton.js.map +1 -0
  85. package/dist/esm/components/UserAvatar.d.ts +12 -0
  86. package/dist/esm/components/UserAvatar.js +24 -0
  87. package/dist/esm/components/UserAvatar.js.map +1 -0
  88. package/dist/esm/components/index.d.ts +7 -0
  89. package/dist/esm/components/index.js +8 -0
  90. package/dist/esm/components/index.js.map +1 -0
  91. package/dist/esm/constants/index.d.ts +1 -0
  92. package/dist/esm/constants/index.js +2 -0
  93. package/dist/esm/constants/index.js.map +1 -0
  94. package/dist/esm/constants/reset-styles.d.ts +9 -0
  95. package/dist/esm/constants/reset-styles.js +51 -0
  96. package/dist/esm/constants/reset-styles.js.map +1 -0
  97. package/dist/esm/helpers/index.d.ts +1 -0
  98. package/dist/esm/helpers/index.js +2 -0
  99. package/dist/esm/helpers/index.js.map +1 -0
  100. package/dist/esm/helpers/parseContentWithMentions.d.ts +2 -0
  101. package/dist/esm/helpers/parseContentWithMentions.js +39 -0
  102. package/dist/esm/helpers/parseContentWithMentions.js.map +1 -0
  103. package/dist/esm/hooks/index.d.ts +2 -0
  104. package/dist/esm/hooks/index.js +3 -0
  105. package/dist/esm/hooks/index.js.map +1 -0
  106. package/dist/esm/hooks/useTextareaCursorIndicator.d.ts +8 -0
  107. package/dist/esm/hooks/useTextareaCursorIndicator.js +30 -0
  108. package/dist/esm/hooks/useTextareaCursorIndicator.js.map +1 -0
  109. package/dist/esm/hooks/useWidth.d.ts +2 -0
  110. package/dist/esm/hooks/useWidth.js +26 -0
  111. package/dist/esm/hooks/useWidth.js.map +1 -0
  112. package/dist/esm/icons/EllipsisIcon.d.ts +8 -0
  113. package/dist/esm/icons/EllipsisIcon.js +4 -0
  114. package/dist/esm/icons/EllipsisIcon.js.map +1 -0
  115. package/dist/esm/icons/FlagIcon.d.ts +7 -0
  116. package/dist/esm/icons/FlagIcon.js +6 -0
  117. package/dist/esm/icons/FlagIcon.js.map +1 -0
  118. package/dist/esm/icons/HeartFullIcon.d.ts +7 -0
  119. package/dist/esm/icons/HeartFullIcon.js +4 -0
  120. package/dist/esm/icons/HeartFullIcon.js.map +1 -0
  121. package/dist/esm/icons/HeartIcon.d.ts +7 -0
  122. package/dist/esm/icons/HeartIcon.js +4 -0
  123. package/dist/esm/icons/HeartIcon.js.map +1 -0
  124. package/dist/esm/icons/MagnifyingGlassIcon.d.ts +7 -0
  125. package/dist/esm/icons/MagnifyingGlassIcon.js +4 -0
  126. package/dist/esm/icons/MagnifyingGlassIcon.js.map +1 -0
  127. package/dist/esm/icons/index.d.ts +6 -0
  128. package/dist/esm/icons/index.js +7 -0
  129. package/dist/esm/icons/index.js.map +1 -0
  130. package/dist/esm/index.d.ts +5 -0
  131. package/dist/esm/index.js +6 -0
  132. package/dist/esm/index.js.map +1 -0
  133. package/package.json +56 -0
@@ -0,0 +1,4 @@
1
+ declare function EmojiSuggestions({ onEmojiClick, }: {
2
+ onEmojiClick: (emoji: string) => void;
3
+ }): import("react/jsx-runtime").JSX.Element;
4
+ export default EmojiSuggestions;
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const react_1 = require("react");
5
+ const emojiGroup1 = ["😂", "❤️", "🤣", "😍", "🙏"];
6
+ const emojiGroup2 = ["🥰", "😊", "😭", "👍", "😅"];
7
+ const emojiGroup3 = ["😢", "👏", "💕", "🥺", "😘"];
8
+ const emojiGroup4 = ["🤔", "🤗", "🙌", "😎", "✨"];
9
+ function EmojiSuggestions({ onEmojiClick, }) {
10
+ const [clickedEmoji, setClickedEmoji] = (0, react_1.useState)(null);
11
+ const [emojiSubset, setEmojiSubset] = (0, react_1.useState)([]);
12
+ (0, react_1.useEffect)(() => {
13
+ // Pick 8 random emojis from the array
14
+ const combinedEmojis = [...emojiGroup1, ...emojiGroup2, ...emojiGroup3];
15
+ const shuffled = combinedEmojis.sort(() => 0.5 - Math.random());
16
+ setEmojiSubset(shuffled.slice(0, 8));
17
+ }, []);
18
+ const handleEmojiClick = (emoji) => {
19
+ setClickedEmoji(emoji);
20
+ onEmojiClick(emoji);
21
+ setTimeout(() => setClickedEmoji(null), 150); // Reset after animation
22
+ };
23
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
24
+ display: "flex",
25
+ gap: 12,
26
+ padding: 8,
27
+ borderBottom: "1px solid #e6e6e6",
28
+ overflowX: "auto",
29
+ overflowY: "hidden",
30
+ scrollbarWidth: "none",
31
+ msOverflowStyle: "none",
32
+ }, children: emojiSubset.map((emoji) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => handleEmojiClick(emoji), style: {
33
+ cursor: "pointer",
34
+ fontSize: 16,
35
+ display: "inline-block",
36
+ userSelect: "none",
37
+ transition: "transform 0.15s",
38
+ transform: clickedEmoji === emoji ? "scale(0.8)" : "scale(1)", // Shrink and grow
39
+ }, children: emoji }, emoji))) }));
40
+ }
41
+ exports.default = EmojiSuggestions;
42
+ //# sourceMappingURL=EmojiSuggestions.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EmojiSuggestions.js","sourceRoot":"","sources":["../../../src/components/EmojiSuggestions.tsx"],"names":[],"mappings":";;;AAAA,iCAA4C;AAE5C,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACnD,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACnD,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACnD,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;AAGlD,SAAS,gBAAgB,CAAC,EACxB,YAAY,GAGb;IACC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IAE7D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,sCAAsC;QACtC,MAAM,cAAc,GAAG,CAAC,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,WAAW,CAAC,CAAC;QAExE,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAChE,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE;QACzC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,wBAAwB;IACxE,CAAC,CAAC;IAEF,OAAO,CACL,gCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,GAAG,EAAE,EAAE;YACP,OAAO,EAAE,CAAC;YACV,YAAY,EAAE,mBAAmB;YACjC,SAAS,EAAE,MAAM;YACjB,SAAS,EAAE,QAAQ;YACnB,cAAc,EAAE,MAAM;YACtB,eAAe,EAAE,MAAM;SACxB,YAEA,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1B,gCAEE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EACtC,KAAK,EAAE;gBACL,MAAM,EAAE,SAAS;gBACjB,QAAQ,EAAE,EAAE;gBACZ,OAAO,EAAE,cAAc;gBACvB,UAAU,EAAE,MAAM;gBAClB,UAAU,EAAE,iBAAiB;gBAC7B,SAAS,EAAE,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EAAE,kBAAkB;aAClF,YAEA,KAAK,IAXD,KAAK,CAYN,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,gBAAgB,CAAC"}
@@ -0,0 +1,9 @@
1
+ declare function FromNow({ time, fontSize, fontWeight, color, lean, justNowText, }: {
2
+ time: Date | string;
3
+ fontSize?: number;
4
+ fontWeight?: number;
5
+ color?: string;
6
+ lean?: boolean;
7
+ justNowText?: string;
8
+ }): import("react/jsx-runtime").JSX.Element;
9
+ export default FromNow;
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const jsx_runtime_1 = require("react/jsx-runtime");
7
+ const moment_1 = __importDefault(require("moment"));
8
+ function formatTime(time, justNowText) {
9
+ const now = new Date();
10
+ const then = new Date(time);
11
+ const seconds = Math.floor((now.getTime() - then.getTime()) / 1000);
12
+ if (seconds < 20) {
13
+ return justNowText;
14
+ }
15
+ else if (seconds < 60) {
16
+ return `${seconds}s`;
17
+ }
18
+ else if (seconds < 3600) {
19
+ return `${Math.floor(seconds / 60)}m`;
20
+ }
21
+ else if (seconds < 86400) {
22
+ return `${Math.floor(seconds / 3600)}h`;
23
+ }
24
+ else if (seconds < 2592000) {
25
+ // 30 days
26
+ return `${Math.floor(seconds / 86400)}d`;
27
+ }
28
+ else if (seconds < 31536000) {
29
+ // 365 days
30
+ return `${Math.floor(seconds / 2592000)}mo`;
31
+ }
32
+ else {
33
+ return `${Math.floor(seconds / 31536000)}y`;
34
+ }
35
+ }
36
+ function FromNow({ time, fontSize = 12, fontWeight = 400, color = "#737373", lean, justNowText = "Just now", }) {
37
+ if (lean) {
38
+ return ((0, jsx_runtime_1.jsx)("span", { style: {
39
+ fontSize,
40
+ fontWeight,
41
+ color,
42
+ }, children: formatTime(time, justNowText) }));
43
+ }
44
+ return ((0, jsx_runtime_1.jsx)("span", { style: {
45
+ fontSize,
46
+ fontWeight,
47
+ color,
48
+ }, children: (0, moment_1.default)(new Date(time)).fromNow() }));
49
+ }
50
+ exports.default = FromNow;
51
+ //# sourceMappingURL=FromNow.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FromNow.js","sourceRoot":"","sources":["../../../src/components/FromNow.tsx"],"names":[],"mappings":";;;;;;AAAA,oDAA4B;AAE5B,SAAS,UAAU,CAAC,IAAmB,EAAE,WAAmB;IAC1D,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IACvB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC;IAEpE,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;QACjB,OAAO,WAAW,CAAC;IACrB,CAAC;SAAM,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;QACxB,OAAO,GAAG,OAAO,GAAG,CAAC;IACvB,CAAC;SAAM,IAAI,OAAO,GAAG,IAAI,EAAE,CAAC;QAC1B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC;IACxC,CAAC;SAAM,IAAI,OAAO,GAAG,KAAK,EAAE,CAAC;QAC3B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;IAC1C,CAAC;SAAM,IAAI,OAAO,GAAG,OAAO,EAAE,CAAC;QAC7B,UAAU;QACV,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC;IAC3C,CAAC;SAAM,IAAI,OAAO,GAAG,QAAQ,EAAE,CAAC;QAC9B,WAAW;QACX,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAC9C,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC;IAC9C,CAAC;AACH,CAAC;AAED,SAAS,OAAO,CAAC,EACf,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,GAAG,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,EACJ,WAAW,GAAG,UAAU,GAQzB;IACC,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,iCACE,KAAK,EAAE;gBACL,QAAQ;gBACR,UAAU;gBACV,KAAK;aACN,YAEA,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,GACzB,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CACL,iCACE,KAAK,EAAE;YACL,QAAQ;YACR,UAAU;YACV,KAAK;SACN,YAEA,IAAA,gBAAM,EAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,GAC5B,CACR,CAAC;AACJ,CAAC;AAED,kBAAe,OAAO,CAAC"}
@@ -0,0 +1,14 @@
1
+ declare function GiphyContainer({ onClickBack, onSelectGif, giphyApiKey, visible, }: {
2
+ onClickBack: () => void;
3
+ onSelectGif: (selectedGif: {
4
+ id: string;
5
+ url: string;
6
+ gifUrl: string;
7
+ gifPreviewUrl: string;
8
+ altText: string | undefined;
9
+ aspectRatio: number;
10
+ }) => void;
11
+ giphyApiKey: string;
12
+ visible: boolean;
13
+ }): import("react/jsx-runtime").JSX.Element;
14
+ export default GiphyContainer;
@@ -0,0 +1,132 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const react_1 = require("react");
5
+ const react_components_1 = require("@giphy/react-components");
6
+ const js_fetch_api_1 = require("@giphy/js-fetch-api");
7
+ const icons_1 = require("../icons");
8
+ function GiphyContainer({ onClickBack, onSelectGif, giphyApiKey, visible, }) {
9
+ const gridParentRef = (0, react_1.useRef)(null);
10
+ const [parentWidth, setParentWidth] = (0, react_1.useState)(0);
11
+ const [query, setQuery] = (0, react_1.useState)(""); // Current search query
12
+ const [debouncedQuery, setDebouncedQuery] = (0, react_1.useState)(""); // Debounced query
13
+ const gf = (0, react_1.useMemo)(() => new js_fetch_api_1.GiphyFetch(giphyApiKey), [giphyApiKey]);
14
+ // Debounce effect
15
+ (0, react_1.useEffect)(() => {
16
+ const handler = setTimeout(() => {
17
+ setDebouncedQuery(query);
18
+ }, 500); // 500ms debounce delay
19
+ return () => {
20
+ clearTimeout(handler);
21
+ };
22
+ }, [query]);
23
+ // Update parent width on mount and resize
24
+ (0, react_1.useEffect)(() => {
25
+ const updateWidth = () => {
26
+ if (gridParentRef.current) {
27
+ setParentWidth(gridParentRef.current.offsetWidth);
28
+ }
29
+ };
30
+ updateWidth();
31
+ window.addEventListener("resize", updateWidth);
32
+ return () => {
33
+ window.removeEventListener("resize", updateWidth);
34
+ };
35
+ }, []);
36
+ // Conditionally fetch Gifs only when visible
37
+ const fetchGifs = (0, react_1.useCallback)((offset) => {
38
+ if (!visible) {
39
+ // Return a valid GifsResult object with empty values
40
+ return Promise.resolve({
41
+ data: [],
42
+ pagination: { total_count: 0, count: 0, offset: 0 }, // Provide complete pagination properties
43
+ meta: { status: 200, msg: "OK", response_id: "" },
44
+ });
45
+ }
46
+ // Fetch search results if visible
47
+ if (debouncedQuery.trim().length > 0) {
48
+ return gf.search(debouncedQuery, { offset, limit: 10 });
49
+ }
50
+ // Fetch trending
51
+ return gf.trending({ offset, limit: 10 });
52
+ }, [debouncedQuery, gf, visible]);
53
+ (0, react_1.useEffect)(() => {
54
+ if (!visible)
55
+ setQuery("");
56
+ }, [visible]);
57
+ // Memoize the Grid component
58
+ const memoizedGrid = (0, react_1.useMemo)(() => {
59
+ if (parentWidth > 0) {
60
+ return ((0, jsx_runtime_1.jsx)(react_components_1.Grid, { width: parentWidth, columns: 2, fetchGifs: fetchGifs, onGifClick: (gifData, e) => {
61
+ e.preventDefault();
62
+ e.stopPropagation();
63
+ const aspectRatio = Number(gifData.images.fixed_width.width) /
64
+ Number(gifData.images.fixed_width.height);
65
+ const selectedGif = {
66
+ id: gifData.id.toString(),
67
+ url: gifData.url,
68
+ gifUrl: gifData.images.fixed_width.url,
69
+ gifPreviewUrl: gifData.images.preview_gif.url,
70
+ altText: gifData.alt_text,
71
+ aspectRatio,
72
+ };
73
+ onSelectGif(selectedGif);
74
+ } }, `${debouncedQuery}-${visible}`));
75
+ }
76
+ return null;
77
+ }, [parentWidth, fetchGifs, debouncedQuery, onSelectGif, visible]);
78
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
79
+ position: "absolute",
80
+ inset: 0,
81
+ opacity: visible ? 1 : 0, // Opacity based on visibility
82
+ backgroundColor: "white",
83
+ height: "100%",
84
+ width: "100%",
85
+ display: "grid",
86
+ gridTemplateRows: "auto 1fr",
87
+ overflow: "hidden",
88
+ padding: "0.25rem",
89
+ gap: "0.25rem",
90
+ zIndex: 1000,
91
+ pointerEvents: visible ? "auto" : "none", // Make it unclickable when not visible
92
+ transition: "opacity 0.1s ease", // Smooth fade effect
93
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
94
+ display: "flex",
95
+ gap: "0.25rem",
96
+ alignItems: "stretch",
97
+ }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onClickBack, style: {
98
+ backgroundColor: "#e5e7eb",
99
+ borderRadius: "0.5rem",
100
+ width: 28,
101
+ display: "flex",
102
+ alignItems: "center",
103
+ justifyContent: "center",
104
+ flexShrink: 0,
105
+ color: "#888",
106
+ }, children: "\u2190" }), (0, jsx_runtime_1.jsxs)("div", { style: {
107
+ width: "100%",
108
+ borderRadius: "0.5rem",
109
+ paddingLeft: 8,
110
+ backgroundColor: "#e5e7eb",
111
+ display: "flex",
112
+ alignItems: "center",
113
+ flex: 1,
114
+ }, children: [(0, jsx_runtime_1.jsx)("div", { className: "pt-1", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIcon, { width: 14, color: "#888" }) }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search GIPHY", value: query, onChange: (e) => setQuery(e.target.value), style: {
115
+ width: "100%",
116
+ padding: "0.5rem",
117
+ boxSizing: "border-box",
118
+ backgroundColor: "transparent",
119
+ fontSize: 13,
120
+ outline: "none", // Removes the default focus outline
121
+ boxShadow: "none", // Removes any focus ring or shadow
122
+ } })] })] }), (0, jsx_runtime_1.jsx)("div", { ref: gridParentRef, style: {
123
+ flex: 1,
124
+ height: "100%",
125
+ width: "100%",
126
+ overflowY: "scroll",
127
+ scrollbarWidth: "none",
128
+ msOverflowStyle: "none",
129
+ }, children: memoizedGrid })] }));
130
+ }
131
+ exports.default = GiphyContainer;
132
+ //# sourceMappingURL=GiphyContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GiphyContainer.js","sourceRoot":"","sources":["../../../src/components/GiphyContainer.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,4 @@
1
+ declare const InfiniteScrollTrigger: ({ onTriggered, }: {
2
+ onTriggered: () => void;
3
+ }) => import("react/jsx-runtime").JSX.Element;
4
+ export default InfiniteScrollTrigger;
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+ "use client";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
6
+ const InfiniteScrollTrigger = ({ onTriggered, }) => {
7
+ const commentsEndRef = (0, react_1.useRef)(null);
8
+ (0, react_1.useEffect)(() => {
9
+ const currentEndRef = commentsEndRef.current;
10
+ const observer = new IntersectionObserver(([entry]) => {
11
+ if (entry.isIntersecting) {
12
+ onTriggered();
13
+ }
14
+ }, {
15
+ root: null, // Use the document's viewport as the container
16
+ rootMargin: "0px",
17
+ threshold: 0.1, // Trigger when 10% of the target is visible
18
+ });
19
+ if (currentEndRef) {
20
+ observer.observe(currentEndRef);
21
+ }
22
+ return () => {
23
+ if (currentEndRef) {
24
+ observer.unobserve(currentEndRef);
25
+ }
26
+ };
27
+ }, [onTriggered]);
28
+ return (0, jsx_runtime_1.jsx)("div", { ref: commentsEndRef, style: { height: 1 } });
29
+ };
30
+ exports.default = InfiniteScrollTrigger;
31
+ //# sourceMappingURL=InfiniteScrollTrigger.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InfiniteScrollTrigger.js","sourceRoot":"","sources":["../../../src/components/InfiniteScrollTrigger.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AAEb,iCAA0C;AAE1C,MAAM,qBAAqB,GAAG,CAAC,EAC7B,WAAW,GAGZ,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC;QAE7C,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACV,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,WAAW,EAAE,CAAC;YAChB,CAAC;QACH,CAAC,EACD;YACE,IAAI,EAAE,IAAI,EAAE,+CAA+C;YAC3D,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,GAAG,EAAE,4CAA4C;SAC7D,CACF,CAAC;QAEF,IAAI,aAAa,EAAE,CAAC;YAClB,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,aAAa,EAAE,CAAC;gBAClB,QAAQ,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,gCAAK,GAAG,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,GAAI,CAAC;AAC5D,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC"}
@@ -0,0 +1,8 @@
1
+ import React, { ReactNode } from "react";
2
+ interface ModalProps {
3
+ show: boolean;
4
+ onClose?: () => void;
5
+ children: ReactNode;
6
+ }
7
+ declare const Modal: React.FC<ModalProps>;
8
+ export default Modal;
@@ -0,0 +1,86 @@
1
+ "use strict";
2
+ "use client";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
6
+ const Modal = ({ show, onClose, children }) => {
7
+ const [isVisible, setIsVisible] = (0, react_1.useState)(show);
8
+ (0, react_1.useEffect)(() => {
9
+ if (show) {
10
+ setIsVisible(true);
11
+ }
12
+ }, [show]);
13
+ const handleOverlayClick = (e) => {
14
+ e.stopPropagation();
15
+ onClose?.();
16
+ };
17
+ // const handleContentClick = (e: MouseEvent<HTMLDivElement>) => {
18
+ // e.stopPropagation();
19
+ // };
20
+ const handleAnimationEnd = () => {
21
+ if (!show) {
22
+ setIsVisible(false);
23
+ }
24
+ };
25
+ (0, react_1.useEffect)(() => {
26
+ const styleSheet = document.createElement("style");
27
+ styleSheet.type = "text/css";
28
+ styleSheet.innerText = `
29
+ @keyframes fadeIn {
30
+ from {
31
+ background: rgba(0, 0, 0, 0);
32
+ }
33
+ to {
34
+ background: rgba(0, 0, 0, 0.5);
35
+ }
36
+ }
37
+ @keyframes fadeOut {
38
+ from {
39
+ background: rgba(0, 0, 0, 0.5);
40
+ }
41
+ to {
42
+ background: rgba(0, 0, 0, 0);
43
+ }
44
+ }
45
+ `;
46
+ document.head.appendChild(styleSheet);
47
+ return () => {
48
+ document.head.removeChild(styleSheet);
49
+ };
50
+ }, []);
51
+ if (!isVisible) {
52
+ return null;
53
+ }
54
+ const modalOverlayStyle = {
55
+ position: "fixed",
56
+ top: 0,
57
+ left: 0,
58
+ width: "100%",
59
+ height: "100%",
60
+ background: show ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0)", // Background based on show state
61
+ display: "flex",
62
+ flexDirection: "column",
63
+ justifyContent: "center",
64
+ alignItems: "stretch",
65
+ zIndex: 1000,
66
+ animation: show ? "fadeIn 0.5s forwards" : "fadeOut 0.5s forwards", // Apply fadeIn or fadeOut
67
+ visibility: show ? "visible" : "hidden",
68
+ };
69
+ // const modalContentStyle: React.CSSProperties = {
70
+ // position: "relative",
71
+ // width: "max-content",
72
+ // backgroundColor:"yellow",
73
+ // };
74
+ // const modalCloseStyle: React.CSSProperties = {
75
+ // position: 'absolute',
76
+ // top: '10px',
77
+ // right: '10px',
78
+ // background: 'none',
79
+ // border: 'none',
80
+ // fontSize: '20px',
81
+ // cursor: 'pointer',
82
+ // };
83
+ return ((0, jsx_runtime_1.jsx)("div", { style: modalOverlayStyle, onAnimationEnd: handleAnimationEnd, onClick: handleOverlayClick, children: children }));
84
+ };
85
+ exports.default = Modal;
86
+ //# sourceMappingURL=Modal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AAEb,iCAA0E;AAQ1E,MAAM,KAAK,GAAyB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YACT,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,kBAAkB,GAAG,CAAC,CAA6B,EAAE,EAAE;QAC3D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,kEAAkE;IAClE,yBAAyB;IACzB,KAAK;IAEL,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACnD,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC;QAC7B,UAAU,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;KAiBtB,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAEtC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QACxC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,iBAAiB,GAAwB;QAC7C,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,kBAAkB,EAAE,iCAAiC;QAC/F,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,uBAAuB,EAAE,0BAA0B;QAC9F,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;KACxC,CAAC;IAEF,mDAAmD;IACnD,0BAA0B;IAC1B,0BAA0B;IAC1B,8BAA8B;IAC9B,KAAK;IAEL,iDAAiD;IACjD,0BAA0B;IAC1B,iBAAiB;IACjB,mBAAmB;IACnB,wBAAwB;IACxB,oBAAoB;IACpB,sBAAsB;IACtB,uBAAuB;IACvB,KAAK;IAEL,OAAO,CACL,gCACE,KAAK,EAAE,iBAAiB,EACxB,cAAc,EAAE,kBAAkB,EAClC,OAAO,EAAE,kBAAkB,YAM1B,QAAQ,GAEL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC"}
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ declare function Skeleton({ style }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
3
+ declare function CommentSkeleton({ extraLeftPadding, }: {
4
+ extraLeftPadding?: number;
5
+ }): import("react/jsx-runtime").JSX.Element;
6
+ declare function UserMentionSkeleton(): import("react/jsx-runtime").JSX.Element;
7
+ export { CommentSkeleton, UserMentionSkeleton, Skeleton };
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.CommentSkeleton = CommentSkeleton;
4
+ exports.UserMentionSkeleton = UserMentionSkeleton;
5
+ exports.Skeleton = Skeleton;
6
+ const jsx_runtime_1 = require("react/jsx-runtime");
7
+ function Skeleton({ style }) {
8
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
9
+ @keyframes pulse {
10
+ 0% { opacity: 1; }
11
+ 50% { opacity: 0.3; }
12
+ 100% { opacity: 1; }
13
+ }
14
+ ` }), (0, jsx_runtime_1.jsx)("div", { style: {
15
+ animation: "pulse 1.5s ease-in-out infinite",
16
+ width: "100%",
17
+ height: 16,
18
+ borderRadius: 8,
19
+ backgroundColor: "#efefef",
20
+ ...style,
21
+ } })] }));
22
+ }
23
+ function CommentSkeleton({ extraLeftPadding = 0, }) {
24
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
25
+ display: "flex",
26
+ gap: "8px",
27
+ width: "100%",
28
+ paddingLeft: 16 + extraLeftPadding,
29
+ }, children: [(0, jsx_runtime_1.jsx)(Skeleton, { style: { height: 32, width: 32, borderRadius: "50%" } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "grid", gap: "8px", flex: 1 }, children: [(0, jsx_runtime_1.jsx)(Skeleton, { style: { width: "30%", height: 12 } }), (0, jsx_runtime_1.jsx)(Skeleton, { style: { height: 12 } }), (0, jsx_runtime_1.jsx)(Skeleton, { style: { width: "15%", height: 12 } })] })] }));
30
+ }
31
+ function UserMentionSkeleton() {
32
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
33
+ display: "flex",
34
+ gap: "8px",
35
+ width: "100%",
36
+ alignItems: "center",
37
+ }, children: [(0, jsx_runtime_1.jsx)(Skeleton, { style: { height: "35px", width: "35px", borderRadius: "100%" } }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(Skeleton, {}) })] }));
38
+ }
39
+ //# sourceMappingURL=Skeleton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":";;AAwES,0CAAe;AAAE,kDAAmB;AAAE,4BAAQ;;AAtEvD,SAAS,QAAQ,CAAC,EAAE,KAAK,EAAwC;IAC/D,OAAO,CACL,6DACE,4CACG;;;;;;KAMJ,GACS,EACR,gCACE,KAAK,EAAE;oBACL,SAAS,EAAE,iCAAiC;oBAC5C,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,EAAE;oBACV,YAAY,EAAE,CAAC;oBACf,eAAe,EAAE,SAAS;oBAC1B,GAAG,KAAK;iBACT,GACD,IACD,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,EACvB,gBAAgB,GAAG,CAAC,GAGrB;IACC,OAAO,CACL,iCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,EAAE,GAAG,gBAAgB;SACnC,aAED,uBAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,GAAI,EACnE,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,aAClD,uBAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,GAAI,EACjD,uBAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAI,EACnC,uBAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,GAAI,IAC7C,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB;IAC1B,OAAO,CACL,iCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,QAAQ;SACrB,aAED,uBAAC,QAAQ,IACP,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,GAC9D,EACF,gCAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,uBAAC,QAAQ,KAAG,GACR,IACF,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,12 @@
1
+ interface UserProps {
2
+ id?: string;
3
+ avatar?: string | null | undefined;
4
+ name?: string | null | undefined;
5
+ username?: string | null | undefined;
6
+ }
7
+ declare function UserAvatar({ user, size, borderRadius, }: {
8
+ user: UserProps | undefined;
9
+ size?: number | undefined;
10
+ borderRadius?: number | undefined;
11
+ }): import("react/jsx-runtime").JSX.Element | null;
12
+ export default UserAvatar;
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const reset_styles_1 = require("../constants/reset-styles");
5
+ function UserAvatar({ user, size = 32, borderRadius, }) {
6
+ if (!user)
7
+ return null;
8
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
9
+ overflow: "hidden",
10
+ width: size,
11
+ height: size,
12
+ borderRadius: borderRadius || size,
13
+ borderWidth: 1,
14
+ borderColor: "#E6E6E6",
15
+ display: "inline-block",
16
+ flexShrink: 0,
17
+ }, children: (0, jsx_runtime_1.jsx)("img", { src: user.avatar ??
18
+ `https://api.dicebear.com/9.x/thumbs/svg?seed=${user.id}`, alt: user.name || user.id, style: {
19
+ ...reset_styles_1.resetImg,
20
+ width: "100%",
21
+ height: "100%",
22
+ objectFit: "cover",
23
+ } }) }));
24
+ }
25
+ exports.default = UserAvatar;
26
+ //# sourceMappingURL=UserAvatar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UserAvatar.js","sourceRoot":"","sources":["../../../src/components/UserAvatar.tsx"],"names":[],"mappings":";;;AAAA,4DAAqD;AASrD,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,YAAY,GAKb;IACC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,OAAO,CACL,gCACE,KAAK,EAAE;YACL,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,YAAY,IAAI,IAAI;YAClC,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,SAAS;YACtB,OAAO,EAAE,cAAc;YACvB,UAAU,EAAE,CAAC;SACd,YAED,gCACE,GAAG,EACD,IAAI,CAAC,MAAM;gBACX,gDAAgD,IAAI,CAAC,EAAE,EAAE,EAE3D,GAAG,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,EACzB,KAAK,EAAE;gBACL,GAAG,uBAAQ;gBACX,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,OAAO;aACnB,GACD,GACE,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,UAAU,CAAC"}
@@ -0,0 +1,7 @@
1
+ export { default as EmojiSuggestions } from "./EmojiSuggestions";
2
+ export { default as FromNow } from "./FromNow";
3
+ export { default as GiphyContainer } from "./GiphyContainer";
4
+ export { default as InfiniteScrollTrigger } from "./InfiniteScrollTrigger";
5
+ export { default as Modal } from "./Modal";
6
+ export { default as UserAvatar } from "./UserAvatar";
7
+ export { Skeleton, CommentSkeleton, UserMentionSkeleton } from "./Skeleton";
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.UserMentionSkeleton = exports.CommentSkeleton = exports.Skeleton = exports.UserAvatar = exports.Modal = exports.InfiniteScrollTrigger = exports.GiphyContainer = exports.FromNow = exports.EmojiSuggestions = void 0;
7
+ var EmojiSuggestions_1 = require("./EmojiSuggestions");
8
+ Object.defineProperty(exports, "EmojiSuggestions", { enumerable: true, get: function () { return __importDefault(EmojiSuggestions_1).default; } });
9
+ var FromNow_1 = require("./FromNow");
10
+ Object.defineProperty(exports, "FromNow", { enumerable: true, get: function () { return __importDefault(FromNow_1).default; } });
11
+ var GiphyContainer_1 = require("./GiphyContainer");
12
+ Object.defineProperty(exports, "GiphyContainer", { enumerable: true, get: function () { return __importDefault(GiphyContainer_1).default; } });
13
+ var InfiniteScrollTrigger_1 = require("./InfiniteScrollTrigger");
14
+ Object.defineProperty(exports, "InfiniteScrollTrigger", { enumerable: true, get: function () { return __importDefault(InfiniteScrollTrigger_1).default; } });
15
+ var Modal_1 = require("./Modal");
16
+ Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });
17
+ var UserAvatar_1 = require("./UserAvatar");
18
+ Object.defineProperty(exports, "UserAvatar", { enumerable: true, get: function () { return __importDefault(UserAvatar_1).default; } });
19
+ var Skeleton_1 = require("./Skeleton");
20
+ Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
21
+ Object.defineProperty(exports, "CommentSkeleton", { enumerable: true, get: function () { return Skeleton_1.CommentSkeleton; } });
22
+ Object.defineProperty(exports, "UserMentionSkeleton", { enumerable: true, get: function () { return Skeleton_1.UserMentionSkeleton; } });
23
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;AAAA,uDAAiE;AAAxD,qIAAA,OAAO,OAAoB;AACpC,qCAA+C;AAAtC,mHAAA,OAAO,OAAW;AAC3B,mDAA6D;AAApD,iIAAA,OAAO,OAAkB;AAClC,iEAA2E;AAAlE,+IAAA,OAAO,OAAyB;AACzC,iCAA2C;AAAlC,+GAAA,OAAO,OAAS;AACzB,2CAAqD;AAA5C,yHAAA,OAAO,OAAc;AAC9B,uCAA4E;AAAnE,oGAAA,QAAQ,OAAA;AAAE,2GAAA,eAAe,OAAA;AAAE,+GAAA,mBAAmB,OAAA"}
@@ -0,0 +1 @@
1
+ export * from "./reset-styles";
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./reset-styles"), exports);
18
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B"}
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ export declare const resetDiv: React.CSSProperties;
3
+ export declare const resetButton: React.CSSProperties;
4
+ export declare const resetUl: React.CSSProperties;
5
+ export declare const resetIl: React.CSSProperties;
6
+ export declare const resetP: React.CSSProperties;
7
+ export declare const resetTextInput: React.CSSProperties;
8
+ export declare const resetImg: React.CSSProperties;
9
+ export declare const resetIcon: React.CSSProperties;