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

package/react-kit/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "@js-smart/react-kit",
+	"private": false,
+	"version": "5.12.0-beta.1",
+	"main": "./dist/react-kit/index.js",
+	"types": "./dist/react-kit/index.d.ts",
+	"type": "module",
+	"publishConfig": {
+		"access": "public"
+	},
+	"peerDependencies": {
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.1",
+		"@mui/icons-material": "^7.2.0",
+		"@mui/material": "^7.2.0",
+		"date-fns": "^4.1.0",
+		"react": "^18.3.1 || ^19.0.0",
+		"react-dom": "^18.3.1 || ^19.0.0",
+		"react-router-dom": "^7.6.3"
+	},
+	"exports": {
+		".": {
+			"import": "./dist/react-kit/index.js"
+		}
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/js-smart/react-kit"
+	},
+	"author": {
+		"name": "Pavan Kumar Jadda",
+		"email": "contact@pavankjadda.dev"
+	},
+	"keywords": [
+		"react",
+		"react-kit",
+		"react-components",
+		"react-utils",
+		"typescript"
+	],
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/js-smart/react-kit/issues"
+	}
+}

package/react-kit/project.json

@@ -0,0 +1,10 @@
+{
+  "name": "react-kit",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "react-kit/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project react-kit --web",
+  "targets": {
+  }
+}

package/{index.d.ts → react-kit/src/index.ts}

@@ -1,3 +1,4 @@
+// Export all buttons
 export { CancelButton } from './lib/components/buttons/CancelButton';
 export { DeleteButton } from './lib/components/buttons/DeleteButton';
 export { GoBackButton } from './lib/components/buttons/GoBackButton';
@@ -7,8 +8,12 @@ export { ManageButton } from './lib/components/buttons/ManageButton';
 export { SuccessButton } from './lib/components/buttons/SuccessButton';
 export { ExcelButton } from './lib/components/buttons/ExcelButton';
 export { EditIconButton } from './lib/components/buttons/EditIconButton';
+
+// Export snackbar components
 export { AppSnackBar } from './lib/components/snack-bar/AppSnackBar';
 export { QuerySnackBar } from './lib/components/snack-bar/QuerySnackBar';
+
+// Export all other components
 export { TablePaginationActions } from './lib/components/table/TablePaginationActions';
 export { TabPanel, a11yProps } from './lib/components/tabs/TabPanel';
 export { NextLink } from './lib/components/NextLink';
@@ -17,6 +22,8 @@ export { ConfirmDialog } from './lib/components/ConfirmationDialog';
 export { DismissibleAlert } from './lib/components/DismissibleAlert';
 export { OpenInNewIconLink } from './lib/components/OpenInNewIconLink';
 export { ReactIf } from './lib/components/ReactIf';
+
+// Export all utilities
 export * from './lib/utils/BooleanUtils';
 export * from './lib/utils/DateUtils';
 export * from './lib/utils/NumberUtils';
@@ -25,4 +32,6 @@ export * from './lib/utils/StringUtils';
 export * from './lib/utils/UrlUtils';
 export * from './lib/utils/fetchClient';
 export * from './lib/utils/CssUtils';
+
+// Export all types
 export * from './lib/types/ProgressState';

package/react-kit/src/lib/components/CenteredCircularProgress.tsx

