@js-smart/react-kit 5.11.0 → 5.12.0-beta.1

package/react-kit/src/lib/components/snack-bar/AppSnackBar.tsx

@@ -0,0 +1,46 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { Alert, IconButton, Slide, Snackbar } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { ProgressState } from '../../types/ProgressState';
+
+export const AppSnackBar = (props: { open: boolean; progressState: ProgressState; autoHideDuration?: number }) => {
+	const [open, setOpen] = useState(false);
+
+	useEffect(() => {
+		setOpen(props.open);
+	}, [props.open, props.progressState]);
+
+	// Close button
+	const action = (
+		<IconButton size="small" aria-label="close" color="inherit" onClick={() => setOpen(false)}>
+			<CloseIcon fontSize="small" />
+		</IconButton>
+	);
+
+	return (
+		<>
+			{/* Success Alert */}
+			<Snackbar
+				anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+				open={open && props.progressState.isSuccess}
+				autoHideDuration={props.autoHideDuration ?? 3000}
+				onClose={() => setOpen(false)}>
+				<Alert variant="filled" severity="success" sx={{ width: '100%' }} action={action}>
+					{props.progressState.message}
+				</Alert>
+			</Snackbar>
+
+			{/* Error Alert */}
+			<Snackbar
+				anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+				open={open && props.progressState.isError}
+				TransitionComponent={Slide}
+				autoHideDuration={props.autoHideDuration ?? 3000}
+				onClose={() => setOpen(false)}>
+				<Alert variant="filled" sx={{ width: '100%' }} severity="error" action={action}>
+					{props.progressState.message}
+				</Alert>
+			</Snackbar>
+		</>
+	);
+};

package/react-kit/src/lib/components/snack-bar/QuerySnackBar.tsx

@@ -0,0 +1,62 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { Alert, IconButton, Slide, Snackbar } from '@mui/material';
+import { useEffect, useState } from 'react';
+
+interface QuerySnackBarProps {
+	open: boolean;
+	isPending?: boolean;
+	isSuccess: boolean;
+	isError: boolean;
+	message: string;
+	autoHideDuration?: number;
+}
+
+/**
+ * Reusable component to display snackbar based on React Query mutation state
+ *
+ * @param props QuerySnackBarProps
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.27
+ */
+export const QuerySnackBar = (props: QuerySnackBarProps) => {
+	const [open, setOpen] = useState(false);
+
+	useEffect(() => {
+		setOpen(props.open);
+	}, [props.open, props]);
+
+	// Close button
+	const action = (
+		<IconButton size="small" aria-label="close" color="inherit" onClick={() => setOpen(false)}>
+			<CloseIcon fontSize="small" />
+		</IconButton>
+	);
+
+	return (
+		<>
+			{/* Success Alert */}
+			<Snackbar
+				anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+				open={open && props.isSuccess}
+				autoHideDuration={props.autoHideDuration ?? 3000}
+				onClose={() => setOpen(false)}>
+				<Alert variant="filled" severity="success" sx={{ width: '100%' }} action={action}>
+					{props.message}
+				</Alert>
+			</Snackbar>
+
+			{/* Error Alert */}
+			<Snackbar
+				anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+				open={open && props.isError}
+				TransitionComponent={Slide}
+				autoHideDuration={props.autoHideDuration ?? 3000}
+				onClose={() => setOpen(false)}>
+				<Alert variant="filled" sx={{ width: '100%' }} severity="error" action={action}>
+					{props.message}
+				</Alert>
+			</Snackbar>
+		</>
+	);
+};

