@pie-lib/config-ui 11.30.3-next.0 → 11.30.3-next.162

package/src/tags-input/index.jsx

@@ -1,27 +1,48 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import uniq from 'lodash/uniq';
-import Chip from '@material-ui/core/Chip';
+import Chip from '@mui/material/Chip';
 import MuiBox from '../mui-box';
 
 const ENTER = 13;
 
-const Tag = withStyles(() => ({
-  tag: {
-    padding: '0px',
-    margin: '1px',
-  },
-}))(({ classes, label, onDelete }) => <Chip className={classes.tag} label={label} onDelete={onDelete} />);
+const StyledChip = styled(Chip)(() => ({
+  padding: '0px',
+  margin: '1px',
+}));
+
+const Tag = ({ label, onDelete }) => <StyledChip label={label} onDelete={onDelete} />;
 
 Tag.propTypes = {
   label: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
 };
 
+const StyledTagsInput = styled('div')(({ theme }) => ({
+  border: `0px solid ${theme.palette.background.paper}`,
+  display: 'flex',
+  flexWrap: 'wrap',
+}));
+
+const StyledInput = styled('input')(({ theme }) => ({
+  padding: '2px',
+  margin: '1px',
+  minWidth: '30px',
+  width: '100%',
+  flex: '1',
+  border: `0px solid ${theme.palette.background.paper}`,
+  height: '28px',
+  fontSize: theme.typography.fontSize,
+  fontFamily: theme.typography.fontFamily,
+  outline: 'none',
+  '&:focus': {
+    outline: 'none',
+  },
+}));
+
 export class TagsInput extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     tags: PropTypes.arrayOf(PropTypes.string).isRequired,
     onChange: PropTypes.func.isRequired,
   };
@@ -70,50 +91,26 @@ export class TagsInput extends React.Component {
   };
 
   render() {
-    const { classes, tags } = this.props;
+    const { tags } = this.props;
     return (
       <MuiBox focused={this.state.focused}>
-        <div className={classes.tagsInput}>
+        <StyledTagsInput>
           {(tags || []).map((t, index) => (
             <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
           ))}
-          <input
+          <StyledInput
             ref={(r) => (this.input = r)}
             onKeyDown={this.onKeyDown}
             onChange={this.onChange}
-            className={classes.input}
             value={this.state.value}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
             type="text"
           />
-        </div>
+        </StyledTagsInput>
       </MuiBox>
     );
   }
 }
 
-const styles = (theme) => ({
-  tagsInput: {
-    border: `0px solid ${theme.palette.background.paper}`,
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  input: {
-    padding: '2px',
-    margin: '1px',
-    minWidth: '30px',
-    width: '100%',
-    flex: '1',
-    border: `0px solid ${theme.palette.background.paper}`,
-    height: '28px',
-    fontSize: theme.typography.fontSize,
-    fontFamily: theme.typography.fontFamily,
-    outline: 'none',
-    '&:focus': {
-      outline: 'none',
-    },
-  },
-});
-
-export default withStyles(styles)(TagsInput);
+export default TagsInput;

package/src/two-choice.jsx

@@ -2,22 +2,19 @@ import { InputContainer } from '@pie-lib/render-ui';
 import PropTypes from 'prop-types';
 import RadioWithLabel from './radio-with-label';
 import React from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const styles = (theme) => ({
-  group: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    paddingLeft: 0,
-    marginTop: theme.spacing.unit,
-  },
-  vertical: {
+const StyledGroup = styled('div')(({ theme, direction }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  paddingLeft: 0,
+  marginTop: theme.spacing(1),
+  ...(direction === 'vertical' && {
     flexDirection: 'column',
-  },
-});
+  }),
+}));
 
