@qiiqa/bob-ui-react

Welcome to the Bob UI React ecosystem. This package is the primary entry point for building applications using the Bob framework.

🤖 AI Developer Guide

If you are an AI assistant building a React application with this package, please read the following guides to ensure architectural consistency:

1. Getting Started - Installation, setup, and core philosophy.
2. Layout System - How to structure your pages and forms.
3. Component Reference - The building blocks for inputs, buttons, and interaction.
4. Themes & Styling - CSS variables and theme management.

🔑 Key Principles

• Zero HTML Tags: Never use <div>, <span>, <input>, or <button> for building pages. Always use the equivalent Bob components.
• Structured Layout: Use BobLayoutForm and its children for all form-based interfaces.
• Property Mapping: Ensure you use the specialized props like id, onF2, onF3, and onF4 correctly as described in the component reference.

Technical Overview

This package aggregates the following specialized modules:

• @qiiqa/bob-ui-react-components: Primitive UI elements.
• @qiiqa/bob-ui-react-layout: Responsive layout engine.
• @qiiqa/bob-ui-react-themes: Design system and variable management.

Infrastructure Features

• Focus Management: Centralized focus tracking and navigation via FocusContext.
• Hooks: Utility hooks like useFocusManager for handling directional navigation and keyboard shortcuts.

import { FocusProvider, useFocusManager } from '@qiiqa/bob-ui-react';

function MyGrid() {
  const { moveFocus } = useFocusManager();
  // ... implement grid navigation
}

See the apps/bob-ui-demo for advanced usage examples.