{"_id":"@arcwp/gateway-filters","_rev":"3-ae97f317dc6b760e89a6a1ade75d637a","name":"@arcwp/gateway-filters","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@arcwp/gateway-filters","version":"1.0.0","keywords":["gateway","filters","react","wordpress","components","ui","select-filter","text-filter","range-filter","date-range-filter"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-filters@1.0.0","maintainers":[{"name":"arcwp","email":"support@arcwp.ca"}],"homepage":"https://github.com/arcwordpress/gateway-filters#readme","bugs":{"url":"https://github.com/arcwordpress/gateway-filters/issues"},"dist":{"shasum":"abd68e5324904878c97a63d7bd8ea781fc56f2ae","tarball":"https://registry.npmjs.org/@arcwp/gateway-filters/-/gateway-filters-1.0.0.tgz","fileCount":10,"integrity":"sha512-KhSPL2qB2q9QBsJAbjVUKV4vaUT0kkSET7+4cCIS0toj3rbHs0SqHFvj0cL2dgDxucd227A+s+5ap+7cfmd8SA==","signatures":[{"sig":"MEQCIAbmVOARms4bGSXvJL82oRNI7GqL7ySSlp6gHcOtCFIFAiAFZtRg4/V7mH3ARjGH06HsRkL5d0JTTRtsON+eEzTA9A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18131},"main":"src/index.js","gitHead":"0374c8df48e43ea43b54e9b854406df98331a67a","_npmUser":{"name":"arcwp","email":"support@arcwp.ca"},"repository":{"url":"git+https://github.com/arcwordpress/gateway-filters.git","type":"git"},"_npmVersion":"10.9.2","description":"Reusable filter components for Gateway collections - supports select, text, range, and date range filters","directories":{},"_nodeVersion":"23.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@wordpress/element":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gateway-filters_1.0.0_1761922389360_0.6260702296635752","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arcwp/gateway-filters","version":"1.0.1","keywords":["gateway","filters","react","wordpress","components","ui","select-filter","text-filter","range-filter","date-range-filter"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-filters@1.0.1","maintainers":[{"name":"arcwp","email":"support@arcwp.ca"}],"homepage":"https://github.com/arcwordpress/gateway-filters#readme","bugs":{"url":"https://github.com/arcwordpress/gateway-filters/issues"},"dist":{"shasum":"0a5daa2298603c4419ae4fc643ebf9ed47762cdd","tarball":"https://registry.npmjs.org/@arcwp/gateway-filters/-/gateway-filters-1.0.1.tgz","fileCount":10,"integrity":"sha512-oke/eD+rae6Zc5olMKZ5wYlFtieITIWQ4TlRqag0QIg59oeTIaNNyurKnHw0Elbxe3gRvSf/NfSHuCDPM3BLhg==","signatures":[{"sig":"MEUCIQD1pcNXIbCehRaxIuzjUX5barZbNpvBNOxQRlpRmj6eFwIgMtWL1bk8WOdZdBUg3fdB0OdlQp7/mjxC+kYd7Y17jDo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19393},"main":"dist/index.js","module":"dist/index.js","gitHead":"9fc97ee74ba0e5e08ac096ae0d0c1e3cce6c5be5","scripts":{"build":"babel src --out-dir dist --copy-files --ignore '**/*.test.js','**/*.spec.js'","prepublishOnly":"npm run build"},"_npmUser":{"name":"arcwp","email":"support@arcwp.ca"},"repository":{"url":"git+https://github.com/arcwordpress/gateway-filters.git","type":"git"},"_npmVersion":"10.9.2","description":"Reusable filter components for Gateway collections - supports select, text, range, and date range filters","directories":{},"_nodeVersion":"23.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.24.0","@babel/core":"^7.24.0","@babel/preset-env":"^7.24.0","@babel/preset-react":"^7.24.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@wordpress/element":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gateway-filters_1.0.1_1762002659488_0.9341483811144331","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@arcwp/gateway-filters","version":"1.0.2","description":"Reusable filter components for Gateway collections - supports select, text, range, and date range filters","main":"dist/index.js","module":"dist/index.js","author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","scripts":{"build":"babel src --out-dir dist --copy-files --ignore '**/*.test.js','**/*.spec.js'","prepublishOnly":"npm run build"},"keywords":["gateway","filters","react","wordpress","components","ui","select-filter","text-filter","range-filter","date-range-filter"],"repository":{"type":"git","url":"git+https://github.com/arcwordpress/gateway-filters.git"},"bugs":{"url":"https://github.com/arcwordpress/gateway-filters/issues"},"homepage":"https://github.com/arcwordpress/gateway-filters#readme","devDependencies":{"@babel/cli":"^7.24.0","@babel/core":"^7.24.0","@babel/preset-env":"^7.24.0","@babel/preset-react":"^7.24.0"},"peerDependencies":{"@wordpress/element":"^5.0.0","react":"^18.0.0","react-dom":"^18.0.0"},"publishConfig":{"access":"public"},"_id":"@arcwp/gateway-filters@1.0.2","gitHead":"9fc97ee74ba0e5e08ac096ae0d0c1e3cce6c5be5","_nodeVersion":"23.5.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-A2vENDIPdTUqX7MRNIofPzilyS5LjWUCDe1ESY9hcI1pe/jUWgQLxpiA6WAd4UCzPcPUfd5m/exFOEwvLVCwpQ==","shasum":"8177cf45eca99f51c3fc8dbc54889c339427d2c4","tarball":"https://registry.npmjs.org/@arcwp/gateway-filters/-/gateway-filters-1.0.2.tgz","fileCount":10,"unpackedSize":19393,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCqRPDjjx0HQgY6ZA9963YL2qdQQLIRv3zq+k+y6q3qZQIgV+o/Q5NMqAd/djHY6ZaNA+GXNjwEuVvKWUJxo3bON1s="}]},"_npmUser":{"name":"arcwp","email":"support@arcwp.ca"},"directories":{},"maintainers":[{"name":"arcwp","email":"support@arcwp.ca"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gateway-filters_1.0.2_1762004768863_0.8453320712270704"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-31T14:53:09.295Z","modified":"2025-11-01T13:46:09.289Z","1.0.0":"2025-10-31T14:53:09.551Z","1.0.1":"2025-11-01T13:10:59.704Z","1.0.2":"2025-11-01T13:46:09.044Z"},"bugs":{"url":"https://github.com/arcwordpress/gateway-filters/issues"},"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","homepage":"https://github.com/arcwordpress/gateway-filters#readme","keywords":["gateway","filters","react","wordpress","components","ui","select-filter","text-filter","range-filter","date-range-filter"],"repository":{"type":"git","url":"git+https://github.com/arcwordpress/gateway-filters.git"},"description":"Reusable filter components for Gateway collections - supports select, text, range, and date range filters","maintainers":[{"name":"arcwp","email":"support@arcwp.ca"}],"readme":"# @gateway/filters\r\n\r\nReusable filter components for Gateway collections. Provides a set of flexible, composable filter components for building search and filtering interfaces.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @gateway/filters\r\n```\r\n\r\n## Features\r\n\r\n- 🎯 **Multiple Filter Types**: Select, text, numeric range, and date range filters\r\n- 🎨 **Tailwind CSS Styling**: Beautiful, responsive design out of the box\r\n- ⚡ **Debounced Text Input**: Optimized search performance\r\n- 🔄 **Flexible Layout**: Row or stack layout options\r\n- 🎪 **Factory Pattern**: Generic Filter component routes to specific types\r\n- 📦 **Zero Dependencies**: Only requires React and WordPress Element\r\n\r\n## Filter Types\r\n\r\n### SelectFilter\r\nHTML5 select dropdown with configurable options.\r\n\r\n```jsx\r\nimport { SelectFilter } from '@gateway/filters';\r\n\r\n<SelectFilter\r\n  label=\"Status\"\r\n  choices={[\r\n    { value: 'active', label: 'Active' },\r\n    { value: 'inactive', label: 'Inactive' }\r\n  ]}\r\n  value={selectedValue}\r\n  onChange={(value) => console.log(value)}\r\n  placeholder=\"Select status...\"\r\n/>\r\n```\r\n\r\n### TextFilter\r\nText input with automatic debouncing for search functionality.\r\n\r\n```jsx\r\nimport { TextFilter } from '@gateway/filters';\r\n\r\n<TextFilter\r\n  label=\"Search\"\r\n  value={searchText}\r\n  onChange={(value) => console.log(value)}\r\n  placeholder=\"Search...\"\r\n  debounce={300}\r\n/>\r\n```\r\n\r\n### RangeFilter\r\nMin/max numeric range inputs.\r\n\r\n```jsx\r\nimport { RangeFilter } from '@gateway/filters';\r\n\r\n<RangeFilter\r\n  label=\"Price Range\"\r\n  value={{ min: '0', max: '100' }}\r\n  onChange={({ min, max }) => console.log(min, max)}\r\n  min={0}\r\n  max={1000}\r\n  minPlaceholder=\"Min\"\r\n  maxPlaceholder=\"Max\"\r\n/>\r\n```\r\n\r\n### DateRangeFilter\r\nStart/end date inputs using HTML5 date pickers.\r\n\r\n```jsx\r\nimport { DateRangeFilter } from '@gateway/filters';\r\n\r\n<DateRangeFilter\r\n  label=\"Date Range\"\r\n  value={{ start: '2024-01-01', end: '2024-12-31' }}\r\n  onChange={({ start, end }) => console.log(start, end)}\r\n  startPlaceholder=\"Start Date\"\r\n  endPlaceholder=\"End Date\"\r\n/>\r\n```\r\n\r\n## Generic Filter Component\r\n\r\nThe `Filter` component acts as a factory that renders the appropriate filter type based on configuration:\r\n\r\n```jsx\r\nimport { Filter } from '@gateway/filters';\r\n\r\nconst filterConfig = {\r\n  type: 'select',\r\n  label: 'Status',\r\n  field: 'status',\r\n  choices: [\r\n    { value: 'active', label: 'Active' },\r\n    { value: 'inactive', label: 'Inactive' }\r\n  ]\r\n};\r\n\r\n<Filter\r\n  filter={filterConfig}\r\n  value={value}\r\n  onChange={(value) => console.log(value)}\r\n/>\r\n```\r\n\r\n### Filter Configuration Object\r\n\r\n```typescript\r\n{\r\n  type: 'select' | 'text' | 'range' | 'date_range',\r\n  label: string,\r\n  field: string,\r\n\r\n  // For select filters\r\n  choices?: Array<{ value: string, label: string }>,\r\n\r\n  // For range filters\r\n  min?: number,\r\n  max?: number,\r\n\r\n  // Placeholders\r\n  placeholder?: string | { min?: string, max?: string, start?: string, end?: string }\r\n}\r\n```\r\n\r\n## Filters Layout Container\r\n\r\nThe `Filters` component provides a flex layout container for organizing multiple filters:\r\n\r\n```jsx\r\nimport { Filters, Filter } from '@gateway/filters';\r\n\r\n<Filters direction=\"row\">\r\n  <Filter filter={filter1} value={value1} onChange={handler1} />\r\n  <Filter filter={filter2} value={value2} onChange={handler2} />\r\n  <Filter filter={filter3} value={value3} onChange={handler3} />\r\n</Filters>\r\n```\r\n\r\n### Layout Options\r\n\r\n- `direction=\"row\"` - Horizontal layout (default)\r\n- `direction=\"stack\"` - Vertical layout\r\n\r\n## Complete Example\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport { Filters, Filter } from '@gateway/filters';\r\n\r\nfunction MyFilteredList() {\r\n  const [filters, setFilters] = useState({\r\n    search: '',\r\n    status: '',\r\n    priceRange: { min: '', max: '' },\r\n    dateRange: { start: '', end: '' }\r\n  });\r\n\r\n  const filterConfigs = [\r\n    {\r\n      type: 'text',\r\n      label: 'Search',\r\n      field: 'search',\r\n      placeholder: 'Search products...'\r\n    },\r\n    {\r\n      type: 'select',\r\n      label: 'Status',\r\n      field: 'status',\r\n      choices: [\r\n        { value: 'active', label: 'Active' },\r\n        { value: 'inactive', label: 'Inactive' }\r\n      ]\r\n    },\r\n    {\r\n      type: 'range',\r\n      label: 'Price Range',\r\n      field: 'priceRange',\r\n      min: 0,\r\n      max: 1000\r\n    },\r\n    {\r\n      type: 'date_range',\r\n      label: 'Created Date',\r\n      field: 'dateRange'\r\n    }\r\n  ];\r\n\r\n  const handleFilterChange = (field, value) => {\r\n    setFilters(prev => ({ ...prev, [field]: value }));\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <Filters direction=\"row\">\r\n        {filterConfigs.map(config => (\r\n          <Filter\r\n            key={config.field}\r\n            filter={config}\r\n            value={filters[config.field]}\r\n            onChange={(value) => handleFilterChange(config.field, value)}\r\n          />\r\n        ))}\r\n      </Filters>\r\n\r\n      {/* Your filtered content here */}\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Styling\r\n\r\nComponents use Tailwind CSS classes. Ensure Tailwind is configured in your project:\r\n\r\n```js\r\n// tailwind.config.js\r\nmodule.exports = {\r\n  content: [\r\n    './src/**/*.{js,jsx,ts,tsx}',\r\n    './node_modules/@gateway/filters/**/*.{js,jsx}'\r\n  ],\r\n  // ... other config\r\n}\r\n```\r\n\r\n## Requirements\r\n\r\n- React 18+\r\n- @wordpress/element 5+\r\n- Tailwind CSS (for styling)\r\n\r\n## License\r\n\r\nMIT © ARCWP\r\n\r\n## Support\r\n\r\n- [Issues](https://github.com/arcwordpress/gateway-filters/issues)\r\n- [Documentation](https://github.com/arcwordpress/gateway-filters#readme)\r\n","readmeFilename":"README.md"}