-class RawNChoice extends React.Component {
+class NChoice extends React.Component {
   static propTypes = {
     header: PropTypes.string.isRequired,
     className: PropTypes.string,
@@ -26,7 +23,6 @@ class RawNChoice extends React.Component {
     value: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     direction: PropTypes.oneOf(['horizontal', 'vertical']),
-    classes: PropTypes.object.isRequired,
   };
 
   handleChange = (event) => {
@@ -34,7 +30,7 @@ class RawNChoice extends React.Component {
   };
 
   render() {
-    const { header, className, classes, customLabel, opts, value, direction } = this.props;
+    const { header, className, customLabel, opts, value, direction } = this.props;
 
     const preppedOpts = opts.map((o) => {
       return typeof o === 'string' ? { label: o, value: o } : o;
@@ -43,7 +39,7 @@ class RawNChoice extends React.Component {
 
     return (
       <InputContainer label={header} className={className}>
-        <div className={classNames(classes.group, classes[direction])}>
+        <StyledGroup direction={direction}>
           {preppedOpts.map((o, index) => (
             <LabelComponent
               value={o.value}
@@ -53,13 +49,13 @@ class RawNChoice extends React.Component {
               label={o.label}
             />
           ))}
-        </div>
+        </StyledGroup>
       </InputContainer>
     );
   }
 }
 
-export const NChoice = withStyles(styles)(RawNChoice);
+export { NChoice };
 
 const labelValue = PropTypes.shape({ label: PropTypes.string, value: PropTypes.string });
 
@@ -91,4 +87,4 @@ class TwoChoice extends React.Component {
   }
 }
 
-export default withStyles(styles)(TwoChoice);
+export default TwoChoice;

package/src/__tests__/__snapshots__/langs.test.jsx.snap

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`langs snapshot renders 1`] = `
-<div>
-  <WithStyles(FormControl)>
-    <WithStyles(WithFormControlContext(InputLabel))
-      htmlFor="1"
-    />
-    <WithStyles(WithFormControlContext(Select))
-      input={
-        <WithStyles(Input)
-          id="1"
-        />
-      }
-      onChange={[Function]}
-    >
-      <WithStyles(MenuItem)
-        key="0"
-        value="en-US"
-      >
-        en-US
-      </WithStyles(MenuItem)>
-      <WithStyles(MenuItem)
-        key="1"
-        value="es-ES"
-      >
-        es-ES
-      </WithStyles(MenuItem)>
-    </WithStyles(WithFormControlContext(Select))>
-  </WithStyles(FormControl)>
-</div>
-`;

package/src/__tests__/__snapshots__/settings-panel.test.js.snap

@@ -1,115 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Settings Panel snapshot does not render radio buttons 1`] = `
-<div>
-  <WithStyles(Component)
-    configuration={
-      Object {
-        "editChoiceLabel": false,
-        "orientationLabel": "Orientation",
-        "settingsOrientation": true,
-      }
-    }
-    group={
-      Object {
-        "choiceAreaLayout": false,
-        "editChoiceLabel": Object {
-          "isConfigProperty": true,
-          "label": "Edit choice label",
-          "type": "toggle",
-        },
-      }
-    }
-    key="Group 1"
-    label="Group 1"
-    model={
-      Object {
-        "choiceAreaLayout": "vertical",
-      }
-    }
-    onChange={[Function]}
-  />
-</div>
-`;
-
-exports[`Settings Panel snapshot renders 1`] = `
-<div>
-  <WithStyles(Component)
-    configuration={
-      Object {
-        "editChoiceLabel": false,
-        "orientationLabel": "Orientation",
-        "settingsOrientation": true,
-      }
-    }
-    group={
-      Object {
-        "choiceAreaLayout": Object {
-          "choices": Array [
-            Object {
-              "label": "opt1",
-              "value": "opt1",
-            },
-            Object {
-              "label": "opt2",
-              "value": "opt2",
-            },
-          ],
-          "equationEditor": Object {
-            "choices": Array [
-              "geometry",
-              "advanced-algebra",
-              "statistics",
-              "miscellaneous",
-            ],
-            "isConfigProperty": false,
-            "label": "Dropdown",
-            "type": "dropdown",
-          },
-          "graph": Object {
-            "fields": Object {
-              "domain": Object {
-                "isConfigProperty": false,
-                "label": "Domain",
-                "suffix": "px",
-                "type": "numberField",
-              },
-              "range": Object {
-                "isConfigProperty": false,
-                "label": "Range",
-                "suffix": "px",
-                "type": "numberField",
-              },
-              "width": Object {
-                "isConfigProperty": false,
-                "label": "Width",
-                "max": 250,
-                "min": 50,
-                "suffix": "px",
-                "type": "numberField",
-              },
-            },
-            "label": "Graph Display Size",
-            "type": "numberFields",
-          },
-          "label": "Orientation",
-          "type": "radio",
-        },
-        "editChoiceLabel": Object {
-          "isConfigProperty": true,
-          "label": "Edit choice label",
-          "type": "toggle",
-        },
-      }
-    }
-    key="Group 1"
-    label="Group 1"
-    model={
-      Object {
-        "choiceAreaLayout": "vertical",
-      }
-    }
-    onChange={[Function]}
-  />
-</div>
-`;

package/src/__tests__/__snapshots__/two-choice.test.js.snap

@@ -1,171 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NChoice renders n choice radio buttons vertical correctly 1`] = `
-<div
-  className="MuiFormControl-root-5 RawInputContainer-formControl-3"
->
-  <label
-    className="MuiFormLabel-root-20 MuiInputLabel-root-9 MuiInputLabel-formControl-14 MuiInputLabel-animated-17 MuiInputLabel-shrink-16 RawInputContainer-label-4"
-    data-shrink={true}
-  >
-    n-choice-vertical
-  </label>
-  <div
-    className="RawNChoice-group-1 RawNChoice-vertical-2"
-  >
-    <label
-      className="MuiFormControlLabel-root-29"
-    >
-      <span
-        className="MuiButtonBase-root-50 MuiIconButton-root-44 MuiPrivateSwitchBase-root-40 MuiRadio-root-35 MuiRadio-colorSecondary-39 MuiPrivateSwitchBase-checked-41 MuiRadio-checked-36 Component-customColor-28"
-        onBlur={[Function]}
-        onContextMenu={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
-        tabIndex={null}
-      >
-        <span
-          className="MuiIconButton-label-49"
-        >
-          <svg
-            aria-hidden="true"
-            className="MuiSvgIcon-root-53"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-            />
-          </svg>
-          <input
-            checked={true}
-            className="MuiPrivateSwitchBase-input-43"
-            disabled={false}
-            onChange={[Function]}
-            type="radio"
-            value="left"
-          />
-        </span>
-        <span
-          className="MuiTouchRipple-root-98"
-        />
-      </span>
-      <span
-        className="MuiTypography-root-62 MuiTypography-body1-71 MuiFormControlLabel-label-34 Component-label-27"
-      >
-        left
-      </span>
-    </label>
-    <label
-      className="MuiFormControlLabel-root-29"
-    >
-      <span
-        className="MuiButtonBase-root-50 MuiIconButton-root-44 MuiPrivateSwitchBase-root-40 MuiRadio-root-35 MuiRadio-colorSecondary-39 Component-customColor-28"
-        onBlur={[Function]}
-        onContextMenu={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
-        tabIndex={null}
-      >
-        <span
-          className="MuiIconButton-label-49"
-        >
-          <svg
-            aria-hidden="true"
-            className="MuiSvgIcon-root-53"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-            />
-          </svg>
-          <input
-            checked={false}
-            className="MuiPrivateSwitchBase-input-43"
-            disabled={false}
-            onChange={[Function]}
-            type="radio"
-            value="center"
-          />
-        </span>
-        <span
-          className="MuiTouchRipple-root-98"
-        />
-      </span>
-      <span
-        className="MuiTypography-root-62 MuiTypography-body1-71 MuiFormControlLabel-label-34 Component-label-27"
-      >
-        center
-      </span>
-    </label>
-    <label
-      className="MuiFormControlLabel-root-29"
-    >
-      <span
-        className="MuiButtonBase-root-50 MuiIconButton-root-44 MuiPrivateSwitchBase-root-40 MuiRadio-root-35 MuiRadio-colorSecondary-39 Component-customColor-28"
-        onBlur={[Function]}
-        onContextMenu={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
-        tabIndex={null}
-      >
-        <span
-          className="MuiIconButton-label-49"
-        >
-          <svg
-            aria-hidden="true"
-            className="MuiSvgIcon-root-53"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-            />
-          </svg>
-          <input
-            checked={false}
-            className="MuiPrivateSwitchBase-input-43"
-            disabled={false}
-            onChange={[Function]}
-            type="radio"
-            value="right"
-          />
-        </span>
-        <span
-          className="MuiTouchRipple-root-98"
-        />
-      </span>
-      <span
-        className="MuiTypography-root-62 MuiTypography-body1-71 MuiFormControlLabel-label-34 Component-label-27"
-      >
-        right
-      </span>
-    </label>
-  </div>
-</div>
-`;

package/src/choice-configuration/__tests__/__snapshots__/feedback-menu.test.jsx.snap

@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`feedback-menu renders correctly 1`] = `
-<div>
-  <div
-    onClick={[Function]}
-  >
-    <button
-      aria-label="Feedback disabled"
-      className="MuiButtonBase-root-7 MuiIconButton-root-1"
-      disabled={false}
-      onBlur={[Function]}
-      onContextMenu={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      onTouchEnd={[Function]}
-      onTouchMove={[Function]}
-      onTouchStart={[Function]}
-      tabIndex="0"
-      type="button"
-    >
-      <span
-        className="MuiIconButton-label-6"
-      >
-        <svg
-          aria-hidden="true"
-          className="MuiSvgIcon-root-10 MuiSvgIcon-colorDisabled-15"
-          focusable="false"
-          role="presentation"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"
-          />
-        </svg>
-      </span>
-      <span
-        className="MuiTouchRipple-root-23"
-      />
-    </button>
-  </div>
-</div>
-`;