@@ -0,0 +1,15 @@
+import { CircularProgress } from '@mui/material';
+
+/**
+ * Reusable Circular Progress component
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export function CenteredCircularProgress() {
+	return (
+		<div style={{ margin: '1.5rem' }} className="app-flex-justify-center">
+			<CircularProgress />
+		</div>
+	);
+}

package/react-kit/src/lib/components/ConfirmationDialog.tsx

@@ -0,0 +1,28 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+
+interface ConfirmDialogProps {
+	id: string;
+	keepMounted: boolean;
+	title?: string;
+	message: string;
+	value: string;
+	open: boolean;
+	onClose: (value: string) => void;
+}
+
+export function ConfirmDialog(props: ConfirmDialogProps) {
+	const { onClose, title, message, open, ...other } = props;
+
+	return (
+		<Dialog sx={{ '& .MuiDialog-paper': { width: '80%', maxHeight: 435 } }} maxWidth="xs" open={open} {...other}>
+			<DialogTitle>{title ?? 'Confirm'}</DialogTitle>
+			<DialogContent dividers>{message}</DialogContent>
+			<DialogActions>
+				<Button autoFocus onClick={() => onClose('No')}>
+					Cancel
+				</Button>
+				<Button onClick={() => onClose('Yes')}>Yes</Button>
+			</DialogActions>
+		</Dialog>
+	);
+}

package/react-kit/src/lib/components/DismissibleAlert.tsx

@@ -0,0 +1,60 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { Alert, AlertColor, IconButton } from '@mui/material';
+import { useState } from 'react';
+
+/**
+ * Dismissible Alert properties
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.2.17
+ */
+type DismissibleAlertProps = {
+	message: string;
+	severity: AlertColor;
+	className?: string;
+	dismissible?: boolean;
+	dismissOnTimeOut?: boolean;
+	dismissTimeOut?: number;
+};
+
+export function DismissibleAlert(props: Readonly<DismissibleAlertProps>) {
+	const [open, setOpen] = useState(true);
+	const [dismissible] = useState(props.dismissible ?? true);
+	const [dismissOnTimeOut] = useState(props.dismissOnTimeOut ?? true);
+	const [dismissTimeOut] = useState<number>(props.dismissTimeOut ?? 5000);
+
+	/**
+	 * If `dismissOnTimeOut` is set then Dismiss the alert on time out
+	 *
+	 * @author Pavan Kumar Jadda
+	 * @since 0.2.17
+	 */
+	setTimeout(() => {
+		dismissOnTimeOut ? setOpen(false) : setOpen(open);
+	}, dismissTimeOut);
+
+	return (
+		<span>
+			{open && (
+				<Alert
+					action={
+						dismissible ? (
+							<IconButton
+								aria-label="close"
+								color="inherit"
+								size="small"
+								onClick={() => {
+									setOpen(false);
+								}}>
+								<CloseIcon fontSize="inherit" />
+							</IconButton>
+						) : null
+					}
+					style={{ margin: '20px' }}
+					{...props}>
+					{props.message}
+				</Alert>
+			)}
+		</span>
+	);
+}

package/react-kit/src/lib/components/NextLink.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link as MuiLink } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+interface Props {
+	href: string;
+	linkText?: string;
+	target?: string;
+	children?: React.ReactNode;
+}
+
+/**
+ * Reusable custom Next.js 13 Link component.
+ *
+ * @param props Properties of the React Node
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.3.2
+ */
+export function NextLink(props: Readonly<Props>): React.JSX.Element {
+	return (
+		<MuiLink component={Link} to={props.href} className={'next-btn-link'} underline="hover">
+			{props.linkText ?? props.children}
+		</MuiLink>
+	);
+}

package/react-kit/src/lib/components/OpenInNewIconLink.tsx

@@ -0,0 +1,42 @@
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Icon, Link as MuiLink } from '@mui/material';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+interface Props {
+	href: string;
+	linkText: string;
+	target: string;
+	children?: React.ReactNode;
+}
+
+/**
+ * Reusable component to open a link in new tab and show open new icon at the end
+ *
+ * @param props Properties of the component
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.24
+ */
+export function OpenInNewIconLink(props: Readonly<Props>) {
+	return (
+		<MuiLink
+			component={Link}
+			to={props.href}
+			target={props.target || '_blank'}
+			rel="noreferrer"
+			className={'next-btn-link'}
+			underline="hover">
+			{props.linkText ?? props.children}
+			<Icon
+				sx={{
+					fontSize: '1.1rem',
+					mx: 0.75,
+					verticalAlign: 'middle',
+					display: 'inline-flex',
+				}}
+				component={OpenInNewIcon}
+			/>
+		</MuiLink>
+	);
+}

package/react-kit/src/lib/components/ReactIf.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react';
+
+type ReactIfProps = {
+	/**
+	 * The condition that determines whether children should be rendered
+	 */
+	condition: boolean | null | undefined;
+
+	/**
+	 * Content to render when condition is true.
+	 * Can be either a ReactNode or a function returning a ReactNode
+	 */
+	children: ReactNode | (() => ReactNode);
+
+	/**
+	 * Optional content to render when condition is false
+	 */
+	else?: ReactNode | (() => ReactNode);
+};
+
+/**
+ * Reusable If component, that renders content if the condition is true. Similar to *ngIf from Angular
+ *
+ * @param props Properties of the component
+ *
+ * @example
+ * ```tsx
+ * <ReactIf condition={isVisible}>
+ *   <div>Visible content</div>
+ * </ReactIf>
+ *
+ * <ReactIf condition={isVisible} else={<div>Alternative content</div>}>
+ *   <div>Main content</div>
+ * </ReactIf>
+ *```
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export function ReactIf(props: ReactIfProps): React.ReactNode {
+	const { condition, children, else: elseContent } = props;
+
+	// Check if condition is true
+	if (condition) {
+		return typeof children === 'function' ? children() : children;
+	}
+
+	// Render else content or null
+	if (elseContent) {
+		return typeof elseContent === 'function' ? elseContent() : elseContent;
+	} else {
+		return null;
+	}
+}

package/react-kit/src/lib/components/buttons/CancelButton.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button, SxProps, Theme } from '@mui/material';
+import UndoIcon from '@mui/icons-material/Undo';
+
+/**
+ * Reusable Success Button component properties
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.14
+ */
+interface CancelButtonProps {
+	children?: React.ReactNode;
+	className?: string;
+	name?: string;
+	dataCy?: string;
+	sx?: SxProps<Theme>;
+	type?: 'button' | 'submit' | 'reset';
+	variant?: 'text' | 'outlined' | 'contained';
+	color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+	onClick: () => void;
+	startIcon?: React.ReactNode;
+}
+
+/**
+ * Reusable Cancel Button component
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.14
+ */
+export function CancelButton(props: CancelButtonProps): React.JSX.Element {
+	return (
+		<Button
+			name={props.name}
+			data-cy={props.dataCy ?? 'cancel-button'}
+			className={props.className}
+			sx={props.sx}
+			startIcon={props.startIcon ?? <UndoIcon />}
+			variant={props.variant ?? 'contained'}
+			color={props.color ?? 'secondary'}
+			type={props.type ?? 'button'}
+			onClick={() => props.onClick()}>
+			{props.children ?? props.name}
+		</Button>
+	);
+}

