hive-react-kit 0.9.6 → 0.9.8

package/dist/components/BlogPostList.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Standalone "Blogs" feed list — same per-post card layout as the Blogs tab
+ * in <UserDetailProfile/>, but accepts a `posts: Post[]` array directly so
+ * the consumer owns the data source (per-user blogs, global trending,
+ * tag-filtered, search results, etc.).
+ *
+ * Cards render: avatar + side image carousel + author/time + title + body
+ * preview + community tag, and a <PostActionButton/> action bar at the
+ * bottom (upvote / comment / reblog / share / tip / report).
+ *
+ * Helpers (`formatTimeAgo`, `extractPlainText`, `PostImageCarousel`) are
+ * inlined here to keep the component self-contained — they mirror the
+ * implementations in UserDetailProfile and can be lifted to a shared util
+ * module later if more lists need them.
+ */
+import { type FC } from 'react';
+import type { Post } from '@/types/post';
+import type { RewardOption } from '../utils/commentOptions';
+export interface BlogPostListProps {
+    /** Post records, in the order they should render. */
+    posts: Post[];
+    /** Logged-in username (used by the action bar's auth-gated buttons). */
+    currentUser?: string;
+    /** Initial-page loader spinner. */
+    loading?: boolean;
+    /** Pagination loader (shown at the bottom while fetching the next page). */
+    loadingMore?: boolean;
+    /** True when more pages are available. Drives "Load more" + observer. */
+    hasMore?: boolean;
+    /** Called when the user requests the next page (button click or scroll). */
+    onLoadMore?: () => void;
+    /** Optional empty-state message override. */
+    emptyMessage?: string;
+    onUpvote?: (author: string, permlink: string, 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>;
+    onReblog?: (author: string, permlink: string) => void;
+    onTip?: (author: string, permlink: string) => void;
+    onSharePost?: (author: string, permlink: string) => void;
+    onCommentClick?: (author: string, permlink: string) => void;
+    onReportPost?: (author: string, permlink: string) => void;
+    onUserClick?: (username: string) => void;
+    onPostClick?: (author: string, permlink: string, title?: string) => void;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+    defaultVotePercent?: number;
+    voteWeightStep?: number;
+    /** Allow landscape video uploads in the inline comment composer. */
+    allowLandscapeVideos?: boolean;
+    /** Default reward routing for inline comment composers. */
+    defaultReward?: RewardOption;
+}
+export declare const BlogPostList: FC<BlogPostListProps>;
+export default BlogPostList;

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

@@ -59,6 +59,23 @@ export interface PostActionButtonProps {
     templateApiBaseUrl?: string;
     /** When true, clicking the comment icon calls onComments instead of opening the CommentsModal popup */
     disableCommentsModal?: boolean;
+    /** Called when the comment ICON is clicked. When set, the icon is
+     *  rendered as its own button (separate from the count) — typical
+     *  use is to open an inline reply composer. */
+    onClickCommentIcon?: () => void;
+    /** Called when the comment COUNT is clicked. When set, the count is
+     *  rendered as its own button — typical use is to navigate into
+     *  the post detail / comments view. */
+    onClickCommentCount?: () => void;
+    /** Pre-computed "current user has commented on this post" flag —
+     *  typically derived from `post.replies` matching `${currentUser}/…`.
+     *  When true, the comment icon is highlighted in red and a hover
+     *  tooltip with the user's reply body is enabled. Mirrors hSnaps. */
+    hasCommented?: boolean;
+    /** `${author}/${permlink}` of the current user's reply on this post.
+     *  Used to lazy-fetch the reply body the first time the user hovers
+     *  the comment icon, so the tooltip can show what they wrote. */
+    myReplyKey?: 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, templateToken, templateApiBaseUrl, disableCommentsModal, showVoteButton, parentTags, defaultReward, defaultVotePercent, voteWeightStep, allowLandscapeVideos, }: 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, disableCommentsModal, onClickCommentIcon, onClickCommentCount, hasCommented, myReplyKey, showVoteButton, parentTags, defaultReward, defaultVotePercent, voteWeightStep, allowLandscapeVideos, }: PostActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export default PostActionButton;

package/dist/components/community/CommunitiesList.d.ts

