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

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

@@ -1,29 +0,0 @@
-import { Link, Outlet } from 'react-router-dom';
-
-export default function App() {
-	return (
-		<>
-			<div className="sidenav">
-				<ul>
-					<Link to="/">Home</Link> <br />
-					<Link to="/buttons">Buttons</Link> <br />
-					<Link to="/snack-bar">Snack Bar</Link> <br />
-					<Link to="/dialog">Dialog</Link> <br />
-					<Link to="/circular-progress">Circular Progress</Link> <br />
-					<Link to="/books">All Books</Link> <br />
-					<Link to="/react-if">React If Demo</Link> <br />
-					<Link to="/links">Links Demo</Link> <br />
-				</ul>
-			</div>
-
-			<div className={'main'}>
-				<h1 style={{ textAlign: 'center' }}>React Kit Demo</h1>
-				<hr />
-				<main>
-					{/* Nested routes render here */}
-					<Outlet />
-				</main>
-			</div>
-		</>
-	);
-}

package/apps/react-kit-demo/src/app/buttons/ButtonsDemo.tsx

@@ -1,58 +0,0 @@
-import {
-	CancelButton,
-	DeleteButton,
-	ExcelButton,
-	GoBackButton,
-	HistoryButton,
-	LoadingSuccessButton,
-	ManageButton,
-	SuccessButton,
-} from '@react-kit/react-kit';
-import { useNavigate } from 'react-router-dom';
-import { Divider } from '@mui/material';
-
-export default function ButtonsDemo() {
-	const navigate = useNavigate();
-	return (
-		<div style={{ marginInline: '1rem', textAlign: 'center' }}>
-			<h2>Buttons Demo</h2>
-			<Divider sx={{ mb: 3 }} />
-			Cancel Button:
-			<CancelButton onClick={() => console.log('Clicked Cancel Button')} name={'Cancel'}></CancelButton> <br />
-			Delete Button:
-			<DeleteButton loading={false} onClick={() => console.log('Clicked Delete Button')} /> <br />
-			<br />
-			<br />
-			Excel Button:
-			<ExcelButton onClick={() => console.log('Clicked Excel Button')}>Export to Excel</ExcelButton> <br />
-			<br />
-			<div>
-				Success Button:
-				<SuccessButton onClick={() => console.log('Clicked Success Button')}>Success</SuccessButton> <br />
-				<br />
-			</div>
-			<div>
-				Loading Success Button:
-				<LoadingSuccessButton loading={false} onClick={() => console.log('Clicked Loading Success Button')}>
-					Save
-				</LoadingSuccessButton>
-				<br />
-			</div>
-			<div>
-				Go back Button:
-				<GoBackButton navigate={navigate}></GoBackButton>
-				<br />
-			</div>
-			<div>
-				History Button:
-				<HistoryButton onClick={() => console.log('Clicked History Button')}>History</HistoryButton>
-				<br />
-			</div>
-			<div>
-				Manage Button:
-				<ManageButton onClick={() => console.log('Clicked Manage Button')}>Manage</ManageButton>
-				<br />
-			</div>
-		</div>
-	);
-}

package/apps/react-kit-demo/src/app/dialog/DialogDemo.tsx

@@ -1,23 +0,0 @@
-import { ConfirmDialog } from '@react-kit/ConfirmDialog';
-import { useState } from 'react';
-import { Button } from '@mui/material';
-
-export default function DialogDemo() {
-	const [open, setOpen] = useState(false);
-	return (
-		<div style={{ margin: '1rem', textAlign: 'center' }}>
-			<Button onClick={() => setOpen(true)}>Open Dialog</Button>
-
-			<ConfirmDialog
-				id={'confirm-dialog'}
-				keepMounted
-				message={'Do you want to proceed?'}
-				onClose={() => {
-					setOpen(false);
-				}}
-				open={open}
-				value={'Yes'}
-			/>
-		</div>
-	);
-}

package/apps/react-kit-demo/src/app/links/LinksDemo.tsx

@@ -1,20 +0,0 @@
-import { Divider } from "@mui/material";
-import { NextLink, OpenInNewIconLink } from "@react-kit/*";
-
-
-export default function LinksDemo() {
-  return (
-		<div>
-			<div style={{ marginInline: '1rem', textAlign: 'center' }}>
-				<h2>Links Demo</h2>
-				<Divider sx={{ mb: 3 }} />
-				MUI Link:
-				<NextLink href={"/buttons-demo"}> Buttons Demo</NextLink>
-				<br />
-				Open In New Icon Link :
-				<OpenInNewIconLink href={`https://www.google.com/`} target="_blank" linkText={'Open In New Tab'} />
-				<br />
-			</div>
-		</div>
-	);
-}

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

@@ -1,10 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-// 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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,36 +0,0 @@
-: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

@@ -1,46 +0,0 @@
-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

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

package/apps/react-kit-demo/src/utils/CssUtils.ts

@@ -1,13 +0,0 @@
-/**
- * Get the value of a CSS variable
- *
- * @param variable The name of the CSS variable
- *
- * @returns The value of the CSS variable
- *
- * @author Pavan Kumar Jadda
- * @since 1.6.0
- */
-export function getCssVariable(variable: string): string {
-	return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
-}

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

@@ -1,18 +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": [
-		"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

@@ -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.app.json"
-		},
-		{
-			"path": "./tsconfig.spec.json"
-		}
-	],
-	"extends": "../../tsconfig.base.json"
-}

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

@@ -1,28 +0,0 @@
-{
-  "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

@@ -1,50 +0,0 @@
-/// <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

@@ -1,52 +0,0 @@
-{
-	"$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/react-kit/.babelrc

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

package/react-kit/.eslintrc.json

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