toolbench

A reusable development tools library for React applications. Provides a flexible, resizable dev tools panel with support for custom panels, console logging, and positioning.

Installation

npm install toolbench
# or
pnpm add toolbench
# or
yarn add toolbench

For local development, you can link it as a local dependency:

{
  "dependencies": {
    "toolbench": "file:../vids-mydevtools"
  }
}

Usage

Basic Usage with MyDevTools Component

import { MyDevTools } from 'toolbench';
import 'toolbench/styles'; // Import styles

function MyApp() {
  const panels = [
    {
      id: 'console',
      title: 'Console Log',
      content: <div>Console Log content</div>
    },
    {
      id: 'layout',
      title: 'Layout',
      content: <div>Layout panel content</div>
    }
  ];

  const logs = [
    { type: 'info', message: 'Application started', timestamp: Date.now() },
    { type: 'success', message: 'Data loaded', timestamp: Date.now() }
  ];

  return (
    <>
      <MyAppContent />
      <MyDevTools 
        panels={panels}
        logs={logs}
        storagePrefix="myApp"
        onDevToolStateChange={(state) => {
          console.log('Dev tools state:', state);
        }}
      />
    </>
  );
}

Using the HOC (Higher Order Component)

import { withDevTools } from 'toolbench';
import 'toolbench/styles'; // Import styles

function MyComponent({ devToolState }) {
  return <div>My Component</div>;
}

// Wrap your component with devtools
const MyComponentWithDevTools = withDevTools(MyComponent, {
  panels: [
    {
      id: 'console',
      title: 'Console Log',
      content: <div>Console Log content</div>
    }
  ],
  getLogs: (props) => {
    // Return logs based on component props
    return props.logs || [];
  },
  storagePrefix: 'myComponent',
  onDevToolStateChange: (state) => {
    console.log('Dev tools state changed:', state);
  }
});

export default MyComponentWithDevTools;

API Reference

MyDevTools Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | panels | Array<Panel> | [] | Array of panel objects to display | | logs | Array<Log> | [] | Array of console log entries | | storagePrefix | string | 'myDevTools' | Prefix for localStorage keys | | onDevToolStateChange | function | undefined | Callback when devtool state changes |

Panel Object

{
  id?: string;        // Optional unique ID (auto-generated if not provided)
  title: string;       // Panel title shown in tab
  content: ReactNode; // React component/element to render in panel
}

Log Object

{
  type?: 'info' | 'success' | 'warning' | 'error' | 'header' | 'section';
  message: string;
  data?: any;         // Optional data object (displayed as JSON)
  timestamp?: number; // Optional timestamp
}

withDevTools Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | panels | Array<Panel> | [] | Array of panel objects | | getLogs | function\|Array | () => [] | Function that returns logs or static array | | storagePrefix | string | 'myDevTools' | Prefix for localStorage keys | | onDevToolStateChange | function | undefined | Callback for state changes |

Features

• Resizable: Drag to resize the dev tools panel
• Positionable: Pin to bottom, left, or right
• Collapsible: Minimize to a small bar
• Split View: Split console separately from panels
• Persistent State: Settings saved to localStorage
• Console Logging: Built-in console with log types and formatting
• Custom Panels: Add any React component as a panel

Development

Building

npm run build

This will create a dist folder with the compiled library.

Local Development

When developing locally, you can link this package to your project:

1. In this directory, run npm link (or pnpm link)
2. In your project, run npm link toolbench (or pnpm link toolbench)

Or use a file path dependency as shown in the installation section above.

License

MIT