@tidepool/viz
Version:
Tidepool data visualization for diabetes device data.
694 lines (297 loc) • 21.3 kB
HTML
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>use of React Storybook · GitBook</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.2">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="deps/" />
<link rel="prev" href="views/Trends.html" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.2" data-path="StartHere.html">
<a href="StartHere.html">
@tidepool/viz developer guide
</a>
<ul class="articles">
<li class="chapter " data-level="1.2.1" data-path="Background.html">
<a href="Background.html">
background
</a>
</li>
<li class="chapter " data-level="1.2.2" data-path="FeatureOverview.html">
<a href="FeatureOverview.html">
overview of features
</a>
</li>
<li class="chapter " data-level="1.2.3" data-path="Architecture.html">
<a href="Architecture.html">
planned architecture
</a>
</li>
<li class="chapter " data-level="1.2.4" data-path="DirectoryStructure.html">
<a href="DirectoryStructure.html">
app & directory structure
</a>
</li>
<li class="chapter " data-level="1.2.5" data-path="CodeStyle.html">
<a href="CodeStyle.html">
code style
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3" data-path="views/">
<a href="views/">
per-view documentation
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.1" data-path="../src/components/settings/">
<a href="../src/components/settings/">
Device Settings view
</a>
</li>
<li class="chapter " data-level="1.3.2" data-path="views/Trends.html">
<a href="views/Trends.html">
Trends view
</a>
</li>
</ul>
</li>
<li class="chapter active" data-level="1.4" data-path="Storybook.html">
<a href="Storybook.html">
use of React Storybook
</a>
</li>
<li class="chapter " data-level="1.5" data-path="deps/">
<a href="deps/">
usage of dependencies
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="deps/D3.html">
<a href="deps/D3.html">
D3
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="deps/GSAP.html">
<a href="deps/GSAP.html">
GSAP
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="deps/Moment.html">
<a href="deps/Moment.html">
Moment
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="deps/React.html">
<a href="deps/React.html">
React
</a>
</li>
<li class="chapter " data-level="1.5.5" data-path="deps/ReactMotion.html">
<a href="deps/ReactMotion.html">
React Motion
</a>
</li>
<li class="chapter " data-level="1.5.6" data-path="deps/Redux.html">
<a href="deps/Redux.html">
Redux
</a>
</li>
<li class="chapter " data-level="1.5.7" data-path="deps/Webpack.html">
<a href="deps/Webpack.html">
webpack
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../src/utils/">
<a href="../src/utils/">
utilities
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1" data-path="../src/utils/apidocs/">
<a href="../src/utils/apidocs/">
API docs for utilities
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1.1" data-path="../src/utils/apidocs/basal.html">
<a href="../src/utils/apidocs/basal.html">
basal
</a>
</li>
<li class="chapter " data-level="1.6.1.2" data-path="../src/utils/apidocs/bloodglucose.html">
<a href="../src/utils/apidocs/bloodglucose.html">
blood glucose
</a>
</li>
<li class="chapter " data-level="1.6.1.3" data-path="../src/utils/apidocs/bolus.html">
<a href="../src/utils/apidocs/bolus.html">
bolus
</a>
</li>
<li class="chapter " data-level="1.6.1.4" data-path="../src/utils/apidocs/datetime.html">
<a href="../src/utils/apidocs/datetime.html">
datetime
</a>
</li>
<li class="chapter " data-level="1.6.1.5" data-path="../src/utils/apidocs/format.html">
<a href="../src/utils/apidocs/format.html">
format
</a>
</li>
<li class="chapter " data-level="1.6.1.6" data-path="../src/utils/apidocs/misc.html">
<a href="../src/utils/apidocs/misc.html">
misc
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="chapter " data-level="1.7" data-path="misc/">
<a href="misc/">
misc
</a>
<ul class="articles">
<li class="chapter " data-level="1.7.1" data-path="misc/CommonProps.html">
<a href="misc/CommonProps.html">
Common props
</a>
</li>
<li class="chapter " data-level="1.7.2" data-path="misc/Docs.html">
<a href="misc/Docs.html">
Docs setup & publishing
</a>
</li>
<li class="chapter " data-level="1.7.3" data-path="misc/TimeRenderingModes.html">
<a href="misc/TimeRenderingModes.html">
Time-rendering modes
</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >use of React Storybook</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h2 id="use-of-react-storybook">use of React Storybook</h2>
<p><a href="https://storybooks.js.org/" title="Storybook" target="_blank">React Storybook</a> is a UI component development tool that's very easy to set up and configure. It provides a way to render components outside of their full in-app context in many different states—and even, with some addons, interactively. A Storybook can serve many purposes.</p>
<ol>
<li><p>As long as there is fake data available (or easily fabricated) to serve as the props for a component, Storybook can be used as a very fast developer environment<sup><a href="#fn_a" id="reffn_a">a</a></sup> for iterating on the design and implementation of the isolated component.</p>
</li>
<li><p>By fabricating the appropriate props for a component, Storybook can be used to design for or around rare edge cases or pathological inputs in the data driving a component.</p>
</li>
<li><p>When published as a static site, a Storybook can serve as great design and front-end engineering documentation for the components included.</p>
</li>
<li><p>When published as a static site, a Storybook can serve as a "component catalog" for third-party developers wanting to use some or all of the components in the library.</p>
</li>
</ol>
<p>We use or plan to use Storybook for <em>all</em> of these purposes!</p>
<h3 id="storybooks-x-2">Storybooks x 2</h3>
<p>We have <strong>two</strong> Storybooks in viz:</p>
<ol>
<li><p>The <code>storiesDatatypes/</code> directory contains stories for the rendering of diabetes data types from the <a href="http://developer.tidepool.io/data-model/" title="Tidepool data model documentation" target="_blank">Tidepool data model</a>. As of May 2017, it contains a <code>Basal</code> component for representing (sequences of) <a href="http://developer.tidepool.io/data-model/device-data/types/basal/index.html" title="Tidepool data model: basal" target="_blank">basal rate intervals on insulin pumps</a> and a <code>Bolus</code> component for representing <a href="http://developer.tidepool.io/data-model/device-data/types/bolus/index.html 'Tidepool data model: bolus" target="_blank">bolus doses on insulin pumps</a>. Our ability to create a story for a component is often limited by our ability to snapshot (and anonymize) or fabricate fake data for it and/or the utility (or lack thereof) of the story in the case that we <em>can't</em> easily obtain or fabricate realistic-looking data. This is the reason why we don't have any stories for the Trends view components, for example.</p>
</li>
<li><p>The <code>stories/</code> directory is the default for all other components we're able to create stories for<sup><a href="#fn_b" id="reffn_b">b</a></sup>.</p>
</li>
</ol>
<p>We currently publish these two Storybooks as static sites alongside the viz docs via GitHub Pages:</p>
<ol>
<li><a href="http://developer.tidepool.io/viz/diabetes-data-stories/" title="Storybook for Tidepool diabetes data model renderers" target="_blank">components rendering data types in the Tidepool data model</a></li>
<li><a href="http://developer.tidepool.io/viz/stories/" title="Storybook for all non-diabetes data @tidepool/viz components" target="_blank">all other components</a></li>
</ol>
<h3 id="running-the-storybooks">Running the storybooks</h3>
<p>Each storybook has a command configured in the <code>package.json</code> <code>scripts</code> field. To run the diabetes datatype Storybook, run:</p>
<pre><code class="lang-bash">$ npm run typestories
</code></pre>
<p>To run the default Storybook, run:</p>
<pre><code class="lang-bash">$ npm run stories
</code></pre>
<h3 id="publishing-the-storybooks">Publishing the storybooks</h3>
<p>Whenever you've added or updated a story or stories as part of new development, you should update the viz documentation static site with new builds of the storybooks. In order to do this, you will need to make sure that your repository is set up for working on the docs static site for this repository <a href="misc/Docs.html">as explained on the docs page</a>, then follow the instructions there for bundling the GitHub Pages-appropriate static files of the Storybook.</p>
<blockquote id="fn_a">
<sup>a</sup>. It includes Webpack's hot module reloading by default, which is ⚡<em>awesome</em>⚡.<a href="#reffn_a" title="Jump back to footnote [a] in the text."> ↩</a>
</blockquote>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="views/Trends.html" class="navigation navigation-prev " aria-label="Previous page: Trends view">
<i class="fa fa-angle-left"></i>
</a>
<a href="deps/" class="navigation navigation-next " aria-label="Next page: usage of dependencies">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"use of React Storybook","level":"1.4","depth":1,"next":{"title":"usage of dependencies","level":"1.5","depth":1,"path":"docs/deps/README.md","ref":"docs/deps/README.md","articles":[{"title":"D3","level":"1.5.1","depth":2,"path":"docs/deps/D3.md","ref":"docs/deps/D3.md","articles":[]},{"title":"GSAP","level":"1.5.2","depth":2,"path":"docs/deps/GSAP.md","ref":"docs/deps/GSAP.md","articles":[]},{"title":"Moment","level":"1.5.3","depth":2,"path":"docs/deps/Moment.md","ref":"docs/deps/Moment.md","articles":[]},{"title":"React","level":"1.5.4","depth":2,"path":"docs/deps/React.md","ref":"docs/deps/React.md","articles":[]},{"title":"React Motion","level":"1.5.5","depth":2,"path":"docs/deps/ReactMotion.md","ref":"docs/deps/ReactMotion.md","articles":[]},{"title":"Redux","level":"1.5.6","depth":2,"path":"docs/deps/Redux.md","ref":"docs/deps/Redux.md","articles":[]},{"title":"webpack","level":"1.5.7","depth":2,"path":"docs/deps/Webpack.md","ref":"docs/deps/Webpack.md","articles":[]}]},"previous":{"title":"Trends view","level":"1.3.2","depth":2,"path":"docs/views/Trends.md","ref":"docs/views/Trends.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"docs/Storybook.md","mtime":"2017-05-30T14:36:05.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-05-31T15:26:30.892Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>