update for bach-material-ui

app/Root.js

@@ -2,14 +2,28 @@ import React from 'react';
 import {Provider} from 'react-redux';
 import {ConnectedRouter} from 'connected-react-router';
 import {hot} from 'react-hot-loader';
+import {ThemeProvider} from '@material-ui/styles';
+import {createMuiTheme} from '@material-ui/core/styles';
+import purple from '@material-ui/core/colors/purple';
 
 import App from './App';
 
+const theme = createMuiTheme({
+  palette: {
+    primary: purple,
+    secondary: {
+      main: '#f44336',
+    },
+  },
+});
+
 const Root = ({store, history}) => (
   <Provider store={store}>
-    <ConnectedRouter history={history}>
-      <App />
-    </ConnectedRouter>
+    <ThemeProvider theme={theme}>
+      <ConnectedRouter history={history}>
+        <App />
+      </ConnectedRouter>
+    </ThemeProvider>
   </Provider>
 );
 

app/features/bachMaterialUI/components/index.js

@@ -0,0 +1 @@
+export {default as WithStyles} from './withStyles';

app/features/bachMaterialUI/components/withStyles.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {compose, withState, withCallback} from '@truefit/bach';
+import {withStyles} from '@truefit/bach-material-ui';
+
+const WithStyles = ({classes, fontSize, increase}) => (
+  <div className={classes.container}>
+    <h1 className={classes.h1}>withStyles</h1>
+    <h2 className={classes.h2}>Font Size: {fontSize}</h2>
+    <button className={classes.button} onClick={increase}>
+      ^ Increase ^
+    </button>
+  </div>
+);
+
+export default compose(
+  withState('fontSize', 'setFontSize', 12),
+  withCallback('increase', ({fontSize, setFontSize}) => () => {
+    setFontSize(fontSize + 1);
+  }),
+  withStyles(theme => ({
+    container: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      flexDirection: 'column',
+    },
+    h1: {
+      color: theme.palette.primary.main,
+    },
+    h2: {
+      color: theme.palette.secondary.main,
+      fontSize: ({fontSize}) => fontSize,
+    },
+    button: {
+      height: 50,
+      width: 100,
+      borderRadius: 8,
+    },
+  })),
+)(WithStyles);

app/features/shared/components/bachMaterialUIDirectory.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Menu from './controls/menu';
+
+const simple = ['withStyles'];
+
+const combined = [];
+
+export default () => (
+  <Menu
+    title="@truefit/bach-material-ui"
+    root="bachmaterialui"
+    simple={simple}
+    combined={combined}
+  />
+);

app/features/shared/components/controls/menu.js

@@ -18,10 +18,17 @@ const Menu = ({title, root, links}) => (
   </>
 );
 
-export default ({title, root, simple, combined}) => (
-  <>
-    <h1>{title}</h1>
-    <Menu title="Simple" root={root} links={simple} />
-    <Menu title="Combined" root={root} links={combined} />
-  </>
-);
+export default ({title, root, simple, combined}) => {
+  const combinedMenu =
+    combined?.length > 0 ? (
+      <Menu title="Combined" root={root} links={combined} />
+    ) : null;
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <Menu title="Simple" root={root} links={simple} />
+      {combinedMenu}
+    </>
+  );
+};

app/features/shared/components/directory.js

@@ -2,11 +2,13 @@ import React from 'react';
 import BachDirectory from './bachDirectory';
 import BachRecomposeDirectory from './bachRecomposeDirectory.js';
 import BachReduxDirectory from './bachReduxDirectory';
+import BachMaterialUi from './bachMaterialUIDirectory.js';
 
 export default () => (
   <>
     <BachDirectory />
     <BachRecomposeDirectory />
     <BachReduxDirectory />
+    <BachMaterialUi />
   </>
 );

app/features/shared/components/routes.js

@@ -30,6 +30,8 @@ import {
   WithActionsAndSelector,
 } from '../../bachRedux/components';
 
+import {WithStyles} from '../../bachMaterialUI/components';
+
 import Directory from './directory';
 import NotFound from './notFound';
 
@@ -74,6 +76,10 @@ export default () => (
       />
     </Route>
 
+    <Route path="/bachmaterialui">
+      <Route path="*/withStyles" component={WithStyles} />
+    </Route>
+
     <Route component={NotFound} />
   </Switch>
 );

package.json

@@ -25,7 +25,9 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@material-ui/core": "^4.0.1",
     "@truefit/bach": "^0.1.18",
+    "@truefit/bach-material-ui": "^0.1.0",
     "@truefit/bach-recompose": "^0.0.4",
     "@truefit/bach-redux": "^0.1.0",
     "@truefit/http-utils": "^1.0.8",