Werkbank

Werkbank is a modular, opinionated standard library for building desktop-quality React applications. It provides a cohesive set of primitives for state management, routing, layout, and user interaction, enforcing type safety and performance best practices.

Requirements

• Runtime: Node.js 18+ or compatible runtime.
• Framework: React 19+.
• Language: TypeScript 5.0+ (Strict mode recommended).

Core Concepts

Werkbank is composed of independent but interoperable modules designed to solve specific architectural challenges in complex web applications.

• Type Safety: Leverages TypeScript and Valibot to ensure runtime integrity for routes, forms, and state.

Modules

werkbank/component

A collection of unstyled, accessible UI primitives.

• ResizeableGrid: A layout container supporting draggable column/row resizing.
• Form: A type-safe form wrapper integrating Valibot schemas.
• Tabs, Button, Input: Standard interactive elements.

werkbank/router

A schema-first routing library. Routes are defined as data structures, ensuring all navigation paths are type-safe and predictable.

werkbank/state

Atomic state management primitives for handling complex application state outside the React render cycle.

werkbank/hook

A utility belt of React hooks for DOM interaction and side-effect management.

• useDrag: Handles pointer events for drag interactions.
• useFocusTrap: Manages focus within modal interfaces.
• useResizeObserver: Efficiently tracks element size changes.

werkbank/rpc

Utilities for type-safe communication between the main thread and Web Workers.

Installation

npm install werkbank

Usage

Layout (ResizeableGrid)

The ResizeableGrid component creates a layout with draggable dividers.

import { ResizeableGrid, GridArea } from 'werkbank/component/grid';

function AppLayout() {
  return (
    <ResizeableGrid defaultValue={{
      columns: ["200px", "1fr"],
      rows: ["auto"],
    }}>
      <GridArea>Sidebar Content</GridArea>
      <GridArea>Main Content</GridArea>
    </ResizeableGrid>
  );
}

Routing (createRouter)

Define routes using a configuration object and Valibot schemas for parameters.

import { createRouter } from 'werkbank/router';
import { string } from 'valibot';
import { HomePage, UserPage, SettingsPage } from './pages';

// Define Route Schema
const routeConfig = {
  home: ["/"],
  user: {
    path: ["/user/", string()],
    children: {
      settings: ["/settings"]
    }
  }
};

// Initialize Router
const router = createRouter(routeConfig, {
  home: { component: HomePage },
  user: {
    component: UserPage,
    children: {
      settings: { component: SettingsPage }
    }
  }
});

Forms (Form)

Create type-safe forms with validation schemas.

import { Form } from 'werkbank/component/form';
import { useFormFields } from 'werkbank/component/form/hooks';
import * as v from 'valibot';

const UserSchema = v.object({
  email: v.string([v.email()]),
  bio: v.string([v.minLength(10)])
});

function UserProfile() {
  const fields = useFormFields(UserSchema);

  return (
    <Form schema={UserSchema} onSubmit={(data) => console.log(data)}>
      <label>
        Email
        <input {...fields.email} />
      </label>
      <label>
        Bio
        <textarea {...fields.bio} />
      </label>
      <button type="submit">Save</button>
    </Form>
  );
}

License

MPL-2.0