@pie-lib/config-ui 12.1.1-next.2 → 12.1.1-next.4

package/src/__tests__/with-stateful-model.test.jsx

@@ -52,9 +52,7 @@ describe('withStatefulModel', () => {
     const updatedModel = { name: 'updated' };
     const onChange = jest.fn();
 
-    const { rerender } = render(
-      <WrappedComponent model={initialModel} onChange={onChange} />
-    );
+    const { rerender } = render(<WrappedComponent model={initialModel} onChange={onChange} />);
 
     expect(screen.getByText(JSON.stringify(initialModel))).toBeInTheDocument();
 
@@ -121,9 +119,7 @@ describe('withStatefulModel', () => {
 
     const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
 
-    render(
-      <WrappedComponent model={{ test: 'data' }} onChange={jest.fn()} />
-    );
+    render(<WrappedComponent model={{ test: 'data' }} onChange={jest.fn()} />);
 
     expect(screen.getByTestId('model-value')).toBeInTheDocument();
 
@@ -135,9 +131,7 @@ describe('withStatefulModel', () => {
     const model = { id: 1 };
     const onChange = jest.fn();
 
-    const { container } = render(
-      <WrappedComponent model={model} onChange={onChange} />
-    );
+    const { container } = render(<WrappedComponent model={model} onChange={onChange} />);
 
     expect(container.querySelector('[data-testid="model-value"]')).toBeInTheDocument();
     expect(container.querySelector('button')).toBeInTheDocument();

package/src/alert-dialog.jsx

@@ -11,8 +11,25 @@ const StyledDialogContentText = styled(DialogContentText)(() => ({
   fontSize: 'max(1rem, 14px)',
 }));
 
-const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText, disableAutoFocus, disableEnforceFocus, disableRestoreFocus }) => (
-  <Dialog open={open} disableAutoFocus={disableAutoFocus} disableEnforceFocus={disableEnforceFocus} disableRestoreFocus={disableRestoreFocus} onClose={onClose}>
+const AlertDialog = ({
+  text,
+  title,
+  onClose,
+  onConfirm,
+  open,
+  onCloseText,
+  onConfirmText,
+  disableAutoFocus,
+  disableEnforceFocus,
+  disableRestoreFocus,
+}) => (
+  <Dialog
+    open={open}
+    disableAutoFocus={disableAutoFocus}
+    disableEnforceFocus={disableEnforceFocus}
+    disableRestoreFocus={disableRestoreFocus}
+    onClose={onClose}
+  >
     {title && <StyledDialogTitle>{title}</StyledDialogTitle>}
     {text && (
       <DialogContent>

package/src/checkbox.jsx

@@ -38,15 +38,7 @@ const StyledCheckbox = styled(MuiCheckbox)(({ theme, mini, error }) => ({
 const Checkbox = ({ mini, checked, onChange, value, label, error }) => (
   <StyledFormControlLabel
     mini={mini}
-    control={
-      <StyledCheckbox
-        checked={checked}
-        onChange={onChange}
-        value={value}
-        mini={mini}
-        error={error}
-      />
-    }
+    control={<StyledCheckbox checked={checked} onChange={onChange} value={value} mini={mini} error={error} />}
     label={label}
   />
 );

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

@@ -111,25 +111,19 @@ describe('feedback-menu', () => {
 
   describe('feedback type indicators', () => {
     it('shows correct icon color for default feedback', () => {
-      const { container } = render(
-        <FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />
-      );
+      const { container } = render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
       // Icon should be present with primary color
       expect(container.querySelector('svg')).toBeInTheDocument();
     });
 
     it('shows correct icon color for custom feedback', () => {
-      const { container } = render(
-        <FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />
-      );
+      const { container } = render(<FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />);
       // Icon should be present with primary color
       expect(container.querySelector('svg')).toBeInTheDocument();
     });
 
     it('shows correct icon color for disabled feedback', () => {
-      const { container } = render(
-        <FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />
-      );
+      const { container } = render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
       // Icon should be present with disabled color
       expect(container.querySelector('svg')).toBeInTheDocument();
     });
@@ -137,25 +131,19 @@ describe('feedback-menu', () => {
 
   describe('aria labels', () => {
     it('has aria-label on button for default feedback', () => {
-      render(
-        <FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />
-      );
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
       const button = screen.getByRole('button', { name: /Default Feedback/i });
       expect(button).toBeInTheDocument();
     });
 
     it('has aria-label on button for custom feedback', () => {
-      render(
-        <FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />
-      );
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />);
       const button = screen.getByRole('button', { name: /Custom Feedback/i });
       expect(button).toBeInTheDocument();
     });
 
     it('has aria-label on button for disabled feedback', () => {
-      render(
-        <FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />
-      );
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
       const button = screen.getByRole('button', { name: /Feedback disabled/i });
       expect(button).toBeInTheDocument();
     });

package/src/choice-configuration/feedback-menu.jsx

@@ -40,7 +40,13 @@ export class IconMenu extends React.Component {
     return (
       <div>
         <div onClick={this.handleClick}>{this.props.iconButtonElement}</div>
-        <Menu id="simple-menu" anchorEl={this.state.anchorEl} open={this.state.open} onClose={this.handleRequestClose} transitionDuration={{ enter: 225, exit: 195 }}>
+        <Menu
+          id="simple-menu"
+          anchorEl={this.state.anchorEl}
+          open={this.state.open}
+          onClose={this.handleRequestClose}
+          transitionDuration={{ enter: 225, exit: 195 }}
+        >
           {keys.map((k, index) => (
             <MenuItem key={index} onClick={handleMenuClick(k)}>
               {opts[k]}

package/src/choice-utils.js

@@ -1,4 +1,4 @@
-import includes from 'lodash/includes';
+import { includes } from 'lodash-es';
 
 /**
  * Add value to every model.choices.

package/src/feedback-config/__tests__/feedback-config.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { FeedbackConfig, buildDefaults } from '../index';
+import { buildDefaults, FeedbackConfig } from '../index';
 
 // Mock FeedbackSelector to simplify testing
 jest.mock('../feedback-selector', () => {

package/src/feedback-config/index.jsx

@@ -1,13 +1,14 @@
 import FeedbackSelector, { FeedbackType } from './feedback-selector';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { merge } from 'lodash-es';
+
 import { styled } from '@mui/material/styles';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import merge from 'lodash/merge';
 
 export { FeedbackSelector };
 

package/src/index.js

@@ -1,6 +1,6 @@
 import AlertDialog from './alert-dialog';
-import FeedbackConfig, { FeedbackSelector, buildDefaults as feedbackConfigDefaults } from './feedback-config';
-import { InputCheckbox, InputSwitch, InputRadio } from './inputs';
+import FeedbackConfig, { buildDefaults as feedbackConfigDefaults, FeedbackSelector } from './feedback-config';
+import { InputCheckbox, InputRadio, InputSwitch } from './inputs';
 import Langs, { LanguageControls } from './langs';
 import Tabs from './tabs';
 import Checkbox from './checkbox';

package/src/inputs.jsx

@@ -1,11 +1,10 @@
 import Checkbox from '@mui/material/Checkbox';
 import Radio from '@mui/material/Radio';
-import { InputContainer } from '@pie-lib/render-ui';
+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';
-import { color } from '@pie-lib/render-ui';
 
 const InputTypes = {
   className: PropTypes.string,
@@ -42,13 +41,7 @@ const StyledCheckbox = styled(Checkbox)(({ theme, error }) => ({
 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}
-      />
+      <StyledCheckbox disabled={disabled} checked={checked} onChange={onChange} aria-label={label} error={error} />
     </InputContainer>
   );
 };
@@ -66,13 +59,7 @@ const StyledRadio = styled(Radio)(({ theme, error }) => ({
 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}
-      />
+      <StyledRadio disabled={disabled} checked={checked} onChange={onChange} aria-label={label} error={error} />
     </InputContainer>
   );
 };

package/src/langs.jsx

@@ -57,9 +57,7 @@ export class Langs extends React.Component {
     return (
       <StyledRoot>
         <StyledFormControl>
-          <StyledInputLabel htmlFor={this.uid}>
-            {label}
-          </StyledInputLabel>
+          <StyledInputLabel htmlFor={this.uid}>{label}</StyledInputLabel>
 
           <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>
             {langs.map((l, index) => (
@@ -82,7 +80,14 @@ const StyledLanguageControls = styled('div')(() => ({
   gridGap: '8px',
 }));
 
-export const LanguageControls = ({ langs, activeLang, defaultLang, onActiveLangChange, onDefaultLangChange, className }) => {
+export const LanguageControls = ({
+  langs,
+  activeLang,
+  defaultLang,
+  onActiveLangChange,
+  onDefaultLangChange,
+  className,
+}) => {
   return (
     <StyledLanguageControls className={className}>
       <Langs

package/src/layout/config-layout.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import Measure from 'react-measure';
-import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
-import { withContentRect } from 'react-measure';
+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';

package/src/number-text-field-custom.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
-import isFinite from 'lodash/isFinite';
+import { isFinite } from 'lodash-es';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import Remove from '@mui/icons-material/Remove';
@@ -302,7 +302,8 @@ export class NumberTextFieldCustom extends React.Component {
               <StyledIconButton
                 disabled={disabled ? disabled : disabledStart}
                 onClick={(e) => this.changeValue(e, -1, true)}
-                size="large">
+                size="large"
+              >
                 <Remove fontSize="small" />
               </StyledIconButton>
             </InputAdornment>
@@ -312,7 +313,8 @@ export class NumberTextFieldCustom extends React.Component {
               <StyledIconButton
                 disabled={disabled ? disabled : disabledEnd}
                 onClick={(e) => this.changeValue(e, 1, true)}
-                size="large">
+                size="large"
+              >
                 <Add fontSize="small" />
               </StyledIconButton>
             </InputAdornment>

package/src/number-text-field.jsx

@@ -3,8 +3,9 @@ import React from 'react';
 import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import debug from 'debug';
-import isFinite from 'lodash/isFinite';
+import { isFinite } from 'lodash-es';
 import InputAdornment from '@mui/material/InputAdornment';
+
 const log = debug('@pie-lib:config-ui:number-text-field');
 
 const StyledTextField = styled(TextField)(({ theme }) => ({
@@ -177,7 +178,7 @@ export class NumberTextField extends React.Component {
     const error = showErrorWhenOutsideRange && this.getError();
     return (
       <StyledTextField
-        variant={disableUnderline ? 'filled' : (variant || 'standard')}
+        variant={disableUnderline ? 'filled' : variant || 'standard'}
         inputRef={(ref) => {
           this.inputRef = ref;
         }}

package/src/radio-with-label.jsx

@@ -17,11 +17,7 @@ const StyledRadio = styled(Radio)(() => ({
 }));
 
 const RadioWithLabel = ({ label, value, checked, onChange }) => (
-  <StyledFormControlLabel
-    value={value}
-    control={<StyledRadio checked={checked} onChange={onChange} />}
-    label={label}
-  />
+  <StyledFormControlLabel value={value} control={<StyledRadio checked={checked} onChange={onChange} />} label={label} />
 );
 
 RadioWithLabel.propTypes = {

package/src/settings/display-size.jsx

@@ -13,7 +13,7 @@ const DisplaySize = ({ size, label, onChange }) => {
   const updateSize = (key, v) => {
     onChange({ ...size, [key]: v });
   };
-  
+
   return (
     <div>
       <Typography>{label}</Typography>

package/src/settings/index.js

@@ -23,7 +23,7 @@ const toChoice = (opt) => {
   }
 };
 
-export const radio = function() {
+export const radio = function () {
   const args = Array.prototype.slice.call(arguments);
   const [label, choices, isConfigProperty = false] = args;
 

package/src/settings/panel.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import get from 'lodash/get';
-import set from 'lodash/set';
+import { get, set } from 'lodash-es';
 import { styled } from '@mui/material/styles';
 import Select from '@mui/material/Select';
 import Input from '@mui/material/Input';
@@ -137,7 +136,7 @@ const StyledNumberTextField = styled(NumberTextField)(({ theme }) => ({
   },
 }));
 
-const NumberField = ({ label, value, onChange = () => { }, suffix, min, max }) => {
+const NumberField = ({ label, value, onChange = () => {}, suffix, min, max }) => {
   return (
     <StyledNumberTextField
       variant={'standard'}
@@ -278,8 +277,8 @@ export class Panel extends React.Component {
   };
 
   static defaultProps = {
-    onChangeModel: () => { },
-    onChangeConfiguration: () => { },
+    onChangeModel: () => {},
+    onChangeConfiguration: () => {},
   };
 
   change = (key, value, isConfigProperty = false) => {

package/src/settings/settings-radio-label.jsx

@@ -19,11 +19,7 @@ const StyledRadio = styled(Radio)(() => ({
 }));
 
 const SettingsRadioLabel = ({ label, value, checked, onChange }) => (
-  <StyledFormControlLabel
-    value={value}
-    control={<StyledRadio checked={checked} onChange={onChange} />}
-    label={label}
-  />
+  <StyledFormControlLabel value={value} control={<StyledRadio checked={checked} onChange={onChange} />} label={label} />
 );
 
 SettingsRadioLabel.propTypes = {

package/src/settings/toggle.jsx

@@ -32,11 +32,7 @@ const StyledSwitch = styled(Switch)(({ checked }) => ({
 const Toggle = ({ checked, disabled, label, toggle }) => (
   <StyledToggle>
     <StyledInputLabel>{label}</StyledInputLabel>
-    <StyledSwitch
-      checked={checked}
-      disabled={disabled}
-      onChange={(e) => toggle(e.target.checked)}
-    />
+    <StyledSwitch checked={checked} disabled={disabled} onChange={(e) => toggle(e.target.checked)} />
   </StyledToggle>
 );
 

package/src/tags-input/__tests__/index.test.jsx

@@ -1,5 +1,5 @@
 import { TagsInput } from '../index';
-import { render, screen, userEvent, pressKey, Keys } from '@pie-lib/test-utils';
+import { Keys, pressKey, render, screen, userEvent } from '@pie-lib/test-utils';
 import React from 'react';
 
 describe('TagsInput', () => {

package/src/tags-input/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import uniq from 'lodash/uniq';
+import { uniq } from 'lodash-es';
 import Chip from '@mui/material/Chip';
 import MuiBox from '../mui-box';