Use vulcan-ui-bootstrap (issue #50)

packages/example-forms/lib/components/FormFunnel.jsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { registerComponent } from 'meteor/vulcan:core';
-import Button from 'react-bootstrap/lib/Button';
+import { Components, registerComponent } from 'meteor/vulcan:core';
 
 const funnel = ['lead', 'prospect', 'customer'];
 
@@ -18,14 +17,14 @@ class FormFunnel extends PureComponent {
           <ul className="form-funnel-wrapper">
             {funnel.map((stage, i) => (
               <li key={i}>
-                <Button
+                <Components.Button
                   onClick={() => {
                     this.update(stage);
                   }}
-                  bsStyle={this.props.value === stage ? 'primary' : 'default'}
+                  variant={this.props.value === stage ? 'primary' : 'default'}
                 >
                   {stage}
-                </Button>
+                </Components.Button>
                 {i < funnel.length - 1 && <div className="form-funnel-separator">▶</div>}
               </li>
             ))}

packages/example-forms/package.js

@@ -6,12 +6,13 @@ Package.onUse(function (api) {
 
   api.use([
     // vulcan core
-    'vulcan:core@1.8.9',
+    'vulcan:core@1.9.1',
 
     // vulcan packages
-    'vulcan:forms@1.8.9',
-    'vulcan:accounts@1.8.9',
-    'vulcan:forms-upload@1.8.9',
+    'vulcan:forms@1.9.1',
+    'vulcan:accounts@1.9.1',
+    'vulcan:forms-upload@1.9.1',
+    'vulcan:ui-bootstrap@1.9.1',
 
     // third-party packages
     'fourseven:scss@4.5.0',

packages/example-forum/lib/components/categories/CategoriesList.jsx

@@ -2,7 +2,6 @@ import { Components, registerComponent, withList, Utils, withCurrentUser } from
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'meteor/vulcan:i18n';
-import Button from 'react-bootstrap/lib/Button';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import { withRouter } from 'react-router'
@@ -94,7 +93,7 @@ class CategoriesList extends PureComponent {
           }
           {Categories.options.mutations.new.check(this.props.currentUser) && 
             <div className="categories-new-button category-menu-item dropdown-item">
-              <Components.ModalTrigger title={<FormattedMessage id="categories.new"/>} component={<Button bsStyle="primary"><FormattedMessage id="categories.new"/></Button>}>
+              <Components.ModalTrigger title={<FormattedMessage id="categories.new"/>} component={<Components.Button variant="primary"><FormattedMessage id="categories.new"/></Components.Button>}>
                 <Components.CategoriesNewForm/>
               </Components.ModalTrigger>
             </div>

packages/example-forum/lib/components/common/Newsletter.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
 import Formsy from 'formsy-react';
 import { Input } from 'formsy-react-components';
-import Button from 'react-bootstrap/lib/Button';
 import Cookie from 'react-cookie';
 import Users from 'meteor/vulcan:users';
 
@@ -80,7 +79,7 @@ class Newsletter extends PureComponent {
           type="text"
           layout="elementOnly"
         />
-        <Button className="newsletter-button" type="submit" bsStyle="primary"><FormattedMessage id="newsletter.subscribe"/></Button>
+        <Components.Button className="newsletter-button" type="submit" variant="primary"><FormattedMessage id="newsletter.subscribe"/></Components.Button>
       </Formsy.Form>
     )
   }

packages/example-forum/lib/components/common/NewsletterButton.jsx

@@ -2,7 +2,6 @@ import { Components, registerComponent, withMutation, withCurrentUser, withMessa
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
-import Button from 'react-bootstrap/lib/Button';
 
 class NewsletterButton extends Component {
   constructor(props) {
@@ -37,13 +36,13 @@ class NewsletterButton extends Component {
   render() {
 
     return (
-      <Button
+      <Components.Button
         className="newsletter-button"
         onClick={this.subscriptionAction}
-        bsStyle="primary"
+        variant="primary"
       >
         <FormattedMessage id={this.props.label}/>
-      </Button>
+      </Components.Button>
     )
   }
 }

packages/example-forum/lib/components/posts/PostsList.jsx

@@ -2,11 +2,10 @@ import { Components, registerComponent, withList, withCurrentUser, Utils } from
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Posts } from '../../modules/posts/index.js';
-import Alert from 'react-bootstrap/lib/Alert'
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
 import classNames from 'classnames';
 
-const Error = ({error}) => <Alert className="flash-message" bsStyle="danger"><FormattedMessage id={error.id} values={{value: error.value}}/>{error.message}</Alert>
+const Error = ({error}) => <Components.Alert className="flash-message" variant="danger"><FormattedMessage id={error.id} values={{value: error.value}}/>{error.message}</Components.Alert>
 
 const PostsList = ({className, results, loading, count, totalCount, loadMore, showHeader = true, showLoadMore = true, networkStatus, currentUser, error, terms}) => {
 

packages/example-forum/lib/components/posts/PostsNewButton.jsx

@@ -2,12 +2,11 @@ import { Components, registerComponent, withCurrentUser } from 'meteor/vulcan:co
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
-import Button from 'react-bootstrap/lib/Button';
 
 const PostsNewButton = (props, context) => {
 
   const size = props.currentUser ? 'large' : 'small';
-  const button = <Button className="posts-new-button" bsStyle="primary"><Components.Icon name="new"/> <FormattedMessage id="posts.new_post"/></Button>;
+  const button = <Components.Button className="posts-new-button" variant="primary"><Components.Icon name="new"/> <FormattedMessage id="posts.new_post"/></Components.Button>;
   return (
     <Components.ModalTrigger size={size} title={context.intl.formatMessage({ id: 'posts.new_post' })} component={button}>
       <Components.PostsNewForm />

packages/example-forum/lib/components/users/UsersProfileCheck.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap/lib/Modal'
 import Users from 'meteor/vulcan:users';
 import { withDocument, Components, registerComponent, withMessages } from 'meteor/vulcan:core';
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
@@ -15,41 +14,44 @@ const UsersProfileCheck = ({currentUser, document, loading, flash}, context) =>
   if (!currentUser || loading) {
 
     return null;
-  
+
   } else {
-    
+
     // return fields that are required by the schema but haven't been filled out yet
     const fieldsToComplete = _.filter(Users.getRequiredFields(), fieldName => {
       return !userMustCompleteFields[fieldName];
     });
 
     if (fieldsToComplete.length > 0) {
-
+      const footer = (
+        <a className="complete-profile-logout" onClick={ () => Meteor.logout(() => window.location.reload() /* something is broken here when giving the apollo client as a prop*/) }>
+          <FormattedMessage id="app.or"/> <FormattedMessage id="users.log_out"/>
+        </a>
+      );
       return (
-        <Modal bsSize='small' show={ true }>
-          <Modal.Header>
-            <Modal.Title><FormattedMessage id="users.complete_profile"/></Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <Components.SmartForm
-              collection={ Users }
-              documentId={ currentUser._id }
-              fields={ fieldsToComplete }
-              successCallback={user => {
-                const newUser = {...currentUser, ...user};
-                if (Users.hasCompletedProfile(newUser)) {
-                  flash(context.intl.formatMessage({id: "users.profile_completed"}), 'success');
-                }
-              }}
-            />
-          </Modal.Body>
-          <Modal.Footer>
-            <FormattedMessage id="app.or"/> <a className="complete-profile-logout" onClick={ () => Meteor.logout(() => window.location.reload() /* something is broken here when giving the apollo client as a prop*/) }><FormattedMessage id="users.log_out"/></a>
-          </Modal.Footer>
-        </Modal>
-      )
+        <Components.Modal
+          size='small'
+          show={ true }
+          showCloseButton={ false }
+          title={<FormattedMessage id="users.complete_profile"/>}
+          footerContent={ footer }
+        >
+          <Components.SmartForm
+            collection={ Users }
+            documentId={ currentUser._id }
+            fields={ fieldsToComplete }
+            showRemove={ false }
+            successCallback={user => {
+              const newUser = {...currentUser, ...user};
+              if (Users.hasCompletedProfile(newUser)) {
+                flash(context.intl.formatMessage({id: "users.profile_completed"}), 'success');
+              }
+            }}
+          />
+        </Components.Modal>
+      );
     } else {
-      
+
       return null;
 
     }

packages/example-forum/package.js

@@ -18,13 +18,15 @@ Package.onUse(function (api) {
     'vulcan:core@1.9.0',
 
     // vulcan packages
+    'vulcan:ui-bootstrap@1.9.1',
     'vulcan:voting@1.9.0',
     'vulcan:accounts@1.9.0',
     'vulcan:email@1.9.0',
     'vulcan:forms@1.9.0',
     'vulcan:newsletter@1.9.0',
     'vulcan:events@1.9.0',
     'vulcan:embed@1.9.0',
+    'vulcan:admin@1.9.0',
 
   ]);
 

packages/example-membership/lib/components/pics/PicsHome.jsx

@@ -7,7 +7,6 @@ Pics Home component
 import React from 'react';
 import { registerComponent, Components, withCurrentUser } from 'meteor/vulcan:core';
 import Users from 'meteor/vulcan:users';
-import Button from 'react-bootstrap/lib/Button';
 
 const PicsHome = ({results = [], currentUser, loading, loadMore, count, totalCount}) => {
   if (currentUser) {
@@ -24,7 +23,7 @@ const PicsHome = ({results = [], currentUser, loading, loadMore, count, totalCou
             associatedCollection={Users}
             associatedDocument={currentUser}
             fragmentName="UsersCurrent"
-            button={<Button bsStyle="primary">Buy membership</Button>}
+            button={<Components.Button variant="primary">Buy membership</Components.Button>}
           />
 
         }
@@ -44,4 +43,4 @@ const PicsHome = ({results = [], currentUser, loading, loadMore, count, totalCou
 
 };
 
-registerComponent('PicsHome', PicsHome, withCurrentUser);
+registerComponent('PicsHome', PicsHome, withCurrentUser);

packages/example-membership/package.js

@@ -16,6 +16,7 @@ Package.onUse(function (api) {
     'vulcan:accounts@1.9.0',
     'vulcan:forms-upload@1.9.0',
     'vulcan:payments@1.9.0',
+    'vulcan:ui-bootstrap@1.9.1',
 
     // third-party packages
     'fourseven:scss@4.5.0',