# Multilingual Press Zone - Component Library

## Overview

This directory contains 29 reusable Vanilla JS components copied from the Comments Press Zone plugin and adapted for the Multilingual Press Zone plugin.

## Component List

### UI Components (25 from Comments Plugin)

1. **AnimatedItem.js** - Animated list item with fade-in/slide effects
2. **Button.js** - Reusable button component with variants (primary, secondary, ghost, success, danger)
3. **Card.js** - Card container component
4. **ColorField.js** - Color picker input field
5. **ColorPickerModal.js** - Modal for color selection
6. **EmptyState.js** - Empty state placeholder component
7. **ErrorState.js** - Error state display component
8. **Input.js** (FormField.js) - Form input field with label and validation
9. **GridTable.js** - CSS Grid-based table component
10. **InfractionModal.js** - Modal for displaying user infractions (moderation)
11. **Modal.js** - Reusable modal dialog component
12. **Placeholders.js** - Placeholder/skeleton loading states
13. **Select.js** - Select dropdown component
14. **Skeleton.js** - Loading skeleton component
15. **Spinner.js** - Loading spinner component
16. **StatCard.js** - Statistics card component for dashboard
17. **StatusFeedback.js** - Status feedback component (success/error/warning)
18. **Table.js** - Basic table component
19. **Tabs.js** - Tab navigation component
20. **TagInput.js** - Tag input component with autocomplete
21. **Textarea.js** - Textarea component
22. **TileSelect.js** - Tile-based selection component
23. **Toast.js** - Toast notification component
24. **Toggle.js** - Toggle switch component
25. **UserAutocomplete.js** - User search/autocomplete component

### Additional Multilingual Components (4 custom)

26. **Badge.js** - Badge component with language/status variants
27. **FlagPicker.js** - Language flag picker component
28. **LinkSelector.js** - Link selector for translations
29. **ProgressBar.js** - Progress bar component for translation jobs
30. **SortableList.js** - Drag-and-drop sortable list component

## SCSS Files

All components have corresponding SCSS files in `admin/src/styles/components/`:

- `_badge.scss`
- `_button.scss`
- `_card.scss`
- `_flag-picker.scss`
- `_input.scss`
- `_link-selector.scss`
- `_modal.scss`
- `_progress-bar.scss`
- `_sortable-list.scss`
- `_spinner.scss`
- `_stat-card.scss`
- `_table.scss`
- `_tabs.scss`
- `_toast.scss`
- `_toggle.scss`

## Usage

### Importing Components

```javascript
// Import individual components
import { Button, Modal, Toast } from './components/index.js';

// Or import specific component
import Button from './components/Button.js';
```

### Component Index

All components are exported from `index.js` for convenient importing:

```javascript
export { default as AnimatedItem } from './AnimatedItem.js';
export { default as Badge } from './Badge.js';
export { default as Button } from './Button.js';
// ... (all 30 components)
```

## Dependencies

### Core Dependencies

All components depend on:
- **Vanilla JavaScript** (ES6+)
- **WordPress admin styles** (for base styling)
- **Dark mode support** (via CSS variables and media queries)

### Component-Specific Dependencies

1. **Modal.js**
   - Focus trap functionality
   - Keyboard event handling (ESC key)

2. **Toast.js**
   - Auto-dismiss timer functionality

3. **UserAutocomplete.js**
   - WordPress REST API
   - User search endpoint

4. **InfractionModal.js**
   - Modal.js component
   - Badge.js component

5. **ColorPickerModal.js**
   - Modal.js component

6. **SortableList.js**
   - Drag and drop events
   - Touch event support

7. **LinkSelector.js**
   - WordPress media library integration

8. **FlagPicker.js**
   - Flag sprite images

## CSS Class Naming Convention

All components use the `multilingual-` prefix for CSS classes:

```css
.multilingual-btn { }
.multilingual-btn--primary { }
.multilingual-btn--lg { }

.multilingual-modal { }
.multilingual-modal__overlay { }
.multilingual-modal__container { }

.multilingual-toast { }
.multilingual-toast__item { }
```

This follows BEM methodology:
- **Block**: `.multilingual-component`
- **Element**: `.multilingual-component__element`
- **Modifier**: `.multilingual-component--modifier`

## Dark Mode Support

All components support dark mode through:
1. CSS media query: `@media (prefers-color-scheme: dark)`
2. WordPress admin color schemes: `body.admin-color-midnight`, `body.admin-color-ectoplasm`

Dark mode CSS variables:
```scss
$dark-bg: #1e1e1e;
$dark-surface: #2c2c2c;
$dark-text: #e4e4e4;
$dark-border: #3c3c3c;
```

## Accessibility

All components follow WordPress accessibility standards:
- Keyboard navigation support
- ARIA labels and roles
- Focus visible states
- Screen reader friendly

## Browser Support

Components are tested and work in:
- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)

## Migration Notes

### Namespace Changes

When copying from Comments Press Zone, the following namespace changes were made:

- CSS classes: `presszone-comments-*` → `multilingual-*`
- Text domain: `comments-press-zone` → `multilingual-press-zone`
- Function prefixes: `presszone_comments_*` → `multilingual_*`

### No Breaking Changes

All component APIs remain the same as in Comments Press Zone for easy maintenance and updates.

## Testing

To test components:

1. Import component in your page script
2. Initialize with required options
3. Verify functionality in both light and dark modes
4. Test keyboard navigation
5. Test responsive behavior

Example:
```javascript
import { Button, Toast } from './components/index.js';

// Create button
const btn = Button({
    text: 'Click me',
    variant: 'primary',
    onClick: () => {
        Toast.show({
            message: 'Button clicked!',
            type: 'success'
        });
    }
});

document.body.appendChild(btn);
```

## Future Enhancements

Potential improvements for components:
- TypeScript type definitions
- Unit tests with Jest
- Storybook documentation
- CSS-in-JS alternative
- Vue/React wrapper versions

## License

These components are part of the Multilingual Press Zone plugin and inherit the same GPL-2.0+ license.

## Credits

Components originally developed for Comments Press Zone plugin and adapted for Multilingual Press Zone.