Layout improvements

client/package.json

@@ -4,26 +4,17 @@
   "private": true,
   "proxy": "http://localhost:3001",
   "dependencies": {
-    "@cmsgov/design-system": "^2.7.3",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "axios": "^0.21.2",
-    "http-proxy-middleware": "^1.3.1",
-    "node-sass": "^4.14.1",
+    "@cmsgov/design-system": "^2.13.0",
+    "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "react-router": "6",
+    "react-router-dom": "^6.2.1",
+    "web-vitals": "^2.1.3"
   },
   "scripts": {
     "start": "react-scripts start",
+    "start:native": "REACT_APP_CTX=native react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -47,6 +38,15 @@
     ]
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.1.7"
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/axios": "^0.14.0",
+    "@types/jest": "^27.4.0",
+    "@types/react-router-dom": "^5.3.2",
+    "jest": "^27.4.7",
+    "jest-dom": "^4.0.0",
+    "react-scripts": "^5.0.0",
+    "sass": "^1.48.0",
+    "typescript": "^4.5.4"
   }
 }

client/src/App.tsx

@@ -2,49 +2,31 @@ import Header from './components/header';
 import Patient from './components/patient';
 import PatientData from './components/patientData';
 import Records from './components/records';
-import { BrowserRouter as Router} from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import { TabPanel, Tabs } from '@cmsgov/design-system';
+import { Layout } from './components/layout';
+import Profile from './components/profile';
+import Medications from './components/medications';
+import Procedures from './components/procedures';
+import Providers from './components/providers';
+import Expenses from './components/expenses';
+import Diagnoses from './components/diagnoses';
 
 function App() {
   return (
     <div className="ds-l-container ds-u-margin-bottom--7 ds-u-padding-bottom--7">
-    <Router>
       <Header />
-      <Tabs tablistClassName="ds-u-margin-top--3">
-        <TabPanel id="patient" tab="Patient info">
-          <h2>Patient information</h2>
-          <div className="ds-u-display--flex ds-u-flex-direction--column ds-u-lg-flex-direction--row ds-u-flex-wrap--nowrap ds-u-lg-flex-wrap--wrap">
-            <div className="bb-c-card default-card">
-              <Patient />
-            </div>          
-            <div className="bb-c-card default-card">
-              <PatientData />
-            </div>          
-          </div>
-          {}
-          <Records /> 
-          {}
-        <div>
-          <div>
-            {}
-          </div>
-        </div>
-        </TabPanel>
-        <TabPanel id="summary" tab="Summary">
-          <p className='ds-u-measure--base'>
-            Blue Button 2.0 is a standards-based application programming interface (API) that delivers Medicare Part A, B, and D data for over 60 million Medicare beneficiaries. <a href="https://bluebutton.cms.gov/">Learn more about Blue Button 2.0</a>
-          </p>
-
-          <p className='ds-u-measure--base'>
-            The CMS design system is a set of open source design and front-end development resources
-            for creating Section 508 compliant, responsive, and consistent websites. It builds on the
-            U.S. Web Design System and extends it to support additional CSS and React components,
-            utility classes, and a grid framework to allow teams to quickly prototype and build
-            accessible, responsive, production-ready websites. <a href="https://design.cms.gov/">Learn more about CMS Design System</a>
-          </p>
-        </TabPanel>
-      </Tabs>
-    </Router>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Profile />} />
+          <Route path="medications" element={<Medications />} />
+          <Route path="diagnoses" element={<Diagnoses />} />
+          <Route path="procedures" element={<Procedures />} />
+          <Route path="providers" element={<Providers />} />
+          <Route path="expenses" element={<Expenses />} />
+          <Route path="*" element={<Profile />} />
+        </Route>
+      </Routes>
     </div>
   );
 }

client/src/components/diagnoses.tsx

@@ -0,0 +1,7 @@
+export default function Diagnoses() {
+    return (
+        <div>
+            <h2>Diagnoses</h2>
+        </div>
+    );
+}

client/src/components/expenses.tsx

@@ -0,0 +1,7 @@
+export default function Expenses() {
+    return (
+        <div>
+            <h2>Expenses</h2>
+        </div>
+    );
+}

client/src/components/header.tsx

@@ -1,19 +1,17 @@
 import { Badge } from '@cmsgov/design-system';
