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

package/README.md

@@ -90,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';
@@ -458,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;
@@ -465,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;
@@ -477,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;

package/dist/index.js

@@ -3555,11 +3555,12 @@ const ErrorAlert = ({ showMessage = true }) => {
 const SchemaFormContext = React.createContext({
     schema: {},
     serverUrl: "",
+    requestUrl: "",
     order: [],
     ignore: [],
     onSubmit: async () => { },
     rowNumber: 0,
-    displayText: {},
+    requestOptions: {},
 });
 
 const PopoverContent = React__namespace.forwardRef(function PopoverContent(props, ref) {
@@ -3586,10 +3587,11 @@ const Field = React__namespace.forwardRef(function Field(props, ref) {
 });
 
 const useSchemaContext = () => {
-    const { schema, serverUrl, order, ignore, onSubmit, rowNumber, idMap, setIdMap, translate, } = React.useContext(SchemaFormContext);
+    const { schema, serverUrl, requestUrl, order, ignore, onSubmit, rowNumber, idMap, setIdMap, translate, requestOptions, } = React.useContext(SchemaFormContext);
     return {
         schema,
         serverUrl,
+        requestUrl,
         order,
         ignore,
         onSubmit,
@@ -3597,6 +3599,7 @@ const useSchemaContext = () => {
         idMap,
         setIdMap,
         translate,
+        requestOptions,
     };
 };
 
@@ -3610,10 +3613,6 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
     const options = {
         method: "GET",
         url: `${serverUrl}/api/g/${in_table}`,
-        headers: {
-            Apikey: "YOUR_SECRET_TOKEN",
-            "Content-Type": "application/json",
-        },
         params: {
             searching,
             where,
@@ -4541,7 +4540,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
     }
 };
 const FormInternal = () => {
-    const { schema, serverUrl, order, ignore, onSubmit, rowNumber, idMap, translate, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, onSubmit, rowNumber, idMap, translate, requestOptions, } = useSchemaContext();
     const methods = reactHookForm.useFormContext();
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
@@ -4580,12 +4579,9 @@ const FormInternal = () => {
     const defaultSubmitPromise = (data) => {
         const options = {
             method: "POST",
-            url: `${serverUrl}/api/g/${schema.title}`,
-            headers: {
-                Apikey: "YOUR_SECRET_TOKEN",
-                "Content-Type": "application/json",
-            },
+            url: `${requestUrl}`,
             data: clearEmptyString(data),
+            ...requestOptions,
         };
         return axios.request(options);
     };
@@ -4772,7 +4768,7 @@ const FormInternal = () => {
                             methods.handleSubmit(onValid)();
                         }, formNoValidate: true, children: translate.t("submit") })] }), isError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["isError", jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", `${error}`] })] }))] }));
 };
-const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, preLoadedValues = {}, rowNumber = undefined, }) => {
+const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, preLoadedValues = {}, rowNumber = undefined, requestOptions = {}, }) => {
     const { properties } = schema;
     idListSanityCheck("order", order, properties);
     idListSanityCheck("ignore", ignore, properties);
@@ -4788,6 +4784,7 @@ const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [],
             idMap,
             setIdMap,
             translate,
+            requestOptions,
         }, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: jsxRuntime.jsx(FormInternal, {}) }) }));
 };
 

package/dist/index.mjs

@@ -3535,11 +3535,12 @@ const ErrorAlert = ({ showMessage = true }) => {
 const SchemaFormContext = createContext({
     schema: {},
     serverUrl: "",
+    requestUrl: "",
     order: [],
     ignore: [],
     onSubmit: async () => { },
     rowNumber: 0,
-    displayText: {},
+    requestOptions: {},
 });
 
 const PopoverContent = React.forwardRef(function PopoverContent(props, ref) {
@@ -3566,10 +3567,11 @@ const Field = React.forwardRef(function Field(props, ref) {
 });
 
 const useSchemaContext = () => {
-    const { schema, serverUrl, order, ignore, onSubmit, rowNumber, idMap, setIdMap, translate, } = useContext(SchemaFormContext);
+    const { schema, serverUrl, requestUrl, order, ignore, onSubmit, rowNumber, idMap, setIdMap, translate, requestOptions, } = useContext(SchemaFormContext);
     return {
         schema,
         serverUrl,
+        requestUrl,
         order,
         ignore,
         onSubmit,
@@ -3577,6 +3579,7 @@ const useSchemaContext = () => {
         idMap,
         setIdMap,
         translate,
+        requestOptions,
     };
 };
 
@@ -3590,10 +3593,6 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
     const options = {
         method: "GET",
         url: `${serverUrl}/api/g/${in_table}`,
-        headers: {
-            Apikey: "YOUR_SECRET_TOKEN",
-            "Content-Type": "application/json",
-        },
         params: {
             searching,
             where,
@@ -4521,7 +4520,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
     }
 };
 const FormInternal = () => {
-    const { schema, serverUrl, order, ignore, onSubmit, rowNumber, idMap, translate, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, onSubmit, rowNumber, idMap, translate, requestOptions, } = useSchemaContext();
     const methods = useFormContext();
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
@@ -4560,12 +4559,9 @@ const FormInternal = () => {
     const defaultSubmitPromise = (data) => {
         const options = {
             method: "POST",
-            url: `${serverUrl}/api/g/${schema.title}`,
-            headers: {
-                Apikey: "YOUR_SECRET_TOKEN",
-                "Content-Type": "application/json",
-            },
+            url: `${requestUrl}`,
             data: clearEmptyString(data),
+            ...requestOptions,
         };
         return axios.request(options);
     };
@@ -4752,7 +4748,7 @@ const FormInternal = () => {
                             methods.handleSubmit(onValid)();
                         }, formNoValidate: true, children: translate.t("submit") })] }), isError && (jsxs(Fragment, { children: ["isError", jsxs(Fragment, { children: [" ", `${error}`] })] }))] }));
 };
