qucoon-components 0.0.4 → 0.0.5

package/dist/types/components/custom/StatusIndicator.d.ts

@@ -1,9 +1,11 @@
 import { default as React } from 'react';
+import { StatusMap } from '..';
 export type StatusIndicatorProps = {
-    status: "success" | "error" | "pending" | "normal" | string;
+    status: string;
     size?: number;
     className?: string;
     style?: React.CSSProperties;
+    statusMap?: StatusMap;
 };
 declare const StatusIndicator: React.FC<StatusIndicatorProps>;
 export default StatusIndicator;

package/dist/types/components/ui/select/BaseSelect.d.ts

@@ -24,7 +24,7 @@ export type BaseSelectProps<T extends FormikValues> = {
     name?: string;
     formik?: Formik<T>;
     selectOptions: BaseSelectOption[];
-    size?: "x-small" | "small" | "medium";
+    size?: "x-small" | "small" | "medium" | "large";
     containerStyle?: React.CSSProperties;
     selectInputProps?: React.SelectHTMLAttributes<HTMLSelectElement>;
 };

package/dist/types/components/ui/table/BaseDataGrid.d.ts

@@ -40,6 +40,7 @@ export type BaseDataGridProps = {
     defaultFilterPanelProps?: FilterPanelProps;
     gridOptions?: GridOptions;
     customization?: DataGridCustomization;
+    suppressDefaultStatusRenderer?: boolean;
 };
 declare const BaseDataGrid: import('react').MemoExoticComponent<(props: BaseDataGridProps) => import("react/jsx-runtime").JSX.Element>;
 export default BaseDataGrid;

package/dist/types/components/ui/table/renderers/StatusRenderer.d.ts

@@ -4,15 +4,19 @@ export type StatusMap = {
     [status: string]: {
         color: string;
         backgroundColor: string;
+        label?: string;
+        icon?: React.ReactNode;
     };
 };
 export type StatusRendererProps = {
-    status: string;
+    value?: any;
+    data?: any;
+    status?: string;
     showIndicator?: boolean;
-    customStatusMap?: StatusMap;
-    onClick?: () => void;
+    statusMap?: StatusMap;
+    onClick?: (data: any) => void;
     className?: string;
     style?: React.CSSProperties;
-} & ICellRendererParams;
+} & Partial<ICellRendererParams>;
 declare const StatusRenderer: React.FC<StatusRendererProps>;
 export default StatusRenderer;

package/dist/types/components/ui/table/types/index.d.ts

@@ -1,6 +1,6 @@
 import { ColDef, GridOptions, SelectionChangedEvent } from 'ag-grid-community';
 import { CSSProperties } from 'react';
