Home

Integration of geppetto-ui

1. Need to configure a theme because some components rely on it.

Example

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
...

let theme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: { main: orange[500] },
    secondary: { main: blue[500] },
    button: { main: '#fc6320' },
    toolbarBackground: { main: 'rgb(0,0,0,0.5)' },
  },
});

...
<MuiThemeProvider theme={theme}>
  <App />
</MuiThemeProvider>
...

2. Some components rely on geppetto-core's model functionality. In order to use them you have to initialize the GEPPETTO global script.

export const initGeppetto = () => {
  window.GEPPETTO = {};
  const GEPPETTO = window.GEPPETTO;

  GEPPETTO.Resources = require('@metacell/geppetto-meta-core/Resources').default;
  require('@metacell/geppetto-meta-client/pages/geppetto/GEPPETTO.Events').default(
    GEPPETTO
  );

  const Manager = require('@metacell/geppetto-meta-client/common/Manager').default;
  GEPPETTO.Manager = new Manager();

  GEPPETTO.Utility = {};
  GEPPETTO.Utility.extractMethodsFromObject = () => [];
  GEPPETTO.trigger = evt => console.log(evt, 'triggered');

  console.warn = () => null;
  GEPPETTO.CommandController = {
    log: console.log,
    createTags: (a, b) => null,
  };
  GEPPETTO.ComponentFactory = { addExistingComponent: console.log, };
  GEPPETTO.on = console.log;
  GEPPETTO.off = console.log;
}

Integration of geppetto-client

This is about using the LayoutManager + FlexLayout + Redux.

1. Add @metacell/geppetto-meta-client as package dependency
2. Define a componentMap (see src/app/componentMapp.js) and add the components that you want to display in the tabs
3. Define a default layout (see src/app/layout.js)
4. Create the Redux store by using the createStore function in @metacell/geppetto-meta-client/common (see src/redux/store.js) and pass the componentMap and layout
5. Add the Layout component to your App (see src/app/showcase.js)

FlexLayout - LayoutManager

The root node of the layout must have id "root"

Import/Export Session: Only supported for Class Component that implement the WidgetComponent interface