@gobolt/genesis 0.3.21 → 0.3.23

package/dist/components/index.ts

@@ -1,7 +1,7 @@
 
-export { default as Button } from './Button/Button';
-export { default as UtilityButton } from './UtilityButton/UtilityButton';
-export { default as TableWithControls } from './TableWithControls/TableWithControls';
-export { useTableWithControls } from './TableWithControls/useTableWithControls';
-export { default as Table } from './Table/Table';
-export { useTable } from './Table/useTable';
+export { default as Button } from './Button/Button.js';
+export { default as UtilityButton } from './UtilityButton/UtilityButton.js';
+export { default as TableWithControls } from './TableWithControls/TableWithControls.js';
+export { useTableWithControls } from './TableWithControls/useTableWithControls.js';
+export { default as Table } from './Table/Table.js';
+export { useTable } from './Table/useTable.js';

package/dist/constants/index.js

@@ -1,4 +1,4 @@
-export var TYPE = {
+export const TYPE = {
     primary: "primary",
     secondary: "secondary",
     tertiary: "tertiary",
@@ -6,12 +6,12 @@ export var TYPE = {
     utility: "utility",
     icon: "icon",
 };
-export var BREAKPOINTS = {
+export const BREAKPOINTS = {
     wide: "wide",
     medium: "medium",
     narrow: "narrow",
 };
-export var STATE = {
+export const STATE = {
     active: "active",
     hover: "hover",
     pressed: "pressed",
@@ -27,7 +27,7 @@ export var STATE = {
     removed: "removed",
     hollow: "hollow",
 };
-export var TYPOGRAPHY_VARIANT = {
+export const TYPOGRAPHY_VARIANT = {
     display1: "display1",
     display2: "display2",
     display3: "display3",
@@ -56,18 +56,18 @@ export var TYPOGRAPHY_VARIANT = {
     digits2: "digits2",
     digits3: "digits3",
 };
-export var BUTTON_VARIANT = {
+export const BUTTON_VARIANT = {
     primary: "primary",
     secondary: "secondary",
     tertiary: "tertiary",
 };
-export var SIZE = {
+export const SIZE = {
     small: "small",
     medium: "medium",
     large: "large",
     standard: "standard",
 };
-export var BADGE = {
+export const BADGE = {
     appointment: "appointment",
     asn: "asn",
     inventory: "inventory",
@@ -79,11 +79,11 @@ export var BADGE = {
     system: "system",
 };
 export default {
-    TYPE: TYPE,
-    BREAKPOINTS: BREAKPOINTS,
-    STATE: STATE,
-    TYPOGRAPHY_VARIANT: TYPOGRAPHY_VARIANT,
-    BUTTON_VARIANT: BUTTON_VARIANT,
-    SIZE: SIZE,
-    BADGE: BADGE,
+    TYPE,
+    BREAKPOINTS,
+    STATE,
+    TYPOGRAPHY_VARIANT,
+    BUTTON_VARIANT,
+    SIZE,
+    BADGE,
 };

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 
-export { default as Button } from './components/Button/Button';
-export { default as UtilityButton } from './components/UtilityButton/UtilityButton';
-export { default as TableWithControls } from './components/TableWithControls/TableWithControls';
-export { useTableWithControls } from './components/TableWithControls/useTableWithControls';
-export { default as Table } from './components/Table/Table';
-export { useTable } from './components/Table/useTable';
-export * from './constants';
-export * from './utils/styled';
-export * from './styles/theme/genesis-theme.types';
+export { default as Button } from './components/Button/Button.js';
+export { default as UtilityButton } from './components/UtilityButton/UtilityButton.js';
+export { default as TableWithControls } from './components/TableWithControls/TableWithControls.js';
+export { useTableWithControls } from './components/TableWithControls/useTableWithControls.js';
+export { default as Table } from './components/Table/Table.js';
+export { useTable } from './components/Table/useTable.js';
+export * from './constants/index.js';
+export * from './utils/styled.js';
+export * from './styles/theme/genesis-theme.types.js';

package/dist/index.js

@@ -0,0 +1,10 @@
+
+export { default as Button } from './components/Button/Button.js';
+export { default as UtilityButton } from './components/UtilityButton/UtilityButton.js';
+export { default as TableWithControls } from './components/TableWithControls/TableWithControls.js';
+export { useTableWithControls } from './components/TableWithControls/useTableWithControls.js';
+export { default as Table } from './components/Table/Table.js';
+export { useTable } from './components/Table/useTable.js';
+export * from './constants/index.js';
+export * from './utils/styled.js';
+export * from './styles/theme/genesis-theme.types.js';

package/dist/index.ts

@@ -1,10 +1,10 @@
 
-export { default as Button } from './components/Button/Button';
-export { default as UtilityButton } from './components/UtilityButton/UtilityButton';
-export { default as TableWithControls } from './components/TableWithControls/TableWithControls';
-export { useTableWithControls } from './components/TableWithControls/useTableWithControls';
-export { default as Table } from './components/Table/Table';
-export { useTable } from './components/Table/useTable';
-export * from './constants';
-export * from './utils/styled';
-export * from './styles/theme/genesis-theme.types';
+export { default as Button } from './components/Button/Button.js';
+export { default as UtilityButton } from './components/UtilityButton/UtilityButton.js';
+export { default as TableWithControls } from './components/TableWithControls/TableWithControls.js';
+export { useTableWithControls } from './components/TableWithControls/useTableWithControls.js';
+export { default as Table } from './components/Table/Table.js';
+export { useTable } from './components/Table/useTable.js';
+export * from './constants/index.js';
+export * from './utils/styled.js';
+export * from './styles/theme/genesis-theme.types.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.3.21",
+  "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;