@bluefly/bfui v0.1.2

BFUI Component Library

A modern, accessible React component library based on Chakra UI for Bluefly.io projects.

Features

• 🧩 Reusable Components: A comprehensive set of UI components for React applications
• 🎨 Customizable Theme: Extends Chakra UI's theming system with Bluefly branding
• 📱 Responsive Design: Components work seamlessly across all device sizes
• ♿ Accessibility: Built with a11y in mind, following WCAG guidelines
• 🌗 Dark Mode Support: Ready for light and dark themes
• 📦 TypeScript Support: Fully typed components and utilities

Installation

# Using npm
npm install @bluefly / bfui

# Using yarn
yarn add @bluefly / bfui

Usage

React Applications

import React from 'react';
import ReactDOM from 'react - dom';
import { BFUIProvider, Button } from '@bluefly / bfui';

function App() {
  return (
    <BFUIProvider>
      <Button colorScheme="primary"> Click Me</Button>
    </BFUIProvider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Drupal Integration

The BFUI component library can also be used within Drupal projects. See the documentation in the drupal directory for setup instructions.

Available Components

• Button
• Card
• Form elements
• Layout components
• Typography components

Theme Customization

You can customize the theme by passing a customTheme prop to the BFUIProvider:

import { BFUIProvider } from '@bluefly / bfui';
import { extendTheme } from '@chakra - ui / react';

// Customize the default theme
const customTheme = extendTheme({
  colors: {
    primary: {
      500: '#007bff',
    },
  },
});

function App() {
  return <BFUIProvider customTheme={customTheme}>{/ * Your app content * /}</BFUIProvider>;
}

Utilities and Hooks

The library includes several utility functions and hooks to aid development:

Hooks

• useBreakpoint(): Get the current breakpoint
• useTheme(): Access theme values and utilities

Utilities

• Color manipulation: adjustBrightness(), hexToRgba(), etc.
• Style utilities: getSpacing(), classNames(), etc.
• Responsive helpers: responsiveStyle(), getValueForBreakpoint(), etc.

Development

Setup

# Clone the repository
git clone git@gitlab.blueflyio.com:BFUI.git
cd BFUI

# Install dependencies
npm install

# Start development server
npm run dev

Build

npm run build

Testing

npm test

License

MIT License