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

package/apps/react-kit-demo/src/app/progress-bar/CenterCircularProgressDemo.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CenteredCircularProgress } from '@react-kit/*';
+
+export default function CenterCircularProgressDemo() {
+	return (
+		<div style={{ textAlign: 'center' }}>
+			<CenteredCircularProgress />
+		</div>
+	);
+}

package/apps/react-kit-demo/src/app/react-if/ReactIfDemo.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { DismissibleAlert, ManageButton, ReactIf } from '@react-kit/react-kit';
+import { Card, Divider } from '@mui/material';
+
+export default function ReactIfDemo() {
+	const [show, setShow] = useState(true);
+
+	return (
+		<div style={{ textAlign: 'center' }}>
+			<h2>React If Demo</h2>
+
+			<Divider sx={{ mb: 3 }} />
+			<ManageButton startIcon={''} onClick={() => setShow((prev) => !prev)}>
+				Click to toggle
+			</ManageButton>
+
+			<Card sx={{ m: 5, mb: 5 }} elevation={24}>
+				{/* Section 1: ReactIf with only condition */}
+				<div style={{ marginTop: 32 }}>
+					<h3>
+						1. ReactIf with <code>condition</code> only
+					</h3>
+					<ReactIf condition={show}>
+						<DismissibleAlert message={'Main content (condition is true)'} severity={'success'} dismissOnTimeOut={false} />
+					</ReactIf>
+				</div>
+			</Card>
+
+			<Card sx={{ m: 3 }} elevation={24}>
+				{/* Section 2: ReactIf with condition and else */}
+				<div style={{ marginTop: 32 }}>
+					<h3>
+						2. ReactIf with <code>condition</code> and <code>else</code>
+					</h3>
+					<ReactIf
+						condition={show}
+						else={<DismissibleAlert message={'Else content (condition is false)'} severity={'warning'} dismissOnTimeOut={false} />}>
+						<DismissibleAlert message={'Main content (condition is true)'} severity={'success'} dismissOnTimeOut={false} />
+					</ReactIf>
+				</div>
+			</Card>
+		</div>
+	);
+}

package/apps/react-kit-demo/src/app/snack-bar/SnackBarDemo.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Button } from '@mui/material';
+import { AppSnackBar, initializeState, markError, markSuccess } from '@react-kit/*';
+
+export default function SnackBarDemo() {
+	const [open, setOpen] = useState(false);
+	const [progressState, setProgressState] = useState(initializeState());
+	return (
+		<div style={{ margin: '1rem', textAlign: 'center' }}>
+			<Button
+				variant={'contained'}
+				color={'primary'}
+				sx={{ m: 1 }}
+				onClick={() => {
+					setProgressState(markSuccess(progressState, `Successfully shown success SnackBar!`));
+					setOpen(true);
+				}}>
+				Show Success SnackBar
+			</Button>
+
+			<Button
+				sx={{ m: 1 }}
+				variant={'contained'}
+				color={'error'}
+				onClick={() => {
+					setProgressState(markError(progressState, `Successfully shown error SnackBar!`));
+					setOpen(true);
+				}}>
+				Show Error SnackBar
+			</Button>
+
+			<AppSnackBar open={open} progressState={progressState} />
+		</div>
+	);
+}

package/apps/react-kit-demo/src/constants/ApiConstants.ts

@@ -0,0 +1,7 @@
+export const BASE_API_URL = 'https://my-json-server.typicode.com/pavankjadda/typicode-data';
+
+//Core URLs
+export const USER_API_URL = '';
+
+// API URLs
+export const BOOK_API_URL = '';

package/apps/react-kit-demo/src/constants/DialogMode.ts

@@ -0,0 +1,2 @@
+export const NEW = 'NEW';
+export const EDIT = 'EDIT';

package/apps/react-kit-demo/src/constants/HttpConstants.ts

