@js-smart/react-kit 1.0.1 → 1.1.0

package/src/lib/components/ReactIf.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-/**
- * Reusable If component, that renders content if the condition is true. Similar to *ngIf from Angular
- *
- * @param props Properties of the React Node
- *
- * @author Pavan Kumar Jadda
- * @since 0.1.0
- */
-export default function ReactIf(props: { condition: boolean | undefined; children: React.ReactNode }): React.JSX.Element {
-	return props.condition === undefined || !props.condition ? <></> : <>{props.children}</>;
-}

package/src/lib/components/buttons/CancelButton.tsx

@@ -1,39 +0,0 @@
-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;
-	sx?: SxProps<Theme>;
-	type?: 'button' | 'submit' | 'reset';
-	onClick: () => void;
-	startIcon?: React.ReactNode;
-}
-
-/**
- * Reusable Cancel Button component
- *
- * @author Pavan Kumar Jadda
- * @since 1.2.14
- */
-export default function CancelButton(props: CancelButtonProps): React.JSX.Element {
-	return (
-		<Button
-			className={props.className}
-			sx={props.sx}
-			startIcon={props.startIcon ?? <UndoIcon />}
-			variant="contained"
-			color="secondary"
-			type={props.type ?? 'button'}
-			onClick={() => props.onClick()}>
-			{props.children}
-		</Button>
-	);
-}

package/src/lib/components/buttons/DeleteButton.tsx

@@ -1,29 +0,0 @@
-import LoadingButton from '@mui/lab/LoadingButton';
-import React from 'react';
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-
-interface DeleteButtonProps {
-	loading: boolean;
-	label?: string;
-	loadingLabel?: string;
-	loadingPosition?: 'start' | 'end' | 'center';
-	type?: 'button' | 'submit' | 'reset' | undefined;
-	startIcon?: React.ReactNode;
-	onClick: () => void;
-}
-
-export default function DeleteButton(props: DeleteButtonProps) {
-	return (
-		<LoadingButton
-			loading={props.loading ?? false}
-			loadingPosition={props.loadingPosition ?? 'start'}
-			startIcon={props.startIcon ?? <DeleteForeverIcon />}
-			color={'error'}
-			variant={'contained'}
-			sx={{ m: 1 }}
-			type={props.type ?? 'button'}
-			onClick={props.onClick}>
-			{props.label ? props.label : 'Delete'}
-		</LoadingButton>
-	);
-}

package/src/lib/components/buttons/ExcelButton.tsx

@@ -1,39 +0,0 @@
-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;
-	sx?: SxProps<Theme>;
-	type?: 'button' | 'submit' | 'reset';
-	onClick: () => void;
-	startIcon?: React.ReactNode;
-}
-
-/**
- * Reusable Excel Button component
- *
- * @author Pavan Kumar Jadda
- * @since 1.2.9
- */
-export default function ExcelButton(props: SuccessButtonProps): React.JSX.Element {
-	return (
-		<Button
-			style={{ borderRadius: '20px' }}
-			className={props.className}
-			sx={props.sx}
-			startIcon={props.startIcon}
-			variant="contained"
-			color="success"
-			type={props.type ?? 'button'}
-			onClick={() => props.onClick()}>
-			{props.children}
-		</Button>
-	);
-}

package/src/lib/components/buttons/GoBackButton.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { IconButton, Tooltip } from '@mui/material';
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import { NextRouter } from 'next/router';
-
-export default function GoBackButton(props: { router: NextRouter }) {
-  return (
-    <Tooltip title="Go Back to Previous Page">
-      <IconButton color="primary" onClick={() => props.router.back()}>
-        <ArrowBackIosIcon />
-      </IconButton>
-    </Tooltip>
-  );
-}

package/src/lib/components/buttons/HistoryButton.tsx

@@ -1,39 +0,0 @@
-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;
-	sx?: SxProps<Theme>;
-	type?: 'button' | 'submit' | 'reset';
-	onClick: () => void;
-	startIcon?: React.ReactNode;
-}
-
-/**
- * Reusable History Button component
- *
- * @author Pavan Kumar Jadda
- * @since 1.2.15
- */
-export default function HistoryButton(props: HistoryButtonProps): React.JSX.Element {
-	return (
-		<Button
-			className={props.className}
-			sx={props.sx ?? { p: 1, m: 1 }}
-			startIcon={props.startIcon ?? <HistoryIcon />}
-			variant="contained"
-			color="primary"
-			type={props.type ?? 'button'}
-			onClick={() => props.onClick()}>
-			{props.children}
-		</Button>
-	);
-}

package/src/lib/components/buttons/LoadingSuccessButton.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { LoadingButton } from '@mui/lab';
-import variables from '../../react-kit.module.scss';
-import { SxProps, Theme } from '@mui/material';
-import SaveIcon from '@mui/icons-material/Save';
-
-const style = {
-  backgroundColor: variables.successColor,
-  color: variables.whiteColor,
-  margin: '20px',
-};
-
-/**
- * Reusable Success Button component properties
- *
- * @author Pavan Kumar Jadda
- * @since 0.3.3
- */
-interface Props {
-  children?: React.ReactNode;
-  type?: 'button' | 'submit' | 'reset';
-  loading: boolean;
-  startIcon?: React.ReactNode;
-  sx?: SxProps<Theme>;
-  onClick?: () => void;
-}
-
-/**
- * Reusable Success Loading Button
- *
- * @author Pavan Kumar Jadda
- * @since 0.1.0
- */
-export default function LoadingSuccessButton(props: Props) {
-  return (
-    <LoadingButton
-      variant="contained"
-      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}
-    </LoadingButton>
-  );
-}

