feat(core): adds ccs variables support and adds more components

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

@@ -1,50 +1,28 @@
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import Home from './Home';
-import ButtonsDemo from './buttons/ButtonsDemo';
-import SnackBarDemo from './snack-bar/SnackBarDemo';
-import DialogDemo from './dialog/DialogDemo';
-import Root from '../routes/root';
-import CenterCircularProgressDemo from './progress-bar/CenterCircularProgressDemo';
-import AllBooks from './all-books/AllBooks';
-
-const router = createBrowserRouter([
-	{
-		path: '/',
-		element: <Root />,
-		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 />,
-			},
-		],
-	},
-]);
+import { Link, Outlet } from 'react-router-dom';
+import React from 'react';
 
 export default function App() {
-	return <RouterProvider router={router} />;
+	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 />
+				</ul>
+			</div>
+
+			<div className={'main'}>
+				<h1 style={{ textAlign: 'center' }}>React Kit Demo</h1>
+				<hr />
+				<main>
+					{/* Nested routes render here */}
+					<Outlet />
+				</main>
+			</div>
+		</>
+	);
 }

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

@@ -1,13 +1,17 @@
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
-import App from './app/app';
+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
-);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>
+	<StrictMode>
+		<ThemeProvider theme={theme}>
+			<CssBaseline />
+			<RouterProvider router={router} />
+		</ThemeProvider>
+	</StrictMode>
 );

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

@@ -0,0 +1,45 @@
+import { createBrowserRouter } from 'react-router-dom';
+import Home from '../app/Home';
+import ButtonsDemo from '../app/buttons/ButtonsDemo';
+import SnackBarDemo from '../app/snack-bar/SnackBarDemo';
+import DialogDemo from '../app/dialog/DialogDemo';
+import CenterCircularProgressDemo from '../app/progress-bar/CenterCircularProgressDemo';
+import AllBooks from '../app/all-books/AllBooks';
+import App from '../app/app';
+
+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 />,
+			},
+		],
+	},
+]);

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

@@ -1 +1,37 @@
-/* You can add global styles to this file, and also import other style files */
+: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;
+}
+

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: { cssVarPrefix: '' },
+	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;

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

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

@@ -1,3 +1,5 @@
+import './lib/global.css';
+
 // Export all buttons
 export { CancelButton } from './lib/components/buttons/CancelButton';
 export { DeleteButton } from './lib/components/buttons/DeleteButton';
@@ -13,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';
@@ -27,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>
+	);
+}