1ch 0.2.0 → 0.3.0

package/README.md

@@ -54,7 +54,7 @@ Under the hood, 1ch uses a custom React reconciler that turns your component tre
 
 **Layout** - `TVStack`, `THStack`, `TBox`, `TSeparator`, `TBlank`, `TLine`, `TSpan`
 
-**Data** - `TTable`, `TTree`, `TList`, `TCode`, `TDiff`, `TBar`, `TSpark`
+**Data** - `TTable`, `TTree`, `TList`, `TCode`, `TUnifiedDiff`, `TDiffCompute`, `TBar`, `TSpark`
 
 **Interactive** - `TTabs`, `TButton`, `TStatusbar`
 

package/dist/index.d.ts

@@ -125,11 +125,19 @@ type Theme = {
 declare function isTableLine(line: Line): boolean;
 declare function preserveTableTag(source: Line, target: Line): void;
 
+type ScrollRegionMeta = {
+    onScroll: (offset: number) => void;
+    totalLines: number;
+    maxHeight: number;
+    offset: number;
+};
+
 declare function pad(s: string, w: number, right?: boolean): string;
 declare function hl(n: number): string;
 declare function bar(val: number, max: number, w: number): string;
 declare function spark(data: number[], w: number): string;
 declare function padLine(line: Line, w: number): Line;
+declare function truncate(text: string, width: number, ellipsis?: string): string;
 
 type BoxAction = {
     label: string;
@@ -147,8 +155,32 @@ declare function hstack(children: LayoutFn[], opts?: {
     widths?: number[];
 }): LayoutFn;
 declare function vstack(...children: LayoutFn[]): LayoutFn;
-declare function separator(color?: string): LayoutFn;
-declare function blank(): LayoutFn;
+declare function separator(color?: string, char?: string): LayoutFn;
+declare function blank(count?: number): LayoutFn;
+declare function divider(label: string, opts?: {
+    color?: string;
+    char?: string;
+    labelColor?: string;
+}): LayoutFn;
+declare function grid(cells: LayoutFn[], opts: {
+    cols: number;
+    gap?: number;
+    rowGap?: number;
+}): LayoutFn;
+declare function scroll(content: LayoutFn, opts: {
+    maxHeight: number;
+    offset?: number;
+    scrollbarColor?: string;
+    onScroll?: (offset: number) => void;
+}): LayoutFn;
+declare function padding(content: LayoutFn, opts?: {
+    x?: number;
+    y?: number;
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}): LayoutFn;
 
 type Column<T extends Record<string, unknown> = Record<string, unknown>> = {
     key: keyof T & string;
@@ -159,6 +191,7 @@ type Column<T extends Record<string, unknown> = Record<string, unknown>> = {
     headerBold?: boolean;
     color?: string | ((value: unknown, row: T) => string | undefined);
     dim?: boolean | ((value: unknown, row: T) => boolean);
+    onClick?: (value: unknown, row: T) => void;
 };
 declare function table<T extends Record<string, unknown>>(columns: Column<T>[], data: T[], opts?: {
     borderColor?: string;
@@ -187,6 +220,37 @@ declare function badge(label: string, opts?: {
     onClick?: () => void;
     theme?: Theme;
 }): Segment;
+type KVPair = {
+    key: string;
+    value: string | Segment[];
+    keyColor?: string;
+    valueColor?: string;
+    onClick?: () => void;
+};
+declare function kv(pairs: KVPair[], opts?: {
+    separator?: string;
+    keyColor?: string;
+    valueColor?: string;
+    keyWidth?: number;
+}): LayoutFn;
+declare function callout(content: LayoutFn | string, opts?: {
+    color?: string;
+    accent?: string;
+    label?: string;
+}): LayoutFn;
+declare function checkbox(checked: boolean, label: string, opts?: {
+    color?: string;
+    checkColor?: string;
+    onClick?: () => void;
+}): LayoutFn;
+declare function inputField(value: string, opts?: {
+    placeholder?: string;
+    width?: number;
+    focused?: boolean;
+    color?: string;
+    borderColor?: string;
+    onClick?: () => void;
+}): LayoutFn;
 
 type JsonNode = {
     type: "vstack";
@@ -243,6 +307,7 @@ declare function fromJsonNode(node: JsonNode): LayoutFn;
 
 type TreeNode = {
     label: string;
+    onClick?: () => void;
     children?: TreeNode[];
 };
 declare function tree(data: TreeNode[], opts?: {
@@ -250,7 +315,12 @@ declare function tree(data: TreeNode[], opts?: {
     branchColor?: string;
     leafColor?: string;
 }): LayoutFn;
-declare function list(items: string[], opts?: {
+type ListItem = string | {
+    text: string;
+    color?: string;
+    onClick?: () => void;
+};
+declare function list(items: ListItem[], opts?: {
     ordered?: boolean;
     bulletColor?: string;
     color?: string;
@@ -272,12 +342,26 @@ declare function code(source: string, opts?: {
     copyable?: boolean;
     action?: BoxAction;
 }): LayoutFn;
-declare function diff(value: string, opts?: {
+declare function unifiedDiff(value: string, opts?: {
     addColor?: string;
     removeColor?: string;
     metaColor?: string;
     theme?: Theme;
 }): LayoutFn;
+declare function computeDiff(before: string, after: string, opts?: {
+    context?: number;
+    addColor?: string;
+    removeColor?: string;
+    metaColor?: string;
+    theme?: Theme;
+}): LayoutFn;
+
+declare function chart(data: number[], opts?: {
+    height?: number;
+    color?: string;
+    axisColor?: string;
+    fill?: boolean;
+}): LayoutFn;
 
 type DocumentSource = {
     format: "markdown";
@@ -409,6 +493,7 @@ type TBoxProps = BaseProps & {
 };
 type TSeparatorProps = {
     color?: string;
+    char?: string;
 };
 type TRawProps = {
     text?: string;
@@ -472,6 +557,15 @@ type TSpanProps = {
     dim?: boolean;
     inverted?: boolean;
     blink?: boolean;
+    onClick?: () => void;
+};
+type TPadProps = BaseProps & {
+    x?: number;
+    y?: number;
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
 };
 type TLayoutProps = {
     layout: LayoutFn;
@@ -490,12 +584,20 @@ type TCodeProps = {
     action?: BoxAction;
     copyable?: boolean;
 };
-type TDiffProps = {
+type TUnifiedDiffProps = {
     value: string;
     addColor?: string;
     removeColor?: string;
     metaColor?: string;
 };
+type TDiffComputeProps = {
+    before: string;
+    after: string;
+    context?: number;
+    addColor?: string;
+    removeColor?: string;
+    metaColor?: string;
+};
 type TBarProps = {
     label: string;
     value: number;
@@ -507,7 +609,7 @@ type TSparkProps = {
     color?: string;
 };
 type TListProps = {
-    items: string[];
+    items: ListItem[];
     ordered?: boolean;
     bulletColor?: string;
     color?: string;
@@ -517,6 +619,8 @@ type TButtonProps = {
     onClick?: () => void;
     color?: string;
     bg?: string;
+    bold?: boolean;
+    dim?: boolean;
 };
 type RenderTermOptions = {
     theme?: Theme;
@@ -537,10 +641,28 @@ declare function TBox({ children, title, borderColor, gap, action }: TBoxProps):
     gap: number | undefined;
     action: BoxAction | undefined;
 }, string | react.JSXElementConstructor<any>>;
-declare function TSeparator({ color }: TSeparatorProps): react.ReactElement<{
+declare function TSeparator({ color, char }: TSeparatorProps): react.ReactElement<{
     color: string | undefined;
+    char: string | undefined;
+}, string | react.JSXElementConstructor<any>>;
+type TBlankProps = {
+    lines?: number;
+};
+declare function TBlank({ lines }?: TBlankProps): react.ReactElement<{
+    lines: number | undefined;
 }, string | react.JSXElementConstructor<any>>;
-declare function TBlank(): react.DOMElement<{}, Element>;
+type TBadgeProps = {
+    label: string;
+    color?: string;
+    bg?: string;
+    onClick?: () => void;
+};
+declare function TBadge({ label, color, bg, onClick }: TBadgeProps): react.DOMElement<{
+    label: string;
+    color: string | undefined;
+    bg: string | undefined;
+    onClick: (() => void) | undefined;
+}, Element>;
 declare function TRaw({ children, text, color, bg, bold, dim, blink, inverted, onClick }: TRawProps): react.DOMElement<{
     text: string | undefined;
     color: string | undefined;
@@ -589,7 +711,7 @@ declare function THtml({ value, themeOverrides }: THtmlProps): react.ReactElemen
     themeOverrides: Partial<ThemeMarkdown> | undefined;
 }, string | react.JSXElementConstructor<any>>;
 declare function TLine({ children }: TLineProps): react.DOMElement<{}, Element>;
-declare function TSpan({ children, text, color, bg, bold, dim, inverted, blink }: TSpanProps): react.ReactElement<{
+declare function TSpan({ children, text, color, bg, bold, dim, inverted, blink, onClick }: TSpanProps): react.DOMElement<{
     text: string | undefined;
     color: string | undefined;
     bg: string | undefined;
@@ -597,6 +719,15 @@ declare function TSpan({ children, text, color, bg, bold, dim, inverted, blink }
     dim: boolean | undefined;
     inverted: boolean | undefined;
     blink: boolean | undefined;
+    onClick: (() => void) | undefined;
+}, Element>;
+declare function TPad({ children, x, y, top, bottom, left, right }: TPadProps): react.ReactElement<{
+    x: number | undefined;
+    y: number | undefined;
+    top: number | undefined;
+    bottom: number | undefined;
+    left: number | undefined;
+    right: number | undefined;
 }, string | react.JSXElementConstructor<any>>;
 declare function TLayout({ layout }: TLayoutProps): react.ReactElement<{
     layout: LayoutFn;
@@ -615,12 +746,20 @@ declare function TCode({ code, language, title, borderColor, action, copyable }:
     action: BoxAction | undefined;
     copyable: boolean | undefined;
 }, string | react.JSXElementConstructor<any>>;
-declare function TDiff({ value, addColor, removeColor, metaColor }: TDiffProps): react.ReactElement<{
+declare function TUnifiedDiff({ value, addColor, removeColor, metaColor }: TUnifiedDiffProps): react.ReactElement<{
     value: string;
     addColor: string | undefined;
     removeColor: string | undefined;
     metaColor: string | undefined;
 }, string | react.JSXElementConstructor<any>>;
+declare function TDiffCompute({ before, after, context, addColor, removeColor, metaColor }: TDiffComputeProps): react.ReactElement<{
+    before: string;
+    after: string;
+    context: number | undefined;
+    addColor: string | undefined;
+    removeColor: string | undefined;
+    metaColor: string | undefined;
+}, string | react.JSXElementConstructor<any>>;
 declare function TBar({ label, value, max, color }: TBarProps): react.ReactElement<{
     label: string;
     value: number;
@@ -632,16 +771,128 @@ declare function TSpark({ data, color }: TSparkProps): react.ReactElement<{
     color: string | undefined;
 }, string | react.JSXElementConstructor<any>>;
 declare function TList({ items, ordered, bulletColor, color }: TListProps): react.ReactElement<{
-    items: string[];
+    items: ListItem[];
     ordered: boolean | undefined;
     bulletColor: string | undefined;
     color: string | undefined;
 }, string | react.JSXElementConstructor<any>>;
-declare function TButton({ label, onClick, color, bg }: TButtonProps): react.DOMElement<{
+declare function TButton({ label, onClick, color, bg, bold, dim }: TButtonProps): react.DOMElement<{
     label: string;
     onClick: (() => void) | undefined;
     color: string | undefined;
     bg: string | undefined;
+    bold: boolean | undefined;
+    dim: boolean | undefined;
+}, Element>;
+type TDividerProps = {
+    label: string;
+    color?: string;
+    char?: string;
+    labelColor?: string;
+};
+declare function TDivider({ label, color, char, labelColor }: TDividerProps): react.ReactElement<{
+    label: string;
+    color: string | undefined;
+    char: string | undefined;
+    labelColor: string | undefined;
+}, string | react.JSXElementConstructor<any>>;
+type TKVProps = {
+    pairs: KVPair[];
+    separator?: string;
+    keyColor?: string;
+    valueColor?: string;
+    keyWidth?: number;
+};
+declare function TKV({ pairs, separator, keyColor, valueColor, keyWidth }: TKVProps): react.ReactElement<{
+    pairs: KVPair[];
+    separator: string | undefined;
+    keyColor: string | undefined;
+    valueColor: string | undefined;
+    keyWidth: number | undefined;
+}, string | react.JSXElementConstructor<any>>;
+type TCalloutProps = BaseProps & {
+    text?: string;
+    color?: string;
+    accent?: string;
+    label?: string;
+};
+declare function TCallout({ children, text, color, accent, label }: TCalloutProps): react.ReactElement<{
+    text: string | undefined;
+    color: string | undefined;
+    accent: string | undefined;
+    label: string | undefined;
+}, string | react.JSXElementConstructor<any>>;
+type TChartProps = {
+    data: number[];
+    height?: number;
+    color?: string;
+    axisColor?: string;
+    fill?: boolean;
+};
+declare function TChart({ data, height, color, axisColor, fill }: TChartProps): react.ReactElement<{
+    data: number[];
+    height: number | undefined;
+    color: string | undefined;
+    axisColor: string | undefined;
+    fill: boolean | undefined;
+}, string | react.JSXElementConstructor<any>>;
+type TScrollProps = BaseProps & {
+    maxHeight: number;
+    offset?: number;
+    onScroll?: (offset: number) => void;
+    scrollbarColor?: string;
+};
+declare function TScroll({ children, maxHeight, offset: controlledOffset, onScroll: externalOnScroll, scrollbarColor }: TScrollProps): react.ReactElement<{
+    maxHeight: number;
+    offset: number;
+    scrollbarColor: string | undefined;
+    onScroll: (newOffset: number) => void;
+}, string | react.JSXElementConstructor<any>>;
+type TGridProps = BaseProps & {
+    cols: number;
+    gap?: number;
+    rowGap?: number;
+};
+declare function TGrid({ children, cols, gap, rowGap }: TGridProps): react.ReactElement<{
+    cols: number;
+    gap: number | undefined;
+    rowGap: number | undefined;
+}, string | react.JSXElementConstructor<any>>;
+type TCheckboxProps = {
+    checked: boolean;
+    label: string;
+    color?: string;
+    checkColor?: string;
+    onChange?: (checked: boolean) => void;
+    onClick?: () => void;
+};
+declare function TCheckbox({ checked, label, color, checkColor, onChange, onClick }: TCheckboxProps): react.ReactElement<{
+    checked: boolean;
+    label: string;
+    color: string | undefined;
+    checkColor: string | undefined;
+    onChange: ((checked: boolean) => void) | undefined;
+    onClick: (() => void) | undefined;
+}, string | react.JSXElementConstructor<any>>;
+type TInputProps = {
+    value: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    placeholder?: string;
+    width?: number;
+    focused?: boolean;
+    color?: string;
+    borderColor?: string;
+    onClick?: () => void;
+};
+declare function TInput({ value, onChange, onSubmit, placeholder, width, focused: controlledFocused, color, borderColor, onClick }: TInputProps): react.DOMElement<{
+    value: string;
+    placeholder: string | undefined;
+    width: number | undefined;
+    focused: boolean;
+    color: string | undefined;
+    borderColor: string | undefined;
+    onClick: () => void;
 }, Element>;
 declare function renderTermReact(tree: ReactNode, opts?: RenderTermOptions): LayoutFn;
 
@@ -650,4 +901,4 @@ declare function useTick(ms?: number): number;
 declare function useTermWidth(ref: RefObject<HTMLElement | null>, fallback?: number): number;
 declare function useStreamingText(text: string, lerp?: number): string;
 
-export { type Block, type BoxAction, type Column, type DocumentSource, type JsonNode, type LayoutFn, type Line, type MarkdownThemeOverrides, type RenderTermOptions, type Segment, type Style, TBar, type TBarProps, TBlank, TBox, type TBoxProps, TButton, type TButtonProps, TCode, type TCodeProps, TDiff, type TDiffProps, THStack, type THStackProps, THtml, type THtmlProps, TJson, type TJsonProps, TLayout, type TLayoutProps, TLine, type TLineProps, TList, type TListProps, TMarkdown, type TMarkdownProps, TRaw, type TRawProps, TSeparator, type TSeparatorProps, TSpan, type TSpanProps, TSpark, type TSparkProps, TStatusbar, type TStatusbarProps, TTab, type TTabProps, TTable, type TTableProps, TTabs, type TTabsProps, TTree, type TTreeProps, TVStack, type TVStackProps, TermDocument, type TermDocumentProps, type TermThemeContextValue, TermThemeProvider, type TermThemeProviderProps, TermUI, type TermUIProps, type Theme, type ThemeComponents, type ThemeMarkdown, type ThemeMode, type ThemeModeTokens, type ThemePalette, type ThemePreference, type ThemeSemantic, type ThemeSpec, type ThemeSyntax, type ThemeValidationIssue, type ThemeValidationResult, type Token, type TokenType, type TreeNode, badge, bar, blank, box, builtinThemes, code, dark, defaultThemeSpec, diff, fromDocument, fromHtml, fromJson, fromJsonNode, fromMarkdown, hl, hstack, isTableLine, light, lines, list, pad, padLine, parseThemeSpec, preserveTableTag, renderTermReact, resolveTheme, resolveThemeMode, separator, spark, statusbar, table, tabs, themeToCssVars, tokenColor, tokenize, tree, useSpinner, useStreamingText, useTermTheme, useTermWidth, useTick, validateThemeSpec, vstack };
+export { type Block, type BoxAction, type Column, type DocumentSource, type JsonNode, type KVPair, type LayoutFn, type Line, type ListItem, type MarkdownThemeOverrides, type RenderTermOptions, type ScrollRegionMeta, type Segment, type Style, TBadge, type TBadgeProps, TBar, type TBarProps, TBlank, type TBlankProps, TBox, type TBoxProps, TButton, type TButtonProps, TCallout, type TCalloutProps, TChart, type TChartProps, TCheckbox, type TCheckboxProps, TCode, type TCodeProps, TDiffCompute, type TDiffComputeProps, TDivider, type TDividerProps, TGrid, type TGridProps, THStack, type THStackProps, THtml, type THtmlProps, TInput, type TInputProps, TJson, type TJsonProps, TKV, type TKVProps, TLayout, type TLayoutProps, TLine, type TLineProps, TList, type TListProps, TMarkdown, type TMarkdownProps, TPad, type TPadProps, TRaw, type TRawProps, TScroll, type TScrollProps, TSeparator, type TSeparatorProps, TSpan, type TSpanProps, TSpark, type TSparkProps, TStatusbar, type TStatusbarProps, TTab, type TTabProps, TTable, type TTableProps, TTabs, type TTabsProps, TTree, type TTreeProps, TUnifiedDiff, type TUnifiedDiffProps, TVStack, type TVStackProps, TermDocument, type TermDocumentProps, type TermThemeContextValue, TermThemeProvider, type TermThemeProviderProps, TermUI, type TermUIProps, type Theme, type ThemeComponents, type ThemeMarkdown, type ThemeMode, type ThemeModeTokens, type ThemePalette, type ThemePreference, type ThemeSemantic, type ThemeSpec, type ThemeSyntax, type ThemeValidationIssue, type ThemeValidationResult, type Token, type TokenType, type TreeNode, badge, bar, blank, box, builtinThemes, callout, chart, checkbox, code, computeDiff, dark, defaultThemeSpec, divider, fromDocument, fromHtml, fromJson, fromJsonNode, fromMarkdown, grid, hl, hstack, inputField, isTableLine, kv, light, lines, list, pad, padLine, padding, parseThemeSpec, preserveTableTag, renderTermReact, resolveTheme, resolveThemeMode, scroll, separator, spark, statusbar, table, tabs, themeToCssVars, tokenColor, tokenize, tree, truncate, unifiedDiff, useSpinner, useStreamingText, useTermTheme, useTermWidth, useTick, validateThemeSpec, vstack };