feat(template-bod): add redux support

issue #19

package.json

@@ -22,7 +22,8 @@
     "test": "npm run test:bod",
     "test:all": "lerna run test",
     "test:bod": "npm run test:watch -w bod",
-    "test:e2e": "ts-node scripts/e2e.ts"
+    "test:e2e": "ts-node scripts/e2e.ts",
+    "test:template": "npm run test -w cra-template-bod"
   },
   "keywords": [
     "bod",

packages/cra-template-bod/package.json

@@ -38,7 +38,7 @@
     "template:test": "react-scripts test"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.6.1",
+    "@reduxjs/toolkit": "~1.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",

packages/cra-template-bod/src/App.css

@@ -20,13 +20,10 @@
   justify-content: center;
   min-height: 100vh;
   font-size: calc(10px + 2vmin);
-  color: white;
-  background-color: #282c34;
 }
 
 .App-link {
-  margin-bottom: 1rem;
-  color: #61dafb;
+  color: rgb(112, 76, 182);
 }
 
 @keyframes App-logo-spin {

packages/cra-template-bod/src/App.test.tsx

@@ -1,9 +1,18 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
 import App from './App';
+import store from './store';
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  const { getByText } = render(
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+
+  expect(getByText(/learn/i)).toBeInTheDocument();
+  expect(getByText(/react/i)).toBeInTheDocument();
+  expect(getByText(/redux/i)).toBeInTheDocument();
+  expect(getByText(/bod cli/i)).toBeInTheDocument();
 });

packages/cra-template-bod/src/App.tsx

@@ -1,34 +1,49 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import { Counter } from './containers';
+import logo from './logo.svg';
 
-function App() {
+const App = (): JSX.Element => {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
+        <Counter />
         <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>
-        <a
-          className="App-link"
-          href="https://sabertazimi.github.io/bod"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn Bod CLI
-        </a>
+        <span>
+          <span>Learn </span>
+          <a
+            className="App-link"
+            href="https://reactjs.org/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            React
+          </a>
+          <span>, </span>
+          <a
+            className="App-link"
+            href="https://redux.js.org/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Redux
+          </a>
+          <span>, </span>
+          <a
+            className="App-link"
+            href="https://sabertazimi.github.io/bod"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Bod CLI
+          </a>
+        </span>
       </header>
     </div>
   );
-}
+};
 
 export default App;

packages/cra-template-bod/src/components/Counter/index.module.css

@@ -0,0 +1,85 @@
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.row > button {
+  margin-right: 8px;
+  margin-left: 4px;
+}
+
+.value {
+  padding-right: 16px;
+  padding-left: 16px;
+  margin-top: 2px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 78px;
+}
+
+.button,
+.asyncButton {
+  padding-right: 12px;
+  padding-bottom: 4px;
+  padding-left: 12px;
+  font-size: 32px;
+  color: rgb(112, 76, 182);
+  cursor: pointer;
+  background: none;
+  background-color: rgba(112, 76, 182, 0.1);
+  border: 2px solid transparent;
+  border-radius: 2px;
+  outline: none;
+  appearance: none;
+}
+
+.asyncButton {
+  position: relative;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .button,
+  .asyncButton {
+    transition: all 0.15s;
+  }
+}
+
+.button:hover,
+.button:focus,
+.asyncButton:hover,
+.asyncButton:focus {
+  border: 2px solid rgba(112, 76, 182, 0.4);
+}
+
+.button:active,
+.asyncButton:active {
+  background-color: rgba(112, 76, 182, 0.2);
+}
+
+.asyncButton::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  content: '';
+  background-color: rgba(112, 76, 182, 0.15);
+  opacity: 0;
+}
+
+.asyncButton:active::after {
+  width: 0%;
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .asyncButton::after {
+    transition: width 1s linear, opacity 0.5s ease 1s;
+  }
+
+  .asyncButton:active::after {
+    transition: 0s;
+  }
+}

packages/cra-template-bod/src/components/Counter/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { AppDispatch } from '../../store';
+import styles from './index.module.css';
+
+interface CounterProps {
+  count: number;
+  onDecrement: () => ReturnType<AppDispatch>;
+  onIncrement: () => ReturnType<AppDispatch>;
+  onIncrementAsync: () => ReturnType<AppDispatch>;
+  onIncrementByAmount: () => ReturnType<AppDispatch>;
+  onIncrementIfOdd: () => ReturnType<AppDispatch>;
+}
+
+const Counter = ({
+  count,
+  onDecrement,
+  onIncrement,
+  onIncrementAsync,
+  onIncrementByAmount,
+  onIncrementIfOdd,
+}: CounterProps): JSX.Element => (
+  <div>
+    <div className={styles.row}>
+      <button
+        className={styles.button}
+        aria-label="Decrement value"
+        onClick={onDecrement}
+      >
+        -
+      </button>
+      <span className={styles.value}>{count}</span>
+      <button
+        className={styles.button}
+        aria-label="Increment value"
+        onClick={onIncrement}
+      >
+        +
+      </button>
+    </div>
+    <div className={styles.row}>
+      <button className={styles.button} onClick={onIncrementByAmount}>
+        Add Amount
+      </button>
+      <button className={styles.asyncButton} onClick={onIncrementAsync}>
+        Add Async
+      </button>
+      <button className={styles.button} onClick={onIncrementIfOdd}>
+        Add If Odd
+      </button>
+    </div>
+  </div>
+);
+
+export default Counter;

packages/cra-template-bod/src/components/index.ts

@@ -0,0 +1 @@
+export { default as Counter } from './Counter';