example-forum: Use vulcan-ui-bootstrap (partially implemented).

Moving away of direct react-bootstrap dependency (issue VulcanJS#50). Patch dos not include Dropdown and Modal refactoring yet.
kabalin · May 1, 2018 · 929d224 · 929d224
1 parent 9d7c8b5
commit 929d224
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 12 deletions.
diff --git a/packages/example-forum/lib/components/categories/CategoriesList.jsx b/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>

diff --git a/packages/example-forum/lib/components/common/Newsletter.jsx b/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>
     )
   }

diff --git a/packages/example-forum/lib/components/common/NewsletterButton.jsx b/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>
     )
   }
 }

diff --git a/packages/example-forum/lib/components/posts/PostsList.jsx b/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}) => {
 

diff --git a/packages/example-forum/lib/components/posts/PostsNewButton.jsx b/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 />

diff --git a/packages/example-forum/package.js b/packages/example-forum/package.js
@@ -18,6 +18,7 @@ Package.onUse(function (api) {
     'vulcan:[email protected]',
 
     // vulcan packages
+    'vulcan:[email protected]',
     'vulcan:[email protected]',
     'vulcan:[email protected]',
     'vulcan:[email protected]',