@bsol-oss/react-datatable5 9.2.0 → 11.0.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # React Datatable
 
-The datetable package is built on top of `@tanstack/react-table` and `chakra-ui` to create a robust datatable. This hook simplifies to initialize the state management for controlling the datatable, and it offers several predefined tables and controls in to enhance data visualization.
+The datetable package is built on top of `@tanstack/react-table` and `chakra-ui` to create a datatable. This hook simplifies to initialize the state management for controlling the datatable, and it offers several predefined tables and controls in to enhance data visualization.
 
 ## Installation
 
@@ -23,22 +23,7 @@ const datatableServer = useDataTableServer({ url: "<some-url>" });
 
 ```tsx
 <DataTable columns={columns} data={data} {...datatable}>
-  <Flex>
-    <TablePagination />
-    <EditViewButton />
-    <EditFilterButton />
-    <EditOrderButton />
-    <PageSizeControl />
-    <TableSelector />
-    <GlobalFilter />
-  </Flex>
-  <Table>
-    <TableHeader canResize />
-    <TableBody />
-    <TableFooter />
-  </Table>
-  <PageSizeControl />
-  <TablePagination />
+  <DataDisplay />
 </DataTable>
 ```
 
@@ -46,29 +31,7 @@ const datatableServer = useDataTableServer({ url: "<some-url>" });
 
 ```tsx
 <DataTableServer columns={columns} {...datatable}>
-  <Flex>
-    <TablePagination />
-    <EditViewButton />
-    <EditFilterButton />
-    <DensityToggleButton />
-    <EditOrderButton />
-    <PageSizeControl />
-    <TableSelector />
-    <GlobalFilter />
-  </Flex>
-  <Table>
-    <TableHeader canResize />
-    <TableBody />
-    <TableFooter />
-  </Table>
-  <Flex>
-    <TablePagination />
-    <EditViewButton />
-    <EditFilterButton />
-    <EditOrderButton />
-    <PageSizeControl />
-    <TableSelector />
-  </Flex>
+  <DataDisplay />
 </DataTableServer>
 ```
 
