@qiiqa/bob-ui-react-components

A comprehensive library of "dumb" React components built on top of @qiiqa/bob-ui. These components are designed for speed, consistency, and a premium feel.

Key Components

BobTextBox

A pure single-line input component.

• F4/Icon Support: Supports an icon prop that acts as a trigger for popups or search actions.
• Shortcuts: Standard F2 (Edit), F3 (Search), and F4 (Popup) event handlers.

BobMemoBox

A robust multiline editor.

• Single-Line Mode: Use singleLine={true} to display a compact view that opens a full editor in a BobDialog on F4.
• Recursive Editing: Uses itself multiline-mode within popups for a consistent editing experience.

BobDialog

A themed modal component.

• Supports titles, custom footers, and backdrop blurring.
• Fully integrated with the Qiiqa theming system.

And More...

• BobButton & BobButtonGroup
• BobCheckbox & BobSelectBox
• Specialized: BobAddressBox, BobPictureBox, BobChoiceComponent

Usage

import { BobTextBox, BobButton } from '@qiiqa/bob-ui-react-components';

function MyComponent() {
  return (
    <BobTextBox 
      id="search-input" 
      icon={<span>🔍</span>} 
      onF4={() => console.log('Search triggered')} 
    />
  );
}

Best Practices

• Every component requires a unique id for consistent CSS targeting and accessibility.
• Use BobButtonGroup for actions to ensure standard spacing and responsive behavior.

Refer to the apps/bob-ui-demo in the repository for a live demonstration of every component.