hive-react-kit 0.5.1 → 0.5.4

package/README.md

@@ -65,6 +65,10 @@ import type { Video, Comment, Wallet as WalletType } from 'hive-react-kit/types'
 - **CommunityMembers** - Community members list
 - **CommunityTeam** - Community team members
 
+### Composer Components
+
+- **PostComposer** - Rich markdown composer with live preview (@snapie/renderer), image/audio/video upload, paste & drag-drop, GIF search, emoji picker (500+, 9 categories), template picker, code blocks with copy, and @ mention. See [PostComposer docs](docs/PostComposer.md)
+
 ### Modal Components
 
 - **CommentsModal** - Comments display modal
@@ -94,6 +98,8 @@ import { UserDetailProfile } from 'hive-react-kit';
   ecencyToken="your-ecency-token"
   threeSpeakApiKey="your-3speak-api-key"
   giphyApiKey="your-giphy-api-key"
+  templateToken="your-jwt-token"
+  templateApiBaseUrl="https://your-api.com/data/templates"
   onBack={() => navigate(-1)}
   onFollow={(user) => console.log("Follow:", user)}
   onUnfollow={(user) => console.log("Unfollow:", user)}
@@ -118,9 +124,11 @@ 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 |
+| `ecencyToken` | `string` | `undefined` | Ecency image hosting token. Enables image upload, video thumbnail upload, and paste/drag-drop image upload. Hidden when not provided |
+| `threeSpeakApiKey` | `string` | `undefined` | 3Speak API key. Enables audio recording/upload and video upload (TUS protocol). Hidden when not provided |
+| `giphyApiKey` | `string` | `undefined` | GIPHY API key. Enables GIF search. Hidden when not provided |
+| `templateToken` | `string` | `undefined` | HReplier API JWT token. Enables template picker. Hidden when not provided |
+| `templateApiBaseUrl` | `string` | `https://hreplier-api...` | Custom template API endpoint. Override when self-hosting |
 
 **Social Action Callbacks**
 

package/dist/build.css

@@ -82,6 +82,7 @@
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
+    --color-gray-950: oklch(13% 0.028 261.692);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -386,6 +387,9 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
+  .left-2\.5 {
+    left: calc(var(--spacing) * 2.5);
+  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -449,6 +453,9 @@
   .m-2 {
     margin: calc(var(--spacing) * 2);
   }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -656,6 +663,9 @@
   .h-\[90vh\] {
     height: 90vh;
   }
+  .h-\[400px\] {
+    height: 400px;
+  }
   .h-auto {
     height: auto;
   }
@@ -671,9 +681,6 @@
   .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);
   }
@@ -707,6 +714,9 @@
   .max-h-screen {
     max-height: 100vh;
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
@@ -812,6 +822,9 @@
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -1173,6 +1186,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-amber-700\/40 {
     border-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1335,15 +1352,33 @@
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
+  .bg-blue-600\/20 {
+    background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-600) 20%, transparent);
+    }
+  }
   .bg-blue-900 {
     background-color: var(--color-blue-900);
   }
+  .bg-blue-900\/10 {
+    background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-900) 10%, transparent);
+    }
+  }
   .bg-blue-900\/20 {
     background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
     }
   }
+  .bg-blue-900\/30 {
+    background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
+    }
+  }
   .bg-blue-900\/40 {
     background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1392,6 +1427,12 @@
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
+  .bg-gray-800\/50 {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
+    }
+  }
   .bg-gray-800\/95 {
     background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 95%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1413,6 +1454,9 @@
       background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
     }
   }
+  .bg-gray-950 {
+    background-color: var(--color-gray-950);
+  }
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
@@ -1718,6 +1762,9 @@
   .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -1742,6 +1789,9 @@
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -2002,6 +2052,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .normal-case {
+    text-transform: none;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -2057,6 +2110,10 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-1 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
+  }
   .ring-2 {
     --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);
@@ -2067,6 +2124,9 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .ring-blue-500 {
+    --tw-ring-color: var(--color-blue-500);
+  }
   .ring-gray-200 {
     --tw-ring-color: var(--color-gray-200);
   }
@@ -2167,6 +2227,13 @@
       }
     }
   }
+  .group-hover\:text-blue-400 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-blue-400);
+      }
+    }
+  }
   .group-hover\:opacity-30 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2603,6 +2670,12 @@
       border-color: var(--color-blue-500);
     }
   }
+  .focus\:ring-1 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
+    }
+  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3029,6 +3102,11 @@
       padding: calc(var(--spacing) * 6);
     }
   }
+  .md\:p-8 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
   .md\:px-6 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 6);

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

@@ -36,6 +36,10 @@ export interface PostActionButtonProps {
     threeSpeakApiKey?: string;
     /** GIPHY API key — enables GIF search in comment composer */
     giphyApiKey?: string;
+    /** HReplier API token — enables template picker in comment composer */
+    templateToken?: string;
+    /** Custom template API endpoint */
+    templateApiBaseUrl?: string;
 }
