From 986ac0538bbc2adab12d08654562c2a0b9cc0ed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=AA=20S=C4=A9=20B=C3=ADch?= <moonlight8978@gmail.com>
Date: Fri, 3 Jan 2020 10:33:28 +0700
Subject: [PATCH] Implement navbar (#34)

* navbar

* test navbar

* test navbar

* story for disabled, change flow type name, style for disabled item

* add test for click event
---
 .eslintrc.yml                                 |   3 +
 .storybook/preview-head.html                  |   4 +-
 flow-typed/lodash.js                          |   1 +
 jest.setup.js                                 |   2 +
 package.json                                  |   5 +
 .../navbar/__tests__/navbar.spec.jsx          | 157 ++++++++++++++++++
 src/components/navbar/index.js                |   1 +
 src/components/navbar/navbar.jsx              |  96 +++++++++++
 src/components/navbar/navbar.module.scss      |  49 ++++++
 src/index.js                                  |   2 +
 src/initializers/font-awesome.js              |   4 +
 stories/0-Markdown.stories.jsx                |   3 +-
 stories/1-Navbar.stories.jsx                  |  76 +++++++++
 yarn.lock                                     |  42 ++++-
 14 files changed, 441 insertions(+), 4 deletions(-)
 create mode 100644 src/components/navbar/__tests__/navbar.spec.jsx
 create mode 100644 src/components/navbar/index.js
 create mode 100644 src/components/navbar/navbar.jsx
 create mode 100644 src/components/navbar/navbar.module.scss
 create mode 100644 src/initializers/font-awesome.js
 create mode 100644 stories/1-Navbar.stories.jsx

diff --git a/.eslintrc.yml b/.eslintrc.yml
index bf95c37..17fe7bd 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -26,6 +26,9 @@ rules:
     - allow:
         - __REDUX_DEVTOOLS_EXTENSION__
         - __REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  no-unused-expressions:
+    - error
+    - allowShortCircuit: true
   no-unused-vars:
     - error
     - args: none
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 8e0ed19..26e741e 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -10,8 +10,8 @@
 
 <style>
   .sb-show-main {
-    width: 414px;
-    height: 736px;
+    width: 416px;
+    height: 738px;
     margin: auto;
     border: 1px solid #ccc;
   }
diff --git a/flow-typed/lodash.js b/flow-typed/lodash.js
index 0c1dcbb..e8851a3 100644
--- a/flow-typed/lodash.js
+++ b/flow-typed/lodash.js
@@ -5,5 +5,6 @@ declare module 'lodash' {
 
   declare module.exports: {
     zip<T, U>(arr1: Array<T>, arr2: Array<U>): Array<Zip<T, U>>,
+    noop: (...args: any) => void,
   }
 }
diff --git a/jest.setup.js b/jest.setup.js
index 264828a..4ad9c26 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1 +1,3 @@
 import '@testing-library/jest-dom/extend-expect'
+
+import './src/initializers/font-awesome'
diff --git a/package.json b/package.json
index c4b4e0c..1e5d4e9 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,11 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-brands-svg-icons": "^5.12.0",
+    "@fortawesome/free-regular-svg-icons": "^5.12.0",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-fontawesome": "^0.1.8",
     "axios": "^0.19.0",
     "classnames": "^2.2.6",
     "core-js": "^3.6.1",
diff --git a/src/components/navbar/__tests__/navbar.spec.jsx b/src/components/navbar/__tests__/navbar.spec.jsx
new file mode 100644
index 0000000..9eda058
--- /dev/null
+++ b/src/components/navbar/__tests__/navbar.spec.jsx
@@ -0,0 +1,157 @@
+import React from 'react'
+import { MemoryRouter } from 'react-router-dom'
+import { render, fireEvent } from '@testing-library/react'
+
+import Navbar from '../navbar'
+
+const renderNavbar = (items, initialEntries = ['/home']) =>
+  render(
+    <MemoryRouter initialEntries={initialEntries}>
+      <Navbar items={items} />
+    </MemoryRouter>
+  )
+
+test('renders error when nav items is not divisor of 24', () => {
+  const items = Array(5).fill(0)
+  const { getByText } = renderNavbar(items)
+  expect(getByText('Number of items must be divisor of 24')).toBeInTheDocument()
+})
+
+test('renders active item when nav items has matched item on first render', () => {
+  const items = [
+    {
+      icon: 'home',
+      label: 'Home',
+      activeLabel: 'House',
+      key: 'home',
+      isActive: () => true,
+    },
+    {
+      icon: 'user',
+      label: 'About',
+      activeLabel: 'About me',
+      key: 'about',
+      isActive: () => false,
+    },
+  ]
+  const { getByText, queryByText } = renderNavbar(items)
+  expect(queryByText('Home')).not.toBeInTheDocument()
+  expect(getByText('House')).toBeInTheDocument()
+})
+
+test('renders first item when nav items has multiple matched items on first render', () => {
+  const items = [
+    {
+      icon: 'home',
+      label: 'Home',
+      activeLabel: 'House',
+      key: 'home',
+      isActive: () => true,
+    },
+    {
+      icon: 'user',
+      label: 'About',
+      activeLabel: 'About me',
+      key: 'about',
+      isActive: () => true,
+    },
+  ]
+  const { getByText, queryByText } = renderNavbar(items)
+  expect(getByText('House')).toBeInTheDocument()
+  expect(queryByText('About me')).not.toBeInTheDocument()
+})
+
+test('does not render active item when no item match', () => {
+  const items = [
+    {
+      icon: 'home',
+      label: 'Home',
+      activeLabel: 'House',
+      key: 'home',
+      isActive: () => false,
+    },
+    {
+      icon: 'user',
+      label: 'About',
+      activeLabel: 'About me',
+      key: 'about',
+      isActive: () => false,
+    },
+  ]
+  const { getByText } = renderNavbar(items)
+  expect(getByText('Home')).toBeInTheDocument()
+  expect(getByText('About')).toBeInTheDocument()
+})
+
+test('changes active item when click', () => {
+  const items = [
+    {
+      icon: 'home',
+      label: 'Home',
+      activeLabel: 'House',
+      key: 'home',
+    },
+    {
+      icon: 'user',
+      label: 'About',
+      activeLabel: 'About me',
+      key: 'about',
+    },
+  ]
+  const { getByText, queryByText } = renderNavbar(items)
+
+  fireEvent.click(getByText('Home'))
+  expect(getByText('House')).toBeInTheDocument()
+
+  fireEvent.click(getByText('About'))
+  expect(getByText('About me')).toBeInTheDocument()
+  expect(queryByText('House')).not.toBeInTheDocument()
+
+  fireEvent.click(getByText('About me'))
+  expect(getByText('About')).toBeInTheDocument()
+})
+
+test('render disabled item', () => {
+  const items = [
+    {
+      icon: 'home',
+      label: 'Home',
+      activeLabel: 'House',
+      key: 'home',
+      isDisabled: () => true,
+    },
+    {
+      icon: 'user',
+      label: 'About',
+      activeLabel: 'About me',
+      key: 'about',
+    },
+  ]
+  const { getByText } = renderNavbar(items)
+  expect(getByText('Home').closest('button')).toBeDisabled()
+})
+
+test('trigger callback when click', () => {
+  let count = 0
+  const items = [
+    {
+      icon: 'home',
+      label: 'Home',
+      activeLabel: 'House',
+      key: 'home',
+      onClick: () => {
+        count += 1
+      },
+    },
+    {
+      icon: 'user',
+      label: 'About',
+      activeLabel: 'About me',
+      key: 'about',
+    },
+  ]
+  const { getByText } = renderNavbar(items)
+
+  fireEvent.click(getByText('Home'))
+  expect(count).toBe(1)
+})
diff --git a/src/components/navbar/index.js b/src/components/navbar/index.js
new file mode 100644
index 0000000..a6916e5
--- /dev/null
+++ b/src/components/navbar/index.js
@@ -0,0 +1 @@
+export { default } from './navbar'
diff --git a/src/components/navbar/navbar.jsx b/src/components/navbar/navbar.jsx
new file mode 100644
index 0000000..2f4592d
--- /dev/null
+++ b/src/components/navbar/navbar.jsx
@@ -0,0 +1,96 @@
+// @flow
+
+import React, { useState } from 'react'
+import classnames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { withRouter } from 'react-router-dom'
+
+import styles from './navbar.module.scss'
+
+type History = {
+  push: (path: string) => void,
+}
+
+type NavItemDefinition = {
+  icon: string,
+  activeIcon?: string,
+  label: string,
+  activeLabel?: string,
+  key: string,
+  isActive?: (url?: string) => boolean,
+  onClick?: (
+    event?: SyntheticEvent<HTMLButtonElement>,
+    history?: History
+  ) => any,
+  isDisabled?: (url?: string) => boolean,
+}
+
+type Props = {
+  items: Array<NavItemDefinition>,
+  location: { pathname: string },
+  history: History,
+}
+
+const BASE_COLUMNS = 24
+
+function Navbar({ items, location, history }: Props) {
+  const [selectedKey, setSelectedKey] = useState(null)
+
+  if (BASE_COLUMNS % items.length !== 0) {
+    return <div>Number of items must be divisor of 24</div>
+  }
+
+  const toggle = key => setSelectedKey(key === selectedKey ? null : key)
+  const columnWidth = BASE_COLUMNS / items.length
+
+  const activeItem = items.filter(
+    ({ isActive }) => !!isActive && isActive(location.pathname)
+  )[0]
+  const activeKey = selectedKey || (activeItem && activeItem.key)
+
+  return (
+    <nav className={styles.navbar}>
+      {items.map(
+        ({
+          icon,
+          label,
+          key,
+          activeIcon,
+          activeLabel,
+          isDisabled,
+          onClick,
+        }) => {
+          const isActive = key === activeKey
+          const displayIcon = isActive ? activeIcon || icon : icon
+          const displayLabel = isActive ? activeLabel || label : label
+
+          return (
+            <button
+              type="button"
+              className={classnames(
+                `pure-u-${columnWidth}-24`,
+                styles.navItem,
+                {
+                  [styles.navItemActive]: isActive,
+                }
+              )}
+              key={key}
+              onClick={event => {
+                toggle(key)
+                onClick && onClick(event, history)
+              }}
+              disabled={!!isDisabled && isDisabled(location.pathname)}
+            >
+              <div className={styles.icon}>
+                <FontAwesomeIcon icon={displayIcon} size="2x" />
+              </div>
+              <div className={styles.label}>{displayLabel}</div>
+            </button>
+          )
+        }
+      )}
+    </nav>
+  )
+}
+
+export default withRouter(Navbar)
diff --git a/src/components/navbar/navbar.module.scss b/src/components/navbar/navbar.module.scss
new file mode 100644
index 0000000..5824553
--- /dev/null
+++ b/src/components/navbar/navbar.module.scss
@@ -0,0 +1,49 @@
+$navbar-border-color: rgba(0, 0, 0, 0.1);
+$nav-item-color: #6c757d;
+$nav-item-active-color: #1592e6;
+
+.navbar {
+  border-top: 1px solid $navbar-border-color;
+  height: 64px;
+  display: flex;
+  color: $nav-item-color;
+}
+
+.navItem {
+  height: 100%;
+  border: 0;
+  border-top: 2px solid transparent;
+  transition: all 0.15s ease;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled) {
+    &.navItemActive,
+    &:hover {
+      color: $nav-item-active-color;
+      border-top-color: $nav-item-active-color;
+    }
+  }
+}
+
+.icon {
+  font-size: 0.9rem;
+}
+
+.label {
+  margin-top: 0.15rem;
+  font-size: 0.8rem;
+}
diff --git a/src/index.js b/src/index.js
index 6d5842c..6a9864d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,8 @@ import ReactDOM from 'react-dom'
 import 'purecss/build/pure-min.css'
 import 'highlight.js/styles/github.css'
 
