chore(build): adds react router

Author: pavankjadda

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function CenterCircularProgressDemo() {
+  return <div></div>;
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function DialogDemo() {
+  return <div></div>;
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export default function Home() {
+  return (
+    <div>
+      <ul>
+        <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 />
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function SnackBarDemo() {
+  return <div></div>;
+}

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

@@ -1,9 +1,39 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Home from './Home';
 import Buttons from './buttons/Buttons';
+import SnackBarDemo from './SnackBarDemo';
+import DialogDemo from './DialogDemo';
+import Root from '../routes/root';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Root />,
+    children: [
+      {
+        path: 'home',
+        element: <Home />,
+      },
+      {
+        path: '/buttons',
+        element: <Buttons />,
+      },
+      {
+        path: '/snack-bar',
+        element: <SnackBarDemo />,
+      },
+      {
+        path: '/dialog',
+        element: <DialogDemo />,
+      },
+      {
+        path: '/circular-progress',
+        element: <Home />,
+      },
+    ],
+  },
+]);
 
 export default function App() {
-  return (
-    <div>
-      <Buttons />
-    </div>
-  );
+  return <RouterProvider router={router} />;
 }

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

@@ -1,5 +1,20 @@
-import {DeleteButton} from '@react-kit/DeleteButton';
+import { DeleteButton } from '@react-kit/DeleteButton';
 
 export default function Buttons() {
-  return <DeleteButton loading={false} onClick={() => console.log()} />;
+  return (
+    <div>
+      Delete Button:{' '}
+      <DeleteButton loading={false} onClick={() => console.log()} /> <br />
+      Delete Button:{' '}
+      <DeleteButton loading={false} onClick={() => console.log()} /> <br />
+      Delete Button:{' '}
+      <DeleteButton loading={false} onClick={() => console.log()} /> <br />
+      Delete Button:{' '}
+      <DeleteButton loading={false} onClick={() => console.log()} /> <br />
+      Delete Button:{' '}
+      <DeleteButton loading={false} onClick={() => console.log()} /> <br />
+      Delete Button:{' '}
+      <DeleteButton loading={false} onClick={() => console.log()} /> <br />
+    </div>
+  );
 }

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

@@ -1,11 +1,11 @@
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
-
 import App from './app/app';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
 root.render(
   <StrictMode>
     <App />

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+export default function Root() {
+  return (
+    <>
+      <h1 style={{ textAlign: 'center' }}>React Kit Demo</h1>
+      <hr />
+
+      <p>
+        This is a demo of the <code>@react-kit</code> package.
+      </p>
+      <div id="detail">
+        <Outlet />
+      </div>
+    </>
+  );
+}

package-lock.json

@@ -30,10 +30,11 @@
     "@mui/icons-material": "^5.15.18",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.18",
+    "date-fns": "^2.30.0",
+    "next": "^14.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "next": "^14.2.3",
-    "date-fns": "^2.30.0"
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",