@dooherceg/mrt-date-picker 1.0.0 → 1.0.2

package/README.md

@@ -1,75 +1,109 @@
-# React + TypeScript + Vite
+# @dooherceg/mrt-date-picker
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Date and datetime filter editor components for [Material React Table (MRT)](https://www.material-react-table.com/) v3, built on top of [MUI X Date Pickers](https://mui.com/x/react-date-pickers/getting-started/) and [Day.js](https://day.js.org/).
 
-Currently, two official plugins are available:
+## Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+- **`MRT_SingleDateValueEditor`** – renders a `DatePicker` or `DateTimePicker` for single-value date filter operators
+- **`MRT_RangeDateValueEditor`** – renders a custom popover with two calendars (and optional time clocks) for range-based filter operators
+- Relative date range helpers (`current-week`, `last-7-days`, `last-month`, etc.) via `computeRelativeDateValue`
+- Locale-aware formatting with built-in support for **de**, **fr**, **hr**, **nl**, and **en** (falls back to English for any other language)
+- Filter values are serialised as **Unix millisecond timestamps** so they are safe to send to any API
 
-## React Compiler
+## Installation
 
-The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+```bash
+npm install @dooherceg/mrt-date-picker
+```
+
+### Peer dependencies
+
+The following packages must already be present in your project:
 
-Note: This will impact Vite dev & build performances.
+| Package | Version |
+|---|---|
+| `react` / `react-dom` | ≥ 18 |
+| `material-react-table` | ≥ 3 |
+| `@mui/material` | ≥ 6 |
+| `@mui/icons-material` | ≥ 6 |
+| `@mui/x-date-pickers` | ≥ 7 |
+| `@emotion/react` / `@emotion/styled` | ≥ 11 |
+| `@iconify/react` | ≥ 4 |
+| `dayjs` | ≥ 1 |
 
-## Expanding the ESLint configuration
+## Usage
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### Single date / datetime filter
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
+```tsx
+import { MRT_SingleDateValueEditor } from '@dooherceg/mrt-date-picker';
+
+// Inside your MRT column definition:
+const columns = [
   {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
+    accessorKey: 'createdAt',
+    header: 'Created At',
+    filterVariant: 'custom',
+    Filter: (props) => (
+      <MRT_SingleDateValueEditor pickerType="date" {...props} />
+    ),
   },
-])
+];
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+Use `pickerType="datetime"` to render a `DateTimePicker` instead of a `DatePicker`.
+
+### Date range filter
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+```tsx
+import { MRT_RangeDateValueEditor } from '@dooherceg/mrt-date-picker';
 
-export default defineConfig([
-  globalIgnores(['dist']),
+const columns = [
   {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
+    accessorKey: 'createdAt',
+    header: 'Created At',
+    filterVariant: 'custom',
+    Filter: (props) => (
+      <MRT_RangeDateValueEditor pickerType="date" {...props} />
+    ),
   },
-])
+];
+```
+
+The filter value is stored as `{ from: number | null, to: number | null }` where each endpoint is a Unix ms timestamp.
+
+### Relative date ranges
+
+```ts
+import { computeRelativeDateValue } from '@dooherceg/mrt-date-picker';
+
+const value = computeRelativeDateValue('last-7-days');
+// => { from: <timestamp>, to: <timestamp> }
 ```
+
+Supported operator IDs:
+
+| Operator ID | Description |
+|---|---|
+| `current-week` | Start of this week → end of this week |
+| `current-month` | Start of this month → end of this month |
+| `last-7-days` | 6 days ago → today |
+| `last-week` | Previous calendar week |
+| `last-month` | Previous calendar month |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Lint
+npm run lint
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1 +1 @@
-export {}
+export { }