@@ -127,3 +90,189 @@ For more details of props and examples, please review the stories in storybook p
 npm install
 npm run storybook
 ```
+
+# Form
+
+Form component can help create a object to submit an network request.
+
+- Wrap form with confirmation, submit success and error handling ui by default
+- Use `i18next` by default to display `column_id` and text in form in multiple language.
+- Use `axios` by default to submit a request.
+
+
+## Usage
+
+```tsx
+<Form
+  schema={someSchema as JSONSchema7}
+  serverUrl={"http://localhost:8081"}
+/>
+```
+
+## Set up
+
+### Providers
+
+You MUST provide all three provider from packages `i18next`, `@tanstack/react-query`, and `@chakra-ui/react`
+
+```tsx
+<Provider>
+  <QueryClientProvider client={queryClient}>
+    <I18nextProvider i18n={i18n}>
+      <SomeForm />
+    </I18nextProvider>
+  </QueryClientProvider>
+</Provider>
+```
+
+### Schema
+
+You MUST provide a `schema` props to specify the inputs in a form. You MUST specify the keyword `type` as `object`.
+
+Currently, The `Form` component provide LIMITED json schema attributes in this release. Please check the below list to acknowledge the supported Keywords, and the intended keywords to support future releases.
+
+The example of a valid `schema` object
+
+```tsx
+const schema = {
+  type: "object",
+  title: "core_memberships",
+  required: ["id"],
+  properties: {
+    id: {
+      type: "string",
+    },
+    remarks: {
+      type: "string",
+    },
+  }
+}
+const SomeForm = () => {
+  return (
+    <Form
+      schema={schema as JSONSchema7}
+      serverUrl={"http://localhost:8081"}
+    />
+  )
+}
+```
+
+## Supported Keywords
+
+### `title`
+
+You MUST provide the `title` keyword to specifies the string id that will be used in `i18n` translate.
+
+The value must be in type `string`.
+
+### `required`
+
+You MAY provide the `required` keyword to specifies the input that are required to fill before confirmation.
+
+The value must be in type `array` of `string`.
+
+### `properties`
+
+You MUST provide the `properties` keywords to specifies the fields that the form should appear.
+
+The value must be in type `object`. The keys in this object specifies the column id and the values its related properties. Check the sections **Column Keywords** show the supported column keywords.
+
+
+## Column Keywords
+
+### `type`
+
+You MUST provide the `type` keywords to specifies the value type that the column should create. Some value types may include different inputs by specify the `variant` keywords.
+
+Check the sections **Value types** show the supported keywords and input variants for each value type.
+
+Supported value types: `array`, `string`, `number`, `boolean`, `integer`, `object`;
+
+## Value types 
+
+This sections show the supported keywords and input variants for each value type.
+
+### `string`
+
+For input types `string`, it will generate a string input by default.
+
+If you specify the `variant` keyword, it will render a picker to fill a string that requires a format.
+
+Supported variants in `string`: `id-picker`, `date_picker`
+
+#### `id-picker`
+
+For string input variant `id-picker`, it will generate a selector that can pop up a search to help the selection. After the user select a options, the input will show the selected record, and save its correspond string value in the form object.
+
+You MUST include the keyword `foreign_key` and a object with keys `display_column`, `table`, `column`. The `display_column` key is the column that show the label for that value to user, and `column` key is the column that its value should set in this input.
+
+You MUST include a `/api/g` api that could accept the following request in order to search for a record. 
+
+```ts
+const requestConfig = {
+  method: "GET",
+  url: `${serverUrl}/api/g/${table}`,
+  params: {
+    searching,
+    where,
+    limit,
+    offset
+  },
+}
+```
+
+The example valid schema that use `id=picker` variant.
+
+```tsx
+const eventsFilesSchema = {
+  type: "object",
+  title: "events_files",
+  required: ["event_id", "file_id"],
+  properties: {
+    file_id: {
+      type: "array",
+      variant: "file-picker",
+    },
+    event_id: {
+      type: "string",
+      variant: "id-picker",
+      foreign_key: {
+        display_column: "event_name",
+        table: "core_events",
+        column: "id",
+      },
+    },
+  },
+}
+```
+
+### `number`
+
+For value type `number`, it will generate a number input by default.
+
+Currently no supported variants.
+
+### `boolean`
+
+For value type `boolean`, it will generate a checkbox by default.
+
+Currently no supported variants.
+
+
+### `array`
+
+For value type `array`, by default it will generate NO input. 
+
+You MUST specify the `variant` keyword to display a relevant input.
+
+Supported variant in `array`: `id-picker`, `file-picker`
+
+### `object`
+
+For value type `object`, by default it will generate a input that can input key value pairs. 
+
+It is NOT RECOMMENDED to use the default input, Later release may include a json editor by default.
+
+### Intented Support Keywords in Future Release 
+
+(TBC)

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import { RankingInfo } from '@tanstack/match-sorter-utils';
 import { UseQueryResult } from '@tanstack/react-query';
 import { JSONSchema7 } from 'json-schema';
 import { ForeignKeyProps } from '@/components/Form/components/StringInputField';
+import { AxiosRequestConfig } from 'axios';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
 import { RenderProps, Props } from '@bsol-oss/dayzed-react19';
@@ -22,13 +23,9 @@ interface DensityToggleButtonProps {
 declare const DensityToggleButton: ({ text, icon, }: DensityToggleButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface EditFilterButtonProps {
-    text?: string;
-    title?: string;
-    closeText?: string;
-    resetText?: string;
     icon?: React.ReactElement;
 }
-declare const EditFilterButton: ({ text, title, closeText, resetText, icon, }: EditFilterButtonProps) => react_jsx_runtime.JSX.Element;
+declare const FilterDialog: ({ icon, }: EditFilterButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface EditOrderButtonProps {
     title?: string;
@@ -45,11 +42,9 @@ interface EditSortingButtonProps {
 declare const EditSortingButton: ({ text, icon, title, }: EditSortingButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface EditViewButtonProps {
-    text?: string;
     icon?: React__default.ReactElement;
-    title?: string;
 }
-declare const EditViewButton: ({ text, icon, title, }: EditViewButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ViewDialog: ({ icon }: EditViewButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface PageSizeControlProps {
     pageSizes?: number[];
@@ -73,7 +68,7 @@ declare const ResetSortingButton: ({ text, }: ResetSortingButtonProps) => react_
 
 declare const RowCountText: () => react_jsx_runtime.JSX.Element;
 
-declare const TablePagination: () => react_jsx_runtime.JSX.Element;
+declare const Pagination: () => react_jsx_runtime.JSX.Element;
 
 interface CardHeaderProps<TData> {
     row: Row<TData>;
@@ -159,6 +154,7 @@ interface DataTableProps<TData = unknown> {
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
+    translate: UseTranslationResponse<any, any>;
 }
 /**
  * DataTable will create a context to hold all values to
@@ -170,7 +166,7 @@ interface DataTableProps<TData = unknown> {
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-declare function DataTable<TData = unknown>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData = unknown>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, translate, children, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface DataTableDefaultState {
     sorting?: SortingState;
@@ -184,6 +180,7 @@ interface DataTableDefaultState {
 }
 interface UseDataTableProps {
     default?: DataTableDefaultState;
+    keyPrefix?: string;
 }
 interface UseDataTableReturn {
     sorting: SortingState;
@@ -202,8 +199,9 @@ interface UseDataTableReturn {
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
+    translate: UseTranslationResponse<any, any>;
 }
-declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, }?: UseDataTableProps) => UseDataTableReturn;
+declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }?: UseDataTableProps) => UseDataTableReturn;
 
 interface UseDataTableServerProps extends UseDataTableProps {
     /**
@@ -229,7 +227,7 @@ interface Result<T = unknown> {
 interface DataResponse<T = unknown> extends Result<T> {
     count: number;
 }
-declare const useDataTableServer: <TData>({ url, default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
+declare const useDataTableServer: <TData>({ url, default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
 
 interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
     children: ReactNode | ReactNode[];
@@ -262,6 +260,7 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
     setColumnVisibility: OnChangeFn<VisibilityState>;
     query: UseQueryResult<TData>;
     url: string;
+    translate: UseTranslationResponse<any, any>;
 }
 /**
  * DataTableServer will create a context to hold all values to
@@ -274,7 +273,7 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-declare function DataTableServer<TData extends DataResponse = DataResponse<unknown>>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTableServer<TData extends DataResponse = DataResponse<unknown>>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableBodyProps {
     pinnedBgColor?: {
@@ -301,7 +300,6 @@ interface TableControlsProps {
     totalText?: string;
     fitTableWidth?: boolean;
     fitTableHeight?: boolean;
-    isMobile?: boolean;
     children?: ReactNode;
     showGlobalFilter?: boolean;
     showFilter?: boolean;
@@ -311,12 +309,13 @@ interface TableControlsProps {
     showPagination?: boolean;
     showPageSizeControl?: boolean;
     showPageCountText?: boolean;
+    showView?: boolean;
     filterOptions?: string[];
     extraItems?: ReactNode;
     loading?: boolean;
     hasError?: boolean;
 }
-declare const TableControls: ({ totalText, fitTableWidth, fitTableHeight, isMobile, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, filterOptions, extraItems, loading, hasError, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
+declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterOptions, extraItems, loading, hasError, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
 
 interface TableFooterProps {
     pinnedBgColor?: {
@@ -420,6 +419,7 @@ interface DataTableContext<TData = unknown> {
     globalFilter: string;
     setGlobalFilter: OnChangeFn<string>;
     type: "client" | "server";
+    translate: UseTranslationResponse<any, any>;
 }
 declare const DataTableContext: React$1.Context<DataTableContext<unknown>>;
 
@@ -459,6 +459,7 @@ declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
 interface FormProps<TData extends FieldValues> {
     schema: JSONSchema7;
     serverUrl: string;
+    requestUrl?: string;
     idMap: Record<string, object>;
     setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
     form: UseFormReturn;
@@ -466,8 +467,8 @@ interface FormProps<TData extends FieldValues> {
     order?: string[];
     ignore?: string[];
     onSubmit?: SubmitHandler<TData>;
-    preLoadedValues?: object;
     rowNumber?: number | string;
+    requestOptions?: AxiosRequestConfig;
 }
 interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -478,7 +479,7 @@ interface CustomJSONSchema7Definition extends JSONSchema7 {
     gridRow: string;
     foreign_key: ForeignKeyProps;
 }
-declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, preLoadedValues, rowNumber, }: FormProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, preLoadedValues, rowNumber, requestOptions, }: FormProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface UseFormProps {
     preLoadedValues?: FieldValues | undefined;
@@ -601,4 +602,4 @@ declare module "@tanstack/react-table" {
     }
 }
 
-export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, EditFilterButton, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, EditViewButton, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterOptions, type FilterOptionsProps, Form, type FormProps, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, getColumns, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FilterOptions, type FilterOptionsProps, Form, type FormProps, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, TableOrderer, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };