@pie-element/complex-rubric 3.8.4-next.9 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/langs.jsx

@@ -0,0 +1,111 @@
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import debug from 'debug';
+
+const log = debug('pie-elements:config-ui:langs');
+
+const styles = (theme) => ({
+  root: {
+    flexDirection: 'column',
+    alignItems: 'start',
+    display: 'flex',
+    position: 'relative',
+    paddingTop: '0px',
+    paddingRight: '0px',
+  },
+  formControl: {
+    position: 'initial',
+  },
+  inputLabel: {
+    paddingBottom: theme.spacing.unit,
+  },
+});
+
+export class RawLangs extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    langs: PropTypes.array,
+    selected: PropTypes.string,
+    label: PropTypes.string,
+    classes: PropTypes.object.isRequired,
+    uid: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+    this.uid = props.uid || (Math.random() * 10000).toFixed();
+  }
+
+  choose = (event) => {
+    log('[choose] event: ', event);
+
+    if (this.props.onChange) {
+      this.props.onChange(event.target.value);
+    }
+  };
+
+  render() {
+    let { langs, selected, label, classes } = this.props;
+
+    log('[render] selected:', selected);
+
+    return (
+      <div className={classes.root}>
+        <FormControl className={classes.formControl}>
+          <InputLabel className={classes.inputLabel} htmlFor={this.uid}>
+            {label}
+          </InputLabel>
+
+          <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>
+            {langs.map((l, index) => (
+              <MenuItem key={index} value={l}>
+                {l}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+const Langs = withStyles(styles, { name: 'Langs' })(RawLangs);
+export default Langs;
+
+export const LanguageControls = withStyles({
+  languageControls: {
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridAutoColumns: '1fr',
+    gridGap: '8px',
+  },
+})(({ classes, langs, activeLang, defaultLang, onActiveLangChange, onDefaultLangChange, className }) => {
+  const names = classNames(classes.languageControls, className);
+
+  return (
+    <div className={names}>
+      <Langs
+        label="Choose language to edit"
+        langs={langs}
+        selected={activeLang}
+        onChange={(l) => onActiveLangChange(l)}
+      />
+      <Langs label="Default language" langs={langs} selected={defaultLang} onChange={(l) => onDefaultLangChange(l)} />
+    </div>
+  );
+});
+
+LanguageControls.propTypes = {
+  langs: PropTypes.array,
+  activeLang: PropTypes.string.isRequired,
+  defaultLang: PropTypes.string.isRequired,
+  onActiveLangChange: PropTypes.func.isRequired,
+  onDefaultLangChange: PropTypes.func.isRequired,
+};

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/layout/__tests__/__snapshots__/config.layout.test.jsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`layout - snapshot renders correctly with a side panel 1`] = `
+<WithContentRect
+  classes={
+    Object {
+      "extraCSSRules": "WithContentRect-extraCSSRules-1",
+    }
+  }
+  settings={
+    <div>
+      <div>
+        Foo
+      </div>
+      <div>
+        Bar
+      </div>
+    </div>
+  }
+>
+  <div>
+    <div>
+      Foo
+    </div>
+    <div>
+      Bar
+    </div>
+  </div>
+</WithContentRect>
+`;
+
+exports[`layout - snapshot renders correctly without a side panel 1`] = `
+<WithContentRect
+  classes={
+    Object {
+      "extraCSSRules": "WithContentRect-extraCSSRules-1",
+    }
+  }
+  settings={
+    <div>
+      <div>
+        Foo
+      </div>
+      <div>
+        Bar
+      </div>
+    </div>
+  }
+>
+  <div>
+    <div>
+      Foo
+    </div>
+    <div>
+      Bar
+    </div>
+  </div>
+</WithContentRect>
+`;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/layout/__tests__/config.layout.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import ConfigLayout from '../config-layout';
+import { shallow } from 'enzyme';
+
+describe('layout - snapshot', () => {
+  it('renders correctly with a side panel', () => {
+    const tree = shallow(
+      <ConfigLayout
+        settings={
+          <div>
+            <div key={0}>Foo</div>
+            <div key={1}>Bar</div>
+          </div>
+        }
+      >
+        <div>
+          <div>Foo</div>
+          <div>Bar</div>
+        </div>
+      </ConfigLayout>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders correctly without a side panel', () => {
+    const tree = shallow(
+      <ConfigLayout
+        settings={
+          <div>
+            <div key={0}>Foo</div>
+            <div key={1}>Bar</div>
+          </div>
+        }
+      >
+        <div>
+          <div>Foo</div>
+          <div>Bar</div>
+        </div>
+      </ConfigLayout>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/layout/__tests__/layout-content.test.jsx

@@ -0,0 +1,3 @@
+describe('layout-content', () => {
+  it.todo('add tests!');
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/layout/config-layout.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import Measure from 'react-measure';
+import { withContentRect } from 'react-measure';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import LayoutContents from './layout-contents';
+import SettingsBox from './settings-box';
+import { AppendCSSRules } from '@pie-lib/render-ui';
+
+const styles = {
+  extraCSSRules: {},
+};
+
+class MeasuredConfigLayout extends AppendCSSRules {
+  static propTypes = {
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
+    className: PropTypes.string,
+    classes: PropTypes.object,
+    dimensions: PropTypes.object,
+    settings: PropTypes.element,
+    sidePanelMinWidth: PropTypes.number,
+    hideSettings: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    sidePanelMinWidth: 1135,
+    hideSettings: false,
+    dimensions: {},
+  };
+
+  constructor(...props) {
+    super(...props);
+    this.state = { layoutMode: undefined };
+  }
+
+  onResize = (contentRect) => {
+    const { bounds } = contentRect;
+    const { sidePanelMinWidth, dimensions } = this.props;
+    const { maxWidth } = dimensions || {};
+
+    const layoutMode =
+      bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
+
+    this.setState({ layoutMode });
+  };
+
+  render() {
+    return (
+      <Measure bounds onResize={this.onResize}>
+        {({ measureRef }) => {
+          const { children, settings, hideSettings, dimensions, classes } = this.props;
+          const { layoutMode } = this.state;
+
+          const settingsPanel =
+            layoutMode === 'inline' ? <SettingsBox className="settings-box">{settings}</SettingsBox> : settings;
+          const secondaryContent = hideSettings ? null : settingsPanel;
+          const finalClass = classNames('main-container', classes.extraCSSRules);
+
+          return (
+            <div ref={measureRef} className={finalClass}>
+              <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
+                {children}
+              </LayoutContents>
+            </div>
+          );
+        }}
+      </Measure>
+    );
+  }
+}
+
+const ConfigLayout = withStyles(styles)(withContentRect('bounds')(MeasuredConfigLayout));
+
+export default ConfigLayout;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/layout/index.js

@@ -0,0 +1,4 @@
+import ConfigLayout from './config-layout';
+import LayoutContents from './layout-contents';
+
+export { LayoutContents, ConfigLayout };

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/layout/layout-contents.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+import Tabs from '../tabs';
+import classNames from 'classnames';
+
+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, 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={classes.container} style={{ minHeight, minWidth, maxHeight, maxWidth }}>
+        {mode === 'inline' && (
+          <div className={classnames(classes.flow, classes.contentContainer)}>
+            <div className={classnames(classes.configContainer, 'design-container')}>{children}</div>
+            {hasSettingsPanel && (
+              <div className={classnames(classes.settingsContainer, 'settings-container')}>{secondary}</div>
+            )}
+          </div>
+        )}
+
+        {mode === 'tabbed' && hasSettingsPanel && (
+          <Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor="primary">
+            <div title="Design" className="design-container">
+              {children}
+            </div>
+            <div title="Settings" className="settings-container">
+              {secondary}
+            </div>
+          </Tabs>
+        )}
+
+        {mode === 'tabbed' && !hasSettingsPanel && (
+          <div className={classNames(classes.contentContainer, 'design-container')}>{children}</div>
+        )}
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  flow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+  },
+  contentContainer: {
+    padding: `${theme.spacing.unit * 2}px 0`,
+  },
+  configContainer: {
+    flex: '1',
+  },
+  settingsContainer: {
+    marginLeft: theme.spacing.unit * 2,
+  },
+});
+
+export default withStyles(styles)(RawLayoutContents);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/layout/settings-box.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
+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,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const { classes, className, children } = this.props;
+
+    return <div className={classNames(classes.settingsBox, className)}>{children}</div>;
+  }
+}
+const styles = (theme) => ({
+  settingsBox: {
+    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 default withStyles(styles)(SettingsBox);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/mui-box/index.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/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 bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
+
+  log(theme.palette.primary[theme.palette.type || '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'
+      },
+    },
+    focused: {
+      '&:after': {
+        transform: 'scaleX(1)',
+      },
+    },
+  };
+})(({ children, classes, focused }) => {
+  const names = classNames(classes.muiBox, focused && classes.focused);
+
+  return <div className={names}>{children}</div>;
+});
+
+MuiBox.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  focused: PropTypes.bool.isRequired,
+};
+
+export default MuiBox;