@pie-lib/config-ui 9.0.3-next.2 → 10.0.0-beta.1

package/src/feedback-config/index.jsx

@@ -0,0 +1,98 @@
+import FeedbackSelector, { FeedbackType } from './feedback-selector';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import merge from 'lodash/merge';
+
+export { FeedbackSelector };
+
+const style = {
+  feedbackContainer: {
+    display: 'flex',
+    flexDirection: 'column'
+  }
+};
+
+export const buildDefaults = input => {
+  return merge(
+    {},
+    {
+      correct: { type: 'default', default: 'Correct' },
+      incorrect: { type: 'default', default: 'Incorrect' },
+      partial: { type: 'default', default: 'Nearly' }
+    },
+    input
+  );
+};
+
+export class FeedbackConfig extends React.Component {
+  static propTypes = {
+    allowPartial: PropTypes.bool,
+    feedback: PropTypes.shape({
+      correct: PropTypes.shape(FeedbackType),
+      incorrect: PropTypes.shape(FeedbackType),
+      partial: PropTypes.shape(FeedbackType)
+    }),
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    toolbarOpts: PropTypes.object
+  };
+
+  static defaultProps = {
+    allowPartial: true,
+    feedback: buildDefaults()
+  };
+
+  onChange(key, config) {
+    const { feedback, onChange } = this.props;
+    const update = { ...feedback, [key]: config };
+    onChange(update);
+  }
+
+  onCorrectChange = this.onChange.bind(this, 'correct');
+  onIncorrectChange = this.onChange.bind(this, 'incorrect');
+  onPartialChange = this.onChange.bind(this, 'partial');
+
+  render() {
+    const { classes, allowPartial, feedback, toolbarOpts } = this.props;
+
+    return (
+      <ExpansionPanel>
+        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography className={classes.heading}>Feedback</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <div className={classes.feedbackContainer}>
+            <FeedbackSelector
+              label="If correct, show"
+              feedback={feedback.correct}
+              onChange={this.onCorrectChange}
+              toolbarOpts={toolbarOpts}
+            />
+            {allowPartial && (
+              <FeedbackSelector
+                label="If partially correct, show"
+                feedback={feedback.partial}
+                onChange={this.onPartialChange}
+                toolbarOpts={toolbarOpts}
+              />
+            )}
+            <FeedbackSelector
+              label="If incorrect, show"
+              feedback={feedback.incorrect}
+              onChange={this.onIncorrectChange}
+              toolbarOpts={toolbarOpts}
+            />
+          </div>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    );
+  }
+}
+
+export default withStyles(style)(FeedbackConfig);

package/src/form-section.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = theme => ({
+  formSection: {
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  label: {
+    marginBottom: theme.spacing.unit
+  }
+});
+
+export default withStyles(styles)(({ className, classes, label, children, labelExtraStyle }) => (
+  <div className={classNames(classes.formSection, className)}>
+    <Typography className={classes.label} type="subheading" style={labelExtraStyle}>
+      {label}
+    </Typography>
+    {children}
+  </div>
+));

package/src/help.jsx

@@ -0,0 +1,88 @@
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import PropTypes from 'prop-types';
+
+import Button from '@material-ui/core/Button';
+import HelpIcon from '@material-ui/icons/Help';
+import IconButton from '@material-ui/core/IconButton';
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const RawHelpButton = ({ onClick, classes }) => (
+  <IconButton
+    classes={{
+      label: classes.icon
+    }}
+    onClick={onClick}
+  >
+    <HelpIcon />
+  </IconButton>
+);
+RawHelpButton.propTypes = {
+  onClick: PropTypes.func,
+  classes: PropTypes.object.isRequired
+};
+
+export const HelpButton = withStyles({
+  icon: {
+    '&:hover': {
+      color: '#ddd'
+    }
+  }
+})(RawHelpButton);
+
+export const HelpDialog = ({ open, onClose, children, title }) => (
+  <Dialog open={open} onRequestClose={onClose}>
+    <DialogTitle>{title}</DialogTitle>
+    <DialogContent>
+      <DialogContentText>{children}</DialogContentText>
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={onClose} color="primary">
+        OK
+      </Button>
+    </DialogActions>
+  </Dialog>
+);
+
+HelpDialog.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  title: PropTypes.string.isRequired
+};
+
+class Help extends React.Component {
+  static propTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    title: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false
+    };
+  }
+
+  render() {
+    const { children, title } = this.props;
+    return (
+      <div>
+        <HelpButton color="accent" onClick={() => this.setState({ open: true })} />
+        <HelpDialog
+          open={this.state.open}
+          title={title}
+          onClose={() => this.setState({ open: false })}
+        >
+          {children}
+        </HelpDialog>
+      </div>
+    );
+  }
+}
+
+export default Help;

package/src/index.js

@@ -0,0 +1,58 @@
+import AlertDialog from './alert-dialog';
+import FeedbackConfig, {
+  FeedbackSelector,
+  buildDefaults as feedbackConfigDefaults
+} from './feedback-config';
+import { InputCheckbox, InputSwitch, InputRadio } from './inputs';
+import Langs, { LanguageControls } from './langs';
+import Tabs from './tabs';
+import Checkbox from './checkbox';
+import FormSection from './form-section';
+import Help from './help';
+import Input from './input';
+import { InputContainer } from '@pie-lib/render-ui';
+import NumberTextField from './number-text-field';
+import NumberTextFieldCustom from './number-text-field-custom';
+import TwoChoice, { NChoice } from './two-choice';
+import TagsInput from './tags-input';
+import MuiBox from './mui-box';
+import ChoiceConfiguration from './choice-configuration';
+import * as layout from './layout';
+
+import * as choiceUtils from './choice-utils';
+import withStatefulModel from './with-stateful-model';
+import Toggle from './settings/toggle';
+import DisplaySize from './settings/display-size';
+
+import * as settings from './settings';
+
+export {
+  AlertDialog,
+  FeedbackConfig,
+  FeedbackSelector,
+  feedbackConfigDefaults,
+  InputCheckbox,
+  InputSwitch,
+  InputRadio,
+  Langs,
+  LanguageControls,
+  Tabs,
+  Checkbox,
+  FormSection,
+  Help,
+  Input,
+  InputContainer,
+  NumberTextField,
+  NumberTextFieldCustom,
+  TwoChoice,
+  NChoice,
+  TagsInput,
+  MuiBox,
+  ChoiceConfiguration,
+  layout,
+  choiceUtils,
+  withStatefulModel,
+  Toggle,
+  DisplaySize,
+  settings
+};

