@oasisomniverse/nextjs 1.0.0 → 1.1.0
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 +101 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# @oasisomniverse/nextjs — OASIS Next.js UI Component Library
|
|
2
|
+
|
|
3
|
+
The Next.js UI component library for the [OASIS Platform](https://oasisomniverse.one). 126 components covering avatar SSO, karma, NFTs, quests, map, seeds, messaging, OApps, providers and more — built for Next.js App Router and Pages Router, with full SSR/SSG support.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@oasisomniverse/nextjs)
|
|
6
|
+
[](https://oportal.oasisomniverse.one)
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @oasisomniverse/nextjs
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Basic Usage
|
|
15
|
+
|
|
16
|
+
Components are client components and must be used with `'use client'` when using App Router:
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
'use client';
|
|
20
|
+
|
|
21
|
+
import { Login, AvatarConnect, KarmaToast } from '@oasisomniverse/nextjs';
|
|
22
|
+
|
|
23
|
+
const config = { apiUrl: 'https://api.web4.oasisomniverse.one' };
|
|
24
|
+
|
|
25
|
+
export default function Page() {
|
|
26
|
+
return (
|
|
27
|
+
<>
|
|
28
|
+
<Login config={config} onSuccess={(avatar) => console.log(avatar)} />
|
|
29
|
+
<AvatarConnect config={config} />
|
|
30
|
+
<KarmaToast message="+10 karma earned" value={10} />
|
|
31
|
+
</>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
For Pages Router, import directly without the `'use client'` directive.
|
|
37
|
+
|
|
38
|
+
## Component List
|
|
39
|
+
|
|
40
|
+
All 126 components are grouped below. Every component is also available in vanilla JS, React, Angular, Vue and Svelte at full parity — see the [OASIS Web Component Library](https://oportal.oasisomniverse.one) for the full matrix.
|
|
41
|
+
|
|
42
|
+
| Group | Components |
|
|
43
|
+
|---|---|
|
|
44
|
+
| **Auth & Identity** | AcceptInvite, AvatarConnect, ForgotPassword, Login, ResetPassword, SearchAvatar, SearchAvatars, SendInvite, Signup, VerifyEmail |
|
|
45
|
+
| **Avatar** | AvatarProfile, AvatarWallet, EditAvatar, SearchProfiles, ViewAchievements, ViewAvatar, ViewAvatarKarma, ViewLeagues, ViewOrganizations, ViewTournaments |
|
|
46
|
+
| **Data Screen** | ActivityPub, AddData, EOSIO, Ethereum, Holochain, IPFS, LoadData, ManageData, MongoDB, Neo4j, OffChainManagement, SearchData, Solana, Solid, SQLite, ThreeFold |
|
|
47
|
+
| **Eggs** | Eggs, ManageEggs, SearchEggs, ViewEggs |
|
|
48
|
+
| **Game** | Game |
|
|
49
|
+
| **Karma** | KarmaPanel, KarmaToast, SearchKarma, ViewKarma, VoteKarma |
|
|
50
|
+
| **Map** | Add2DObjectToMap, Add3DObjectToMap, AddQuestToMap, DownloadMap, ManageMap, Map, PlotRouteOnMap, SearchMap, ViewGlobal3DMap, ViewHalonsOnMap, ViewOAppOnMap, ViewQuestOnMap |
|
|
51
|
+
| **Messages** | MenuMessage, Message, MessageContacts, Messaging |
|
|
52
|
+
| **Mission** | ManageMission, Mission, SearchMission, ViewMission |
|
|
53
|
+
| **NFT** | ContactPopupNFT, ManageNFT, NFT, PurchaseNFT, PurchaseVirtualLandNFT, SearchNFT, ViewNFT |
|
|
54
|
+
| **OApp** | CreateOApp, DeployOApp, DownloadOApp, EditOApp, InstallOApp, LaunchOApp, ManageOApp, OApp, SearchOApp |
|
|
55
|
+
| **Providers** | CompareProviderSpeeds, CrossChainManagement, ManageAutoFailover, ManageAutoReplication, ManageLoadBalancing, ManageProviders, ProviderDropdown, Providers, SearchProviders, SeedsProvider, ViewProviderStats, ViewProviders |
|
|
56
|
+
| **Quest** | ManageQuest, Quest, SearchQuest, ViewQuest |
|
|
57
|
+
| **Seeds** | DonateSeeds, ManageSeeds, PayWithSeeds, RewardSeeds, SearchSeeds, Seeds, ViewSeeds |
|
|
58
|
+
| **Common UI** | ComingSoon, Confirmation, Contact, HyperDrive, NavBar, ONET, ONODE, OasisModal, Settings, SideNav, StarField, Wallet |
|
|
59
|
+
|
|
60
|
+
## Dark Space Design System
|
|
61
|
+
|
|
62
|
+
The OASIS component library ships with the **Dark Space** design system — a deep-space aesthetic built for the OASIS Omniverse:
|
|
63
|
+
|
|
64
|
+
- **Background**: near-black (#0a0d14) with subtle nebula gradients
|
|
65
|
+
- **Primary accent**: electric cyan (#00c8ff)
|
|
66
|
+
- **Typography**: [Orbitron](https://fonts.google.com/specimen/Orbitron) for headings, [Rajdhani](https://fonts.google.com/specimen/Rajdhani) for body text
|
|
67
|
+
- **Text**: always bright (#e0f0ff / #fff) — never dim or faded
|
|
68
|
+
- **Borders**: translucent cyan (`rgba(0,200,255,0.2)`)
|
|
69
|
+
- **Cards**: glassy dark panels with backdrop-filter blur
|
|
70
|
+
|
|
71
|
+
Add the Orbitron and Rajdhani fonts in your `layout.tsx`:
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { Orbitron, Rajdhani } from 'next/font/google';
|
|
75
|
+
|
|
76
|
+
const orbitron = Orbitron({ subsets: ['latin'], variable: '--font-orbitron' });
|
|
77
|
+
const rajdhani = Rajdhani({ subsets: ['latin'], weight: ['400', '600', '700'], variable: '--font-rajdhani' });
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Override CSS custom properties to theme components for your own OAPP:
|
|
81
|
+
|
|
82
|
+
```css
|
|
83
|
+
:root {
|
|
84
|
+
--oasis-bg: #0a0d14;
|
|
85
|
+
--oasis-accent: #00c8ff;
|
|
86
|
+
--oasis-text: #e0f0ff;
|
|
87
|
+
--oasis-border: rgba(0, 200, 255, 0.2);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Live Demo
|
|
92
|
+
|
|
93
|
+
See the full component matrix at **[oportal.oasisomniverse.one](https://oportal.oasisomniverse.one)**.
|
|
94
|
+
|
|
95
|
+
## Links
|
|
96
|
+
|
|
97
|
+
- [GitHub](https://github.com/NextGenSoftwareUK/OASIS-NextJS-UI-Component-Library)
|
|
98
|
+
- [npm](https://www.npmjs.com/package/@oasisomniverse/nextjs)
|
|
99
|
+
- [OASIS API Docs](https://oasis-web4.gitbook.io/oasis-web4-docs/)
|
|
100
|
+
- [Developer Portal](https://oportal.oasisomniverse.one)
|
|
101
|
+
- [OASIS Platform](https://oasisomniverse.one)
|
package/package.json
CHANGED