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 · Apr 27, 2018 · 1efb22c · 1efb22c
1 parent 8d1dd31
commit 1efb22c
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 20 deletions.
diff --git a/packages/example-forum/lib/components/categories/CategoriesList.jsx b/packages/example-forum/lib/components/categories/CategoriesList.jsx
@@ -1,8 +1,7 @@
-import { ModalTrigger, Components, registerComponent, withList, Utils } from "meteor/vulcan:core";
+import { Components, registerComponent, withList, Utils } from "meteor/vulcan:core";
 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,9 +93,9 @@ class CategoriesList extends PureComponent {
           }
           <Components.ShowIf check={Categories.options.mutations.new.check}>
             <div className="categories-new-button category-menu-item dropdown-item">
-              <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/>
-              </ModalTrigger>
+              </Components.ModalTrigger>
             </div>
           </Components.ShowIf>
         </DropdownButton>

diff --git a/packages/example-forum/lib/components/categories/Category.jsx b/packages/example-forum/lib/components/categories/Category.jsx
@@ -1,4 +1,4 @@
-import { ModalTrigger, Components, registerComponent } from 'meteor/vulcan:core';
+import { Components, registerComponent } from 'meteor/vulcan:core';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { LinkContainer } from 'react-router-bootstrap';
@@ -10,9 +10,9 @@ class Category extends PureComponent {
 
   renderEdit() {
     return (
-      <ModalTrigger title="Edit Category" component={<a className="edit-category-link"><Components.Icon name="edit"/></a>}>
+      <Components.ModalTrigger title="Edit Category" component={<a className="edit-category-link"><Components.Icon name="edit"/></a>}>
         <Components.CategoriesEditForm category={this.props.category}/>
-      </ModalTrigger>
+      </Components.ModalTrigger>
     )
   }
 

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/PostsItem.jsx b/packages/example-forum/lib/components/posts/PostsItem.jsx
@@ -1,4 +1,4 @@
-import { Components, registerComponent, ModalTrigger } from 'meteor/vulcan:core';
+import { Components, registerComponent } from 'meteor/vulcan:core';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'meteor/vulcan:i18n';
@@ -19,9 +19,9 @@ class PostsItem extends PureComponent {
   renderActions() {
     return (
       <div className="posts-actions">
-        <ModalTrigger title="Edit Post" component={<a className="posts-action-edit"><FormattedMessage id="posts.edit"/></a>}>
+        <Components.ModalTrigger title="Edit Post" component={<a className="posts-action-edit"><FormattedMessage id="posts.edit"/></a>}>
           <Components.PostsEditForm post={this.props.post} />
-        </ModalTrigger>
+        </Components.ModalTrigger>
       </div>
     )
   }

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]',