-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 declare function PostActionButton({ author, permlink, currentUser: currentUserProp, hiveValue, hiveIconUrl, payoutTooltip, initialVotes, initialCommentsCount, onUpvote, onSubmitComment, onComments, onReblog, onShare, onTip, onReport, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, }: PostActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export default PostActionButton;

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

@@ -1,16 +1,20 @@
-export interface AddCommentInputProps {
+export interface PostComposerProps {
     onSubmit: (body: string) => void;
-    onCancel: () => void;
+    onCancel?: () => void;
     currentUser?: string;
     placeholder?: string;
     parentAuthor?: string;
     parentPermlink?: string;
-    /** Ecency image hosting token — enables image and video thumbnail upload */
+    /** Ecency image hosting token — enables image/video thumbnail upload and paste/drag upload */
     ecencyToken?: string;
-    /** 3Speak API key — enables audio and video upload. Falls back to demo key if not provided. */
+    /** 3Speak API key — enables audio and video upload */
     threeSpeakApiKey?: string;
     /** GIPHY API key — enables GIF search */
     giphyApiKey?: string;
+    /** HReplier API token — enables template picker */
+    templateToken?: string;
+    /** Custom template API endpoint (defaults to https://hreplier-api.sagarkothari88.one/data/templates) */
+    templateApiBaseUrl?: string;
     /** Hide individual toolbar features */
     hideBold?: boolean;
     hideItalic?: boolean;
@@ -20,6 +24,37 @@ export interface AddCommentInputProps {
     hideVideo?: boolean;
     hideEmoji?: boolean;
     hideGif?: boolean;
+    hideCode?: boolean;
+    hideMention?: boolean;
+    hideTemplate?: boolean;
+    hidePreview?: boolean;
+    /** Show cancel button (default true) */
+    showCancel?: boolean;
+    /** Submit button label (default "Post") */
+    submitLabel?: string;
+    /** Title text above composer (optional) */
+    title?: string;
+    /** Enable preview by default (default false) */
+    defaultPreviewOn?: boolean;
+    /** Controlled mode: external value */
+    value?: string;
+    /** Controlled mode: called when body changes */
+    onChange?: (value: string) => void;
+    /** Disable the entire composer */
+    disabled?: boolean;
+    /** Hide the built-in submit button and keyboard hint footer (default false). Use when providing external submit buttons */
+    hideSubmitArea?: boolean;
+    /** Hide the avatar and username header (default false) */
+    hideUserHeader?: boolean;
+    /** Custom background color for the composer container (e.g. "#262b30", "transparent") */
+    bgColor?: string;
+    /** Custom border color for the composer container (e.g. "#3a424a", "transparent") */
+    borderColor?: string;
 }
-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;
+/** @deprecated Use PostComposerProps instead */
+export type AddCommentInputProps = PostComposerProps;
+declare const PostComposer: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideCode, hideMention, hideTemplate, hidePreview, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, hideUserHeader, bgColor, borderColor, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use PostComposer instead */
+declare const AddCommentInput: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideCode, hideMention, hideTemplate, hidePreview, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, hideUserHeader, bgColor, borderColor, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
+export { PostComposer };
 export default AddCommentInput;

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

@@ -17,6 +17,10 @@ interface CommentsModalProps {
     threeSpeakApiKey?: string;
     /** GIPHY API key — enables GIF search in comment composer */
     giphyApiKey?: string;
+    /** HReplier API token — enables template picker in comment composer */
+    templateToken?: string;
+    /** Custom template API endpoint */
+    templateApiBaseUrl?: string;
 }
-declare const CommentsModal: ({ author, permlink, onClose, currentUser, token, onClickCommentUpvote, onClickCommentReply, onClickUpvoteButton, onSubmitComment, ecencyToken, threeSpeakApiKey, giphyApiKey }: CommentsModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommentsModal: ({ author, permlink, onClose, currentUser, token, onClickCommentUpvote, onClickCommentReply, onClickUpvoteButton, onSubmitComment, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl }: CommentsModalProps) => import("react/jsx-runtime").JSX.Element;
 export default CommentsModal;

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

@@ -7,6 +7,8 @@ interface ReplyModalProps {
     ecencyToken?: string;
     threeSpeakApiKey?: string;
     giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
 }
-declare const ReplyModal: ({ parentAuthor, parentPermlink, onClose, onCommentSubmitted, currentUser, ecencyToken, threeSpeakApiKey, giphyApiKey, }: ReplyModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ReplyModal: ({ parentAuthor, parentPermlink, onClose, onCommentSubmitted, currentUser, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, }: ReplyModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ReplyModal;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TemplateModel } from '../../services/templateService';
+export interface TemplatePickerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectTemplate: (template: string) => void;
+    templates: TemplateModel[];
+    /** If provided, {{author}} in templates is replaced with this value */
+    authorFromUrl?: string;
+}
+declare const TemplatePicker: React.FC<TemplatePickerProps>;
+export default TemplatePicker;

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

@@ -8,3 +8,5 @@ export { default as GiphyPicker } from './GiphyPicker';
 export type { GiphyPickerProps } from './GiphyPicker';
 export { default as EmojiPicker } from './EmojiPicker';
 export type { EmojiPickerProps } from './EmojiPicker';
+export { default as TemplatePicker } from './TemplatePicker';
+export type { TemplatePickerProps } from './TemplatePicker';

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

@@ -18,6 +18,10 @@ export interface UserDetailProfileProps {
     threeSpeakApiKey?: string;
     /** GIPHY API key — enables GIF search in comment composer */
     giphyApiKey?: string;
+    /** HReplier API token — enables template picker in comment composer */
+    templateToken?: string;
+    /** Custom template API endpoint (defaults to https://hreplier-api.sagarkothari88.one/data/templates) */
+    templateApiBaseUrl?: string;
     onFollow?: (username: string) => void | Promise<void>;
     onUnfollow?: (username: string) => void | Promise<void>;
     onIgnoreAuthor?: (username: string) => void | Promise<void>;