Merge pull request #4 from Robert-M-Lucas/dev-SCRUM-8

Dev Scrum 8

.run/Test Deploy.run.xml

@@ -0,0 +1,27 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Test Deploy" type="ShConfigurationType">
+    <option name="SCRIPT_TEXT" value="firebase hosting:channel:deploy dev" />
+    <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
+    <option name="SCRIPT_PATH" value="" />
+    <option name="SCRIPT_OPTIONS" value="" />
+    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
+    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
+    <option name="INTERPRETER_PATH" value="/usr/bin/zsh" />
+    <option name="INTERPRETER_OPTIONS" value="" />
+    <option name="EXECUTE_IN_TERMINAL" value="true" />
+    <option name="EXECUTE_SCRIPT_FILE" value="false" />
+    <envs />
+    <method v="2">
+      <option name="NpmBeforeRunTask" enabled="true">
+        <package-json value="$PROJECT_DIR$/package.json" />
+        <command value="run" />
+        <scripts>
+          <script value="build" />
+        </scripts>
+        <node-interpreter value="project" />
+        <envs />
+      </option>
+    </method>
+  </configuration>
+</component>

.run/dev.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="dev" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="dev" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

README.md

@@ -12,10 +12,17 @@ Initial page setup (e.g. title): `/index.html`
 
 Router config ([docs](https://reactrouter.com/en/main)): `/src/router.tsx`
 
+See other folders in `src` for example files within.
+
 ## Commands
 
+Sync packages: `npm install`
+
 Serve webpage locally: `npm run dev`
 
+> If you use WebStorm (Jetbrains), `npm run dev` and firebase deployment
+will be automatically set up as run configs from files in `.run`
+
 ### Firebase
 
 Install Firebase tools: `npm install -g firebase-tools`

package.json

@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
+    "react-tiles-dnd": "^0.1.2",
     "sass": "^1.72.0"
   },
   "devDependencies": {

src/components/Footer.tsx

@@ -0,0 +1,10 @@
+export function Footer() {
+    return <footer className="py-3 my-4">
+        <hr/>
+        <ul className="nav justify-content-center pb-3 mb-3">
+            <li className="nav-item"><a href="/" className="nav-link px-2 text-muted">Home</a></li>
+            <li className="nav-item"><a href="/index#contact" className="nav-link px-2 text-muted">Contact</a></li>
+        </ul>
+        <p className="text-center text-muted">Sample Footer © 2024 Group 19 Inc.</p>
+    </footer>;
+}

src/components/FullscreenCenter.tsx

@@ -0,0 +1,13 @@
+import {ReactNode} from "react";
+
+interface Props {
+    children: ReactNode
+}
+
+export function FullscreenCenter({ children }: Props) {
+    return <div style={{width: "100vw !important", height: "90vh"}} className="d-flex">
+        <div className="d-flex justify-content-center align-items-center" style={{width: "100vw"}}>
+            {children}
+        </div>
+    </div>;
+}

src/components/Header.tsx

@@ -0,0 +1,45 @@
+import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx";
+
+interface Props {
+    user?: string
+}
+
+export function Header({ user }: Props) {
+    const {width, height} = useWindowDimensions();
+    const aspect_ratio = (width == 0 ? 1 : width) / (height == 0 ? 1 : height);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const use_narrow = aspect_ratio < 1.3;
+
+    return <header className="p-3 text-bg-dark">
+        <div className="container">
+            <div className="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+                <div className="col-sm-auto" style={{marginRight:"20px"}}>
+                    <a href="/" className="d-flex align-items-center mb-2 mb-lg-0 text-white" style={{textDecoration: "none"}}>
+                        <h3 style={{marginBottom:"0", textAlign:"center"}}>{use_narrow ? "Narrow" : "Header"}</h3>
+                    </a>
+                </div>
+
+                <ul className={"nav " + (use_narrow ? "me-3 " : "col-12 ") + "col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"}>
+                    <li><a href="/" className="nav-link px-2 text-white  fw-bold ">Page 1</a></li>
+
+                    <li><a href="/" className="nav-link px-2 text-white ">Page 2</a></li>
+                </ul>
+
+                <div className="text-end">
+                    {user ?
+                        <>
+                            <label className="label fw-bold text-white" style={{marginRight: "10px"}}>{user}</label>
+                            <a href="/">
+                                <button type="button" className="btn btn-outline-light me-2">Logout</button>
+                            </a>
+                        </>
+                        :
+                        <a href="/user-test">
+                        <button type="button" className="btn btn-light me-2">Login</button>
+                        </a>
+                    }
+                </div>
+            </div>
+        </div>
+    </header>;
+}

src/components/Modal.tsx

@@ -0,0 +1,18 @@
+import {ReactNode} from "react";
+
+interface Props {
+    show: boolean,
+    children: ReactNode
+}
+
+export function Modal({show, children}: Props) {
+    return <div className="modal"
+                tabIndex={-1}
+                style={{display: show ? "inherit" : "none", backgroundColor: "rgba(0, 0, 0, 0.2)"}}
+                onClick={() => console.log("click!")}
+    >
+        <div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+            {children}
+        </div>
+    </div>;
+}

src/components/Sidebar.tsx

@@ -0,0 +1,57 @@
+import {ReactNode} from "react";
+import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx";
+
+// ? From https://getbootstrap.com/docs/5.0/examples/sidebars/
+
+interface Props {
+    children: ReactNode
+}
+
+export function Sidebar({ children }: Props) {
+    const {width, height} = useWindowDimensions();
+    const aspect_ratio = (width == 0 ? 1 : width) / (height == 0 ? 1 : height);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const use_narrow = aspect_ratio < 1.5;
+
+    return <div className="row flex-grow-1" style={{marginRight: "0", minHeight: "0"}}>
+        <div className={"col-2 d-flex flex-column flex-shrink-0 p-3 text-dark border-end"} style={{minHeight: "0"}}>
+            <a href="/public" className="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+                <img className="rounded-1" src="/30x30_dummy.png" style={{marginRight: "10px", width: "30px", height: "30px"}}/>
+                <span className="fs-4">{use_narrow ? "Narrow" : "Sidebar"}</span>
+            </a>
+            <hr/>
+            <ul className="nav nav-pills flex-column mb-auto">
+                {
+                    [...Array(5)].map((_, n) => <li className="nav-item">
+                        <a href="#" className={(n == 1 ? "active " : "text-dark ") + "nav-link"} aria-current="page">
+                            <div className="bi me-2" style={{display: "inline", width: "16px", height: "16px"}}>
+                                <img className="rounded-1" src="/16x16_dummy.png"/>
+                            </div>
+                            Lorem Ipsum
+                        </a>
+                    </li>)
+                }
+            </ul>
+            <hr/>
+            <div className="dropdown">
+                <a href="#" className="d-flex align-items-center text-dark text-decoration-none dropdown-toggle"
+                   id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
+                    <img src="https://github.com/mdo.png" alt="" width="32" height="32" className="rounded-circle me-2"/>
+                    <strong>mdo</strong>
+                </a>
+                <ul className="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
+                    <li><a className="dropdown-item" href="#">New project...</a></li>
+                    <li><a className="dropdown-item" href="#">Settings</a></li>
+                    <li><a className="dropdown-item" href="#">Profile</a></li>
+                    <li>
+                        <hr className="dropdown-divider"/>
+                    </li>
+                    <li><a className="dropdown-item" href="#">Sign out</a></li>
+                </ul>
+            </div>
+        </div>
+        <div className="col-10 overflow-auto" style={{minHeight: "0", height: "100%"}}>
+            {children}
+        </div>
+    </div>
+}

src/hooks/WindowDimensionsHook.tsx

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+// ? From this answer: https://stackoverflow.com/a/36862446
+
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height
+    };
+}
+
+export default function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return windowDimensions;
+}