@@ -0,0 +1,18 @@
+// Success Statuses
+export const HTTP_200 = 200;
+export const HTTP_201 = 201;
+
+// Authentication Statuses
+export const HTTP_401 = 401;
+export const HTTP_403 = 403;
+export const HTTP_404 = 404;
+export const HTTP_405 = 405;
+export const HTTP_409 = 409;
+
+// Internal Server Statuses
+export const HTTP_500 = 500;
+export const HTTP_501 = 501;
+export const HTTP_502 = 502;
+export const HTTP_503 = 503;
+export const HTTP_504 = 504;
+export const HTTP_505 = 505;

package/apps/react-kit-demo/src/constants/StateConstants.ts

@@ -0,0 +1,2 @@
+export const SUCCESS = 'success';
+export const ERROR = 'error';

package/apps/react-kit-demo/src/main.tsx

@@ -0,0 +1,17 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './routes/Routes';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import theme from './theme';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+	<StrictMode>
+		<ThemeProvider theme={theme}>
+			<CssBaseline />
+			<RouterProvider router={router} />
+		</ThemeProvider>
+	</StrictMode>
+);

package/apps/react-kit-demo/src/routes/Routes.tsx

@@ -0,0 +1,55 @@
+import { createBrowserRouter } from 'react-router-dom';
+import Home from '../app/Home';
+import AllBooks from '../app/all-books/AllBooks';
+import App from '../app/app';
+import ButtonsDemo from '../app/buttons/ButtonsDemo';
+import DialogDemo from '../app/dialog/DialogDemo';
+import LinksDemo from '../app/links/LinksDemo';
+import CenterCircularProgressDemo from '../app/progress-bar/CenterCircularProgressDemo';
+import ReactIfDemo from '../app/react-if/ReactIfDemo';
+import SnackBarDemo from '../app/snack-bar/SnackBarDemo';
+
+export const router = createBrowserRouter([
+	{
+		path: '/',
+		element: <App />,
+		children: [
+			{
+				path: '/',
+				element: <Home />,
+			},
+			{
+				path: 'home',
+				element: <Home />,
+			},
+			{
+				path: '/buttons',
+				element: <ButtonsDemo />,
+			},
+			{
+				path: '/snack-bar',
+				element: <SnackBarDemo />,
+			},
+			{
+				path: '/dialog',
+				element: <DialogDemo />,
+			},
+			{
+				path: '/circular-progress',
+				element: <CenterCircularProgressDemo />,
+			},
+			{
+				path: '/books',
+				element: <AllBooks />,
+			},
+			{
+				path: '/react-if',
+				element: <ReactIfDemo />,
+			},
+			{
+				path: '/links',
+				element: <LinksDemo />,
+			},
+		],
+	},
+]);

package/apps/react-kit-demo/src/services/BookService.ts

@@ -0,0 +1,21 @@
+import { Book } from '../types/Book';
+import { fetchClient } from '@react-kit/*';
+import { BASE_API_URL, BOOK_API_URL } from '../constants/ApiConstants';
+
+/**
+ * Utility class for Books operations
+ *
+ * @author Pavan Kumar Jadda
+ * @since 1.0.0
+ */
+export class BookService {
+	/**
+	 * Get All Books
+	 *
+	 * @author Pavan Kumar Jadda
+	 * @since 1.0.0
+	 */
+	static async getAllBooks(): Promise<Book[]> {
+		return await fetchClient<Book[]>(`${BASE_API_URL + BOOK_API_URL}/books`);
+	}
+}

package/apps/react-kit-demo/src/styles.scss

@@ -0,0 +1,36 @@
+:root {
+  --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;
+}
+
+
+/* The sidebar menu */
+.sidenav {
+  height: 100%; /* Full-height: remove this if you want "auto" height */
+  width: 300px; /* Set the width of the sidebar */
+  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
+  z-index: 1; /* Stay on top */
+  top: 0; /* Stay at the top */
+  left: 0;
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 20px;
+  border-right: 1px solid black;
+}
+/* Style page content */
+.main {
+  margin-left: 300px; /* Same as the width of the sidebar */
+}
+
+/* The navigation menu links */
+.sidenav a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 20px;
+  display: block;
+}

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

