@foris/avocado-suite 0.24.1 → 0.26.0

package/dist/types/table.types.d.ts

@@ -0,0 +1,179 @@
+import { IconTypes } from '../../../avocado-icons';
+import { ReactNode } from 'react';
+export type OrderDirection = 'asc' | 'desc';
+/**
+ * Represents the sorting configuration for a table.
+ */
+export interface TableSort {
+    column: string | null;
+    direction: OrderDirection | null;
+}
+/**
+ * Options for configuring the styles and class names of table columns in a desktop view.
+ */
+export interface TableDesktopColumnOptions {
+    headCellStyles?: React.CSSProperties;
+    headCellClassName?: string;
+    bodyCellClassName?: string;
+    bodyCellStyles?: React.CSSProperties;
+}
+/**
+ * Represents a column in a table.
+ */
+export interface TableColumn {
+    /**
+     * Unique key for the column.
+     * Usually used for sorting or actions that required an unique key.
+     */
+    key: string;
+    /**
+     * Header text for the column.
+     */
+    header: string;
+    /**
+     * Indicates if the column is sortable.
+     * @default false
+     */
+    isSortable?: boolean;
+    /**
+     * Accessor for the column data.
+     */
+    accesor?: string;
+    /**
+     * Options specific to desktop view for the column.
+     */
+    desktopOptions?: TableDesktopColumnOptions;
+    /**
+     * Function to render the cell content.
+     * @param data - The data to be rendered in the cell.
+     * @returns The rendered cell content.
+     */
+    renderCell?: (data: unknown) => ReactNode;
+    /**
+     * Callback function when the header is clicked for sorting.
+     * @param newSort - The new sort state.
+     */
+    onHeaderSortClick?: (newSort: TableSort) => void;
+}
+/**
+ * Represents an action that can be performed on a table row, typically displayed as an icon or button.
+ */
+export interface TableRightAction {
+    /**
+     * The icon to be displayed for the action.
+     */
+    icon?: (row: unknown) => IconTypes;
+    /**
+     * Indicates if the action should be disabled (This only applies to icon actions).
+     */
+    isDisabled?: (row: unknown) => boolean;
+    /**
+     * The content to be displayed for the action, which can be a React node.
+     * would be displayed only if icon is not provided.
+     */
+    renderContent?: (row: unknown, isRowDisabled: boolean) => ReactNode;
+    /**
+     * The function to be called when the action is clicked.
+     * This function is only for the icon variant, if the onClick is not provided, the icon will not be clickable.
+     * @param row - The data of the row on which the action is performed.
+     */
+    onClick?: (row: unknown) => void;
+    /**
+     * A function to determine whether the action should be rendered for a given row.
+     * @param row - The data of the row to check.
+     * @returns A boolean indicating whether the action should be rendered.
+     */
+    shouldRender?: (row: unknown) => boolean;
+}
+export type TableVariant = 'regular' | 'relaxed' | 'condensed';
+export type TableSelectType = 'checkbox' | 'radio';
+/**
+ * Options for configuring the behavior and appearance of a table row.
+ * available options could be: 'checkbox' | 'radio'
+ */
+export interface TableRowOptions {
+    /**
+     * The type of selection mechanism to use for the table row.
+     */
+    selectorType?: TableSelectType;
+    /**
+     * Optional indicator to enable text adaptability by allowing max 3 lines per row.
+     */
+    isTextAdaptable?: boolean;
+    /**
+     * A function to determine if a row should be disabled.
+     *
+     * @param row - The data of the row to check.
+     * @returns `true` if the row should be disabled, otherwise `false`.
+     */
+    isDisabled?: (row: unknown) => boolean;
+    /**
+     * A function to determine if a row is selected.
+     *
+     * @param row - The data of the row to check.
+     * @returns `true` if the row is selected, otherwise `false`.
+     */
+    isSelected?: (row: unknown) => boolean;
+    /**
+     * Indicates if all rows are selected.
+     */
+    isAllSelected?: boolean;
+    /**
+     * Callback function triggered when a row is selected or deselected.
+     *
+     * @param isSelected - `true` if the row is selected, otherwise `false`.
+     * @param data - The data of the row that was selected or deselected.
+     */
+    onRowSelect?: (isSelected: boolean, data: unknown) => void;
+    /**
+     * Callback function triggered when all rows are selected or deselected.
+     *
+     * @param isSelected - `true` if all rows are selected, otherwise `false`.
+     */
+    onSelectAll?: (isSelected: boolean) => void;
+    /**
+     * Function to render custom content for a row.
+     *
+     * @param data - The data of the row for which to render custom content.
+     * @returns A React node representing the custom content.
+     */
+    renderCustomContent?: (data?: unknown) => React.ReactNode;
+}
+/**
+ * Interface representing the properties for a table component.
+ */
+export interface TableProps {
+    /**
+     * The data to be displayed in the table.
+     */
+    data: unknown[];
+    /**
+     * The columns configuration for the table.
+     */
+    columns: TableColumn[];
+    /**
+     * Optional configuration for row-specific options.
+     */
+    rowOptions?: TableRowOptions;
+    /**
+     * Optional initial sorting configuration for the table.
+     */
+    initialSort?: TableSort;
+    /**
+     * Optional actions to be displayed on the right side of the table.
+     */
+    rightActions?: TableRightAction[];
+    /**
+     * Optional variant for the table when displayed on desktop.
+     */
+    desktopVariant?: TableVariant;
+    /**
+     * Indicates if the table should not have responsive behavior.
+     */
+    notResponsive?: boolean;
+    /**
+     * Optional callback function to handle sort changes.
+     * @param newSort - The new sorting configuration.
+     */
+    onSortChange?: (newSort: TableSort) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foris/avocado-suite",
-  "version": "0.24.1",
+  "version": "0.26.0",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,7 @@
     "react-select-async-paginate": "0.7.3",
     "react-toastify": "9.0.3",
     "zustand": "4.5.4",
-    "@foris/avocado-core": "0.8.0",
+    "@foris/avocado-core": "0.9.0",
     "@foris/avocado-icons": "1.9.1"
   },
   "devDependencies": {