🪚 Table printer (#166)

packages/io-devtools/package.json

@@ -48,6 +48,7 @@
     "fast-check": "^3.15.0",
     "ink": "^3.2.0",
     "ink-gradient": "^2.0.0",
+    "ink-table": "^3.1.0",
     "jest": "^29.7.0",
     "react": "^17.0.2",
     "ts-jest": "^29.1.1",
@@ -60,6 +61,7 @@
   "peerDependencies": {
     "ink": "^3.2.0",
     "ink-gradient": "^2.0.0",
+    "ink-table": "^3.1.0",
     "react": "^17.0.2",
     "yoga-layout-prebuilt": "^1.9.6",
     "zod": "^3.22.4"
@@ -71,6 +73,9 @@
     "ink-gradient": {
       "optional": true
     },
+    "ink-table": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },

packages/io-devtools/src/stdio/printer.ts

@@ -36,7 +36,7 @@ export const printRecord = <TRecord extends object>(obj: TRecord, title?: string
  * @param {boolean | null | undefined} value
  * @returns {string}
  */
-export const printBoolean = (value: boolean | null | undefined): string => (value == null ? '∅' : value ? '✅' : '❌')
+export const printBoolean = (value: boolean | null | undefined): string => (value == null ? '∅' : value ? '✓' : '⤫')
 
 export const printZodErrors = (error: ZodError<unknown>): string => {
     // Here we will go through all the errors and prefix them with the name

packages/io-devtools/src/swag/components/record.tsx

@@ -1,14 +1,6 @@
 import { Box, Text } from "ink";
 import React from "react";
-
-export type PrimitiveValue =
-  | string
-  | number
-  | boolean
-  | bigint
-  | symbol
-  | null
-  | undefined;
+import type { PrimitiveValue } from "./types";
 
 export type RecordData = Record<string, PrimitiveValue>;
 

packages/io-devtools/src/swag/components/table.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import InkTable from "ink-table";
+import type { PrimitiveValue } from "./types";
+import { Text } from "ink";
+
+export type TableRow = Record<string | number, PrimitiveValue>;
+
+export const Table: React.FC<{ data: TableRow[] }> = ({ data }) => (
+  <InkTable
+    data={data as any}
+    header={({ children }) => (
+      <Text bold color="magenta">
+        {children}
+      </Text>
+    )}
+  />
+);

packages/io-devtools/src/swag/components/types.ts

@@ -0,0 +1 @@
+export type PrimitiveValue = string | number | boolean | bigint | symbol | null | undefined

packages/io-devtools/src/swag/printer.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { render } from "ink";
 import { Logo } from "./components/logo";
-import { RecordList, RecordData, Record } from "./components/record";
+import { Record, RecordList, type RecordData } from "./components/record";
+import { Table, type TableRow } from "./components/table";
 
 export const printLogo = () => render(<Logo />).unmount();
 
@@ -10,3 +11,5 @@ export const printRecord = (data: RecordData) =>
 
 export const printRecords = (data: RecordData[]) =>
   render(<RecordList data={data} />).unmount();
+
+export const printTable = (data: TableRow[]) => render(<Table data={data} />);

packages/toolbox-hardhat/package.json

@@ -44,6 +44,7 @@
     "@layerzerolabs/ua-devtools-evm-hardhat": "~0.0.1",
     "ink": "^3.2.0",
     "ink-gradient": "^2.0.0",
+    "ink-table": "^3.1.0",
     "react": "^17.0.2",
     "yoga-layout-prebuilt": "^1.10.0",
     "zod": "^3.22.4"