@opentui/react 0.1.11 → 0.1.13

package/README.md

@@ -1,6 +1,6 @@
 # @opentui/react
 
-A React renderer for building terminal user interfaces using OpenTUI core. Create rich, interactive console applications with familiar React patterns and components.
+A React renderer for building terminal user interfaces using [OpenTUI core](https://github.com/sst/opentui). Create rich, interactive console applications with familiar React patterns and components.
 
 ## Installation
 
@@ -15,12 +15,12 @@ import { render } from "@opentui/react"
 
 function App() {
   return (
-    <group>
+    <box>
       <text fg="#00FF00">Hello, Terminal!</text>
       <box title="Welcome" padding={2}>
         <text>Welcome to OpenTUI with React!"</text>
       </box>
-    </group>
+    </box>
   )
 }
 
@@ -35,7 +35,6 @@ OpenTUI React provides several built-in components that map to OpenTUI core rend
 
 - **`<text>`** - Display text with styling
 - **`<box>`** - Container with borders and layout
-- **`<group>`** - Layout container for organizing components
 - **`<input>`** - Text input field
 - **`<select>`** - Selection dropdown
 - **`<tab-select>`** - Tab-based selection
@@ -147,14 +146,14 @@ function MyComponent() {
   const { width, height } = useTerminalDimensions()
 
   return (
-    <group>
+    <box>
       <text>
         Terminal dimensions: {width}x{height}
       </text>
       <box style={{ width: Math.floor(width / 2), height: Math.floor(height / 3) }}>
         <text>Half-width, third-height box</text>
       </box>
-    </group>
+    </box>
   )
 }
 ```
@@ -172,7 +171,7 @@ import { bold, fg, t } from "@opentui/core"
 
 function TextExample() {
   return (
-    <group>
+    <box>
       {/* Simple text */}
       <text>Hello World</text>
 
@@ -181,7 +180,7 @@ function TextExample() {
 
       {/* Template literals */}
       <text>{t`${bold("Bold")} and ${fg("blue")("Blue")}`}</text>
-    </group>
+    </box>
   )
 }
 ```
@@ -193,7 +192,7 @@ Container with borders and layout capabilities.
 ```tsx
 function BoxExample() {
   return (
-    <group flexDirection="column">
+    <box flexDirection="column">
       {/* Basic box */}
       <box>
         <text>Simple box</text>
@@ -216,26 +215,7 @@ function BoxExample() {
       >
         <text>Centered content</text>
       </box>
-    </group>
-  )
-}
-```
-
-### Group Component
-
-Layout container for organizing multiple components.
-
-```tsx
-function GroupExample() {
-  return (
-    <group flexDirection="row">
-      <box>
-        <text>Left</text>
-      </box>
-      <box>
-        <text>Right</text>
-      </box>
-    </group>
+    </box>
   )
 }
 ```
@@ -318,7 +298,7 @@ function ASCIIFontExample() {
   })
 
   return (
-    <group style={{ paddingLeft: 1, paddingRight: 1 }}>
+    <box style={{ paddingLeft: 1, paddingRight: 1 }}>
       <box
         style={{
           height: 8,
@@ -356,7 +336,7 @@ function ASCIIFontExample() {
       </box>
 
       <ascii-font style={{ width, height }} text={text} font={font} />
-    </group>
+    </box>
   )
 }
 ```
@@ -390,7 +370,7 @@ function LoginForm() {
   }, [username, password])
 
   return (
-    <group style={{ padding: 2, flexDirection: "column" }}>
+    <box style={{ padding: 2, flexDirection: "column" }}>
       <text fg="#FFFF00">Login Form</text>
 
       <box title="Username" style={{ width: 40, height: 3, marginTop: 1 }}>
@@ -418,7 +398,7 @@ function LoginForm() {
       >
         {status.toUpperCase()}
       </text>
-    </group>
+    </box>
   )
 }
 
@@ -460,7 +440,7 @@ import { render } from "@opentui/react"
 
 function StyledTextShowcase() {
   return (
-    <group style={{ flexDirection: "column" }}>
+    <box style={{ flexDirection: "column" }}>
       <text>Simple text</text>
       <text>{bold("Bold text")}</text>
       <text>{underline("Underlined text")}</text>
@@ -468,7 +448,7 @@ function StyledTextShowcase() {
       <text>{blue("Blue text")}</text>
       <text>{bold(red("Bold red text"))}</text>
       <text>{t`${bold("Bold")} and ${blue("blue")} combined`}</text>
-    </group>
+    </box>
   )
 }
 
@@ -521,10 +501,10 @@ extend({ button: ButtonRenderable })
 // Use in JSX
 function App() {
   return (
-    <group>
+    <box>
       <button label="Click me!" style={{ backgroundColor: "blue" }} />
       <button label="Another button" style={{ backgroundColor: "green" }} />
-    </group>
+    </box>
   )
 }
 

package/index.js

@@ -3,7 +3,6 @@
 import {
   ASCIIFontRenderable,
   BoxRenderable,
-  GroupRenderable,
   InputRenderable,
   SelectRenderable,
   TabSelectRenderable,
@@ -12,7 +11,6 @@ import {
 var baseComponents = {
   box: BoxRenderable,
   text: TextRenderable,
-  group: GroupRenderable,
   input: InputRenderable,
   select: SelectRenderable,
   "ascii-font": ASCIIFontRenderable,
@@ -268,7 +266,7 @@ var hostConfig = {
     if (!components[type]) {
       throw new Error(`[Reconciler] Unknown component type: ${type}`);
     }
-    return new components[type](id, {});
+    return new components[type](rootContainerInstance.ctx, {});
   },
   appendChild(parent, child) {
     parent.add(child);
@@ -305,7 +303,8 @@ var hostConfig = {
   },
   createTextInstance(text, rootContainerInstance, hostContext) {
     const components = getComponentCatalogue();
-    return new components["text"](getNextId("text"), {
+    return new components["text"](rootContainerInstance.ctx, {
+      id: getNextId("text"),
       content: text
     });
   },

package/jsx-namespace.d.ts

@@ -2,7 +2,6 @@ import type * as React from "react"
 import type {
   AsciiFontProps,
   BoxProps,
-  GroupProps,
   InputProps,
   SelectProps,
   TabSelectProps,
@@ -28,7 +27,6 @@ export namespace JSX {
   interface IntrinsicElements extends React.JSX.IntrinsicElements, ExtendedIntrinsicElements<OpenTUIComponents> {
     box: BoxProps
     text: TextProps
-    group: GroupProps
     input: InputProps
     select: SelectProps
     "ascii-font": AsciiFontProps

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.1.11",
+    "@opentui/core": "0.1.13",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {

package/src/components/index.d.ts

@@ -1,9 +1,8 @@
-import { ASCIIFontRenderable, BoxRenderable, GroupRenderable, InputRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
+import { ASCIIFontRenderable, BoxRenderable, InputRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
 import type { RenderableConstructor } from "../types/components";
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
-    group: typeof GroupRenderable;
     input: typeof InputRenderable;
     select: typeof SelectRenderable;
     "ascii-font": typeof ASCIIFontRenderable;

package/src/reconciler/renderer.js

@@ -22,7 +22,6 @@ import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constant
 import {
   ASCIIFontRenderable,
   BoxRenderable,
-  GroupRenderable,
   InputRenderable,
   SelectRenderable,
   TabSelectRenderable,
@@ -31,7 +30,6 @@ import {
 var baseComponents = {
   box: BoxRenderable,
   text: TextRenderable,
-  group: GroupRenderable,
   input: InputRenderable,
   select: SelectRenderable,
   "ascii-font": ASCIIFontRenderable,
@@ -219,7 +217,7 @@ var hostConfig = {
     if (!components[type]) {
       throw new Error(`[Reconciler] Unknown component type: ${type}`);
     }
-    return new components[type](id, {});
+    return new components[type](rootContainerInstance.ctx, {});
   },
   appendChild(parent, child) {
     parent.add(child);
@@ -256,7 +254,8 @@ var hostConfig = {
   },
   createTextInstance(text, rootContainerInstance, hostContext) {
     const components = getComponentCatalogue();
-    return new components["text"](getNextId("text"), {
+    return new components["text"](rootContainerInstance.ctx, {
+      id: getNextId("text"),
       content: text
     });
   },

package/src/types/components.d.ts

@@ -1,26 +1,26 @@
-import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, GroupRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, SelectOption, SelectRenderable, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextChunk, TextOptions, TextRenderable } from "@opentui/core";
+import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, RenderContext, SelectOption, SelectRenderable, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextChunk, TextOptions, TextRenderable } from "@opentui/core";
 import type React from "react";
 /** Properties that should not be included in the style prop */
-export type NonStyledProps = "buffered" | "live" | "enableLayout" | "selectable";
+export type NonStyledProps = "id" | "buffered" | "live" | "enableLayout" | "selectable" | "renderAfter" | "renderBefore" | `on${string}`;
 /** React-specific props for all components */
 export type ReactProps<TRenderable = unknown> = {
     key?: React.Key;
     ref?: React.Ref<TRenderable>;
 };
 /** Base type for any renderable constructor */
-export type RenderableConstructor<TRenderable extends Renderable = Renderable> = new (id: string, options: any) => TRenderable;
+export type RenderableConstructor<TRenderable extends Renderable = Renderable> = new (ctx: RenderContext, options: any) => TRenderable;
 /** Extract the options type from a renderable constructor */
-type ExtractRenderableOptions<TConstructor> = TConstructor extends new (id: string, options: infer TOptions) => any ? TOptions : never;
+type ExtractRenderableOptions<TConstructor> = TConstructor extends new (ctx: RenderContext, options: infer TOptions) => any ? TOptions : never;
 /** Extract the renderable type from a constructor */
-type ExtractRenderable<TConstructor> = TConstructor extends new (id: string, options: any) => infer TRenderable ? TRenderable : never;
+type ExtractRenderable<TConstructor> = TConstructor extends new (ctx: RenderContext, options: any) => infer TRenderable ? TRenderable : never;
 /** Determine which properties should be excluded from styling for different renderable types */
-export type GetNonStyledProperties<TConstructor> = TConstructor extends RenderableConstructor<TextRenderable> ? NonStyledProps | "content" : TConstructor extends RenderableConstructor<BoxRenderable> ? NonStyledProps | "title" : TConstructor extends RenderableConstructor<ASCIIFontRenderable> ? NonStyledProps | "text" | "selectable" : NonStyledProps;
+export type GetNonStyledProperties<TConstructor> = TConstructor extends RenderableConstructor<TextRenderable> ? NonStyledProps | "content" : TConstructor extends RenderableConstructor<BoxRenderable> ? NonStyledProps | "title" : TConstructor extends RenderableConstructor<ASCIIFontRenderable> ? NonStyledProps | "text" | "selectable" : TConstructor extends RenderableConstructor<InputRenderable> ? NonStyledProps | "placeholder" | "value" : NonStyledProps;
 /** Base props for container components that accept children */
 type ContainerProps<TOptions> = TOptions & {
     children?: React.ReactNode;
 };
 /** Smart component props that automatically determine excluded properties */
-type ComponentProps<TOptions extends RenderableOptions, TRenderable extends Renderable> = TOptions & {
+type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends Renderable> = TOptions & {
     style?: Partial<Omit<TOptions, GetNonStyledProperties<RenderableConstructor<TRenderable>>>>;
 } & ReactProps<TRenderable>;
 /** Valid text content types for Text component children */
@@ -29,7 +29,6 @@ export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
     children?: TextChildren | StyledText | TextChunk | Array<TextChildren | StyledText | TextChunk>;
 };
 export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable>;
-export type GroupProps = ComponentProps<ContainerProps<RenderableOptions>, GroupRenderable>;
 export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
     focused?: boolean;
     onInput?: (value: string) => void;