-const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, preLoadedValues = {}, rowNumber = undefined, }) => {
+const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, preLoadedValues = {}, rowNumber = undefined, requestOptions = {}, }) => {
     const { properties } = schema;
     idListSanityCheck("order", order, properties);
     idListSanityCheck("ignore", ignore, properties);
@@ -4768,6 +4764,7 @@ const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [],
             idMap,
             setIdMap,
             translate,
+            requestOptions,
         }, children: jsx(FormProvider, { ...form, children: jsx(FormInternal, {}) }) }));
 };
 

package/dist/types/components/Form/Form.d.ts

@@ -1,4 +1,5 @@
 import { ForeignKeyProps } from "@/components/Form/components/StringInputField";
+import { AxiosRequestConfig } from "axios";
 import { JSONSchema7 } from "json-schema";
 import { Dispatch, SetStateAction } from "react";
 import { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
@@ -6,6 +7,7 @@ import { UseTranslationResponse } from "react-i18next";
 export interface FormProps<TData extends FieldValues> {
     schema: JSONSchema7;
     serverUrl: string;
+    requestUrl?: string;
     idMap: Record<string, object>;
     setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
     form: UseFormReturn;
@@ -13,8 +15,8 @@ export interface FormProps<TData extends FieldValues> {
     order?: string[];
     ignore?: string[];
     onSubmit?: SubmitHandler<TData>;
-    preLoadedValues?: object;
     rowNumber?: number | string;
+    requestOptions?: AxiosRequestConfig;
 }
 export interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -25,4 +27,4 @@ export interface CustomJSONSchema7Definition extends JSONSchema7 {
     gridRow: string;
     foreign_key: ForeignKeyProps;
 }
-export declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, preLoadedValues, rowNumber, }: FormProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, preLoadedValues, rowNumber, requestOptions, }: FormProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/SchemaFormContext.d.ts

@@ -1,3 +1,4 @@
+import { AxiosRequestConfig } from "axios";
 import { JSONSchema7 } from "json-schema";
 import { Dispatch, SetStateAction } from "react";
 import { FieldValues } from "react-hook-form";
@@ -5,6 +6,7 @@ import { UseTranslationResponse } from "react-i18next";
 export interface SchemaFormContext<TData extends FieldValues> {
     schema: JSONSchema7;
     serverUrl: string;
+    requestUrl: string;
     order: string[];
     ignore: string[];
     onSubmit?: (data: TData) => Promise<void>;
@@ -12,5 +14,6 @@ export interface SchemaFormContext<TData extends FieldValues> {
     idMap: Record<string, object>;
     setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
     translate: UseTranslationResponse<any, any>;
+    requestOptions: AxiosRequestConfig;
 }
 export declare const SchemaFormContext: import("react").Context<SchemaFormContext<unknown>>;

package/dist/types/components/Form/useSchemaContext.d.ts

@@ -2,6 +2,7 @@
 export declare const useSchemaContext: () => {
     schema: import("json-schema").JSONSchema7;
     serverUrl: string;
+    requestUrl: string;
     order: string[];
     ignore: string[];
     onSubmit: ((data: unknown) => Promise<void>) | undefined;
@@ -9,4 +10,5 @@ export declare const useSchemaContext: () => {
     idMap: Record<string, object>;
     setIdMap: import("react").Dispatch<import("react").SetStateAction<Record<string, object>>>;
     translate: import("react-i18next").UseTranslationResponse<any, any>;
+    requestOptions: import("axios").AxiosRequestConfig<any>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "10.0.0",
+  "version": "11.0.0-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",