feat: publish all stories UI components to npm!

significantly improve quality of some components, cleanup

Author: zardoy

.github/workflows/ci.yml

@@ -18,6 +18,7 @@ jobs:
       - run: pnpm check-build
       - run: pnpm test-unit
       - run: pnpm lint
+      - run: tsx scripts/buildNpmReact.ts
       - run: nohup pnpm prod-start &
       - run: nohup pnpm test-mc-server &
       - uses: cypress-io/github-action@v5

.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: tsx scripts/buildNpmReact.ts
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.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

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:

README.NPM.MD

@@ -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)

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 (
+    <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 />)

package.json

@@ -29,7 +29,12 @@
     "web",
     "client"
   ],
-  "author": "PrismarineJS",
+  "publish": {
+    "preset": {
+      "publishOnlyIfChanged": true,
+      "runBuild": false
+    }
+  },
   "license": "MIT",
   "dependencies": {
     "@dimaka/interface": "0.0.3-alpha.0",
@@ -48,6 +53,7 @@
     "adm-zip": "^0.5.12",
     "browserfs": "github:zardoy/browserfs#build",
     "change-case": "^5.1.2",
+    "classnames": "^2.5.1",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "cypress-plugin-snapshots": "^1.4.4",
@@ -78,11 +84,15 @@
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5",
     "remark": "^15.0.1",
+    "filesize": "^10.0.12",
     "sanitize-filename": "^1.6.3",
     "skinview3d": "^3.0.1",
     "source-map-js": "^1.0.2",
     "stats-gl": "^1.0.5",
     "stats.js": "^0.17.0",
+    "use-typed-event-listener": "^4.0.2",
+    "mojangson": "^2.0.4",
+    "prosemirror-menu": "^1.2.4",
     "tabbable": "^6.2.0",
     "title-case": "3.x",
     "ua-parser-js": "^1.0.37",
@@ -115,7 +125,6 @@
     "eslint": "^8.50.0",
     "eslint-config-zardoy": "^0.2.17",
     "events": "^3.3.0",
-    "filesize": "^10.0.12",
     "http-browserify": "^1.7.0",
     "http-server": "^14.1.1",
     "https-browserify": "^1.0.0",
@@ -134,7 +143,6 @@
     "three": "0.154.0",
     "timers-browserify": "^2.0.12",
     "typescript": "5.5.0-beta",
-    "use-typed-event-listener": "^4.0.2",
     "vitest": "^0.34.6",
     "yaml": "^2.3.2"
   },

package.npm.json

@@ -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"
+    }
+}