Switch mounting method to openemp-mf-core (#4)

* add .env file

* Switch mounting method to **openemp-mf-core**

* Add RTL support

.env

@@ -0,0 +1,4 @@
+ORG_NAME = openemp-mf
+PROJECT_NAME = drawer
+HOST = localhost
+PORT = 9003

.gitignore

@@ -55,7 +55,7 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
+
 
 # next.js build output
 .next

package.json

@@ -1,10 +1,10 @@
 {
   "name": "@openemp-mf/drawer",
-  "repository": "[email protected]:openemp/openemp-ui-template.git",
+  "repository": "[email protected]:openemp/openemp-ui-drawer.git",
   "author": "OpenEMP",
   "license": "MIT",
-  "version": "1.0.0",
-  "description": "OpenEMP UI Dasboard MF",
+  "version": "0.0.1-latest",
+  "description": "OpenEMP UI Drawer MF",
   "scripts": {
     "lint": "eslint src",
     "start": "webpack-dev-server",
@@ -16,9 +16,7 @@
     "coverage": "jest --coverage"
   },
   "dependencies": {
-    "@material-ui/core": "^4.10.0",
-    "@material-ui/icons": "^4.9.1",
-    "@openemp-mf/styleguide": "github:honohunter/openemp-ui-styleguide#alpha",
+    "@openemp-mf/styleguide": "file:../openemp-ui-styleguide",
     "@reach/router": "1.3.3",
     "clsx": "^1.1.0",
     "nanoevents": "^5.1.7",

src/components/drawerFrame.jsx

@@ -21,6 +21,7 @@ const useStyles = makeStyles((theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
+    overflowX: 'hidden',
   },
   drawerClose: {
     transition: theme.transitions.create('width', {

src/features/collapseItem.jsx

@@ -14,7 +14,7 @@ import {
 
 const useStyles = makeStyles((theme) => ({
   nested: (props) => ({
-    paddingLeft: theme.spacing(props.level ? 4 + props.level : 3),
+    [theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft']: theme.spacing(props.level ? 4 + props.level : 3),
   }),
 }));
 
@@ -26,6 +26,7 @@ export default function CollapseItem(props) {
   // const navigate = useNavigate();
 
   const handleNavigation = () => {
+    // check token b4 send navigation cmd
     navigate(href);
   };
 

src/index.js

@@ -6,25 +6,13 @@ import Root from './root.component';
 
 // eslint-disable-next-line no-undef
 
-function domElementGetter() {
-  let el = document.getElementById('root-drawer');
-  if (!el) {
-    el = document.createElement('div');
-    el.id = 'root-drawer';
-    el.className = process.env.PROJECT_NAME;
-    document.body.appendChild(el);
-  }
-  return el;
-}
-
 const lifecycles = singleSpaReact({
   React,
   ReactDOM,
   rootComponent: Root,
   errorBoundary() {
     return React.createElement('div', null, 'error');
   },
-  domElementGetter,
 });
 
 export const { bootstrap, mount, unmount } = lifecycles;

src/root.component.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
-
+import React, { useEffect } from 'react';
 import { DrawerFrame, NestedList } from 'components';
-
 import { links } from './root.helper';
 
 const Root = () => {
+  useEffect(() => {
+    window.appMountSuccess('success');
+  }, []);
   return (
     <DrawerFrame>
       <NestedList linksList={links} />

src/root.helper.js

@@ -42,5 +42,3 @@ export const links = [
     ],
   },
 ];
-
-// console.log('-------', System.import('@openemp-mf/template'));

webpack.config.js

@@ -83,7 +83,7 @@ module.exports = (webpackConfigEnv = {}) => {
         assets: path.resolve(__dirname, 'src/assets'),
         components: path.resolve(__dirname, 'src/components'),
         features: path.resolve(__dirname, 'src/features'),
-        helpers: path.resolve(__dirname, 'src/features'),
+        helpers: path.resolve(__dirname, 'src/helpers'),
         reducer: path.resolve(__dirname, 'src/reducer'),
       },
     },