forked from PrismarineJS/prismarine-web-client
-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: publish all stories UI components to npm! (#111)
- Loading branch information
Showing
68 changed files
with
688 additions
and
289 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| # Minecraft React | ||
|
|
||
| ```bash | ||
| yarn add minecraft-react | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```jsx | ||
| import { Scoreboard } from 'minecraft-react' | ||
|
|
||
| const App = () => { | ||
| return ( | ||
| <Scoreboard | ||
| open | ||
| title="Scoreboard" | ||
| items={[ | ||
| { name: 'Player 1', value: 10 }, | ||
| { name: 'Player 2', value: 20 }, | ||
| { name: 'Player 3', value: 30 }, | ||
| ]} | ||
| /> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| See [Storybook](https://mcraft.fun/storybook/) or [Storybook (Mirror link)](https://mcon.vercel.app/storybook/) for more examples and full components list. Also take a look at the full [standalone example](https://github.com/zardoy/prismarine-web-client/tree/experiments/UiStandaloneExample.tsx). | ||
|
|
||
| There are two types of components: | ||
|
|
||
| - Small UI components or HUD components | ||
| - Full screen components (like sign editor, worlds selector) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React, { useState } from 'react' | ||
| import { createRoot } from 'react-dom/client' | ||
| import { | ||
| Button, | ||
| Slider, | ||
| ArmorBar, | ||
| BreathBar, | ||
| Chat, | ||
| HealthBar, | ||
| PlayerListOverlay, | ||
| Scoreboard, | ||
| MessageFormattedString, | ||
| XPBar, | ||
| FoodBar | ||
| } from '../dist-npm' | ||
|
|
||
| const ExampleDemo = () => { | ||
| const [sliderValue, setSliderValue] = useState(0) | ||
|
|
||
| return ( | ||
| <div style={{ scale: '2', transformOrigin: 'top left', width: '50%', height: '50dvh', fontFamily: 'mojangles, sans-serif', background: 'gray' }}> | ||
| <Button>Button</Button> | ||
| <Slider label="Slider" value={sliderValue} updateValue={value => setSliderValue(value)} /> | ||
| <ArmorBar armorValue={10} /> | ||
| <Chat | ||
| messages={[ | ||
| { id: 0, parts: [{ text: 'A formmated message in the chat', color: 'blue' }] }, | ||
| { id: 1, parts: [{ text: 'An other message in the chat', color: 'red' }] }, | ||
| ]} | ||
| usingTouch={false} | ||
| opened | ||
| sendMessage={message => { | ||
| console.log('typed', message) | ||
| // close | ||
| }} | ||
| /> | ||
| <BreathBar oxygen={10} /> | ||
| <HealthBar isHardcore={false} healthValue={10} damaged={false} /> | ||
| <FoodBar food={10} /> | ||
| <PlayerListOverlay | ||
| style={{ | ||
| position: 'static', | ||
| }} | ||
| clientId="" // needed for current player highlight | ||
| serverIP="Server IP" | ||
| tablistHeader="Tab §aHeader" | ||
| tablistFooter="Tab §bFooter" | ||
| playersLists={[ | ||
| [ | ||
| { username: 'Player 1', ping: 10, uuid: undefined }, | ||
| { username: 'Player 2', ping: 20, uuid: undefined }, | ||
| { username: 'Player 3', ping: 30, uuid: undefined }, | ||
| ], | ||
| ]} | ||
| /> | ||
| "§bRed" displays as <MessageFormattedString message="§bRed" /> | ||
| <Scoreboard | ||
| open | ||
| title="Scoreboard" | ||
| items={[ | ||
| { name: 'Player 1', value: 10 }, | ||
| { name: 'Player 2', value: 20 }, | ||
| { name: 'Player 3', value: 30 }, | ||
| ]} | ||
| /> | ||
| <XPBar gamemode="survival" level={10} progress={0.5} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| createRoot(document.body as Element).render(<ExampleDemo />) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| { | ||
| "name": "minecraft-react", | ||
| "description": "A Minecraft-like React UI library", | ||
| "keywords": [ | ||
| "minecraft", | ||
| "minecraft style" | ||
| ], | ||
| "license": "MIT", | ||
| "sideEffects": false, | ||
| "files": [ | ||
| "**" | ||
| ], | ||
| "exports": { | ||
| ".": { | ||
| "default": "./dist/react/npmReactComponents.js", | ||
| "types": "./dist/react/npmReactComponents.d.ts" | ||
| }, | ||
| "./*": { | ||
| "default": "./dist/react/*", | ||
| "types": "./dist/react/*" | ||
| }, | ||
| "./dist": { | ||
| "default": "./dist/*", | ||
| "types": "./dist/*" | ||
| } | ||
| }, | ||
| "module": "./dist/react/npmReactComponents.js", | ||
| "types": "./dist/react/npmReactComponents.d.ts", | ||
| "repository": "zardoy/prismarine-web-client", | ||
| "version": "0.0.0-dev", | ||
| "dependencies": {}, | ||
| "peerDependencies": { | ||
| "react": "^18.0.0", | ||
| "react-dom": "^18.0.0" | ||
| } | ||
| } |
Oops, something went wrong.