-import { Link as RouterLink } from 'react-router-dom';
+
+/*
+                <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
+
+                </Link>
+*/
 
 export default function Header({ }) {
     return (
         <header className="ds-u-padding--3 ds-u-sm-padding--6 ds-u-display--block ds-u-fill--primary-darkest">
-            <h1 className="ds-u-margin--0 ds-u-color--white ds-u-font-size--display ds-u-text-align--center">
-                <RouterLink to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
-                    Blue Button 2.0 Sample App
-                </RouterLink>
+            <h1 className="ds-u-margin--0 ds-u-color--white ds-u-text-align--center">
+                Blue Button 2.0 Sample App
             </h1>
-            <div className="ds-u-text-align--center">
-                <Badge variation="info" size="big">
-                    Medicare Prescription Drug Claims Data
-                </Badge>
-            </div>
         </header>
     );
 };

client/src/components/layout.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from "react-router-dom";
+import Header from "./header";
+import Navigation from "./navigation";
+
+export function Layout() {
+    return (
+        <div>
+            <Navigation />
+            <Outlet />
+        </div>
+    )
+}

client/src/components/medications.tsx

@@ -0,0 +1,7 @@
+export default function Medications() {
+    return (
+        <div>
+            <h2>Medications</h2>
+        </div>
+    );
+}

client/src/components/navigation.tsx

@@ -0,0 +1,52 @@
+import { VerticalNav } from "@cmsgov/design-system";
+import VerticalNavItem from "@cmsgov/design-system/dist/types/VerticalNav/VerticalNavItem";
+import { Link } from "react-router-dom";
+
+const ReactRouterLink = ({ ...props }) => (
+    <Link to={props.href} {...props}>{props.children}</Link>
+);
+
+const navItems = [
+    {
+        label: 'Profile',
+        id: 'profileNav',
+        url: '/',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Providers',
+        id: 'providersNav',
+        url: '/providers',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Procedures',
+        id: 'proceduresNav',
+        url: '/procedures',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Medications',
+        id: 'medicationsNav',
+        url: '/medications',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Diagnoses',
+        id: 'diagnosesNav',
+        url: '/diagnoses',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Expenses',
+        id: 'expensesNav',
+        url: '/expenses',
+        component: ReactRouterLink
+    }
+]
+
+export default function Navigation() {
+    return (
+        <VerticalNav items={navItems} />
+    )
+}

client/src/components/procedures.tsx

@@ -0,0 +1,7 @@
+export default function Procedures() {
+    return (
+        <div>
+            <h2>Procedures</h2>
+        </div>
+    );
+}

client/src/components/profile.tsx

@@ -0,0 +1,7 @@
+export default function Profile() {
+    return (
+        <div>
+            <h2>Profile</h2>
+        </div>
+    );
+}

client/src/components/providers.tsx

@@ -0,0 +1,7 @@
+export default function Providers() {
+    return (
+        <div>
+            <h2>Providers</h2>
+        </div>
+    );
+}

client/src/index.tsx

@@ -3,10 +3,13 @@ import './styles/index.scss';
 
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.render(
   <div className="ds-base">
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </div>,
   document.querySelector('#root'),
 );

client/src/setupProxy.js

@@ -4,7 +4,7 @@ module.exports = function(app) {
     app.use(
         '/api',
         createProxyMiddleware({
-            target: 'http://server:3001',
+            target: (process.env.REACT_APP_CTX === 'docker' ? 'http://server:3001' : 'http://localhost:3001'),
             changeOrigin: true,
         })
     );

client/src/styles/index.scss

@@ -3,35 +3,4 @@ $font-path: "~@cmsgov/design-system/dist/fonts";
 $image-path: "~@cmsgov/design-system/dist/images";
 
 // Core CMSDS styles
-@import "@cmsgov/design-system/dist/scss/index";
-
-.bb-c-card {
-  background: #fff;
-  border: 1px solid #d6d7d9;
-  border-radius: 0.3rem;
-}
-
-.bb-c-card.default-card {
-  color: #323a45;
-  max-width: 700px;
-  text-decoration: none;
-  margin: 0.5rem;
-  padding: 0 1rem 1rem 1rem;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.bb-c-card.default-card:hover {
-  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-  color: #000;
-}
-
-.full-width-card {
-  max-width: 100%;
-  padding: 1rem;
-}
-
-@media screen and (min-device-width: 1024px) {
-  .bb-c-card.default-card {
-    width: 445px;
-  }
-}
+@import "@cmsgov/design-system/dist/scss/index";

client/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": [
       "dom",
       "dom.iterable",
@@ -23,4 +23,4 @@
   "include": [
     "src"
   ]
-}
+}