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:

Build the package:
```
pnpm build
```
Create a package tarball:
```
pnpm pack
```

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