Remove react-toolbox

CodingZeal · Feb 23, 2018 · 1f92b57 · 1f92b57
1 parent 4370952
commit 1f92b57
Show file tree

Hide file tree

Showing 10 changed files with 1 addition and 106 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,6 @@ These packages include:
 - [eslint](http://eslint.org/) and [sass-lint](https://github.com/sasstools/sass-lint) for linting;
 - [redux](http://redux.js.org/);
 - [react-router](https://reacttraining.com/react-router/);
-- [react-toolbox](http://react-toolbox.io/);
 - [CSS Modules](https://glenmaddern.com/articles/css-modules) and [SASS](http://sass-lang.com/) for styling; and
 - [zeal-redux-utils](https://github.com/CodingZeal/zeal-redux-utils)
 
@@ -100,53 +99,6 @@ import styles from './styles.scss'
 <div className={styles.foo}>...</div>
 ```
 
-#### React Toolbox
-
-The generator installs by default [React Toolbox](http://react-toolbox.com/) which is a set of Material Design components.  At Zeal we have found this project to be an excellent starting point for many common UI patterns.  You can of-course ignore it and or remove it from the generated app if you are so inclined.
-
-#### Using Customizable React Toolbox Components
-
-To make for the most flexibility when dealing with React Toolbox we recommend following the pattern of manually adding and exporting the desired components theme.  Then instead of importing the pre-themed component from `react-toolbox`, import the un-themed version.  Don't worry, if you have exported the theme manually it will still have the default theme, and now you will have more flexibility in terms of overriding theme defaults.  
-
-For example you would like to use the button component from `react-toolbox` and would like to override the default primary color.  You will want to import / export that button's theme from `react-toolbox` along with a hook for your customization.
-
-In the `client/styles/react-toolbox` directory create a new file called `button.scss`.   In `button.scss` first import your apps global styles;
-
-```scss
-@import '~/styles/globals';
-```
-Then import the the buttons theme from `react-toolbox`;
-```scss
-@import '~/styles/globals';
-@import '~react-toolbox/lib/button/theme';
-```
-Lastly in `client/styles/react-toolbox/index.js` export your custom theme file.
-```javascript
-export RTButton from './button.scss'
-```
-This allows the apps `ThemeProvider` context to pass this information to react-toolbox.  By default we follow this pattern for `ProgressBar` as an example.
-
-Great, you now have hooked into the theme provider.  Now you just have to import the _un-themed_ version of the component from react-toolbox and let the theme provider do the rest.
-
-In your component import like this;
-
-```javascript
-import Button from 'react-toolbox/lib/button/Button'
-```
-It is important ***_not to import the themed_*** version from react toolbox otherwise your hard work to allow for greater flexibility will be lost, for example if you did this...
-
-```javascript
-import { Button, IconButton } from 'react-toolbox/lib/button'
-```
-
-The button would not be affected by the apps theme provider.
-
-Once you have imported the Button component that will respond to the theme provider, you can set the $color-primary in several different ways depending on your needs.  Generally `$color-primary` will be inherited from the react-toolbox default configuration.  You can override it globally in `client/styles/_globals.scss` which will make all react-toolbox components use that configuration for `$color-primary`.  You can see in the generated app we have set the `$color-primary` to the `$zeal-orange` color defined in the `_colors.scss` file.  If however you would like to override that color for a specific component, we recommend creating a new component that imports the button, applies a custom theme, and then exports the button for the rest of the app to use.
-
-#### Style Dependencies
-
-Many of the React Toolbox components have styles which depend on other components from React Toolbox having their styles present.  For example some of the react components have an option for the 'ripple' effect.  So, if you would like to set that property on a list item or a button etc, you should be sure to import / export the ripple theme as described above.
-
 #### Themr
 
 The generator installs by default [React CSS Themr](https://github.com/javivelasco/react-css-themr) which allows the decorating of components with a simple mechanism for easily "theming" the components.

diff --git a/app/templates/client/styles/_colors.scss b/app/templates/client/styles/_colors.scss
@@ -1,6 +1 @@
-@import '~react-toolbox/lib/colors';
-
-// Reference react-toolbox colors here https://github.com/react-toolbox/react-toolbox/blob/dev/components/_colors.scss.
-// Define colors with HEX values here - example:
-
 $zeal-orange: #d85226;
diff --git a/app/templates/client/styles/_globals.scss b/app/templates/client/styles/_globals.scss
diff --git a/app/templates/client/styles/commons.scss b/app/templates/client/styles/commons.scss
@@ -1,6 +1,3 @@
-@import 'globals';
-@import '~react-toolbox/lib/commons';
-
 html {
   font-size: 100%;
 }
diff --git a/app/templates/client/styles/react-toolbox/index.js b/app/templates/client/styles/react-toolbox/index.js
diff --git a/app/templates/client/styles/react-toolbox/progress_bar.scss b/app/templates/client/styles/react-toolbox/progress_bar.scss
diff --git a/app/templates/client/styles/theme.js b/app/templates/client/styles/theme.js
@@ -1,5 +1 @@
 /* @flow */
-
-import * as ToolboxTheme from "./react-toolbox";
-
-export default { ...ToolboxTheme };
diff --git a/app/templates/package.json b/app/templates/package.json
@@ -22,7 +22,6 @@
     "react-redux": "^5.0.4",
     "react-router-dom": "^4.1.1",
     "react-test-renderer": "^15.5.4",
-    "react-toolbox": "^1.3.1",
     "react-transition-group": "^1.1.3",
     "redux": "^3.6.0",
     "redux-devtools-extension": "^2.13.2",

diff --git a/app/templates/yarn.lock b/app/templates/yarn.lock
@@ -1489,10 +1489,6 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-classnames@^2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
-
 [email protected]:
   version "3.4.24"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.24.tgz#89f5a5e9da37ae02394fe049a41388abbe72c3b5"
@@ -3375,12 +3371,6 @@ ignore@^3.1.2, ignore@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"
 
-immutability-helper@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.1.1.tgz#d80e7577fae14cddde99d8946666d79973e7ba13"
-  dependencies:
-    invariant "^2.2.0"
-
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -4873,10 +4863,6 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
-normalize.css@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-4.2.0.tgz#21d66cc557154d4379fd1e079ec7de58a379b099"
-
 npm-path@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.3.tgz#15cff4e1c89a38da77f56f6055b24f975dfb2bbe"
@@ -5757,12 +5743,6 @@ react-apollo@^1.2.0:
   optionalDependencies:
     react-dom "0.14.x || 15.* || ^15.0.0 || ^16.0.0-alpha"
 
-react-css-themr@^1.7.1:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-1.7.1.tgz#ac0959ee64f020a05e2f3f4e1c9c7489964f8556"
-  dependencies:
-    invariant "^2.2.1"
-
 react-css-themr@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-css-themr/-/react-css-themr-2.0.0.tgz#c4f93b9284009d9b4565121f09eb6b2bf402c3ef"
@@ -5851,16 +5831,6 @@ react-test-renderer@^15.5.4:
     fbjs "^0.8.9"
     object-assign "^4.1.0"
 
-react-toolbox@^1.3.1:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/react-toolbox/-/react-toolbox-1.3.4.tgz#89fabf000cbc5907b50d506d733762624894bd70"
-  dependencies:
-    classnames "^2.2.5"
-    core-js "^2.4.0"
-    immutability-helper "^2.0.0"
-    normalize.css "^4.2.0"
-    react-css-themr "^1.7.1"
-
 react-transition-group@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.1.3.tgz#5e02cf6e44a863314ff3c68a0c826c2d9d70b221"

diff --git a/docs/index.html b/docs/index.html
@@ -59,7 +59,7 @@ <h1 class="yeoman-generator-type">yeoman generator</h1>
       <div class="grouped-content">
         <div class="content-section">
           <h1 class="section-heading-type" id="section-about">What is <span class="header-react">React</span><span class="header-generator">Gen</span>?</h1>
-          <p class="main-body-type">ReactGen generates a React project to help you start developing a new application quickly. ReactGen is similar to (and based on)&nbsp;create-react-app&nbsp;but restructures the generated project so that it can easily be embedded into a back-end application written in Rails or Phoenix. It also adds the pieces that we normally use in our React apps at Zeal, including a modular component structure, Redux, CSS Modules, Sass, React Toolbox, Apollo, and a stricter ESLint configuration.</p>
+          <p class="main-body-type">ReactGen generates a React project to help you start developing a new application quickly. ReactGen is similar to (and based on)&nbsp;create-react-app&nbsp;but restructures the generated project so that it can easily be embedded into a back-end application written in Rails or Phoenix. It also adds the pieces that we normally use in our React apps at Zeal, including a modular component structure, Redux, CSS Modules, Sass, Apollo, and a stricter ESLint configuration.</p>
         </div>
         <div class="content-section">
           <h1 class="section-heading-type">Why&nbsp;<span class="header-react">React</span><span class="header-generator">Gen</span>?</h1>