tinky-ordered-list

A React-like ordered list component library for building beautiful terminal UIs.

tinky-ordered-list provides a fully-featured ordered list component for terminal applications built with the tinky framework. It supports nested lists, automatic numbering, and seamless theme integration.

Features

• 📝 Simple API - Intuitive JSX-based syntax for building lists
• 🎨 Themeable - Full integration with tinky-theme
• 🔀 Nested Lists - Automatic depth tracking for multi-level hierarchies
• 🔢 Auto-numbering - Automatic numbering at different levels (1., 2., 2.1., 2.1.1., etc.)
• 🎯 Type Safe - Built with TypeScript for excellent developer experience
• 🧪 Well Tested - Comprehensive test coverage with unit and integration tests
• 📚 Documented - Complete API documentation generated with TypeDoc

Installation

npm install tinky-ordered-list

# or

bun add tinky-ordered-list

# or

yarn add tinky-ordered-list

Quick Start

import { render } from "tinky";
import { OrderedList } from "tinky-ordered-list";
import { Text } from "tinky";

function App() {
  return (
    <OrderedList>
      <OrderedList.Item>
        <Text>First item</Text>
      </OrderedList.Item>
      <OrderedList.Item>
        <Text>Second item</Text>
      </OrderedList.Item>
      <OrderedList.Item>
        <Text>Third item</Text>
      </OrderedList.Item>
    </OrderedList>
  );
}

render(<App />);

Usage

Basic List

Create a simple numbered list:

import { OrderedList } from "tinky-ordered-list";
import { Text } from "tinky";

<OrderedList>
  <OrderedList.Item>
    <Text>Learn React</Text>
  </OrderedList.Item>
  <OrderedList.Item>
    <Text>Build CLI apps</Text>
  </OrderedList.Item>
  <OrderedList.Item>
    <Text>Deploy to production</Text>
  </OrderedList.Item>
</OrderedList>;

Nested Lists

Create hierarchical lists with automatic depth tracking:

<OrderedList>
  <OrderedList.Item>
    <Text>Frontend</Text>
    <OrderedList>
      <OrderedList.Item>
        <Text>React</Text>
      </OrderedList.Item>
      <OrderedList.Item>
        <Text>Vue</Text>
      </OrderedList.Item>
    </OrderedList>
  </OrderedList.Item>
  <OrderedList.Item>
    <Text>Backend</Text>
    <OrderedList>
      <OrderedList.Item>
        <Text>Node.js</Text>
      </OrderedList.Item>
    </OrderedList>
  </OrderedList.Item>
</OrderedList>

API Documentation

For complete API documentation, type definitions, and usage examples, visit the API Docs.

Components

OrderedList

The main list container component.

Props:

| Property | Type | Required | Description | | ---------- | ----------- | -------- | -------------------- | | children | ReactNode | No | List items to render |

Example:

<OrderedList>
  <OrderedList.Item>Item 1</OrderedList.Item>
  <OrderedList.Item>Item 2</OrderedList.Item>
</OrderedList>

OrderedListItem (via OrderedList.Item)

Individual list item component.

Props:

| Property | Type | Required | Description | | ---------- | ----------- | -------- | --------------------------------- | | children | ReactNode | Yes | Content to render within the item |

Example:

<OrderedList.Item>
  <Text>Item content</Text>
</OrderedList.Item>

Contexts

OrderedListContext

Tracks the nesting depth of ordered lists in the hierarchy.

Type: React.Context<{ depth: number }>

Example:

import { useContext } from "react";
import { OrderedListContext } from "tinky-ordered-list";

function DepthDisplay() {
  const { depth } = useContext(OrderedListContext);
  return <Text>Current depth: {depth}</Text>;
}

OrderedListItemContext

Provides the formatted number to list items.

Type: React.Context<{ number: string }>

Example:

import { useContext } from "react";
import { OrderedListItemContext } from "tinky-ordered-list";

function NumberDisplay() {
  const { number } = useContext(OrderedListItemContext);
  return <Text>Current number: {number}</Text>;
}

Number Formatting

The component automatically formats numbers based on nesting depth:

1. Root level: 1., 2., 3., etc.
2. First nesting: 1.1., 1.2., etc. (under item 1)
3. Second nesting: 2.1.1., 2.1.2., etc. (under item 2 at level 1)
4. Deep nesting: 2.1.1.1., etc. (multiple levels deep)

The numbers are automatically padded based on the maximum width needed for alignment.

Development

Setup

# Install dependencies
bun install

# Run tests
bun test

# Build the project
bun run build

# Lint code
bun run lint

# Generate documentation
bun run docs

Related Packages

• tinky - React for CLIs
• tinky-theme - Theme system for tinky
• tinky-test - Testing utilities for tinky

Acknowledgments

• ink-ui - Inspiration for OrderedList component by Vadim Demedes

License

MIT © ByteLand Technology Limited