Merge pull request #433 from appfolio/btdReact16

gt/mb - Update app to React 16
appfolio · Aug 6, 2018 · 879aeeb · 879aeeb
2 parents db8ef98 + c4653d0
commit 879aeeb
Show file tree

Hide file tree

Showing 111 changed files with 6,364 additions and 4,360 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,6 +1,20 @@
 import React from 'react';
 import infoAddon, { setDefaults } from '@storybook/addon-info';
-import { Button, ButtonGroup, Col, Container } from '../src';
+import {
+  Button,
+  Nav,
+  Navbar,
+  NavItem,
+  NavLink,
+  NavbarToggler,
+  Col,
+  Container,
+  UncontrolledCollapse,
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem
+} from '../src';
 import { configure, setAddon, addDecorator } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import { withKnobs } from '@storybook/addon-knobs';
@@ -12,55 +26,140 @@ import './addons.js';
 setOptions({
   name: `react-gears ${pkg.version}`,
   url: 'https://github.com/appfolio/react-gears',
-  showDownPanel: true,
-  downPanelInRight: true,
+  showAddonPanel: true,
+  addonPanelInRight: true,
   downPanel: 'kadirahq%2Fstorybook-addon-knobs'
 });
 
-const changeTheme = index => {
+const changeTheme = url => {
   const link = document.getElementById('theme');
-  link.href = THEMES[index].url;
-  try {
-    localStorage.storybookTheme = index;
-  } catch (err) {
-    // Safari private mode
-  }
-}
+  link.href = url;
+  // TODO reenable after 4.0.0 release
+  // try {
+  //   localStorage.storybookTheme = index;
+  // } catch (err) {
+  //   // Safari private mode
+  // }
+};
 
 const ThemeLink = props => {
-  return <Button color="link" onClick={() => changeTheme(props.index)}>{props.children}</Button>
-}
+  return (
+    <NavLink href="#" onClick={() => changeTheme(props.url)}>
+      {props.children}
+    </NavLink>
+  );
+};
+
+const APM_THEMES = [
+  {
+    name: 'APM/Saffron',
+    url:
+      'https://d36t0nm30n26wn.cloudfront.net/saffron/4.0.0/bootstrap-saffron.min.css'
+  },
+  {
+    name: 'APM/Cayenne',
+    url:
+      'https://d36t0nm30n26wn.cloudfront.net/cayenne/bootstrap-cayenne.min.css'
+  },
+  {
+    name: 'APM/Listings',
+    url:
+      'https://d36t0nm30n26wn.cloudfront.net/listings/bootstrap-listings.min.css'
+  },
+  {
+    name: 'APM/OPortal',
+    url:
+      'https://d36t0nm30n26wn.cloudfront.net/oportal/bootstrap-oportal.min.css'
+  },
+  {
+    name: 'APM/Dream',
+    url: 'https://d36t0nm30n26wn.cloudfront.net/dream/bootstrap-dream.min.css'
+  }
+];
 
