start using bootstrap; remove solid; ModalButton -> ModalTrigger

package.json

@@ -2,15 +2,25 @@
   "name": "Nova",
   "version": "0.0.0",
   "dependencies": {
+    "bootstrap": "^4.0.0-alpha.2",
+    "classnames": "^2.2.3",
     "formsy-react": "^0.17.0",
     "formsy-react-components": "^0.6.6",
-    "classnames": "^2.2.3",
-    "react": "^0.14.6",
+    "react": "^0.14.7",
     "react-addons-pure-render-mixin": "^0.14.7",
+    "react-bootstrap": "^0.28.3",
     "react-dom": "^0.14.6",
+    "react-modal": "^0.6.1",
     "react-mounter": "^1.1.0",
-    "react-no-ssr": "^1.0.1",
-    "react-modal": "^0.6.1"
+    "react-no-ssr": "^1.0.1"
   },
-  "private": true
-}
+  "private": true,
+  "devDependencies": {
+    "autoprefixer": "^6.3.4"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {"browsers": ["last 2 versions"]}
+    }
+  }
+}

packages/base-components/lib/common/Header.jsx

@@ -1,11 +1,13 @@
 import NoSSR from 'react-no-ssr';
 import Router from '../router.js'
 import Core from "meteor/nova:core";
+import { Button } from 'react-bootstrap';
+
 const Messages = Core.Messages;
 
 const Header = ({currentUser}) => {
   
-  ({Logo, ListContainer, CategoriesList, FlashContainer, FlashMessages, ModalButton, NewDocContainer, CanCreatePost, CurrentUserContainer, NewsletterForm, SearchForm} = Telescope.components);
+  ({Logo, ListContainer, CategoriesList, FlashContainer, FlashMessages, ModalTrigger, NewDocContainer, CanCreatePost, CurrentUserContainer, NewsletterForm, SearchForm} = Telescope.components);
 
   const logoUrl = Telescope.settings.get("logoUrl");
   const siteTitle = Telescope.settings.get("title", "Telescope");
@@ -20,13 +22,13 @@ const Header = ({currentUser}) => {
       <div className="nav">
         <ListContainer collection={Categories} limit={0}><CategoriesList/></ListContainer>
       </div>
-      
+
       <LogInButtons />
       
       {currentUser ? <p><a href={Router.path("account")}>My Account</a></p> : ""}
 
       <CanCreatePost user={currentUser}>
-        <ModalButton label="New Post" className="button button--primary">
+        <ModalTrigger component={<Button bsStyle="primary">New Post</Button>}>
           <NewDocContainer 
             collection={Posts} 
             label="New Post" 
@@ -36,7 +38,7 @@ const Header = ({currentUser}) => {
               Router.go('posts.single', post);
             }}
           />
-        </ModalButton>
+        </ModalTrigger>
       </CanCreatePost>
 
       <CurrentUserContainer component={NewsletterForm} />

packages/base-components/lib/common/NewsletterForm.jsx

@@ -2,6 +2,7 @@ import React, { PropTypes, Component } from 'react';
 import Formsy from 'formsy-react';
 import FRC from 'formsy-react-components';
 import Actions from "../actions.js";
+import { Button } from 'react-bootstrap';
 
 import Core from "meteor/nova:core";
 const Messages = Core.Messages;
@@ -48,14 +49,14 @@ class NewsletterForm extends Component {
           label={this.props.labelText}
           type="text"
         />
-        <button type="submit" className="button button--primary">{this.props.buttonText}</button>
+        <Button bsStyle="primary">{this.props.buttonText}</Button>
       </Formsy.Form>
     )
   }
 
   renderButton() {
     return (
-      <button onClick={this.subscribeUser} type="submit" className="button button--primary">{this.props.buttonText}</button>
+      <Button onClick={this.subscribeUser} bsStyle="primary">{this.props.buttonText}</Button>
     )
   }
 

packages/base-components/lib/config.js

@@ -0,0 +1,9 @@
+import { checkNpmVersions } from 'meteor/tmeasday:check-npm-versions';
+checkNpmVersions({
+  "react": "^0.14.6",
+  "formsy-react": "^0.17.0",
+  "formsy-react-components": "^0.6.6",
+  // "react-mounter": "^1.1.0",
+  // "react-no-ssr": "^1.0.1",
+  "react-bootstrap": "^0.28.3",
+});

packages/base-components/lib/posts/list/PostItem.jsx

@@ -1,4 +1,5 @@
 import React, { PropTypes, Component } from 'react';
