@idds/react 1.6.13 → 1.6.15

package/README.md

@@ -24,7 +24,7 @@ Import the styles in your application entry point:
 
 ```jsx
 // src/main.jsx or src/index.jsx
-import '@idds/react/style.css';
+import '@idds/react/index.css';
 ```
 
 ### 2. Import and Use Components
@@ -114,26 +114,6 @@ Or use minified versions for production:
 @import '@idds/styles/tailwind/css/bgn.min.css';
 ```
 
-Then you can use Tailwind utility classes with INA Digital colors:
-
-```jsx
-<div className="bg-blue-500 text-white p-4">
-  <p className="text-guide-500">This text uses guide-500 color</p>
-  <p className="text-neutral-500">This text uses neutral-500 color</p>
-</div>
-```
-
-**Available brand theme files:**
-
-- `@idds/styles/tailwind/css/idds.css` - Default theme
-- `@idds/styles/tailwind/css/inagov.css` - INAGov brand
-- `@idds/styles/tailwind/css/inaku.css` - INAKu brand
-- `@idds/styles/tailwind/css/inapas.css` - INAPas brand
-- `@idds/styles/tailwind/css/bgn.css` - BGN brand
-- `@idds/styles/tailwind/css/bkn.css` - BKN brand
-- `@idds/styles/tailwind/css/lan.css` - LAN brand
-- `@idds/styles/tailwind/css/panrb.css` - panrb brand
-
 ## Available Components
 
 ### Form Components
@@ -225,79 +205,31 @@ setBrandTheme('bgn'); // or 'inagov', 'inaku', 'inapas', 'bkn', 'lan', 'panrb'
 
 // Use default theme
 setBrandTheme('default');
-
-// Remove brand theme (use default)
-setBrandTheme(null);
 ```
 
-### Available Brand Themes
-
-- `'default'` - Default INA Digital theme
-- `'inagov'` - INAGov brand theme
-- `'inaku'` - INAKu brand theme
-- `'inapas'` - INAPas brand theme
-- `'bgn'` - BGN brand theme
-- `'bkn'` - BKN brand theme
-- `'lan'` - LAN brand theme
-- `'panrb'` - panrb brand theme
-
-### Custom Theme
-
-You can also set a custom theme:
-
-```jsx
-import { setCustomTheme } from '@idds/react';
-
-setCustomTheme({
-  name: 'custom',
-  colors: {
-    primary500: '#0968f6',
-    primary600: '#0754c4',
-    // ... other color tokens
-  },
-});
-```
+### Theme Mode (Light/Dark)
 
-### Theme Utilities
+You can globally set or toggle the theme mode between light and dark:
 
 ```jsx
-import {
-  getCurrentTheme,
-  getAvailableBrands,
-  resetTheme,
-  isValidBrand,
-} from '@idds/react';
+import { setThemeMode, toggleThemeMode, getThemeMode } from '@idds/react';
 
-// Get current active theme
-const currentTheme = getCurrentTheme();
+// Set specific mode
+setThemeMode('dark'); // or 'light'
 
-// Get available brand names
-const brands = getAvailableBrands();
+// Toggle current mode
+toggleThemeMode();
 
-// Reset to default theme
-resetTheme();
-
-// Validate brand name
-if (isValidBrand('bgn')) {
-  setBrandTheme('bgn');
-}
+// Get current mode
+const currentMode = getThemeMode();
 ```
 
 ## Utilities
 
-### Form Utilities
-
-```jsx
-import { useForm, FormProvider, FormField } from '@idds/react';
-
-// Form handling with validation
-const { handleSubmit, register, errors } = useForm();
-```
-
 ### Confirmation Dialog
 
 ```jsx
-import { ConfirmationProvider, useConfirmation } from '@idds/react';
+import { ConfirmationProvider, useConfirmation, Button } from '@idds/react';
 
 // Wrap your app
 <ConfirmationProvider>
@@ -305,24 +237,31 @@ import { ConfirmationProvider, useConfirmation } from '@idds/react';
 </ConfirmationProvider>;
 
 // Use in components
-const confirm = useConfirmation();
-
-const handleDelete = async () => {
-  const result = await confirm({
-    title: 'Delete Item',
-    message: 'Are you sure you want to delete this item?',
-  });
-
-  if (result) {
-    // User confirmed
-  }
-};
+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
 
 ```jsx
-import { ToastProvider, useToast } from '@idds/react';
+import { ToastProvider, useToast, Button } from '@idds/react';
 
 // Wrap your app
 <ToastProvider>
@@ -330,12 +269,20 @@ import { ToastProvider, useToast } from '@idds/react';
 </ToastProvider>;
 
 // Use in components
-const toast = useToast();
-
-toast.success('Operation completed successfully!');
-toast.error('An error occurred');
-toast.info('Information message');
-toast.warning('Warning message');
+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
@@ -346,6 +293,8 @@ import {
   validateInput,
   encodeHtmlEntities,
   decodeHtmlEntities,
+  sanitizeFileName,
+  containsDangerousPatterns,
 } from '@idds/react';
 
 // Sanitize user input
