Waitp 1201 basic web layout (#4620)

* WAITP-1201 Top bar

* WAITP-1201 Add map layout part 1

* WAITP-1201 Map layout part 2

* WAITP-1201 Update map layout

* WAITP-1202 Update map layout and add context for sidebar

* WAITP-1201 add types for context

* WAITP-1201 fix types

* WAITP-1201 add comments

* WAITP-1201 AuthModal layout

* WAITP-1201 update menus

* WAITP-1201 Add buttons to auth modal

* WAITP-1201 Set user views as auth modals

* WAITP-1201 Update comments and folder structure

* WAITP-1201 Add stories

* WAITP-1201 remove storybook-react-router

* WAITP-1201 tweaks

* WAITP-1201 remove theme variables

* WAITP-1201 remove dropdown and stories

* WAITP-1201 move mapdiv

* WAITP-1201 remove extra height line

* WAITP-1201 keep padding in close button

* Update packages/tupaia-web/src/layout/Sidebar/Sidebar.tsx

Co-authored-by: Tom Caiger <caigertom@gmail.com>

* Update min-width

Co-authored-by: Tom Caiger <caigertom@gmail.com>

---------

Co-authored-by: Tom Caiger <caigertom@gmail.com>

packages/tupaia-web/.storybook/ReactRouterDecorator.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { action } from '@storybook/addon-actions';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { Args } from '@storybook/react';
+import { DecoratorFunction } from '@storybook/csf';
+
+const LocationChangeAction = ({ children }) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.key !== 'default') action('React Router Location Change')(location);
+  }, [location]);
+
+  return <>{children}</>;
+};
+
+const ReactRouterDecorator: DecoratorFunction<any, Args> = (Story, context) => {
+  return (
+    <BrowserRouter>
+      <LocationChangeAction>
+        <Story {...context} />
+      </LocationChangeAction>
+    </BrowserRouter>
+  );
+};
+
+export default ReactRouterDecorator;

packages/tupaia-web/.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

