metabuilder/redux/hooks

@metabuilder/hooks-core

Core React hooks for workflow UI applications built with Redux.

Key Feature: Service-independent hooks - use these with any Redux-compatible workflow implementation.

What's Included

Canvas Hooks

• useCanvasZoom - Manage canvas zoom level
• useCanvasPan - Manage canvas pan/translation
• useCanvasSelection - Manage selected items on canvas
• useCanvasSettings - Manage grid, snap, and other canvas settings
• useCanvasGridUtils - Grid calculations and utilities

Editor Hooks

• useEditor - Aggregated editor state
• useEditorZoom - Node editor zoom control
• useEditorPan - Node editor pan control
• useEditorNodes - Node selection and manipulation
• useEditorEdges - Edge/connection selection
• useEditorSelection - General selection state
• useEditorClipboard - Copy/paste operations
• useEditorHistory - Undo/redo history

UI Hooks

• useUI - Aggregated UI state
• useUIModals - Modal dialog state
• useUINotifications - Toast/notification management
• useUILoading - Global loading state
• useUITheme - Theme (light/dark) management
• useUISidebar - Sidebar visibility state

Utility Hooks

• useCanvasVirtualization - Virtual scrolling for large canvas
• useResponsiveSidebar - Responsive sidebar behavior
• usePasswordValidation - Password strength validation

Installation

npm install @metabuilder/hooks-core react react-redux @metabuilder/redux-slices

Usage

import { useCanvasZoom, useEditorSelection, useUIModals } from '@metabuilder/hooks-core'
import { Provider } from 'react-redux'
import { store } from '@metabuilder/redux-slices' // Or your own store

function WorkflowEditor() {
  const { zoom, zoomIn, zoomOut } = useCanvasZoom()
  const { selectedNodeIds, selectNode } = useEditorSelection()
  const { openModal } = useUIModals()

  return (
    <div>
      <button onClick={zoomIn}>Zoom In ({zoom.toFixed(0)}%)</button>
      <button onClick={zoomOut}>Zoom Out</button>
      {/* Your editor UI */}
    </div>
  )
}

export default function App() {
  return (
    <Provider store={store}>
      <WorkflowEditor />
    </Provider>
  )
}

Requirements

• React 18.0+
• Redux with workflow slices
• react-redux

Architecture

All hooks in this package:

• Are service-independent - no API calls, no database access
• Use Redux as source of truth - dispatch actions, select state
• Are framework-agnostic - work with any Redux setup
• Are type-safe - full TypeScript support
• Are composable - hooks are small and combine well

Future

These hooks will be extended with:

• Canvas operations (creation, deletion, layout)
• Workflow execution hooks
• Collaboration hooks (cursors, presence)
• Real-time sync hooks

Contributing

See main metabuilder repository for contribution guidelines.

License

MIT