package/react-kit/src/lib/components/buttons/DeleteButton.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import { Button } from '@mui/material';
+
+interface DeleteButtonProps {
+	loading: boolean;
+	label?: string;
+	loadingLabel?: string;
+	loadingPosition?: 'start' | 'end' | 'center';
+	type?: 'button' | 'submit' | 'reset' | undefined;
+	variant?: 'text' | 'outlined' | 'contained';
+	color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+	name?: string;
+	dataCy?: string;
+	startIcon?: React.ReactNode;
+	onClick: () => void;
+}
+
+export function DeleteButton(props: DeleteButtonProps) {
+	return (
+		<Button
+			data-cy={props.dataCy ?? 'delete-button'}
+			loading={props.loading ?? false}
+			loadingPosition={props.loadingPosition ?? 'start'}
+			startIcon={props.startIcon ?? <DeleteForeverIcon />}
+			name={props.name}
+			variant={props.variant ?? 'contained'}
+			color={props.color ?? 'error'}
+			sx={{ m: 1 }}
+			type={props.type ?? 'button'}
+			onClick={props.onClick}>
+			{props.label ? props.label : 'Delete'}
+		</Button>
+	);
+}

package/react-kit/src/lib/components/buttons/EditIconButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+
+interface EditIconButtonProps {
+	tooltipTitle: string;
+	onClick: React.Dispatch<React.SetStateAction<boolean>>;
+	color?: 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+}
+
+export function EditIconButton(props: Readonly<EditIconButtonProps>) {
+	return (
+		<Tooltip title={props.tooltipTitle}>
+			<IconButton
+				sx={{ pt: 0, pb: 0 }}
+				color={props.color ?? 'primary'}
+				onClick={() => props.onClick(true)}
+				aria-label={props.tooltipTitle}>
+				<EditIcon />
+			</IconButton>
+		</Tooltip>
+	);
+}

package/react-kit/src/lib/components/buttons/ExcelButton.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, SxProps, Theme } from '@mui/material';
+
+/**
+ * Reusable Excel Button component properties
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.9
+ */
+interface SuccessButtonProps {
+	children?: React.ReactNode;
+	className?: string;
+	name?: string;
+	sx?: SxProps<Theme>;
+	type?: 'button' | 'submit' | 'reset';
+	onClick: () => void;
+	startIcon?: React.ReactNode;
+	dataCy?: string;
+}
+
+/**
+ * Reusable Excel Button component
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.9
+ */
+export function ExcelButton(props: SuccessButtonProps): React.JSX.Element {
+	return (
+		<Button
+			data-cy={props.dataCy ?? 'excel-button'}
+			style={{ borderRadius: '20px' }}
+			className={props.className}
+			name={props.name}
+			sx={props.sx}
+			startIcon={props.startIcon}
+			variant="contained"
+			color="success"
+			type={props.type ?? 'button'}
+			onClick={() => props.onClick()}>
+			{props.children ?? props.name}
+		</Button>
+	);
+}

package/react-kit/src/lib/components/buttons/GoBackButton.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import { NavigateFunction } from 'react-router-dom';
+
+interface GoBackButtonProps {
+	name?: string;
+	children?: React.ReactNode;
+	navigate: NavigateFunction;
+	color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+}
+
+export function GoBackButton(props: GoBackButtonProps) {
+	return (
+		<Tooltip title="Go Back to Previous Page">
+			<IconButton name={props.name} color={props.color ?? 'primary'} onClick={() => props.navigate(-1)}>
+				<ArrowBackIosIcon />
+				{props.children}
+			</IconButton>
+		</Tooltip>
+	);
+}

