hive-react-kit 0.6.0 → 0.6.2

package/README.md

@@ -56,6 +56,7 @@ import type { Video, Comment, Wallet as WalletType } from 'hive-react-kit/types'
 - **VideoDetail** - Detailed video view
 - **VideoInfo** - Video information display
 - **Wallet** - Hive wallet integration
+- **HiveDetailPost** - Full-screen post detail view with content rendering, action buttons, and author header
 
 ### Community Components
 
@@ -209,6 +210,88 @@ The `tabShown` prop accepts an array of these values:
 
 See [docs/UserDetailProfile.md](docs/UserDetailProfile.md) for full documentation including all callbacks, tab types, streaming behavior, and styling details.
 
+### HiveDetailPost
+
+A full-screen, single-column post detail view. Renders Hive post content using `@hiveio/content-renderer` with a compact author header (avatar, username, reputation, follower/following/posts stats), `PostActionButton` for all interactions, image captions from alt text, tags, and payout info.
+
+#### HiveDetailPost Usage
+
+```tsx
+import { HiveDetailPost } from 'hive-react-kit';
+
+// Basic
+<HiveDetailPost
+  author="sagarkothari88"
+  permlink="my-first-post"
+  currentUser="myusername"
+  onUpvote={(percent) => console.log("Upvote:", percent)}
+  onSubmitComment={(pAuthor, pPermlink, body) => console.log("Comment:", body)}
+/>
+
+// Custom gradient background
+<HiveDetailPost
+  author="sagarkothari88"
+  permlink="my-first-post"
+  backgroundColor={["#0f172a", "#1e293b", "#0f3460"]}
+  onUpvote={(percent) => console.log("Upvote:", percent)}
+/>
+
+// Full usage with all callbacks
+<HiveDetailPost
+  author="sagarkothari88"
+  permlink="my-first-post"
+  currentUser="myusername"
+  onBack={() => navigate(-1)}
+  onUserClick={(user) => navigate(`/profile/${user}`)}
+  onUpvote={(percent) => console.log("Upvote:", percent)}
+  onSubmitComment={(pAuthor, pPermlink, body) => console.log("Comment:", body)}
+  onClickCommentUpvote={(a, p, pct) => console.log("Comment upvote:", a, p, pct)}
+  onReblog={() => console.log("Reblog")}
+  onShare={() => navigator.clipboard.writeText(`https://peakd.com/@${author}/${permlink}`)}
+  onTip={() => console.log("Tip")}
+  onReport={() => console.log("Report")}
+  ecencyToken="your-ecency-token"
+  threeSpeakApiKey="your-3speak-key"
+  giphyApiKey="your-giphy-key"
+  templateToken="your-template-token"
+/>
+```
+
+#### HiveDetailPost Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `author` | `string` | *required* | Hive account name of the post author |
+| `permlink` | `string` | *required* | Permlink of the post |
+| `currentUser` | `string` | `undefined` | Logged-in username. Required for upvote/comment/reblog |
+| `backgroundColor` | `string \| string[]` | `undefined` (gray-900) | Single color for solid bg, or array of colors for gradient |
+| `onBack` | `() => void` | `undefined` | Back button callback. Hidden when not provided |
+| `onUserClick` | `(username: string) => void` | `undefined` | Called when author avatar/name is clicked |
+
+**Post Action Callbacks (via PostActionButton)**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `onUpvote` | `(percent: number) => void \| Promise<void>` | Called when user confirms upvote with vote weight (1-100) |
+| `onSubmitComment` | `(parentAuthor, parentPermlink, body) => void \| Promise<void>` | Called when a comment is submitted |
+| `onClickCommentUpvote` | `(author, permlink, percent) => void \| Promise<void>` | Called when a comment is upvoted inside the comments modal |
+| `onReblog` | `() => void` | Called when reblog is clicked |
+| `onShare` | `() => void` | Called when share is clicked. Falls back to Web Share API / clipboard |
+| `onTip` | `() => void` | Called when tip is clicked |
+| `onReport` | `() => void` | Called when report is clicked |
+
+**Comment Composer Tokens**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `ecencyToken` | `string` | Ecency image hosting token — enables image upload |
+| `threeSpeakApiKey` | `string` | 3Speak API key — enables audio/video upload |
+| `giphyApiKey` | `string` | GIPHY API key — enables GIF search |
+| `templateToken` | `string` | HReplier API token — enables template picker |
+| `templateApiBaseUrl` | `string` | Custom template API endpoint |
+
+See [docs/HiveDetailPost.md](docs/HiveDetailPost.md) for full documentation including layout diagram, content rendering details, skeleton loading, and CSS requirements.
+
 ### Toolbar Component
 
 - **HiveToolbar** - A fixed bottom toolbar showcasing Hive ecosystem apps and witness voting links. Responsive across mobile, tablet, and desktop.

package/dist/build.css

@@ -745,6 +745,12 @@
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
+  .w-2\/3 {
+    width: calc(2 / 3 * 100%);
+  }
+  .w-2\/5 {
+    width: calc(2 / 5 * 100%);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -790,6 +796,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-18 {
+    width: calc(var(--spacing) * 18);
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
@@ -1054,6 +1063,9 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
   .gap-x-3 {
     column-gap: calc(var(--spacing) * 3);
   }
@@ -1167,6 +1179,10 @@
     border-style: var(--tw-border-style);
     border-width: 4px;
   }
+  .border-y {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1386,6 +1402,12 @@
       background-color: color-mix(in oklab, var(--color-blue-900) 40%, transparent);
     }
   }
+  .bg-blue-900\/50 {
+    background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
+    }
+  }
   .bg-emerald-500\/15 {
     background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1422,6 +1444,12 @@
   .bg-gray-700 {
     background-color: var(--color-gray-700);
   }
+  .bg-gray-700\/60 {
+    background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
+    }
+  }
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
@@ -1691,6 +1719,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1787,6 +1818,9 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
@@ -1957,9 +1991,6 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
-  .text-blue-700 {
-    color: var(--color-blue-700);
-  }
   .text-blue-800 {
     color: var(--color-blue-800);
   }
@@ -2832,6 +2863,11 @@
       height: calc(var(--spacing) * 44);
     }
   }
+  .sm\:h-64 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 64);
+    }
+  }
   .sm\:w-4 {
     @media (width >= 40rem) {
       width: calc(var(--spacing) * 4);
@@ -2942,11 +2978,22 @@
       padding-block: calc(var(--spacing) * 3);
     }
   }
+  .sm\:py-6 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:text-left {
     @media (width >= 40rem) {
       text-align: left;
     }
   }
+  .sm\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
   .sm\:text-base {
     @media (width >= 40rem) {
       font-size: var(--text-base);
@@ -3173,26 +3220,11 @@
       grid-column: span 2 / span 2;
     }
   }
-  .lg\:grid {
-    @media (width >= 64rem) {
-      display: grid;
-    }
-  }
-  .lg\:hidden {
-    @media (width >= 64rem) {
-      display: none;
-    }
-  }
   .lg\:table-cell {
     @media (width >= 64rem) {
       display: table-cell;
     }
   }
-  .lg\:grid-cols-2 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
   .lg\:grid-cols-3 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -3238,11 +3270,6 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .dark\:border-blue-400 {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--color-blue-400);
-    }
-  }
   .dark\:border-gray-600 {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-gray-600);
@@ -3634,6 +3661,214 @@
     }
   }
 }
+.hive-post-body {
+  color: #e5e7eb;
+  font-size: 1rem;
+  line-height: 1.75;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.hive-post-body h1, .hive-post-body h2, .hive-post-body h3, .hive-post-body h4, .hive-post-body h5, .hive-post-body h6 {
+  color: #fff;
+  font-weight: 700;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.3;
+}
+.hive-post-body h1 {
+  font-size: 1.875rem;
+}
+.hive-post-body h2 {
+  font-size: 1.5rem;
+}
+.hive-post-body h3 {
+  font-size: 1.25rem;
+}
+.hive-post-body h4 {
+  font-size: 1.125rem;
+}
+.hive-post-body p {
+  color: #d1d5db;
+  margin-bottom: 1em;
+  line-height: 1.75;
+}
+.hive-post-body a {
+  color: #60a5fa;
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.hive-post-body a:hover {
+  color: #93bbfd;
+  text-decoration: underline;
+}
+.hive-post-body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.75rem;
+  margin: 1rem auto;
+  display: block;
+}
+.hive-post-body blockquote {
+  border-left: 4px solid #3b82f680;
+  background: #1f293780;
+  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+  border-radius: 0 0.5rem 0.5rem 0;
+  color: #d1d5db;
+  font-style: italic;
+}
+.hive-post-body blockquote p {
+  margin-bottom: 0.25em;
+}
+.hive-post-body ul, .hive-post-body ol {
+  padding-left: 1.5em;
+  margin-bottom: 1em;
+  color: #d1d5db;
+}
+.hive-post-body ul {
+  list-style: disc;
+}
+.hive-post-body ol {
+  list-style: decimal;
+}
+.hive-post-body li {
+  margin-bottom: 0.25em;
+  line-height: 1.65;
+}
+.hive-post-body li > ul, .hive-post-body li > ol {
+  margin-top: 0.25em;
+  margin-bottom: 0;
+}
+.hive-post-body code {
+  color: #f472b6;
+  background: #1f2937;
+  padding: 0.15em 0.4em;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+.hive-post-body pre {
+  background: #111827;
+  border: 1px solid #374151;
+  border-radius: 0.75rem;
+  padding: 1rem 1.25rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+.hive-post-body pre code {
+  color: #e5e7eb;
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+.hive-post-body hr {
+  border: none;
+  border-top: 1px solid #374151;
+  margin: 1.5rem 0;
+}
+.hive-post-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  font-size: 0.875rem;
+}
+.hive-post-body th {
+  background: #1f2937;
+  color: #e5e7eb;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-weight: 600;
+  border-bottom: 2px solid #374151;
+}
+.hive-post-body td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid #1f2937;
+  color: #d1d5db;
+}
+.hive-post-body tr:hover td {
+  background: #1f293740;
+}
+.hive-post-body strong, .hive-post-body b {
+  color: #fff;
+  font-weight: 700;
+}
+.hive-post-body em, .hive-post-body i {
+  color: #d1d5db;
+}
+.hive-post-body iframe {
+  width: 100%;
+  max-width: 100%;
+  aspect-ratio: 16 / 9;
+  border: none;
+  border-radius: 0.75rem;
+  margin: 1rem 0;
+}
+.hive-post-body .videoWrapper, .hive-post-body .embed-responsive {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  margin: 1rem 0;
+}
+.hive-post-body .videoWrapper iframe, .hive-post-body .embed-responsive iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.75rem;
+  margin: 0;
+}
+.hive-post-body > :first-child {
+  margin-top: 0;
+}
+.hive-post-body > :last-child {
+  margin-bottom: 0;
+}
+.hive-post-body center, .hive-post-body .text-center {
+  text-align: center;
+}
+.hive-post-body center img {
+  margin-left: auto;
+  margin-right: auto;
+}
+.hive-post-body .hive-img-figure {
+  margin: 1.25rem 0;
+  text-align: center;
+}
+.hive-post-body .hive-img-figure img {
+  margin-bottom: 0.375rem;
+}
+.hive-post-body .hive-img-figure figcaption {
+  color: #9ca3af;
+  font-size: 0.8125rem;
+  font-style: italic;
+  line-height: 1.4;
+  padding: 0 1rem;
+}
+@media (max-width: 640px) {
+  .hive-post-body {
+    font-size: 0.9375rem;
+    line-height: 1.65;
+  }
+  .hive-post-body h1 {
+    font-size: 1.5rem;
+  }
+  .hive-post-body h2 {
+    font-size: 1.25rem;
+  }
+  .hive-post-body h3 {
+    font-size: 1.125rem;
+  }
+  .hive-post-body pre {
+    padding: 0.75rem;
+    font-size: 0.8125rem;
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/components/HiveDetailPost.d.ts

@@ -1,12 +1,23 @@
-import { Discussion } from '@/types';
-interface HiveDetailPostProps {
+export interface HiveDetailPostProps {
     author: string;
     permlink: string;
     currentUser?: string;
-    token?: string;
-    onClickUpvoteButton?: (currentUser?: string, token?: string) => void;
+    onUpvote?: (percent: number) => void | Promise<void>;
+    onSubmitComment?: (parentAuthor: string, parentPermlink: string, body: string) => void | Promise<void>;
     onClickCommentUpvote?: (author: string, permlink: string, percent: number) => void | Promise<void>;
-    onClickCommentReply?: (comment: Discussion) => void;
+    onReblog?: () => void;
+    onShare?: () => void;
+    onTip?: () => void;
+    onReport?: () => void;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+    /** Background color for the component. Pass a single color string for a solid background, or an array of colors for a gradient (e.g. `["#0f172a", "#1e293b"]` or `["#1a1a2e", "#16213e", "#0f3460"]`). Defaults to gray-900. */
+    backgroundColor?: string | string[];
+    onBack?: () => void;
+    onUserClick?: (username: string) => void;
 }
-export declare function HiveDetailPost({ author, permlink, currentUser, token, onClickUpvoteButton, onClickCommentUpvote, onClickCommentReply }: HiveDetailPostProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function HiveDetailPost({ author, permlink, currentUser, onUpvote, onSubmitComment, onClickCommentUpvote, onReblog, onShare, onTip, onReport, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, backgroundColor, onBack, onUserClick, }: HiveDetailPostProps): import("react/jsx-runtime").JSX.Element;
+export default HiveDetailPost;

package/dist/components/index.d.ts

@@ -8,7 +8,7 @@ export { default as ProposalsList } from './ProposalsList';
 export { default as FollowersList } from './FollowersList';
 export { default as FollowingList } from './FollowingList';
 export { default as ActivityList } from './ActivityList';
-export { HiveDetailPost } from './HiveDetailPost';
+export { HiveDetailPost, type HiveDetailPostProps } from './HiveDetailPost';
 export { default as HiveToolbar, type HiveToolbarProps } from './HiveToolbar';
 export { default as FavouriteWidget } from './common/FavouriteWidget';
 export { default as CommunitiesList } from './community/CommunitiesList';