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.

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.
• Performance: Prioritizes interaction responsiveness using direct DOM manipulation where appropriate (e.g., resizable grids) and efficient state updates.
• Desktop-Grade UX: Provides primitives for complex layouts, keyboard navigation, and focus management often found in desktop software.

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 columns={["200px", "1fr"]}>
      <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