@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

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

@@ -1,111 +0,0 @@
-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-lib/config-ui/src/layout/__tests__/__snapshots__/config.layout.test.jsx.snap

@@ -1,59 +0,0 @@
-// 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-lib/config-ui/src/layout/__tests__/config.layout.test.jsx

@@ -1,42 +0,0 @@
-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-lib/config-ui/src/layout/__tests__/layout-content.test.jsx

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

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

@@ -1,75 +0,0 @@
-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-lib/config-ui/src/layout/index.js

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

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

@@ -1,118 +0,0 @@
-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-lib/config-ui/src/layout/settings-box.jsx

@@ -1,35 +0,0 @@
-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-lib/config-ui/src/mui-box/index.jsx

@@ -1,64 +0,0 @@
-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;