@itaptec/datagrid 0.0.1-beta.8

package/README.md

@@ -0,0 +1,29 @@
+# README #
+
+This README would normally document whatever steps are necessary to get your application up and running.
+
+### What is this repository for? ###
+
+* Quick summary
+* Version
+* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
+
+### How do I get set up? ###
+
+* Summary of set up
+* Configuration
+* Dependencies
+* Database configuration
+* How to run tests
+* Deployment instructions
+
+### Contribution guidelines ###
+
+* Writing tests
+* Code review
+* Other guidelines
+
+### Who do I talk to? ###
+
+* Repo owner or admin
+* Other community or team contact

package/dist/index.d.mts

@@ -0,0 +1,104 @@
+import { GridValidRowModel, DataGridProps, GridActionsColDef, GridRowIdGetter } from '@mui/x-data-grid';
+import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
+import { GridBaseColDef } from '@mui/x-data-grid/internals';
+import { SelectProps, SelectionOption, MultiselectProps, ControlledDateRangePickerProps, TextFieldProps, ToggleButtonGroup, ToggleButtonGroupMultiple } from '@itaptec/form_components';
+import React from 'react';
+import { UseQueryResult } from '@tanstack/react-query';
+import { EntityListWithPagination, PaginationRequest } from '@itaptec/http_client';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * MUI's DataGrid props that the user shouldn't see, as they are internally handled.
+ */
+type UnionOfDataGridPropsToOmit = keyof Pick<DataGridProps, "pagination" | "paginationMode" | "paginationModel" | "onPaginationModelChange" | "filterMode" | "filterModel" | "sortingMode" | "sortingOrder" | "rows" | "checkboxSelection" | "getRowId" | "rowSelectionModel" | "onRowSelectionModelChange">;
+/**
+ * MUI's DataGrid props without the ones to omit.
+ */
+type DataGridPropsWithOmmited<TEntity extends GridValidRowModel> = Omit<DataGridProps<TEntity>, UnionOfDataGridPropsToOmit>;
+/**
+ * ItecDataGrid columns definition.
+ */
+type ItecGridColsDef<TEntity extends GridValidRowModel> = (Omit<GridBaseColDef<TEntity>, "field"> & {
+    field: keyof TEntity | string;
+}) | (Omit<GridActionsColDef<TEntity>, "field"> & {
+    field: keyof TEntity | string;
+});
+/**
+ * ItecDataGrid column's filter parameters.
+ */
+type ItecColFilters<TFilter extends FieldValues> = Record<string, // TODO: este tipo debería ser inferido de los posibles nombres de columnas.
+ItecColFilterParams<TFilter>>;
+type ItecColFilterParams<TFilter extends FieldValues> = {
+    name: Path<TFilter>;
+} & ({
+    type: "select";
+    props: Omit<SelectProps<SelectionOption, TFilter>, "name" | "control">;
+} | {
+    type: "multiselect";
+    props: Omit<MultiselectProps<SelectionOption, TFilter>, "name" | "control">;
+} | {
+    type: "date-range";
+    props: Omit<ControlledDateRangePickerProps<TFilter>, "name" | "control">;
+} | {
+    type: "text";
+    props: Omit<TextFieldProps<TFilter>, "name" | "control">;
+} | {
+    type: "button-group";
+    props: Omit<React.ComponentProps<typeof ToggleButtonGroup>, "name" | "control">;
+} | {
+    type: "multiple-button-group";
+    props: Omit<React.ComponentProps<typeof ToggleButtonGroupMultiple>, "name" | "control">;
+});
+
+type UseItecDataGridProps<TEntity extends GridValidRowModel, TFilter extends FieldValues> = (DataGridPropsWithOmmited<TEntity> & {
+    columns: ItecGridColsDef<TEntity>[];
+    filters?: ItecColFilters<TFilter>;
+    pagination: false;
+    getEntities: (filter?: Partial<TFilter>) => Promise<TEntity[]>;
+}) & ({
+    checkboxSelection: true;
+    getRowId: GridRowIdGetter<TEntity>;
+} | {
+    checkboxSelection?: false;
+    getRowId?: never;
+});
+type UseItecDataGrid<TEntity extends GridValidRowModel, TFilter extends FieldValues> = {
+    datagridProps: DataGridProps<TEntity>;
+    control: {
+        query: UseQueryResult<TEntity[]>;
+        form: UseFormReturn<TFilter> | undefined;
+        selectedRows: TEntity[] | undefined;
+    };
+};
+
+/**
+ * Props to pass to the ItecDataGrid or useItecDataGrid for a paginated DataGrid.
+ */
+type UseItecDataGridPaginatedProps<TEntity extends GridValidRowModel, TFilter extends FieldValues> = (DataGridPropsWithOmmited<TEntity> & {
+    columns: ItecGridColsDef<TEntity>[];
+    filters?: ItecColFilters<TFilter>;
+    pagination: true;
+    getEntitiesPaginated: (pagination: PaginationRequest, filter?: Partial<TFilter>) => Promise<EntityListWithPagination<TEntity>>;
+}) & ({
+    checkboxSelection: true;
+    getRowId: GridRowIdGetter<TEntity>;
+} | {
+    checkboxSelection?: false;
+    getRowId?: never;
+});
+type UseItecDataGridPaginated<TEntity extends GridValidRowModel, TFilter extends FieldValues> = {
+    datagridProps: DataGridProps<TEntity>;
+    control: {
+        query: UseQueryResult<EntityListWithPagination<TEntity>>;
+        form: UseFormReturn<TFilter> | undefined;
+        selectedRows: TEntity[] | undefined;
+    };
+};
+
+declare function useItecDataGrid<TEntity extends GridValidRowModel, TFilter extends FieldValues = {}>(props: UseItecDataGridPaginatedProps<TEntity, TFilter>): UseItecDataGrid<TEntity, TFilter>;
+declare function useItecDataGrid<TEntity extends GridValidRowModel, TFilter extends FieldValues = {}>(props: UseItecDataGridProps<TEntity, TFilter>): UseItecDataGridPaginated<TEntity, TFilter>;
+
+type ItecDataGridProps<TEntity extends GridValidRowModel> = Omit<DataGridProps<TEntity>, "paginationMode" | "filterMode">;
+declare function ItecDataGrid<TEntity extends GridValidRowModel>(props: ItecDataGridProps<TEntity>): react_jsx_runtime.JSX.Element;
+
+export { type DataGridPropsWithOmmited, type ItecColFilterParams, type ItecColFilters, ItecDataGrid, type ItecDataGridProps, type ItecGridColsDef, type UseItecDataGrid, type UseItecDataGridPaginated, type UseItecDataGridPaginatedProps, type UseItecDataGridProps, useItecDataGrid };

