@torquedev/ui-kit

Zero-dependency, framework-agnostic UI descriptor library for the Torque framework. Bundles describe UI as plain { type, props, children } objects; the shell renders them.

Install

npm install github:torque-framework/torque-ui-kit

How It Works

Bundles never import React. They call ui-kit functions which return plain JavaScript objects. The shell (torque-shell-react) maps those objects to real MUI components at render time.

bundle author code -> ui-kit descriptors -> shell renderer -> MUI React -> DOM

This means bundles have zero framework dependencies, can be tested with plain Node, and stay decoupled from whatever rendering library the shell uses.

Core Primitive

The entire runtime is three lines:

export function createElement(type, props = {}, children = null) {
  return { type, props, children };
}

Every component function in this library is a thin wrapper around createElement.

Components

| Category | Functions | |----------|-----------| | Layout | Stack, Grid, Divider | | Data Display | Card, Badge, Text, Stat | | Inputs | Form, TextField, Select, Checkbox, Button | | Feedback | Alert, Dialog, Spinner | | Navigation | Tabs, Menu | | Data | DataTable | | Escape Hatch | Custom |

Usage

import { Stack, Text, Button } from '@torquedev/ui-kit';

export const views = {
  main({ data, actions }) {
    return Stack({ spacing: 2 }, [
      Text({ content: 'Hello from a bundle', variant: 'h5' }),
      Button({
        label: 'Refresh',
        variant: 'contained',
        onClick: () => actions.refresh(),
      }),
    ]);
  },
};

No React import. No JSX. The shell handles all rendering.

Utilities

• formatTimeAgo(date) -- human-readable relative timestamps (e.g. "just now", "5m ago", "3h ago").

Design

• Zero dependencies. Nothing to install, nothing to break.
• ESM-only. import / export everywhere.
• Tests with node --test. No test framework required.

License

MIT -- see LICENSE