SCF UI Components

A collection of reusable UI components from the SCF web application, built with React, TypeScript, and Tailwind CSS.

Installation

npm install scf-ui-components
# or
yarn add scf-ui-components
# or
pnpm add scf-ui-components

Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

npm install react react-dom react-i18next react-paginate react-router

Usage

Import Components

import { Button, FooterListing, cn } from 'scf-ui-components';
import 'scf-ui-components/dist/index.css'; // Import styles

Button Component

A flexible button component with multiple variants and sizes.

import { Button } from 'scf-ui-components';

function App() {
  return (
    <div>
      <Button variant="primary" size="md" onClick={() => console.log('Clicked!')}>
        Primary Button
      </Button>
      
      <Button variant="secondary" size="lg">
        Secondary Button
      </Button>
      
      <Button variant="outline" disabled>
        Disabled Button
      </Button>
    </div>
  );
}

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'outline' \| 'ghost' | 'primary' | Button style variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button size | | children | React.ReactNode | - | Button content | | className | string | - | Additional CSS classes | | disabled | boolean | false | Whether the button is disabled | | onClick | () => void | - | Click handler |

FooterListing Component

A pagination component with page size selection and navigation controls.

Basic Usage (No Router)

import { FooterListing } from 'scf-ui-components';
import { useState } from 'react';
import { I18nextProvider } from 'react-i18next';

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  return (
    <I18nextProvider i18n={i18n}>
      <FooterListing
        totalCount={250}
        tableName="items"
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
        pageSize={pageSize}
        setPageSize={setPageSize}
        navigateOnPageChange={false}
      />
    </I18nextProvider>
  );
}

With React Router Integration

import { FooterListing } from 'scf-ui-components';
import { useState } from 'react';
import { BrowserRouter, useNavigate, useLocation } from 'react-router';
import { I18nextProvider } from 'react-i18next';

function AppWithRouter() {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <I18nextProvider i18n={i18n}>
      <FooterListing
        totalCount={250}
        tableName="items"
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
        pageSize={pageSize}
        setPageSize={setPageSize}
        navigateOnPageChange={true}
        navigate={navigate}
        location={location}
      />
    </I18nextProvider>
  );
}

function App() {
  return (
    <BrowserRouter>
      <AppWithRouter />
    </BrowserRouter>
  );
}

FooterListing Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | totalCount | number | - | Total number of items | | tableName | string | - | Name of the items being paginated | | currentPage | number | - | Current page number (1-based) | | setCurrentPage | (page: number) => void | - | Function to update current page | | pageSize | number | - | Number of items per page | | setPageSize | (size: number) => void | - | Function to update page size | | isCollapsed | boolean | true | Whether the sidebar is collapsed | | className | string | - | Additional CSS classes | | navigateOnPageChange | boolean | false | Whether to update URL on page change | | sliderDependency | boolean | true | Whether to adjust position based on sidebar | | navigate | (path: string) => void | - | Optional router navigate function | | location | { pathname: string; search: string } | { pathname: '', search: '' } | Optional router location object |

Utility Functions

cn (className utility)

A utility function for conditionally joining class names using clsx and tailwind-merge.

import { cn } from 'scf-ui-components';

const className = cn(
  'base-class',
  condition && 'conditional-class',
  { 'object-class': anotherCondition }
);

Development

Local Testing

To test the package locally:

1. Build the package:

   pnpm build

2. Create a package tarball:

   pnpm pack

3. Install in another project:

   npm install /path/to/scf-ui-components-0.1.0.tgz

Running Tests

pnpm test        # Run tests once
pnpm test:watch  # Run tests in watch mode

Building

pnpm build       # Build the package
pnpm dev         # Build in watch mode

Requirements

• React 18+
• TypeScript 4.5+
• Tailwind CSS (for styling)

License

MIT