From 24a949c639bd5a83e8e27af034a4eb36af60dde7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20Drwi=C4=99ga?= <tomusdrw@gmail.com>
Date: Thu, 25 Jul 2024 12:52:11 +0200
Subject: [PATCH 1/2] Change the way components are displayed.

---
 README.md       |  48 +++++++++++-
 components.json |   2 +-
 src/App.tsx     | 189 +++++++++++++++++++++++++++---------------------
 src/globals.css |  22 +++---
 4 files changed, 165 insertions(+), 96 deletions(-)

diff --git a/README.md b/README.md
index b7429c5..81786c1 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,47 @@
-# Typeberry Toolkit
+# typeberry 🫐 tools
+
+Additional web-based tooling for typeberry.
+
+- [ ] PVM disassembler
+
+## Requirements
+
+```bash
+$ node --version
+v 22.1.0
+```
+
+We recommend [NVM](https://github.com/nvm-sh/nvm) to install and manage different
+`node` versions.
+
+### Installing dependencies
+
+```bash
+$ npm ci
+```
+
+### Start a development version
+
+```bash
+$ npm run dev
+```
+
+### Building
+
+```bash
+$ npm run build
+```
+
+The static files with the website can then be found in `./dist` folder.
+
+You can display them for instance with `http-server`:
+
+```bash
+$ npx http-server -o
+```
+
+### Running formatting & linting
+
+```bash
+$ npm run lint
+```
diff --git a/components.json b/components.json
index 4f859ee..8d62655 100644
--- a/components.json
+++ b/components.json
@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "src/globals.css",
-    "baseColor": "slate",
+    "baseColor": "sky",
     "cssVariables": true,
     "prefix": ""
   },
