@wauasoft/family-hub-ui

A comprehensive UI component library for Family Hub, built with React and TypeScript, styled with Tailwind CSS.

🎨 Design System

This UI Kit is based on the Family Hub design system from the mockups:

• Colors: Dark theme with primary blue (#63b3ed), success green (#68d391), and error red (#fc8181)
• Typography: Inter font family
• Spacing: Consistent 15px border radius for cards, 10px for inputs
• Shadows: Layered shadows for depth

📦 Installation

From npm (when published)

npm install @wauasoft/family-hub-ui

From monorepo (local development)

The package is part of the monorepo and can be imported directly:

import { Button, Card, Input } from '@wauasoft/family-hub-ui';

Requirements

• React >= 18.0.0
• React DOM >= 18.0.0
• Tailwind CSS (for styling)

🧩 Components

Base Components

Button

import { Button } from '@wauasoft/family-hub-ui';

<Button variant='primary' size='md'>
  Click me
</Button>;

Props:

• variant: 'primary' | 'secondary' | 'danger' | 'ghost'
• size: 'sm' | 'md' | 'lg'
• fullWidth: boolean

Card

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from '@wauasoft/family-hub-ui';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>Card content goes here</CardContent>
</Card>;

Badge

import { Badge } from '@wauasoft/family-hub-ui';

<Badge variant='primary'>MVP</Badge>;

Variants: 'primary' | 'success' | 'warning' | 'error' | 'secondary'

Avatar

import { Avatar } from '@wauasoft/family-hub-ui';

<Avatar name='John Doe' size='md' />;

Sizes: 'sm' | 'md' | 'lg' | 'xl'

Form Components

Input

import { Input } from '@wauasoft/family-hub-ui';

<Input label='Email' type='email' placeholder='Enter your email' required />;

Textarea

import { Textarea } from '@wauasoft/family-hub-ui';

<Textarea label='Description' placeholder='Enter description' rows={4} />;

Select

import { Select } from '@wauasoft/family-hub-ui';

<Select label='Category'>
  <option value=''>Select a category</option>
  <option value='food'>Food</option>
  <option value='transport'>Transport</option>
</Select>;

Toggle

import { Toggle } from '@wauasoft/family-hub-ui';

<Toggle
  label='Email Notifications'
  description='Receive email updates'
  defaultChecked
/>;

FormGroup

import { FormGroup, Input } from '@wauasoft/family-hub-ui';

<FormGroup>
  <Input label='First Name' />
</FormGroup>;

Layout Components

Container

import { Container } from '@wauasoft/family-hub-ui';

<Container maxWidth='xl'>Content here</Container>;

Max Widths: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'

Divider

import { Divider } from '@wauasoft/family-hub-ui';

<Divider orientation='horizontal' />;

Typography Components

Heading

import { Heading } from '@wauasoft/family-hub-ui';

<Heading as='h1' size='xl'>
  Welcome
</Heading>;

Text

import { Text } from '@wauasoft/family-hub-ui';

<Text variant='secondary' size='sm'>
  Secondary text
</Text>;

Specialized Components

StatCard

import { StatCard } from '@wauasoft/family-hub-ui';

<StatCard
  label='Total Income'
  value={5240}
  variant='income'
  change={{ value: '12% from last month', isPositive: true }}
/>;

Link

import { Link } from '@wauasoft/family-hub-ui';

<Link href='/dashboard' variant='primary'>
  Go to Dashboard
</Link>;

ActionButton

import { ActionButton } from '@wauasoft/family-hub-ui';

<ActionButton icon='➕' label='Add Transaction' href='/transactions/new' />;

PageHeader

import { PageHeader, Button } from '@wauasoft/family-hub-ui';

<PageHeader
  title='Dashboard'
  subtitle='Welcome back, John!'
  action={<Button>Add New</Button>}
/>;

TransactionItem

import { TransactionItem } from '@wauasoft/family-hub-ui';

<TransactionItem
  icon='🍔'
  title='Grocery Shopping'
  description='Today • Food & Dining'
  amount={125.5}
  type='expense'
/>;

MemberItem

import { MemberItem, Button } from '@wauasoft/family-hub-ui';

<MemberItem
  name='John Doe'
  email='[email protected]'
  role='admin'
  actions={<Button size='sm'>Edit</Button>}
/>;

🎯 Usage Examples

Complete Form Example

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  FormGroup,
  Input,
  Textarea,
  Select,
  Button,
} from '@wauasoft/family-hub-ui';

function TransactionForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Add Transaction</CardTitle>
      </CardHeader>
      <CardContent>
        <form>
          <FormGroup>
            <Input label='Amount' type='number' required />
          </FormGroup>
          <FormGroup>
            <Select label='Category' required>
              <option value=''>Select category</option>
              <option value='food'>Food</option>
            </Select>
          </FormGroup>
          <FormGroup>
            <Textarea label='Description' />
          </FormGroup>
          <Button type='submit' fullWidth>
            Submit
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}

Dashboard Layout Example

import {
  Container,
  PageHeader,
  StatCard,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  TransactionItem,
} from '@wauasoft/family-hub-ui';

function Dashboard() {
  return (
    <Container>
      <PageHeader title='Dashboard' subtitle='Welcome back!' />

      <div className='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
        <StatCard
          label='Total Income'
          value={5240}
          variant='income'
          change={{ value: '12% from last month', isPositive: true }}
        />
        <StatCard
          label='Total Expenses'
          value={3850}
          variant='expense'
          change={{ value: '5% from last month', isPositive: false }}
        />
        <StatCard label='Balance' value={1390} variant='balance' />
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Recent Transactions</CardTitle>
        </CardHeader>
        <CardContent>
          <TransactionItem
            icon='🍔'
            title='Grocery Shopping'
            description='Today • Food & Dining'
            amount={125.5}
            type='expense'
          />
        </CardContent>
      </Card>
    </Container>
  );
}

🔧 Setup

Tailwind Configuration

Make sure your Tailwind config includes the UI package in the content paths:

// tailwind.config.ts
export default {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    '../../packages/ui/src/**/*.{ts,tsx}', // Add this
  ],
  // ... rest of config
};

📝 Notes

• All components are fully typed with TypeScript
• Components use Tailwind CSS classes with design system colors
• All components follow accessibility best practices
• Components are designed to be composable and flexible
• Follows the project's coding standards (functional components, TypeScript, etc.)

🚀 Development

# Build the UI package
cd packages/ui
npm run build

# Lint the UI package
npm run lint