@foodbuy-technology-solutions/component-library

A reusable React component library for FoodBuy Technology Solutions applications, featuring pre-styled components built with Radix UI primitives and consistent theming.

Features

• 🎨 Pre-compiled Styles - No Tailwind configuration needed in consuming apps
• 🔒 Scoped Styling - Components are isolated with .fb-theme class to prevent style conflicts
• 🎭 Theme Support - Light and dark mode built-in
• ♿ Accessible - Built on Radix UI primitives with ARIA compliance
• 📦 Tree-shakeable - Import only what you need
• 🎯 TypeScript - Full type safety

🛠️ For Consumers (Using the Library)

Prerequisites

• React ≥ 18
• React DOM ≥ 18

Note: Tailwind CSS is not required in consuming applications. All styles are pre-compiled and included.

Installation

npm install @foodbuy-technology-solutions/component-library

Usage

1. Import the Styles

Import the pre-compiled styles once in your app's entry point (e.g., main.tsx or App.tsx):

import "@foodbuy-technology-solutions/component-library/styles";

That's it! No Tailwind configuration needed. The library includes all necessary styles pre-compiled.

2. Use Components

Import and use components in your application:

import {
  AccordionList,
  EmptyState,
  Button,
  Tooltip
} from "@foodbuy-technology-solutions/component-library";

function MyApp() {
  return (
    <div>
      <EmptyState
        title="No items found"
        description="Try adjusting your filters"
      />

      <Button variant="primary">Click me</Button>

      <AccordionList
        items={[
          { id: "1", title: "Item 1", content: <div>Content 1</div> },
          { id: "2", title: "Item 2", content: <div>Content 2</div> }
        ]}
      />
    </div>
  );
}

Components are self-scoping - no manual wrapping required! They automatically include the .fb-theme class for style isolation.

🎨 Styling

How It Works

All components are automatically wrapped with the .fb-theme class, which:

• ✅ Scopes all Tailwind utilities to prevent conflicts
• ✅ Provides isolated CSS custom properties
• ✅ Prevents library styles from affecting your app
• ✅ Prevents your app styles from affecting library components

The library includes:

• Pre-compiled Tailwind utilities (scoped to .fb-theme)
• CSS custom properties for colors, spacing, and radii
• Light and dark mode styles
• All necessary animations and transitions

Font Customization

By default, components use:

Public Sans, Roboto, Segoe UI, Helvetica Neue, Arial, sans-serif

To use the intended font, add to your index.html:

<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

To use a different font, override in your CSS:

.fb-theme {
  font-family: "Your Custom Font", sans-serif !important;
}

Dark Mode

Components support dark mode automatically. Add the dark class to a parent element:

<div className="dark">
  {/* Components here will use dark mode */}
  <Button>Dark Mode Button</Button>
</div>

Or integrate with next-themes or your preferred dark mode solution.

🔧 TypeScript

This library is written in TypeScript and includes full type definitions. No additional @types packages needed.

import type { ButtonProps } from "@foodbuy-technology-solutions/component-library";

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

🚀 Development

Building

To build the library:

npm run build

To watch for changes during development:

npm run dev

Publishing

npm version patch  # or minor/major
npm publish