@idds/react

React UI component library for INA Digital Design System.

This package provides a comprehensive set of React components built with TypeScript. All styles are managed centrally in @idds/styles package and are not dependent on Tailwind CSS classes. Components use pure CSS with BEM-like naming conventions.

Installation

npm install @idds/react

Peer Dependencies

npm install react@>=18.0.0 react-dom@>=18.0.0

Quick Start

1. Import CSS

Import the styles in your application entry point:

// src/main.jsx or src/index.jsx
import '@idds/react/index.css';

2. Import and Use Components

import { Button, TextField } from '@idds/react';

function App() {
  return (
    <div>
      <Button variant="primary" size="md">
        Click me
      </Button>
      <TextField
        label="Email"
        placeholder="Enter your email"
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

Usage

Import Individual Components

import { Button, TextField, SelectDropdown, Modal } from '@idds/react';

Import All Components

import * as IDDS from '@idds/react';

// Use components
const { Button, TextField, SelectDropdown } = IDDS;

Import Color Tokens (Optional - for Tailwind CSS integration)

If you want to use INA Digital color tokens with Tailwind CSS in your project:

Tailwind CSS v3

For Tailwind CSS v3, import the TypeScript token files:

// tailwind.config.js
import iddsColorTokens from '@idds/react';
import bgnColorTokens from '@idds/react'; // Brand-specific tokens

export default {
  theme: {
    extend: {
      colors: {
        ...iddsColorTokens,
        ...bgnColorTokens,
      },
    },
  },
};

Tailwind CSS v4

For Tailwind CSS v4, import the CSS theme files directly in your main CSS file:

/* src/index.css or your main CSS file */

/* Tailwind CSS v4 */
@import 'tailwindcss';

/* INA Digital color tokens */
@import '@idds/styles/tailwind/css/idds.css';
@import '@idds/styles/tailwind/css/bgn.css'; /* Optional: brand theme */

Or use minified versions for production:

@import 'tailwindcss';
@import '@idds/styles/tailwind/css/idds.min.css';
@import '@idds/styles/tailwind/css/bgn.min.css';

Available Components

Form Components

• TextField - Text input with validation, clear button, and character count
• TextArea - Multi-line text input with autosize
• PasswordInput - Password input with show/hide toggle
• SelectDropdown - Dropdown select with search and multi-select support
• Checkbox - Checkbox input
• RadioInput - Radio button input
• DatePicker - Date picker with single, range, and multiple modes
• TimePicker - Time picker
• YearPicker - Year picker
• MonthPicker - Month picker
• PhoneInput - Phone number input with country selector
• OneTimePassword - OTP input component
• FileUpload - File upload with drag & drop and validation
• SingleFileUpload - Single file upload component
• Toggle - Toggle switch component

Layout Components

• Card - Card container component
• Accordion - Collapsible accordion component
• AccordionCard - Accordion with card styling
• AccordionGroup - Group of accordions
• Divider - Horizontal or vertical divider
• Stepper - Step indicator component
• Breadcrumb - Breadcrumb navigation
• TabHorizontal - Horizontal tabs
• TabVertical - Vertical tabs

Feedback Components

• Alert - Alert message component
• Toast - Toast notification (use with ToastProvider)
• ToastProvider - Provider for toast notifications
• Modal - Modal dialog component
• Drawer - Side drawer component
• BottomSheet - Bottom sheet component
• Tooltip - Tooltip component
• Skeleton - Loading skeleton component
• Spinner - Loading spinner component
• ProgressBar - Progress bar component
• LinearProgressIndicator - Linear progress indicator
• TableProgressBar - Progress bar for tables

Data Display Components

• Table - Advanced table with sorting, pagination, and editing
• FieldInputTable - Table with inline input fields
• MultipleChoiceGrid - Grid for multiple choice questions
• Avatar - Avatar component
• Badge - Badge component
• Chip - Chip component
• List - List component with variants
• ListItem - List item component
• ListItemAvatar - List item with avatar
• ListItemButton - List item as button
• ListItemIcon - List item with icon
• ListItemText - List item text
• ListSubheader - List subheader

Navigation Components

• Button - Button component with multiple variants
• ButtonGroup - Group of buttons
• ActionDropdown - Dropdown menu for actions
• Dropdown - General dropdown component
• Pagination - Pagination component
• InputSearch - Search input component

Other Components

• ThemeToggle - Dark/light theme toggle
• Collapse - Collapsible content component

Theme System

Setting Brand Theme

The design system supports multiple brand themes. You can switch between them programmatically:

import { setBrandTheme } from '@idds/react';

// Set brand theme
setBrandTheme('bgn'); // or 'inagov', 'inaku', 'inapas', 'bkn', 'lan', 'panrb'

// Use default theme
setBrandTheme('default');

Theme Mode (Light/Dark)

You can globally set or toggle the theme mode between light and dark:

import { setThemeMode, toggleThemeMode, getThemeMode } from '@idds/react';

// Set specific mode
setThemeMode('dark'); // or 'light'

// Toggle current mode
toggleThemeMode();

// Get current mode
const currentMode = getThemeMode();

Utilities

Confirmation Dialog

import { ConfirmationProvider, useConfirmation, Button } from '@idds/react';

// Wrap your app
<ConfirmationProvider>
  <App />
</ConfirmationProvider>;

// Use in components
export default function DeleteItem() {
  const { confirm } = useConfirmation();

  const handleDelete = async () => {
    const isConfirmed = await confirm({
      title: 'Hapus Data?',
      message: 'Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.',
      confirmText: 'Hapus',
      cancelText: 'Batal',
      confirmClassName: 'bg-red-600 hover:bg-red-700 text-white', // Custom class for confirm button
    });

    if (isConfirmed) {
      console.log('User confirmed deletion');
    }
  };

  return <Button onClick={handleDelete} className="bg-red-600 hover:bg-red-700 text-white border-none">Hapus Item</Button>;
}

Toast Notifications

import { ToastProvider, useToast, Button } from '@idds/react';

// Wrap your app
<ToastProvider>
  <App />
</ToastProvider>;

// Use in components
export default function MyComponent() {
  const { toast } = useToast();

  const handleShowToast = () => {
    toast({
      state: 'positive',
      title: 'Berhasil',
      description: 'Data berhasil disimpan',
      duration: 3000,
    });
  };

  return <Button onClick={handleShowToast}>Show Toast</Button>;
}

Security Utilities

import {
  sanitizeInput,
  validateInput,
  encodeHtmlEntities,
  decodeHtmlEntities,
  sanitizeFileName,
  containsDangerousPatterns,
} from '@idds/react';

// Sanitize user input
const sanitized = sanitizeInput(userInput);

// Validate input for XSS
const validation = validateInput(userInput);
if (!validation.isValid) {
  console.warn('Security threat detected:', validation.threats);
}

File Validation

import {
  validateFile,
  validateFileMagicNumber,
  formatFileSize,
} from '@idds/react';

// Validate file
const result = validateFile(file, {
  allowedTypes: 'image/*',
  maxSize: 5 * 1024 * 1024, // 5MB
});

// Format file size
const formatted = formatFileSize(1024 * 1024); // "1 MB"

Styling

Components use BEM-like naming conventions (e.g., ina-button, ina-button--primary). The @idds/styles package serves all necessary core styles. Tailwind integration is completely optional.

TypeScript Support

All components are fully typed and expose their prop types along with their sub-types (e.g. sizes, variants).

import {
  TextField,
  type TextFieldProps,
  type TextFieldSize,
} from '@idds/react';

License

MIT