+import './initializers/font-awesome'
+
 import './index.scss'
 import App from './app'
 
diff --git a/src/initializers/font-awesome.js b/src/initializers/font-awesome.js
new file mode 100644
index 0000000..63d2d97
--- /dev/null
+++ b/src/initializers/font-awesome.js
@@ -0,0 +1,4 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+
+library.add(fas)
diff --git a/stories/0-Markdown.stories.jsx b/stories/0-Markdown.stories.jsx
index 4b8eaf2..31663db 100644
--- a/stories/0-Markdown.stories.jsx
+++ b/stories/0-Markdown.stories.jsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import { MemoryRouter } from 'react-router-dom'
+
 import 'highlight.js/styles/github.css'
 import 'purecss/build/pure-min.css'
 
-import Markdown from '../src/components/markdown'
 import '../src/index.scss'
+import Markdown from '../src/components/markdown'
 
 export default {
   title: 'Markdown',
diff --git a/stories/1-Navbar.stories.jsx b/stories/1-Navbar.stories.jsx
new file mode 100644
index 0000000..7052fff
--- /dev/null
+++ b/stories/1-Navbar.stories.jsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import { MemoryRouter } from 'react-router-dom'
+
+import 'purecss/build/pure-min.css'
+
+import '../src/initializers/font-awesome'
+import '../src/index.scss'
+import Navbar from '../src/components/navbar'
+
+export default {
+  title: 'Navbar',
+}
+
+export const init = () => (
+  <MemoryRouter>
+    <div style={{ marginTop: '672px' }}>
+      <Navbar
+        items={[
+          {
+            icon: 'home',
+            label: 'Home',
+            key: 'home',
+            isActive: () => true,
+          },
+          {
+            icon: 'user',
+            label: 'About me',
+            key: 'about',
+          },
+          {
+            icon: 'bars',
+            activeIcon: 'times',
+            label: 'Menu',
+            activeLabel: 'Close',
+            key: 'menu',
+          },
+        ]}
+      />
+    </div>
+  </MemoryRouter>
+)
+init.story = { name: 'Default ' }
+
+export const disabled = () => (
+  <MemoryRouter initialEntries={['/home']}>
+    <div style={{ marginTop: '672px' }}>
+      <Navbar
+        items={[
+          {
+            icon: 'home',
+            label: 'Home',
+            key: 'home',
+            isActive: path => path.match(/home/),
+            onClick: (_event, history) => history.push('/home'),
+          },
+          {
+            icon: 'user',
+            label: 'About me',
+            key: 'about',
+            isActive: path => path.match(/about/),
+            onClick: (_event, history) => history.push('/about'),
+          },
+          {
+            icon: 'bars',
+            activeIcon: 'times',
+            label: 'Menu',
+            activeLabel: 'Close',
+            key: 'menu',
+            isDisabled: path => path.match(/home/),
+          },
+        ]}
+      />
+    </div>
+  </MemoryRouter>
+)
+init.disabled = { name: 'Disabled ' }
diff --git a/yarn.lock b/yarn.lock
index c2c58a5..de099d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1076,6 +1076,46 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@fortawesome/fontawesome-common-types@^0.2.26":
+  version "0.2.26"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.26.tgz#6e0b13a752676036f8196f8a1500d53a27b4adc1"
+  integrity sha512-CcM/fIFwZlRdiWG/25xE/wHbtyUuCtqoCTrr6BsWw7hH072fR++n4L56KPydAr3ANgMJMjT8v83ZFIsDc7kE+A==
+
+"@fortawesome/fontawesome-svg-core@^1.2.26":
+  version "1.2.26"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.26.tgz#671569271d6b532cdea5e3deb8ff16f8b7ac251d"
+  integrity sha512-3Dfd/v2IztP1TxKOxZiB5+4kaOZK9mNy0KU1vVK7nFlPWz3gzxrCWB+AloQhQUoJ8HhGqbzjliK89Vl7PExGbw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.26"
+
+"@fortawesome/free-brands-svg-icons@^5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.12.0.tgz#b0c78627f811ac030ee0ac88df376567cf74119d"
+  integrity sha512-50uCFzVUki3wfmFmrMNLFhOt8dP6YZ53zwR4dK9FR7Lwq1IVHXnSBb8MtGLe3urLJ2sA+CSu7Pc7s3i6/zLxmA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.26"
+
+"@fortawesome/free-regular-svg-icons@^5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.12.0.tgz#9b7ed5dbd7581aab47960802cc116fdc8b6c8b7d"
+  integrity sha512-FAvpmylTs0PosHwHrWPQX6/7ODc9M11kCE6AOAujFufDYzqTj2cPHT4yJO7zTEkKdAbbusJzbWpnOboMuyjeQA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.26"
+
+"@fortawesome/free-solid-svg-icons@^5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.0.tgz#8decac5844e60453cc0c7c51437d1461df053a35"
+  integrity sha512-CnpsWs6GhTs9ekNB3d8rcO5HYqRkXbYKf2YNiAlTWbj5eVlPqsd/XH1F9If8jkcR1aegryAbln/qYeKVZzpM0g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.26"
+
+"@fortawesome/react-fontawesome@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz#cb6d4dd3aeec45b6ff2d48c812317a6627618511"
+  integrity sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==
+  dependencies:
+    prop-types "^15.5.10"
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -10063,7 +10103,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==