feat: publish all stories UI components to npm! (#111)

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