@pie-lib/config-ui 12.0.0-beta.4 → 12.0.0-next.0

package/src/layout/config-layout.jsx

@@ -1,64 +1,97 @@
 import React from 'react';
 import Measure from 'react-measure';
+import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { withContentRect } from 'react-measure';
 import PropTypes from 'prop-types';
 import LayoutContents from './layout-contents';
 import SettingsBox from './settings-box';
+import { AppendCSSRules } from '@pie-lib/render-ui';
 
-class ConfigLayout extends React.Component {
+const theme = createTheme({
+  typography: {
+    fontFamily: 'inherit',
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        contained: {
+          backgroundColor: '#e0e0e0',
+          color: '#000000',
+          '&:hover': {
+            backgroundColor: '#bdbdbd',
+          },
+        },
+      },
+    },
+  },
+});
+
+class MeasuredConfigLayout extends AppendCSSRules {
   static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.element),
-      PropTypes.element
-    ]),
-    settings: PropTypes.element,
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
     className: PropTypes.string,
-    classes: PropTypes.object,
-    sidePanelMinWidth: PropTypes.number
+    dimensions: PropTypes.object,
+    settings: PropTypes.element,
+    sidePanelMinWidth: PropTypes.number,
+    hideSettings: PropTypes.bool,
   };
 
   static defaultProps = {
-    sidePanelMinWidth: 950
+    sidePanelMinWidth: 1135,
+    hideSettings: false,
+    dimensions: {},
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      layoutMode: undefined
-    };
+  constructor(...props) {
+    super(...props);
+    this.state = { layoutMode: undefined };
   }
 
-  onResize = contentRect => {
+  onResize = (contentRect) => {
     const { bounds } = contentRect;
-    const { sidePanelMinWidth } = this.props;
-    const layoutMode = bounds.width >= sidePanelMinWidth ? 'inline' : 'tabbed';
+    const { sidePanelMinWidth, dimensions } = this.props;
+    const { maxWidth } = dimensions || {};
 
-    this.setState({ layoutMode });
+    const layoutMode =
+      bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
+
+    // Only update state (and cause a re-render) if the computed layoutMode changed.
+    if (layoutMode !== this.state.layoutMode) {
+      this.setState({ layoutMode });
+    }
   };
 
   render() {
     return (
-      <Measure bounds onResize={this.onResize}>
-        {({ measureRef }) => {
-          const { settings, children } = this.props;
-          const { layoutMode } = this.state;
+      // TODO: REVIEW MuiThemeProvider usage - is this still needed after mui update?
+      // Different theme object identities will force theme consumers to re-render.
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <Measure bounds onResize={this.onResize}>
+            {({ measureRef }) => {
+              const { children, settings, hideSettings, dimensions } = this.props;
+              const { layoutMode } = this.state;
+
+              const settingsPanel =
+                layoutMode === 'inline' ? <SettingsBox className="settings-box">{settings}</SettingsBox> : settings;
+              const secondaryContent = hideSettings ? null : settingsPanel;
+              const finalClass = 'main-container';
 
-          return (
-            <div ref={measureRef}>
-              <LayoutContents
-                mode={layoutMode}
-                secondary={
-                  layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings
-                }
-              >
-                {children}
-              </LayoutContents>
-            </div>
-          );
-        }}
-      </Measure>
+              return (
+                <div ref={measureRef} className={finalClass}>
+                  <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
+                    {children}
+                  </LayoutContents>
+                </div>
+              );
+            }}
+          </Measure>
+        </ThemeProvider>
+      </StyledEngineProvider>
     );
   }
 }
 
+const ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);
+
 export default ConfigLayout;

package/src/layout/layout-contents.jsx

