@idds/react 1.6.14 → 1.6.16

package/README.md

@@ -229,7 +229,7 @@ const currentMode = getThemeMode();
 ### Confirmation Dialog
 
 ```jsx
-import { ConfirmationProvider, useConfirmation } from '@idds/react';
+import { ConfirmationProvider, useConfirmation, Button } from '@idds/react';
 
 // Wrap your app
 <ConfirmationProvider>
@@ -237,23 +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>
@@ -261,9 +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');
+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
@@ -275,7 +294,7 @@ import {
   encodeHtmlEntities,
   decodeHtmlEntities,
   sanitizeFileName,
-  containsDangerousPatterns
+  containsDangerousPatterns,
 } from '@idds/react';
 
 // Sanitize user input
@@ -291,7 +310,11 @@ if (!validation.isValid) {
 ### File Validation
 
 ```jsx
-import { validateFile, validateFileMagicNumber, formatFileSize } from '@idds/react';
+import {
+  validateFile,
+  validateFileMagicNumber,
+  formatFileSize,
+} from '@idds/react';
 
 // Validate file
 const result = validateFile(file, {
@@ -304,6 +327,7 @@ 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
@@ -311,7 +335,11 @@ Components use BEM-like naming conventions (e.g., `ina-button`, `ina-button--pri
 All components are fully typed and expose their prop types along with their sub-types (e.g. sizes, variants).
 
 ```tsx
-import { TextField, type TextFieldProps, type TextFieldSize } from '@idds/react';
+import {
+  TextField,
+  type TextFieldProps,
+  type TextFieldSize,
+} from '@idds/react';
 ```
 
 ## License