fib-ui

FIB UI

FIB UI is a collection of UI components and utilities designed to provide a consistent and flexible user interface for web applications across FIB products. This project is managed with Yarn Workspaces and uses Storybook for component documentation.

A React implementation of the Backoffice v2.0 Design System based on Radix Primitives and uses Tailwind CSS for styling.

Usage

A preview of the components can be found in the Storybook.

Example

yarn add @first-iraqi-bank/button

import { Button } from '@first-iraqi-bank/button';

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

Contributing

Values to be followed

• Accessibility: Ensure that all components are implemented according to the WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support. All components should be tested across a wide variety of screens and devices to ensure the best experience possible for all users.

• Adaptive – All components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive design principles to deliver a great experience, no matter the device.

• Internationalization – Support for right-to-left languages should be included out of the box. This includes automatic adjustments to layout, text alignment, spacing, and other visual elements to provide a seamless experience for RTL users.

• Customizable – Components should support custom theming, flexible color schemes, and typography settings to allow the design system to be tailored to match the different branding needs of the application. (like personal, business, corporate backoffice applications)

Release Process

Testing

Since FIB UI is built on top of Radix Primitives, which are extensively tested, you can rely on their robustness and reliability. However, if specific needs or customizations arise, additional testing may be required to ensure the components meet your application's requirements.