feat(poc): add jsx implementation 4 prompts

biome.json

@@ -7,8 +7,9 @@
     "enabled": true,
     "rules": {
       "recommended": true,
-      "style": {
-        "noNonNullAssertion": "off"
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noConfusingVoidType": "off"
       }
     }
   },

package.json

@@ -17,7 +17,8 @@
     "url": "https://github.com/renejfc/conmmit.git"
   },
   "scripts": {
-    "start": "bun ./src/index.ts",
+    "start": "NODE_ENV=production bun ./src/index.tsx",
+    "dev": "bun ./src/index.tsx",
     "build": "bun build --target=bun ./src/index.ts --outdir ./build",
     "format": "biome format . --write",
     "typecheck": "tsc",
@@ -35,11 +36,11 @@
   },
   "dependencies": {
     "@clack/core": "^0.3.4",
-    "@clack/prompts": "^0.7.0",
+    "is-unicode-supported": "^2.0.0",
     "picocolors": "^1.0.0"
   },
   "type": "module",
   "bin": {
-    "conmmit": "./src/index.ts"
+    "conmmit": "./src/index.tsx"
   }
 }

src/index.tsx

@@ -0,0 +1,3 @@
+import { Text } from '~/lib/prompts/'
+
+const p = <Text message='Test' />

src/lib/prompts/index.ts

@@ -0,0 +1,2 @@
+export * from "./text"
+export * from "./types"

src/lib/prompts/runtime/jsx-dev-runtime.ts

@@ -0,0 +1,6 @@
+import type { Component } from "./types"
+
+export function jsxDEV(component: Component, props: { children: Array<any>, [x: string]: any }): any {
+  console.log("Parsing JSX props:", props, "\n")
+  return component(props)
+}

src/lib/prompts/runtime/jsx-runtime.ts

@@ -0,0 +1,5 @@
+import type { Component } from "./types"
+
+export function jsx(component: Component, props: { children: Array<any>, [x: string]: any }): any {
+  return component(props)
+}

src/lib/prompts/runtime/types.ts

@@ -0,0 +1 @@
+export type Component = (props: unknown) => any

src/lib/prompts/symbols.ts

@@ -0,0 +1,44 @@
+import type { State } from "@clack/core"
+import isUnicodeSupported from "is-unicode-supported"
+import color from "picocolors"
+
+const unicode = isUnicodeSupported()
+const s = (c: string, fallback: string) => (unicode ? c : fallback)
+
+export const S = {
+  STEP_ACTIVE: s("◆", "*"),
+  STEP_CANCEL: s("■", "x"),
+  STEP_ERROR: s("▲", "x"),
+  STEP_SUBMIT: s("◇", "o"),
+  BAR_START: s("┌", "T"),
+  BAR: s("│", "|"),
+  BAR_END: s("└", "—"),
+  RADIO_ACTIVE: s("●", ">"),
+  RADIO_INACTIVE: s("○", " "),
+  CHECKBOX_ACTIVE: s("◻", "[•]"),
+  CHECKBOX_SELECTED: s("◼", "[+]"),
+  CHECKBOX_INACTIVE: s("◻", "[ ]"),
+  PASSWORD_MASK: s("▪", "•"),
+  BAR_H: s("─", "-"),
+  CORNER_TOP_RIGHT: s("╮", "+"),
+  CONNECT_LEFT: s("├", "+"),
+  CORNER_BOTTOM_RIGHT: s("╯", "+"),
+  INFO: s("●", "•"),
+  SUCCESS: s("◆", "*"),
+  WARN: s("▲", "!"),
+  ERROR: s("■", "x"),
+}
+
+export const symbol = (state: State) => {
+  switch (state) {
+    case "initial":
+    case "active":
+      return color.cyan(S.STEP_ACTIVE)
+    case "cancel":
+      return color.red(S.STEP_CANCEL)
+    case "error":
+      return color.yellow(S.STEP_ERROR)
+    case "submit":
+      return color.green(S.STEP_SUBMIT)
+  }
+}

src/lib/prompts/text.ts

@@ -0,0 +1,45 @@
+import { TextPrompt } from "@clack/core"
+import c from "picocolors"
+import { S, symbol } from "./symbols"
+import type { TextOptions } from "./types"
+
+export function Text(opts: TextOptions) {
+  return new TextPrompt({
+    validate: opts.validate,
+    placeholder: opts.placeholder,
+    defaultValue: opts.defaultValue,
+    initialValue: opts.initialValue,
+    render() {
+      const title = `${c.gray(S.BAR)}\n${symbol(this.state)} ${opts.message}\n`
+
+      const placeholder = opts.placeholder
+        ? c.inverse(opts.placeholder[0]) + c.dim(opts.placeholder.slice(1))
+        : c.inverse(c.hidden("_"))
+
+      const value = !this.value ? placeholder : this.valueWithCursor
+
+      switch (this.state) {
+        case "error":
+          return (
+            `${title.trim()}\n${c.yellow(S.BAR)}  ${value}\n` +
+            `${c.yellow(S.BAR_END)}  ${c.yellow(this.error)}\n`
+          )
+
+        case "submit":
+          return `${title}${c.gray(S.BAR)}  ${c.dim(this.value || opts.placeholder)}`
+
+        case "cancel": {
+          const canceledValue = c.strikethrough(c.dim(this.value ?? ""))
+          const hasTrimmedValue = this.value?.trim()
+          return (
+            `${title}${c.gray(S.BAR)}  ${canceledValue}` +
+            `${hasTrimmedValue ? `\n${c.gray(S.BAR)}` : ""}`
+          )
+        }
+
+        default:
+          return `${title}${c.cyan(S.BAR)}  ${value}\n${c.cyan(S.BAR_END)}\n`
+      }      
+    },
+  }).prompt()
+}

src/lib/prompts/types.ts

@@ -0,0 +1,7 @@
+export type TextOptions = {
+  message: string
+  placeholder?: string
+  defaultValue?: string
+  initialValue?: string
+  validate?: (value: string) => string | void
+}

tsconfig.json

@@ -6,6 +6,7 @@
     "module": "ESNext",
     "moduleDetection": "force",
     "jsx": "react-jsx",
+    "jsxImportSource": "~/lib/prompts/runtime",
     "allowJs": true,
 
     // Bundler mode
@@ -26,9 +27,8 @@
 
     // Custom
     "baseUrl": ".",
-    "resolveJsonModule": true,
     "paths": {
       "~/*": ["src/*"]
-    }
+    },
   }
 }