package/src/lib/components/buttons/ManageButton.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import SettingsIcon from '@mui/icons-material/Settings';
-import { Button } from '@mui/material';
-import { NextRouter } from 'next/router';
-
-interface ManageButtonProps {
-  url: string;
-  size?: 'small' | 'medium' | 'large';
-  startIcon?: React.ReactNode;
-  router: NextRouter;
-}
-
-export default function ManageButton(props: ManageButtonProps) {
-  return (
-    <Button
-      className="pushRight"
-      onClick={() => props.router.push(props.url)}
-      variant="contained"
-      color="primary"
-      size={props.size ?? 'large'}
-      startIcon={props.startIcon ?? <SettingsIcon />}
-    >
-      Manage
-    </Button>
-  );
-}

package/src/lib/components/buttons/SuccessButton.tsx

@@ -1,38 +0,0 @@
-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;
-	sx?: SxProps<Theme>;
-	type?: 'button' | 'submit' | 'reset';
-	onClick: () => void;
-	startIcon?: React.ReactNode;
-}
-
-/**
- * Reusable Success Button component
- *
- * @author Pavan Kumar Jadda
- * @since 0.1.0
- */
-export default function SuccessButton(props: SuccessButtonProps): React.JSX.Element {
-	return (
-		<Button
-			className={props.className}
-			sx={props.sx}
-			startIcon={props.startIcon}
-			variant="contained"
-			color="success"
-			type={props.type ?? 'button'}
-			onClick={() => props.onClick()}>
-			{props.children}
-		</Button>
-	);
-}

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

@@ -1,46 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Alert, IconButton, Slide, Snackbar } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-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.success}
-				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.error}
-				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/src/lib/components/snack-bar/QuerySnackBar.tsx

@@ -1,62 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Alert, IconButton, Slide, Snackbar } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-
-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/src/lib/constants/AppConstants.ts

@@ -1,17 +0,0 @@
-/**
- * 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/src/lib/react-kit.module.scss

@@ -1,22 +0,0 @@
-/* Define global variables */
-
-$primary-color: #153d77;
-$secondary-color: #607d8b;
-$success-color: #198754;
-$error-color: #ff1744;
-$white-color: #fff;
-$background-color: #dedede;
-$pdf-color: #f40f02;
-$word-document-color: #2b579a;
-
-/* Export the variables so that they can be used in the app */
-:export {
-	primaryColor: $primary-color;
-	secondaryColor: $secondary-color;
-	successColor: $success-color;
-	errorColor: $error-color;
-	whiteColor: $white-color;
-	backgroundColor: $background-color;
-	pdfDocumentColor: $pdf-color;
-	wordDocumentColor: $word-document-color;
-}

package/src/lib/types/ProgressState.ts

@@ -1,7 +0,0 @@
-export interface ProgressState {
-	loading: boolean;
-	success: boolean;
-	error: boolean;
-	complete: boolean;
-	message: string;
-}

package/src/lib/utils/BooleanUtils.ts

@@ -1,13 +0,0 @@
-/**
- * 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/src/lib/utils/DateUtils.ts

@@ -1,43 +0,0 @@
-/**
- * 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 error 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/src/lib/utils/NumberUtils.ts

@@ -1,12 +0,0 @@
-/**
- * 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/src/lib/utils/ProgressStateUtils.ts

@@ -1,74 +0,0 @@
-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 => ({
-  loading: false,
-  success: false,
-  error: false,
-  complete: 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,
-  loading: true,
-  success: false,
-  error: false,
-  message: '',
-});
-
-/**
- * Update state as success
- *
- * @return ProgressState Updated State Object
- *
- * @author Pavan Kumar Jadda
- * @since 0.2.30
- */
-export const markSuccess = (
-  progressState: ProgressState,
-  message?: string
-): ProgressState => ({
-  ...progressState,
-  loading: false,
-  success: true,
-  error: false,
-  complete: true,
-  message: message || '',
-});
-
-/**
- * Update state as failure or error
- *
- * @return ProgressState Updated State Object
- *
- * @author Pavan Kumar Jadda
- * @since 0.2.30
- */
-export const markError = (
-  progressState: ProgressState,
-  message?: string
-): ProgressState => ({
-  ...progressState,
-  loading: false,
-  success: false,
-  error: true,
-  complete: true,
-  message: message || '',
-});

package/src/lib/utils/StringUtils.ts

@@ -1,14 +0,0 @@
-/**
- * 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/src/lib/utils/UrlUtils.ts

@@ -1,19 +0,0 @@
-/**
- * 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/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "types": ["vite/client", "vitest"]
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../tsconfig.base.json"
-}

package/tsconfig.lib.json

@@ -1,23 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../dist/out-tsc",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
-      "vite/client"
-    ]
-  },
-  "exclude": [
-    "**/*.spec.ts",
-    "**/*.test.ts",
-    "**/*.spec.tsx",
-    "**/*.test.tsx",
-    "**/*.spec.js",
-    "**/*.test.js",
-    "**/*.spec.jsx",
-    "**/*.test.jsx"
-  ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}