@espresso-lab/mantine-data-table 1.0.0 → 1.0.2

package/README.md

@@ -1,54 +1,14 @@
-# React + TypeScript + Vite
+# Mantine Data Table 🚀
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is a simple wrapper for the [Mantine Datatable](https://icflorescu.github.io/mantine-datatable/) library to work
+with a single configuration object.
 
-Currently, two official plugins are available:
+[![License](https://img.shields.io/badge/License-MIT-blue)](#license)
+[![NPM Version](https://img.shields.io/npm/v/@espresso-lab/mantine-data-table.svg?style=flat)](https://www.npmjs.com/package/@espresso-lab/mantine-data-table)
+[![NPM Downloads](https://img.shields.io/npm/d18m/@espresso-lab/mantine-data-table.svg?style=flat)](https://www.npmjs.com/package/@espresso-lab/mantine-data-table)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Installation
 
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // 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,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-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:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
-```
+```bash
+npm i @espresso-lab/mantine-data-table
+```

package/dist/DataTable/CreateModal.d.ts

@@ -0,0 +1,11 @@
+import { BaseEntity } from '../Hooks/useApi';
+import { Field, StepConfig } from './DataTable.tsx';
+export interface CreateModalProps<T> {
+    fields: Field<T>[];
+    onClose: () => void;
+    queryKey: (string | number)[];
+    apiPath: string;
+    steps?: StepConfig[];
+    onCreated?: (id: string | number) => void;
+}
+export declare function CreateModal<T extends BaseEntity>({ fields, onClose, queryKey, apiPath, steps, onCreated, }: CreateModalProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/DataTable/DataTable.d.ts

@@ -0,0 +1,54 @@
+import { BaseEntity, Headers } from '../Hooks/useApi';
+import { default as React } from 'react';
+import { DataTableColumn } from 'mantine-datatable';
+import { DatesRangeValue } from '@mantine/dates';
+interface Filter {
+    id: string | number;
+    type: "query" | "date";
+    value?: string | DatesRangeValue;
+}
+export type FieldType = "text" | "number" | "boolean" | "custom" | "date";
+export interface Field<T> {
+    id: string;
+    defaultValue?: T[keyof T];
+    required?: boolean;
+    step?: number;
+    list: boolean;
+    create: boolean;
+    update: boolean;
+    delete: boolean;
+    type?: FieldType;
+    placeholder?: string;
+    render?: (values: T, onChange: (value: T) => void, hideButtons: (value: boolean) => void, setValues: (values: T) => void) => React.ReactNode;
+    column: DataTableColumn<T>;
+}
+interface Action<T extends BaseEntity> {
+    icon?: React.ReactNode;
+    label: string;
+    onClick: (records: T[]) => void;
+}
+export interface StepConfig {
+    label: string;
+    description?: string;
+}
+export interface DataTableProps<T extends BaseEntity> {
+    title?: string | React.ReactNode;
+    queryKey: (string | number)[];
+    connectedQueryKeys?: (string | number)[][];
+    apiPath: string;
+    apiHeaders?: Headers;
+    filters?: Filter[];
+    buttons?: React.ReactNode[];
+    createButtonText?: string;
+    actions?: Action<T>[];
+    selection?: boolean;
+    pagination?: boolean;
+    steps?: StepConfig[];
+    fields: Field<T>[];
+    defaultSort?: {
+        field: string;
+        direction: "asc" | "desc";
+    };
+}
+export declare function DataTable<T extends BaseEntity>({ title, queryKey, connectedQueryKeys, apiPath, buttons, fields, selection, pagination, filters, actions, steps, defaultSort, createButtonText, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DataTable/DeleteModal.d.ts

@@ -0,0 +1,9 @@
+import { BaseEntity } from '../Hooks/useApi';
+interface DeleteModalProps<T> {
+    onClose: () => void;
+    queryKey: (string | number)[];
+    apiPath: string;
+    selectedRecords: T[];
+}
+export declare function DeleteModal<T extends BaseEntity>({ queryKey, apiPath, onClose, selectedRecords, }: DeleteModalProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DataTable/UpdateModal.d.ts

@@ -0,0 +1,12 @@
+import { BaseEntity } from '../Hooks/useApi';
+import { Field, StepConfig } from './DataTable.tsx';
+interface UpdateModalProps<T> {
+    fields: Field<T>[];
+    steps?: StepConfig[];
+    onClose: () => void;
+    queryKey: (string | number)[];
+    apiPath: string;
+    id: string | number;
+}
+export declare function UpdateModal<T extends BaseEntity>({ fields, onClose, queryKey, apiPath, id, steps, }: UpdateModalProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Hooks/useApi.d.ts

@@ -0,0 +1,16 @@
+export interface BaseEntity {
+    id: string | number;
+}
+type AtLeast<T, K extends keyof T> = Partial<T> & Pick<T, K>;
+export type Headers = Record<string, string>;
+export declare function getOne<T extends BaseEntity>(path: string, id: string | number, headers?: Headers): Promise<T>;
+export declare function useGetOne<T extends BaseEntity>(apiPath: string, queryKey: (string | number)[], id: string | number, headers?: Headers): import('@tanstack/react-query').UseQueryResult<T, Error>;
+export declare function useGetMany<T extends BaseEntity>(apiPath: string, queryKey: (string | number)[], ids: string[] | number[], headers?: Headers): (unknown extends T | import('@tanstack/query-core').InitialDataFunction<T> ? import('@tanstack/react-query').UseQueryResult<unknown extends T ? T : T, Error> : (T extends (unknown extends T ? T : T) ? import('@tanstack/react-query').DefinedUseQueryResult<unknown extends T ? T : T, Error> : T extends () => infer TInitialDataResult ? unknown extends TInitialDataResult ? import('@tanstack/react-query').UseQueryResult<unknown extends T ? T : T, Error> : TInitialDataResult extends (unknown extends T ? T : T) ? import('@tanstack/react-query').DefinedUseQueryResult<unknown extends T ? T : T, Error> : import('@tanstack/react-query').UseQueryResult<unknown extends T ? T : T, Error> : import('@tanstack/react-query').UseQueryResult<unknown extends T ? T : T, Error>) | (import('@tanstack/query-core').InitialDataFunction<T> extends infer T_1 ? T_1 extends import('@tanstack/query-core').InitialDataFunction<T> ? T_1 extends (unknown extends T ? T : T) ? import('@tanstack/react-query').DefinedUseQueryResult<unknown extends T ? T : T, Error> : T_1 extends () => infer TInitialDataResult ? unknown extends TInitialDataResult ? import('@tanstack/react-query').UseQueryResult<unknown extends T ? T : T, Error> : TInitialDataResult extends (unknown extends T ? T : T) ? import('@tanstack/react-query').DefinedUseQueryResult<unknown extends T ? T : T, Error> : import('@tanstack/react-query').UseQueryResult<unknown extends T ? T : T, Error> : import('@tanstack/react-query').UseQueryResult<unknown extends T ? T : T, Error> : never : never))[];
+export declare function useGetAll<T extends BaseEntity>(apiPath: string, queryKey: (string | number)[], enabled?: boolean, headers?: Headers): import('@tanstack/react-query').UseQueryResult<T[], Error>;
+interface MutationContext<T> {
+    previousItems: T[] | undefined;
+}
+export declare function useAddOne<T extends BaseEntity>(apiPath: string, queryKey: (string | number)[], headers?: Headers): import('@tanstack/react-query').UseMutationResult<T, Error, Omit<T, "id">, MutationContext<T>>;
+export declare function useUpdateOne<T extends BaseEntity>(apiPath: string, queryKey: (string | number)[], headers?: Headers): import('@tanstack/react-query').UseMutationResult<T, Error, AtLeast<T, "id">, MutationContext<T>>;
+export declare function useDeleteOne<T extends BaseEntity>(apiPath: string, queryKey: (string | number)[], headers?: Headers): import('@tanstack/react-query').UseMutationResult<void, Error, string | number, MutationContext<T>>;
+export {};

package/dist/Hooks/usePersitentState.d.ts

@@ -0,0 +1 @@
+export default function usePersistentState<T>(initialValue: T, key: string): [T, (value: T) => void];

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { BaseEntity } from './Hooks/useApi';
+export type { DataTableProps } from './DataTable/DataTable';
+export { DataTable } from './DataTable/DataTable';

package/package.json

@@ -2,11 +2,11 @@
   "name": "@espresso-lab/mantine-data-table",
   "private": false,
   "description": "Mantine UI Data Table component",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "license": "MIT",
   "author": {
     "name": "Espresso Lab",
@@ -20,12 +20,13 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "require": "./dist/index.umd.js",
+      "default": "./dist/index.es.js"
     },
     "./styles": "./dist/style.css"
   },
   "files": [
-    "/dist"
+    "dist"
   ],
   "publishConfig": {
     "access": "public"