feature/467 fix: refine example apps & yalc

MetaCell · Jan 22, 2023 · 79f16b0 · 79f16b0
1 parent 6ca3efb
commit 79f16b0
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 37 deletions.
diff --git a/examples/redux-react-app/src/app/icons.js b/examples/redux-react-app/src/app/icons.js
@@ -0,0 +1,17 @@
+export const CloseIcon = (props) => (
+  <svg
+    width={8}
+    height={8}
+    fill="none"
+    stroke="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m.75.75 6.5 6.5m0-6.5-6.5 6.5"
+      stroke="#000"
+      fillOpacity={0.2}
+      strokeWidth={1.5}
+    />
+  </svg>
+);
diff --git a/examples/redux-react-app/src/app/showcase.js b/examples/redux-react-app/src/app/showcase.js
@@ -1,46 +1,30 @@
 import React, { useEffect, useState } from 'react';
-import { getLayoutManagerInstance } from '@metacell/geppetto-meta-client/common/layout/LayoutManager';
+import { getLayoutManagerInstance } from "@metacell/geppetto-meta-client/common/layout/LayoutManager";
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { useStore } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import CLOSE from '../icons/close.svg';
+import { Button } from '@material-ui/core';
+import { CloseIcon } from './icons';
 
 const useStyles = makeStyles({
-  layoutContainer: {
-    position: 'relative',
-    width: '100%',
-    height: '90vh',
-    '&> div': {
-      height: '100%',
-    },
-  },
+    layoutContainer: {
+        position: 'relative',
+        width: '100%',
+        height: '90vh',
+        '&> div': {
+            height: '100%',
+        }
+    }
 });
 
-const SvgComponent = (props) => (
-  <svg
-    width={8}
-    height={8}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="m.75.75 6.5 6.5m0-6.5-6.5 6.5"
-      stroke="#000"
-      strokeWidth={1.5}
-      opacity={0.2}
-    />
-  </svg>
-);
-
 /**
  * The component that renders the FlexLayout component of the LayoutManager.
  */
 const MainLayout = () => {
-  const classes = useStyles();
-  const store = useStore();
-  const [Component, setComponent] = useState(undefined);
+
+    const classes = useStyles();
+    const store = useStore();
+    const [Component, setComponent] = useState(undefined);
 
   useEffect(() => {
     // Workaround because getLayoutManagerInstance
@@ -51,9 +35,10 @@ const MainLayout = () => {
       const myManager = getLayoutManagerInstance();
       if (myManager) {
         setComponent(
-          myManager.getComponent({
+          myManager.getComponent(
+            {
             icons: {
-              close: <SvgComponent />,
+              close: <CloseIcon />,
             },
             tabSetButtons: [
               ({ panel }) => {
@@ -62,6 +47,9 @@ const MainLayout = () => {
                     key={panel.getId()}
                     variant="outlined"
                     color="primary"
+                    onClick={() => {
+                      console.log('tab-set button')
+                    }}
                   >
                     Add
                   </Button>
@@ -75,6 +63,9 @@ const MainLayout = () => {
                     key={panel.getId()}
                     variant="filled"
                     color="secondary"
+                    onClick={() => {
+                      console.log('tab button')
+                    }}
                   >
                     Minimize
                   </Button>
@@ -85,11 +76,17 @@ const MainLayout = () => {
         );
       }
     }
-  }, [store]);
+  }, [Component, store]);
+  console.log(Component, 'Component');
+
 
   return (
     <div className={classes.layoutContainer}>
-      {Component === undefined ? <CircularProgress /> : <Component />}
+      {Component === undefined ? (
+        <CircularProgress />
+      ) : (
+        <Component />
+      )}
     </div>
   );
 };

diff --git a/geppetto.js/geppetto-client/package.json b/geppetto.js/geppetto-client/package.json
@@ -28,12 +28,12 @@
   "dependencies": {
     "@material-ui/core": "^4.1.3",
     "@metacell/geppetto-meta-core": "1.1.0",
-    "@metacell/geppetto-meta-ui": "1.1.0",
+    "@metacell/geppetto-meta-ui": "file:.yalc/@metacell/geppetto-meta-ui",
     "pako": "^1.0.3",
     "react": "^17.0.2",
+    "react-redux": "^7.2.3",
     "react-rnd": "^7.3.0",
     "redux": "^4.1.0",
-    "react-redux": "^7.2.3",
     "url-join": "^4.0.0"
   },
   "devDependencies": {

diff --git a/geppetto.js/geppetto-client/setup.sh b/geppetto.js/geppetto-client/setup.sh
@@ -0,0 +1,12 @@
+yarn global add yalc
+
+app=$(pwd)
+
+cd ../geppetto-ui;
+yarn && yarn build:dev && yarn publish:yalc
+
+cd $app
+
+yalc add @metacell/geppetto-meta-ui
+
+yarn