@pie-lib/graphing-solution-set 3.1.1-next.0 → 3.2.0-next.0

package/src/container/__tests__/middleware.test.js

@@ -0,0 +1,235 @@
+import { getLastAction, lastActionMiddleware } from '../middleware';
+
+describe('lastActionMiddleware', () => {
+  describe('middleware functionality', () => {
+    it('creates middleware function', () => {
+      const middleware = lastActionMiddleware();
+      expect(typeof middleware).toBe('function');
+    });
+
+    it('middleware returns a function', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const result = middleware(next);
+      expect(typeof result).toBe('function');
+    });
+
+    it('calls next with action', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+      const action = { type: 'TEST_ACTION' };
+
+      dispatch(action);
+      expect(next).toHaveBeenCalledWith(action);
+    });
+
+    it('returns result from next', () => {
+      const middleware = lastActionMiddleware();
+      const expectedResult = { status: 'success' };
+      const next = jest.fn(() => expectedResult);
+      const dispatch = middleware(next);
+      const action = { type: 'TEST_ACTION' };
+
+      const result = dispatch(action);
+      expect(result).toBe(expectedResult);
+    });
+
+    it('stores action before calling next', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn(() => {
+        const lastAction = getLastAction();
+        expect(lastAction).toBeDefined();
+        expect(lastAction.type).toBe('TEST_ACTION');
+      });
+      const dispatch = middleware(next);
+      const action = { type: 'TEST_ACTION' };
+
+      dispatch(action);
+      expect(next).toHaveBeenCalled();
+    });
+  });
+
+  describe('getLastAction', () => {
+    it('returns null initially', () => {
+      const lastAction = getLastAction();
+      expect(lastAction).toBeDefined();
+    });
+
+    it('returns last dispatched action', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+      const action = { type: 'MY_ACTION', payload: 'test' };
+
+      dispatch(action);
+      const lastAction = getLastAction();
+
+      expect(lastAction).toEqual(action);
+      expect(lastAction.type).toBe('MY_ACTION');
+      expect(lastAction.payload).toBe('test');
+    });
+
+    it('updates when new action is dispatched', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+
+      const action1 = { type: 'ACTION_1' };
+      dispatch(action1);
+      expect(getLastAction()).toEqual(action1);
+
+      const action2 = { type: 'ACTION_2' };
+      dispatch(action2);
+      expect(getLastAction()).toEqual(action2);
+    });
+
+    it('stores action with payload', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+      const action = {
+        type: 'CHANGE_MARKS',
+        marks: [{ id: 1, type: 'point' }],
+      };
+
+      dispatch(action);
+      const lastAction = getLastAction();
+
+      expect(lastAction.marks).toEqual(action.marks);
+      expect(lastAction.marks.length).toBe(1);
+    });
+
+    it('stores action with complex payload', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+      const action = {
+        type: 'COMPLEX_ACTION',
+        data: {
+          nested: {
+            value: 123,
+            array: [1, 2, 3],
+          },
+        },
+      };
+
+      dispatch(action);
+      const lastAction = getLastAction();
+
+      expect(lastAction.data.nested.value).toBe(123);
+      expect(lastAction.data.nested.array).toEqual([1, 2, 3]);
+    });
+  });
+
+  describe('action storage', () => {
+    it('overwrites previous action', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+
+      dispatch({ type: 'FIRST' });
+      dispatch({ type: 'SECOND' });
+      dispatch({ type: 'THIRD' });
+
+      const lastAction = getLastAction();
+      expect(lastAction.type).toBe('THIRD');
+    });
+
+    it('stores reference to action object', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+      const action = { type: 'TEST', data: { value: 1 } };
+
+      dispatch(action);
+      const lastAction = getLastAction();
+
+      // Modify original action
+      action.data.value = 2;
+
+      // Last action should reflect the change (same reference)
+      expect(lastAction.data.value).toBe(2);
+    });
+  });
+
+  describe('integration scenarios', () => {
+    it('works with multiple middleware calls', () => {
+      const middleware = lastActionMiddleware();
+      const next1 = jest.fn();
+      const next2 = jest.fn();
+
+      const dispatch1 = middleware(next1);
+      const dispatch2 = middleware(next2);
+
+      dispatch1({ type: 'ACTION_1' });
+      expect(getLastAction().type).toBe('ACTION_1');
+
+      dispatch2({ type: 'ACTION_2' });
+      expect(getLastAction().type).toBe('ACTION_2');
+    });
+
+    it('preserves action types', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+
+      const actionTypes = ['ADD_MARK', 'CHANGE_MARKS', 'DELETE_MARK', 'UPDATE_MARK'];
+
+      actionTypes.forEach((type) => {
+        dispatch({ type });
+        expect(getLastAction().type).toBe(type);
+      });
+    });
+
+    it('handles actions without type', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+      const action = { payload: 'data' };
+
+      dispatch(action);
+      const lastAction = getLastAction();
+
+      expect(lastAction).toEqual(action);
+      expect(lastAction.type).toBeUndefined();
+    });
+
+    it('handles empty action object', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn();
+      const dispatch = middleware(next);
+      const action = {};
+
+      dispatch(action);
+      const lastAction = getLastAction();
+
+      expect(lastAction).toEqual(action);
+    });
+  });
+
+  describe('error handling', () => {
+    it('stores action even if next throws error', () => {
+      const middleware = lastActionMiddleware();
+      const next = jest.fn(() => {
+        throw new Error('Next error');
+      });
+      const dispatch = middleware(next);
+      const action = { type: 'ERROR_ACTION' };
+
+      expect(() => dispatch(action)).toThrow('Next error');
+      expect(getLastAction()).toEqual(action);
+    });
+
+    it('propagates errors from next', () => {
+      const middleware = lastActionMiddleware();
+      const errorMessage = 'Test error';
+      const next = jest.fn(() => {
+        throw new Error(errorMessage);
+      });
+      const dispatch = middleware(next);
+
+      expect(() => dispatch({ type: 'TEST' })).toThrow(errorMessage);
+    });
+  });
+});