package/react-kit/src/lib/components/table/TablePaginationActions.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, IconButton } from '@mui/material';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import LastPageIcon from '@mui/icons-material/LastPage';
+import { useTheme } from '@mui/material/styles';
+
+interface TablePaginationActionsProps {
+	count: number;
+	page: number;
+	rowsPerPage: number;
+	onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
+}
+
+/*
+ * Reusable component that adds first and last action buttons to DataGrid pagination module
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.1.4
+ */
+export function TablePaginationActions(props: TablePaginationActionsProps) {
+	const theme = useTheme();
+	const { count, page, rowsPerPage, onPageChange } = props;
+
+	const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		onPageChange(event, 0);
+	};
+
+	const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		onPageChange(event, page - 1);
+	};
+
+	const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		onPageChange(event, page + 1);
+	};
+
+	const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+	};
+
+	return (
+		<Box sx={{ flexShrink: 0, ml: 2.5 }}>
+			<IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
+				{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+			</IconButton>
+			<IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+				{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+			</IconButton>
+			<IconButton onClick={handleNextButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="next page">
+				{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+			</IconButton>
+			<IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">
+				{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+			</IconButton>
+		</Box>
+	);
+}

package/react-kit/src/lib/components/tabs/TabPanel.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+export function TabPanel(props: TabPanelProps) {
+	const { children, index, ...other } = props;
+	return (
+		<div className="tabPanel" role="tabpanel" id={`vertical-tabpanel-${index}`} aria-labelledby={`vertical-tab-${index}`} {...other}>
+			<Box sx={{ p: 3 }}>
+				<Typography component={'span'}>{children}</Typography>
+			</Box>
+		</div>
+	);
+}
+
+export function a11yProps(index: number) {
+	return {
+		id: `vertical-tab-${index}`,
+		'aria-controls': `vertical-tabpanel-${index}`,
+	};
+}
+
+interface TabPanelProps {
+	children?: React.ReactNode;
+	index: number;
+	value: string;
+}

package/react-kit/src/lib/constants/AppConstants.ts

@@ -0,0 +1,17 @@
+/**
+ * Global System settings used in the application
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.0.0
+ */
+export enum SystemConfig {
+  SYSTEM_TIME_ZONE = 'America/New_York',
+  SYSTEM_LOCALE = 'en-US',
+  SYSTEM_DATE_FORMAT = 'MM/dd/yyyy',
+  SYSTEM_DATE_TIME_FORMAT = 'MM/dd/yyyy hh:mm:ss a',
+  ISO_DATE_FORMAT = 'yyyy-MM-dd',
+
+  //Default Cookie expiration is 24 hours(Server sends usually cookie with 60 minutes timeout)
+  SYSTEM_COOKIE_TIMEOUT_HOURS = 24,
+  SYSTEM_COOKIE_TIMEOUT_MILLI_SECONDS = 3600000,
+}

package/react-kit/src/lib/types/ProgressState.ts

@@ -0,0 +1,7 @@
+export interface ProgressState {
+	isLoading: boolean;
+	isSuccess: boolean;
+	isError: boolean;
+	isComplete: boolean;
+	message: string;
+}

package/react-kit/src/lib/utils/BooleanUtils.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns `true` if the provided string is `undefined`, `null` or empty '' string otherwise returns false
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export function parseBoolean(value: boolean | string | null | undefined): boolean {
+	if (typeof value === 'boolean') {
+		return value;
+	} else if (typeof value === 'string') {
+		return value.toLowerCase() === 'true';
+	} else return false;
+}

package/react-kit/src/lib/utils/CssUtils.ts

@@ -0,0 +1,13 @@
+/**
+ * Get the value of a CSS variable
+ *
+ * @param variable The name of the CSS variable
+ *
+ * @returns The value of the CSS variable
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.6.0
+ */
+export function getCssVariable(variable: string): string {
+	return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+}

package/react-kit/src/lib/utils/DateUtils.ts

@@ -0,0 +1,43 @@
+/**
+ * Utility class for date related operations.
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.6
+ */
+import { format, parseISO } from 'date-fns';
+import { SystemConfig } from '../constants/AppConstants';
+
+/**
+ * Sets Cookie expiration to 24 hours. By default, server sets 60 minutes expiration but after each API request it extends to another 60 minutes. In client side set 24 hours as expiration date,
+ * if the user hasn't refreshed web page in 60 minutes, they would get HTTP 401 isError and redirected to login page. And redirect URL will be stored in cookie
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.2.30
+ */
+export const setCookieExpirationDate = (): Date => {
+	const utcEpochTime = +new Date();
+	return new Date(utcEpochTime + SystemConfig.SYSTEM_COOKIE_TIMEOUT_MILLI_SECONDS);
+};
+
+/**
+ * Convert String format browser Date Time to ISO Date
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.2.30
+ */
+export const convertToIsoDate = (currentDateTime: string): string => {
+	return format(new Date(currentDateTime), SystemConfig.ISO_DATE_FORMAT);
+};
+
+/**
+ * Convert String format browser Date Time to ISO Date
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.2.30
+ */
+export const formatDate = (date: string | undefined, newFormat: string): string => {
+	if (!date) {
+		return '';
+	}
+	return format(parseISO(date), newFormat);
+};

package/react-kit/src/lib/utils/NumberUtils.ts

@@ -0,0 +1,12 @@
+/**
+ * Returns number parsed from the given string
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.3.5
+ */
+export function parseNumber(value: string | null | undefined): number | undefined {
+	if (typeof value === 'string') {
+		return Number.parseInt(value, 10);
+	}
+	return undefined;
+}

package/react-kit/src/lib/utils/ProgressStateUtils.ts

@@ -0,0 +1,68 @@
+import { ProgressState } from '../types/ProgressState';
+
+/**
+ * Initialize Loading or Update ProgressState
+ *
+ * @return Updated State Object
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.4.6
+ */
+export const initializeState = (): ProgressState => ({
+	isLoading: false,
+	isSuccess: false,
+	isError: false,
+	isComplete: false,
+	message: '',
+});
+
+/**
+ * Initialize Loading or Update ProgressState
+ *
+ * @param progressState Object to initialize
+ * @return ProgressState Updated State Object
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.2.30
+ */
+export const markLoading = (progressState: ProgressState): ProgressState => ({
+	...progressState,
+	isLoading: true,
+	isSuccess: false,
+	isError: false,
+	message: '',
+});
+
+/**
+ * Update state as isSuccess
+ *
+ * @return ProgressState Updated State Object
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.2.30
+ */
+export const markSuccess = (progressState: ProgressState, message?: string): ProgressState => ({
+	...progressState,
+	isLoading: false,
+	isSuccess: true,
+	isError: false,
+	isComplete: true,
+	message: message || '',
+});
+
+/**
+ * Update state as failure or isError
+ *
+ * @return ProgressState Updated State Object
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.2.30
+ */
+export const markError = (progressState: ProgressState, message?: string): ProgressState => ({
+	...progressState,
+	isLoading: false,
+	isSuccess: false,
+	isError: true,
+	isComplete: true,
+	message: message || '',
+});

package/react-kit/src/lib/utils/StringUtils.ts

@@ -0,0 +1,14 @@
+/**
+ * Returns `true` if the provided string is `undefined`, `null` or empty '' string otherwise returns false
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export function isBlankOrEmpty(value: any): boolean {
+	if (value === null || value === undefined) {
+		return true;
+	} else if (typeof value === 'string') {
+		return value.trim() === '';
+	}
+	return false;
+}

package/react-kit/src/lib/utils/UrlUtils.ts

@@ -0,0 +1,19 @@
+/**
+ * Checks if the given URL is encoded or not
+ *
+ * @param url The URL to check
+ *
+ * @returns True if the URL is encoded, false otherwise
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.3.14
+ */
+export const isEncoded = (url: string) => {
+	try {
+		const decodedUrl = decodeURIComponent(url);
+		return decodedUrl !== url;
+	} catch (error) {
+		// Return false if decoding fails, indicating the URL is not properly encoded
+		return false;
+	}
+};

package/react-kit/src/lib/utils/fetchClient.ts

@@ -0,0 +1,64 @@
+class HttpError extends Error {
+	status: number;
+	statusText: string;
+	redirected: boolean;
+	type: ResponseType | undefined;
+
+	constructor(message: string, { status, statusText, redirected, type }: Response) {
+		super(message);
+		this.status = status;
+		this.statusText = statusText;
+		this.statusText = type;
+		this.redirected = redirected;
+		this.name = 'HttpError';
+	}
+}
+
+/**
+ * Tiny fetch wrapper for making HTTP requests with TypeScript support.
+ * @template T - The expected response type.
+ * @param {string} url - The URL to request.
+ * @param {RequestInit} [options] - Options for the fetch request.
+ * @returns {Promise<T>} - A promise that resolves to the JSON response of type T.
+ * @throws {Error} - Throws an isError if the response is not OK.
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.0.3
+ */
+export async function fetchClient<T>(url: string, options: RequestInit = {}): Promise<T> {
+	// Initialize headers object
+	const headers = new Headers(options.headers || {});
+
+	// Check if the body is FormData, if not, handle as JSON
+	if (options.body instanceof FormData) {
+		// Do not set 'Content-Type': 'application/json' for FormData
+		// Browser will set the correct headers for FormData
+	} else if (typeof options.body === 'object') {
+		// If there is a body, and it's an object, stringify it and set JSON header
+		options.body = JSON.stringify(options.body);
+		headers.set('Content-Type', 'application/json');
+	}
+
+	// Merge options with default settings
+	const fetchOptions = {
+		...options,
+		headers,
+	};
+
+	// If there is a body, and it's an object, stringify it
+	if (fetchOptions.body && typeof fetchOptions.body === 'object') {
+		fetchOptions.body = JSON.stringify(fetchOptions.body);
+	}
+
+	// Make the fetch request
+	const response = await fetch(url, fetchOptions);
+
+	// Check if the response is OK
+	if (response.type === 'error') {
+		const errorText = await response.text();
+		throw new HttpError(errorText, response);
+	}
+
+	// Parse and return the JSON response
+	return (await response.json()) as Promise<T>;
+}

package/react-kit/src/tests/buttons/CancelButton.test.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { CancelButton } from '../../lib/components/buttons/CancelButton';
+import '@testing-library/jest-dom';
+import jest from 'jest-mock';
+
+test('renders CancelButton component', () => {
+	render(
+		<CancelButton
+			name={'Cancel'}
+			onClick={() => {
+				console.log('Clicked Cancel Button');
+			}}
+		/>
+	);
+
+	const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+	expect(cancelButton).toBeInTheDocument();
+});
+
+test('renders CancelButton with children', () => {
+	render(
+		<CancelButton
+			onClick={() => {
+				console.log('Clicked Cancel Button');
+			}}>
+			Cancel
+		</CancelButton>
+	);
+
+	const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+	expect(cancelButton).toBeInTheDocument();
+});
+
+test('renders with custom className', () => {
+	render(<CancelButton name="Cancel" className="custom-class" onClick={() => {}} />);
+
+	const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+	expect(cancelButton).toHaveClass('custom-class');
+});
+
+test('renders with custom data-cy attribute', () => {
+	render(<CancelButton name="Cancel" dataCy="custom-cancel-button" onClick={() => {}} />);
+
+	const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+	expect(cancelButton).toHaveAttribute('data-cy', 'custom-cancel-button');
+});
+
+test('renders with custom startIcon', () => {
+	render(<CancelButton name="Cancel" startIcon={<span data-testid="custom-icon" />} onClick={() => {}} />);
+
+	const customIcon = screen.getByTestId('custom-icon');
+	expect(customIcon).toBeInTheDocument();
+});
+
+test('renders with custom type', () => {
+	render(<CancelButton name="Cancel" type="submit" onClick={() => {}} />);
+
+	const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+	expect(cancelButton).toHaveAttribute('type', 'submit');
+});
+
+test('calls onClick when clicked', () => {
+	const handleClick = jest.fn();
+	render(<CancelButton name="Cancel" onClick={handleClick} />);
+
+	const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+	fireEvent.click(cancelButton);
+	expect(handleClick).toHaveBeenCalledTimes(1);
+});

package/react-kit/src/tests/buttons/DeleteButton.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { DeleteButton } from '../../lib/components/buttons/DeleteButton';
+import '@testing-library/jest-dom';
+import jest from 'jest-mock';
+
+test('renders DeleteButton component', () => {
+	render(
+		<DeleteButton
+			loading={false}
+			onClick={() => {
+				console.log('Clicked Delete Button');
+			}}
+		/>
+	);
+
+	const deleteButton = screen.getByRole('button', { name: 'Delete' });
+	expect(deleteButton).toBeInTheDocument();
+});
+
+test('renders DeleteButton with custom label', () => {
+	render(
+		<DeleteButton
+			loading={false}
+			label="Remove"
+			onClick={() => {
+				console.log('Clicked Delete Button');
+			}}
+		/>
+	);
+
+	const deleteButton = screen.getByRole('button', { name: 'Remove' });
+	expect(deleteButton).toBeInTheDocument();
+});
+
+test('renders with custom data-cy attribute', () => {
+	render(<DeleteButton loading={false} name="Delete" dataCy="custom-delete-button" onClick={() => {}} />);
+
+	const deleteButton = screen.getByRole('button', { name: 'Delete' });
+	expect(deleteButton).toHaveAttribute('data-cy', 'custom-delete-button');
+});
+
+test('renders with custom startIcon', () => {
+	render(<DeleteButton loading={false} name="Delete" startIcon={<span data-testid="custom-icon" />} onClick={() => {}} />);
+
+	const customIcon = screen.getByTestId('custom-icon');
+	expect(customIcon).toBeInTheDocument();
+});
+
+test('renders with custom type', () => {
+	render(<DeleteButton loading={false} name="Delete" type="submit" onClick={() => {}} />);
+
+	const deleteButton = screen.getByRole('button', { name: 'Delete' });
+	expect(deleteButton).toHaveAttribute('type', 'submit');
+});
+
+test('calls onClick when clicked', () => {
+	const handleClick = jest.fn();
+	render(<DeleteButton loading={false} name="Delete" onClick={handleClick} />);
+
+	const deleteButton = screen.getByRole('button', { name: 'Delete' });
+	fireEvent.click(deleteButton);
+	expect(handleClick).toHaveBeenCalledTimes(1);
+});

package/react-kit/src/tests/buttons/EditIconButton.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { EditIconButton } from '../../lib/components/buttons/EditIconButton';
+import jest from 'jest-mock';
+
+describe('EditIconButton', () => {
+	const mockOnClick = jest.fn();
+
+	beforeEach(() => {
+		mockOnClick.mockClear();
+	});
+
+	it('renders with the correct tooltip title', () => {
+		render(<EditIconButton tooltipTitle="Edit Item" onClick={mockOnClick} />);
+		expect(screen.getByLabelText('Edit Item')).toBeInTheDocument();
+	});
+
+	it('calls onClick when clicked', () => {
+		render(<EditIconButton tooltipTitle="Edit Item" onClick={mockOnClick} />);
+		fireEvent.click(screen.getByLabelText('Edit Item'));
+		expect(mockOnClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('uses the default color if none is provided', () => {
+		render(<EditIconButton tooltipTitle="Edit Item" onClick={mockOnClick} />);
+		expect(screen.getByLabelText('Edit Item')).toHaveClass('MuiIconButton-colorPrimary');
+	});
+
+	it('uses the provided color', () => {
+		render(<EditIconButton tooltipTitle="Edit Item" onClick={mockOnClick} color="secondary" />);
+		expect(screen.getByLabelText('Edit Item')).toHaveClass('MuiIconButton-colorSecondary');
+	});
+});