@pie-lib/config-ui 13.1.0-beta.7 → 14.0.0-next.35

package/src/input.jsx

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { default as MaterialInput } from '@mui/material/Input';
-import { InputContainer } from '@pie-lib/render-ui';
-
-export default class Input extends React.Component {
-  static propTypes = {
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    onChange: PropTypes.func.isRequired,
-    label: PropTypes.string,
-    type: PropTypes.string.isRequired,
-    error: PropTypes.func,
-    noModelUpdateOnError: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    type: 'text',
-    error: (value, type) => (type === 'number' ? !value || isNaN(value) : !value),
-    noModelUpdateOnError: false,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      value: props.value,
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(newProps) {
-    this.setState({
-      value: newProps.value,
-    });
-  }
-
-  onChange = (event) => {
-    const { type, onChange, error } = this.props;
-    const value = event.target.value;
-
-    if (error(value, type)) {
-      this.setState({
-        error: true,
-        value: event.target.value,
-      });
-    } else {
-      this.setState({
-        error: false,
-        value: event.target.value,
-      });
-
-      onChange(event);
-    }
-  };
-
-  render() {
-    const {
-      label,
-      type,
-      noModelUpdateOnError, // eslint-disable-line no-unused-vars
-      ...rest
-    } = this.props;
-    const { value, error } = this.state;
-
-    return label ? (
-      <InputContainer label={label}>
-        <MaterialInput type={type} {...rest} value={value} onChange={this.onChange} error={error} />
-      </InputContainer>
-    ) : (
-      <MaterialInput type={type} {...rest} value={value} onChange={this.onChange} error={error} />
-    );
-  }
-}

package/src/inputs.jsx

@@ -1,69 +0,0 @@
-import Checkbox from '@mui/material/Checkbox';
-import Radio from '@mui/material/Radio';
-import { color, InputContainer } from '@pie-lib/render-ui';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Switch from '@mui/material/Switch';
-import { styled } from '@mui/material/styles';
-
-const InputTypes = {
-  className: PropTypes.string,
-  label: PropTypes.string,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-};
-
-const StyledSwitch = styled(Switch)(() => ({
-  justifyContent: 'inherit',
-  transform: 'translate(-20%, 20%)',
-}));
-
-const InputSwitch = ({ className, label, checked, onChange }) => {
-  return (
-    <InputContainer className={className} label={label}>
-      <StyledSwitch checked={checked} onChange={onChange} aria-label={label} />
-    </InputContainer>
-  );
-};
-
-InputSwitch.propTypes = { ...InputTypes };
-
-const StyledCheckbox = styled(Checkbox)(({ theme, error }) => ({
-  transform: 'translate(-25%, 20%)',
-  color: `${color.tertiary()} !important`,
-  ...(error && {
-    color: `${theme.palette.error.main} !important`,
-  }),
-}));
-
-const InputCheckbox = ({ className, label, checked, onChange, disabled, error }) => {
-  return (
-    <InputContainer className={className} label={label}>
-      <StyledCheckbox disabled={disabled} checked={checked} onChange={onChange} aria-label={label} error={error} />
-    </InputContainer>
-  );
-};
-
-InputCheckbox.propTypes = { ...InputTypes };
-
-const StyledRadio = styled(Radio)(({ theme, error }) => ({
-  transform: 'translate(-20%, 20%)',
-  color: `${color.tertiary()} !important`,
-  ...(error && {
-    color: `${theme.palette.error.main} !important`,
-  }),
-}));
-
-const InputRadio = ({ className, label, checked, onChange, disabled, error }) => {
-  return (
-    <InputContainer className={className} label={label}>
-      <StyledRadio disabled={disabled} checked={checked} onChange={onChange} aria-label={label} error={error} />
-    </InputContainer>
-  );
-};
-
-InputRadio.propTypes = { ...InputTypes };
-
-export { InputSwitch, InputCheckbox, InputRadio };

package/src/langs.jsx

@@ -1,111 +0,0 @@
-import Input from '@mui/material/Input';
-import InputLabel from '@mui/material/InputLabel';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import debug from 'debug';
-
-const log = debug('pie-elements:config-ui:langs');
-
-const StyledRoot = styled('div')(() => ({
-  flexDirection: 'column',
-  alignItems: 'start',
-  display: 'flex',
-  position: 'relative',
-  paddingTop: '0px',
-  paddingRight: '0px',
-}));
-
-const StyledFormControl = styled(FormControl)(() => ({
-  position: 'initial',
-}));
-
-const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
-  paddingBottom: theme.spacing(1),
-}));
-
-export class Langs extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func,
-    langs: PropTypes.array,
-    selected: PropTypes.string,
-    label: PropTypes.string,
-    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 } = this.props;
-
-    log('[render] selected:', selected);
-
-    return (
-      <StyledRoot>
-        <StyledFormControl>
-          <StyledInputLabel htmlFor={this.uid}>{label}</StyledInputLabel>
-
-          <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>
-            {langs.map((l, index) => (
-              <MenuItem key={index} value={l}>
-                {l}
-              </MenuItem>
-            ))}
-          </Select>
-        </StyledFormControl>
-      </StyledRoot>
-    );
-  }
-}
-export default Langs;
-
-const StyledLanguageControls = styled('div')(() => ({
-  display: 'grid',
-  gridAutoFlow: 'column',
-  gridAutoColumns: '1fr',
-  gridGap: '8px',
-}));
-
-export const LanguageControls = ({
-  langs,
-  activeLang,
-  defaultLang,
-  onActiveLangChange,
-  onDefaultLangChange,
-  className,
-}) => {
-  return (
-    <StyledLanguageControls className={className}>
-      <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)} />
-    </StyledLanguageControls>
-  );
-};
-
-LanguageControls.propTypes = {
-  langs: PropTypes.array,
-  activeLang: PropTypes.string.isRequired,
-  defaultLang: PropTypes.string.isRequired,
-  onActiveLangChange: PropTypes.func.isRequired,
-  onDefaultLangChange: PropTypes.func.isRequired,
-  className: PropTypes.string,
-};

