Feature/react dom router app bar (#765)

Signed-off-by: hxtree <[email protected]>

common/config/rush/browser-approved-packages.json

@@ -242,10 +242,18 @@
       "name": "@pnpm/types",
       "allowedCategories": [ "platform", "rigs" ]
     },
+    {
+      "name": "@popperjs/core",
+      "allowedCategories": [ "apis" ]
+    },
     {
       "name": "@reduxjs/toolkit",
       "allowedCategories": [ "apis" ]
     },
+    {
+      "name": "@rollup/plugin-multi-entry",
+      "allowedCategories": [ "apis" ]
+    },
     {
       "name": "@rushstack/eslint-config",
       "allowedCategories": [ "category-platform", "platform" ]

common/config/rush/repo-state.json

@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "aeee2ce0d784d1ffd96165dcb760637b0018b27d",
+  "pnpmShrinkwrapHash": "f41cb3c7c21329ba1aaa868d1604dc10e8c8aea4",
   "preferredVersionsHash": "7c6836c4ff2ee31a263e87ea93a487fc752ca3f6"
 }

services/admin-client/src/App.tsx

@@ -1,24 +1,12 @@
 import '@cats-cradle/design-system/dist/assets/style.css';
-import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom';
-import Header from "./components/Header";
-import DicePage from "./pages/dice.page";
-import ArchetypesPage from "./pages/archetypes.page";
-import HomePage from './pages/home.page';
-
-const router = createBrowserRouter(
-  createRoutesFromElements(
-    <Route path="/" element={<Header />}>
-      <Route index element={<HomePage />} />
-      <Route path="dice-analyzer" element={<DicePage />} />
-      <Route path="archetypes" element={<ArchetypesPage />} />
-    </Route>
-  )
-)
+import { PageFooter } from '@cats-cradle/design-system/dist/main';
+import { Router } from './routing/Router';
 
 function App() {
   return (
     <>
-      <RouterProvider router={router}/>
+      <Router/>
+      <PageFooter siteOwner="Cats Cradle" links={[{label: 'Example', url: 'okay'}]}/>
     </>
   );
 }

services/admin-client/src/components/DiceAnalyzer.tsx

@@ -125,6 +125,8 @@ export const DiceAnalyzer = (props: DiceAnalyzerProps) => {
         <Button
       color="secondary"
       onClick={() => clear()}
+      // TODO clear should be disabled when already cleared
+      // disabled="true"
       testId={`dice-analyzer-clear`}
       ref={(ref: any) => analytics.set(ref, 'Clear')}>
       Clear

services/admin-client/src/components/Header.tsx

@@ -23,13 +23,17 @@ const Header = () => {
 
   return (
     <>
-      <AppBar>
-        <Button href="/login" color="inherit" size="small">Login</Button>
+      <AppBar
+        topRightSlot={<>Customer Service | <Button href="/login" color="inherit" size="small">Login</Button></>}
+      >
         <ul className="navbar-nav me-auto">
           {menuItems && menuItems.map(
             (menuItem: NavMenuItem) => (
             <li className="nav-item">
-              <NavLink to={menuItem.link}>{menuItem.title}</NavLink>
+              <NavLink
+                className={({ isActive, isPending }) =>
+                  (isPending ? "pending" : isActive ? "active" : "") +
+                  " nav-link"} to={menuItem.link}>{menuItem.title}</NavLink>
             </li>
           ))}
         </ul>
@@ -38,4 +42,4 @@ const Header = () => {
     </>
   )
 };
-export default Header;
+export default Header;

services/admin-client/src/routing/Router.tsx

@@ -0,0 +1,22 @@
+import '@cats-cradle/design-system/dist/assets/style.css';
+import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom';
+import Header from "../components/Header";
+import DicePage from "../pages/dice.page";
+import ArchetypesPage from "../pages/archetypes.page";
+import HomePage from '../pages/home.page';
+
+export const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path="/" element={<Header />}>
+      <Route index element={<HomePage />} />
+      <Route path="dice-analyzer" element={<DicePage />} />
+      <Route path="archetypes" element={<ArchetypesPage />} />
+    </Route>
+  )
+)
+
+export const Router = () => {
+  return (
+    <RouterProvider router={router}/>
+  );
+}

services/design-system/package.json

@@ -47,7 +47,9 @@
     "@cats-cradle/base-nodejs": "workspace:*",
     "jsdom": "~23.0.1",
     "lodash": "~4.17.21",
-    "bootstrap": "~5.3.2"
+    "bootstrap": "~5.3.2",
+    "@popperjs/core": "2.11.8",
+    "@rollup/plugin-multi-entry": "~6.0.1"
   },
   "devDependencies": {
     "vite-plugin-checker": "0.6.2",

services/design-system/src/components/AppBar/AppBar.tsx

@@ -1,5 +1,5 @@
 import './style.scss';
-import React from "react";
+import React, { ReactNode } from 'react';
 
 export type NavMenuItem = {
   link: string;
@@ -11,16 +11,18 @@ export type AppBarProps = {
   siteTitle?: string;
   theme?: 'dark' | 'light';
   children?: any;
+  topRightSlot: ReactNode;
 }
 
 export const AppBar = (props: AppBarProps) => {
-  const { children, siteTitle, menuItems, theme } = props;
+  const { topRightSlot, children, siteTitle, menuItems, theme } = props;
 
   return (
     <>
       <nav className={`navbar navbar-expand-lg navbar-light`}>
         <div className="container">
           <a className="navbar-brand" href="#">{siteTitle || 'Your Brand'}</a>
+          {topRightSlot}
           <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
             <span className="navbar-toggler-icon"></span>
           </button>

services/design-system/src/index.scss

@@ -0,0 +1,89 @@
+// Bring in Bootstrap
+//
+// Override Bootstrap's Sass default variables
+//
+// Nearly all variables in Bootstrap are written with the `!default` flag.
+// This allows you to override the default values of those variables before
+// you import Bootstrap's source Sass files.
+//
+// Overriding the default variable values is the best way to customize your
+// CSS without writing _new_ styles. For example, you can either change
+// `$body-color` or write more CSS that override's Bootstrap's CSS like so:
+// `body { color: red; }`.
+
+// Place variable overrides first, then import just the styles you need. Note that some stylesheets are required no matter what.
+
+// Toggle global options
+$enable-gradients: true;
+$enable-shadows: true;
+
+$offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
+
+// Include functions first
+@import "bootstrap/scss/functions";
+
+// Customize some defaults
+$body-color: #333;
+$body-bg: #fff;
+$border-radius: .4rem;
+$success: #7952b3;
+
+// Bootstrap required
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+
+// Bootstrap optional
+@import "bootstrap/scss/type";
+// @import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+// @import "bootstrap/scss/tables";
+// @import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+// @import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar"; // Requires nav
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+// @import "bootstrap/scss/alert";
+// @import "bootstrap/scss/progress";
+// @import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+// @import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal"; // Requires transitions
+// @import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+// @import "bootstrap/scss/carousel";
+// @import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas"; // Requires transitions
+// @import "bootstrap/scss/placeholders";
+
+// Helpers
+// @import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+
+
+//
+// Custom styles
+//
+
+@import './styles/utils/color-pallette';
+@import './styles/utils/bg-color';
+
+@import './components/Typography/style.module.scss';
+@import './components/AppBar/style.scss';
+@import './components/Button/style.module.scss';
+@import './components/SocialMediaBar/style.module.scss';
+@import './components/PageFooter/style.module.scss';