missioncontrol-common

#Mission Control Common

Installation

yarn add missioncontrol-common

or

npm install missioncontrol-common

Usage

import the css somewhere on top of your react app tree:

import  'missioncontrol-common/dist/main.css';

and after that you can import components like this:

import { MCTable, MCButton } from 'missioncontrol-common';

Recommended:

This repo uses @material-ui/core for some of the components. Due to how MUI bundles it's code in production mode with jss, some css class collisions may appear. Therefore it is recommended to wrap your application with a jss name provider like this:

import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  dangerouslyUseGlobalCSS: false,
  productionPrefix: 'jssMC'
 });
//App render
render() {
  <JssProvider generateClassName={generateClassName}>
     <App />
  </JssProvider>
}

Development

We use react-storybook for maintaining and developing our components.

to run locally the storybook, clone the repo and run on localhost:6006

yarn
yarn storybook

you can also build the storybook with:

yarn build-storybook

MC Starter

We have a react starter for our new mission control apps (it is currently WIP) you can find on a dedicated branch in this repo: MC-Starter

List of available components

• DateRangeInput
• DateInput
• DropdownButton
• MCSelect
• MCFormGroup
• MCIcon
• MCLabel
• MCTable
• MCTableCell
• MCTabs
• Sidenav
• MCButton
• MCCheckbox
• MCLoader
• MCTooltip
• MCDrawer
• withDrawer
• MCAlert
• MCUserInfo
• MCHeader
• MCLayout