@jasperoosthoek/react-toolbox 0.8.1 → 0.9.0

package/dist/index.js.LICENSE.txt

@@ -13,7 +13,3 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-//! moment.js
-
-//! moment.js locale configuration

package/dist/localization/LocalizationContext.d.ts

@@ -21,7 +21,7 @@ export interface LocalizationProviderProps extends RestProps {
     children?: any;
     [prop: string]: any;
 }
-export declare const LocalizationProvider: ({ lang: initialLanguage, localization: additionalLocalizationInitial, languages: languagesOverride, children, ...restProps }: LocalizationProviderProps) => React.JSX.Element;
+export declare const LocalizationProvider: ({ lang: initialLanguage, localization: additionalLocalizationInitial, languages: languagesOverride, children, ...restProps }: LocalizationProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useLocalization: () => {
     lang: string;
     languages: string[];

package/dist/utils/hooks.d.ts

@@ -1,6 +1,6 @@
 export declare const usePrevious: <T>(value: T) => T | undefined;
 export declare const useDebouncedEffect: (effect: () => void, deps: any[], delay: number) => void;
 export declare const useForceUpdate: () => () => void;
-export declare const useSetState: <T>(initialState: T) => [T, (subState: Partial<T>) => void];
+export declare const useSetState: <T>(initialState: T) => [T, (subState: Partial<T>, callback?: () => void) => void];
 export declare const useInterval: (func: () => void, value: number) => void;
 export declare const useLocalStorage: <T>(key: string, initialValue: T) => [T, (value: T) => void];

package/dist/utils/timeAndDate.d.ts

@@ -1,3 +1,6 @@
-import moment from 'moment';
 export declare const getTimestamp: () => number;
-export declare const getToday: () => moment.Moment;
+export declare const getToday: () => Date;
+export declare const formatDate: (date: Date | string, pattern?: string) => string;
+export declare const formatDateTime: (date: Date | string, pattern?: string) => string;
+export declare const toUtc: (date: Date | string, timezone?: string) => Date;
+export declare const fromUtc: (date: Date | string, timezone: string) => Date;

package/dist/utils/utils.d.ts

@@ -1,4 +1,3 @@
-import { AxiosInstance } from 'axios';
 export declare const isEmpty: (value: unknown) => boolean;
 export declare const snakeToCamelCase: (str: string) => string;
 export declare const camelToSnakeCase: (str: string) => string;
@@ -7,6 +6,7 @@ export declare const arrayToObject: <T extends any[]>(array: T, byKey: string) =
 export declare const roundFixed: (str: string | number, decimals?: number) => string;
 export declare const round: (str: string | number, decimals?: number) => number;
 export type DownloadFileOptions = {
-    axios: AxiosInstance;
+    headers?: Record<string, string>;
+    fetchFn?: typeof fetch;
 };
-export declare const downloadFile: (url: string, filename: string, options: DownloadFileOptions) => Promise<void>;
+export declare const downloadFile: (url: string, filename: string, options?: DownloadFileOptions) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasperoosthoek/react-toolbox",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "author": "jasperoosthoek",
   "license": "MIT",
   "repository": {
@@ -26,6 +26,7 @@
     "@types/jest": "^29.5.2",
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.11.19",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.5",
     "bootstrap": "^5.1.3",
     "css-loader": "^6.7.1",
@@ -43,21 +44,23 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack",
-    "prepublishOnly": "npm run build",
-    "test": "jest"
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepublishOnly": "npm run test && npm run build"
   },
   "bugs": {
     "url": "https://github.com/jasperoosthoek/react-toolbox/issues"
   },
   "homepage": "https://github.com/jasperoosthoek/react-toolbox#readme",
   "peerDependencies": {
-    "axios": "^1.4.0",
     "bootstrap": "^5.1.3",
-    "moment": "^2.29.4",
-    "react": "^19.1.0",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "react": "^19.0.0",
     "react-bootstrap": "^2.10.9",
     "react-dnd": "^16.0.1",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
     "react-localization": "^2.0.5"
   },
@@ -66,10 +69,6 @@
     "ui",
     "components"
   ],
-  "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "node"
-  },
   "browser": {
     "fs": false,
     "os": false,

package/src/__tests__/buttons.test.tsx

@@ -0,0 +1,545 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { Button } from 'react-bootstrap';
+import { LocalizationProvider } from '../localization/LocalizationContext';
+import ConfirmButton from '../components/buttons/ConfirmButton';
+import DeleteConfirmButton from '../components/buttons/DeleteConfirmButton';
+import {
+  IconButton,
+  CheckButton,
+  CopyButton,
+  CloseButton,
+  CreateButton,
+  DeleteButton,
+  EditButton,
+  SaveButton,
+  UploadTextButton,
+  makeIconButton,
+} from '../components/buttons/IconButtons';
+import { AiOutlineHome } from 'react-icons/ai';
+
+// Mock the SmallSpinner component
+jest.mock('../components/indicators/LoadingIndicator', () => ({
+  SmallSpinner: () => <div data-testid="spinner">Loading...</div>,
+}));
+
+// Test wrapper with localization context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <LocalizationProvider>
+    {children}
+  </LocalizationProvider>
+);
+
+describe('Button Components Tests', () => {
+  describe('ConfirmButton', () => {
+    const defaultProps = {
+      onConfirm: jest.fn(),
+      buttonComponent: Button,
+      children: 'Click me',
+    };
+
+    const renderWithLocalization = (ui: React.ReactElement) => {
+      return render(
+        <TestWrapper>
+          {ui}
+        </TestWrapper>
+      );
+    };
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    describe('Basic Functionality', () => {
+      it('should render the button component', () => {
+        const { getByRole } = renderWithLocalization(
+          <ConfirmButton {...defaultProps} />
+        );
+
+        expect(getByRole('button')).toBeInTheDocument();
+        expect(getByRole('button')).toHaveTextContent('Click me');
+      });
+
+      it('should not show modal initially', () => {
+        const { queryByRole } = renderWithLocalization(
+          <ConfirmButton {...defaultProps} />
+        );
+
+        expect(queryByRole('dialog')).not.toBeInTheDocument();
+      });
+
+      it('should show modal when button is clicked', () => {
+        const { getByRole } = renderWithLocalization(
+          <ConfirmButton {...defaultProps} />
+        );
+
+        fireEvent.click(getByRole('button'));
+
+        expect(getByRole('dialog')).toBeInTheDocument();
+      });
+
+      it('should close modal when cancel button is clicked', () => {
+        const { getByRole, getByText, queryByRole } = renderWithLocalization(
+          <ConfirmButton {...defaultProps} />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByRole('dialog')).toBeInTheDocument();
+
+        fireEvent.click(getByText('Cancel'));
+        expect(queryByRole('dialog')).not.toBeInTheDocument();
+      });
+
+      it('should close modal when close button is clicked', () => {
+        const { getByRole, queryByRole } = renderWithLocalization(
+          <ConfirmButton {...defaultProps} />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByRole('dialog')).toBeInTheDocument();
+
+        const closeButton = getByRole('button', { name: /close/i });
+        fireEvent.click(closeButton);
+        expect(queryByRole('dialog')).not.toBeInTheDocument();
+      });
+    });
+
+    describe('Confirm Action', () => {
+      it('should call onConfirm when confirm button is clicked', async () => {
+        const onConfirm = jest.fn();
+        const { getByRole, getByText } = renderWithLocalization(
+          <ConfirmButton {...defaultProps} onConfirm={onConfirm} />
+        );
+
+        fireEvent.click(getByRole('button'));
+        fireEvent.click(getByText('OK'));
+
+        await waitFor(() => {
+          expect(onConfirm).toHaveBeenCalledWith(expect.any(Function));
+        });
+      });
+
+      it('should close modal after onConfirm when closeUsingCallback is false', async () => {
+        const onConfirm = jest.fn();
+        const { getByRole, getByText, queryByRole } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            onConfirm={onConfirm} 
+            closeUsingCallback={false}
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        fireEvent.click(getByText('OK'));
+
+        await waitFor(() => {
+          expect(queryByRole('dialog')).not.toBeInTheDocument();
+        });
+      });
+
+      it('should not auto-close modal when closeUsingCallback is true', async () => {
+        const onConfirm = jest.fn();
+        const { getByRole, getByText } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            onConfirm={onConfirm} 
+            closeUsingCallback={true}
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        fireEvent.click(getByText('OK'));
+
+        await waitFor(() => {
+          expect(onConfirm).toHaveBeenCalled();
+        });
+
+        // Modal should still be open since closeUsingCallback is true
+        expect(getByRole('dialog')).toBeInTheDocument();
+      });
+
+      it('should close modal using callback when closeUsingCallback is true', async () => {
+        const onConfirm = jest.fn((closeModal) => {
+          closeModal();
+        });
+        const { getByRole, getByText, queryByRole } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            onConfirm={onConfirm} 
+            closeUsingCallback={true}
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        fireEvent.click(getByText('OK'));
+
+        await waitFor(() => {
+          expect(queryByRole('dialog')).not.toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('Custom Text Props', () => {
+      it('should display custom modal title', () => {
+        const { getByRole, getByText } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            modalTitle="Custom Title"
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByText('Custom Title')).toBeInTheDocument();
+      });
+
+      it('should display custom modal body', () => {
+        const { getByRole, getByText } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            modalBody="Custom body message"
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByText('Custom body message')).toBeInTheDocument();
+      });
+
+      it('should display default "Are you sure?" when no modalBody provided', () => {
+        const { getByRole, getByText } = renderWithLocalization(
+          <ConfirmButton {...defaultProps} />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByText('Are you sure?')).toBeInTheDocument();
+      });
+
+      it('should display custom confirm text', () => {
+        const { getByRole, getByText } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            confirmText="Yes, Delete"
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByText('Yes, Delete')).toBeInTheDocument();
+      });
+
+      it('should display custom cancel text', () => {
+        const { getByRole, getByText } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            cancelText="No, Keep"
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByText('No, Keep')).toBeInTheDocument();
+      });
+    });
+
+    describe('Loading State', () => {
+      it('should show spinner when loading is true', () => {
+        const { getByRole, getByTestId } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            loading={true}
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByTestId('spinner')).toBeInTheDocument();
+      });
+
+      it('should not show spinner when loading is false', () => {
+        const { getByRole, queryByTestId } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            loading={false}
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(queryByTestId('spinner')).not.toBeInTheDocument();
+      });
+    });
+
+    describe('ReactElement Props', () => {
+      it('should render ReactElement as modal title', () => {
+        const CustomTitle = <span data-testid="custom-title">Custom React Title</span>;
+        const { getByRole, getByTestId } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            modalTitle={CustomTitle}
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByTestId('custom-title')).toBeInTheDocument();
+      });
+
+      it('should render ReactElement as modal body', () => {
+        const CustomBody = <div data-testid="custom-body">Custom React Body</div>;
+        const { getByRole, getByTestId } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            modalBody={CustomBody}
+          />
+        );
+
+        fireEvent.click(getByRole('button'));
+        expect(getByTestId('custom-body')).toBeInTheDocument();
+      });
+    });
+
+    describe('Event Handling', () => {
+      it('should stop propagation on modal click', () => {
+        const { getByRole } = renderWithLocalization(
+          <ConfirmButton {...defaultProps} />
+        );
+
+        fireEvent.click(getByRole('button'));
+        const modal = getByRole('dialog');
+        
+        const clickEvent = new MouseEvent('click', { bubbles: true });
+        const stopPropagationSpy = jest.spyOn(clickEvent, 'stopPropagation');
+        
+        fireEvent(modal, clickEvent);
+        expect(stopPropagationSpy).toHaveBeenCalled();
+      });
+
+      it('should handle async onConfirm function', async () => {
+        const onConfirm = jest.fn(async () => {
+          await new Promise(resolve => setTimeout(resolve, 10));
+        });
+
+        const { getByRole, getByText } = renderWithLocalization(
+          <ConfirmButton {...defaultProps} onConfirm={onConfirm} />
+        );
+
+        fireEvent.click(getByRole('button'));
+        fireEvent.click(getByText('OK'));
+
+        await waitFor(() => {
+          expect(onConfirm).toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('Button Props Passthrough', () => {
+      it('should pass additional props to button component', () => {
+        const { getByRole } = renderWithLocalization(
+          <ConfirmButton 
+            {...defaultProps} 
+            variant="danger"
+            size="lg"
+            disabled={true}
+          />
+        );
+
+        const button = getByRole('button');
+        expect(button).toHaveClass('btn-danger');
+        expect(button).toHaveClass('btn-lg');
+        expect(button).toBeDisabled();
+      });
+    });
+  });
+
+  describe('DeleteConfirmButton', () => {
+    const mockOnDelete = jest.fn();
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should render DeleteConfirmButton without crashing', () => {
+      expect(() => {
+        render(
+          <TestWrapper>
+            <DeleteConfirmButton
+              onDelete={mockOnDelete}
+            >
+              Delete
+            </DeleteConfirmButton>
+          </TestWrapper>
+        );
+      }).not.toThrow();
+    });
+
+    it('should accept custom modal props', () => {
+      expect(() => {
+        render(
+          <TestWrapper>
+            <DeleteConfirmButton
+              onDelete={mockOnDelete}
+              modalTitle="Delete Item"
+              modalBody="Are you sure you want to delete this?"
+              confirmText="Delete"
+              loading={true}
+            >
+              Delete Item
+            </DeleteConfirmButton>
+          </TestWrapper>
+        );
+      }).not.toThrow();
+    });
+
+    it('should be a valid React component', () => {
+      expect(typeof DeleteConfirmButton).toBe('function');
+    });
+  });
+
+  describe('IconButton', () => {
+    it('should render IconButton without crashing', () => {
+      expect(() => {
+        render(
+          <IconButton icon={AiOutlineHome}>
+            Home
+          </IconButton>
+        );
+      }).not.toThrow();
+    });
+
+    it('should handle loading state', () => {
+      expect(() => {
+        render(
+          <IconButton 
+            icon={AiOutlineHome} 
+            loading={true}
+            iconSize="16px"
+          >
+            Loading
+          </IconButton>
+        );
+      }).not.toThrow();
+    });
+
+    it('should handle click events', () => {
+      const mockClick = jest.fn();
+      const { getByRole } = render(
+        <IconButton 
+          icon={AiOutlineHome} 
+          onClick={mockClick}
+        >
+          Click Me
+        </IconButton>
+      );
+
+      const button = getByRole('button');
+      fireEvent.click(button);
+      
+      expect(mockClick).toHaveBeenCalled();
+    });
+
+    it('should be a valid React component', () => {
+      expect(typeof IconButton).toBe('function');
+    });
+  });
+
+  describe('Predefined Icon Buttons', () => {
+    const iconButtons = [
+      { component: CheckButton, name: 'CheckButton' },
+      { component: CopyButton, name: 'CopyButton' },
+      { component: CloseButton, name: 'CloseButton' },
+      { component: CreateButton, name: 'CreateButton' },
+      { component: DeleteButton, name: 'DeleteButton' },
+      { component: EditButton, name: 'EditButton' },
+      { component: SaveButton, name: 'SaveButton' },
+    ];
+
+    iconButtons.forEach(({ component: ButtonComponent, name }) => {
+      it(`should render ${name} without crashing`, () => {
+        expect(() => {
+          render(<ButtonComponent>Test</ButtonComponent>);
+        }).not.toThrow();
+      });
+
+      it(`${name} should be a valid React component`, () => {
+        expect(typeof ButtonComponent).toBe('function');
+      });
+
+      it(`${name} should handle props correctly`, () => {
+        expect(() => {
+          render(
+            <ButtonComponent 
+              loading={true}
+              variant="primary"
+              size="lg"
+              disabled={true}
+            >
+              Test Button
+            </ButtonComponent>
+          );
+        }).not.toThrow();
+      });
+    });
+  });
+
+  describe('UploadTextButton', () => {
+    const mockOnLoadFile = jest.fn();
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should render UploadTextButton without crashing', () => {
+      expect(() => {
+        render(
+          <UploadTextButton onLoadFile={mockOnLoadFile}>
+            Upload File
+          </UploadTextButton>
+        );
+      }).not.toThrow();
+    });
+
+    it('should accept file type restrictions', () => {
+      expect(() => {
+        render(
+          <UploadTextButton 
+            onLoadFile={mockOnLoadFile}
+            accept=".txt,.json"
+          >
+            Upload Text File
+          </UploadTextButton>
+        );
+      }).not.toThrow();
+    });
+
+    it('should be a valid React component', () => {
+      expect(typeof UploadTextButton).toBe('function');
+    });
+  });
+
+  describe('makeIconButton factory', () => {
+    it('should create valid icon button components', () => {
+      const CustomIconButton = makeIconButton(AiOutlineHome);
+      
+      expect(typeof CustomIconButton).toBe('function');
+      
+      expect(() => {
+        render(<CustomIconButton>Custom Button</CustomIconButton>);
+      }).not.toThrow();
+    });
+
+    it('should be a valid function', () => {
+      expect(typeof makeIconButton).toBe('function');
+    });
+  });
+
+  describe('Button Props Handling', () => {
+    it('should handle various ButtonProps correctly', () => {
+      const commonProps = {
+        variant: 'primary' as const,
+        size: 'lg' as const,
+        disabled: true,
+        className: 'test-class',
+        loading: true,
+        iconSize: '20px',
+      };
+
+      expect(() => {
+        render(<CheckButton {...commonProps}>Check</CheckButton>);
+      }).not.toThrow();
+    });
+  });
+});