+import { Button } from 'react-bootstrap';
 
 class PostItem extends Component {
 
@@ -18,17 +19,17 @@ class PostItem extends Component {
 
   renderActions() {
 
-    ({ModalButton, DocumentContainer, EditDocContainer} = Telescope.components);
+    ({ModalTrigger, DocumentContainer, EditDocContainer} = Telescope.components);
 
     const component = (
-      <ModalButton label="Edit" className="button button--secondary">
+      <ModalTrigger component={<Button bsStyle="info">Edit</Button>}>
         <EditDocContainer 
           collection={Posts} 
           document={this.props.post} 
           label="Edit Post" 
           methodName="posts.edit"
         />
-      </ModalButton>
+      </ModalTrigger>
     );
 
     return (

packages/base-components/lib/routes.jsx

@@ -35,7 +35,7 @@ Router.route('/daily/:days?', {
   }
 });
 
-Router.route('/posts/:_id', {
+Router.route('/posts/:_id/:slug?', {
   name: 'posts.single',
   action(params, queryParams) {
     ({AppContainer, DocumentContainer, Post} = Telescope.components);

packages/base-components/package.js

@@ -21,6 +21,7 @@ Package.onUse(function (api) {
 
     // third-party packages
 
+    'tmeasday:check-npm-versions@0.1.1',
     'alt:react-accounts-ui@1.2.0',
     // 'alt:react-accounts-unstyled',
     'dburles:spacebars-tohtml@1.0.1',

packages/base-styles/lib/stylesheets/main.scss

@@ -1,3 +1,4 @@
+
 body{
   background: #eee;
 }
@@ -119,4 +120,8 @@ code{
 
 .post-day h2{
   font-weight: bold;
+}
+
+body{
+  display: flex;
 }

packages/base-styles/package.js

@@ -10,12 +10,24 @@ Package.onUse(function (api) {
   api.versionsFrom(['METEOR@1.0']);
 
   api.use([
-    'nova:core@0.25.7'
+    'nova:core@0.25.7',
+    'fourseven:scss@3.4.1',
+    // 'juliancwirko:postcss@1.0.0-rc.4',
+    // 'seba:minifiers-autoprefixer@0.0.1',
+    // 'twbs:bootstrap@=4.0.0-alpha.2'
   ]);
 
   api.addFiles([
-    'lib/stylesheets/solid.1.4.4.css',
-    'lib/stylesheets/main.css'
+    'lib/stylesheets/bootstrap.css',
+
+    // 'lib/stylesheets/solid.1.4.4.css',
+    'lib/stylesheets/main.scss',
+    // '/node_modules/bootstrap/dist/css/bootstrap.css',
+    'lib/stylesheets/categories.scss',
+    'lib/stylesheets/comments.scss',
+    'lib/stylesheets/common.scss',
+    'lib/stylesheets/posts.scss',
+    'lib/stylesheets/users.scss'
   ], ['client']);
 
 });

packages/base-styles/scss.json

@@ -0,0 +1,6 @@
+{
+  "enableAutoprefixer": true,
+  "outputStyle": "compressed",
+  "sourceComments": true,
+  "sourceMap": true
+}

packages/nova-core/lib/components.js

@@ -20,4 +20,4 @@ Telescope.registerComponent("CurrentUserContainer", require('./containers/Curren
 Telescope.registerComponent("NewDocContainer", FormContainers.NewDocContainer);
 Telescope.registerComponent("EditDocContainer", FormContainers.EditDocContainer);
 
-Telescope.registerComponent("ModalButton", require('./components/ModalButton.jsx'));
+Telescope.registerComponent("ModalTrigger", require('./components/ModalTrigger.jsx'));

packages/nova-core/lib/components/ModalTrigger.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes, Component } from 'react';
-
+import { Button } from 'react-bootstrap';
 import Modal from 'react-modal';
 
 const customStyles = {
@@ -13,7 +13,7 @@ const customStyles = {
   }
 };
 
-class ModalButton extends Component {
+class ModalTrigger extends Component {
 
   constructor() {
     super();
@@ -34,7 +34,6 @@ class ModalButton extends Component {
 
   render() {
     
-    const Component = this.props.component;
 
     // see http://stackoverflow.com/a/32371612/649299
     const childrenWithProps = React.Children.map(this.props.children, (child) => {
@@ -55,9 +54,11 @@ class ModalButton extends Component {
 
     });
 
+    const triggerComponent = React.cloneElement(this.props.component, { onClick: this.openModal });
+
     return (
       <div className="new-post-button">
-        <button onClick={this.openModal} className={this.props.className}>{this.props.label}</button>
+        {triggerComponent}
         <Modal
           isOpen={this.state.modalIsOpen}
           onRequestClose={this.closeModal}
@@ -70,10 +71,9 @@ class ModalButton extends Component {
   }
 };
 
-ModalButton.propTypes = {
-  label: React.PropTypes.string.isRequired,
-  className: React.PropTypes.string
+ModalTrigger.propTypes = {
+  component: React.PropTypes.object.isRequired
 }
 
-module.exports = ModalButton;
-export default ModalButton;
+module.exports = ModalTrigger;
+export default ModalTrigger;

packages/nova-core/lib/core.js

@@ -1,4 +1,4 @@
 import Messages from "./messages.js";
-import ModalButton from "./components/ModalButton.jsx";
+import ModalTrigger from "./components/ModalTrigger.jsx";
 
-export default {Messages, ModalButton};
+export default {Messages, ModalTrigger};

packages/nova-demo/demo-components.jsx

@@ -6,7 +6,7 @@ import Core from 'meteor/nova:core';
 import SmartContainers from "meteor/utilities:react-list-container";
 import FormContainers from "meteor/utilities:react-form-containers";
 
-const ModalButton = Core.ModalButton;
+const ModalTrigger = Core.ModalTrigger;
 const NewDocContainer = FormContainers.NewDocContainer;
 const EditDocContainer = FormContainers.EditDocContainer;
 const ListContainer = SmartContainers.ListContainer;
@@ -56,9 +56,9 @@ class MoviesList extends Component {
   renderNew() {
     
     const component = (
-      <ModalButton label="Add Movie" className="button button--primary">
+      <ModalTrigger label="Add Movie" className="button button--primary">
         <NewDocContainer collection={Movies} label="Add Movie" methodName="movies.create"/>
-      </ModalButton>
+      </ModalTrigger>
     )
     
     return !!this.props.currentUser ? component : "";
@@ -86,9 +86,9 @@ class Movie extends Component {
     const movie = this.props;
 
     const component = (
-      <ModalButton label="Edit" className="button button--secondary">
+      <ModalTrigger label="Edit" className="button button--secondary">
         <EditDocContainer collection={Movies} document={movie} label="Edit Movie" methodName="movies.edit"/>
-      </ModalButton>
+      </ModalTrigger>
     );
 
     return (