@idds/react 1.6.12 → 1.6.14

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,75 +205,27 @@ setBrandTheme('bgn'); // or 'inagov', 'inaku', 'inapas', 'bkn', 'lan', 'panrb'
 
 // Use default theme
 setBrandTheme('default');
-
-// Remove brand theme (use default)
-setBrandTheme(null);
 ```
 
-### Available Brand Themes
+### Theme Mode (Light/Dark)
 
-- `'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:
+You can globally set or toggle the theme mode between light and dark:
 
 ```jsx
-import { setCustomTheme } from '@idds/react';
-
-setCustomTheme({
-  name: 'custom',
-  colors: {
-    primary500: '#0968f6',
-    primary600: '#0754c4',
-    // ... other color tokens
-  },
-});
-```
+import { setThemeMode, toggleThemeMode, getThemeMode } from '@idds/react';
 
-### Theme Utilities
+// Set specific mode
+setThemeMode('dark'); // or 'light'
 
-```jsx
-import {
-  getCurrentTheme,
-  getAvailableBrands,
-  resetTheme,
-  isValidBrand,
-} from '@idds/react';
-
-// Get current active theme
-const currentTheme = getCurrentTheme();
+// Toggle current mode
+toggleThemeMode();
 
-// Get available brand names
-const brands = getAvailableBrands();
-
-// 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
@@ -312,7 +244,6 @@ const handleDelete = async () => {
     title: 'Delete Item',
     message: 'Are you sure you want to delete this item?',
   });
-
   if (result) {
     // User confirmed
   }
@@ -331,11 +262,8 @@ import { ToastProvider, useToast } from '@idds/react';
 
 // Use in components
 const toast = useToast();
-
 toast.success('Operation completed successfully!');
 toast.error('An error occurred');
-toast.info('Information message');
-toast.warning('Warning message');
 ```
 
 ### Security Utilities
@@ -346,6 +274,8 @@ import {
   validateInput,
   encodeHtmlEntities,
   decodeHtmlEntities,
+  sanitizeFileName,
+  containsDangerousPatterns
 } from '@idds/react';
 
 // Sanitize user input
@@ -361,7 +291,7 @@ 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 +299,21 @@ 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>
-```
-
-> **Note:** Tailwind CSS is **optional**. The design system works perfectly without it. Components are fully styled and functional using only the included CSS.
+### 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 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