Isolate bootstrap dependencies in new vulcan-ui-bootstrap package

packages/vulcan-accounts/imports/ui/components/Button.jsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Button from 'react-bootstrap/lib/Button';
-import { registerComponent } from 'meteor/vulcan:core';
+import { Components, registerComponent } from 'meteor/vulcan:core';
 
 export class AccountsButton extends PureComponent {
   render () {
@@ -17,15 +16,15 @@ export class AccountsButton extends PureComponent {
 
     return type === 'link' ? 
       <a href="#" className={className} onClick={onClick} style={{marginRight: '10px'}}>{label}</a> :
-      <Button
+      <Components.Button
         style={{marginRight: '10px'}}
-        bsStyle="primary"
+        variant="primary"
         className={className}
         type={type}
         disabled={disabled}
         onClick={onClick}>
         {label}
-      </Button>;
+      </Components.Button>;
   }
 }
 AccountsButton.propTypes = {

packages/vulcan-accounts/imports/ui/components/Field.jsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import FormControl from 'react-bootstrap/lib/FormControl';
-import { registerComponent } from 'meteor/vulcan:core';
+import { Components, registerComponent } from 'meteor/vulcan:core';
 
 const autocompleteValues = {
   'username': 'username',
@@ -63,7 +62,7 @@ export class AccountsField extends PureComponent {
 
     return mount ? (
       <div className={ className } style={{marginBottom: '10px'}}>
-        <FormControl id={ id } type={ type } inputRef={ref => { this.input = ref; }} onChange={ onChange } placeholder={ hint } defaultValue={ defaultValue } autoComplete={autoComplete }/>
+        <Components.FormControl id={ id } type={ type } inputRef={ref => { this.input = ref; }} onChange={ onChange } placeholder={ hint } defaultValue={ defaultValue } autoComplete={autoComplete }/>
         {message && (
           <span className={['message', message.type].join(' ').trim()}>
             {message.message}</span>

packages/vulcan-admin/lib/components/users/columns/AdminUsersActions.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Users from 'meteor/vulcan:users';
 import { Components, withRemove } from 'meteor/vulcan:core';
-import Button from 'react-bootstrap/lib/Button';
 
 const AdminUsersActions = ({ document: user, removeMutation }) =>{
 
@@ -12,7 +11,7 @@ const AdminUsersActions = ({ document: user, removeMutation }) =>{
     }
   }
 
-  return <Button bsStyle="primary" onClick={deleteHandler}>Delete</Button>
+  return <Components.Button bsStyle="primary" onClick={deleteHandler}>Delete</Components.Button>
 }
 
 const removeOptions = {

packages/vulcan-core/lib/modules/components/Card.jsx

@@ -4,7 +4,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import moment from 'moment';
-import Button from 'react-bootstrap/lib/Button';
 import { Link } from 'react-router';
 
 const getLabel = (field, fieldName, collection, intl) => {
@@ -126,7 +125,7 @@ const CardItem = ({label, value, typeName}) =>
 const CardEdit = (props, context) =>
   <tr>
     <td colSpan="2">
-      <Components.ModalTrigger label={context.intl.formatMessage({id: 'cards.edit'})} component={<Button bsStyle="info"><FormattedMessage id="cards.edit" /></Button>}>
+      <Components.ModalTrigger label={context.intl.formatMessage({id: 'cards.edit'})} component={<Components.Button variant="info"><FormattedMessage id="cards.edit" /></Components.Button>}>
         <CardEditForm {...props} />
       </Components.ModalTrigger>
     </td>

packages/vulcan-core/lib/modules/components/Datatable.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import withCurrentUser from '../containers/withCurrentUser.js';
 import withList from '../containers/withList.js';
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
-import Button from 'react-bootstrap/lib/Button';
 import { getFieldValue } from './Card.jsx';
 
 /*
@@ -188,7 +187,7 @@ const DatatableContents = (props) => {
           <div className="datatable-list-load-more">
             {isLoadingMore ?
               <Components.Loading/> :
-              <Button bsStyle="primary" onClick={e => {e.preventDefault(); loadMore();}}>Load More ({count}/{totalCount})</Button>
+              <Components.Button variant="primary" onClick={e => {e.preventDefault(); loadMore();}}>Load More ({count}/{totalCount})</Components.Button>
             }
           </div>
         }

packages/vulcan-core/lib/modules/components/EditButton.jsx

@@ -1,15 +1,14 @@
 import { Components, registerComponent } from 'meteor/vulcan:lib';
 import React from 'react';
-import Button from 'react-bootstrap/lib/Button';
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
 
 const EditButton = ({ style = 'primary', size, ...props }, { intl }) => (
   <Components.ModalTrigger
     label={intl.formatMessage({ id: 'datatable.edit' })}
     component={
-      <Button bsSize={size} bsStyle={style}>
+      <Components.Button size={size} variant={style}>
         <FormattedMessage id="datatable.edit" />
-      </Button>
+      </Components.Button>
     }
   >
     <Components.EditForm {...props} />

packages/vulcan-core/lib/modules/components/Flash.jsx

@@ -2,7 +2,6 @@ import { Components, registerComponent } from 'meteor/vulcan:lib';
 import withMessages from '../containers/withMessages.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Alert from 'react-bootstrap/lib/Alert'
 
 class Flash extends PureComponent {
 
@@ -26,9 +25,9 @@ class Flash extends PureComponent {
     flashType = flashType === "error" ? "danger" : flashType; // if flashType is "error", use "danger" instead
 
     return (
-      <Alert className="flash-message" bsStyle={flashType} onDismiss={this.dismissFlash}>
+      <Components.Alert className="flash-message" variant={flashType} onDismiss={this.dismissFlash}>
         {this.props.message.content}
-      </Alert>
+      </Components.Alert>
     )
   }
 }

packages/vulcan-core/lib/modules/components/NewButton.jsx

@@ -1,15 +1,14 @@
 import { Components, registerComponent } from 'meteor/vulcan:lib';
 import React from 'react';
-import Button from 'react-bootstrap/lib/Button';
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
 
 const NewButton = ({ collection, size, style = 'primary', ...props }, { intl }) => (
   <Components.ModalTrigger
     label={intl.formatMessage({ id: 'datatable.new' })}
     component={
-      <Button bsStyle={style} bsSize={size}>
+      <Components.Button variant={style} size={size}>
         <FormattedMessage id="datatable.new" />
-      </Button>
+      </Components.Button>
     }
   >
     <Components.NewForm collection={collection} {...props} />

packages/vulcan-core/lib/modules/default_resolvers.js

@@ -24,7 +24,7 @@ export const getDefaultResolvers = (collectionName, resolverOptions = defaultOpt
         debug('');
         debugGroup(`--------------- start \x1b[35m${collectionName} list\x1b[0m resolver ---------------`);
         debug(`Options: ${JSON.stringify(resolverOptions)}`);
-        debug(`Terms: ${JSON.stringify(terms)}`);
+        console.log(`Terms: ${JSON.stringify(terms)}`);
 
         if (cacheControl && enableCache) {
           const maxAge = resolverOptions.cacheMaxAge || defaultOptions.cacheMaxAge;

packages/vulcan-core/lib/modules/index.js

@@ -11,7 +11,6 @@ export { default as App } from "./components/App.jsx";
 export { default as Icon } from "./components/Icon.jsx";
 export { default as Loading } from "./components/Loading.jsx";
 export { default as ShowIf } from "./components/ShowIf.jsx";
-export { default as ModalTrigger } from './components/ModalTrigger.jsx';
 export { default as NewButton } from './components/NewButton.jsx';
 export { default as EditButton } from './components/EditButton.jsx';
 export { default as Error404 } from './components/Error404.jsx';

packages/vulcan-debug/lib/components/Emails.jsx

@@ -1,7 +1,6 @@
 import { Components, registerComponent } from 'meteor/vulcan:lib';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Button from 'react-bootstrap/lib/Button';
 import VulcanEmail from 'meteor/vulcan:email';
 
 class Email extends PureComponent {
@@ -40,7 +39,7 @@ class Email extends PureComponent {
         <td><a href={email.path.replace(':_id?', '').replace(':documentId?', '')} target="_blank">{email.path}</a></td>
         <td>
           <div className={this.state.loading ? "test-email loading" : "test-email"}>
-            <Button disabled={this.state.loading} onClick={this.sendTest} bsStyle="primary">Send Test</Button>
+            <Components.Button disabled={this.state.loading} onClick={this.sendTest} variant="primary">Send Test</Components.Button>
             {this.state.loading ? <Components.Loading color="white"/> : null}
           </div>
         </td>

packages/vulcan-forms/lib/components/Flash.jsx

@@ -1,28 +0,0 @@
-// import React from 'react';
-// import PropTypes from 'prop-types';
-// import Alert from 'react-bootstrap/lib/Alert'
-// import { registerComponent } from 'meteor/vulcan:core';
-
-// const Flash = ({message, type}) => {
-  
-//   type = type === "error" ? "danger" : type; // if type is "error", use "danger" instead
-
-//   return (
-//     <Alert className="flash-message" bsStyle={type}>
-//       {Array.isArray(message) ? 
-//         <ul>
-//           {message.map((message, index) => 
-//             <li key={index}>{message.content}</li>
-//           )}
-//         </ul>
-//         : <span>{message.content}</span>
-//       }
-//     </Alert>
-//   )
-// }
-
-// Flash.propTypes = {
-//   message: PropTypes.oneOfType([PropTypes.object.isRequired, PropTypes.array.isRequired])
-// }
-
-// registerComponent('FormFlash', Flash);

packages/vulcan-forms/lib/components/FormErrors.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { registerComponent } from 'meteor/vulcan:core';
+import { registerComponent, Components } from 'meteor/vulcan:core';
 import { FormattedMessage } from 'meteor/vulcan:i18n';
-import Alert from 'react-bootstrap/lib/Alert';
 
 const FormErrors = ({ errors }) => (
   <div className="form-errors">
     {!!errors.length && (
-      <Alert className="flash-message" bsStyle="danger">
+      <Components.Alert className="flash-message" variant="danger">
         <ul>
           {errors.map((error, index) => (
             <li key={index}>
@@ -21,7 +20,7 @@ const FormErrors = ({ errors }) => (
             </li>
           ))}
         </ul>
-      </Alert>
+      </Components.Alert>
     )}
   </div>
 );

packages/vulcan-forms/lib/components/FormNested.jsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Components, registerComponent } from 'meteor/vulcan:core';
-import Button from 'react-bootstrap/lib/Button';
 
 const FormNestedItem = ({ nestedFields, name, path, removeItem, itemIndex, ...props }, { errors }) => {
   return (
@@ -20,16 +19,16 @@ const FormNestedItem = ({ nestedFields, name, path, removeItem, itemIndex, ...pr
         })}
       </div>
       <div className="form-nested-item-remove">
-        <Button
+        <Components.Button
           className="form-nested-button"
-          bsStyle="danger"
-          bsSize="small"
+          variant="danger"
+          size="small"
           onClick={() => {
             removeItem(name);
           }}
         >
           <Components.IconRemove height={12} width={12} />
-        </Button>
+        </Components.Button>
       </div>
       <div className="form-nested-item-deleted-overlay" />
     </div>

packages/vulcan-forms/lib/components/FormSubmit.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Components } from 'meteor/vulcan:core';
 import { registerComponent } from 'meteor/vulcan:core';
-import Button from 'react-bootstrap/lib/Button';
 import { FormattedMessage } from 'meteor/vulcan:i18n';
 
 const FormSubmit = ({
@@ -15,9 +14,9 @@ const FormSubmit = ({
   classes,
 }) => (
   <div className="form-submit">
-    <Button type="submit" bsStyle="primary">
+    <Components.Button type="submit" variant="primary">
       {submitLabel ? submitLabel : <FormattedMessage id="forms.submit" />}
-    </Button>
+    </Components.Button>
 
     {cancelCallback ? (
       <a

packages/vulcan-forms/lib/modules/components.js

@@ -1,16 +1,3 @@
-import '../components/bootstrap/Checkbox.jsx';
-import '../components/bootstrap/Checkboxgroup.jsx';
-import '../components/bootstrap/Datetime.jsx';
-import '../components/bootstrap/Default.jsx';
-import '../components/bootstrap/Email.jsx';
-import '../components/bootstrap/Number.jsx';
-import '../components/bootstrap/Radiogroup.jsx';
-import '../components/bootstrap/Select.jsx';
-import '../components/bootstrap/Textarea.jsx';
-import '../components/bootstrap/Time.jsx';
-import '../components/bootstrap/Url.jsx';
-import '../components/bootstrap/Date.jsx';
-
 import '../components/Flash.jsx';
 import '../components/FieldErrors.jsx';
 import '../components/FormErrors.jsx';

packages/vulcan-lib/lib/server/apollo_server.js

@@ -142,10 +142,11 @@ const createApolloServer = (givenOptions = {}, givenConfig = {}) => {
     options.tracing = true;
     options.cacheControl = true;
 
-    options.fieldResolver = () => {
-      console.log('// fieldResolver')
-      console.log(arguments)
-    }
+    // note: custom default resolver doesn't currently work
+    // see https://github.com/apollographql/apollo-server/issues/716
+    // options.fieldResolver = (source, args, context, info) => {
+    //   return source[info.fieldName];
+    // }
 
     // Get the token from the header
     if (req.headers.authorization) {

packages/vulcan-ui-bootstrap/README.md

@@ -0,0 +1 @@
+Vulcan users package, used internally. 

packages/vulcan-ui-bootstrap/lib/client/main.js

@@ -0,0 +1,2 @@
+export * from '../modules/index.js';
+export {default} from '../modules/index.js';

packages/vulcan-ui-bootstrap/lib/components/forms/FormControl.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import FormControl from 'react-bootstrap/lib/FormControl';
+import { registerComponent } from 'meteor/vulcan:lib';
+
+registerComponent('FormControl', FormControl);

packages/vulcan-ui-bootstrap/lib/components/ui/Alert.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Alert from 'react-bootstrap/lib/Alert';
+import { registerComponent } from 'meteor/vulcan:lib';
+
+const BootstrapAlert = ({ children, variant,  ...rest }) => 
+  <Alert bsStyle={variant} {...rest}>{children}</Alert>
+
+registerComponent('Alert', BootstrapAlert);

packages/vulcan-ui-bootstrap/lib/components/ui/Button.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Button from 'react-bootstrap/lib/Button';
+import { registerComponent } from 'meteor/vulcan:lib';
+
+const BootstrapButton = ({ children, variant, size,  ...rest }) => 
+  <Button bsStyle={variant} bsSize={size} {...rest}>{children}</Button>
+
+registerComponent('Button', BootstrapButton);

packages/vulcan-ui-bootstrap/lib/modules/components.js

@@ -0,0 +1,17 @@
+import '../components/forms/Checkbox.jsx';
+import '../components/forms/Checkboxgroup.jsx';
+import '../components/forms/Datetime.jsx';
+import '../components/forms/Default.jsx';
+import '../components/forms/Email.jsx';
+import '../components/forms/Number.jsx';
+import '../components/forms/Radiogroup.jsx';
+import '../components/forms/Select.jsx';
+import '../components/forms/Textarea.jsx';
+import '../components/forms/Time.jsx';
+import '../components/forms/Date.jsx';
+import '../components/forms/Url.jsx';
+import '../components/forms/FormControl'; // note: only used by old accounts package, remove soon?
+
+import '../components/ui/Button.jsx';
+import '../components/ui/Alert.jsx';
+import '../components/ui/ModalTrigger.jsx';

packages/vulcan-ui-bootstrap/lib/modules/index.js

@@ -0,0 +1 @@
+import './components';

packages/vulcan-ui-bootstrap/lib/server/main.js

@@ -0,0 +1,8 @@
+import './on_create_user.js';
+import './urls.js';
+import './graphql_context.js';
+import './callbacks.js';
+
+export {default as createUser} from './create_user.js';
+export * from '../modules/index.js';
+export {default} from '../modules/index.js';

packages/vulcan-ui-bootstrap/package.js

@@ -0,0 +1,19 @@
+Package.describe({
+  name: 'vulcan:ui-bootstrap',
+  summary: 'Vulcan Bootstrap UI components.',
+  version: '1.9.1',
+  git: "https://github.com/VulcanJS/Vulcan.git"
+});
+
+Package.onUse(function (api) {
+
+  api.versionsFrom('1.6.1');
+
+  api.use([
+    'vulcan:lib@1.9.1'
+  ]);
+
+  api.mainModule("lib/server/main.js", "server");
+  api.mainModule("lib/client/main.js", "client");
+
+});