-const THEMES = [
-  { name: 'APM/Saffron', url: 'https://d36t0nm30n26wn.cloudfront.net/saffron/bootstrap-saffron.min.css' },
-  { name: 'MyCase', url: 'https://s3.amazonaws.com/com.mycaseinc.dev-share/paulus/bootstrap-mycase.min.20170628.css' },
-  { name: 'APM/OPortal', url: 'https://d36t0nm30n26wn.cloudfront.net/oportal/bootstrap-oportal.min.css' },
-  { name: 'Bootstrap default', url: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' },
-  // TODO Re-enable after update to BS4 Beta:
-  // { name: 'Material', url: 'https://bootswatch.com/4-alpha/materia/bootstrap.min.css' },
-  // { name: 'Metro', url: 'https://bootswatch.com/4-alpha/cosmo/bootstrap.min.css' },
-  // { name: 'Dark', url: 'https://bootswatch.com/4-alpha/darkly/bootstrap.min.css' }
+const BS4_THEMES = [
+  {
+    name: 'Default',
+    url:
+      'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css'
+  },
+  {
+    name: 'Material',
+    url:
+      'https://stackpath.bootstrapcdn.com/bootswatch/4.1.2/materia/bootstrap.min.css'
+  },
+  {
+    name: 'Metro',
+    url:
+      'https://stackpath.bootstrapcdn.com/bootswatch/4.1.2/cosmo/bootstrap.min.css'
+  },
+  {
+    name: 'Dark',
+    url:
+      'https://stackpath.bootstrapcdn.com/bootswatch/4.1.2/darkly/bootstrap.min.css'
+  },
+  {
+    name: 'Sketch',
+    url:
+      'https://stackpath.bootstrapcdn.com/bootswatch/4.1.2/sketchy/bootstrap.min.css'
+  }
 ];
 
 addDecorator(withKnobs);
 
 addDecorator((story, info) => (
-<div>
-  <ButtonGroup size="sm">
-    {THEMES.map((theme, i) => <ThemeLink key={i} index={i}>{theme.name}</ThemeLink>)}
-  </ButtonGroup>
-  <Container fluid className="my-5">
-    <Col xl="7">
-      <header className="mb-5">
-        <h1 className="display-4 mb-3">{info.kind}</h1>
-        <h2 className="lead">{info.story}</h2>
-      </header>
-      <section>
-        {story()}
-      </section>
-    </Col>
-  </Container>
-</div>
+  <div>
+    <Navbar color="light">
+      <Nav>
+        <NavItem>
+          <UncontrolledDropdown>
+            <DropdownToggle nav caret>
+              APM
+            </DropdownToggle>
+            <DropdownMenu>
+              {APM_THEMES.map((theme, i) => (
+                <DropdownItem>
+                  <ThemeLink key={i} url={theme.url}>
+                    {theme.name}
+                  </ThemeLink>
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </NavItem>
+        <NavItem>
+          <ThemeLink url="https://d36t0nm30n26wn.cloudfront.net/mycase/bootstrap-mycase.min.css">
+            MyCase
+          </ThemeLink>
+        </NavItem>
+        <NavItem>
+          <UncontrolledDropdown>
+            <DropdownToggle nav caret>
+              Bootstrap
+            </DropdownToggle>
+            <DropdownMenu>
+              {BS4_THEMES.map((theme, i) => (
+                <DropdownItem>
+                  <ThemeLink key={i} url={theme.url}>
+                    {theme.name}
+                  </ThemeLink>
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </NavItem>
+      </Nav>
+    </Navbar>
+    <Container fluid className="my-5">
+      <Col xl="7">
+        <header className="mb-5">
+          <h1 className="display-4 mb-3">{info.kind}</h1>
+          <h2 className="lead">{info.story}</h2>
+        </header>
+        <section>{story()}</section>
+      </Col>
+    </Container>
+  </div>
 ));
 
 setAddon(infoAddon);
@@ -72,11 +171,11 @@ setDefaults({
 function loadStories() {
   require('../stories');
 
-  const storybookTheme = parseInt(localStorage.storybookTheme);
+  // const storybookTheme = parseInt(localStorage.storybookTheme);
 
-  if (storybookTheme in THEMES) {
-    changeTheme(storybookTheme);
-  }
+  // if (storybookTheme) {
+  //   changeTheme(storybookTheme);
+  // }
 }
 
 configure(loadStories, module);
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,4 +1,4 @@
-<link id="theme" rel="stylesheet" href="https://pa.cdn.appfolio.com/appfolio/assets/styles/saffron/bootstrap-saffron.min.css">
+<link id="theme" rel="stylesheet" href="https://d36t0nm30n26wn.cloudfront.net/saffron/4.0.0/bootstrap-saffron.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -1,27 +1,31 @@
+<!DOCTYPE html>
+<html>
 
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <base target="_parent">
-        <script>
-          if (window.parent !== window) {
-            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-          }
-        </script>
-        <title>Storybook</title>
-        <link id="theme" rel="stylesheet" href="https://pa.cdn.appfolio.com/appfolio/assets/styles/saffron/bootstrap-saffron.min.css">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <base target="_parent">
+    <script>
+        if (window.parent !== window) {
+            try {
+                window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+            } catch (error) {
+                // The above line can throw if we do not have access to the parent frame -- i.e. cross origin
+            }
+        }
+    </script>
+    <title>Storybook</title>
+    <link id="theme" rel="stylesheet" href="https://d36t0nm30n26wn.cloudfront.net/saffron/4.0.0-beta/bootstrap-saffron.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Libre+Franklin:100,400,600,800" rel="stylesheet">
-
-      </head>
-      <body>
-        <div id="root"></div>
-        <div id="error-display"></div>
-        <script src="static/preview.692c69367106122cf17d.bundle.js"></script>
-      </body>
-    </html>
-
+</head>
+
+<body>
+    <div id="root"></div>
+    <div id="error-display"></div>
+<script type="text/javascript" src="static/preview.5d3cdc721d8ad43a29c5.bundle.js"></script></body>
+
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -1,46 +1,44 @@
-
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="storybook-version" content="3.2.12">
-        <meta content="IE=edge" http-equiv="X-UA-Compatible" />
-        <title>Storybook</title>
-        <style>
-          /*
-            When resizing panels, the drag event breaks if the cursor
-            moves over the iframe. Add the 'dragging' class to the body
-            at drag start and remove it when the drag ends.
-           */
-          .dragging iframe {
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="storybook-version" content="3.4.8">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <title>Storybook</title>
+    <style>
+        /*
+          When resizing panels, the drag event breaks if the cursor
+          moves over the iframe. Add the 'dragging' class to the body
+          at drag start and remove it when the drag ends.
+         */
+        .dragging iframe {
             pointer-events: none;
-          }
+        }
 
-          /* Styling the fuzzy search box placeholders */
-          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+        /* Styling the fuzzy search box placeholders */
+        .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
             color: #ddd;
             font-size: 16px;
-          }
+        }
 
-          .searchBox::-moz-placeholder { /* Firefox 19+ */
+        .searchBox::-moz-placeholder { /* Firefox 19+ */
             color: #ddd;
             font-size: 16px;
-          }
+        }
 
-          .searchBox:focus{
+        .searchBox:focus{
             border-color: #EEE !important;
-          }
+        }
 
-          .btn:hover{
+        .btn:hover{
             background-color: #eee
-          }
-        </style>
-
-      </head>
-      <body style="margin: 0;">
-        <div id="root"></div>
-        <script src="static/manager.01ea292019d73ef3f7e3.bundle.js"></script>
-      </body>
-    </html>
-
+        }
+    </style>
+
+
+</head>
+<body style="margin: 0;">
+    <div id="root"></div>
+<script type="text/javascript" src="static/manager.7fe0eb19a22729f76c60.bundle.js"></script></body>
+</html>
diff --git a/docs/static/manager.01ea292019d73ef3f7e3.bundle.js b/docs/static/manager.01ea292019d73ef3f7e3.bundle.js
diff --git a/docs/static/manager.7fe0eb19a22729f76c60.bundle.js b/docs/static/manager.7fe0eb19a22729f76c60.bundle.js
diff --git a/docs/static/preview.5d3cdc721d8ad43a29c5.bundle.js b/docs/static/preview.5d3cdc721d8ad43a29c5.bundle.js
diff --git a/docs/static/preview.692c69367106122cf17d.bundle.js b/docs/static/preview.692c69367106122cf17d.bundle.js