package/react-kit/src/lib/components/buttons/HistoryButton.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button, SxProps, Theme } from '@mui/material';
+import HistoryIcon from '@mui/icons-material/History';
+
+/**
+ * Reusable History Button component properties
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.15
+ */
+interface HistoryButtonProps {
+	children?: React.ReactNode;
+	className?: string;
+	name?: string;
+	dataCy?: string;
+	sx?: SxProps<Theme>;
+	type?: 'button' | 'submit' | 'reset';
+	onClick: () => void;
+	startIcon?: React.ReactNode;
+	variant?: 'text' | 'outlined' | 'contained';
+	color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+}
+
+/**
+ * Reusable History Button component
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.15
+ */
+export function HistoryButton(props: HistoryButtonProps): React.JSX.Element {
+	return (
+		<Button
+			name={props.name}
+			data-cy={props.dataCy ?? 'history-button'}
+			className={props.className}
+			sx={props.sx ?? { p: 1, m: 1 }}
+			startIcon={props.startIcon ?? <HistoryIcon />}
+			variant={props.variant ?? 'contained'}
+			color={props.color ?? 'primary'}
+			type={props.type ?? 'button'}
+			onClick={() => props.onClick()}>
+			{props.children ?? props.name}
+		</Button>
+	);
+}

package/react-kit/src/lib/components/buttons/LoadingSuccessButton.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Button, SxProps, Theme } from '@mui/material';
+import SaveIcon from '@mui/icons-material/Save';
+
+const style = {
+	backgroundColor: '$primary-color',
+	color: 'var(--white-color)',
+	margin: '20px',
+};
+
+/**
+ * Reusable Success Button component properties
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.3.3
+ */
+interface Props {
+	children?: React.ReactNode;
+	type?: 'button' | 'submit' | 'reset';
+	name?: string;
+	loading: boolean;
+	dataCy?: string;
+	startIcon?: React.ReactNode;
+	sx?: SxProps<Theme>;
+	onClick?: () => void;
+	variant?: 'text' | 'outlined' | 'contained';
+	color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+}
+
+/**
+ * Reusable Success Loading Button
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export function LoadingSuccessButton(props: Props) {
+	return (
+		<Button
+			name={props.name}
+			data-cy={props.dataCy ?? 'loading-success-button'}
+			variant={props.variant ?? 'contained'}
+			color={props.color ?? 'success'}
+			loadingPosition={'start'}
+			startIcon={props.startIcon ?? <SaveIcon />}
+			loading={props.loading}
+			type={props.type ?? 'button'}
+			style={style}
+			sx={props.sx}
+			onClick={props.onClick}>
+			{props.children ?? props.name}
+		</Button>
+	);
+}

package/react-kit/src/lib/components/buttons/ManageButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { Button } from '@mui/material';
+
+interface ManageButtonProps {
+	size?: 'small' | 'medium' | 'large';
+	variant?: 'text' | 'outlined' | 'contained';
+	color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+	className?: string;
+	name?: string;
+	dataCy?: string;
+	startIcon?: React.ReactNode;
+	onClick: () => void;
+	children?: React.ReactNode;
+}
+
+export function ManageButton(props: ManageButtonProps) {
+	return (
+		<Button
+			name={props.name}
+			data-cy={props.dataCy ?? 'manage-button'}
+			className={props.className}
+			onClick={() => props.onClick()}
+			variant={props.variant ?? 'contained'}
+			color={props.color ?? 'primary'}
+			size={props.size ?? 'large'}
+			startIcon={props.startIcon ?? <SettingsIcon />}>
+			{props.children ? props.children : 'Manage'}
+		</Button>
+	);
+}

package/react-kit/src/lib/components/buttons/SuccessButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button, SxProps, Theme } from '@mui/material';
+
+/**
+ * Reusable Success Button component properties
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.3.3
+ */
+interface SuccessButtonProps {
+	children?: React.ReactNode;
+	className?: string;
+	name?: string;
+	dataCy?: string;
+	sx?: SxProps<Theme>;
+	type?: 'button' | 'submit' | 'reset';
+	onClick: () => void;
+	startIcon?: React.ReactNode;
+	variant?: 'text' | 'outlined' | 'contained';
+	color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+}
+
+/**
+ * Reusable Success Button component
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export function SuccessButton(props: SuccessButtonProps): React.JSX.Element {
+	return (
+		<Button
+			name={props.name}
+			data-cy={props.dataCy ?? 'success-button'}
+			className={props.className}
+			sx={props.sx}
+			startIcon={props.startIcon}
+			variant={props.variant ?? 'contained'}
+			color={props.color ?? 'success'}
+			type={props.type ?? 'button'}
+			onClick={() => props.onClick()}>
+			{props.children ?? props.name}
+		</Button>
+	);
+}