diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b08045be2..0663fce70 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,6 +18,7 @@ jobs:
- run: pnpm check-build
- run: pnpm test-unit
- run: pnpm lint
+ - run: pnpm tsx scripts/buildNpmReact.ts
- run: nohup pnpm prod-start &
- run: nohup pnpm test-mc-server &
- uses: cypress-io/github-action@v5
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index cbc09b432..79bc5ffdf 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -33,9 +33,16 @@ jobs:
pnpx zardoy-release node --footer "This release URL: ${{ steps.deploy.outputs.stdout }}"
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ - run: |
+ pnpx zardoy-release npm
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: cp vercel.json .vercel/output/static/vercel.json
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: .vercel/output/static
force_orphan: true
+ - run: pnpm tsx scripts/buildNpmReact.ts
+ env:
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
index c44348775..240b751ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,7 @@ package-lock.json
Thumbs.db
build
localSettings.mjs
-dist
+dist*
.DS_Store
.idea/
world
@@ -17,3 +17,5 @@ out
.vercel
generated
storybook-static
+
+src/react/npmReactComponents.ts
diff --git a/README.MD b/README.MD
index 7a93ce7e3..1b8b84ac3 100644
--- a/README.MD
+++ b/README.MD
@@ -4,7 +4,7 @@
A true Minecraft client running in your browser! A port of the original game to the web, written in JavaScript using modern web technologies.
-This project is a work in progress, but I consider it to be usable. If you encounter any bugs or usability issues, please report them!
+If you encounter any bugs or usability issues, please report them!
You can try this out at [mcraft.fun](https://mcraft.fun/), [pcm.gg](https://pcm.gg) (short link) [mcon.vercel.app](https://mcon.vercel.app/) or the GitHub pages deploy. Every commit from the `develop` (default) branch is deployed to [s.mcraft.fun](https://s.mcraft.fun/) - so it's usually newer, but might be less stable.
@@ -19,6 +19,8 @@ You can try this out at [mcraft.fun](https://mcraft.fun/), [pcm.gg](https://pcm.
- Resource pack support
- even even more!
+All components that are in [Storybook](https://mcraft.fun/storybook) are published as npm module and can be used in other projects: [`minecraft-react`](https://npmjs.com/minecraft-react)
+
### Recommended Settings
- Controls -> **Raw Input** -> **On** - This will make the controls more precise
@@ -65,7 +67,6 @@ To open the console, press `F12`, or if you are on mobile, you can type `#debug`
It should be easy to build/start the project locally. See [CONTRIBUTING.MD](./CONTRIBUTING.md) for more info.
-There is storybook for fast UI development. Run `pnpm storybook` to start it.
There is world renderer playground ([link](https://mcon.vercel.app/playground.html)).
However, there are many things that can be done in online version. You can access some global variables in the console and useful examples:
diff --git a/README.NPM.MD b/README.NPM.MD
new file mode 100644
index 000000000..24c90bc98
--- /dev/null
+++ b/README.NPM.MD
@@ -0,0 +1,32 @@
+# Minecraft React
+
+```bash
+yarn add minecraft-react
+```
+
+## Usage
+
+```jsx
+import { Scoreboard } from 'minecraft-react'
+
+const App = () => {
+ return (
+
+ )
+}
+```
+
+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)
diff --git a/experiments/UiStandaloneExample.tsx b/experiments/UiStandaloneExample.tsx
new file mode 100644
index 000000000..80f68e8d6
--- /dev/null
+++ b/experiments/UiStandaloneExample.tsx
@@ -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 (
+