hive-react-kit 0.5.0 → 0.5.1

package/README.md

@@ -86,11 +86,14 @@ import type { Video, Comment, Wallet as WalletType } from 'hive-react-kit/types'
 ```tsx
 import { UserDetailProfile } from 'hive-react-kit';
 
-// All tabs, default order
+// All tabs, default order, with rich comment composer
 <UserDetailProfile
   username="sagarkothari88"
   currentUsername="myaccount"
   showBackButton
+  ecencyToken="your-ecency-token"
+  threeSpeakApiKey="your-3speak-api-key"
+  giphyApiKey="your-giphy-api-key"
   onBack={() => navigate(-1)}
   onFollow={(user) => console.log("Follow:", user)}
   onUnfollow={(user) => console.log("Unfollow:", user)}
@@ -115,6 +118,9 @@ import { UserDetailProfile } from 'hive-react-kit';
 | `showBackButton` | `boolean` | `false` | Show back arrow in header |
 | `onBack` | `() => void` | - | Callback when back button is clicked |
 | `tabShown` | `TabType[]` | all tabs | Controls which tabs are visible and their order. Only listed tabs are shown. First tab is the default active tab. If omitted, all 12 tabs are shown in default order |
+| `ecencyToken` | `string` | `undefined` | Ecency image hosting token. Enables image upload and video thumbnail upload in the comment composer. When not provided, the image upload button is hidden |
+| `threeSpeakApiKey` | `string` | `undefined` | 3Speak API key. Enables audio recording/upload and video upload in the comment composer. When not provided, audio and video buttons are hidden |
+| `giphyApiKey` | `string` | `undefined` | GIPHY API key. Enables GIF search in the comment composer. When not provided, the GIF button is hidden |
 
 **Social Action Callbacks**
 

package/dist/build.css

@@ -590,6 +590,9 @@
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -641,6 +644,9 @@
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
+  .h-36 {
+    height: calc(var(--spacing) * 36);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
@@ -665,6 +671,12 @@
   .max-h-20 {
     max-height: calc(var(--spacing) * 20);
   }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
+  .max-h-64 {
+    max-height: calc(var(--spacing) * 64);
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -779,6 +791,9 @@
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
+  .w-36 {
+    width: calc(var(--spacing) * 36);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -905,8 +920,8 @@
   .resize {
     resize: both;
   }
-  .resize-none {
-    resize: none;
+  .resize-y {
+    resize: vertical;
   }
   .appearance-none {
     appearance: none;
@@ -926,6 +941,9 @@
   .grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1119,6 +1137,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1289,6 +1311,12 @@
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
     }
   }
+  .bg-black\/90 {
+    background-color: color-mix(in srgb, #000 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
+    }
+  }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -1436,6 +1464,9 @@
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
   .bg-red-500\/10 {
     background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1687,6 +1718,9 @@
   .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -2091,6 +2125,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-1000 {
+    --tw-duration: 1000ms;
+    transition-duration: 1000ms;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -2202,6 +2240,16 @@
       }
     }
   }
+  .hover\:border-blue-500\/40 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent);
+        }
+      }
+    }
+  }
   .hover\:border-gray-600 {
     &:hover {
       @media (hover: hover) {
@@ -2306,6 +2354,16 @@
       }
     }
   }
+  .hover\:bg-gray-800\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-gray-800) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-green-700 {
     &:hover {
       @media (hover: hover) {
@@ -2453,13 +2511,6 @@
       }
     }
   }
-  .hover\:text-gray-800 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-gray-800);
-      }
-    }
-  }
   .hover\:text-gray-900 {
     &:hover {
       @media (hover: hover) {
@@ -2481,6 +2532,13 @@
       }
     }
   }
+  .hover\:text-red-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-400);
+      }
+    }
+  }
   .hover\:text-red-600 {
     &:hover {
       @media (hover: hover) {
@@ -2525,6 +2583,21 @@
       }
     }
   }
+  .hover\:ring-2 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\:ring-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-ring-color: var(--color-blue-500);
+      }
+    }
+  }
   .focus\:border-blue-500 {
     &:focus {
       border-color: var(--color-blue-500);
@@ -2555,14 +2628,17 @@
       outline-style: none;
     }
   }
-  .disabled\:pointer-events-none {
-    &:disabled {
-      pointer-events: none;
+  .active\:scale-95 {
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
-  .disabled\:transform-none {
+  .disabled\:pointer-events-none {
     &:disabled {
-      transform: none;
+      pointer-events: none;
     }
   }
   .disabled\:cursor-not-allowed {
@@ -2575,9 +2651,9 @@
       background-color: var(--color-blue-400);
     }
   }
-  .disabled\:bg-gray-300 {
+  .disabled\:bg-gray-700 {
     &:disabled {
-      background-color: var(--color-gray-300);
+      background-color: var(--color-gray-700);
     }
   }
   .disabled\:opacity-50 {
@@ -2668,6 +2744,11 @@
       height: calc(var(--spacing) * 32);
     }
   }
+  .sm\:h-44 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 44);
+    }
+  }
   .sm\:w-4 {
     @media (width >= 40rem) {
       width: calc(var(--spacing) * 4);
@@ -3119,11 +3200,6 @@
       }
     }
   }
-  .dark\:bg-gray-600 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-600);
-    }
-  }
   .dark\:bg-gray-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-700);
@@ -3362,15 +3438,6 @@
       }
     }
   }
-  .dark\:hover\:text-gray-200 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          color: var(--color-gray-200);
-        }
-      }
-    }
-  }
   .dark\:hover\:text-gray-300 {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -3416,13 +3483,6 @@
       }
     }
   }
-  .dark\:disabled\:bg-gray-600 {
-    @media (prefers-color-scheme: dark) {
-      &:disabled {
-        background-color: var(--color-gray-600);
-      }
-    }
-  }
   .\[\&\:\:-moz-range-progress\]\:rounded-lg {
     &::-moz-range-progress {
       border-radius: var(--radius-lg);

package/dist/components/actionButtons/PostActionButton.d.ts

@@ -30,6 +30,12 @@ export interface PostActionButtonProps {
     onReport?: () => void;
     /** Called when user confirms comment upvote with (author, permlink, percent). Frontend handles signing. Voted comments show icon in blue. */
     onClickCommentUpvote?: (author: string, permlink: string, percent: number) => void | Promise<void>;
+    /** Ecency image hosting token — enables image upload in comment composer */
+    ecencyToken?: string;
+    /** 3Speak API key — enables audio/video upload in comment composer */
+    threeSpeakApiKey?: string;
+    /** GIPHY API key — enables GIF search in comment composer */
+    giphyApiKey?: string;
 }
-export declare function PostActionButton({ author, permlink, currentUser: currentUserProp, hiveValue, hiveIconUrl, payoutTooltip, initialVotes, initialCommentsCount, onUpvote, onSubmitComment, onComments, onReblog, onShare, onTip, onReport, onClickCommentUpvote, }: PostActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PostActionButton({ author, permlink, currentUser: currentUserProp, hiveValue, hiveIconUrl, payoutTooltip, initialVotes, initialCommentsCount, onUpvote, onSubmitComment, onComments, onReblog, onShare, onTip, onReport, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, }: PostActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export default PostActionButton;

package/dist/components/comments/AddCommentInput.d.ts

@@ -1,10 +1,25 @@
-interface AddCommentInputProps {
+export interface AddCommentInputProps {
     onSubmit: (body: string) => void;
     onCancel: () => void;
     currentUser?: string;
     placeholder?: string;
     parentAuthor?: string;
     parentPermlink?: string;
+    /** Ecency image hosting token — enables image and video thumbnail upload */
+    ecencyToken?: string;
+    /** 3Speak API key — enables audio and video upload. Falls back to demo key if not provided. */
+    threeSpeakApiKey?: string;
+    /** GIPHY API key — enables GIF search */
+    giphyApiKey?: string;
+    /** Hide individual toolbar features */
+    hideBold?: boolean;
+    hideItalic?: boolean;
+    hideLink?: boolean;
+    hideImage?: boolean;
+    hideAudio?: boolean;
+    hideVideo?: boolean;
+    hideEmoji?: boolean;
+    hideGif?: boolean;
 }
-declare const AddCommentInput: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink }: AddCommentInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const AddCommentInput: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, threeSpeakApiKey, giphyApiKey, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, }: AddCommentInputProps) => import("react/jsx-runtime").JSX.Element;
 export default AddCommentInput;

package/dist/components/comments/CommentsModal.d.ts

@@ -11,6 +11,12 @@ interface CommentsModalProps {
     onClickUpvoteButton?: (currentUser?: string, token?: string) => void;
     /** When provided, used instead of apiService.handleComment (e.g. for aioha wallet) */
     onSubmitComment?: (parentAuthor: string, parentPermlink: string, body: string) => Promise<void>;
+    /** Ecency image hosting token — enables image upload in comment composer */
+    ecencyToken?: string;
+    /** 3Speak API key — enables audio/video upload in comment composer */
+    threeSpeakApiKey?: string;
+    /** GIPHY API key — enables GIF search in comment composer */
+    giphyApiKey?: string;
 }
-declare const CommentsModal: ({ author, permlink, onClose, currentUser, token, onClickCommentUpvote, onClickCommentReply, onClickUpvoteButton, onSubmitComment }: CommentsModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommentsModal: ({ author, permlink, onClose, currentUser, token, onClickCommentUpvote, onClickCommentReply, onClickUpvoteButton, onSubmitComment, ecencyToken, threeSpeakApiKey, giphyApiKey }: CommentsModalProps) => import("react/jsx-runtime").JSX.Element;
 export default CommentsModal;

package/dist/components/comments/ReplyModal.d.ts

@@ -4,6 +4,9 @@ interface ReplyModalProps {
     onClose: () => void;
     onCommentSubmitted: (parentAuthor: string, parentPermlink: string, body: string) => Promise<void>;
     currentUser?: string;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
 }
-declare const ReplyModal: ({ parentAuthor, parentPermlink, onClose, onCommentSubmitted, currentUser }: ReplyModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ReplyModal: ({ parentAuthor, parentPermlink, onClose, onCommentSubmitted, currentUser, ecencyToken, threeSpeakApiKey, giphyApiKey, }: ReplyModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ReplyModal;

package/dist/components/composer/AudioUploader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface AudioUploaderProps {
+    /** Called with the audio embed URL and duration in seconds */
+    onAudioUploaded: (audioUrl: string, durationSeconds: number) => void;
+    /** Hive username for the upload */
+    username?: string;
+    /** 3Speak API key. Falls back to demo key if not provided. */
+    threeSpeakApiKey?: string;
+    disabled?: boolean;
+}
+declare const AudioUploader: React.FC<AudioUploaderProps>;
+export default AudioUploader;

package/dist/components/composer/EmojiPicker.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface EmojiPickerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectEmoji: (emoji: string) => void;
+}
+declare const EmojiPicker: React.FC<EmojiPickerProps>;
+export default EmojiPicker;

package/dist/components/composer/GiphyPicker.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface GiphyPickerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectGif: (gifUrl: string) => void;
+    /** GIPHY API key. Required for search functionality. */
+    giphyApiKey?: string;
+}
+declare const GiphyPicker: React.FC<GiphyPickerProps>;
+export default GiphyPicker;

package/dist/components/composer/ImageUploader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ImageUploaderProps {
+    /** Called with the uploaded image URL */
+    onImageUploaded: (imageUrl: string) => void;
+    /** Ecency image hosting token for upload authentication */
+    ecencyToken?: string;
+    disabled?: boolean;
+}
+declare const ImageUploader: React.FC<ImageUploaderProps>;
+export default ImageUploader;

package/dist/components/composer/VideoUploader.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface VideoUploaderProps {
+    /** Called with embed URL, upload URL, aspect ratio, and optional local file for preview */
+    onVideoUploaded: (videoEmbedUrl: string, uploadUrl: string, aspectRatio: string, localPreviewFile?: File) => void;
+    /** Hive username for the upload */
+    username?: string;
+    /** Ecency image hosting token for thumbnail upload */
+    ecencyToken?: string;
+    /** 3Speak API key. Falls back to demo key if not provided. */
+    threeSpeakApiKey?: string;
+    disabled?: boolean;
+}
+declare const VideoUploader: React.FC<VideoUploaderProps>;
+export default VideoUploader;

package/dist/components/composer/index.d.ts

@@ -0,0 +1,10 @@
+export { default as ImageUploader } from './ImageUploader';
+export type { ImageUploaderProps } from './ImageUploader';
+export { default as AudioUploader } from './AudioUploader';
+export type { AudioUploaderProps } from './AudioUploader';
+export { default as VideoUploader } from './VideoUploader';
+export type { VideoUploaderProps } from './VideoUploader';
+export { default as GiphyPicker } from './GiphyPicker';
+export type { GiphyPickerProps } from './GiphyPicker';
+export { default as EmojiPicker } from './EmojiPicker';
+export type { EmojiPickerProps } from './EmojiPicker';

package/dist/components/user/UserDetailProfile.d.ts

@@ -12,6 +12,12 @@ export interface UserDetailProfileProps {
      * Example: `["followers", "following", "blogs", "wallet"]` — only these 4 tabs, in this order.
      */
     tabShown?: TabType[];
+    /** Ecency image hosting token — enables image and video thumbnail upload in comment composer */
+    ecencyToken?: string;
+    /** 3Speak API key — enables audio and video upload in comment composer */
+    threeSpeakApiKey?: string;
+    /** GIPHY API key — enables GIF search in comment composer */
+    giphyApiKey?: string;
     onFollow?: (username: string) => void | Promise<void>;
     onUnfollow?: (username: string) => void | Promise<void>;
     onIgnoreAuthor?: (username: string) => void | Promise<void>;