isw-innov-component

Shared UI component library for ISW Innovation projects.

Installation

npm install isw-innov-component

Setup

1. Configure Tailwind CSS

Add the package to your tailwind.config.js content array:

module.exports = {
  content: [
    // ... your other paths
    "./node_modules/isw-innov-component/dist/**/*.{js,mjs}",
  ],
  // ...
};

2. Import and use components

import { SchemeCard, Calendar, Button, SuccessModal } from "isw-innov-component";

Components

SchemeCard

A card component for displaying scheme information.

import { SchemeCard, SchemeItem, SchemeCardAction } from "isw-innov-component";

const actions: SchemeCardAction[] = [
  {
    label: "View Details",
    onClick: (item) => console.log(item),
  },
  {
    dynamicLabel: (item) => item.status === "active" ? "Disable" : "Enable",
    onClick: (item) => toggleStatus(item),
  },
];

<SchemeCard
  item={{
    name: "My Scheme",
    dateCreated: "2024-01-15",
    schemeCode: "001",
    qtbCode: "QTB001",
    status: "active",
  }}
  actions={actions}
  onPrimaryAction={(item) => viewOperators(item)}
  primaryActionLabel="View Operators"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | item | SchemeItem | required | The scheme data to display | | actions | SchemeCardAction[] | [] | Dropdown menu actions | | onPrimaryAction | (item) => void | - | Primary button handler | | primaryActionLabel | string | "View Operators" | Primary button text | | showMenu | boolean | true | Show/hide dropdown menu | | showPrimaryButton | boolean | true | Show/hide primary button | | customFields | SchemeCardField[] | - | Override default fields | | ImageComponent | Component | <img> | Custom image component (e.g., Next.js Image) |

Calendar

A date picker calendar component.

import { Calendar } from "isw-innov-component";

const [date, setDate] = useState<Date>();

<Calendar
  selected={date}
  onSelect={setDate}
  minDate={new Date()}
  weekStartsOn={1}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | selected | Date | - | Currently selected date | | onSelect | (date) => void | - | Selection callback | | disabled | (date) => boolean | - | Disable specific dates | | minDate | Date | - | Minimum selectable date | | maxDate | Date | - | Maximum selectable date | | weekStartsOn | 0-6 | 0 | First day of week (0=Sun) |

SuccessModal

A modal component for displaying success, error, warning, or info messages.

import { SuccessModal } from "isw-innov-component";
import { useState } from "react";

const [isOpen, setIsOpen] = useState(false);

<SuccessModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Success!"
  message="Your operation was completed successfully."
  buttonText="Continue"
  variant="success"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | required | Whether the modal is open | | onClose | () => void | required | Callback when modal is closed | | title | string | "Success!" | Modal title | | message | string | required | Message to display | | icon | ReactNode | - | Optional custom icon | | buttonText | string | "Continue" | Button text | | onButtonClick | () => void | onClose | Optional callback when button is clicked | | variant | "success" \| "error" \| "warning" \| "info" | "success" | Modal variant |

Button

A customizable button component.

import { Button } from "isw-innov-component";

<Button variant="default" size="lg">
  Click me
</Button>

Variants

• default - Blue primary button
• destructive - Red danger button
• outline - Bordered button
• secondary - Gray secondary button
• ghost - Transparent button
• link - Link-style button

Using with Next.js Image

For Next.js projects, pass the Image component:

import Image from "next/image";
import { SchemeCard } from "isw-innov-component";

<SchemeCard
  item={schemeData}
  ImageComponent={Image}
  // ...
/>

Development

# Install dependencies
npm install

# Build
npm run build

# Watch mode
npm run dev

Publishing

# Build and publish
npm publish

For private packages, configure your npm registry or use npm organizations.