@@ -1,5 +1,6 @@
 interface CommunitiesListProps {
     onSelectCommunity: (communityId: string) => void;
+    /** Visual variant. Default `"dark"` — uses hivesuite Hive-red tokens. */
     theme?: "light" | "dark";
 }
 declare const CommunitiesList: ({ onSelectCommunity, theme, }: CommunitiesListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/community/CommunityDetail.d.ts

@@ -1,16 +1,32 @@
-interface CommunityDetailProps {
+import type { RewardOption } from '../../utils/commentOptions';
+export interface CommunityDetailProps {
+    /** Community id (e.g. `hive-167922`). */
     communityId: string;
-    onVideoClick: (video: any) => void;
-    onAuthorClick: (author: string) => void;
+    /** Logged-in observer username — drives feed personalisation + auth-gated actions. */
+    currentUser?: string;
+    /** Back-arrow handler. */
     onBack: () => void;
-    onclickAboutTab?: () => void;
-    onclickTeamTab?: () => void;
-    onclickMemberTab?: () => void;
+    onUserClick?: (username: string) => void;
+    onPostClick?: (author: string, permlink: string, title?: string) => void;
+    onCommentClick?: (author: string, permlink: string) => void;
+    onUpvote?: (author: string, permlink: string, 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>;
+    onReblog?: (author: string, permlink: string) => void;
+    onTip?: (author: string, permlink: string) => void;
+    onSharePost?: (author: string, permlink: string) => void;
+    onReportPost?: (author: string, permlink: string) => void;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+    defaultVotePercent?: number;
+    voteWeightStep?: number;
+    allowLandscapeVideos?: boolean;
+    defaultReward?: RewardOption;
     onShare?: () => void;
-    onFavourite?: () => void;
     onRss?: () => void;
-    onMoreVertical?: () => void;
-    showMoreVertical?: boolean;
 }
-declare const CommunityDetail: ({ communityId, onVideoClick, onAuthorClick, onBack, onclickAboutTab, onclickTeamTab, onclickMemberTab, onShare, onFavourite, onRss, onMoreVertical, showMoreVertical, }: CommunityDetailProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommunityDetail: ({ communityId, currentUser, onBack, onUserClick, onPostClick, onCommentClick, onUpvote, onSubmitComment, onClickCommentUpvote, onReblog, onTip, onSharePost, onReportPost, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, defaultVotePercent, voteWeightStep, allowLandscapeVideos, defaultReward, onShare, onRss, }: CommunityDetailProps) => import("react/jsx-runtime").JSX.Element;
 export default CommunityDetail;

package/dist/components/feed/FeedSegmentControl.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Segment control (pill switcher) for picking one of N feeds.
+ *
+ * Themed to match hivesuite tokens (#262b30 / #3a424a / #e31337). Used by
+ * <SnapsFeedView/> in tablet (2-col) layouts where each column lets the
+ * user toggle between two feeds.
+ */
+export interface FeedSegmentOption {
+    id: string;
+    label: string;
+    avatarUrl?: string;
+}
+export interface FeedSegmentControlProps {
+    options: FeedSegmentOption[];
+    value: string;
+    onChange: (id: string) => void;
+    className?: string;
+}
+export declare function FeedSegmentControl({ options, value, onChange, className, }: FeedSegmentControlProps): import("react/jsx-runtime").JSX.Element;
+export default FeedSegmentControl;

package/dist/components/feed/SnapsFeedCard.d.ts

@@ -0,0 +1,56 @@
+/**
+ * SnapsFeedCard — single feed card matching the hSnaps home-screen layout.
+ *
+ * Layout (mirrors hSnaps `<PostCard/>` / `<FeedItemBody/>`):
+ *   header (avatar · @author · time · community)
+ *   plain-text body (markdown stripped, mentions / hashtags / urls
+ *     turned into clickable inline segments)
+ *   attachment strip (swipeable image carousel + lightweight YouTube /
+ *     3Speak / audio placeholders)
+ *   action bar (`<PostActionButton/>`)
+ *
+ * No title is rendered in the card — taps anywhere outside the action
+ * row navigate to the post via `onPostClick`.
+ *
+ * No app-specific stores: every action is forwarded via callbacks so
+ * the host app owns the data plane.
+ */
+import { type FC, type ReactNode } from 'react';
+import type { Post } from '@/types/post';
+import type { RewardOption } from '../../utils/commentOptions';
+export interface SnapsFeedCardProps {
+    post: Post;
+    currentUser?: string;
+    onUpvote?: (author: string, permlink: string, 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>;
+    onReblog?: (author: string, permlink: string) => void;
+    onTip?: (author: string, permlink: string) => void;
+    onSharePost?: (author: string, permlink: string) => void;
+    onCommentClick?: (author: string, permlink: string) => void;
+    /** Click on just the message-circle icon — typical use: open an
+     *  inline reply composer. Mirrors hSnaps PostCard. */
+    onClickCommentIcon?: (author: string, permlink: string) => void;
+    /** Click on just the count number next to the comment icon — typical
+     *  use: navigate to the post detail / comments view. Mirrors hSnaps. */
+    onClickCommentCount?: (author: string, permlink: string) => void;
+    onReportPost?: (author: string, permlink: string) => void;
+    onUserClick?: (username: string) => void;
+    onPostClick?: (author: string, permlink: string, title?: string) => void;
+    onTagClick?: (tag: string) => void;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+    defaultVotePercent?: number;
+    voteWeightStep?: number;
+    allowLandscapeVideos?: boolean;
+    defaultReward?: RewardOption;
+    /** Optional render slot for header right-side actions (e.g. a kebab
+     *  menu with Edit / Delete / Flag). Receives the post so the host can
+     *  own edit/delete/flag state per card. */
+    renderHeaderActions?: (post: Post) => ReactNode;
+}
+declare const SnapsFeedCard: FC<SnapsFeedCardProps>;
+export default SnapsFeedCard;

package/dist/components/feed/SnapsFeedList.d.ts

@@ -0,0 +1,12 @@
+import type { Post } from '@/types/post';
+import type { SnapsFeedCardProps } from './SnapsFeedCard';
+export interface SnapsFeedListProps extends Omit<SnapsFeedCardProps, 'post'> {
+    posts: Post[];
+    loading?: boolean;
+    loadingMore?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    emptyMessage?: string;
+}
+declare const SnapsFeedList: ({ posts, loading, loadingMore, hasMore, onLoadMore, emptyMessage, ...cardProps }: SnapsFeedListProps) => import("react/jsx-runtime").JSX.Element;
+export default SnapsFeedList;

package/dist/components/feed/SnapsFeedView.d.ts

@@ -0,0 +1,77 @@
+/**
+ * SnapsFeedView — responsive multi-feed shell ported from the hSnaps
+ * `UnifiedFeedPage`.
+ *
+ *   • Mobile (1 col):  full-width pill switcher above a single feed
+ *                      column. The user picks one of the four feeds.
+ *   • Tablet (2 col):  two columns, each with its own segment-control
+ *                      switcher (snaps/ecency on the left, threads/liketu
+ *                      on the right by default — both fully overridable).
+ *   • Desktop (4 col): all four feeds visible side-by-side, each titled
+ *                      with the canonical feed avatar + label.
+ *
+ * Data is supplied by the host app: each feed slot receives `posts`,
+ * loading/error/pagination flags, plus an optional `onLoadMore`. Per-post
+ * action callbacks (vote / comment / reblog / share / tip / report) are
+ * forwarded to the embedded <BlogPostList/> exactly the way <BlogsPage/>
+ * already does — so the rendered cards behave identically to the rest of
+ * the hivesuite Blog-style surfaces.
+ */
+import { type ReactNode } from 'react';
+import type { Post } from '@/types/post';
+import type { RewardOption } from '../../utils/commentOptions';
+export type SnapsFeedKey = 'snaps' | 'ecency' | 'threads' | 'liketu';
+export interface SnapsFeedSlot {
+    posts: Post[];
+    loading?: boolean;
+    loadingMore?: boolean;
+    hasMore?: boolean;
+    error?: string | null;
+    onLoadMore?: () => void;
+    onRefresh?: () => void;
+}
+export interface SnapsFeedViewProps {
+    feeds: Record<SnapsFeedKey, SnapsFeedSlot>;
+    /** Override per-feed display name (default labels: Snaps / Ecency / Threads / Liketu). */
+    labels?: Partial<Record<SnapsFeedKey, string>>;
+    /** Override per-feed avatar URL (defaults to canonical container account avatars). */
+    avatars?: Partial<Record<SnapsFeedKey, string>>;
+    /** Initial feed shown on mobile (the only visible column at < 768 px).
+     *  Defaults to `snaps`. */
+    defaultPrimary?: SnapsFeedKey;
+    /** Logged-in observer username (drives auth-gated buttons inside post cards). */
+    currentUser?: string;
+    onUpvote?: (author: string, permlink: string, 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>;
+    onReblog?: (author: string, permlink: string) => void;
+    onTip?: (author: string, permlink: string) => void;
+    onSharePost?: (author: string, permlink: string) => void;
+    onCommentClick?: (author: string, permlink: string) => void;
+    /** Comment-icon click (per card) — typical use: open inline composer. */
+    onClickCommentIcon?: (author: string, permlink: string) => void;
+    /** Comment-count click (per card) — typical use: open post detail. */
+    onClickCommentCount?: (author: string, permlink: string) => void;
+    onReportPost?: (author: string, permlink: string) => void;
+    onUserClick?: (username: string) => void;
+    onPostClick?: (author: string, permlink: string, title?: string) => void;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+    defaultVotePercent?: number;
+    voteWeightStep?: number;
+    allowLandscapeVideos?: boolean;
+    defaultReward?: RewardOption;
+    /** Optional top-row content rendered above the columns (e.g. a Compose FAB
+     *  trigger or filter dropdown). Sticky to the top of the viewport. */
+    toolbar?: ReactNode;
+    /** Optional element rendered at the bottom of the layout (e.g. Compose FAB). */
+    footer?: ReactNode;
+    /** Optional render slot for a per-card right-side header action menu
+     *  (Edit / Delete / Flag). Forwarded to every <SnapsFeedCard/>. */
+    renderHeaderActions?: (post: import('@/types/post').Post) => ReactNode;
+}
+export declare function SnapsFeedView({ feeds, labels, avatars, defaultPrimary, currentUser, onUpvote, onSubmitComment, onClickCommentUpvote, onReblog, onTip, onSharePost, onCommentClick, onClickCommentIcon, onClickCommentCount, onReportPost, onUserClick, onPostClick, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, defaultVotePercent, voteWeightStep, allowLandscapeVideos, defaultReward, toolbar, footer, renderHeaderActions, }: SnapsFeedViewProps): import("react/jsx-runtime").JSX.Element;
+export default SnapsFeedView;

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

@@ -0,0 +1,48 @@
+/**
+ * ProfileSnapsTab — Snaps tab body for the user-profile page.
+ *
+ * Wraps <SnapsFeedView/> so a profile renders the same 1-col-mobile /
+ * 4-col-desktop snaps layout as the unified Snaps page. Each of the four
+ * container types (peak.snaps · ecency.waves · leothreads · liketu.moments)
+ * gets its own slot, fetched in parallel from the user's snaps for that
+ * container.
+ */
+import { type ReactNode } from 'react';
+import type { Post } from '@/types/post';
+import type { RewardOption } from '../../utils/commentOptions';
+export interface ProfileSnapsTabProps {
+    username: string;
+    currentUsername?: string;
+    reportedPosts?: {
+        author: string;
+        permlink: string;
+    }[];
+    reportedAuthors?: string[];
+    onUpvote?: (author: string, permlink: string, 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>;
+    onReblog?: (author: string, permlink: string) => void;
+    onTip?: (author: string, permlink: string) => void;
+    onSharePost?: (author: string, permlink: string) => void;
+    onCommentClick?: (author: string, permlink: string) => void;
+    /** Comment-icon click (per card) — typical use: open inline composer. */
+    onClickCommentIcon?: (author: string, permlink: string) => void;
+    /** Comment-count click (per card) — typical use: open post detail. */
+    onClickCommentCount?: (author: string, permlink: string) => void;
+    onReportPost?: (author: string, permlink: string) => void;
+    onUserClick?: (username: string) => void;
+    onPostClick?: (author: string, permlink: string, title?: string) => void;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+    defaultVotePercent?: number;
+    voteWeightStep?: number;
+    allowLandscapeVideos?: boolean;
+    defaultReward?: RewardOption;
+    /** Per-card right-side header action menu slot (e.g. Edit / Flag). */
+    renderHeaderActions?: (post: Post) => ReactNode;
+}
+declare const ProfileSnapsTab: React.FC<ProfileSnapsTabProps>;
+export default ProfileSnapsTab;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { Post } from "@/types/post";
 export interface UserDetailProfileProps {
     username: string;
     currentUsername?: string;
@@ -62,6 +63,12 @@ export interface UserDetailProfileProps {
     onSharePost?: (author: string, permlink: string) => void;
     /** When provided, clicking the comment icon navigates to the post detail instead of opening the comments modal. */
     onCommentClick?: (author: string, permlink: string) => void;
+    /** Snaps tab only: click on the comment icon (separate from count) —
+     *  typical use: open an inline reply composer. Mirrors hSnaps. */
+    onClickSnapCommentIcon?: (author: string, permlink: string) => void;
+    /** Snaps tab only: click on the comment count number — typical use:
+     *  navigate to the post detail. */
+    onClickSnapCommentCount?: (author: string, permlink: string) => void;
     onFavouriteList?: () => void | Promise<void>;
     onAddToFavourite?: (username: string) => void | Promise<void>;
     isFavourited?: boolean;
@@ -76,6 +83,9 @@ export interface UserDetailProfileProps {
     /** Allow landscape videos in every embedded comment composer on this profile.
      *  Default false (portrait-only, matches hSnaps Moments contract). */
     allowLandscapeVideos?: boolean;
+    /** Per-card right-side header action menu (Edit / Delete / Flag) for the
+     *  Snaps tab. Forwarded into <SnapsFeedView/>. */
+    renderSnapHeaderActions?: (post: Post) => React.ReactNode;
 }
 type TabType = "blogs" | "posts" | "snaps" | "polls" | "comments" | "replies" | "activities" | "authorRewards" | "curationRewards" | "followers" | "following" | "wallet" | "votingPower" | "badges" | "witnessVotes" | "growth";
 declare const UserDetailProfile: React.FC<UserDetailProfileProps>;