@@ -0,0 +1,46 @@
+import { createTheme } from '@mui/material/styles';
+import { getCssVariable } from './utils/CssUtils';
+
+declare module '@mui/material/styles' {
+	interface BreakpointOverrides {
+		xs: true;
+		sm: true;
+		md: true;
+		lg: true;
+		xl: true;
+		xxl: true;
+		xxxl: true;
+	}
+}
+
+// A custom theme for this app
+const theme = createTheme({
+	cssVariables: true,
+	breakpoints: {
+		values: {
+			xs: 0,
+			sm: 600,
+			md: 900,
+			lg: 1200,
+			xl: 1536,
+			xxl: 1920,
+			xxxl: 2200,
+		},
+	},
+	palette: {
+		primary: {
+			main: getCssVariable('--primary-color'),
+		},
+		secondary: {
+			main: getCssVariable('--secondary-color'),
+		},
+		success: {
+			main: getCssVariable('--success-color'),
+		},
+		error: {
+			main: getCssVariable('--error-color'),
+		},
+	},
+});
+
+export default theme;

package/apps/react-kit-demo/src/types/Book.ts

@@ -0,0 +1,8 @@
+export interface Book {
+	id: number;
+	number: string;
+	title: string;
+	price: number;
+	isbn: string;
+	author: string;
+}

package/{lib/utils/CssUtils.d.ts → apps/react-kit-demo/src/utils/CssUtils.ts}

@@ -8,4 +8,6 @@
  * @author Pavan Kumar Jadda
  * @since 1.6.0
  */
-export declare function getCssVariable(variable: string): string;
+export function getCssVariable(variable: string): string {
+	return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+}

package/apps/react-kit-demo/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+	"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": [
+		"src/**/*.spec.ts",
+		"src/**/*.test.ts",
+		"src/**/*.spec.tsx",
+		"src/**/*.test.tsx",
+		"src/**/*.spec.js",
+		"src/**/*.test.js",
+		"src/**/*.spec.jsx",
+		"src/**/*.test.jsx"
+	],
+	"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/apps/react-kit-demo/tsconfig.json

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

package/apps/react-kit-demo/tsconfig.spec.json

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

package/apps/react-kit-demo/vite.config.ts

@@ -0,0 +1,50 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import mkcert from 'vite-plugin-mkcert';
+
+export default defineConfig({
+	root: __dirname,
+	cacheDir: '../../node_modules/.vite/apps/react-kit-demo',
+
+	server: {
+		port: 3007,
+		host: 'localhost',
+	},
+
+	preview: {
+		port: 4300,
+		host: 'localhost',
+	},
+
+	plugins: [react(), mkcert(), nxViteTsPaths()],
+
+	// Uncomment this if you are using workers.
+	// worker: {
+	//  plugins: [ nxViteTsPaths() ],
+	// },
+
+	build: {
+		outDir: '../../dist/apps/react-kit-demo',
+		reportCompressedSize: true,
+		commonjsOptions: {
+			transformMixedEsModules: true,
+		},
+	},
+
+	test: {
+		globals: true,
+		cache: {
+			dir: '../../node_modules/.vitest/apps/react-kit-demo',
+		},
+		environment: 'jsdom',
+		include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+
+		reporters: ['default'],
+		coverage: {
+			reportsDirectory: '../../coverage/apps/react-kit-demo',
+			provider: 'v8',
+		},
+	},
+});

package/nx.json

@@ -0,0 +1,52 @@
+{
+	"$schema": "./node_modules/nx/schemas/nx-schema.json",
+	"defaultProject": "react-kit-demo",
+	"namedInputs": {
+		"default": ["{projectRoot}/**/*", "sharedGlobals"],
+		"production": [
+			"default",
+			"!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
+			"!{projectRoot}/tsconfig.spec.json",
+			"!{projectRoot}/.eslintrc.json",
+			"!{projectRoot}/eslint.config.js"
+		],
+		"sharedGlobals": []
+	},
+	"plugins": [
+		{
+			"plugin": "@nx/vite/plugin",
+			"options": {
+				"buildTargetName": "build",
+				"testTargetName": "test",
+				"serveTargetName": "serve",
+				"previewTargetName": "preview",
+				"serveStaticTargetName": "serve-static"
+			}
+		},
+		{
+			"plugin": "@nx/eslint/plugin",
+			"options": {
+				"targetName": "lint"
+			}
+		}
+	],
+	"generators": {
+		"@nx/react": {
+			"application": {
+				"babel": true,
+				"style": "scss",
+				"linter": "eslint",
+				"bundler": "vite"
+			},
+			"component": {
+				"style": "scss"
+			},
+			"library": {
+				"style": "scss",
+				"linter": "eslint",
+				"unitTestRunner": "vitest"
+			}
+		}
+	},
+	"nxCloudId": "670ebadac0c313acbf9ee13c"
+}

