Replacement for Vulcan components using Material-UI.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
client Make theme injection customizable Oct 9, 2018
components
example fix layout height (padding was ignored) Sep 13, 2018
modules Merge pull request #30 from Apollinaire/themeInjection Oct 29, 2018
server
.editorconfig Initial commit Oct 20, 2017
.eslintrc quotes consistency eslint Oct 29, 2018
.gitignore Exclude .idea/workspace.xml May 9, 2018
.versions 1.12.8_7 / 2018-11-10 Nov 10, 2018
accounts.css * Refactored Tour to simplify, remove jQuery plugins, and improve re… Feb 14, 2018
en_US.js 1.12.8 / 2018-10-19 Oct 19, 2018
forms.css
fr_FR.js 1.12.8 / 2018-10-19 Oct 19, 2018
history.md
package.js
readme.md

readme.md

erikdakoda:vulcan-material-ui 1.12.8_7

Replacement for Vulcan components using Material-UI. This version has been tested against Vulcan 1.12.8 and Material-UI 3.1.0.

To give me feedback open an issue on GitHub or you can reach me on the Vulcan Slack channel as erikdakoda.

There are some nice bonus features like a CountrySelect with autocomplete and theming.

All components in vulcan:ui-bootstrap, vulcan:forms and vulcan:accounts have been implemented except for Icon.

Installation

To add vulcan-material-ui to an existing Vulcan project, enter the following:

meteor add erikdakoda:vulcan-material-ui

meteor npm install --save @material-ui/core
meteor npm install --save react-jss
meteor npm install --save mdi-material-ui
meteor npm install --save react-autosuggest
meteor npm install --save autosuggest-highlight
meteor npm install --save react-isolated-scroll
meteor npm install --save react-keyboard-event-handler

NOTE: If you want to avoid deprecation warnings added in MUI versions after 3.1.0, you can lock MUI to the currently supported version using meteor npm install --save @material-ui/core@3.1.0. Don't for get to remove or update the version number when you update this package in the future.

IMPORTANT: Please note that I have abandoned material-ui-icons in favor of mdi-material-ui because it has a much larger selection of icons.

This package no longer depends on vulcan:ui-boostrap, so you can remove it.

To activate the example layout copy the three components to your project and import them:

import './example/Header',
import './example/Layout',
import './example/SideNavigation',

Theming

For an example theme see modules/sampleTheme.js. For a complete list of values you can customize, see the MUI Default Theme.

Register your theme in the Vulcan environment by giving it a name: registerTheme('MyTheme', theme);. You can have multiple themes registered and you can specify which one to use in your settings file using the muiTheme public setting.

In addition to the Material UI spec, I use a utils section in my themes where I place global variables for reusable styles. For example the sample theme contains

const theme = {
  
  . . .
  
  utils: {
    
    tooltipEnterDelay: 700,
    
    errorMessage: {
      textAlign: 'center',
      backgroundColor: red[500],
      color: 'white',
      borderRadius: '4px',
    },
    
    . . .
    
    // additional utils definitions go here
    
  },
  
};

You can use tooltipEnterDelay (or any other variable you define in utils) anywhere you include the withTheme HOC. See /components/bonus/TooltipIconButton.jsx for an example.

You can use errorMessage (or any other style fragment you define in utils) anywhere you include the withStyles HOC. See /components/accounts/Form.jsx for an example.

Server Side Rendering (SSR)

Material UI and Vulcan support SSR, but this is a complex beast with pitfalls. Sometimes you will see a warning like this:

Warning: Prop className did not match. Server: "MuiChip-label-131" Client: "MuiChip-label-130"

Sometimes the React rendered on the server and the client don't match exactly and this causes a problem with JSS. This is a complicated issue that has multiple causes and I will be working on solving each of the issues causing this over time.

Your pages should still render correctly, but there may be a blink and redraw when the first page after SSR loads in the browser.

In your own code, make sure that your components will render the same on the server and the client. This means not referring to client-side object such as document or jQuery. If you have a misbehaving component, try wrapping it with react-no-ssr.

Form Controls

You can pass a couple of extra options to inputs from the form property of your schema:

  userKey: {
    type: String,
    label: 'User key',
    description: 'The user’s key',
    optional: true,
    hidden: function ({ document }) {
      return !document.platformId || !document.usePlatformApp;
    },
    inputProperties: {
      autoFocus: true,                 // focus this input when the form loads
      addonBefore: <KeyIcon/>,         // adorn the start of the input
      addonAfter: <KeyIcon/>,          // adorn the end of the input
      inputClassName: 'halfWidthLeft', // use 'halfWidthLeft' or 'halfWidthRight'
                                       //   to display two controls side by side
      hideLabel: true,                 // hide the label
      rows: 10,                        // for textareas you can specify the rows
      variant: 'switch',               // for checkboxgroups you can use either 
                                       //   'checkbox' (default) or 'switch'
      inputProps: { step: 'any' }      // Attributes applied to the input element, for
                                       //   ex pass the step attr to a number input
    },
    group: platformGroup,
    canRead: ['members'],
    canCreate: ['members'],
    canUpdate: ['members'],
  },

Note: form.getHidden has been deprecated. Now you can just pass a function to hidden.

Form Groups

You can pass a couple of extra options to form groups as well:

  const platformGroup: {
    name: 'shops.platform',
    order: 4,
    startComponent: 'ShopsPlatformTitle', // component to put at the top of the form group
    endComponent: 'ShopsConnectButtons',  // component to put at the bottom of the form group
  },

DataTable

You can pass the DataTable component an editComponent property in addition to or instead of showEdit. Here is a simplified example:

const AgendaJobActions = ({ collection, document }) => {
  const scheduleAgent = () => {
    Meteor.call('scheduleAgent', document.agentId);
  };
  
  return <Components.TooltipIconButton titleId="executions.execute"
                                       icon={<Components.ExecutionsIcon/>}
                                       onClick={scheduleAgent}/>;
};

AgendaJobActionsInner.propTypes = {
  collecion: PropTypes.object.isRequired,
  document: PropTypes.object.isRequired,
};

<Components.Datatable
  editComponent={AgendaJobActions}
  collection={AgendaJobs}
   ...
/>

You can also control the spacing of the table cells using the dense property. Valid values are:

Value Description
dense right cell padding of 16px instead of 56px
flat right cell padding of 16px and nowrap
denser right cell padding of 16px, nowrap, and row height of 40px instead of 56px

You can also use other string values, as long as you define a utils entry named the same + Table, for example myCustomTable. Check out the sample theme for examples.

CountrySelect

There is an additional component, an autosuggest-based country select.

  country: {
    type: String,
    label: 'Country',
    input: 'CountrySelect',
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
  },

Countries are stored as their 2-letter country codes. I have included a helper function for displaying the country name:

import Typography from '@material-ui/core/Typography';
import { getCountryLabel } from 'meteor/erikdakoda:vulcan-material-ui';

<Typography variant="subheading">
  {getCountryLabel(supplier.country)}
</Typography>