Feature/storybook poc/#730629677501460 (#195)

* wip * stub two stories * define test components * 🚧 explore ways to componentize existing react components * stub coin summary and detail stories * add style
coinfi · Jul 5, 2018 · 9577f00 · 9577f00
1 parent e50686e
commit 9577f00
Show file tree

Hide file tree

Showing 10 changed files with 27,252 additions and 49 deletions.
diff --git a/.storybook/addons.js b/.storybook/addons.js
@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);
diff --git a/README.md b/README.md
@@ -108,6 +108,19 @@ Note that the roadmap outlined above is subject to change based on user feedback
 This app uses Webpack (via Webpacker) and Babel in order to make use of modern JS, so don't forget to run `bin/webpack-dev-server` when developing locally.
 If you're deploying to Heroku, ensure you have the `heroku/nodejs` and `heroku/ruby` buildpacks configured (in that order).
 
+## Storybook
+
+run storybook in development
+```
+npm run storybook
+```
+
+build static storybook site
+```
+npm run build-storybook -- -o out7650
+```
+
+
 ## Coding style guide
 
 In the project root you'll find an `.eslintrc.json` and `.stylelintrc.json`, so for for JS development please ensure you're using the following extensions:

diff --git a/app/javascript/App/components/CoinDetail.js b/app/javascript/App/components/CoinDetail.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default (props) => {
+  return (
+    <div>
+      <div>Fundamentals</div>
+      <div>Price Chart</div>
+      <div>Links</div>
+    </div>
+  )
+}
+
+
diff --git a/app/javascript/App/components/CoinSummary.js b/app/javascript/App/components/CoinSummary.js
@@ -0,0 +1,106 @@
+import React from "react"
+import styled, { injectGlobal } from 'styled-components'
+
+const Button = styled.button`
+background: palevioletred;
+border-radius: 3px;
+border: none;
+color: white;
+`;
+
+const TomatoButton = styled(Button)`
+background: tomato;
+`;
+
+injectGlobal`
+  svg {
+    height:10px;
+  }
+`;
+
+export default props => {
+  return (
+    <div className="col-xs-12 col-md-4 flex flex-column">
+      <div className="mb1">
+        <component name="GlobalCoinSearch" props="{}" withstore="">
+          <div id="global-coin-search">
+            <div className="relative">
+              <div className="search-input icon-input tiber">
+                <div className="icon f4 reveal-m">
+                  <svg className="svg-inline--fa fa-search fa-w-16 pr1" aria-hidden="true" data-prefix="far" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
+                    <path fill="currentColor" d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"></path>
+                  </svg>
+                  </div>
+                <button className="btn-icon icon silver conceal-m">
+                  <svg className="svg-inline--fa fa-arrow-left fa-w-14 pr1" aria-hidden="true" data-prefix="far" data-icon="arrow-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
+                    <path fill="currentColor" d="M229.9 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L94.569 282H436c6.627 0 12-5.373 12-12v-28c0-6.627-5.373-12-12-12H94.569l155.13-155.13c4.686-4.686 4.686-12.284 0-16.971L229.9 38.101c-4.686-4.686-12.284-4.686-16.971 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971L212.929 473.9c4.686 4.686 12.284 4.686 16.971-.001z"></path>
+                  </svg>
+                  </button>
+                <input type="text" value="" placeholder="Search Coins/ICOs" />
+                </div>
+              </div>
+            </div>
+          </component>
+        </div>
+        <div className="bg-white mb2">
+          <div className="pa3 tr"></div>
+          <div className="pa4 pt0">
+            <div className="flex justify-center items-center mb3"><img alt="Bitcoin" className="w3e h3e mr3 a1" height="32" src="https://gitcdn.link/repo/cjdowner/cryptocurrency-icons/master/svg/color/btc.svg" width="32" />
+                <h1 className="ma0 lh-solid"><span className="fw4">Bitcoin</span> <span className="f6 fw9 sans-alt" id="symbol">BTC</span></h1></div>
+              <div className="f3 tc">$6,594.36<span className="smaller2 b ml2"><span className="green">+3.56%</span></span>
+              </div>
+            </div>
+          </div>
+          <div className="bg-white pa4 mb2">
+            <div className="row nt4 tc fw6">
+              <div className="stat-block col-xs-6 col-sm-3 col-md-12 col-lg-6 mt4">
+                <label>Volume (24 h)</label>$4.74B
+                <div className="dib f7 ml1">USD</div>
+              </div>
+              <div className="stat-block col-xs-6 col-sm-3 col-md-12 col-lg-6 mt4">
+                <label>Circulation</label>17.13M
+                <div className="dib f7 ml1">BTC</div>
+              </div>
+              <div className="stat-block col-xs-6 col-sm-3 col-md-12 col-lg-6 mt4">
+                <label>Market Cap</label>$112.95B
+                <div className="dib f7 ml1">USD</div>
+              </div>
+              <div className="stat-block col-xs-6 col-sm-3 col-md-12 col-lg-6 mt4">
+                <label>Total Supply</label>21M
+                <div className="dib f7 ml1">BTC</div>
+              </div>
+            </div>
+          </div>
+          <div className="bg-white tc f7 pa4 mb2">Last updated: 3 minutes ago</div>
+          <div className="bg-tiber pa4 flex flex-wrap justify-center flex-auto">
+            <div className="icons tc w-100">
+              <a className="icon icon-light" href="https://bitcoin.org/" target="_blank">
+                <svg className="svg-inline--fa fa-link fa-w-16" aria-hidden="true" data-prefix="fal" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
+                  <path fill="currentColor" d="M301.148 394.702l-79.2 79.19c-50.778 50.799-133.037 50.824-183.84 0-50.799-50.778-50.824-133.037 0-183.84l79.19-79.2a132.833 132.833 0 0 1 3.532-3.403c7.55-7.005 19.795-2.004 20.208 8.286.193 4.807.598 9.607 1.216 14.384.481 3.717-.746 7.447-3.397 10.096-16.48 16.469-75.142 75.128-75.3 75.286-36.738 36.759-36.731 96.188 0 132.94 36.759 36.738 96.188 36.731 132.94 0l79.2-79.2.36-.36c36.301-36.672 36.14-96.07-.37-132.58-8.214-8.214-17.577-14.58-27.585-19.109-4.566-2.066-7.426-6.667-7.134-11.67a62.197 62.197 0 0 1 2.826-15.259c2.103-6.601 9.531-9.961 15.919-7.28 15.073 6.324 29.187 15.62 41.435 27.868 50.688 50.689 50.679 133.17 0 183.851zm-90.296-93.554c12.248 12.248 26.362 21.544 41.435 27.868 6.388 2.68 13.816-.68 15.919-7.28a62.197 62.197 0 0 0 2.826-15.259c.292-5.003-2.569-9.604-7.134-11.67-10.008-4.528-19.371-10.894-27.585-19.109-36.51-36.51-36.671-95.908-.37-132.58l.36-.36 79.2-79.2c36.752-36.731 96.181-36.738 132.94 0 36.731 36.752 36.738 96.181 0 132.94-.157.157-58.819 58.817-75.3 75.286-2.651 2.65-3.878 6.379-3.397 10.096a163.156 163.156 0 0 1 1.216 14.384c.413 10.291 12.659 15.291 20.208 8.286a131.324 131.324 0 0 0 3.532-3.403l79.19-79.2c50.824-50.803 50.799-133.062 0-183.84-50.802-50.824-133.062-50.799-183.84 0l-79.2 79.19c-50.679 50.682-50.688 133.163 0 183.851z"></path>
+                </svg>
+                <label>Website</label>
+              </a>
+              <a className="icon icon-light" href="http://blockchain.info" target="_blank">
+                <svg className="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fal" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
+                  <path fill="currentColor" d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"></path>
+                </svg>
+                <label>Explorer</label>
+              </a>
+              <a className="icon icon-light" href="https://bitcointalk.org" target="_blank">
+                <svg className="svg-inline--fa fa-comments fa-w-18" aria-hidden="true" data-prefix="fal" data-icon="comments" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
+                  <path fill="currentColor" d="M532 386.2c27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.4 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.1 2.1 18.4 3.7 28 4.8 31.5 57.5 105.5 98 191.8 98 20.8 0 40.8-2.4 59.8-6.8 28.5 18.5 71.6 38.8 125.2 38.8 9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25-.5-.4-22.6-24.2-37.9-54.9zM142.2 311l-11.4 7.4c-20.1 13.1-50.5 28.2-87.7 32.5 8.8-11.3 20.2-27.6 29.5-46.4L83 283.7l-16.5-16.3C50.7 251.9 32 226.2 32 192c0-70.6 79-128 176-128s176 57.4 176 128-79 128-176 128c-17.7 0-35.4-2-52.6-6l-13.2-3zm303 103.4l-11.4-7.4-13.2 3.1c-17.2 4-34.9 6-52.6 6-65.1 0-122-25.9-152.4-64.3C326.9 348.6 416 278.4 416 192c0-9.5-1.3-18.7-3.3-27.7C488.1 178.8 544 228.7 544 288c0 34.2-18.7 59.9-34.5 75.4L493 379.7l10.3 20.7c9.4 18.9 20.8 35.2 29.5 46.4-37.1-4.2-67.5-19.4-87.6-32.4zm-37.8-267.7c.1.2.1.4.2.6-.1-.2-.1-.4-.2-.6z"></path>
+                </svg>
+                <label>Forum</label>
+              </a>
+              <a className="icon icon-light" href="https://twitter.com/bitcoin" target="_blank">
+                <svg className="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
+                  <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
+                </svg>
+                <label>Twitter</label>
+              </a>
+            </div>
+          </div>
+    </div>
+    )
+    }
+
diff --git a/package.json b/package.json
@@ -43,13 +43,20 @@
     "redux-saga": "^0.16.0",
     "reselect": "^3.0.1",
     "sanitize-html": "^1.18.2",
+    "styled-components": "^3.3.3",
     "tachyons-sass": "^4.9.2",
     "timeago.js": "^3.0.2",
     "url-parse": "^1.4.1",
     "webpack-merge": "^4.1.2"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.4.8",
+    "@storybook/addon-links": "^3.4.8",
+    "@storybook/addons": "^3.4.8",
+    "@storybook/react": "^3.4.8",
     "babel-eslint": "^7.2.3",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^2.5.7",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-config-react-app": "^2.1.0",
@@ -63,5 +70,9 @@
     "stylelint-config-recommended-scss": "^3.1.0",
     "stylelint-scss": "^2.5.0",
     "webpack-dev-server": "2.11.2"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   }
 }