package/src/input.jsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { default as MaterialInput } from '@material-ui/core/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
+    };
+  }
+
+  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

@@ -0,0 +1,96 @@
+import Checkbox from '@material-ui/core/Checkbox';
+import Radio from '@material-ui/core/Radio';
+import { InputContainer } from '@pie-lib/render-ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Switch from '@material-ui/core/Switch';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
+const InputTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  label: PropTypes.string,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  error: PropTypes.string
+};
+
+const RawInputSwitch = ({ classes, className, label, checked, onChange }) => {
+  return (
+    <InputContainer className={className} label={label}>
+      <Switch
+        className={classes.switchRoot}
+        checked={checked}
+        onChange={onChange}
+        aria-label={label}
+      />
+    </InputContainer>
+  );
+};
+
+RawInputSwitch.propTypes = { ...InputTypes };
+
+const InputSwitch = withStyles({
+  switchRoot: {
+    justifyContent: 'inherit',
+    transform: 'translate(-20%, 20%)'
+  }
+})(RawInputSwitch);
+
+const RawInputCheckbox = props => {
+  const { classes, className, label, checked, onChange, disabled, error } = props;
+
+  return (
+    <InputContainer className={className} label={label}>
+      <Checkbox
+        className={classNames(classes.checkboxRoot, error && classes.error)}
+        disabled={disabled}
+        checked={checked}
+        onChange={onChange}
+        aria-label={label}
+      />
+    </InputContainer>
+  );
+};
+
+RawInputCheckbox.propTypes = { ...InputTypes };
+
+const RawInputRadio = props => {
+  const { classes, className, label, checked, onChange, disabled, error } = props;
+
+  return (
+    <InputContainer className={className} label={label}>
+      <Radio
+        className={classNames(classes.radioRoot, error && classes.error)}
+        disabled={disabled}
+        checked={checked}
+        onChange={onChange}
+        aria-label={label}
+      />
+    </InputContainer>
+  );
+};
+
+RawInputRadio.propTypes = { ...InputTypes };
+
+const InputCheckbox = withStyles({
+  checkboxRoot: {
+    transform: 'translate(-25%, 20%)'
+  },
+  error: {
+    color: 'red'
+  }
+})(RawInputCheckbox);
+
+const InputRadio = withStyles(() => ({
+  radioRoot: {
+    transform: 'translate(-20%, 20%)'
+  },
+  error: {
+    color: 'red'
+  }
+}))(RawInputRadio);
+
+export { InputSwitch, InputCheckbox, InputRadio };

package/src/langs.jsx

@@ -0,0 +1,122 @@
+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/src/layout/config-layout.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Measure from 'react-measure';
+import PropTypes from 'prop-types';
+import LayoutContents from './layout-contents';
+import SettingsBox from './settings-box';
+
+class ConfigLayout extends React.Component {
+  static propTypes = {
+    children: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.element),
+      PropTypes.element
+    ]),
+    settings: PropTypes.element,
+    className: PropTypes.string,
+    classes: PropTypes.object,
+    sidePanelMinWidth: PropTypes.number
+  };
+
+  static defaultProps = {
+    sidePanelMinWidth: 950
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      layoutMode: undefined
+    };
+  }
+
+  onResize = contentRect => {
+    const { bounds } = contentRect;
+    const { sidePanelMinWidth } = this.props;
+    const layoutMode = bounds.width >= sidePanelMinWidth ? 'inline' : 'tabbed';
+
+    this.setState({ layoutMode });
+  };
+
+  render() {
+    return (
+      <Measure bounds onResize={this.onResize}>
+        {({ measureRef }) => {
+          const { settings, children } = this.props;
+          const { layoutMode } = this.state;
+
+          return (
+            <div ref={measureRef}>
+              <LayoutContents
+                mode={layoutMode}
+                secondary={
+                  layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings
+                }
+              >
+                {children}
+              </LayoutContents>
+            </div>
+          );
+        }}
+      </Measure>
+    );
+  }
+}
+
+export default ConfigLayout;

package/src/layout/index.js

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

package/src/layout/layout-contents.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core';
+import Tabs from '../tabs';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+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
+  };
+
+  render() {
+    const { mode, secondary, children, classes } = this.props;
+
+    return (
+      <div className={classnames(classes.container)}>
+        {mode === 'inline' && (
+          <div className={classes.flow}>
+            <div className={classes.configContainer}>{children}</div>
+            <div>{secondary}</div>
+          </div>
+        )}
+        {mode === 'tabbed' && (
+          <Tabs
+            onChange={this.onTabsChange}
+            contentClassName={classes.contentContainer}
+            indicatorColor="primary"
+          >
+            <div title="Design">{children}</div>
+            <div title="settings">{secondary}</div>
+          </Tabs>
+        )}
+      </div>
+    );
+  }
+}
+
+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);