Theatric - a leva-like Theatre.js API for React (#375)

Co-authored-by: Aria Minaei <aria.minaei@gmail.com>

packages/playground/src/shared/theatric/index.tsx

@@ -0,0 +1,80 @@
+import {button, initialize, useControls} from 'theatric'
+import {render} from 'react-dom'
+import React, {useState} from 'react'
+import state from './state.json'
+
+initialize(state)
+
+function SomeComponent({id}: {id: string}) {
+  const {foo, $get, $set} = useControls(
+    {
+      foo: 0,
+      bar: 0,
+      bez: button(() => {
+        $set((p) => p.foo, 2)
+        $set((p) => p.bar, 3)
+        console.log($get((p) => p.foo))
+      }),
+    },
+    {folder: id},
+  )
+
+  return (
+    <div>
+      {id}: {foo}
+    </div>
+  )
+}
+
+function App() {
+  const {bar, $set, $get} = useControls({
+    bar: {foo: 'bar'},
+    baz: button(() => console.log($get((p) => p.bar))),
+  })
+
+  const {another, panel, yo} = useControls(
+    {
+      another: '',
+      panel: '',
+      yo: 0,
+    },
+    {panel: 'My panel'},
+  )
+
+  const {} = useControls({})
+
+  const [showComponent, setShowComponent] = useState(false)
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div>{JSON.stringify(bar)}</div>
+      <SomeComponent id="first" />
+      <SomeComponent id="second" />
+      <button
+        onClick={() => {
+          setShowComponent(!showComponent)
+        }}
+      >
+        Show another component
+      </button>
+      <button
+        onClick={() => {
+          $set((p) => p.bar.foo, $get((p) => p.bar.foo) + 1)
+        }}
+      >
+        Increment stuff
+      </button>
+      {showComponent && <SomeComponent id="hidden" />}
+      {yo}
+    </div>
+  )
+}
+
+render(<App />, document.getElementById('root'))

packages/playground/src/shared/theatric/state.json

@@ -0,0 +1,19 @@
+{
+  "sheetsById": {
+    "Panels": {
+      "staticOverrides": {
+        "byObject": {
+          "Default panel": {
+            "first": {
+              "foo": 73
+            }
+          }
+        }
+      }
+    }
+  },
+  "definitionVersion": "0.4.0",
+  "revisionHistory": [
+    "cfRereBjMbBNLzC3"
+  ]
+}

packages/playground/tsconfig.json

@@ -12,7 +12,8 @@
   "references": [
     {"path": "../../theatre"},
     {"path": "../dataverse"},
-    {"path": "../r3f"}
+    {"path": "../r3f"},
+    {"path": "../theatric"}
   ],
   "include": ["./src/**/*", "./src/**/*.json", "./devEnv/**/*"]
 }