diff --git a/src/App.tsx b/src/App.tsx
index bc6f291..00add21 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -70,91 +70,114 @@ function App() {
 
   return (
     <>
-      <div className="grid w-full max-w-sm items-center gap-1.5">
-        <Label htmlFor="test-file">Load test from json file</Label>
-        <Input
-          id="test-file"
-          type="file"
-          accept="application/json"
-          onChange={(e) => {
-            if (e.target.files?.length) {
-              handleProgramUpload(e.target.files[0]);
-            }
-          }}
-        />
+      <div className="container py-3 text-left">
+        <div className="grid grid-cols-3 gap-1.5">
+          <div className="p-3 col-span-2 bg-sky-200 rounded-md">
+            <Label htmlFor="program">PVM program as array of numbers:</Label>
+            <Textarea
+              id="program"
+              placeholder="Paste program as an array of numbers"
+              value={programInput}
+              onChange={(e) => {
+                console.log(e.target.value);
+                try {
+                  setProgramInput(e.target.value);
+                  JSON.parse(e.target.value);
+                  setProgram(JSON.parse(e.target.value));
+                  setIsInvalidProgram(false);
+                } catch (e) {
+                  console.log("wrong json");
+                  setIsInvalidProgram(true);
+                }
+              }}
+            />
+            {isInvalidProgram && <div>Program is not a valid JSON array</div>}
+            <div className="text-right">
+              <Button className="my-2" onClick={handleClick}>
+                Check program
+              </Button>
+            </div>
+          </div>
+
+          <div className="p-3">
+            <Label htmlFor="test-file">Load test from json file:</Label>
+            <Input
+              id="test-file"
+              type="file"
+              accept="application/json"
+              onChange={(e) => {
+                if (e.target.files?.length) {
+                  handleProgramUpload(e.target.files[0]);
+                }
+              }}
+            />
+            <br />
+
+            <Label htmlFor="registers">Initial registers:</Label>
+            <Textarea
+              id="registers"
+              placeholder="Paste initial registers as an array of numbers"
+              value={registersInput}
+              onChange={(e) => {
+                console.log(e.target.value);
+                try {
+                  setRegistersInput(e.target.value);
+                  JSON.parse(e.target.value);
+                  setInitialState((prevState) => ({
+                    ...prevState,
+                    regs: JSON.parse(e.target.value),
+                  }));
+                  setIsInvalidRegisterTable(false);
+                } catch (e) {
+                  console.log("wrong json");
+                  setIsInvalidRegisterTable(true);
+                }
+              }}
+            />
+            {isInvalidRegisterTable && <div>Registers are not a valid JSON array</div>}
+          </div>
+        </div>
       </div>
 
-      <Textarea
-        placeholder="Paste initial registers as an array of numbers"
-        value={registersInput}
-        onChange={(e) => {
-          console.log(e.target.value);
-          try {
-            setRegistersInput(e.target.value);
-            JSON.parse(e.target.value);
-            setInitialState((prevState) => ({
-              ...prevState,
-              regs: JSON.parse(e.target.value),
-            }));
-            setIsInvalidRegisterTable(false);
-          } catch (e) {
-            console.log("wrong json");
-            setIsInvalidRegisterTable(true);
-          }
-        }}
-      />
-      {isInvalidRegisterTable && <div>Registers are not a valid JSON array</div>}
-
-      <Textarea
-        placeholder="Paste program as an array of numbers"
-        value={programInput}
-        onChange={(e) => {
-          console.log(e.target.value);
-          try {
-            setProgramInput(e.target.value);
-            JSON.parse(e.target.value);
-            setProgram(JSON.parse(e.target.value));
-            setIsInvalidProgram(false);
-          } catch (e) {
-            console.log("wrong json");
-            setIsInvalidProgram(true);
-          }
-        }}
-      />
-      {isInvalidProgram && <div>Program is not a valid JSON array</div>}
-      <Button onClick={handleClick}>Check program</Button>
-
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Instruction Code</TableHead>
-            <TableHead>Instruction Name</TableHead>
-            <TableHead>Instruction Gas</TableHead>
-            <TableHead>Instruction Args</TableHead>
-            <TableHead>Instruction Errors</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {!!programPreviewResult?.length &&
-            programPreviewResult.map((programRow: any) => (
-              <TableRow>
-                <TableCell>{programRow.instructionCode}</TableCell>
-                <TableCell>{programRow.name}</TableCell>
-                <TableCell>{programRow.gas}</TableCell>
-                <TableCell>{JSON.stringify(programRow.args)}</TableCell>
-                <TableCell>{programRow.error}</TableCell>
-              </TableRow>
-            ))}
-        </TableBody>
-      </Table>
-
-      <pre>
-        <code>Program preview: {JSON.stringify(programPreviewResult)}</code>
-      </pre>
-
-      <pre>
-        <code>Program run result: {JSON.stringify(programRunResult)}</code>
-      </pre>
+      <div className="container py-3 font-mono">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Instruction Code</TableHead>
+              <TableHead>Instruction Name</TableHead>
+              <TableHead>Instruction Gas</TableHead>
+              <TableHead>Instruction Args</TableHead>
+              <TableHead>Instruction Errors</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {!!programPreviewResult?.length &&
+              programPreviewResult.map((programRow: any) => (
+                <TableRow>
+                  <TableCell>{programRow.instructionCode}</TableCell>
+                  <TableCell className="uppercase font-bold">{programRow.name}</TableCell>
+                  <TableCell>{programRow.gas}</TableCell>
+                  <TableCell className="text-xs text-left">
+                    <pre>{JSON.stringify(programRow.args, null, 2)}</pre>
+                  </TableCell>
+                  <TableCell>{programRow.error}</TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="container py-3 text-left text-xs">
+        <div className="grid grid-cols-2 p-3 bg-slate-100 rounded-md">
+          <pre className="p-3">
+            <code>Program preview: {JSON.stringify(programPreviewResult, null, 2)}</code>
+          </pre>
+
+          <pre className="p-3">
+            <code>Program run result: {JSON.stringify(programRunResult, null, 2)}</code>
+          </pre>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/globals.css b/src/globals.css
index d924e24..d0863a9 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -5,24 +5,24 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 190 84% 4.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 190 84% 4.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --popover-foreground: 190 84% 4.9%;
+    --primary: 190 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
     --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary-foreground: 190 47.4% 11.2%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
     --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent-foreground: 190 47.4% 11.2%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 190 84% 4.9%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -32,14 +32,14 @@
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 190 84% 4.9%;
     --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
+    --card: 190 84% 4.9%;
     --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
+    --popover: 190 84% 4.9%;
     --popover-foreground: 210 40% 98%;
     --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary-foreground: 190 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;

From 83308e957ce1e37ff8aced5f334c47582d79f465 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20Drwi=C4=99ga?= <tomusdrw@gmail.com>
Date: Thu, 25 Jul 2024 12:53:03 +0200
Subject: [PATCH 2/2] Change base path.

---
 vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.ts b/vite.config.ts
index 0afb048..d7b05c8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,7 +5,7 @@ import path from "path";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: "/typeberry-toolkit/",
+  base: "/",
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),