chore: updated readme and added repository URLs in package.json

Author: felipehimself

README.md

@@ -0,0 +1,188 @@
+<p align="center"> <h1 align="center">material-react-table-v1-autocomplete</h1></p>
+
+<p align="center">
+<a href="https://github.com/felipehimself" rel="nofollow"><img src="https://img.shields.io/badge/created%20by-@felipehimself-4BBAAB.svg" alt="Created by felipehimself"></a>
+<a href="https://opensource.org/licenses/MIT" rel="nofollow"><img src="https://img.shields.io/github/license/felipehimself/clean-accents" alt="License"></a>
+</p>
+
+## Introduction
+
+A custom multi-select filter component designed for [Material React Table Version 1](https://v1.material-react-table.com/) and [Material UI Version 5](https://v5.mui.com/material-ui/getting-started/installation/) .
+
+## Motivation
+
+Material React Table is awesome (it really is!), but version 1 lacks a built-in multi-select filter. If you're stuck using v1—perhaps due to migration limitations—you might still need this feature. I faced this exact situation, so I created a plug-and-play component that adds multi-select filtering with minimal setup.
+
+
+
+## Installation
+
+```bash
+npm material-react-table-v1-autocomplete
+# or
+yarn material-react-table-v1-autocomplete
+```
+
+## Usage
+
+Define your columns as usual, but pass a custom `Filter` using the `AutocompleteCheckbox` component and its companion `autocompleteFilterFn` for exact-match filtering.
+
+```
+import MaterialReactTable from 'material-react-table';
+import { AutocompleteCheckbox, autocompleteFilterFn } from 'material-react-table-v1-autocomplete';
+
+const App = () => {
+  const data: TData[] = []; // Your data here or coming from anywhere
+
+  const columns = useMemo<MRT_ColumnDef<TData>[]>(() => [
+    {
+      header: 'First Name',
+      accessorKey: 'firstName',
+      filterFn: autocompleteFilterFn,
+      Filter: ({ header }) => (
+        <AutocompleteCheckbox
+          key="firstName"
+          header={header}
+          options={[...new Set(data.map((i) => i.firstName))]}
+        />
+      ),
+    },
+    {
+      header: 'Automatic',
+      accessorKey: 'automatic',
+      accessorFn: (row) => (row.automatic ? 'Yes' : 'No'),
+      filterFn: autocompleteFilterFn,
+      Filter: ({ header }) => (
+        <AutocompleteCheckbox
+          key="automatic"
+          header={header}
+          options={[...new Set(data.map((i) => (i.automatic ? 'Yes' : 'No')))]}
+        />
+      ),
+    },
+    {
+      header: 'Release Date',
+      accessorKey: 'releaseDate',
+      accessorFn: (row) => (row.releaseDate ? formatDate(row.releaseDate) : ''),
+      filterFn: autocompleteFilterFn,
+      Filter: ({ header }) => (
+        <AutocompleteCheckbox
+          key="releaseDate"
+          header={header}
+          options={[...new Set(data.map((i) => formatDate(i.releaseDate)))]}
+        />
+      ),
+    },
+    {
+      header: 'State',
+      accessorKey: 'state', // Uses the default Material React Table filtering
+    },
+  ], [data]);
+
+  return (
+    <MaterialReactTable
+      key="mrt-example"
+      columns={columns}
+      data={data}
+    />
+  );
+};
+```
+
+## ⚠️Important Notes
+
+* `accessorKey` is required. It’s how the component links to the correct column.
+* If you're using `accessorFn` to transform data (e.g., converting booleans to "Yes"/"No"), you must apply the same logic when defining the filter options.
+
+
+
+## Accepted Props
+
+### ✅ MUI
+
+Since Material React Table is built on Material UI, the internal elements (like `TextField` and `Checkbox`) accept the same MUI props. Avoid overriding props such as `onChange` or `onClick`, as these are handled internally by the component.
+
+
+
+### ✨ Custom Props
+
+Other props that the component accepts can be seen in `TAutocompleteCheckboxProps` which is exported by the component. Some of them are `placeholder`, `filterButtonText`, `cleanButtonText` and others.
+
+## 🧼 Cleaning all Filters
+
+Material React Table v1 does not offer a built-in method to clear all filters. You’ll need to manually reset filters and also clear the internal state of `AutocompleteCheckbox` components by calling the `dispatchCleanAutocomplete()` function provided by this package.
+
+
+
+```
+import { dispatchCleanAutocomplete } from 'material-react-table-v1-autocomplete';
+import { Button } from "@mui/material";
+
+const App = () => {
+  const tableInstanceRef = useRef<MRT_TableInstance<TData>>(null);
+
+  const handleCleanFilters = () => {
+    tableInstanceRef.current?.resetColumnFilters();
+    dispatchCleanAutocomplete();
+  };
+
+  return (
+    <>
+      <Button onClick={handleCleanFilters}>Clean All Filters</Button>
+      <MaterialReactTable
+        key="mrt-example"
+        tableInstanceRef={tableInstanceRef}
+        columns={columns}
+        data={data}
+      />
+    </>
+  );
+};
+```
+
+
+## ⚡Performance Tips
+
+The `AutocompleteCheckbox` component is memoized using React.memo. Although it's not mandatory, to benefit from this, make sure to wrap the `options` prop in a useMemo to prevent unnecessary re-renders.
+
+
+## ♻️ Reusability
+
+Some props are commonly reused every time you use the `AutocompleteCheckbox` component. These include:
+
+* placeHolder — defaults to an empty string
+* filterButtonText — defaults to "Filter"
+* cleanButtonText — defaults to "Clear"
+* noOptionsText — defaults to "No options"
+* sortAscending — enables ascending sort for the dropdown (default behavior)
+* sortDescending — enables descending sort for the dropdown
+
+<br/>
+
+> ⚠️ **Important:** `sortAscending` and `sortDescending` are mutually exclusive. If neither is passed, it defaults to ascending. Passing **both** will result in a **TypeScript error**, so only pass the one you need.
+
+
+## 🧱 Example: Creating a Reusable Wrapper Component
+
+You can wrap `AutocompleteCheckbox` in a custom component to centralize common props and avoid repetition:
+> 💡 **Tip:** Wrapping the component like this helps you localize text and avoid repetition across column definitions.
+
+```
+import { AutocompleteCheckbox, TAutocompleteCheckboxProps } from 'material-react-table-v1-autocomplete';
+
+const MyBaseAutocomplete = (props: TAutocompleteCheckboxProps<TData>) => {
+  const { sortAscending, ...rest } = props;
+
+  // We destructure `sortAscending` to prevent a TypeScript conflict in case both sort props are accidentally included
+
+  return (
+    <AutocompleteCheckbox
+      {...rest}
+      filterButtonText="Filtrar"
+      cleanButtonText="Limpar"
+      noOptionsText="Sem opções"
+    />
+  );
+};
+
+```

package.json

@@ -55,5 +55,13 @@
     "name": "Felype Couto",
     "url": "https://fcouto.dev"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/felipehimself/material-react-table-v1-autocomplete.git"
+  },
+  "homepage": "https://github.com/felipehimself/material-react-table-v1-autocomplete#readme",
+  "bugs": {
+    "url": "https://github.com/felipehimself/material-react-table-v1-autocomplete/issues"
+  }
 }