docs(example-app): Example app UI #202 (#237)

* WIP Set up basic layout, router

* Switch to react-router, add placeholder content

* Add docs and commands for running the example app

docs/contributing.md

@@ -33,6 +33,11 @@ These should all be run from within the project directory.
 - `yarn build`
   - Builds files from `/src` and outputs to `/lib` using webpack and UMD library target
   - `yarn build:watch` is also available
+- `yarn example:install`
+  - Installs dependencies for the example app. This must be run prior to viewing/developing the example application (located in `/example`).
+  - Builds the library files from `/src` into `/lib`, and also runs `yarn install` in the `/example` directory
+- `yarn example:start`
+  - After installing dependencies, use this to start the example app dev server, so you can view the example app and also add to it.
 
 ## Development
 

example/README.md

@@ -2,13 +2,25 @@
 
 This app is meant to demonstrate some of the features and components that make up the @trussworks/react-uswds library. It is just an example, and is currently not deployed or used anywhere other than for local development and testing.
 
-_Note:_ Currently the `start, test, build` scripts are prepended with `SKIP_PREFLIGHT_CHECK=true` in `package.json`. This is to get around the issue that Create React App requires specific versions of certain libraries to run, and the ReactUSWDS library is using newer versions of those libraries (notably `babel-jest`). This was the fastest/easiest workaround for now. Relevant discussion at https://github.com/facebook/create-react-app/issues/6756.
+## Pre-requisites
+
+Since this application points to the local version of @trussworks/react-uswds, the library must be built before starting the application. In the project root (up one level from this README), you can build the library and install example app dependencies with:
+
+```
+yarn example:install
+```
+
+Then you can start the example app dev server with:
+
+```
+yarn example:start
+```
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts
 
-In the project directory, you can run:
+In this directory, you can run:
 
 ### `yarn start`
 
@@ -33,6 +45,8 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
+_Note:_ Currently the `start, test, build` scripts are prepended with `SKIP_PREFLIGHT_CHECK=true` in `package.json`. This is to get around the issue that Create React App requires specific versions of certain libraries to run, and the ReactUSWDS library is using newer versions of those libraries (notably `babel-jest`). This was the fastest/easiest workaround for now. Relevant discussion at https://github.com/facebook/create-react-app/issues/6756.
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

example/package.json

@@ -13,6 +13,7 @@
     "@types/react-dom": "^16.9.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "typescript": "~3.7.2"
   },
@@ -37,6 +38,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.1.5",
     "customize-cra": "^0.9.1",
     "react-app-rewired": "^2.1.6"
   },

example/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

example/src/App.tsx

@@ -1,29 +1,88 @@
-import React from 'react'
+import React, { useState } from 'react'
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  NavLink,
+  Link,
+} from 'react-router-dom'
 
 import '@trussworks/react-uswds/lib/uswds.css'
-import { GovBanner } from '@trussworks/react-uswds'
+import {
+  GovBanner,
+  Header,
+  Title,
+  NavMenuButton,
+  PrimaryNav,
+  GridContainer,
+} from '@trussworks/react-uswds'
+
+import HomePage from './pages/Home'
+import ExamplePage from './pages/Example'
 
-import logo from './logo.svg'
 import './App.css'
 
-function App() {
+/* Routes */
+const routes = {
+  HOME_PAGE: '/',
+  EXAMPLES_PAGE: '/examples',
+}
+
+const App = () => {
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
+  const { HOME_PAGE, EXAMPLES_PAGE } = routes
+
+  const toggleMobileNav = (): void => {
+    setMobileNavOpen((prevOpen) => !prevOpen)
+  }
+
+  const navItems = [
+    <NavLink to={HOME_PAGE} activeClassName="usa-current" exact>
+      Home
+    </NavLink>,
+    <NavLink to={EXAMPLES_PAGE} activeClassName="usa-current">
+      Examples
+    </NavLink>,
+  ]
+
   return (
-    <div className="App">
+    <Router>
       <GovBanner />
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer">
-          Learn React
-        </a>
-      </header>
-    </div>
+      <Header basic>
+        <div className="usa-nav-container">
+          <div className="usa-navbar">
+            <Title>
+              <Link to={HOME_PAGE}>Example Application</Link>
+            </Title>
+            <NavMenuButton
+              label="Menu"
+              onClick={toggleMobileNav}
+              className="usa-menu-btn"
+            />
+          </div>
+
+          <PrimaryNav
+            aria-label="Primary navigation"
+            items={navItems}
+            onToggleMobileNav={toggleMobileNav}
+            mobileExpanded={mobileNavOpen}
+          />
+        </div>
+      </Header>
+
+      <section className="usa-section">
+        <GridContainer>
+          <Switch>
+            <Route path={EXAMPLES_PAGE}>
+              <ExamplePage />
+            </Route>
+            <Route path={HOME_PAGE}>
+              <HomePage />
+            </Route>
+          </Switch>
+        </GridContainer>
+      </section>
+    </Router>
   )
 }
 

example/src/pages/Example.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const ExamplePage = (): React.ReactElement => (
+  <section>
+    <h1>Examples</h1>
+
+    <p className="usa-intro">
+      Right now there are no examples! Things that we could add include...
+    </p>
+
+    <ul className="usa-list">
+      <li>Modals</li>
+      <li>
+        Form libraries
+        <ul className="usa-list">
+          <li>Formik</li>
+          <li>React-hook-form</li>
+        </ul>
+      </li>
+    </ul>
+  </section>
+)
+
+export default ExamplePage

example/src/pages/Home.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const HomePage = (): React.ReactElement => (
+  <main>
+    <h1>ReactUSWDS Example App</h1>
+
+    <p className="usa-intro">
+      This is an example application that can be used to demonstrate and test
+      ReactUSWDS functionality.
+    </p>
+  </main>
+)
+
+export default HomePage