@gobolt/genesis 0.3.22 → 0.3.23

package/dist/utils/icon-util.d.ts

@@ -1,3 +1,3 @@
-export declare const getIcon: (name: string) => import("react/jsx-runtime").JSX.Element;
+export declare const getIcon: (name: string) => import("react/jsx-runtime").JSX.Element | null;
 export declare const getIconColor: (state: any, theme: any) => any;
-export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean, hasIcon?: boolean, customIcon?: any) => any;
+export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean, hasIcon?: boolean, customIcon?: null) => import("react/jsx-runtime").JSX.Element | null;

package/dist/utils/icon-util.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { STATE } from "@gobolt/genesis/constants";
-const iconSize = 18;
+var iconSize = 18;
 // check circle filled & outline
 import { FaCircleCheck } from "react-icons/fa6";
 import { HiOutlineCheckCircle } from "react-icons/hi";
@@ -21,7 +21,7 @@ import { HiOutlineClock } from "react-icons/hi";
 import { HiOutlineGlobe } from "react-icons/hi";
 import { TbFiles } from "react-icons/tb";
 import { LuTag } from "react-icons/lu";
-export const getIcon = (name) => {
+export var getIcon = function (name) {
     switch (name.toLowerCase()) {
         case "orders": {
             return _jsx(LuTag, {});
@@ -37,7 +37,7 @@ export const getIcon = (name) => {
         }
     }
 };
-export const getIconColor = (state, theme) => {
+export var getIconColor = function (state, theme) {
     switch (state) {
         case STATE.error: {
             return theme.colors.status.error.onsurface;
@@ -60,7 +60,10 @@ export const getIconColor = (state, theme) => {
         }
     }
 };
-export const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, customIcon = null) => {
+export var getBadgeStateIcon = function (state, color, isFilled, hasIcon, customIcon) {
+    if (isFilled === void 0) { isFilled = true; }
+    if (hasIcon === void 0) { hasIcon = true; }
+    if (customIcon === void 0) { customIcon = null; }
     if (!state || !hasIcon) {
         return null;
     }
@@ -71,46 +74,46 @@ export const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true,
         switch (state) {
             // isFilled is false
             case STATE.warning: {
-                return _jsx(HiOutlineExclamationCircle, { size: iconSize, style: { color } });
+                return _jsx(HiOutlineExclamationCircle, { size: iconSize, style: { color: color } });
             }
             case STATE.error: {
-                return _jsx(HiOutlineXCircle, { size: iconSize, style: { color } });
+                return _jsx(HiOutlineXCircle, { size: iconSize, style: { color: color } });
             }
             case STATE.success: {
-                return _jsx(HiOutlineCheckCircle, { size: iconSize, style: { color } });
+                return _jsx(HiOutlineCheckCircle, { size: iconSize, style: { color: color } });
             }
             case STATE.progress: {
-                return _jsx(HiOutlineClock, { size: iconSize, style: { color } });
+                return _jsx(HiOutlineClock, { size: iconSize, style: { color: color } });
             }
             case STATE.removed: {
-                return _jsx(HiOutlineMinusCircle, { size: iconSize, style: { color } });
+                return _jsx(HiOutlineMinusCircle, { size: iconSize, style: { color: color } });
             }
             case STATE.info:
             default: {
-                return _jsx(PiInfo, { size: iconSize, style: { color } });
+                return _jsx(PiInfo, { size: iconSize, style: { color: color } });
             }
         }
     }
     switch (state) {
         // isFilled is true
         case STATE.warning: {
-            return _jsx(HiExclamationCircle, { size: iconSize, style: { color } });
+            return _jsx(HiExclamationCircle, { size: iconSize, style: { color: color } });
         }
         case STATE.error: {
-            return _jsx(HiXCircle, { size: iconSize, style: { color } });
+            return _jsx(HiXCircle, { size: iconSize, style: { color: color } });
         }
         case STATE.success: {
-            return _jsx(FaCircleCheck, { size: iconSize, style: { color } });
+            return _jsx(FaCircleCheck, { size: iconSize, style: { color: color } });
         }
         case STATE.progress: {
-            return _jsx(HiClock, { size: iconSize, style: { color } });
+            return _jsx(HiClock, { size: iconSize, style: { color: color } });
         }
         case STATE.removed: {
-            return _jsx(HiMinusCircle, { size: iconSize, style: { color } });
+            return _jsx(HiMinusCircle, { size: iconSize, style: { color: color } });
         }
         case STATE.info:
         default: {
-            return _jsx(PiInfoFill, { size: iconSize, style: { color } });
+            return _jsx(PiInfoFill, { size: iconSize, style: { color: color } });
         }
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",

package/dist/components/Button/Button.tsx

@@ -1,59 +0,0 @@
-import React, { MouseEvent } from "react";
-import * as S from "./styles";
-import type { ButtonProps as AntButtonProperties } from "antd/es/button";
-import { STATE } from "../../constants";
-
-type ButtonThemeType =
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "destructive"
-  | "utility"
-  | "icon";
-
-export interface ButtonProps
-  extends Omit<AntButtonProperties, "type" | "size"> {
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-  children?: React.ReactNode;
-  themeType?: ButtonThemeType;
-  state?: keyof typeof STATE;
-  isIconButton?: boolean;
-  size?: "small" | "normal" | "large";
-  isSelected?: boolean;
-  icon?: React.ReactNode;
-}
-
-const getState = (state: keyof typeof STATE, isSelected: boolean) => {
-  if (isSelected) {
-    return "selected";
-  }
-  return state === "active" || state === "disabled" ? state : "active";
-};
-
-const Button: React.FC<ButtonProps> = ({
-  children,
-  onClick,
-  themeType = "primary",
-  state = "active",
-  isIconButton = false,
-  size = "normal",
-  isSelected,
-  ...rest
-}) => {
-  const buttonState = getState(state, isSelected);
-  return (
-    <S.Button
-      onClick={onClick}
-      $themeType={themeType}
-      $state={buttonState}
-      disabled={state === "disabled" || rest.disabled}
-      $isIconButton={isIconButton}
-      size={size}
-      {...rest}
-    >
-      {children}
-    </S.Button>
-  );
-};
-
-export default Button;

package/dist/components/Table/Table.tsx

@@ -1,112 +0,0 @@
-/*
-This component is used to display a table with Ant Design pagination
-Instead, we use TablePagination component that leverages 
-this Table but replaces the default pagination with CustomPagination components
-*/
-
-import * as React from "react";
-import * as S from "./styles";
-import { ColumnType } from "antd/es/table";
-import type { TablePaginationConfig } from "antd/es/table";
-import type { StyledTableProps } from "./styles";
-import CustomPagination, {
-  PaginationStyle,
-} from "./TableControls/CustomPagination";
-import type { ActionEvent } from "@/lib/types";
-
-export type Change = (actionEvent: ActionEvent) => void;
-
-export type SelectionType = "checkbox" | "radio";
-
-export interface TableProps<T extends Record<string, any>> {
-  dataSource: T[];
-  columns: ColumnType<T>[];
-  rowKey?: keyof T | ((record: T) => React.Key);
-  size?: "small" | "middle" | "large";
-  rowSelection?: {
-    type?: SelectionType;
-    selectedRowKeys?: React.Key[];
-    onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
-    getCheckboxProps?: (record: T) => { disabled?: boolean; name?: string };
-  };
-  onChange?: (
-    pagination: TablePaginationType,
-    filters: Record<string, React.Key[]>,
-    sorter: SorterResult<T> | SorterResult<T>[]
-  ) => void;
-  loading?: boolean;
-  pagination?:
-    | (TablePaginationConfig & { paginationStyle?: PaginationStyle })
-    | false;
-  scroll?: {
-    x?: number | string;
-    y?: number | string;
-  };
-  bordered?: boolean;
-  locale?: {
-    emptyText?: React.ReactNode;
-  };
-  [key: string]: any; // Allow additional props
-  isMainContentCell?: boolean;
-}
-
-// Additional type definitions
-export type TablePaginationType = {
-  pageSize?: number;
-  current?: number;
-  total?: number;
-  onChange?: (page: number, pageSize: number) => void;
-};
-
-export type SorterResult<T> = {
-  column?: ColumnType<T>;
-  order?: "ascend" | "descend" | null;
-  field?: keyof T | string | React.Key | readonly React.Key[];
-  columnKey?: React.Key;
-};
-
-function Table<T extends Record<string, any>>({
-  columns,
-  dataSource,
-  rowKey = "id",
-  size = "small",
-  onChange,
-  rowSelection,
-  pagination,
-  isMainContentCell = false,
-  ...rest
-}: TableProps<T>) {
-  const paginationConfig =
-    pagination === false
-      ? false
-      : {
-          ...pagination,
-          itemRender: undefined, // Clear any existing itemRender to avoid conflicts
-          render: (properties: TablePaginationConfig) => (
-            <CustomPagination
-              {...properties}
-              paginationStyle={
-                pagination?.paginationStyle || PaginationStyle.SIMPLE
-              }
-            />
-          ),
-        };
-
-  return (
-    <S.Table
-      data-testid="Table"
-      dataSource={dataSource}
-      columns={columns}
-      rowKey={rowKey}
-      locale={{ emptyText: "No Data" }}
-      size={size}
-      onChange={onChange}
-      rowSelection={rowSelection}
-      pagination={paginationConfig}
-      $isMainContentCell={isMainContentCell}
-      {...rest}
-    />
-  );
-}
-
-export default Table;

package/dist/components/Table/useTable.ts

@@ -1,194 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-
-import type { ColumnsType } from "antd/es/table";
-import type { SelectionType } from "./Table";
-
-type SorterResult<T> = {
-  column?: ColumnsType<T>[number];
-  order?: "ascend" | "descend" | null;
-  field?: keyof T | string;
-};
-
-// Function to sort data by field and order
-const sortData = <T extends Record<string, any>>(
-  data: T[],
-  sorter: SorterResult<T> | SorterResult<T>[]
-): T[] => {
-  // Handle case when no sorting is applied
-  if (!sorter || (Array.isArray(sorter) && sorter.length === 0)) {
-    return [...data];
-  }
-
-  // Handle multiple sorters
-  if (Array.isArray(sorter)) {
-    return [...data].sort((a, b) => {
-      for (const sort of sorter) {
-        if (!sort.field) continue;
-
-        const field = sort.field as keyof T;
-        const aValue = a[field];
-        const bValue = b[field];
-
-        if (aValue < bValue) return sort.order === "ascend" ? -1 : 1;
-        if (aValue > bValue) return sort.order === "ascend" ? 1 : -1;
-      }
-      return 0;
-    });
-  }
-
-  // Handle single sorter
-  if (sorter.field) {
-    const field = sorter.field as keyof T;
-    return [...data].sort((a, b) => {
-      const aValue = a[field];
-      const bValue = b[field];
-
-      if (sorter.order === "ascend") {
-        if (aValue < bValue) return -1;
-        if (aValue > bValue) return 1;
-        return 0;
-      }
-
-      if (sorter.order === "descend") {
-        if (aValue < bValue) return 1;
-        if (aValue > bValue) return -1;
-        return 0;
-      }
-
-      return 0;
-    });
-  }
-
-  return [...data];
-};
-
-/*
-Example of disableRowSelection function which can be passed to the useTable hook
-const disableRowSelection = (record: any) => ({
-      disabled: record.status === "completed", // Column configuration not to be checked
-      name: record.status.toString(),
-});
-*/
-
-const defaultRowSelection = (record: any) => ({
-  disabled: false, // Add your disable logic here
-  name: record.id,
-});
-
-export type UseTableConfig = {
-  columns: ColumnsType<any>;
-  filters?: Record<string, any>;
-  fetchUrl?: string;
-  fetchOptions?: RequestInit;
-  selectionType?: SelectionType;
-  simulateDelay?: number;
-  disableRowSelection?: (record: any) => unknown;
-  disableAutoFetch?: boolean; // New option to disable automatic fetching
-  dataSource?: any[]; // Allow passing data directly
-};
-
-export const useTable = <T extends Record<string, any>>(useTableConfig) => {
-  const [isLoading, setLoading] = useState(true);
-
-  const {
-    columns,
-    filters = null,
-    fetchUrl = "/table/data",
-    fetchOptions = {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(filters),
-    },
-    selectionType = "checkbox",
-    simulateDelay = 0,
-    disableRowSelection = defaultRowSelection,
-    disableAutoFetch = false,
-    dataSource: initialDataSource = [],
-  } = useTableConfig as UseTableConfig;
-  // State to hold the original data and the current data
-
-  const [originalData, setOriginalData] = useState<T[]>(initialDataSource);
-  const [data, setData] = useState<{
-    dataSource: T[];
-    columns: ColumnsType<T>;
-    error: Error | null;
-  }>({
-    dataSource: initialDataSource,
-    columns,
-    error: null,
-  });
-  const [selectedRows, setSelectedRows] = useState<T[]>([]);
-
-  // Load initial data
-  useEffect(() => {
-    // If auto-fetch is disabled and we have initial data, skip fetching
-    if (disableAutoFetch && initialDataSource.length > 0) {
-      setLoading(false);
-      return;
-    }
-
-    const fetchData = async () => {
-      try {
-        const response = await fetch(fetchUrl, fetchOptions);
-        const result = await response.json();
-        const sourceData = result.data || [];
-        setOriginalData(sourceData);
-        setData({
-          dataSource: sourceData,
-          columns,
-          error: null,
-        });
-      } catch (error) {
-        console.error("Error fetching table data:", error);
-        // Fallback to static data
-        setData({
-          dataSource: [],
-          columns,
-          error: error instanceof Error ? error : new Error(String(error)),
-        });
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    if (simulateDelay > 0) {
-      setTimeout(fetchData, simulateDelay);
-    } else {
-      fetchData();
-    }
-  }, [fetchOptions, disableAutoFetch, initialDataSource]);
-
-  const handleRowSelection = useCallback(
-    (selectedRowKeys: React.Key[], selectedRows: T[]) => {
-      console.log("Row Selected:", selectedRowKeys, selectedRows);
-
-      setSelectedRows(selectedRows);
-    },
-    []
-  );
-
-  // Function to manually update data source (for external data fetching)
-  const updateDataSource = useCallback((newDataSource: T[]) => {
-    setOriginalData(newDataSource);
-    setData((prev) => ({
-      ...prev,
-      dataSource: newDataSource,
-    }));
-  }, []);
-
-  const rowSelection = {
-    type: selectionType,
-    onChange: handleRowSelection,
-    getCheckboxProps: disableRowSelection,
-  };
-
-  return {
-    ...data,
-    isLoading,
-    rowSelection,
-    selectedRows,
-    updateDataSource,
-  };
-};

package/dist/components/TableWithControls/TableWithControls.tsx

@@ -1,54 +0,0 @@
-import TableControls from "../Table/TableControls";
-import Table from "../Table";
-import type { TableProps } from "../Table";
-import { type TableControlsData } from "../Table/TableControls/TableControls";
-import type { Change } from "../Table/Table";
-
-export interface TableWithControlsProps {
-  tableControlsData: TableControlsData;
-  tableData: TableProps<Record<string, any>>;
-  onChange: (event: { event: string; payload: any }) => void;
-}
-
-const TableWithControls = ({
-  tableData,
-  tableControlsData,
-  onChange,
-}: TableWithControlsProps) => {
-  const { primaryTableRowData, secondaryTableRowData } = tableControlsData;
-  const { dataSource, columns, rowSelection } = tableData;
-
-  // handle changes from the table controls
-  const onTableControlsChange: Change = (event: {
-    event: string;
-    payload: any;
-  }) => {
-    onChange(event);
-  };
-
-  // handle changes from the table
-  const onTableChange = (pagination: any, filters: any, sorter: any) => {
-    onChange({
-      event: "tableChange",
-      payload: { pagination, filters, sorter },
-    });
-  };
-
-  return (
-    <>
-      <TableControls
-        primaryTableRowData={primaryTableRowData}
-        secondaryTableRowData={secondaryTableRowData}
-        onChange={onTableControlsChange}
-      />
-      <Table
-        dataSource={dataSource}
-        columns={columns}
-        rowSelection={rowSelection}
-        onChange={onTableChange}
-      />
-    </>
-  );
-};
-
-export default TableWithControls;

package/dist/components/TableWithControls/useTableWithControls.tsx

@@ -1,161 +0,0 @@
-import { useState } from "react";
-
-import { useTable, type UseTableConfig } from "../Table/useTable";
-import { mockColumns, mockDataSource } from "../Table/__mocks__/table-mocks";
-import { ActionEvent, TableEventPayload } from "../../types/events";
-
-//import
-
-const tableControlsData = {
-  primaryTableRowData: {
-    sortOptions: [
-      { value: "status", label: <span>Status</span> },
-      { value: "address", label: <span>Address</span> },
-      { value: "job_subtype", label: <span>Type</span> },
-    ],
-    searchByPlaceholder: "Search by Address",
-    isSortedAscending: true,
-  },
-  secondaryTableRowData: {
-    groups: {
-      orders: ["Cancelled", "Paused"],
-      warehouse: ["D2C"],
-      availability: ["Out of Stock"],
-    },
-    totalRecords: mockDataSource.appointments.length,
-  },
-};
-
-const startingUseTableConfig: UseTableConfig = {
-  columns: mockColumns,
-  filters: {
-    order: "asc",
-  },
-  // Disable auto-fetch to allow external data management
-  disableAutoFetch: true,
-  dataSource: [],
-};
-
-export const useTableWithControls = (tableConfig: UseTableConfig) => {
-  const [useTableConfig, setUseTableConfig] = useState<UseTableConfig>(
-    startingUseTableConfig
-  );
-
-  const [groups, setGroups] = useState(
-    tableControlsData.secondaryTableRowData.groups
-  );
-
-  const [primaryTableRowData, setPrimaryTableRowData] = useState(
-    tableControlsData.primaryTableRowData
-  );
-
-  const { secondaryTableRowData } = tableControlsData;
-
-  const newSecondaryTableRowData = {
-    ...secondaryTableRowData,
-    groups,
-    totalRecords: safeDataSource.length,
-  };
-
-  const { dataSource, columns, rowSelection, updateDataSource } =
-    useTable(useTableConfig);
-
-  // Ensure we always return a valid object, even if dataSource is empty
-  const safeDataSource = dataSource || [];
-
-  const onGroupItemClick = (title: string, item: string) => {
-    const newGroups = { ...groups };
-    newGroups[title] = newGroups[title].filter((group) => group !== item);
-    setGroups(newGroups);
-  };
-
-  const onChange = (actionEvent: ActionEvent<TableEventPayload>) => {
-    if (actionEvent.event === "inputChange") {
-      const { value } = actionEvent.payload;
-      if (typeof value === "string") {
-        setUseTableConfig((previous) => ({
-          ...previous,
-          filters: {
-            ...previous.filters,
-            search: value,
-          },
-          fetchOptions: {
-            ...previous.fetchOptions,
-            body: JSON.stringify({
-              filters: {
-                ...previous.filters,
-                search: value,
-              },
-            }),
-          },
-        }));
-      }
-    }
-
-    if (actionEvent.event === "primaryChange") {
-      const { value } = actionEvent.payload;
-      if (typeof value === "string") {
-        setUseTableConfig((previous) => ({
-          ...previous,
-          filters: {
-            ...previous.filters,
-            sort: value,
-          },
-          fetchOptions: {
-            ...previous.fetchOptions,
-            body: JSON.stringify({
-              filters: {
-                ...previous.filters,
-                sort: value,
-              },
-            }),
-          },
-        }));
-      }
-    }
-
-    if (actionEvent.event === "groupItemClick") {
-      const { title, item } = actionEvent.payload;
-      if (typeof title === "string" && typeof item === "string") {
-        onGroupItemClick(title, item);
-      }
-    }
-
-    if (actionEvent.event === "orderClick") {
-      setPrimaryTableRowData((previous) => ({
-        ...previous,
-        isSortedAscending: !previous.isSortedAscending,
-      }));
-
-      const { value } = actionEvent.payload;
-      if (typeof value === "string") {
-        setUseTableConfig((previous) => ({
-          ...previous,
-          filters: {
-            ...previous.filters,
-            order: value,
-          },
-          fetchOptions: {
-            ...previous.fetchOptions,
-            body: JSON.stringify({
-              filters: {
-                ...previous.filters,
-                order: value,
-              },
-            }),
-          },
-        }));
-      }
-    }
-  };
-
-  return {
-    onChange,
-    primaryTableRowData,
-    secondaryTableRowData: newSecondaryTableRowData,
-    dataSource: safeDataSource,
-    columns,
-    rowSelection,
-    updateDataSource,
-  };
-};