abaabil

Abaabil Components

Abaabil provides a set of versatile and customizable UI components built with React. The components support different variants, sizes, and states, making them suitable for a wide range of use cases.

Installation

To install Abaabil components, use the following command:

npm install abaabil

Components

Button

A versatile and customizable button component.

import { Button } from 'abaabil';

const App = () => (
  <Button variant="primary" size="df">Primary Button</Button>
);

For more details, see the Button documentation.

ComboBox

A customizable dropdown selection component.

import { ComboBox } from 'abaabil';

const options = [
  { key: '1', label: 'Option 1', icon: 'icon1' },
  { key: '2', label: 'Option 2', icon: 'icon2' },
  { key: '3', label: 'Option 3', icon: 'icon3' },
];

const App = () => (
  <ComboBox options={options} placeholder="Select an option" />
);

For more details, see the ComboBox documentation.

Details

An expandable section component.

import { Details } from 'abaabil';

const App = () => (
  <Details summary="Primary Details" variant="primary">
    <p>This is the primary details content.</p>
  </Details>
);

For more details, see the Details documentation.

Dialog

A modal dialog component.

import { Dialog } from 'abaabil';

const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="Dialog Title">
        <p>This is the content of the dialog.</p>
      </Dialog>
    </div>
  );
};

For more details, see the Dialog documentation.

Icon

An SVG icon component.

import { Icon } from 'abaabil';

const App = () => (
  <Icon id="settings" size="df" />
);

For more details, see the Icon documentation.

Popover

A tooltip-like overlay component.

import { Popover } from 'abaabil';

const App = () => (
  <Popover content="This is a popover" position="top">
    <Button>Hover over me</Button>
  </Popover>
);

For more details, see the Popover documentation.

Tooltip

A tooltip component.

import { Tooltip } from 'abaabil';

const App = () => (
  <Tooltip content="This is a tooltip" position="top">
    <Button>Hover over me</Button>
  </Tooltip>
);

For more details, see the Tooltip documentation.

Exports

export { default as Button } from 'abaabil.button';
export { default as ComboBox } from 'abaabil.combobox';
export { default as Details } from 'abaabil.details';
export { default as Dialog } from 'abaabil.dialog';
export { default as Icon } from 'abaabil.icon';
export { default as Popover } from 'abaabil.popover';
export { default as Tooltip } from 'abaabil.tooltip';

These exports make it easy to import and use the components in your project. For example:

import { Button, ComboBox, Details, Dialog, Icon, Popover, Tooltip } from 'abaabil';

Documentation: Custom Utility Classes cp, sp, and df

Overview

In our design system, we have introduced three custom utility classes: cp, df, and sp. These classes are shorthand for Compact, Default, and Spacious, respectively. They are used to manage spacing, sizing, borders, shadows, and typography in a consistent and easily understandable way.

Why Use cp, df, and sp?

The abbreviations cp, df, and sp were chosen to provide a concise and memorable way to apply different levels of component spacing, size, and styling. This approach allows for a clear and systematic way to adjust the design elements according to their intended compactness, default state, or spaciousness.

• cp (Compact): Use this class when you need a more condensed or compact layout, ideal for elements that require minimal space.
• df (Default): The df class represents the standard or df sizing and spacing. It should be used for elements that require the default or most common layout properties.
• sp (Spacious): Apply the sp class for a more open and spacious layout, suitable for elements that need extra room or a more generous design.

Tailwind Configuration

The cp, df, and sp classes have been defined in the tailwind.config.js file to cover various CSS properties:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'selector',
  theme: {
    extend: {
      spacing: {
        'cp': '0.625rem',
        'cp/2': '0.3125rem',
        'df': '0.75rem',
        'df/2': '0.375rem',
        'sp': '0.875rem',
        'sp/2': '0.4375rem',
      },
      width: {
        'cp': '2.5rem',
        'df': '3rem',
        'sp': '3.5rem',
      },
      height: {
        'cp': '2.5rem',
        'df': '3rem',
        'sp': '3.5rem',
      },
      maxHeight: {
        screenHalf: '50vh',
      },
      borderWidth: {
        'cp': '2px',
        'df': '2px',
        'sp': '2px',
      },
      boxShadow: {
        'cp': '0 2px 4px 0 rgba(0, 0, 0, 0.05)',
        'df': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        'sp': '0 10px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -2px rgba(0, 0, 0, 0.05)',
      },
      dropShadow: {
        'cp': '0 2px 4px rgba(0, 0, 0, 0.05)',
        'df': '0 4px 6px rgba(0, 0, 0, 0.05)',
        'sp': '0 10px 20px rgba(0, 0, 0, 0.1)',
      },
      borderRadius: {
        'cp': '0.25rem',
        'df': '0.375rem',
        'sp': '0.5rem',
      },
      fontFamily: {
        sansSerif: ['var(--font-ubuntu)'],
        mono: ['var(--font-martian-mono)'],
      },
      fontSize: {
        'cp': '0.75rem',
        'df': '1rem',
        'sp': '1.25rem',
      },
      letterSpacing: {
        'cp': '0.025em',
        'df': '0.05em',
        'sp': '0.075em',
      },
    },
  },
  plugins: [],
};

Usage Guidelines

• Spacing: Use cp, df, and sp for padding and margin to achieve different levels of spacing. For example:

  • p-cp: Apply compact padding.
  • m-df: Apply default margin.
  • p-sp/2: Apply half of the spacious padding.

• Sizing: Apply these classes for width and height:

  • w-cp: Set the width to a compact size.
  • h-df: Set the height to the default size.
  • w-sp: Set the width to a spacious size.

• Borders and Shadows: The cp, df, and sp classes also define border width and box shadows to match the compact, default, and spacious themes.

• Typography: Adjust font size, letter spacing, and other typographic properties using these classes to maintain consistency across different component sizes.

Conclusion

The cp, df, and sp classes are designed to offer a streamlined, cohesive way to manage different component sizes and styles across your application. By using these classes, you can ensure a consistent design language while keeping your codebase clean and easy to maintain.