package/dist/index.d.ts

@@ -0,0 +1,104 @@
+import { GridValidRowModel, DataGridProps, GridActionsColDef, GridRowIdGetter } from '@mui/x-data-grid';
+import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
+import { GridBaseColDef } from '@mui/x-data-grid/internals';
+import { SelectProps, SelectionOption, MultiselectProps, ControlledDateRangePickerProps, TextFieldProps, ToggleButtonGroup, ToggleButtonGroupMultiple } from '@itaptec/form_components';
+import React from 'react';
+import { UseQueryResult } from '@tanstack/react-query';
+import { EntityListWithPagination, PaginationRequest } from '@itaptec/http_client';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * MUI's DataGrid props that the user shouldn't see, as they are internally handled.
+ */
+type UnionOfDataGridPropsToOmit = keyof Pick<DataGridProps, "pagination" | "paginationMode" | "paginationModel" | "onPaginationModelChange" | "filterMode" | "filterModel" | "sortingMode" | "sortingOrder" | "rows" | "checkboxSelection" | "getRowId" | "rowSelectionModel" | "onRowSelectionModelChange">;
+/**
+ * MUI's DataGrid props without the ones to omit.
+ */
+type DataGridPropsWithOmmited<TEntity extends GridValidRowModel> = Omit<DataGridProps<TEntity>, UnionOfDataGridPropsToOmit>;
+/**
+ * ItecDataGrid columns definition.
+ */
+type ItecGridColsDef<TEntity extends GridValidRowModel> = (Omit<GridBaseColDef<TEntity>, "field"> & {
+    field: keyof TEntity | string;
+}) | (Omit<GridActionsColDef<TEntity>, "field"> & {
+    field: keyof TEntity | string;
+});
+/**
+ * ItecDataGrid column's filter parameters.
+ */
+type ItecColFilters<TFilter extends FieldValues> = Record<string, // TODO: este tipo debería ser inferido de los posibles nombres de columnas.
+ItecColFilterParams<TFilter>>;
+type ItecColFilterParams<TFilter extends FieldValues> = {
+    name: Path<TFilter>;
+} & ({
+    type: "select";
+    props: Omit<SelectProps<SelectionOption, TFilter>, "name" | "control">;
+} | {
+    type: "multiselect";
+    props: Omit<MultiselectProps<SelectionOption, TFilter>, "name" | "control">;
+} | {
+    type: "date-range";
+    props: Omit<ControlledDateRangePickerProps<TFilter>, "name" | "control">;
+} | {
+    type: "text";
+    props: Omit<TextFieldProps<TFilter>, "name" | "control">;
+} | {
+    type: "button-group";
+    props: Omit<React.ComponentProps<typeof ToggleButtonGroup>, "name" | "control">;
+} | {
+    type: "multiple-button-group";
+    props: Omit<React.ComponentProps<typeof ToggleButtonGroupMultiple>, "name" | "control">;
+});
+
+type UseItecDataGridProps<TEntity extends GridValidRowModel, TFilter extends FieldValues> = (DataGridPropsWithOmmited<TEntity> & {
+    columns: ItecGridColsDef<TEntity>[];
+    filters?: ItecColFilters<TFilter>;
+    pagination: false;
+    getEntities: (filter?: Partial<TFilter>) => Promise<TEntity[]>;
+}) & ({
+    checkboxSelection: true;
+    getRowId: GridRowIdGetter<TEntity>;
+} | {
+    checkboxSelection?: false;
+    getRowId?: never;
+});
+type UseItecDataGrid<TEntity extends GridValidRowModel, TFilter extends FieldValues> = {
+    datagridProps: DataGridProps<TEntity>;
+    control: {
+        query: UseQueryResult<TEntity[]>;
+        form: UseFormReturn<TFilter> | undefined;
+        selectedRows: TEntity[] | undefined;
+    };
+};
+
+/**
+ * Props to pass to the ItecDataGrid or useItecDataGrid for a paginated DataGrid.
+ */
+type UseItecDataGridPaginatedProps<TEntity extends GridValidRowModel, TFilter extends FieldValues> = (DataGridPropsWithOmmited<TEntity> & {
+    columns: ItecGridColsDef<TEntity>[];
+    filters?: ItecColFilters<TFilter>;
+    pagination: true;
+    getEntitiesPaginated: (pagination: PaginationRequest, filter?: Partial<TFilter>) => Promise<EntityListWithPagination<TEntity>>;
+}) & ({
+    checkboxSelection: true;
+    getRowId: GridRowIdGetter<TEntity>;
+} | {
+    checkboxSelection?: false;
+    getRowId?: never;
+});
+type UseItecDataGridPaginated<TEntity extends GridValidRowModel, TFilter extends FieldValues> = {
+    datagridProps: DataGridProps<TEntity>;
+    control: {
+        query: UseQueryResult<EntityListWithPagination<TEntity>>;
+        form: UseFormReturn<TFilter> | undefined;
+        selectedRows: TEntity[] | undefined;
+    };
+};
+
+declare function useItecDataGrid<TEntity extends GridValidRowModel, TFilter extends FieldValues = {}>(props: UseItecDataGridPaginatedProps<TEntity, TFilter>): UseItecDataGrid<TEntity, TFilter>;
+declare function useItecDataGrid<TEntity extends GridValidRowModel, TFilter extends FieldValues = {}>(props: UseItecDataGridProps<TEntity, TFilter>): UseItecDataGridPaginated<TEntity, TFilter>;
+
+type ItecDataGridProps<TEntity extends GridValidRowModel> = Omit<DataGridProps<TEntity>, "paginationMode" | "filterMode">;
+declare function ItecDataGrid<TEntity extends GridValidRowModel>(props: ItecDataGridProps<TEntity>): react_jsx_runtime.JSX.Element;
+
+export { type DataGridPropsWithOmmited, type ItecColFilterParams, type ItecColFilters, ItecDataGrid, type ItecDataGridProps, type ItecGridColsDef, type UseItecDataGrid, type UseItecDataGridPaginated, type UseItecDataGridPaginatedProps, type UseItecDataGridProps, useItecDataGrid };