@saifraza/ui

Shared UI component library for ACS microfrontends.

Installation

This package is part of the monorepo workspace. It's automatically linked when you run yarn install from the root.

Usage

import { Button, Modal, Table, Loader } from '@saifraza/ui';

function MyComponent() {
    return (
        <div>
            <Button variant="primary">Click me</Button>
            <Loader />
        </div>
    );
}

Tailwind Configuration

Since components use Tailwind utility classes, you need to include @saifraza/ui paths in your Tailwind config:

// tailwind.config.js
const getAcsUiContent = require('@saifraza/ui/tailwind.content');

module.exports = {
    content: [
        './src/**/*.{ts,tsx,js,jsx}',
        ...getAcsUiContent(),
    ],
    // ... rest of config
};

Building

yarn workspace @saifraza/ui build

Available Components

• Buttons: Button, ButtonDefault
• Typography: Typography, Heading
• Forms: TextInput, Select, TextArea, DatePicker, MultiSelect, Checkbox
• Feedback: Modal, Loader, Chip, Timeline
• Data Display: Table, Card, StatCard, InfoCard, Avatar
• Layout: PageHeader, SearchInput, QuickLinkCard, ThemeToggle
• Navigation: Tabs, Stepper
• Error Handling: RemoteModuleErrorBoundary

Typography Components

Typography

Use the Typography component for all body text, labels, captions, and small text elements.

Props:

• variant: 'body1' | 'body2' | 'caption' | 'overline' (default: 'body1')
• color: 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'success' | 'error' | 'warning' | 'brand-primary' | 'brand-secondary' (default: 'primary')
• weight: 'normal' | 'medium' | 'semibold' | 'bold' (default: 'normal')
• align: 'left' | 'center' | 'right' | 'justify' (default: 'left')
• as: 'p' | 'span' | 'div' | 'label' (default: 'p')

Examples:

import { Typography } from '@saifraza/ui';

// Regular body text
<Typography variant="body1" color="primary">
  This is regular body text
</Typography>

// Small secondary text
<Typography variant="body2" color="secondary" weight="medium">
  Secondary information
</Typography>

// Caption text
<Typography variant="caption" color="tertiary">
  Small caption or helper text
</Typography>

// As a label
<Typography as="label" variant="body2" color="primary" weight="semibold">
  Form Field Label
</Typography>

// Branded text
<Typography variant="body1" color="brand-secondary" weight="semibold">
  Highlighted brand text
</Typography>

Heading

Use the Heading component for all page titles, section headers, and heading elements.

Props:

• level: 1 | 2 | 3 | 4 | 5 | 6 (required - determines h1-h6 tag)
• color: 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'success' | 'error' | 'warning' | 'brand-primary' | 'brand-secondary' (default: 'primary')
• weight: 'normal' | 'medium' | 'semibold' | 'bold' (default: 'semibold')

Examples:

import { Heading } from '@saifraza/ui';

// Page title (h1)
<Heading level={1} color="primary" weight="bold">
  Dashboard Overview
</Heading>

// Section header (h2)
<Heading level={2} color="secondary">
  Recent Activity
</Heading>

// Card title (h3)
<Heading level={3} color="brand-primary" weight="semibold">
  User Statistics
</Heading>

// Subsection (h4)
<Heading level={4} color="tertiary">
  Additional Details
</Heading>

Color Integration: Both components integrate seamlessly with the centralized color system from @saifraza/config/colors.css. All color props map directly to the CSS custom properties, ensuring consistent theming and automatic dark mode support.