feat(core): adds more components

Author: pavankjadda

apps/react-kit-demo/src/theme.ts

@@ -35,13 +35,10 @@ const theme = createTheme({
 			main: getCssVariable('--secondary-color'),
 		},
 		success: {
-			main: getCssVariable('--success-color'),
+			main: getCssVariable('--isSuccess-color'),
 		},
 		error: {
-			main: getCssVariable('--error-color'),
-		},
-		background: {
-			default: getCssVariable('--background-color'),
+			main: getCssVariable('--isError-color'),
 		},
 	},
 	components: {

package.json

@@ -2,45 +2,15 @@
   "name": "@js-smart/react-kit",
   "version": "1.1.0",
   "license": "MIT",
+  "private": false,
   "scripts": {
     "nx": "nx",
     "start": "nx serve",
     "build": "nx build react-kit",
     "build:demo": "nx build",
     "test": "nx test",
-    "lint": "nx workspace-lint && nx lint",
-    "affected:apps": "nx affected:apps",
-    "affected:libs": "nx affected:libs",
-    "affected:build": "nx affected:build",
-    "affected:test": "nx affected:test",
-    "affected:lint": "nx affected:lint",
     "affected:dep-graph": "nx affected:dep-graph",
-    "affected": "nx affected",
-    "format": "nx format:write",
-    "format:write": "nx format:write",
-    "format:check": "nx format:check",
-    "update": "nx migrate latest",
-    "workspace-generator": "nx workspace-generator",
-    "dep-graph": "nx dep-graph",
-    "help": "nx help"
-  },
-  "private": false,
-  "release": {
-    "branches": [
-      "main"
-    ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      [
-        "@semantic-release/npm",
-        {
-          "pkgRoot": "dist/react-kit"
-        }
-      ],
-      "@semantic-release/git",
-      "@semantic-release/github"
-    ]
+    "update": "nx migrate latest"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -99,5 +69,22 @@
     "@semantic-release/npm": "^12.0.1",
     "vite-plugin-dts": "~3.9.1",
     "vitest": "^1.6.0"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/npm",
+        {
+          "pkgRoot": "dist/react-kit"
+        }
+      ],
+      "@semantic-release/git",
+      "@semantic-release/github"
+    ]
   }
 }

react-kit/src/index.ts

@@ -15,6 +15,9 @@ 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 } from './lib/components/tabs/TabPanel';
+export { NextLink } from './lib/components/NextLink';
 export { CenteredCircularProgress } from './lib/components/CenteredCircularProgress';
 export { ConfirmDialog } from './lib/components/ConfirmationDialog';
 export { DismissibleAlert } from './lib/components/DismissibleAlert';
@@ -29,3 +32,4 @@ export * from './lib/utils/ProgressStateUtils';
 export * from './lib/utils/StringUtils';
 export * from './lib/utils/UrlUtils';
 export * from './lib/utils/fetchClient';
+export * from './lib/utils/CssUtils';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link as MuiLink } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+/**
+ * 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: { href: string; linkText?: string; target?: string; children?: React.ReactNode }): React.JSX.Element {
+	return (
+		<MuiLink component={Link} to={props.href} className={'next-btn-link'} underline="hover">
+			{props.linkText ?? props.children}
+		</MuiLink>
+	);
+}

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

@@ -32,7 +32,7 @@ export function ExcelButton(props: SuccessButtonProps): React.JSX.Element {
 			sx={props.sx}
 			startIcon={props.startIcon}
 			variant="contained"
-			color="success"
+			color="isSuccess"
 			type={props.type ?? 'button'}
 			onClick={() => props.onClick()}>
 			{props.children}

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

@@ -34,9 +34,9 @@ interface Props {
 export function LoadingSuccessButton(props: Props) {
 	return (
 		<LoadingButton
-			data-cy={props.dataCy ?? 'loading-success-button'}
+			data-cy={props.dataCy ?? 'isLoading-isSuccess-button'}
 			variant="contained"
-			color="success"
+			color="isSuccess"
 			loadingPosition={'start'}
 			startIcon={props.startIcon ?? <SaveIcon />}
 			loading={props.loading}

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

@@ -26,12 +26,12 @@ interface SuccessButtonProps {
 export function SuccessButton(props: SuccessButtonProps): React.JSX.Element {
 	return (
 		<Button
-			data-cy={props.dataCy ?? 'success-button'}
+			data-cy={props.dataCy ?? 'isSuccess-button'}
 			className={props.className}
 			sx={props.sx}
 			startIcon={props.startIcon}
 			variant="contained"
-			color="success"
+			color="isSuccess"
 			type={props.type ?? 'button'}
 			onClick={() => props.onClick()}>
 			{props.children}

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

@@ -13,16 +13,16 @@ export const AppSnackBar = (props: { open: boolean; progressState: ProgressState
 	// Close button
 	const action = (
 		<IconButton size="small" aria-label="close" color="inherit" onClick={() => setOpen(false)}>
-				<CloseIcon fontSize="small" />
-			</IconButton>
+			<CloseIcon fontSize="small" />
+		</IconButton>
 	);
 
 	return (
 		<>
 			{/* Success Alert */}
 			<Snackbar
 				anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-				open={open && props.progressState.success}
+				open={open && props.progressState.isSuccess}
 				autoHideDuration={props.autoHideDuration ?? 3000}
 				onClose={() => setOpen(false)}>
 				<Alert variant="filled" severity="success" sx={{ width: '100%' }} action={action}>
@@ -33,7 +33,7 @@ export const AppSnackBar = (props: { open: boolean; progressState: ProgressState
 			{/* Error Alert */}
 			<Snackbar
 				anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-				open={open && props.progressState.error}
+				open={open && props.progressState.isError}
 				TransitionComponent={Slide}
 				autoHideDuration={props.autoHideDuration ?? 3000}
 				onClose={() => setOpen(false)}>

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

@@ -41,7 +41,7 @@ export const QuerySnackBar = (props: QuerySnackBarProps) => {
 				open={open && props.isSuccess}
 				autoHideDuration={props.autoHideDuration ?? 3000}
 				onClose={() => setOpen(false)}>
-				<Alert variant="filled" severity="success" sx={{ width: '100%' }} action={action}>
+				<Alert variant="filled" severity="isSuccess" sx={{ width: '100%' }} action={action}>
 					{props.message}
 				</Alert>
 			</Snackbar>
@@ -53,7 +53,7 @@ export const QuerySnackBar = (props: QuerySnackBarProps) => {
 				TransitionComponent={Slide}
 				autoHideDuration={props.autoHideDuration ?? 3000}
 				onClose={() => setOpen(false)}>
-				<Alert variant="filled" sx={{ width: '100%' }} severity="error" action={action}>
+				<Alert variant="filled" sx={{ width: '100%' }} severity="isError" action={action}>
 					{props.message}
 				</Alert>
 			</Snackbar>

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>
+	);
+}