package/src/layout/__tests__/config.layout.test.jsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import ConfigLayout from '../config-layout';
-
-describe('ConfigLayout', () => {
-  const settingsPanel = (
-    <div data-testid="settings-panel">
-      <div key={0}>Foo</div>
-      <div key={1}>Bar</div>
-    </div>
-  );
-
-  const children = (
-    <div data-testid="main-content">
-      <div>Foo</div>
-      <div>Bar</div>
-    </div>
-  );
-
-  describe('rendering', () => {
-    it('renders correctly with settings panel', async () => {
-      render(<ConfigLayout settings={settingsPanel}>{children}</ConfigLayout>);
-
-      // Main content should render immediately
-      expect(screen.getByTestId('main-content')).toBeInTheDocument();
-
-      // Settings panel may render after layout calculation
-      // In test environment, react-measure may not provide dimensions,
-      // so we check if it exists but don't require it
-      await waitFor(() => {
-        expect(screen.getByText('Foo')).toBeInTheDocument();
-      });
-    });
-
-    it('renders main content when provided', () => {
-      render(<ConfigLayout settings={settingsPanel}>{children}</ConfigLayout>);
-
-      expect(screen.getByTestId('main-content')).toBeInTheDocument();
-      expect(screen.getByText('Foo')).toBeInTheDocument();
-      // Only check that Bar appears at least once (in main content)
-      expect(screen.getAllByText('Bar').length).toBeGreaterThanOrEqual(1);
-    });
-
-    it('renders settings panel content', () => {
-      render(<ConfigLayout settings={settingsPanel}>{children}</ConfigLayout>);
-
-      // Settings panel might not render in test environment due to react-measure
-      // Just verify the component renders without crashing
-      expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    });
-
-    it('renders without settings panel when not provided', () => {
-      render(<ConfigLayout>{children}</ConfigLayout>);
-
-      expect(screen.queryByTestId('settings-panel')).not.toBeInTheDocument();
-      expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    });
-  });
-});

package/src/layout/__tests__/layout-content.test.jsx

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

package/src/layout/config-layout.jsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import Measure, { withContentRect } from 'react-measure';
-import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import LayoutContents from './layout-contents';
-import SettingsBox from './settings-box';
-
-const theme = createTheme({
-  typography: {
-    fontFamily: 'inherit',
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        contained: {
-          backgroundColor: '#e0e0e0',
-          color: '#000000',
-          '&:hover': {
-            backgroundColor: '#bdbdbd',
-          },
-        },
-      },
-    },
-  },
-});
-
-class MeasuredConfigLayout extends React.Component {
-  static propTypes = {
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
-    className: PropTypes.string,
-    dimensions: PropTypes.object,
-    settings: PropTypes.element,
-    sidePanelMinWidth: PropTypes.number,
-    hideSettings: PropTypes.bool,
-    extraCSSRules: PropTypes.shape({
-      names: PropTypes.arrayOf(PropTypes.string),
-      rules: PropTypes.string,
-    }),
-  };
-
-  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';
-
-    // Only update state (and cause a re-render) if the computed layoutMode changed.
-    if (layoutMode !== this.state.layoutMode) {
-      this.setState({ layoutMode });
-    }
-  };
-
-  render() {
-    return (
-      // 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, extraCSSRules } = 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 extraCSSRules';
-
-              return (
-                <div ref={measureRef} className={finalClass}>
-                  {extraCSSRules?.rules ? (
-                    <style dangerouslySetInnerHTML={{ __html: `.extraCSSRules { ${extraCSSRules.rules} }` }} />
-                  ) : null}
-
-                  <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
-                    {children}
-                  </LayoutContents>
-                </div>
-              );
-            }}
-          </Measure>
-        </ThemeProvider>
-      </StyledEngineProvider>
-    );
-  }
-}
-
-const ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);
-
-export default ConfigLayout;

package/src/layout/index.js

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

package/src/layout/layout-contents.jsx

@@ -1,117 +0,0 @@
-import React from 'react';
-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]),
-    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, 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 (
-      <StyledContainer style={{ minHeight, minWidth, maxHeight, maxWidth }}>
-        {mode === 'inline' && (
-          <StyledFlow>
-            <StyledConfigContainer className="design-container">{children}</StyledConfigContainer>
-            {hasSettingsPanel && (
-              <StyledSettingsContainer className="settings-container">{secondary}</StyledSettingsContainer>
-            )}
-          </StyledFlow>
-        )}
-
-        {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>
-        )}
-
-        {mode === 'tabbed' && !hasSettingsPanel && (
-          <StyledContentContainer className="design-container">{children}</StyledContentContainer>
-        )}
-      </StyledContainer>
-    );
-  }
-}
-
-export default RawLayoutContents;

package/src/layout/settings-box.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-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 = {
-    className: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  };
-
-  static defaultProps = {};
-
-  render() {
-    const { className, children } = this.props;
-
-    return <StyledSettingsBox className={className}>{children}</StyledSettingsBox>;
-  }
-}
-
-export default SettingsBox;

package/src/mui-box/index.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import debug from 'debug';
-
-const log = debug('pie-elements:config-ui:mui-box');
-
-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.mode || 'light']);
-
-  return {
-    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'
-    },
-  };
-});
-
-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,
-};
-
-export default MuiBox;