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

package/README.md

@@ -89,190 +89,4 @@ 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

@@ -10,7 +10,7 @@ import { UseTranslationResponse } from 'react-i18next';
 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 { ForeignKeyProps } from '@/components/Form/components/fields/StringInputField';
 import { AxiosRequestConfig } from 'axios';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
@@ -85,7 +85,7 @@ interface DataDisplayProps {
     variant?: "horizontal" | "stats" | "";
     translate?: UseTranslationResponse<any, any>;
 }
-declare const DataDisplay: ({ variant, translate }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
+declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
 
 type DensityState = "sm" | "md" | "lg";
 interface DensityTableState {
@@ -427,6 +427,7 @@ declare const useDataTableContext: <TData>() => DataTableContext<TData>;
 
 interface GetColumnsConfigs<K extends RowData> {
     schema: JSONSchema7;
+    include?: K[];
     ignore?: K[];
     width?: number[];
     meta?: {
@@ -436,7 +437,7 @@ interface GetColumnsConfigs<K extends RowData> {
     translate?: UseTranslationResponse<any, any>;
 }
 declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
-declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
+declare const getColumns: <TData extends unknown>({ schema, include, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
 
 interface EmptyStateProps {
     title?: string;
@@ -466,6 +467,7 @@ interface FormProps<TData extends FieldValues> {
     translate: UseTranslationResponse<any, any>;
     order?: string[];
     ignore?: string[];
+    include?: string[];
     onSubmit?: SubmitHandler<TData>;
     rowNumber?: number | string;
     requestOptions?: AxiosRequestConfig;
@@ -479,7 +481,12 @@ 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, requestOptions, }: FormProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const idPickerSanityCheck: (column: string, foreign_key?: {
+    table?: string | undefined;
+    column?: string | undefined;
+    display_column?: string | undefined;
+} | undefined) => void;
+declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, include, onSubmit, rowNumber, requestOptions, }: FormProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface UseFormProps {
     preLoadedValues?: FieldValues | undefined;
@@ -602,4 +609,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, 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 };
+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, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };