mobigrid-module 1.1.25 → 1.1.31

package/README.md

@@ -2,42 +2,187 @@
 
 A flexible and customizable data table interface module with advanced filtering, column management, and action handling capabilities.
 
+## Installation
+
+```bash
+npm install mobigrid-module
+```
+
+## Usage
+
+You can use the `MobigridModule` component by importing it into your React application.
+
+```tsx
+import MobigridModule from 'mobigrid-module';
+import 'mobigrid-module/dist/index.css'; // Import styles if necessary
+
+function App() {
+  const handleEdit = (row) => {
+    console.log('Edit row:', row);
+  };
+
+  const handleDelete = (row) => {
+    console.log('Delete row:', row);
+  };
+
+  const checkEditPermission = (row) => {
+    return row.status !== 'LOCKED';
+  };
+
+  return (
+    <MobigridModule
+      configUrl="https://api.example.com/config"
+      // OR provide configJson directly
+      // configJson={myConfigObject}
+      dataUrl="https://api.example.com/data"
+      callbacks={{
+        onEdit: handleEdit,
+        onDelete: handleDelete,
+        canEdit: checkEditPermission
+      }}
+      customHeaders={{
+        'Authorization': 'Bearer token123'
+      }}
+    />
+  );
+}
+```
+
+## Component Props
+
+The `MobigridModule` accepts the following props:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `configUrl` | `string` | URL to fetch the configuration JSON from. |
+| `configJson` | `object` | Direct configuration object. Use this or `configUrl`. |
+| `dataUrl` | `string` | URL to fetch the table data from. Overrides `data_url` in config. |
+| `preJsUrl` | `string` | URL to fetch a JavaScript file to execute before rendering (e.g., for global functions). |
+| `preJs` | `string` | Direct JavaScript code string to execute. |
+| `callbacks` | `object` | An object containing functions referenced by action buttons or conditions. |
+| `customHeaders` | `object` | Custom HTTP headers to include in API requests (data and config). |
+| `itemsPerPage` | `number` | Number of items to display per page (default: 14). |
+| `dateFormat` | `string` | Format string for dates in API requests (default: "MM-dd-yyyy HH:mm"). |
+| `children` | `ReactNode` | Child components to render at the bottom of the module. |
+
 ## Configuration Structure
 
-The configuration object defines the structure and behavior of a data table interface. It includes filters, columns, actions, and other settings.
+The configuration object defines the structure of the table, filters, and columns. You can provide this via the `configUrl` endpoint or directly via the `configJson` prop.
+
+```json
+{
+  "title": "User Management",
+  "data_url": "https://api.example.com/users",
+  "Filters": [
+    [
+      {
+        "type": "Text",
+        "name": "search",
+        "label": "Search Users"
+      },
+      {
+        "type": "Select",
+        "name": "role",
+        "label": "Role",
+        "urlSource": "https://api.example.com/roles" // Dynamic options
+      }
+    ],
+    [
+      {
+        "type": "Date",
+        "name": "fromDate",
+        "label": "From Date"
+      },
+       {
+        "type": "Date",
+        "name": "toDate",
+        "label": "To Date"
+      }
+    ]
+  ],
+  "colomns": [ // Note: spelling is 'colomns' in current version
+    {
+      "title": "Name",
+      "key": "fullName",
+      "type": "text"
+    },
+    {
+      "title": "Status",
+      "key": "status",
+      "type": "status"
+    },
+    {
+      "title": "Created At",
+      "key": "createdAt",
+      "type": "date",
+      "pattern": "dd/MM/yyyy"
+    },
+    {
+      "title": "Actions",
+      "key": "ACTIONS_BUTTONS",
+      "actions": [
+        {
+          "label": "Edit",
+          "icon": "icon-edit",
+          "action": "onEdit",
+          "condition": "canEdit"
+        }
+      ]
+    }
+  ]
+}
+```
+
+### Filters Configuration
+
+Filters are defined as an array of arrays (rows of filters).
+
+- **`type`**: The type of filter. Supported types:
+    - `"Text"`: Simple text input.
+    - `"Select"`: Dropdown menu. Use `urlSource` for dynamic options or `options` for static ones.
+    - `"Date"`: Date picker.
+- **`name`**: The query parameter key that will be sent to the `data_url`.
+- **`label`**: The label displayed for the filter.
+- **`urlSource`**: (For `Select` type) URL to fetch options from. Expects an array of objects `{ label, value }`.
+- **`options`**: (For `Select` type) Static array of options `{ label, value }`.
+
+### Columns Configuration (`colomns`)
+
+Defines the table columns.
+
+- **`title`**: Header text for the column.
+- **`key`**: The key in the data object to display.
+- **`type`**: formatting type.
+    - `"text"`: Default display.
+    - `"date"`: Formats date using `pattern` (default: `dd-MM-yyyy`).
+    - `"money"`: Formats as currency. Usage: `currency` prop required.
+    - `"status"`: Displays a colored badge based on status value (PENDING, PAID, CANCELLED, etc.).
+    - `"ACTIONS_BUTTONS"`: Special column for action buttons.
+- **`scroll`**: If true, limits height and adds scrollbar for long content.
 
