qucoon-components 0.0.3 → 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/form/EnterAddressForm.d.ts

@@ -0,0 +1,16 @@
+import { FormikValues } from 'formik';
+import { Formik } from '../../../utilities/types';
+import { HTMLAttributes } from 'react';
+type EnterAddressFormProps<T extends FormikValues> = {
+    formik: Formik<T>;
+    countryInputName: string;
+    stateInputName: string;
+    cityInputName?: string;
+    localGovernmentInputName?: string;
+    streetAddressInputName?: string;
+    postalCodeInputName?: string;
+    manuallyInputCity?: boolean;
+    requiredFields?: string[];
+} & React.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const EnterAddressForm: <T extends FormikValues>({ formik, countryInputName, stateInputName, cityInputName, localGovernmentInputName, streetAddressInputName, postalCodeInputName, manuallyInputCity, requiredFields, }: EnterAddressFormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default EnterAddressForm;

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

@@ -1,4 +1,6 @@
 /**
  * Auto-generated barrel for src/components/ui/form
  */
+export { default as EnterAddressForm } from './EnterAddressForm';
+export * from './EnterAddressForm';
 export * from './dashboard';

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

@@ -1,91 +1,8 @@
-import { ColDef, GridOptions } from 'ag-grid-community';
+import { GridOptions } from 'ag-grid-community';
 import { CSSProperties } from 'react';
 import { DeleteActionRendererProps, EditActionRendererProps, HeaderControlsProps } from '../..';
 import { ViewActionRendererProps } from './renderers/ViewActionRenderer';
-export type ColumnType = Omit<ColDef, "field"> & {
-    field: string;
-    style?: React.CSSProperties;
-    onClick?: (data: any) => void;
-    path?: string;
-    isCurrency?: boolean;
-    isDate?: boolean;
-    statusIndicator?: "fail" | "success" | "normal";
-    sortable?: boolean;
-    filterable?: boolean;
-    filterType?: 'text' | 'number' | 'date' | 'select' | 'boolean';
-    filterOptions?: {
-        label: string;
-        value: any;
-    }[];
-    filterPlaceholder?: string;
-};
-export type ServerSideParams = {
-    pageNumber: number;
-    pageSize: number;
-    search?: string;
-    sortBy?: string;
-    sortDir?: 'ASC' | 'DESC';
-    filters?: Record<string, any>;
-    dateFilters?: Record<string, {
-        from?: string;
-        to?: string;
-    }>;
-};
-export type FilterState = {
-    searchText: string;
-    columnFilters: Record<string, any>;
-    dateFilters: Record<string, {
-        from?: string;
-        to?: string;
-    }>;
-    sort: {
-        field: string;
-        direction: "ASC" | "DESC";
-    };
-};
-export type FilterActions = {
-    setSearchText: (text: string) => void;
-    setColumnFilter: (field: string, value: any) => void;
-    setDateFilter: (field: string, range: {
-        from?: string;
-        to?: string;
-    }) => void;
-    setSort: (field: string, direction: "ASC" | "DESC") => void;
-    resetFilters: () => void;
-    applyFilters: () => void;
-};
-export type FilterPanelProps = FilterState & FilterActions & {
-    availableFields: Array<{
-        field: string;
-        label: string;
-        type: 'text' | 'select' | 'date';
-        options?: string[];
-    }>;
-    onClose?: () => void;
-    showGlobalSearch?: boolean;
-    showColumnFilters?: boolean;
-    showSortingControls?: boolean;
-};
-export type ServerSideOperations = "refresh" | "search" | "filter" | "sort" | "pagination";
-export type ServerSideOperationsConfig = Partial<Record<ServerSideOperations, {
-    fetchRows?: (params: ServerSideParams) => Promise<DataGridRows>;
-    onFetchRowsSuccess?: (response: DataGridRows) => void;
-    onFetchRowsError?: (error: unknown) => void;
-}>>;
-export type DataGridRows<T = any> = {
-    data: T[];
-    pageNumber?: number;
-    pageSize?: number;
-    totalPages?: number;
-    totalRecords?: number;
-};
-export type DefaultPaginationConfig = {
-    isPageZeroIndexed?: boolean;
-    pageNumber?: number;
-    pageSize?: number;
-    totalRecords?: number;
-    totalPages?: number;
-};
+import { ColumnType, DataGridCustomization, DataGridRows, DefaultPaginationConfig, FilterPanelProps, ServerSideOperationsConfig, ServerSideParams } from './types';
 export type BaseDataGridProps = {
     title?: string;
     uniqueRowId: string;
@@ -112,12 +29,18 @@ export type BaseDataGridProps = {
         optionName: string;
         onClick: (data: any) => void;
         optionStyle?: CSSProperties;
-    }[];
+    }[] | ((rowData: any) => {
+        optionName: string;
+        onClick: (data: any) => void;
+        optionStyle?: CSSProperties;
+    }[]);
     renderFilterPanel?: React.FC<FilterPanelProps>;
     availableFilterFields?: FilterPanelProps["availableFields"];
     defaultHeaderProps?: HeaderControlsProps;
     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/hooks/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Auto-generated barrel for src/components/ui/table/hooks
+ */
+export { default as useCellCopy } from './useCellCopy';
+export * from './useCellCopy';
+export { default as useDataGridDynamicStyles } from './useDataGridDynamicStyles';
+export * from './useDataGridDynamicStyles';
+export { default as useDataGridTheme } from './useDataGridTheme';
+export * from './useDataGridTheme';

package/dist/types/components/ui/table/hooks/useCellCopy.d.ts

@@ -0,0 +1,6 @@
+import { AgGridReact } from 'ag-grid-react';
+export declare const useCellCopy: (gridRef: React.RefObject<AgGridReact>) => {
+    copySelectedCells: () => void;
+    copySelectedRows: () => void;
+};
+export default useCellCopy;

package/dist/types/components/ui/table/hooks/useDataGridDynamicStyles.d.ts

@@ -0,0 +1,3 @@
+import { DataGridTheme } from '../types';
+declare const useDataGridDynamicStyles: (theme: DataGridTheme) => Record<string, string>;
+export default useDataGridDynamicStyles;

package/dist/types/components/ui/table/hooks/useDataGridTheme.d.ts

@@ -0,0 +1,3 @@
+import { DataGridTheme } from '../types';
+export declare const useDataGridTheme: (customTheme?: DataGridTheme) => DataGridTheme;
+export default useDataGridTheme;

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

@@ -8,5 +8,7 @@ export * from './BaseTable';
 export { default as Table } from './Table';
 export * from './Table';
 export * from './components';
+export * from './hooks';
 export * from './renderers';
 export * from './tablePanels';
+export * from './types';

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/tablePanels/DefaultFilterPanel.d.ts

@@ -0,0 +1,3 @@
+import { FilterPanelProps } from '../types';
+declare const DefaultFilterPanel: React.FC<FilterPanelProps>;
+export default DefaultFilterPanel;

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

@@ -5,3 +5,5 @@ export { default as BaseTableHeaderControls } from './BaseTableHeaderControls';
 export * from './BaseTableHeaderControls';
 export { default as BaseTablePaginationPanel } from './BaseTablePaginationPanel';
 export * from './BaseTablePaginationPanel';
+export { default as DefaultFilterPanel } from './DefaultFilterPanel';
+export * from './DefaultFilterPanel';

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

@@ -0,0 +1,225 @@
+import { ColDef, GridOptions, SelectionChangedEvent } from 'ag-grid-community';
+import { CSSProperties } from 'react';
+import { HeaderControlsProps, StatusRendererProps } from '../../..';
+export type ColumnType = Omit<ColDef, "field"> & {
+    field: string;
+    style?: React.CSSProperties;
+    onClick?: (data: any) => void;
+    path?: string;
+    isCurrency?: boolean;
+    isDate?: boolean;
+    statusIndicator?: "fail" | "success" | "normal";
+    sortable?: boolean;
+    filterable?: boolean;
+    filterType?: 'text' | 'number' | 'date' | 'select' | 'boolean';
+    filterOptions?: {
+        label: string;
+        value: any;
+    }[];
+    filterPlaceholder?: string;
+};
+export interface DataGridTheme {
+    container?: {
+        className?: string;
+        style?: CSSProperties;
+        borderRadius?: string;
+        backgroundColor?: string;
+        boxShadow?: string;
+    };
+    table?: {
+        className?: string;
+        style?: CSSProperties;
+        agThemeClass?: string;
+        customCssVariables?: Partial<Record<BaseDataGridCssVariable, string>>;
+    };
+    header?: {
+        className?: string;
+        style?: CSSProperties;
+        backgroundColor?: string;
+        fontWeight?: string | number;
+        fontSize?: string;
+        color?: string;
+    };
+    row?: {
+        className?: string;
+        style?: CSSProperties;
+        alternateRowBackgroundColor?: string;
+        hoverColor?: string;
+        selectedColor?: string;
+        borderColor?: string;
+    };
+    pagination?: {
+        className?: string;
+        style?: CSSProperties;
+    };
+    filterPanel?: {
+        className?: string;
+        style?: CSSProperties;
+        backgroundColor?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+    };
+}
+export interface DataGridLayout {
+    containerHeight?: string | number;
+    containerMinHeight?: string | number;
+    containerMaxHeight?: string | number;
+    rowHeight?: number;
+    headerHeight?: number;
+    domLayout?: 'normal' | 'autoHeight' | 'print';
+    pagination?: {
+        pageSize?: number;
+        pageSizeSelector?: number[] | false;
+        suppressPaginationPanel?: boolean;
+    };
+}
+export interface DataGridCustomization {
+    theme?: DataGridTheme;
+    layout?: DataGridLayout;
+    defaultColDef?: Partial<ColDef>;
+    gridOptions?: Partial<GridOptions>;
+    containerStyle?: CSSProperties;
+    className?: string;
+    components?: {
+        header?: React.FC<HeaderControlsProps>;
+        filterPanel?: React.FC<FilterPanelProps>;
+        emptyState?: React.FC<any>;
+        loadingOverlay?: React.FC<any>;
+        pagination?: React.FC<any>;
+        statusRenderer?: {
+            component: React.FC<StatusRendererProps>;
+            params?: StatusRendererProps;
+        };
+    };
+    callbacks?: {
+        onRowClick?: (event: any) => void;
+        onRowDoubleClick?: (event: any) => void;
+        onCellClick?: (event: any) => void;
+        onSelectionChanged?: (event: SelectionChangedEvent) => void;
+        onColumnResized?: (event: any) => void;
+        onSortChanged?: (event: any) => void;
+        onFilterChanged?: (event: any) => void;
+    };
+}
+export type ServerSideParams = {
+    pageNumber: number;
+    pageSize: number;
+    search?: string;
+    sortBy?: string;
+    sortDir?: 'ASC' | 'DESC';
+    filters?: Record<string, any>;
+    dateFilters?: Record<string, {
+        from?: string;
+        to?: string;
+    }>;
+};
+export type FilterState = {
+    searchText: string;
+    columnFilters: Record<string, any>;
+    dateFilters: Record<string, {
+        from?: string;
+        to?: string;
+    }>;
+    sort: {
+        field: string;
+        direction: "ASC" | "DESC";
+    };
+};
+export type FilterActions = {
+    setSearchText: (text: string) => void;
+    setColumnFilter: (field: string, value: any) => void;
+    setDateFilter: (field: string, range: {
+        from?: string;
+        to?: string;
+    }) => void;
+    setSort: (field: string, direction: "ASC" | "DESC") => void;
+    resetFilters: () => void;
+    applyFilters: () => void;
+};
+export type FilterPanelProps = FilterState & FilterActions & {
+    availableFields: Array<{
+        field: string;
+        label: string;
+        type: 'text' | 'select' | 'date';
+        options?: string[];
+    }>;
+    onClose?: () => void;
+    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, {
+    fetchRows?: (params: ServerSideParams) => Promise<DataGridRows>;
+    onFetchRowsSuccess?: (response: DataGridRows) => void;
+    onFetchRowsError?: (error: unknown) => void;
+}>>;
+export type DataGridRows<T = any> = {
+    data: T[];
+    pageNumber?: number;
+    pageSize?: number;
+    totalPages?: number;
+    totalRecords?: number;
+};
+export type DefaultPaginationConfig = {
+    isPageZeroIndexed?: boolean;
+    pageNumber?: number;
+    pageSize?: number;
+    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.3",
+  "version": "0.0.5",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",