@@ -361,7 +310,11 @@ if (!validation.isValid) {
 ### File Validation
 
 ```jsx
-import { validateFile, validateMagicNumber, formatFileSize } from '@idds/react';
+import {
+  validateFile,
+  validateFileMagicNumber,
+  formatFileSize,
+} from '@idds/react';
 
 // Validate file
 const result = validateFile(file, {
@@ -369,199 +322,26 @@ const result = validateFile(file, {
   maxSize: 5 * 1024 * 1024, // 5MB
 });
 
-// Validate magic number (file signature)
-const magicResult = await validateMagicNumber(file, 'image/png');
-
 // Format file size
 const formatted = formatFileSize(1024 * 1024); // "1 MB"
 ```
 
-### Formatting Utilities
-
-```jsx
-import {
-  formattingThousand,
-  onlyAlphanumeric,
-  onlyNumericValue,
-  onlyDecimalNumber,
-} from '@idds/react';
-
-formattingThousand(1000000); // "1,000,000"
-onlyAlphanumeric('abc123!@#'); // "abc123"
-onlyNumericValue('123abc'); // "123"
-onlyDecimalNumber('123.45'); // "123.45"
-```
-
-## Component Examples
-
-### TextField
-
-```jsx
-import { TextField } from '@idds/react';
-
-<TextField
-  label="Email"
-  placeholder="Enter your email"
-  value={email}
-  onChange={setEmail}
-  type="email"
-  required
-  showClearButton
-  maxLength={100}
-  showCharCount
-/>;
-```
-
-### Button
-
-```jsx
-import { Button } from '@idds/react';
-
-<Button variant="primary" size="md" onClick={handleClick}>
-  Submit
-</Button>;
-```
-
-### SelectDropdown
-
-```jsx
-import { SelectDropdown } from '@idds/react';
-
-const options = [
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2' },
-];
-
-<SelectDropdown
-  label="Select Option"
-  options={options}
-  value={selected}
-  onChange={setSelected}
-  searchable
-  clearable
-/>;
-```
-
-### DatePicker
-
-```jsx
-import { DatePicker } from '@idds/react';
-
-<DatePicker
-  label="Select Date"
-  value={date}
-  onChange={setDate}
-  mode="single"
-  dateFormat="DD/MM/YYYY"
-  showIcon
-  showClearButton
-/>;
-```
-
-### Table
-
-```jsx
-import { Table } from '@idds/react';
-
-const columns = [
-  { key: 'name', label: 'Name' },
-  { key: 'email', label: 'Email' },
-];
-
-const data = [
-  { id: 1, name: 'John', email: 'john@example.com' },
-  { id: 2, name: 'Jane', email: 'jane@example.com' },
-];
-
-<Table columns={columns} data={data} />;
-```
-
-## Styling
-
-### CSS Classes
-
-Components use BEM-like naming conventions:
-
-- `ina-button` - Base button class
-- `ina-button--primary` - Primary variant
-- `ina-button--disabled` - Disabled state
-- `ina-text-field` - Text field component
-- `ina-text-field__input` - Input element
-- `ina-text-field__label` - Label element
-
-### Custom Styling
-
-You can override component styles using CSS:
-
-```css
-.ina-button--primary {
-  background-color: your-custom-color;
-}
-```
-
-### Using with Tailwind CSS (Optional)
-
-If you want to use Tailwind CSS utility classes alongside the design system:
-
-1. Install Tailwind CSS in your project
-2. Import color tokens:
-
-```js
-// tailwind.config.js
-import iddsColorTokens from '@idds/react';
-
-export default {
-  theme: {
-    extend: {
-      colors: iddsColorTokens,
-    },
-  },
-};
-```
-
-3. Use Tailwind classes for custom styling:
-
-```jsx
-<div className="bg-blue-500 text-white p-4">
-  <Button>Click me</Button>
-</div>
-```
+### Styling
 
-> **Note:** Tailwind CSS is **optional**. The design system works perfectly without it. Components are fully styled and functional using only the included CSS.
+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 with TypeScript:
+All components are fully typed and expose their prop types along with their sub-types (e.g. sizes, variants).
 
 ```tsx
-import { TextField, type TextFieldProps } from '@idds/react';
-
-const props: TextFieldProps = {
-  label: 'Email',
-  value: email,
-  onChange: setEmail,
-};
-```
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server
-npm run dev
-
-# Build for production
-npm run build
-
-# Type checking
-npm run type-check
-
-# Linting
-npm run lint
+import {
+  TextField,
+  type TextFieldProps,
+  type TextFieldSize,
+} from '@idds/react';
 ```
 
 ## License
 
-INA Digital © [Umar Faruq]
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/react",
-  "version": "1.6.13",
+  "version": "1.6.15",
   "publishConfig": {
     "access": "public"
   },
@@ -51,7 +51,7 @@
     "./*": "./dist/*"
   },
   "dependencies": {
-    "@idds/styles": "^1.6.13",
+    "@idds/styles": "^1.6.15",
     "clsx": "^2.1.1",
     "react-hook-form": "^7.60.0"
   },