Squashed commit of the following:

commit 1054469 Author: Emily Mahanna <56279459+eamahanna@users.noreply.github.com> Date: Mon Jun 15 10:40:45 2020 -0800 feat(example app): add modals page example 204 (#250) * WIP Set up basic layout, router * Switch to react-router, add placeholder content * feat(example app): add modals example page * feat(example app): add redux for modals * hook up modals page * feat(example app): add hook modal * fix(modals page): fixes from PR review * fix(modals page): pr update * fix(modals page): remove comment * fix(modals page): add import back in Co-authored-by: Suzanne Rozier <suz@truss.works> commit 832decc Author: Suzanne Rozier <suz@truss.works> Date: Mon Jun 15 13:00:03 2020 -0500 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
trussworks · Jun 15, 2020 · 47f4462 · 47f4462
1 parent f5792c1
commit 47f4462
Show file tree

Hide file tree

Showing 17 changed files with 563 additions and 71 deletions.
diff --git a/docs/contributing.md b/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
 

diff --git a/example/README.md b/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).

diff --git a/example/package.json b/example/package.json
@@ -11,9 +11,13 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.9",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "redux": "^4.0.5",
     "typescript": "~3.7.2"
   },
   "scripts": {
@@ -37,6 +41,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.1.5",
     "customize-cra": "^0.9.1",
     "react-app-rewired": "^2.1.6"
   },

diff --git a/example/src/App.css b/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);
-  }
-}

diff --git a/example/src/App.test.tsx b/example/src/App.test.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+// TODO Add additional app testing
+test('renders the app without error', () => {
+  const { getByText } = render(<App />)
+  expect(getByText('Modals')).toBeInTheDocument()
+})
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,29 +1,97 @@
-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 '@trussworks/react-uswds/lib/index.css'
+import {
+  GovBanner,
+  Header,
+  Title,
+  NavMenuButton,
+  PrimaryNav,
+  GridContainer,
+} from '@trussworks/react-uswds'
+
+import HomePage from './pages/Home'
+import ExamplePage from './pages/Example'
+import ModalsPage from './pages/Modals'
 
-import logo from './logo.svg'
 import './App.css'
 
-function App() {
+/* Routes */
+const routes = {
+  HOME_PAGE: '/',
+  EXAMPLES_PAGE: '/examples',
+  MODALS_PAGE: '/modals',
+}
+
+const App = () => {
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
+  const { HOME_PAGE, EXAMPLES_PAGE, MODALS_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>,
+    <NavLink to={MODALS_PAGE} activeClassName="usa-current">
+      Modals
+    </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={MODALS_PAGE}>
+              <ModalsPage />
+            </Route>
+            <Route path={HOME_PAGE}>
+              <HomePage />
+            </Route>
+          </Switch>
+        </GridContainer>
+      </section>
+    </Router>
   )
 }
 

diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -3,11 +3,19 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+
+import { rootReducer } from './redux/reducers'
+
+const store = createStore(rootReducer)
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <Provider store={store}>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </Provider>,
   document.getElementById('root')
 );
 

diff --git a/example/src/pages/Example.tsx b/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
diff --git a/example/src/pages/Home.tsx b/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