@@ -1,60 +1,117 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core';
-import Tabs from '../tabs';
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Tabs from '../tabs';
+
+const StyledContainer = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+}));
+
+const StyledFlow = styled('div')(() => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+}));
+
+const StyledContentContainer = styled('div')(({ theme }) => ({
+  padding: `${theme.spacing(2)} 0`,
+}));
+
+const StyledConfigContainer = styled('div')(() => ({
+  flex: '1',
+}));
+
+const StyledSettingsContainer = styled('div')(({ theme }) => ({
+  marginLeft: theme.spacing(2),
+}));
 
 class RawLayoutContents extends React.Component {
   static propTypes = {
     mode: PropTypes.oneOf(['tabbed', 'inline']),
     secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    classes: PropTypes.object
+    dimensions: PropTypes.object,
+  };
+
+  getConfiguration = () => {
+    const { secondary } = this.props;
+    // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null
+
+    return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;
   };
 
+  // // eslint-disable-next-line no-unused-vars
+  // componentDidUpdate(prevProps, prevState, snapshot) {
+  //   const configuration = this.getConfiguration();
+  //   const { mode } = this.props;
+  //
+  //   // promptHolder class is used to wrap up inputs:
+  //   // we don't want inputs to fill the entire scrollable container,
+  //   // but instead we want inputs to fit in the first view,
+  //   // so we calculate the maximum space inputs need
+  //   try {
+  //     if (
+  //       configuration?.maxWidth &&
+  //       getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==
+  //         configuration?.maxWidth
+  //     ) {
+  //       document.documentElement.style.setProperty(
+  //         '--pie-prompt-holder-max-width',
+  //         mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,
+  //       );
+  //     }
+  //   } catch (e) {
+  //     console.log(e.toString());
+  //   }
+  // }
+
   render() {
-    const { mode, secondary, children, classes } = this.props;
+    const { mode, secondary, children, dimensions } = this.props;
+    const { minHeight, minWidth, maxHeight, maxWidth } = dimensions || {};
+    const configuration = this.getConfiguration();
+
+    let hasSettingsPanel = Object.entries(configuration || {}).some(([, obj]) => !!obj?.settings);
+    // ebsr has configuration.partA and configuration.partB
+    // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings
+
+    if (!hasSettingsPanel) {
+      try {
+        hasSettingsPanel = JSON.stringify(configuration)?.match(/settings":true/)?.length;
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log(e.toString());
+      }
+    }
 
     return (
-      <div className={classnames(classes.container)}>
+      <StyledContainer style={{ minHeight, minWidth, maxHeight, maxWidth }}>
         {mode === 'inline' && (
-          <div className={classes.flow}>
-            <div className={classes.configContainer}>{children}</div>
-            <div>{secondary}</div>
-          </div>
+          <StyledFlow>
+            <StyledConfigContainer className="design-container">{children}</StyledConfigContainer>
+            {hasSettingsPanel && (
+              <StyledSettingsContainer className="settings-container">{secondary}</StyledSettingsContainer>
+            )}
+          </StyledFlow>
         )}
-        {mode === 'tabbed' && (
-          <Tabs
-            onChange={this.onTabsChange}
-            contentClassName={classes.contentContainer}
-            indicatorColor="primary"
-          >
-            <div title="Design">{children}</div>
-            <div title="settings">{secondary}</div>
+
+        {mode === 'tabbed' && hasSettingsPanel && (
+          <Tabs onChange={this.onTabsChange} contentClassName="content-container" indicatorColor="primary">
+            <StyledContentContainer title="Design" className="design-container">
+              {children}
+            </StyledContentContainer>
+            <StyledContentContainer title="Settings" className="settings-container">
+              {secondary}
+            </StyledContentContainer>
           </Tabs>
         )}
-      </div>
+
+        {mode === 'tabbed' && !hasSettingsPanel && (
+          <StyledContentContainer className="design-container">{children}</StyledContentContainer>
+        )}
+      </StyledContainer>
     );
   }
 }
 
-const styles = () => ({
-  flow: {
-    display: 'flex',
-    justifyContent: 'space-between'
-  },
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative'
-  },
-  contentContainer: {
-    padding: '32px 16px 0 16px'
-  },
-  configContainer: {
-    flex: '1',
-    marginRight: '20px'
-  }
-});
-
-export default withStyles(styles)(RawLayoutContents);
+export default RawLayoutContents;

package/src/layout/settings-box.jsx

@@ -1,31 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
+
+const StyledSettingsBox = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  border: `2px solid ${theme.palette.grey[200]}`,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  minWidth: '275px',
+  maxWidth: '300px',
+  padding: '20px 4px 4px 20px',
+  zIndex: 99,
+}));
+
 export class SettingsBox extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   };
+
   static defaultProps = {};
+
   render() {
-    const { classes, className, children } = this.props;
-    return <div className={classNames(classes.settingsBox, className)}>{children}</div>;
+    const { className, children } = this.props;
+
+    return <StyledSettingsBox className={className}>{children}</StyledSettingsBox>;
   }
 }
-const styles = () => ({
-  settingsBox: {
-    backgroundColor: '#FFF',
-    border: '2px solid #EEE',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    minWidth: '275px',
-    maxWidth: '300px',
-    padding: '24px 8px 24px 24px',
-    width: '80%',
-    zIndex: 99
-  }
-});
-export default withStyles(styles)(SettingsBox);
+
+export default SettingsBox;

package/src/mui-box/index.jsx

@@ -1,64 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import debug from 'debug';
-import classNames from 'classnames';
 
 const log = debug('pie-elements:config-ui:mui-box');
 
-const MuiBox = withStyles(theme => {
-  const light = theme.palette.type === 'light';
+const StyledMuiBox = styled('div')(({ theme, focused }) => {
+  const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
-  log(theme.palette.primary[theme.palette.type || 'light']);
+  log(theme.palette.primary[theme.palette.mode || 'light']);
 
   return {
-    muiBox: {
-      paddingTop: theme.spacing.unit,
-      paddingBottom: theme.spacing.unit,
-      position: 'relative',
-      '&:before': {
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: '1px',
-        content: '""',
-        position: 'absolute',
-        transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-        pointerEvents: 'none',
-        backgroundColor: bottomLineColor
-      },
-      '&:hover:before': {
-        height: '2px'
-      },
-      '&:after': {
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: '2px',
-        content: '""',
-        position: 'absolute',
-        transform: 'scaleX(0)',
-        transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
-        pointerEvents: 'none',
-        backgroundColor: theme.palette.primary[theme.palette.type] //'#304ffe'
-      }
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    position: 'relative',
+    '&:before': {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      height: '1px',
+      content: '""',
+      position: 'absolute',
+      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      pointerEvents: 'none',
+      backgroundColor: bottomLineColor,
+    },
+    '&:hover:before': {
+      height: '2px',
+    },
+    '&:after': {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      height: '2px',
+      content: '""',
+      position: 'absolute',
+      transform: focused ? 'scaleX(1)' : 'scaleX(0)',
+      transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
+      pointerEvents: 'none',
+      backgroundColor: theme.palette.primary[theme.palette.mode], //'#304ffe'
     },
-    focused: {
-      '&:after': {
-        transform: 'scaleX(1)'
-      }
-    }
   };
-})(({ children, classes, focused }) => {
-  const names = classNames(classes.muiBox, focused && classes.focused);
-
-  return <div className={names}>{children}</div>;
 });
 
+const MuiBox = ({ children, focused }) => {
+  return <StyledMuiBox focused={focused}>{children}</StyledMuiBox>;
+};
+
 MuiBox.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  focused: PropTypes.bool.isRequired
+  focused: PropTypes.bool.isRequired,
 };
 
 export default MuiBox;