feat(buttons): adds demo project

Author: pavankjadda

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

@@ -1,9 +1,10 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import Home from './Home';
 import ButtonsDemo from './buttons/ButtonsDemo';
-import SnackBarDemo from './SnackBarDemo';
-import DialogDemo from './DialogDemo';
+import SnackBarDemo from './snack-bar/SnackBarDemo';
+import DialogDemo from './dialog/DialogDemo';
 import Root from '../routes/root';
+import CenterCircularProgressDemo from './progress-bar/CenterCircularProgressDemo';
 
 const router = createBrowserRouter([
 	{
@@ -32,7 +33,7 @@ const router = createBrowserRouter([
 			},
 			{
 				path: '/circular-progress',
-				element: <Home />,
+				element: <CenterCircularProgressDemo />,
 			},
 		],
 	},

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

@@ -1,13 +1,22 @@
-import { CancelButton, DeleteButton, ExcelButton, LoadingSuccessButton, SuccessButton } from '@react-kit/react-kit';
+import {
+	CancelButton,
+	DeleteButton,
+	ExcelButton,
+	GoBackButton,
+	HistoryButton,
+	LoadingSuccessButton,
+	ManageButton,
+	SuccessButton,
+} from '@react-kit/react-kit';
 
 export default function ButtonsDemo() {
 	return (
-		<div>
+		<div style={{ marginInline: '1rem', textAlign: 'center' }}>
+			Cancel Button:
+			<CancelButton onClick={() => console.log('Clicked Cancel Button')}>Cancel</CancelButton> <br />
 			Delete Button:
 			<DeleteButton loading={false} onClick={() => console.log('Clicked Delete Button')} /> <br />
 			<br />
-			Cancel Button:
-			<CancelButton onClick={() => console.log('Clicked Cancel Button')}>Cancel</CancelButton> <br />
 			<br />
 			Excel Button:
 			<ExcelButton onClick={() => console.log('Clicked Excel Button')}>Export to Excel</ExcelButton> <br />
@@ -24,6 +33,21 @@ export default function ButtonsDemo() {
 				</LoadingSuccessButton>
 				<br />
 			</div>
+			<div>
+				Go back Button:
+				<GoBackButton onClick={() => console.log('Clicked GoBack Button')}></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>
 	);
 }

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

@@ -0,0 +1,23 @@
+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>
+	);
+}

apps/react-kit-demo/src/app/app.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>
+	);
+}

apps/react-kit-demo/src/app/buttons/ButtonsDemo.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>
+	);
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
+import { Link, Outlet } from 'react-router-dom';
 
 export default function Root() {
 	return (
@@ -10,6 +10,10 @@ export default function Root() {
 				{/* Nested routes render here */}
 				<Outlet />
 			</main>
+			<br /> <br />
+			<nav style={{ textAlign: 'center' }}>
+				<Link to="/">Home</Link> <br />
+			</nav>
 		</>
 	);
 }