chore: temporarily replace react-ink with gum

At the time of writing, ink does not work with React 19

Author: ivarni

packages/jokul/create-vite-server.mjs

@@ -0,0 +1,52 @@
+import react from "@vitejs/plugin-react-swc";
+import { resolve } from "node:path";
+import { createServer } from "vite";
+import { copyJklFonts, setupDev } from "../../utils/vite/index.mjs";
+
+async function createViteServer(componentName, customLogger) {
+    const componentPath = resolve(
+        process.argv[1],
+        "..",
+        "src",
+        "components",
+        componentName,
+        "documentation",
+    );
+
+    return await createServer({
+        mode: "development",
+        configFile: false,
+        plugins: [
+            react(),
+            copyJklFonts(resolve(componentPath, "public", "fonts")),
+            setupDev(componentPath),
+        ],
+        resolve: {
+            alias: {
+                "doc-utils": resolve(
+                    process.argv[1],
+                    "..",
+                    "..",
+                    "..",
+                    "utils",
+                    "dev-example",
+                ),
+            },
+        },
+        root: componentPath,
+        server: {
+            port: 3000,
+        },
+        customLogger,
+    });
+}
+
+export { createViteServer };
+
+const componentName = process.argv[2];
+
+// If a command line argument for a component is provided, start the dev-server
+if (componentName) {
+    const server = await createViteServer(componentName);
+    await server.listen();
+}

packages/jokul/dev-server.mjs

@@ -1,12 +1,8 @@
-import react from "@vitejs/plugin-react-swc";
 import { Box, Text, render, useApp, useInput } from "ink";
 import SelectInput from "ink-select-input";
-import { resolve } from "node:path";
-import { fileURLToPath } from "node:url";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import glob from "tiny-glob";
-import { createServer } from "vite";
-import { copyJklFonts, setupDev } from "../../utils/vite/index.mjs";
+import { createViteServer } from "./create-vite-server.mjs";
 
 export default function App() {
     const [components, setComponents] = useState([]);
@@ -52,17 +48,7 @@ export default function App() {
 
     useEffect(() => {
         glob("**/documentation/Example.tsx").then((result) => {
-            setComponents(
-                result.map((file) => {
-                    return {
-                        label: file.split("/")[2],
-                        value: resolve(
-                            fileURLToPath(new URL(file, import.meta.url)),
-                            "..",
-                        ),
-                    };
-                }),
-            );
+            setComponents(result.map((file) => file.split("/")[2]));
         });
     }, []);
 
@@ -86,33 +72,9 @@ export default function App() {
     });
 
     const handleSelect = async (component) => {
-        setSelectedComponent(component);
+        setSelectedComponent(component.label);
 
-        server.current = await createServer({
-            mode: "development",
-            configFile: false,
-            plugins: [
-                react(),
-                copyJklFonts(resolve(component.value, "public", "fonts")),
-                setupDev(component.value),
-            ],
-            resolve: {
-                alias: {
-                    "doc-utils": resolve(
-                        fileURLToPath(new URL(".", import.meta.url)),
-                        "..",
-                        "..",
-                        "utils",
-                        "dev-example",
-                    ),
-                },
-            },
-            root: component.value,
-            server: {
-                port: 3000,
-            },
-            customLogger,
-        });
+        server.current = await createViteServer(component.label, customLogger);
         await server.current.listen();
     };
 
@@ -123,9 +85,13 @@ export default function App() {
                     <Text>Choose a component from the list below</Text>
                     <Text>Filter: {filterString}</Text>
                     <SelectInput
-                        items={components.filter((component) =>
-                            component.label.startsWith(filterString),
-                        )}
+                        items={components
+                            .filter((component) =>
+                                component.startsWith(filterString),
+                            )
+                            .map((component) => ({
+                                label: component,
+                            }))}
                         onSelect={handleSelect}
                     />
                 </Box>
@@ -134,8 +100,8 @@ export default function App() {
                 <Box flexDirection="column" gap={1}>
                     <Text>
                         Dev-server for component{" "}
-                        <Text color="green">{selectedComponent.label}</Text>{" "}
-                        started on port 3000
+                        <Text color="green">{selectedComponent}</Text> started
+                        on port 3000
                     </Text>
                     <Text>Use 'q' to exit to main menu</Text>
                 </Box>

packages/jokul/dev.sh

@@ -0,0 +1,19 @@
+#! /bin/sh
+
+GUM_PATH=$(command -v gum)
+
+if [ "$GUM_PATH" = "" ]  
+then
+    echo "gum is not installed"
+    echo "see https://github.com/charmbracelet/gum?tab=readme-ov-file#installation"
+    exit 1
+fi
+
+COMPONENT=$(find src/components/* -iname documentation -type d | cut -d "/" -f 3 | gum filter)
+
+if [ "$COMPONENT" = "" ]
+then
+  exit 1
+fi
+
+node create-vite-server.mjs $COMPONENT 

packages/jokul/package.json

@@ -543,7 +543,8 @@
     "scripts": {
         "generate:tokens": "node tokens.build.mjs",
         "build": "pnpm run /compile:*/",
-        "dev": "babel --out-dir=. dev-server.mjs && node dev-server.js",
+        "dev": "sh ./dev.sh",
+        "dev-server": "babel --out-dir=. dev-server.mjs && node dev-server.js",
         "compile:style": "node build-styles.mjs",
         "compile:scripts": "vite build --config vite.build.config.mjs",
         "test": "vitest --config vite.test.config.mjs"