-### Main Properties
+### Actions Configuration
 
-- **title**: The title of the configuration
-- **data_url**: API endpoint for fetching data
-- **Filters**: Array of filter groups for data filtering
-- **columns**: Defines the table columns and their properties
-- **extractColumns**: Columns used for data export
-- **detailsColumns**: Columns shown in detail view
+For columns with `key: "ACTIONS_BUTTONS"`, you can define an `actions` array.
 
-### Filter Types
+- **`label`**: Text on the button.
+- **`icon`**: Icon name (referenced from Feather icons, prefixed with `icon-`).
+- **`action`**: The name of the callback function in the `callbacks` prop to execute on click. receives the row data.
+- **`condition`**: (Optional) The name of the callback function in the `callbacks` prop to determine visibility. Receives row data and must return `boolean`.
 
-- **Select**: Dropdown with options (static or dynamic from urlSource)
-- **Text**: Basic text input
-- **Date**: Date picker input
-- **Export**: Export functionality
-- **Button**: Action buttons (e.g., search)
+## Development
 
-### Column Properties
+To build the project:
 
-- **title**: Column header text
-- **key**: Data field identifier
-- **type**: Data type (date, money, dropdown, etc.)
-- **pattern**: Format pattern (for dates)
-- **actions**: Available actions for dropdown columns
+```bash
+npm run build
+```
 
-### Additional Settings
+To deploy (build, version bump, publish, and push):
 
-- **max_diff**: Maximum difference value
-- **pagesNum**: Number of pages
-- **service_path**: Service implementation path
-- **authorized_profiles**: Allowed user profile IDs
-- **modal_size**: Size of modal windows
-- **components**: Required component names
+```bash
+# Default bump is patch
+./deploy.sh
 
-## Example Configuration
+# Specify bump type
+./deploy.sh minor
+```

package/dist/components/CustomTable/CustomTable.d.ts

@@ -3,6 +3,7 @@ interface TableProps {
     data: any[];
     columns: any[];
     isLoading: boolean;
+    callbacks: any;
 }
-export declare function CustomTable({ data, columns, isLoading }: TableProps): React.JSX.Element;
+export declare function CustomTable({ data, columns, isLoading, callbacks, }: TableProps): React.JSX.Element;
 export {};

package/dist/components/Layout/PageHeader.d.ts

@@ -8,6 +8,8 @@ interface PageHeaderProps {
     count: number;
     isLoading: boolean;
     setCurrentPage: (page: number) => void;
+    handleOptionsSearch: (filter: any, search: string) => void;
+    optionsLoading: boolean;
 }
-export declare function PageHeader({ title, filters, setFilters, configFilters, onSearch, count, isLoading, setCurrentPage, }: PageHeaderProps): React.JSX.Element;
+export declare function PageHeader({ title, filters, setFilters, configFilters, onSearch, count, isLoading, setCurrentPage, handleOptionsSearch, optionsLoading, }: PageHeaderProps): React.JSX.Element;
 export {};

package/dist/components/ui/command.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: ({ children, ...props }: DialogProps) => React.JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/ui/searchable-select.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export default function SearchableSelect({ value, onSearch, onValueChange, disabled, placeholder, options, loading, }: {
+    value: string;
+    onValueChange: (value: string) => void;
+    onSearch: (search: string) => void;
+    disabled: boolean;
+    placeholder: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    loading?: boolean;
+}): React.JSX.Element;

package/dist/examples/transportors/src/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react").JSX.Element;
+export default App;

package/dist/examples/transportors/src/App.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/examples/transportors/src/components/ui/dialog.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/examples/transportors/src/index.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/dist/examples/transportors/src/reportWebVitals.d.ts

@@ -0,0 +1,3 @@
+import { ReportHandler } from 'web-vitals';
+declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
+export default reportWebVitals;

package/dist/examples/transportors/src/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';