-import { HeaderControlsProps } from '../../..';
+import { HeaderControlsProps, StatusRendererProps } from '../../..';
 export type ColumnType = Omit<ColDef, "field"> & {
     field: string;
     style?: React.CSSProperties;
@@ -30,7 +30,7 @@ export interface DataGridTheme {
         className?: string;
         style?: CSSProperties;
         agThemeClass?: string;
-        customCssVariables?: Record<string, string>;
+        customCssVariables?: Partial<Record<BaseDataGridCssVariable, string>>;
     };
     header?: {
         className?: string;
@@ -86,7 +86,10 @@ export interface DataGridCustomization {
         emptyState?: React.FC<any>;
         loadingOverlay?: React.FC<any>;
         pagination?: React.FC<any>;
-        cellRenderers?: Record<string, React.FC<any>>;
+        statusRenderer?: {
+            component: React.FC<StatusRendererProps>;
+            params?: StatusRendererProps;
+        };
     };
     callbacks?: {
         onRowClick?: (event: any) => void;
@@ -144,6 +147,8 @@ export type FilterPanelProps = FilterState & FilterActions & {
     showGlobalSearch?: boolean;
     showColumnFilters?: boolean;
     showSortingControls?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
 };
 export type ServerSideOperations = "refresh" | "search" | "filter" | "sort" | "pagination";
 export type ServerSideOperationsConfig = Partial<Record<ServerSideOperations, {
@@ -165,3 +170,56 @@ export type DefaultPaginationConfig = {
     totalRecords?: number;
     totalPages?: number;
 };
+export declare const BASE_DATA_GRID_CSS_VARIABLES: {
+    readonly '--ag-row-height': "Height of each row (e.g., \"45px\")";
+    readonly '--ag-header-height': "Height of header row (e.g., \"44px\")";
+    readonly '--ag-cell-horizontal-padding': "Horizontal padding in cells (e.g., \"12px\")";
+    readonly '--ag-cell-vertical-padding': "Vertical padding in cells (e.g., \"8px\")";
+    readonly '--ag-grid-size': "Base size unit for consistent spacing (e.g., \"8px\")";
+    readonly '--ag-background-color': "Main grid background color";
+    readonly '--ag-header-background-color': "Header background color";
+    readonly '--ag-odd-row-background-color': "Alternate row background color";
+    readonly '--ag-row-hover-color': "Row hover background color";
+    readonly '--ag-selected-row-background-color': "Selected row background color";
+    readonly '--ag-foreground-color': "Main text color";
+    readonly '--ag-header-foreground-color': "Header text color";
+    readonly '--ag-secondary-foreground-color': "Secondary text color (disabled, etc.)";
+    readonly '--ag-border-color': "Main border color for cells";
+    readonly '--ag-header-border-color': "Header border color";
+    readonly '--ag-row-border-color': "Row border color";
+    readonly '--ag-borders': "Enable/disable borders (1 or 0)";
+    readonly '--ag-borders-critical': "Critical borders only (1 or 0)";
+    readonly '--ag-checkbox-checked-color': "Checkbox checked color";
+    readonly '--ag-checkbox-unchecked-color': "Checkbox unchecked color";
+    readonly '--ag-input-focus-border-color': "Input focus border color";
+    readonly '--ag-wrapper-border-radius': "Grid wrapper border radius";
+    readonly '--ag-card-shadow': "Card/panel shadow";
+    readonly '--ag-popup-shadow': "Popup/dropdown shadow";
+};
+export declare const getAvailableCssVariables: () => {
+    readonly '--ag-row-height': "Height of each row (e.g., \"45px\")";
+    readonly '--ag-header-height': "Height of header row (e.g., \"44px\")";
+    readonly '--ag-cell-horizontal-padding': "Horizontal padding in cells (e.g., \"12px\")";
+    readonly '--ag-cell-vertical-padding': "Vertical padding in cells (e.g., \"8px\")";
+    readonly '--ag-grid-size': "Base size unit for consistent spacing (e.g., \"8px\")";
+    readonly '--ag-background-color': "Main grid background color";
+    readonly '--ag-header-background-color': "Header background color";
+    readonly '--ag-odd-row-background-color': "Alternate row background color";
+    readonly '--ag-row-hover-color': "Row hover background color";
+    readonly '--ag-selected-row-background-color': "Selected row background color";
+    readonly '--ag-foreground-color': "Main text color";
+    readonly '--ag-header-foreground-color': "Header text color";
+    readonly '--ag-secondary-foreground-color': "Secondary text color (disabled, etc.)";
+    readonly '--ag-border-color': "Main border color for cells";
+    readonly '--ag-header-border-color': "Header border color";
+    readonly '--ag-row-border-color': "Row border color";
+    readonly '--ag-borders': "Enable/disable borders (1 or 0)";
+    readonly '--ag-borders-critical': "Critical borders only (1 or 0)";
+    readonly '--ag-checkbox-checked-color': "Checkbox checked color";
+    readonly '--ag-checkbox-unchecked-color': "Checkbox unchecked color";
+    readonly '--ag-input-focus-border-color': "Input focus border color";
+    readonly '--ag-wrapper-border-radius': "Grid wrapper border radius";
+    readonly '--ag-card-shadow': "Card/panel shadow";
+    readonly '--ag-popup-shadow': "Popup/dropdown shadow";
+};
+export type BaseDataGridCssVariable = keyof typeof BASE_DATA_GRID_CSS_VARIABLES;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qucoon-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",