package/package.json

@@ -1,46 +1,101 @@
 {
-  "name": "@js-smart/react-kit",
-  "private": false,
-  "version": "5.10.0",
-  "main": "./index.js",
-  "types": "./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": "./index.mjs",
-      "require": "./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"
-  }
+	"name": "@js-smart/react-kit",
+	"version": "5.12.0-beta.1",
+	"license": "MIT",
+	"private": false,
+	"type": "module",
+	"scripts": {
+		"nx": "nx",
+		"start": "nx serve",
+		"build": "nx build react-kit",
+		"build:demo": "nx build",
+		"test": "nx test react-kit ",
+		"update": "nx migrate latest"
+	},
+	"dependencies": {
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.1",
+		"@mui/icons-material": "^7.2.0",
+		"@mui/material": "^7.2.0",
+		"@mui/x-data-grid": "^7.29.8",
+		"date-fns": "^4.1.0",
+		"react": "^18.3.1 || ^19.0.0",
+		"react-dom": "^18.3.1 || ^19.0.0",
+		"react-router-dom": "^7.7.1"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.28.0",
+		"@babel/preset-react": "^7.27.1",
+		"@nx/cypress": "21.2.1",
+		"@nx/devkit": "21.2.1",
+		"@nx/eslint": "21.2.1",
+		"@nx/eslint-plugin": "21.2.1",
+		"@nx/js": "21.2.1",
+		"@nx/react": "21.2.1",
+		"@nx/vite": "21.2.1",
+		"@nx/web": "21.2.1",
+		"@nx/workspace": "21.2.1",
+		"@semantic-release/git": "^10.0.1",
+		"@semantic-release/npm": "^12.0.1",
+		"@swc-node/register": "1.10.10",
+		"@swc/cli": "0.6.0",
+		"@swc/core": "1.11.24",
+		"@swc/helpers": "0.5.17",
+		"@testing-library/jest-dom": "^6.5.0",
+		"@testing-library/react": "16.3.0",
+		"@types/node": "22.15.14",
+		"@types/react": "19.1.3",
+		"@types/react-dom": "19.1.3",
+		"@typescript-eslint/eslint-plugin": "8.32.0",
+		"@typescript-eslint/parser": "8.32.0",
+		"@vitejs/plugin-react": "^4.4.1",
+		"@vitest/coverage-v8": "^3.1.3",
+		"@vitest/ui": "^3.1.3",
+		"eslint": "~9.26.0",
+		"eslint-config-prettier": "10.1.2",
+		"eslint-plugin-import": "2.31.0",
+		"eslint-plugin-jsx-a11y": "6.10.2",
+		"eslint-plugin-react": "7.37.5",
+		"eslint-plugin-react-hooks": "5.2.0",
+		"jest-mock": "^29.7.0",
+		"jiti": "2.4.2",
+		"jsdom": "~26.1.0",
+		"nx": "21.2.1",
+		"prettier": "^3.5.3",
+		"sass": "^1.87.0",
+		"semantic-release": "^24.2.3",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5",
+		"vite-plugin-dts": "^4.5.3",
+		"vite-plugin-mkcert": "^1.17.8",
+		"vitest": "^3.1.3"
+	},
+	"peerDependencies": {
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.0",
+		"@mui/icons-material": "^7.1.0",
+		"@mui/material": "^7.1.0",
+		"@mui/x-data-grid": "^8.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.5.3"
+	},
+	"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"
+		]
+	}
 }

package/react-kit/.babelrc

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