BI Lib

BI Lib is a React component library that provides components, hooks, helpers, and utilities to be used by Bixler Interactive, LLC. It is built with TypeScript and integrates with Material UI, React Query, React Table, and other modern React ecosystem tools. It is not intended for public use, but if you can figure out how it works, feel free to use it ;)

Installation

# Using yarn
yarn add bi-lib

# Using npm
npm install bi-lib

Peer Dependencies

This library has the following peer dependencies that you'll need to install in your project:

yarn add @emotion/react @emotion/styled @tanstack/react-query @tanstack/react-router @tanstack/react-store @tanstack/react-table react react-dom

Usage

Import components, hooks, and utilities from the library:

import { 
  DataTable, 
  Select, 
  CurrencyInput, 
  useDebounce, 
  useQuery, 
  createPersistentStore 
} from 'bi-lib';

function MyComponent() {
  // Using hooks
  const isMobile = useMediaQuery('(max-width: 768px)');
  const debouncedValue = useDebounce(value, 500);

  // Using the query hook
  const { data, isLoading, error } = useQuery({
    queryKey: ['data'],
    queryFn: fetchData,
  });

  return (
    <div>
      {isMobile ? 'Mobile View' : 'Desktop View'}

      {/* Using DataTable */}
      <DataTable 
        data={data}
        columns={columns}
        // ...other props
      />

      {/* Using input components */}
      <Select 
        options={options}
        // ...props
      />

      <CurrencyInput
        value={amount}
        onChange={handleAmountChange}
        // ...props
      />
    </div>
  );
}

Available Components

UI Components

• Dialog - A customizable dialog component
• ConfirmDialog - A dialog with confirm/cancel actions
• Error - Error display component
• IconButton - Button with icon
• Loader - Loading indicator
• QueryStatusRouter - Component for handling query states
• ScrollAnimation - Component for scroll-based animations

Data Table

• DataTable - Advanced data table with sorting, filtering, and pagination
• Related utilities for column definition and data manipulation

Input Components

• Select - Dropdown select component
• MultiSelect - Multiple selection component
• PasswordField - Secure password input with show/hide toggle
• CurrencyInput - Input field for currency values

Navigation

• Navbar - Navigation components for both desktop and mobile
• MobileNav - Mobile-specific navigation
• DesktopNav - Desktop-specific navigation
• ThemeModeSwitch - Toggle for light/dark theme
• UserNav - User navigation component

Utilities

Hooks

• useDebounce - Debounce values to limit rapid changes
• React Query hooks:
  • useQuery - Enhanced React Query hook with additional features
• React Store hooks:
  • createPersistentStore - Create a persistent store with local storage integration

Helpers

• Comparators - Utility functions for comparing values

Tokens

• Design tokens and constants for consistent styling

Development

Prerequisites

• Node.js
• Yarn (v4.6.0 or later)

Setup

# Install dependencies
yarn install

Scripts

• yarn build - Build the library using tsup
• yarn lint - Run ESLint
• yarn storybook - Start Storybook for component development and documentation

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT