@shefing/quickfilter 1.0.13 → 1.0.17

package/README.md

@@ -4,9 +4,6 @@
 
 Transform your PayloadCMS admin experience with instant, intuitive filters that appear right where you need them. Say goodbye to clunky filter forms and hello to seamless data exploration!
 
-![QuickFilter Demo](./screenshots/quickfilter-demo.gif)
-_See QuickFilter in action - filtering happens instantly as you click!_
-
 ## ✨ Features
 
 | Feature                      | Description                                        | Icon                                                                 |
@@ -17,49 +14,50 @@ _See QuickFilter in action - filtering happens instantly as you click!_
 | **🌍 Internationalization**  | Full i18n support with RTL language compatibility  | ![i18n](https://img.shields.io/badge/Languages-6-purple)             |
 | **💾 Persistent State**      | Filters persist in localStorage and URL parameters | ![Persistent](https://img.shields.io/badge/State-Persistent-yellow)  |
 | **📅 Smart Date Filtering**  | Predefined ranges + custom date picker             | ![Dates](https://img.shields.io/badge/Dates-Smart-red)               |
-| **♿ Accessibility**         | Full keyboard navigation and screen reader support | ![A11y](https://img.shields.io/badge/A11y-Compliant-green)           |
 
 ### 🎥 See It In Action
 
-<details>
-<summary>📸 Click to view screenshots</summary>
-
-#### Collapsed State
-
-![Collapsed Filter](./screenshots/collapsed-state.png)
-_Clean, minimal button that shows active filter count_
-
-#### Expanded State
-
-![Expanded Filters](./screenshots/expanded-state.png)
-_All your filters laid out beautifully in customizable rows_
-
-#### Date Filter Options
+[Video placeholder]
 
-![Date Filter](./screenshots/date-filter.png)
-_Smart date presets + custom range picker_
+---
 
-#### Multi-Select in Action
+### 📋 Requirements
 
-![Multi Select](./screenshots/multi-select.png)
-_Powerful multi-select with search for large datasets_
+- ✅ PayloadCMS 3.0+
+- ✅ React 18+
+- ✅ TypeScript (recommended)
+- ✅ Tailwind CSS (for styling)
 
-</details>
+> 🚨 **Important**: Make sure your project has Tailwind CSS configured, as the plugin uses Tailwind classes for styling.
+> Add the following path to your tailwind.config.js under the content array:
 
-### 🎬 Video Demos
+```ts
+// tailwind.config.js
 
-> 💡 **Pro Tip**: Record a quick screen capture showing the filters in action and save as `quickfilter-demo.mp4` in the screenshots folder!
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}', // your app paths
+    './node_modules/@shefing/quickfilter/**/*.{js,ts,jsx,tsx}', // ✅ required for QuickFilter
+  ],
+  // ...rest of your config
+  // Here we scope the Tailwind not to intefere with the Admin UI  
+    plugins: [
+        scopedPreflightStyles({
+            isolationStrategy: isolateInsideOfContainer(['.useTw']),
+        }),
+    ],
+};
+```
 
-## 🛠️ Installation
+---
 
-### Quick Start (2 minutes!)
+### ⚡ Quick Start (2 minutes!)
 
 <details>
-<summary>📦 Step 1: Copy Plugin Files</summary>
+<summary>📦 Step 1: Install the Package</summary>
 
 ```bash
-# Copy the entire quickfilter directory to your plugins folder
-cp -r quickfilter/ your-project/src/plugins/
+pnpm add @shefing/quickfilter
 ```
 
 </details>
@@ -67,47 +65,45 @@ cp -r quickfilter/ your-project/src/plugins/
 <details>
 <summary>⚙️ Step 2: Configure PayloadCMS</summary>
 
-```typescript
-import { CollectionQuickFilterPlugin } from './src/plugins/quickfilter/CollectionQuickFilterPlugin';
+```ts
+// payload.config.ts
+
+import { CollectionQuickFilterPlugin } from '@shefing/quickfilter';
 
 export default buildConfig({
-  plugins: [
-    CollectionQuickFilterPlugin({
-      disabled: false, // 🎛️ Optional: disable the plugin
-    }),
-  ],
-  // ... rest of your config
+  plugins: [CollectionQuickFilterPlugin({})],
 });
 ```
 
 </details>
 
 <details>
-<summary>🎯 Step 3: Add Filters to Collections</summary>
+<summary>⚙️ Step 3: Configure Collections</summary>
 
 ```typescript
-// Add this to any collection where you want quick filters
-custom: {
-  filterList: [
-    ['status', 'role'], // 🔥 That's it! Filters are ready
-  ];
-}
+export const Users: CollectionConfig = {
+  slug: 'users',
+  custom: {
+    filterList: [
+      ['status', 'role'], // First row with two filters
+      ['createdAt'], // Second row with one filter
+      [
+        { name: 'department', width: '300px' }, // Custom width
+        'isActive',
+      ],
+    ],
+  },
+  // ... rest of your collection config
+};
 ```
 
 </details>
 
-### 📋 Requirements
+---
 
-- ✅ PayloadCMS 2.0+
-- ✅ React 18+
-- ✅ TypeScript (recommended)
-- ✅ Tailwind CSS (for styling)
 
-> 🚨 **Important**: Make sure your project has Tailwind CSS configured, as the plugin uses Tailwind classes for styling.
 
-## ⚙️ Configuration
-
-### 🎯 Basic Setup
+## ⚙️ Collections Configuration
 
 Transform any collection into a filtering powerhouse! Just add a `filterList` to your collection's `custom` property:
 
@@ -294,34 +290,6 @@ The magic happens right above your collection table! Here's what your users will
 
 ### 🎯 Filter Types in Detail
 
-<details>
-<summary>📅 <strong>Date Filter</strong> - Time travel made easy!</summary>
-
-**🚀 Predefined Magic:**
-
-```typescript
-🕐 Past Options:
-├── Yesterday
-├── Last Week
-├── Last Month
-└── All Past
-
-🔮 Future Options:
-├── Today
-├── Next Week
-├── Next Month
-└── All Future
-```
-
-**🎯 Custom Range Power:**
-
-- 📅 **From/To picker**: Select any date range
-- 🌍 **Localized**: Dates display in user's format
-- ⚡ **Smart defaults**: Common ranges are just one click away
-
-![Date Filter Demo](./screenshots/date-filter-demo.gif)
-
-</details>
 
 <details>
 <summary>📋 <strong>Select Filter</strong> - Intelligence that adapts</summary>
@@ -343,14 +311,6 @@ The magic happens right above your collection table! Here's what your users will
 └─────────────────────────┘
 ```
 
-**💪 Multi-select Support:**
-
-```typescript
-{
-  selectedValues: ['published', 'draft'],
-  type: 'some' // Shows items matching ANY selected value
-}
-```
 
 ![Select Filter Types](./screenshots/select-intelligence.png)
 
@@ -378,20 +338,6 @@ Perfect for boolean fields like:
 
 ## 🆚 Why Choose QuickFilter Over Regular PayloadCMS Filters?
 
-<details>
-<summary>🎯 <strong>Side-by-Side Comparison</strong></summary>
-
-| Feature             | 🔥 QuickFilter                    | 😐 Regular Filters             |
-| ------------------- | --------------------------------- | ------------------------------ |
-| **Speed**           | ⚡ Instant filtering              | 🐌 Page reload required        |
-| **UX**              | 🎨 Beautiful, intuitive UI        | 📝 Complex form interface      |
-| **Persistence**     | 💾 Remembers your filters         | 🔄 Resets on refresh           |
-| **Visual Feedback** | 👀 Clear active filter indicators | ❓ Hard to see what's filtered |
-| **Mobile**          | 📱 Fully responsive               | 📱 Limited mobile support      |
-| **Accessibility**   | ♿ Full keyboard + screen reader  | ⚠️ Basic accessibility         |
-
-</details>
-
 ### 🚀 **1. User Experience Revolution**
 
 <details>
@@ -404,42 +350,11 @@ Perfect for boolean fields like:
 | **💾 Memory**     | Filters persist across sessions             | Start over every time                      |
 | **🎯 Simplicity** | Click and filter                            | Navigate to filter page, fill form, submit |
 
-![UX Comparison](./screenshots/ux-comparison.png)
 
 </details>
 
 ### ⚡ **2. Performance That Scales**
 
-<details>
-<summary>Technical performance benefits</summary>
-
-```typescript
-// 🔥 QuickFilter generates optimized queries
-{
-  and: [
-    { status: { in: ['published', 'draft'] } },
-    { createdAt: { greater_than_equal: '2024-01-01' } },
-  ];
-}
-
-// 😐 vs manual filter complexity
-// Users struggle with query syntax
-// Multiple server round-trips
-// No client-side optimization
-```
-
-**📊 Performance Metrics:**
-
-- 🚀 **90% faster** filter application
-- 💾 **50% fewer** server requests
-- 🧠 **Zero learning curve** for end users
-
-</details>
-
-### ♿ **3. Accessibility First**
-
-<details>
-<summary>Built for everyone</summary>
 
 **🎯 What we support:**
 
@@ -449,77 +364,9 @@ Perfect for boolean fields like:
 - 🎨 **High contrast**: Works with accessibility themes
 - 📱 **Touch friendly**: Perfect for mobile and tablet users
 
-**🏆 Compliance:**
-
-- ✅ WCAG 2.1 AA compliant
-- ✅ Section 508 compliant
-- ✅ Keyboard-only navigation
-- ✅ Screen reader tested
-
-</details>
-
-### 👨‍💻 **4. Developer Experience**
-
-<details>
-<summary>Built by developers, for developers</summary>
-
-**🔥 What you'll love:**
-
-```typescript
-// ✨ Simple configuration
-custom: {
-  filterList: [
-    ['status', 'role'], // That's it!
-  ];
-}
-
-// 🚀 vs complex filter setup
-// No custom components needed
-// No backend modifications
-// Full TypeScript support
-// Zero learning curve
-```
-
-**🛠️ Developer Benefits:**
-
-- 📝 **5-minute setup**: Copy, paste, configure
-- 🔧 **Zero maintenance**: Works with existing fields
-- 🎯 **Type safe**: Full TypeScript integration
-- 🔌 **Extensible**: Easy to add custom filter types
-
 </details>
 
-### 🌟 **5. Advanced Features**
 
-<details>
-<summary>Features that make the difference</summary>
-
-**🌍 Multi-language Support:**
-
-```typescript
-// Built-in translations for 6 languages
-'en' | 'ar' | 'fr' | 'es' | 'zh' | 'he';
-// RTL support for Arabic and Hebrew
-```
-
-**🎨 Custom Layouts:**
-
-```typescript
-// Flexible row-based arrangement
-filterList: [
-  ['status', 'role', 'department'], // 3 in a row
-  [{ name: 'tags', width: '400px' }], // Custom width
-  ['isActive', 'isVerified'], // Side by side
-];
-```
-
-**🔗 URL Integration:**
-
-- 📋 **Bookmarkable**: Share filtered views via URL
-- 🔄 **Browser history**: Back/forward button support
-- 🔗 **Deep linking**: Direct links to filtered data
-
-</details>
 
 ## 🌍 Internationalization
 
@@ -540,6 +387,7 @@ The plugin speaks your users' language! Full translations included for:
 
 <details>
 <summary>🌐 <strong>Extend language support</strong></summary>
+PRs are welcomed
 
 ```typescript
 // In labels.ts, add your language
@@ -564,30 +412,8 @@ export const PLUGIN_LABELS = {
 };
 ```
 
-**🎯 Pro Tips:**
-
-- 🔄 **Auto-detection**: Plugin automatically uses user's browser language
-- 🛡️ **Fallback**: Falls back to English if translation missing
-- 🎨 **RTL Support**: Add `rtlLanguages` array for right-to-left languages
-
 </details>
 
-### 🎨 RTL Language Demo
-
-<details>
-<summary>📸 See RTL support in action</summary>
-
-![RTL Support](./screenshots/rtl-demo.png)
-_Arabic and Hebrew interfaces with proper right-to-left layout_
-
-**✨ RTL Features:**
-
-- 🔄 **Auto-detection**: Automatically switches to RTL layout
-- 🎯 **Proper alignment**: Text, buttons, and dropdowns align correctly
-- 📱 **Mobile optimized**: RTL works perfectly on mobile devices
-- 🎨 **Icon positioning**: Icons flip to match reading direction
-
-</details>
 
 ## 🔧 Advanced Configuration
 
@@ -649,201 +475,7 @@ CollectionQuickFilterPlugin({
 
 </details>
 
-### 🎨 Custom Styling
-
-<details>
-<summary>🎨 <strong>Make it match your brand</strong></summary>
-
-```css
-/* Override default styles in your CSS */
-.filter-container {
-  --filter-bg: #f8f9fa;
-  --filter-border: #e9ecef;
-  --filter-text: #495057;
-  --filter-active: #007bff;
-}
-
-/* Custom button styles */
-.filter-container .useTw button {
-  border-radius: 8px;
-  font-weight: 500;
-}
-
-/* Active filter highlighting */
-.filter-container .fill-current {
-  color: var(--filter-active);
-}
-```
-
-**🎨 Customization Options:**
-
-- 🎨 **Colors**: Match your admin theme
-- 📐 **Spacing**: Adjust padding and margins
-- 🔤 **Typography**: Custom fonts and sizes
-- 🎯 **Animations**: Add hover effects
-
-</details>
-
-## 🔧 Troubleshooting
-
-### 🚨 Common Issues & Quick Fixes
 
-<details>
-<summary>🔍 <strong>Filters not appearing</strong></summary>
-
-**❌ Problem:** QuickFilter button doesn't show up
-
-**✅ Solutions:**
-
-```typescript
-// ✅ Make sure filterList is in custom property
-export const MyCollection = {
-  slug: 'my-collection',
-  custom: {
-    filterList: [['status']], // ← Must be here!
-  },
-};
-
-// ❌ Wrong - this won't work
-export const MyCollection = {
-  slug: 'my-collection',
-  filterList: [['status']], // ← Wrong location
-};
-```
-
-**🔍 Debug checklist:**
-
-- ✅ Plugin is imported and added to config
-- ✅ `filterList` is in `custom` property
-- ✅ Field names match your collection fields
-- ✅ Collection has the fields you're trying to filter
-
-</details>
-
-<details>
-<summary>📅 <strong>Date filters not working</strong></summary>
-
-**❌ Problem:** Date filter shows but doesn't filter results
-
-**✅ Solutions:**
-
-```typescript
-// ✅ Correct date field configuration
-{
-  name: 'createdAt',
-  type: 'date' // ← Must be exactly 'date'
-}
-
-// ❌ These won't work with date filters
-{
-  name: 'createdAt',
-  type: 'text' // ← Wrong type
-}
-```
-
-**🎯 Pro tip:** Use browser dev tools to check the generated query in Network tab
-
-</details>
-
-<details>
-<summary>📋 <strong>Select options missing</strong></summary>
-
-**❌ Problem:** Select filter is empty or shows no options
-
-**✅ Solutions:**
-
-```typescript
-// ✅ Correct select field with options
-{
-  name: 'status',
-  type: 'select',
-  options: [ // ← Must have options array
-    { label: 'Active', value: 'active' },
-    { label: 'Inactive', value: 'inactive' }
-  ]
-}
-
-// ❌ Missing options won't work
-{
-  name: 'status',
-  type: 'select'
-  // ← No options array
-}
-```
-
-</details>
-
-<details>
-<summary>🎨 <strong>Styling issues</strong></summary>
-
-**❌ Problem:** Filters look broken or unstyled
-
-**✅ Solutions:**
-
-1. **Ensure Tailwind CSS is configured:**
-
-```javascript
-// tailwind.config.js
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './src/plugins/**/*.{js,ts,jsx,tsx}', // ← Include plugins
-  ],
-};
-```
-
-2. **Check CSS imports:**
-
-```typescript
-// Make sure Tailwind is imported in your app
-import 'tailwindcss/tailwind.css';
-```
-
-3. **Custom styling conflicts:**
-
-```css
-/* If you have custom styles, make sure they don't override */
-.filter-container .useTw {
-  /* Plugin styles have priority here */
-}
-```
-
-</details>
-
-### 🐛 Debug Mode
-
-<details>
-<summary>🔍 <strong>Enable detailed logging</strong></summary>
-
-**🎯 What to look for in console:**
-
-- `[QuickFilter] Loading filters for collection: users`
-- `[QuickFilter] Generated query:` + query object
-- `[QuickFilter] Filter state updated:` + state object
-
-</details>
-
-### 🆘 Still Having Issues?
-
-<details>
-<summary>📞 <strong>Get help</strong></summary>
-
-**Before asking for help, please:**
-
-1. ✅ **Check the console** for error messages
-2. ✅ **Enable debug mode** and share the logs
-3. ✅ **Verify your configuration** matches the examples
-4. ✅ **Test with a simple setup** first
-
-**When reporting issues, include:**
-
-- 🔧 Your PayloadCMS version
-- 📋 Your collection configuration
-- 🎯 Your filterList configuration
-- 🐛 Console error messages
-- 📸 Screenshots of the issue
-
-</details>
 
 ## Contributing
 
@@ -856,4 +488,4 @@ The plugin is designed to be extensible. To add new filter types:
 
 ## License
 
-This plugin is part of your PayloadCMS project and follows the same licensing terms.
+This plugin is licensed under the Apache License, Version 2.0.

package/dist/QuickFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilter.d.ts","sourceRoot":"","sources":["../src/QuickFilter.tsx"],"names":[],"mappings":"AAmQA,QAAA,MAAM,WAAW,0BAGd;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,CAAC,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,EAAE,CAAC;CAC5D,gCA0SA,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"QuickFilter.d.ts","sourceRoot":"","sources":["../src/QuickFilter.tsx"],"names":[],"mappings":"AA2QA,QAAA,MAAM,WAAW,0BAGd;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,CAAC,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,EAAE,CAAC;CAC5D,gCA0SA,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/QuickFilter.js

@@ -11,6 +11,13 @@ import { getDateRangeForOption } from './filters/utils/date-helpers';
 import { isEqual } from 'lodash';
 import { futureOptionKeys, getDateFilterOptions, pastOptionKeys } from './filters/constants/date-filter-options';
 import { Button } from './ui/button';
+// Helper function to get localized label
+const getLocalizedLabel = (label, locale)=>{
+    if (typeof label === 'object' && label !== null) {
+        return label[locale] || label['en'] || Object.values(label)[0] || '';
+    }
+    return label || '';
+};
 // Recursive function to find fields by name
 function findFieldsByName(fields, fieldNames) {
     const results = [];
@@ -425,7 +432,7 @@ const QuickFilter = ({ slug, filterList })=>{
                             } else if (selectValue.selectedValues.length === 1) {
                                 // Show the actual option name when only one is selected
                                 const selectedOption = field.options?.find((opt)=>opt.value === selectValue.selectedValues[0]);
-                                const optionLabel = selectedOption ? selectedOption.label : selectValue.selectedValues[0];
+                                const optionLabel = selectedOption ? getLocalizedLabel(selectedOption.label, locale) : selectValue.selectedValues[0];
                                 activeFilters.push(`${field.label} (${optionLabel})`);
                             } else {
                                 // Show count for multiple selections