@trendr/core 0.1.0 → 0.2.0

package/src/table.js

@@ -2,10 +2,12 @@ import { jsx, jsxs } from '../jsx-runtime.js'
 import { useTheme } from './hooks.js'
 import { List } from './list.js'
 
-export function Table({ columns, data, selected, onSelect, focused = true }) {
+const DEFAULT_SEP = { left: '', fill: '\u2500', right: '' }
+
+export function Table({ columns, data, selected, onSelect, focused = true, separator = false, separatorChars, renderItem, scrollbar, stickyHeader = false }) {
   const { accent = 'cyan' } = useTheme()
 
-  const header = jsxs('box', {
+  const headerRow = jsxs('box', {
     style: { flexDirection: 'row' },
     children: columns.map((col, i) =>
       jsx('text', {
@@ -24,28 +26,53 @@ export function Table({ columns, data, selected, onSelect, focused = true }) {
     ),
   })
 
+  const header = separator
+    ? jsxs('box', {
+        style: { flexDirection: 'column' },
+        children: [
+          headerRow,
+          (() => {
+            const s = { ...DEFAULT_SEP, ...separatorChars }
+            return jsxs('box', {
+              style: { flexDirection: 'row' },
+              children: [
+                jsx('text', { style: { color: 'gray', dim: true }, children: s.left }),
+                jsx('text', { style: { color: 'gray', dim: true, flexGrow: 1, overflow: 'nowrap' }, children: s.fill.repeat(200) }),
+                jsx('text', { style: { color: 'gray', dim: true }, children: s.right }),
+              ],
+            })
+          })(),
+        ],
+      })
+    : headerRow
+
+  const defaultRenderItem = (row, { selected: isSel }) =>
+    jsxs('box', {
+      style: { flexDirection: 'row', bg: isSel ? (focused ? accent : 'gray') : null },
+      children: columns.map((col, i) =>
+        jsx('text', {
+          key: i,
+          style: {
+            width: col.width,
+            flexGrow: col.flexGrow,
+            overflow: 'truncate',
+            paddingX: col.paddingX ?? 1,
+            color: isSel && focused ? 'black' : (col.color ?? null),
+          },
+          children: col.render ? col.render(row, isSel) : String(row[col.key] ?? ''),
+        })
+      ),
+    })
+
   return jsx(List, {
     items: data,
     selected,
     onSelect,
     focused,
     header,
-    renderItem: (row, { selected: isSel }) =>
-      jsxs('box', {
-        style: { flexDirection: 'row', bg: isSel ? (focused ? accent : 'gray') : null },
-        children: columns.map((col, i) =>
-          jsx('text', {
-            key: i,
-            style: {
-              width: col.width,
-              flexGrow: col.flexGrow,
-              overflow: 'truncate',
-              paddingX: col.paddingX ?? 1,
-              color: isSel && focused ? 'black' : (col.color ?? null),
-            },
-            children: col.render ? col.render(row, isSel) : String(row[col.key] ?? ''),
-          })
-        ),
-      }),
+    headerHeight: separator ? 2 : 1,
+    scrollbar,
+    stickyHeader,
+    renderItem: renderItem || defaultRenderItem,
   })
 }

package/src/task.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { useAsync } from './hooks.js'
+import { Spinner } from './spinner.js'
+import { useTheme } from './hooks.js'
+
+const DEFAULT_ICONS = {
+  success: '\u2714',
+  error: '\u2716',
+  idle: '\u25CB',
+}
+
+export function Task({ run, label, successLabel, errorLabel, icon, color, immediate = true }) {
+  const { accent = 'cyan' } = useTheme()
+  const { status, data, error } = useAsync(run, { immediate })
+
+  const s = status()
+
+  if (s === 'loading') {
+    return jsx(Spinner, { label, color: color ?? accent })
+  }
+
+  const icons = { ...DEFAULT_ICONS, ...icon }
+
+  if (s === 'success') {
+    return jsxs('box', { style: { flexDirection: 'row' }, children: [
+      jsx('text', { style: { color: color ?? 'green' }, children: icons.success }),
+      jsx('text', { children: ` ${successLabel ?? label}` }),
+    ]})
+  }
+
+  if (s === 'error') {
+    const msg = errorLabel ?? error()?.message ?? 'failed'
+    return jsxs('box', { style: { flexDirection: 'row' }, children: [
+      jsx('text', { style: { color: color ?? 'red' }, children: icons.error }),
+      jsx('text', { children: ` ${msg}` }),
+    ]})
+  }
+
+  return jsxs('box', { style: { flexDirection: 'row' }, children: [
+    jsx('text', { style: { color: 'gray' }, children: icons.idle }),
+    jsx('text', { style: { color: 'gray' }, children: ` ${label}` }),
+  ]})
+}

package/src/text-area.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
-import { useInput, useLayout } from './hooks.js'
+import { useInput, useLayout, useCursor } from './hooks.js'
 import { registerHook } from './renderer.js'
 
 export function wrapForEditor(text, width) {
@@ -87,11 +87,12 @@ function ensureVisible(cursorRow, scroll, height, totalLines) {
   return scroll
 }
 
-export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused = true, maxHeight = 10 }) {
+export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused = true, maxHeight = 10, clearOnSubmit = true, cursor: cursorProp }) {
   const [value, setValue] = createSignal('')
   const [cursor, setCursor] = createSignal(0)
   const ref = registerHook(() => ({ scroll: 0, goalCol: null }))
   const layout = useLayout()
+  const { cursorStyle, reset: resetBlink } = useCursor(cursorProp, focused)
 
   function update(v, c) {
     setValue(v)
@@ -102,6 +103,7 @@ export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused =
 
   useInput((event) => {
     if (!focused) return
+    resetBlink()
 
     const { key, raw, ctrl, meta } = event
     const v = value()
@@ -109,7 +111,7 @@ export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused =
 
     if (meta && key === '\r') {
       if (onSubmit) onSubmit(v)
-      update('', 0)
+      if (clearOnSubmit) update('', 0)
       ref.scroll = 0
       event.stopPropagation()
       return
@@ -226,6 +228,7 @@ export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused =
   const v = value()
   const c = cursor()
   const w = layout.width || 0
+  const cs = cursorStyle()
 
   if (!v && placeholder && !focused) {
     return jsx('text', { style: { color: 'gray', flexGrow: 1 }, children: placeholder })
@@ -247,7 +250,7 @@ export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused =
       children: jsxs('box', {
         style: { flexDirection: 'row', height: 1 },
         children: [
-          jsx('text', { style: { inverse: true, color: 'gray' }, children: placeholder[0] }),
+          jsx('text', { style: cs ? { ...cs, color: cs.color ?? 'gray' } : { inverse: true, color: 'gray' }, children: placeholder[0] }),
           placeholder.length > 1 && jsx('text', { style: { color: 'gray' }, children: placeholder.slice(1) }),
         ],
       }),
@@ -273,7 +276,7 @@ export function TextArea({ onSubmit, onCancel, onChange, placeholder, focused =
       style: { flexDirection: 'row', height: 1 },
       children: [
         before && jsx('text', { children: before }),
-        jsx('text', { style: { inverse: true }, children: cursorChar }),
+        jsx('text', { style: cs ?? {}, children: cursorChar }),
         after && jsx('text', { children: after }),
       ],
     })

package/src/text-input.js

@@ -1,14 +1,15 @@
 import { jsx, jsxs } from '../jsx-runtime.js'
 import { createSignal } from './signal.js'
-import { useInput, useLayout } from './hooks.js'
+import { useInput, useLayout, useCursor } from './hooks.js'
 
 const BOX = { flexDirection: 'row', height: 1, minHeight: 1, flexGrow: 1 }
 
-export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused = true, initialValue }) {
+export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused = true, initialValue, clearOnSubmit = false, cursor: cursorProp }) {
   const init = initialValue ?? ''
   const [value, setValue] = createSignal(init)
   const [cursor, setCursor] = createSignal(init.length)
   const layout = useLayout()
+  const { cursorStyle, reset: resetBlink } = useCursor(cursorProp, focused)
 
   function update(v, c) {
     setValue(v)
@@ -18,6 +19,7 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
 
   useInput((event) => {
     if (!focused) return
+    resetBlink()
 
     const { key, raw, ctrl } = event
     const v = value()
@@ -26,7 +28,7 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
     if (key === 'return') {
       if (onSubmit) {
         onSubmit(v)
-        update('', 0)
+        if (clearOnSubmit) update('', 0)
         event.stopPropagation()
       }
       return
@@ -79,6 +81,7 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
   const v = value()
   const c = cursor()
   const w = layout.width || 0
+  const cs = cursorStyle()
 
   if (!v && placeholder && !focused) {
     return jsx('text', { style: { color: 'gray', flexGrow: 1 }, children: placeholder })
@@ -88,7 +91,7 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
     return jsxs('box', {
       style: BOX,
       children: [
-        jsx('text', { style: { inverse: true, color: 'gray' }, children: placeholder[0] }),
+        jsx('text', { style: cs ? { ...cs, color: cs.color ?? 'gray' } : { inverse: true, color: 'gray' }, children: placeholder[0] }),
         placeholder.length > 1 && jsx('text', { style: { color: 'gray' }, children: placeholder.slice(1) }),
       ],
     })
@@ -103,7 +106,7 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
       style: BOX,
       children: [
         v.slice(0, c) && jsx('text', { children: v.slice(0, c) }),
-        jsx('text', { style: { inverse: focused }, children: cursorChar }),
+        jsx('text', { style: cs ?? {}, children: cursorChar }),
         v.slice(c + 1) && jsx('text', { children: v.slice(c + 1) }),
       ],
     })
@@ -124,7 +127,7 @@ export function TextInput({ onSubmit, onCancel, onChange, placeholder, focused =
     style: BOX,
     children: [
       before && jsx('text', { children: before }),
-      jsx('text', { style: { inverse: focused }, children: cursorChar }),
+      jsx('text', { style: cs ?? {}, children: cursorChar }),
       after && jsx('text', { children: after }),
     ],
   })

package/src/toast.js

@@ -18,7 +18,7 @@ const POSITIONS = {
 
 let nextId = 0
 
-export function useToast({ duration = 2000, position = 'bottom-right', margin = 1 } = {}) {
+export function useToast({ duration = 2000, position = 'bottom-right', margin = 1, render } = {}) {
   const [items, setItems] = registerHook(() => createSignalRaw([]))
 
   useInterval(() => {
@@ -47,11 +47,9 @@ export function useToast({ duration = 2000, position = 'bottom-right', margin =
         ...pos,
       },
       children: list.map(t =>
-        jsx('text', {
-          key: t.id,
-          style: { inverse: true },
-          children: ` ${t.message} `,
-        })
+        render
+          ? jsx('box', { key: t.id, children: render(t.message) })
+          : jsx('text', { key: t.id, style: { inverse: true }, children: ` ${t.message} ` })
       ),
     })
     registerOverlay(overlay, { fullscreen: true })

package/src/wrap.js

@@ -9,9 +9,9 @@ export function measureText(text) {
   const clean = stripAnsi(text)
   let width = 0
   for (let i = 0; i < clean.length; i++) {
-    const code = clean.charCodeAt(i)
-    if (code >= 0x1100 && isWide(code)) width += 2
-    else width += 1
+    const code = clean.codePointAt(i)
+    if (code > 0xffff) i++
+    width += (code >= 0x1100 && isWide(code)) ? 2 : 1
   }
   return width
 }
@@ -30,13 +30,15 @@ function* visibleChars(str) {
         continue
       }
     }
-    yield { chunk: pending + str[i], width: charWidth(str.charCodeAt(i)) }
+    const code = str.codePointAt(i)
+    const len = code > 0xffff ? 2 : 1
+    yield { chunk: pending + str.slice(i, i + len), width: charWidth(code) }
     pending = ''
-    i++
+    i += len
   }
 }
 
-function charWidth(code) {
+export function charWidth(code) {
   return (code >= 0x1100 && isWide(code)) ? 2 : 1
 }
 
@@ -118,16 +120,113 @@ export function wordWrap(text, maxWidth) {
   return lines
 }
 
+// generated from Unicode 15.1 EastAsianWidth=W/F + Emoji_Presentation=Yes
 function isWide(code) {
   return (
     (code >= 0x1100 && code <= 0x115f) ||
-    (code >= 0x2e80 && code <= 0x303e) ||
-    (code >= 0x3040 && code <= 0x33bf) ||
-    (code >= 0xf900 && code <= 0xfaff) ||
+    (code >= 0x231a && code <= 0x231b) ||
+    (code >= 0x2329 && code <= 0x232a) ||
+    (code >= 0x23e9 && code <= 0x23ec) ||
+    code === 0x23f0 ||
+    code === 0x23f3 ||
+    (code >= 0x25fd && code <= 0x25fe) ||
+    (code >= 0x2614 && code <= 0x2615) ||
+    (code >= 0x2648 && code <= 0x2653) ||
+    code === 0x267f ||
+    code === 0x2693 ||
+    code === 0x26a1 ||
+    (code >= 0x26aa && code <= 0x26ab) ||
+    (code >= 0x26bd && code <= 0x26be) ||
+    (code >= 0x26c4 && code <= 0x26c5) ||
+    code === 0x26ce ||
+    code === 0x26d4 ||
+    code === 0x26ea ||
+    (code >= 0x26f2 && code <= 0x26f3) ||
+    code === 0x26f5 ||
+    code === 0x26fa ||
+    code === 0x26fd ||
+    code === 0x2705 ||
+    (code >= 0x270a && code <= 0x270b) ||
+    code === 0x2728 ||
+    code === 0x274c ||
+    code === 0x274e ||
+    (code >= 0x2753 && code <= 0x2755) ||
+    code === 0x2757 ||
+    (code >= 0x2795 && code <= 0x2797) ||
+    code === 0x27b0 ||
+    code === 0x27bf ||
+    (code >= 0x2b1b && code <= 0x2b1c) ||
+    code === 0x2b50 ||
+    code === 0x2b55 ||
+    (code >= 0x2e80 && code <= 0x2fd5) ||
+    (code >= 0x2ff0 && code <= 0x2ffb) ||
+    (code >= 0x3000 && code <= 0x3096) ||
+    (code >= 0x3099 && code <= 0x30ff) ||
+    (code >= 0x3105 && code <= 0x312f) ||
+    (code >= 0x3131 && code <= 0x318e) ||
+    (code >= 0x3190 && code <= 0x31ba) ||
+    (code >= 0x31c0 && code <= 0x31e3) ||
+    (code >= 0x31f0 && code <= 0x321e) ||
+    (code >= 0x3220 && code <= 0x32fe) ||
+    (code >= 0x3300 && code <= 0x4db5) ||
+    (code >= 0x4e00 && code <= 0x9fef) ||
+    (code >= 0xa000 && code <= 0xa4c6) ||
+    (code >= 0xac00 && code <= 0xd7a3) ||
+    (code >= 0xf900 && code <= 0xfa6d) ||
+    (code >= 0xfa70 && code <= 0xfad9) ||
+    (code >= 0xfe10 && code <= 0xfe19) ||
     (code >= 0xfe30 && code <= 0xfe6f) ||
     (code >= 0xff01 && code <= 0xff60) ||
     (code >= 0xffe0 && code <= 0xffe6) ||
-    (code >= 0x20000 && code <= 0x2fffd) ||
-    (code >= 0x30000 && code <= 0x3fffd)
+    code === 0x1f004 ||
+    code === 0x1f0cf ||
+    code === 0x1f18e ||
+    (code >= 0x1f191 && code <= 0x1f19a) ||
+    (code >= 0x1f1e6 && code <= 0x1f202) ||
+    (code >= 0x1f210 && code <= 0x1f23b) ||
+    (code >= 0x1f240 && code <= 0x1f248) ||
+    (code >= 0x1f250 && code <= 0x1f251) ||
+    (code >= 0x1f300 && code <= 0x1f320) ||
+    (code >= 0x1f32d && code <= 0x1f335) ||
+    (code >= 0x1f337 && code <= 0x1f37c) ||
+    (code >= 0x1f37e && code <= 0x1f393) ||
+    (code >= 0x1f3a0 && code <= 0x1f3ca) ||
+    (code >= 0x1f3cf && code <= 0x1f3d3) ||
+    (code >= 0x1f3e0 && code <= 0x1f3f0) ||
+    code === 0x1f3f4 ||
+    (code >= 0x1f3f8 && code <= 0x1f43e) ||
+    code === 0x1f440 ||
+    (code >= 0x1f442 && code <= 0x1f4fc) ||
+    (code >= 0x1f4ff && code <= 0x1f53d) ||
+    (code >= 0x1f54b && code <= 0x1f54e) ||
+    (code >= 0x1f550 && code <= 0x1f567) ||
+    code === 0x1f57a ||
+    (code >= 0x1f595 && code <= 0x1f596) ||
+    code === 0x1f5a4 ||
+    (code >= 0x1f5fb && code <= 0x1f64f) ||
+    (code >= 0x1f680 && code <= 0x1f6c5) ||
+    code === 0x1f6cc ||
+    (code >= 0x1f6d0 && code <= 0x1f6d2) ||
+    (code >= 0x1f6d5 && code <= 0x1f6d7) ||
+    (code >= 0x1f6dc && code <= 0x1f6df) ||
+    (code >= 0x1f6eb && code <= 0x1f6ec) ||
+    (code >= 0x1f6f4 && code <= 0x1f6fc) ||
+    (code >= 0x1f7e0 && code <= 0x1f7eb) ||
+    code === 0x1f7f0 ||
+    (code >= 0x1f90c && code <= 0x1f93a) ||
+    (code >= 0x1f93c && code <= 0x1f945) ||
+    (code >= 0x1f947 && code <= 0x1f9ff) ||
+    (code >= 0x1fa70 && code <= 0x1fa7c) ||
+    (code >= 0x1fa80 && code <= 0x1fa88) ||
+    (code >= 0x1fa90 && code <= 0x1fabd) ||
+    (code >= 0x1fabf && code <= 0x1fac5) ||
+    (code >= 0x1face && code <= 0x1fadb) ||
+    (code >= 0x1fae0 && code <= 0x1fae8) ||
+    (code >= 0x1faf0 && code <= 0x1faf8) ||
+    (code >= 0x20000 && code <= 0x2a6d6) ||
+    (code >= 0x2a700 && code <= 0x2b734) ||
+    (code >= 0x2b740 && code <= 0x2b81d) ||
+    (code >= 0x2b820 && code <= 0x2ebe0) ||
+    (code >= 0x30000 && code <= 0x3134a)
   )
 }