src/main.tsx

@@ -5,10 +5,10 @@ import {RouterProvider} from "react-router-dom";
 import {router} from "./router.tsx";
 
 // ! Potentially temporary - UI Styling tbd
-import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap/scss/bootstrap.scss'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <RouterProvider router={router}/>
-    </React.StrictMode>,
+    </React.StrictMode>
 )

src/pages/404/404.tsx

@@ -0,0 +1,23 @@
+import {FullscreenCenter} from "../../components/FullscreenCenter.tsx";
+import {useNavigate} from "react-router-dom";
+
+function _404Page() {
+    const navigate = useNavigate();
+
+    return (
+        <>
+            <FullscreenCenter>
+                <div className="text-center">
+                    <h1>404 - Not Found</h1>
+                    <p style={{color: "grey"}}>
+                        <b><a style={{textDecoration: "none"}} href="/"
+                              onClick={() => navigate(-1)}>Back</a></b> ● <b><a
+                        style={{textDecoration: "none"}} href="/">Home</a></b>
+                    </p>
+                </div>
+            </FullscreenCenter>
+        </>
+    )
+}
+
+export default _404Page

src/pages/dashboard/DashboardPage.tsx

@@ -0,0 +1,51 @@
+import "./styles.css";
+import "react-tiles-dnd/esm/index.css";
+import { TilesContainer, RenderTileFunction } from "react-tiles-dnd";
+import useWindowDimensions from "../../hooks/WindowDimensionsHook.tsx";
+import {Link} from "react-router-dom";
+import {Header} from "../../components/Header.tsx";
+import {Sidebar} from "../../components/Sidebar.tsx";
+
+// ? Lot of code obtained from here for testing: https://codesandbox.io/p/sandbox/react-tiles-dnd-responsive-bd0ly?file=%2Fsrc%2Findex.tsx
+
+interface Props {
+    tiles: Array<{ text: string; rows: number; cols: number }>
+}
+
+const render: RenderTileFunction<{ text: string; rows: number; cols: number }> = ({ data, isDragging }) => (
+    <div style={{ padding: ".75rem", width: "100%" }}>
+        <div className={`tile card ${isDragging ? "dragging" : ""}`}
+             style={{ width: "100%", height: "100%" }} >
+            {data.text} {isDragging ? "DRAGGING" : null}
+        </div>
+    </div>
+);
+const tileSize = (tile: { text: string; rows: number; cols: number }) => ({
+    colSpan: tile.cols,
+    rowSpan: tile.rows
+});
+
+export default function Dashboard(props: Props) {
+    const {width} = useWindowDimensions();
+    const columns = Math.max(Math.floor(width / 200), 1);
+
+
+    return <>
+        <div className="vh-100 d-flex flex-column">
+            <Header user="testUser"/>
+            <Sidebar>
+                <div className="App ps-5 pe-5 mt-3">
+                    <h1>Testing Tiles</h1>
+                    <p><Link to={"/"}>Go back</Link></p>
+                    <TilesContainer
+                        data={props.tiles}
+                        renderTile={render}
+                        tileSize={tileSize}
+                        ratio={1}
+                        columns={columns}
+                    ></TilesContainer>
+                </div>
+            </Sidebar>
+        </div>
+    </>
+}

src/pages/dashboard/styles.css

@@ -0,0 +1,21 @@
+.App {
+    font-family: sans-serif;
+    text-align: center;
+}
+
+.tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /*color: white;*/
+    /*background-color: #4b6cb7;*/
+    box-shadow: rgba(0, 0, 0, 0.05) 3px 3px 15px;
+    transition: all 300ms ease-in-out;
+}
+
+.dragging {
+    transform: scale(1.06);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
+    rgba(0, 0, 0, 0.12) 0 -12px 30px, rgba(0, 0, 0, 0.12) 0 4px 6px,
+    rgba(0, 0, 0, 0.17) 0 12px 13px, rgba(0, 0, 0, 0.09) 0 -3px 5px;
+}