package/src/container/__tests__/reducer.test.js

@@ -0,0 +1,324 @@
+import reducer from '../reducer';
+import { changeMarks } from '../actions';
+
+describe('container reducer', () => {
+  describe('reducer creation', () => {
+    it('creates a reducer function', () => {
+      const rootReducer = reducer();
+      expect(typeof rootReducer).toBe('function');
+    });
+
+    it('returns an object with marks property', () => {
+      const rootReducer = reducer();
+      const state = rootReducer(undefined, { type: 'INIT' });
+      expect(state).toHaveProperty('marks');
+    });
+
+    it('wraps marks reducer with undoable', () => {
+      const rootReducer = reducer();
+      const state = rootReducer(undefined, { type: 'INIT' });
+
+      expect(state.marks).toHaveProperty('past');
+      expect(state.marks).toHaveProperty('present');
+      expect(state.marks).toHaveProperty('future');
+    });
+  });
+
+  describe('initial state', () => {
+    it('initializes with empty past', () => {
+      const rootReducer = reducer();
+      const state = rootReducer(undefined, { type: 'INIT' });
+
+      expect(state.marks.past).toEqual([]);
+    });
+
+    it('initializes with empty present', () => {
+      const rootReducer = reducer();
+      const state = rootReducer(undefined, { type: 'INIT' });
+
+      expect(state.marks.present).toEqual([]);
+    });
+
+    it('initializes with empty future', () => {
+      const rootReducer = reducer();
+      const state = rootReducer(undefined, { type: 'INIT' });
+
+      expect(state.marks.future).toEqual([]);
+    });
+  });
+
+  describe('CHANGE_MARKS action', () => {
+    it('updates present with new marks', () => {
+      const rootReducer = reducer();
+      const newMarks = [{ id: 1, type: 'point', x: 5, y: 10 }];
+      const action = changeMarks(newMarks);
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, action);
+
+      expect(state.marks.present).toEqual(newMarks);
+    });
+
+    it('adds previous state to past', () => {
+      const rootReducer = reducer();
+      const firstMarks = [{ id: 1, type: 'point' }];
+      const secondMarks = [{ id: 2, type: 'line' }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(firstMarks));
+      state = rootReducer(state, changeMarks(secondMarks));
+
+      expect(state.marks.past.length).toBeGreaterThan(0);
+      expect(state.marks.present).toEqual(secondMarks);
+    });
+
+    it('clears future on new action', () => {
+      const rootReducer = reducer();
+      const firstMarks = [{ id: 1, type: 'point' }];
+      const secondMarks = [{ id: 2, type: 'line' }];
+      const thirdMarks = [{ id: 3, type: 'circle' }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(firstMarks));
+      state = rootReducer(state, changeMarks(secondMarks));
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+
+      expect(state.marks.future.length).toBeGreaterThan(0);
+
+      state = rootReducer(state, changeMarks(thirdMarks));
+      expect(state.marks.future).toEqual([]);
+    });
+
+    it('handles empty marks array', () => {
+      const rootReducer = reducer();
+      const action = changeMarks([]);
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, action);
+
+      expect(state.marks.present).toEqual([]);
+    });
+
+    it('handles multiple marks', () => {
+      const rootReducer = reducer();
+      const marks = [
+        { id: 1, type: 'point', x: 1, y: 2 },
+        { id: 2, type: 'line', from: { x: 0, y: 0 }, to: { x: 5, y: 5 } },
+        { id: 3, type: 'circle', center: { x: 3, y: 3 }, radius: 2 },
+      ];
+      const action = changeMarks(marks);
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, action);
+
+      expect(state.marks.present).toEqual(marks);
+      expect(state.marks.present.length).toBe(3);
+    });
+  });
+
+  describe('undo functionality', () => {
+    it('supports undo action', () => {
+      const rootReducer = reducer();
+      const firstMarks = [{ id: 1, type: 'point' }];
+      const secondMarks = [{ id: 2, type: 'line' }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(firstMarks));
+      state = rootReducer(state, changeMarks(secondMarks));
+
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+
+      expect(state.marks.present).toEqual(firstMarks);
+    });
+
+    it('moves present to future on undo', () => {
+      const rootReducer = reducer();
+      const firstMarks = [{ id: 1, type: 'point' }];
+      const secondMarks = [{ id: 2, type: 'line' }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(firstMarks));
+      state = rootReducer(state, changeMarks(secondMarks));
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+
+      expect(state.marks.future.length).toBeGreaterThan(0);
+    });
+
+    it('handles multiple undos', () => {
+      const rootReducer = reducer();
+      const marks1 = [{ id: 1 }];
+      const marks2 = [{ id: 2 }];
+      const marks3 = [{ id: 3 }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(marks1));
+      state = rootReducer(state, changeMarks(marks2));
+      state = rootReducer(state, changeMarks(marks3));
+
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+
+      expect(state.marks.present).toEqual(marks1);
+    });
+
+    it('does not undo beyond initial state', () => {
+      const rootReducer = reducer();
+      const marks = [{ id: 1, type: 'point' }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(marks));
+
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+
+      expect(state.marks.present).toEqual([]);
+      expect(state.marks.past).toEqual([]);
+    });
+  });
+
+  describe('redo functionality', () => {
+    it('supports redo action', () => {
+      const rootReducer = reducer();
+      const firstMarks = [{ id: 1, type: 'point' }];
+      const secondMarks = [{ id: 2, type: 'line' }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(firstMarks));
+      state = rootReducer(state, changeMarks(secondMarks));
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+
+      // Redo
+      state = rootReducer(state, { type: '@@redux-undo/REDO' });
+
+      expect(state.marks.present).toEqual(secondMarks);
+    });
+
+    it('moves future to past on redo', () => {
+      const rootReducer = reducer();
+      const firstMarks = [{ id: 1, type: 'point' }];
+      const secondMarks = [{ id: 2, type: 'line' }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(firstMarks));
+      state = rootReducer(state, changeMarks(secondMarks));
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+
+      const futureBeforeRedo = state.marks.future.length;
+      state = rootReducer(state, { type: '@@redux-undo/REDO' });
+
+      expect(state.marks.future.length).toBe(futureBeforeRedo - 1);
+    });
+
+    it('handles multiple redos', () => {
+      const rootReducer = reducer();
+      const marks1 = [{ id: 1 }];
+      const marks2 = [{ id: 2 }];
+      const marks3 = [{ id: 3 }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(marks1));
+      state = rootReducer(state, changeMarks(marks2));
+      state = rootReducer(state, changeMarks(marks3));
+
+      // undo twice, then redo twice
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+      state = rootReducer(state, { type: '@@redux-undo/REDO' });
+      state = rootReducer(state, { type: '@@redux-undo/REDO' });
+
+      expect(state.marks.present).toEqual(marks3);
+    });
+
+    it('does not redo beyond last state', () => {
+      const rootReducer = reducer();
+      const marks = [{ id: 1, type: 'point' }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(marks));
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+      state = rootReducer(state, { type: '@@redux-undo/REDO' });
+
+      // try to redo beyond the end
+      state = rootReducer(state, { type: '@@redux-undo/REDO' });
+      state = rootReducer(state, { type: '@@redux-undo/REDO' });
+
+      expect(state.marks.present).toEqual(marks);
+      expect(state.marks.future).toEqual([]);
+    });
+  });
+
+  describe('state structure', () => {
+    it('maintains correct undoable structure', () => {
+      const rootReducer = reducer();
+      const state = rootReducer(undefined, { type: 'INIT' });
+
+      expect(state.marks).toHaveProperty('past');
+      expect(state.marks).toHaveProperty('present');
+      expect(state.marks).toHaveProperty('future');
+      expect(Array.isArray(state.marks.past)).toBe(true);
+      expect(Array.isArray(state.marks.future)).toBe(true);
+    });
+
+    it('preserves mark properties through undo/redo', () => {
+      const rootReducer = reducer();
+      const marks = [
+        {
+          id: 1,
+          type: 'point',
+          x: 10,
+          y: 20,
+          label: 'A',
+          correctness: { value: 'correct' },
+        },
+      ];
+
+      let state = rootReducer(undefined, { type: 'INIT' });
+      state = rootReducer(state, changeMarks(marks));
+      state = rootReducer(state, changeMarks([]));
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+
+      expect(state.marks.present).toEqual(marks);
+      expect(state.marks.present[0]).toBeDefined();
+      if (state.marks.present[0]) {
+        expect(state.marks.present[0]).toEqual(marks[0]);
+        expect(state.marks.present[0].correctness).toBeDefined();
+      }
+    });
+  });
+
+  describe('integration', () => {
+    it('handles complex undo/redo sequences', () => {
+      const rootReducer = reducer();
+      const marks1 = [{ id: 1 }];
+      const marks2 = [{ id: 2 }];
+      const marks3 = [{ id: 3 }];
+      const marks4 = [{ id: 4 }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks(marks1));
+      state = rootReducer(state, changeMarks(marks2));
+      state = rootReducer(state, changeMarks(marks3));
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' }); // back to marks2
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' }); // back to marks1
+      state = rootReducer(state, { type: '@@redux-undo/REDO' }); // forward to marks2
+      state = rootReducer(state, changeMarks(marks4));
+
+      expect(state.marks.present).toEqual(marks4);
+      expect(state.marks.future).toEqual([]);
+    });
+
+    it('works with empty state transitions', () => {
+      const rootReducer = reducer();
+      const marks = [{ id: 1 }];
+
+      let state = rootReducer(undefined, { type: '@@INIT' });
+      state = rootReducer(state, changeMarks([]));
+      state = rootReducer(state, changeMarks(marks));
+      state = rootReducer(state, changeMarks([]));
+      state = rootReducer(state, { type: '@@redux-undo/UNDO' });
+
+      expect(state.marks.present).toEqual(marks);
+    });
+  });
+});