packages/tupaia-web/.storybook/preview.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import { AppStyleProviders } from '../src/AppStyleProviders';
-import { DARK_BLUE, WHITE } from '../src/theme';
-
+import ReactRouterDecorator from './ReactRouterDecorator';
 const preview: Preview = {
   parameters: {
     backgrounds: {
       default: 'Dark',
       values: [
-        { name: 'Dark', value: DARK_BLUE },
-        { name: 'Light', value: WHITE },
+        { name: 'Dark', value: '#135D8F' },
+        { name: 'Light', value: '#ffffff' },
       ],
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -21,6 +20,7 @@ const preview: Preview = {
     },
   },
   decorators: [
+    ReactRouterDecorator,
     Story => {
       return (
         <AppStyleProviders>

packages/tupaia-web/package.json

@@ -40,7 +40,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "6.3.0",
-    "react-router-dom": "6.3.0", 
+    "react-router-dom": "6.3.0",
     "styled-components": "^5.1.0",
     "vite-plugin-ejs": "^1.6.4",
     "vite-plugin-env-compatible": "^1.1.1"

packages/tupaia-web/src/App.tsx

@@ -4,12 +4,19 @@
  */
 import React from 'react';
 import { AppStyleProviders } from './AppStyleProviders';
-import { Router } from './Router';
+import { Routes } from './Routes';
+import { Layout } from './layout';
+import { BrowserRouter } from 'react-router-dom';
 
 const App = () => {
   return (
     <AppStyleProviders>
-      <Router />
+      <BrowserRouter>
+        {/** The Layout component needs to be inside BrowserRouter so that Link component from react-router-dom can be used (in menu etc.) */}
+        <Layout>
+          <Routes />
+        </Layout>
+      </BrowserRouter>
     </AppStyleProviders>
   );
 };

packages/tupaia-web/src/AppStyleProviders.tsx

@@ -3,29 +3,10 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import React, { ReactNode } from 'react';
-import {
-  StylesProvider,
-  createMuiTheme,
-  ThemeProvider as MuiThemeProvider,
-} from '@material-ui/core/styles';
+import { ThemeProvider as MuiThemeProvider, StylesProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from 'styled-components';
-
-// Base theme overrides. Any extra overrides should be added here, as needed.
-const theme = createMuiTheme({
-  palette: {
-    type: 'dark',
-    primary: {
-      main: '#0296c5', // Main blue (as seen on primary buttons)
-    },
-    secondary: {
-      main: '##ee6230', // Tupaia Orange
-    },
-    background: {
-      default: '#262834', // Dark blue background
-    },
-  },
-});
+import { theme } from './theme';
 
 export const AppStyleProviders = ({ children }: { children: ReactNode }) => (
   <StylesProvider injectFirst>

packages/tupaia-web/src/Routes.tsx

@@ -0,0 +1,36 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { Navigate, Route, Routes as RouterRoutes } from 'react-router-dom';
+import {
+  LandingPage,
+  LoginForm,
+  PasswordResetForm,
+  Project,
+  RegisterForm,
+  RequestAccessForm,
+  VerifyEmailForm,
+} from './pages';
+import { DEFAULT_URL } from './constants';
+
+/**
+ * This Router is using [version 6.3]{@link https://reactrouter.com/en/v6.3.0}, as later versions are not supported by our TS setup. See [this issue here]{@link https://github.com/remix-run/react-router/discussions/8364}
+ * This means the newer 'createBrowserRouter' and 'RouterProvider' can't be used here.
+ *
+ * **/
+
+export const Routes = () => (
+  <RouterRoutes>
+    <Route path="/" element={<Navigate to={`/${DEFAULT_URL}`} replace />} />
+    <Route path="login" element={<LoginForm />} />
+    <Route path="register" element={<RegisterForm />} />
+    <Route path="reset-password" element={<PasswordResetForm />} />
+    <Route path="request-access" element={<RequestAccessForm />} />
+    <Route path="verify-email" element={<VerifyEmailForm />} />
+    <Route path="/:landingPageUrlSegment" element={<LandingPage />} />
+    {/** Because react-router v 6.3 doesn't support optional url segments, we need to handle dashboardCode with a splat/catch-all instead */}
+    <Route path="/:projectCode/:entityCode/*" element={<Project />} />
+  </RouterRoutes>
+);

packages/tupaia-web/src/components/Modal.tsx

@@ -0,0 +1,61 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React, { ReactNode } from 'react';
+import { Dialog, Paper as MuiPaper, useTheme, useMediaQuery } from '@material-ui/core';
+import MuiCloseIcon from '@material-ui/icons/Close';
+import styled from 'styled-components';
+import { IconButton } from '@tupaia/ui-components';
+
+interface ModalProps {
+  children?: ReactNode;
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+const Wrapper = styled.div`
+  text-align: center;
+  overflow-x: hidden;
+  padding: 2em;
+`;
+
+const CloseIcon = styled(MuiCloseIcon)`
+  width: 1.2em;
+  height: 1.2em;
+`;
+
+const CloseButton = styled(IconButton)`
+  background-color: transparent;
+  min-width: initial;
+  position: absolute;
+  top: 0.6em;
+  right: 0.6em;
+`;
+
+const Paper = styled(MuiPaper)`
+  background-color: ${({ theme }) => theme.palette.background.default};
+  padding: 0;
+  color: rgba(255, 255, 255, 0.9);
+  overflow-y: auto;
+  max-width: 920px;
+  min-width: 300px;
+  // Prevent width from animating.
+  transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+`;
+
+export const Modal = ({ children, isOpen, onClose }: ModalProps) => {
+  // make the modal full screen at small screen sizes
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));
+  return (
+    <Dialog open={isOpen} onClose={onClose} PaperComponent={Paper} fullScreen={fullScreen}>
+      <Wrapper id="overlay-wrapper">
+        <CloseButton onClick={onClose} color="default">
+          <CloseIcon />
+        </CloseButton>
+        {children}
+      </Wrapper>
+    </Dialog>
+  );
+};

packages/tupaia-web/src/components/index.ts

@@ -2,3 +2,4 @@
  * Tupaia
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
+export { Modal } from './Modal';

packages/tupaia-web/src/constants/colors.ts

@@ -0,0 +1,5 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ */
+export const TRANSPARENT_BLACK = 'rgba(43, 45, 56, 0.94)';

packages/tupaia-web/src/constants/constants.ts

@@ -6,3 +6,5 @@
 export const DEFAULT_PROJECT_CODE = 'explore';
 export const DEFAULT_ENTITY_CODE = 'explore';
 export const DEFAULT_URL = `${DEFAULT_PROJECT_CODE}/${DEFAULT_ENTITY_CODE}`;
+
+export const TUPAIA_LIGHT_LOGO_SRC = '/images/tupaia-logo-light.svg';

packages/tupaia-web/src/constants/index.ts

@@ -2,4 +2,5 @@
  * Tupaia
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
+export * from './colors';
 export * from './constants';