hive-react-kit 0.0.5
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.
- package/README.md +105 -0
- package/dist/App.d.ts +2 -0
- package/dist/components/VideoCard.d.ts +9 -0
- package/dist/components/VideoDetail.d.ts +2 -0
- package/dist/components/VideoFeed.d.ts +11 -0
- package/dist/components/VideoInfo.d.ts +19 -0
- package/dist/components/Wallet.d.ts +7 -0
- package/dist/components/common/FavouriteWidget.d.ts +10 -0
- package/dist/components/community/CommunitiesList.d.ts +5 -0
- package/dist/components/community/CommunityAbout.d.ts +5 -0
- package/dist/components/community/CommunityDetail.d.ts +16 -0
- package/dist/components/community/CommunityMembers.d.ts +6 -0
- package/dist/components/community/CommunityTeam.d.ts +6 -0
- package/dist/components/index.d.ts +20 -0
- package/dist/components/modals/CommentsModal.d.ts +8 -0
- package/dist/components/modals/DescriptionModal.d.ts +8 -0
- package/dist/components/modals/Modal.d.ts +10 -0
- package/dist/components/modals/UpvoteListModal.d.ts +7 -0
- package/dist/components/ui/index.d.ts +1 -0
- package/dist/components/user/UserAccount.d.ts +14 -0
- package/dist/components/user/UserFollowers.d.ts +6 -0
- package/dist/components/user/UserFollowing.d.ts +6 -0
- package/dist/components/user/UserInfo.d.ts +5 -0
- package/dist/components/user/UserProfilePage.d.ts +8 -0
- package/dist/favicon.ico +0 -0
- package/dist/hooks/CommunityFavouriteProvider.d.ts +5 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-toast.d.ts +52 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.es.js +3988 -0
- package/dist/index.umd.js +102 -0
- package/dist/main.d.ts +1 -0
- package/dist/pages/Index.d.ts +2 -0
- package/dist/pages/NotFound.d.ts +2 -0
- package/dist/pages/UserProfile.d.ts +2 -0
- package/dist/placeholder.svg +1 -0
- package/dist/robots.txt +14 -0
- package/dist/services/apiService.d.ts +49 -0
- package/dist/services/communityService.d.ts +11 -0
- package/dist/services/userService.d.ts +10 -0
- package/dist/store/walletStore.d.ts +2 -0
- package/dist/types/comment.d.ts +13 -0
- package/dist/types/community.d.ts +57 -0
- package/dist/types/graphql.d.ts +28 -0
- package/dist/types/index.d.ts +5 -0
- package/dist/types/trending.d.ts +4 -0
- package/dist/types/user.d.ts +44 -0
- package/dist/types/video.d.ts +106 -0
- package/dist/types/wallet.d.ts +17 -0
- package/dist/utils/thumbnail.d.ts +1 -0
- package/package.json +128 -0
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# Hive React Kit
|
|
2
|
+
|
|
3
|
+
A comprehensive React component library for building Hive blockchain applications with modern UI components.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **Modern UI Components** - Built with shadcn/ui and Radix UI primitives
|
|
8
|
+
- 🔗 **Hive Integration** - Ready-to-use components for Hive blockchain
|
|
9
|
+
- 📱 **Responsive Design** - Mobile-first approach with Tailwind CSS
|
|
10
|
+
- 🎯 **TypeScript Support** - Full TypeScript support with type definitions
|
|
11
|
+
- 🚀 **Tree Shaking** - Optimized bundle size with tree shaking support
|
|
12
|
+
- 🎠**Customizable** - Easy to customize and extend
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install hive-react-kit
|
|
18
|
+
# or
|
|
19
|
+
yarn add hive-react-kit
|
|
20
|
+
# or
|
|
21
|
+
pnpm add hive-react-kit
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
### Basic Import
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { VideoCard, VideoFeed, Wallet } from 'hive-react-kit';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### UI Components
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { Button, Card, Input } from 'hive-react-kit/ui';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Hooks
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { useMobile } from 'hive-react-kit/hooks';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Types
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import type { Video, Comment, Wallet as WalletType } from 'hive-react-kit/types';
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Components
|
|
51
|
+
|
|
52
|
+
### Main Components
|
|
53
|
+
|
|
54
|
+
- **VideoCard** - Display video content with metadata
|
|
55
|
+
- **VideoFeed** - Feed of videos with pagination
|
|
56
|
+
- **VideoDetail** - Detailed video view
|
|
57
|
+
- **VideoInfo** - Video information display
|
|
58
|
+
- **Wallet** - Hive wallet integration
|
|
59
|
+
|
|
60
|
+
### Community Components
|
|
61
|
+
|
|
62
|
+
- **CommunitiesList** - List of communities
|
|
63
|
+
- **CommunityDetail** - Community details
|
|
64
|
+
- **CommunityAbout** - Community about section
|
|
65
|
+
- **CommunityMembers** - Community members list
|
|
66
|
+
- **CommunityTeam** - Community team members
|
|
67
|
+
|
|
68
|
+
### Modal Components
|
|
69
|
+
|
|
70
|
+
- **CommentsModal** - Comments display modal
|
|
71
|
+
- **DescriptionModal** - Description editing modal
|
|
72
|
+
- **UpvoteListModal** - Upvote list modal
|
|
73
|
+
- **Modal** - Base modal component
|
|
74
|
+
|
|
75
|
+
### User Components
|
|
76
|
+
|
|
77
|
+
- **UserAccount** - User account management
|
|
78
|
+
- **UserProfilePage** - User profile page
|
|
79
|
+
- **UserInfo** - User information display
|
|
80
|
+
- **UserFollowers** - User followers list
|
|
81
|
+
- **UserFollowing** - User following list
|
|
82
|
+
|
|
83
|
+
## Setup
|
|
84
|
+
|
|
85
|
+
Make sure to install the required peer dependencies:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
npm install react react-dom @tanstack/react-query @hiveio/dhive zustand
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Styling
|
|
92
|
+
|
|
93
|
+
This package uses Tailwind CSS. Make sure to include Tailwind CSS in your project:
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
npm install tailwindcss
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## License
|
|
100
|
+
|
|
101
|
+
MIT
|
|
102
|
+
|
|
103
|
+
## Contributing
|
|
104
|
+
|
|
105
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
package/dist/App.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { VideoFeedItem } from "@/types/video";
|
|
2
|
+
interface VideoCardProps {
|
|
3
|
+
video: VideoFeedItem;
|
|
4
|
+
onVideoClick: (video: VideoFeedItem) => void;
|
|
5
|
+
onAuthorClick: (author: string) => void;
|
|
6
|
+
isGrid?: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare const VideoCard: ({ video, onVideoClick, onAuthorClick, isGrid, }: VideoCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default VideoCard;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { VideoFeedItem, ApiVideoFeedType } from "@/types/video";
|
|
2
|
+
interface VideoFeedProps {
|
|
3
|
+
feedType: ApiVideoFeedType;
|
|
4
|
+
username?: string;
|
|
5
|
+
communityId?: string;
|
|
6
|
+
tag?: string;
|
|
7
|
+
onVideoClick: (video: VideoFeedItem) => void;
|
|
8
|
+
onAuthorClick: (author: string) => void;
|
|
9
|
+
}
|
|
10
|
+
declare const VideoFeed: ({ feedType, username, communityId, tag, onVideoClick, onAuthorClick, }: VideoFeedProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default VideoFeed;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { VideoFeedItem } from "@/types/video";
|
|
2
|
+
interface VideoInfoProps {
|
|
3
|
+
title: string;
|
|
4
|
+
author: string;
|
|
5
|
+
permlink: string;
|
|
6
|
+
createdAt?: Date;
|
|
7
|
+
video: VideoFeedItem;
|
|
8
|
+
currentUser?: string;
|
|
9
|
+
isContentVoted?: boolean;
|
|
10
|
+
description?: string;
|
|
11
|
+
onTapComment?: (author: string, permlink: string) => void;
|
|
12
|
+
onTapUpvote?: (author: string, permlink: string) => void;
|
|
13
|
+
onTapShare?: (author: string, permlink: string) => void;
|
|
14
|
+
onTapBookmark?: (author: string, permlink: string) => void;
|
|
15
|
+
onTapAuthor?: (author: string, permlink: string) => void;
|
|
16
|
+
onTapInfo?: (author: string, permlink: string) => void;
|
|
17
|
+
}
|
|
18
|
+
declare const VideoInfo: ({ title, author, permlink, createdAt, video, currentUser, isContentVoted, description, onTapComment, onTapUpvote, onTapShare, onTapBookmark, onTapAuthor, onTapInfo, }: VideoInfoProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export default VideoInfo;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface FavouriteWidgetProps {
|
|
2
|
+
id: string;
|
|
3
|
+
toastType: string;
|
|
4
|
+
isLiked?: boolean;
|
|
5
|
+
onAdd?: (id: string, action: "add_bookmark") => void;
|
|
6
|
+
onRemove?: (id: string, action: "remove_bookmark") => void;
|
|
7
|
+
onFavourite?: () => void;
|
|
8
|
+
}
|
|
9
|
+
declare const Favourite: ({ id, toastType, isLiked, onAdd, onRemove, onFavourite, }: FavouriteWidgetProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default Favourite;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
interface CommunityDetailProps {
|
|
2
|
+
communityId: string;
|
|
3
|
+
onVideoClick: (video: any) => void;
|
|
4
|
+
onAuthorClick: (author: string) => void;
|
|
5
|
+
onBack: () => void;
|
|
6
|
+
onclickAboutTab?: () => void;
|
|
7
|
+
onclickTeamTab?: () => void;
|
|
8
|
+
onclickMemberTab?: () => void;
|
|
9
|
+
onShare?: () => void;
|
|
10
|
+
onFavourite?: () => void;
|
|
11
|
+
onRss?: () => void;
|
|
12
|
+
onMoreVertical?: () => void;
|
|
13
|
+
showMoreVertical?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare const CommunityDetail: ({ communityId, onVideoClick, onAuthorClick, onBack, onclickAboutTab, onclickTeamTab, onclickMemberTab, onShare, onFavourite, onRss, onMoreVertical, showMoreVertical, }: CommunityDetailProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export default CommunityDetail;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
interface CommunityMembersProps {
|
|
2
|
+
communityId: string;
|
|
3
|
+
onSelectCommunityMember?: (username: string) => void;
|
|
4
|
+
}
|
|
5
|
+
declare const CommunityMembers: ({ communityId, onSelectCommunityMember }: CommunityMembersProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default CommunityMembers;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
interface CommunityTeamProps {
|
|
2
|
+
communityId: string;
|
|
3
|
+
onSelectTeamMember?: (username: string) => void;
|
|
4
|
+
}
|
|
5
|
+
declare const CommunityTeam: ({ communityId, onSelectTeamMember, }: CommunityTeamProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default CommunityTeam;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export { default as VideoCard } from './VideoCard';
|
|
2
|
+
export { default as VideoDetail } from './VideoDetail';
|
|
3
|
+
export { default as VideoFeed } from './VideoFeed';
|
|
4
|
+
export { default as VideoInfo } from './VideoInfo';
|
|
5
|
+
export { default as Wallet } from './Wallet';
|
|
6
|
+
export { default as FavouriteWidget } from './common/FavouriteWidget';
|
|
7
|
+
export { default as CommunitiesList } from './community/CommunitiesList';
|
|
8
|
+
export { default as CommunityAbout } from './community/CommunityAbout';
|
|
9
|
+
export { default as CommunityDetail } from './community/CommunityDetail';
|
|
10
|
+
export { default as CommunityMembers } from './community/CommunityMembers';
|
|
11
|
+
export { default as CommunityTeam } from './community/CommunityTeam';
|
|
12
|
+
export { default as CommentsModal } from './modals/CommentsModal';
|
|
13
|
+
export { default as DescriptionModal } from './modals/DescriptionModal';
|
|
14
|
+
export { default as Modal } from './modals/Modal';
|
|
15
|
+
export { default as UpvoteListModal } from './modals/UpvoteListModal';
|
|
16
|
+
export { default as UserAccount } from './user/UserAccount';
|
|
17
|
+
export { default as UserFollowers } from './user/UserFollowers';
|
|
18
|
+
export { default as UserFollowing } from './user/UserFollowing';
|
|
19
|
+
export { default as UserInfo } from './user/UserInfo';
|
|
20
|
+
export { default as UserProfilePage } from './user/UserProfilePage';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
interface CommentsModalProps {
|
|
2
|
+
author: string;
|
|
3
|
+
permlink: string;
|
|
4
|
+
currentUser?: string;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
}
|
|
7
|
+
declare const CommentsModal: ({ author, permlink, currentUser, onClose }: CommentsModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default CommentsModal;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
interface DescriptionModalProps {
|
|
2
|
+
author: string;
|
|
3
|
+
permlink: string;
|
|
4
|
+
content: string;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
}
|
|
7
|
+
declare const DescriptionModal: ({ author, permlink, content, onClose }: DescriptionModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default DescriptionModal;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface ModalProps {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
title: string;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
maxWidth?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const Modal: ({ isOpen, onClose, title, children, maxWidth }: ModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default Modal;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { User } from "@/types/user";
|
|
2
|
+
interface UserAccountProps {
|
|
3
|
+
currentUser: User | null;
|
|
4
|
+
onTabChanged?: (tabIndex: number) => void;
|
|
5
|
+
onPublish?: (username: string, permlink: string) => void;
|
|
6
|
+
onViewMyVideo?: (username: string, permlink: string) => void;
|
|
7
|
+
onMoreOptions?: (videoId: string) => void;
|
|
8
|
+
onTapBackButton?: () => void;
|
|
9
|
+
shouldShowMoreOptionsButton?: boolean;
|
|
10
|
+
shouldShowBackButton?: boolean;
|
|
11
|
+
shouldShowPublishButton?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const UserAccount: ({ currentUser, onTabChanged, onPublish, onViewMyVideo, onMoreOptions, onTapBackButton, shouldShowBackButton, shouldShowPublishButton, shouldShowMoreOptionsButton, }: UserAccountProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export default UserAccount;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
interface UserProfilePageProps {
|
|
2
|
+
username: string;
|
|
3
|
+
onVideoClick: (video: any) => void;
|
|
4
|
+
onAuthorClick: (author: string) => void;
|
|
5
|
+
onBack: () => void;
|
|
6
|
+
}
|
|
7
|
+
declare const UserProfilePage: ({ username, onVideoClick, onAuthorClick, onBack, }: UserProfilePageProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default UserProfilePage;
|
package/dist/favicon.ico
ADDED
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useIsMobile(): boolean;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
type ToastActionElement = React.ReactElement;
|
|
3
|
+
type ToastProps = {
|
|
4
|
+
id?: string;
|
|
5
|
+
title?: React.ReactNode;
|
|
6
|
+
description?: React.ReactNode;
|
|
7
|
+
action?: ToastActionElement;
|
|
8
|
+
open?: boolean;
|
|
9
|
+
onOpenChange?: (open: boolean) => void;
|
|
10
|
+
};
|
|
11
|
+
type ToasterToast = ToastProps & {
|
|
12
|
+
id: string;
|
|
13
|
+
title?: React.ReactNode;
|
|
14
|
+
description?: React.ReactNode;
|
|
15
|
+
action?: ToastActionElement;
|
|
16
|
+
};
|
|
17
|
+
declare const actionTypes: {
|
|
18
|
+
readonly ADD_TOAST: "ADD_TOAST";
|
|
19
|
+
readonly UPDATE_TOAST: "UPDATE_TOAST";
|
|
20
|
+
readonly DISMISS_TOAST: "DISMISS_TOAST";
|
|
21
|
+
readonly REMOVE_TOAST: "REMOVE_TOAST";
|
|
22
|
+
};
|
|
23
|
+
type ActionType = typeof actionTypes;
|
|
24
|
+
type Action = {
|
|
25
|
+
type: ActionType["ADD_TOAST"];
|
|
26
|
+
toast: ToasterToast;
|
|
27
|
+
} | {
|
|
28
|
+
type: ActionType["UPDATE_TOAST"];
|
|
29
|
+
toast: Partial<ToasterToast>;
|
|
30
|
+
} | {
|
|
31
|
+
type: ActionType["DISMISS_TOAST"];
|
|
32
|
+
toastId?: ToasterToast["id"];
|
|
33
|
+
} | {
|
|
34
|
+
type: ActionType["REMOVE_TOAST"];
|
|
35
|
+
toastId?: ToasterToast["id"];
|
|
36
|
+
};
|
|
37
|
+
interface State {
|
|
38
|
+
toasts: ToasterToast[];
|
|
39
|
+
}
|
|
40
|
+
export declare const reducer: (state: State, action: Action) => State;
|
|
41
|
+
type Toast = Omit<ToasterToast, "id">;
|
|
42
|
+
declare function toast({ ...props }: Toast): {
|
|
43
|
+
id: string;
|
|
44
|
+
dismiss: () => void;
|
|
45
|
+
update: (props: ToasterToast) => void;
|
|
46
|
+
};
|
|
47
|
+
declare function useToast(): {
|
|
48
|
+
toast: typeof toast;
|
|
49
|
+
dismiss: (toastId?: string) => void;
|
|
50
|
+
toasts: ToasterToast[];
|
|
51
|
+
};
|
|
52
|
+
export { useToast, toast };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export { default as VideoCard } from './components/VideoCard';
|
|
2
|
+
export { default as VideoDetail } from './components/VideoDetail';
|
|
3
|
+
export { default as VideoFeed } from './components/VideoFeed';
|
|
4
|
+
export { default as VideoInfo } from './components/VideoInfo';
|
|
5
|
+
export { default as Wallet } from './components/Wallet';
|
|
6
|
+
export { default as FavouriteWidget } from './components/common/FavouriteWidget';
|
|
7
|
+
export { default as CommunitiesList } from './components/community/CommunitiesList';
|
|
8
|
+
export { default as CommunityAbout } from './components/community/CommunityAbout';
|
|
9
|
+
export { default as CommunityDetail } from './components/community/CommunityDetail';
|
|
10
|
+
export { default as CommunityMembers } from './components/community/CommunityMembers';
|
|
11
|
+
export { default as CommunityTeam } from './components/community/CommunityTeam';
|
|
12
|
+
export { default as CommentsModal } from './components/modals/CommentsModal';
|
|
13
|
+
export { default as DescriptionModal } from './components/modals/DescriptionModal';
|
|
14
|
+
export { default as Modal } from './components/modals/Modal';
|
|
15
|
+
export { default as UpvoteListModal } from './components/modals/UpvoteListModal';
|
|
16
|
+
export { default as UserAccount } from './components/user/UserAccount';
|
|
17
|
+
export { default as UserFollowers } from './components/user/UserFollowers';
|
|
18
|
+
export { default as UserFollowing } from './components/user/UserFollowing';
|
|
19
|
+
export { default as UserInfo } from './components/user/UserInfo';
|
|
20
|
+
export { default as UserProfilePage } from './components/user/UserProfilePage';
|
|
21
|
+
export * from './hooks/use-mobile';
|
|
22
|
+
export * from './hooks/use-toast';
|
|
23
|
+
export * from './types/comment';
|
|
24
|
+
export * from './types/graphql';
|
|
25
|
+
export * from './types/trending';
|
|
26
|
+
export * from './types/video';
|
|
27
|
+
export * from './types/wallet';
|
|
28
|
+
export * from './services/apiService';
|
|
29
|
+
export * from './store/walletStore';
|