package/src/container/index.jsx

@@ -1,14 +1,13 @@
-import { connect } from 'react-redux';
+import { connect, Provider } from 'react-redux';
 import React from 'react';
-import { Provider } from 'react-redux';
 import { applyMiddleware, createStore } from 'redux';
 import reducer from './reducer';
 import { changeMarks } from './actions';
 import PropTypes from 'prop-types';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash-es';
 import { ActionCreators } from 'redux-undo';
 import GraphWithControls from '../graph-with-controls';
-import { lastActionMiddleware, getLastAction } from './middleware';
+import { getLastAction, lastActionMiddleware } from './middleware';
 
 const mapStateToProps = (s) => ({
   marks: s.marks.present,

package/src/coordinates-label.jsx

@@ -50,13 +50,7 @@ export const CoordinatesLabel = ({ x, y, graphProps }) => {
     ...labelPosition,
   };
 
-  return (
-    <StyledInputBase
-      style={style}
-      value={label}
-      inputProps={{ ariaLabel: 'naked' }}
-    />
-  );
+  return <StyledInputBase style={style} value={label} inputProps={{ ariaLabel: 'naked' }} />;
 };
 
 CoordinatesLabel.propTypes = {

package/src/graph-with-controls.jsx

@@ -2,19 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
-import uniq from 'lodash/uniq';
-import isString from 'lodash/isString';
+import { isString, uniq } from 'lodash-es';
 import { color } from '@pie-lib/render-ui';
 import ToolMenu from './tool-menu';
 import Graph, { graphPropTypes } from './graph';
 import UndoRedo from './undo-redo';
 import { allTools, toolsArr } from './tools';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Typography,
-} from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export const setToolbarAvailability = (toolbarTools) =>
@@ -34,8 +28,7 @@ export const filterByValidToolTypes = (backgroundMarks) =>
 export const filterByVisibleToolTypes = (toolbarTools, marks) =>
   marks.filter((bM) => !!toolbarTools.find((tool) => tool === bM.type));
 
-const getDefaultCurrentTool = (toolType) =>
-  toolsArr.find((tool) => tool.type === toolType) || null;
+const getDefaultCurrentTool = (toolType) => toolsArr.find((tool) => tool.type === toolType) || null;
 
 const GraphWithControlsRoot = styled('div')(() => ({
   display: 'flex',
@@ -133,11 +126,9 @@ export class GraphWithControls extends React.Component {
     }
   }
 
-  changeCurrentTool = (tool, tools) =>
-    this.setState({ currentTool: tools.find((t) => t.type === tool) });
+  changeCurrentTool = (tool, tools) => this.setState({ currentTool: tools.find((t) => t.type === tool) });
 
-  toggleLabelMode = () =>
-    this.setState((state) => ({ labelModeEnabled: !state.labelModeEnabled }));
+  toggleLabelMode = () => this.setState((state) => ({ labelModeEnabled: !state.labelModeEnabled }));
 
   render() {
     let { currentTool, labelModeEnabled } = this.state;
@@ -200,12 +191,7 @@ export class GraphWithControls extends React.Component {
         />
         {!disabled && (
           <UndoRedoOuterDiv>
-            <UndoRedo
-              onUndo={onUndo}
-              onRedo={onRedo}
-              onReset={onCustomReset}
-              language={language}
-            />
+            <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onCustomReset} language={language} />
           </UndoRedoOuterDiv>
         )}
       </>
@@ -215,11 +201,7 @@ export class GraphWithControls extends React.Component {
       <GraphWithControlsRoot className={classNames(className)}>
         {!disableToolbar && (
           <Controls>
-            {collapsibleToolbar ? (
-              <Collapsible title={collapsibleToolbarTitle}>{gssActions}</Collapsible>
-            ) : (
-              gssActions
-            )}
+            {collapsibleToolbar ? <Collapsible title={collapsibleToolbarTitle}>{gssActions}</Collapsible> : gssActions}
           </Controls>
         )}
 

package/src/graph.jsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import isEqual from 'lodash/isEqual';
-import cloneDeep from 'lodash/cloneDeep';
-import { Root, types, createGraphProps } from '@pie-lib/plot';
+import { cloneDeep, isEqual } from 'lodash-es';
+import { createGraphProps, Root, types } from '@pie-lib/plot';
 import debug from 'debug';
 
 import { Axes, AxisPropTypes } from './axis';
 import Grid from './grid';
 import { LabelType } from './labels';
 import Bg from './bg';
-import { isDuplicatedMark, areArraysOfObjectsEqual } from './utils';
+import { areArraysOfObjectsEqual, isDuplicatedMark } from './utils';
 
 const log = debug('pie-lib:graphing-solution-set:graph');
 

package/src/grid-setup.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { color, InputContainer } from '@pie-lib/render-ui';
-import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';
 import EditableHTML from '@pie-lib/editable-html-tip-tap';