@js-smart/react-kit 1.0.0 → 1.0.2

package/lib/components/CenteredCircularProgress.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Reusable Circular Progress component
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export declare function CenteredCircularProgress(): import("react/jsx-runtime").JSX.Element;

package/lib/components/ConfirmationDialog.d.ts

@@ -0,0 +1,11 @@
+interface ConfirmDialogProps {
+    id: string;
+    keepMounted: boolean;
+    title?: string;
+    message: string;
+    value: string;
+    open: boolean;
+    onClose: (value: string) => void;
+}
+export declare function ConfirmDialog(props: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/DismissibleAlert.d.ts

@@ -0,0 +1,18 @@
+import { AlertColor } from '@mui/material';
+
+/**
+ * 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 declare function DismissibleAlert(props: DismissibleAlertProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/OpenInNewIconLink.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+interface OpenInNewIconLinkProps {
+    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 declare function OpenInNewIconLink(props: OpenInNewIconLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ReactIf.d.ts

@@ -0,0 +1,14 @@
+import { default as 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 declare function ReactIf(props: {
+    condition: boolean | undefined;
+    children: React.ReactNode;
+}): React.JSX.Element;

package/lib/components/buttons/CancelButton.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+
+/**
+ * Reusable Success Button component properties
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.14
+ */
+interface CancelButtonProps {
+    children?: React.ReactNode;
+    className?: string;
+    dataCy?: 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 declare function CancelButton(props: CancelButtonProps): React.JSX.Element;
+export {};

package/lib/components/buttons/DeleteButton.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+
+interface DeleteButtonProps {
+    loading: boolean;
+    label?: string;
+    loadingLabel?: string;
+    loadingPosition?: 'start' | 'end' | 'center';
+    type?: 'button' | 'submit' | 'reset' | undefined;
+    dataCy?: string;
+    startIcon?: React.ReactNode;
+    onClick: () => void;
+}
+export declare function DeleteButton(props: DeleteButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/buttons/ExcelButton.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { 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;
+    dataCy?: string;
+}
+/**
+ * Reusable Excel Button component
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.9
+ */
+export declare function ExcelButton(props: SuccessButtonProps): React.JSX.Element;
+export {};

package/lib/components/buttons/GoBackButton.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+interface GoBackButtonProps {
+    onClick: () => void;
+    children?: React.ReactNode;
+}
+export declare function GoBackButton(props: GoBackButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/buttons/HistoryButton.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+
+/**
+ * Reusable History Button component properties
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.2.15
+ */
+interface HistoryButtonProps {
+    children?: React.ReactNode;
+    className?: string;
+    dataCy?: 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 declare function HistoryButton(props: HistoryButtonProps): React.JSX.Element;
+export {};

package/lib/components/buttons/LoadingSuccessButton.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+
+/**
+ * Reusable Success Button component properties
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.3.3
+ */
+interface Props {
+    children?: React.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    loading: boolean;
+    dataCy?: string;
+    startIcon?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    onClick?: () => void;
+}
+/**
+ * Reusable Success Loading Button
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export declare function LoadingSuccessButton(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/buttons/ManageButton.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+interface ManageButtonProps {
+    size?: 'small' | 'medium' | 'large';
+    dataCy?: string;
+    startIcon?: React.ReactNode;
+    onClick: () => void;
+    children?: React.ReactNode;
+}
+export declare function ManageButton(props: ManageButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/buttons/SuccessButton.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { 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;
+    dataCy?: 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 declare function SuccessButton(props: SuccessButtonProps): React.JSX.Element;
+export {};

package/lib/components/snack-bar/AppSnackBar.d.ts

@@ -0,0 +1,7 @@
+import { ProgressState } from '../../types/ProgressState';
+
+export declare const AppSnackBar: (props: {
+    open: boolean;
+    progressState: ProgressState;
+    autoHideDuration?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/snack-bar/QuerySnackBar.d.ts

@@ -0,0 +1,18 @@
+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 declare const QuerySnackBar: (props: QuerySnackBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/constants/AppConstants.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Global System settings used in the application
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.0.0
+ */
+export declare 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",
+    SYSTEM_COOKIE_TIMEOUT_HOURS = 24,
+    SYSTEM_COOKIE_TIMEOUT_MILLI_SECONDS = 3600000
+}

package/lib/types/ProgressState.d.ts

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

package/lib/utils/BooleanUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns `true` if the provided string is `undefined`, `null` or empty '' string otherwise returns false
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export declare function parseBoolean(value: boolean | string | null | undefined): boolean;

package/lib/utils/DateUtils.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 declare const setCookieExpirationDate: () => Date;
+/**
+ * Convert String format browser Date Time to ISO Date
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.2.30
+ */
+export declare const convertToIsoDate: (currentDateTime: string) => string;
+/**
+ * Convert String format browser Date Time to ISO Date
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.2.30
+ */
+export declare const formatDate: (date: string | undefined, newFormat: string) => string;

package/lib/utils/NumberUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns number parsed from the given string
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.3.5
+ */
+export declare function parseNumber(value: string | null | undefined): number | undefined;

package/lib/utils/ProgressStateUtils.d.ts

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

package/lib/utils/StringUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns `true` if the provided string is `undefined`, `null` or empty '' string otherwise returns false
+ *
+ * @author Pavan Kumar Jadda
+ * @since 0.1.0
+ */
+export declare function isBlankOrEmpty(value: any): boolean;

package/lib/utils/UrlUtils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 declare const isEncoded: (url: string) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-smart/react-kit",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "./index.js",
   "types": "./index.d.ts",
   "publishConfig": {
@@ -12,5 +12,24 @@
       "import": "./index.mjs",
       "require": "./index.js"
     }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/js-smart/react-kit"
+  },
+  "author": {
+    "name": "Pavan Kumar Jadda",
+    "email": "contactdeveloperpj@gmail.com"
+  },
+  "keywords": [
+    "react",
+    "react-kit",
+    "react-components",
+    "react-utils",
+    "typescript"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/js-smart/react-kit/issues"
   }
 }

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}

package/.eslintrc.json

@@ -1,18 +0,0 @@
-{
-  "extends": ["plugin:@nx/react", "../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}

package/README.md

@@ -1,7 +0,0 @@
-# react-kit
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test react-kit` to execute the unit tests via [Vitest](https://vitest.dev/).

package/project.json

@@ -1,10 +0,0 @@
-{
-  "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/src/index.ts

@@ -1,29 +0,0 @@
-// Export all buttons
-export * from './lib/components/buttons/CancelButton';
-//export * from './lib/components/buttons/DeleteButton';
-export { default as DeleteButton } from './lib/components/buttons/DeleteButton';
-export * from './lib/components/buttons/ExcelButton';
-export * from './lib/components/buttons/GoBackButton';
-export * from './lib/components/buttons/HistoryButton';
-export * from './lib/components/buttons/LoadingSuccessButton';
-export * from './lib/components/buttons/ManageButton';
-export * from './lib/components/buttons/SuccessButton';
-
-// Export snackbar components
-export * from './lib/components/snack-bar/AppSnackBar';
-export * from './lib/components/snack-bar/QuerySnackBar';
-
-// Export all other components
-export * from './lib/components/CenteredCircularProgress';
-export * from './lib/components/ConfirmationDialog';
-export * from './lib/components/DismissibleAlert';
-export * from './lib/components/OpenInNewIconLink';
-export * from './lib/components/ReactIf';
-
-// Export all utilities
-export * from './lib/utils/BooleanUtils';
-export * from './lib/utils/DateUtils';
-export * from './lib/utils/NumberUtils';
-export * from './lib/utils/ProgressStateUtils';
-export * from './lib/utils/StringUtils';
-export * from './lib/utils/UrlUtils';

package/src/lib/components/CenteredCircularProgress.tsx

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

package/src/lib/components/ConfirmationDialog.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-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/src/lib/components/DismissibleAlert.tsx

@@ -1,64 +0,0 @@
-import { Alert, AlertColor, IconButton } from '@mui/material';
-import React, { useState } from 'react';
-import CloseIcon from '@mui/icons-material/Close';
-
-/**
- * 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;
-};
-
-function DismissibleAlert(props: 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 (
-		<>
-			{open && (
-				<Alert
-					action={
-						dismissible ? (
-							<IconButton
-								aria-label="close"
-								color="inherit"
-								size="small"
-								onClick={() => {
-									setOpen(false);
-								}}>
-								<CloseIcon fontSize="inherit" />
-							</IconButton>
-						) : (
-							<></>
-						)
-					}
-					style={{ margin: '20px' }}
-					{...props}>
-					{props.message}
-				</Alert>
-			)}
-		</>
-	);
-}
-
-export default DismissibleAlert;