dynamic-mui 1.0.39 → 1.0.40

package/craco.config.js

@@ -0,0 +1,36 @@
+/// /////////////////////////////////////////////////////////////////////////
+//
+// Copyright 2023 Realm Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+/// /////////////////////////////////////////////////////////////////////////
+
+const config = {
+  webpack: {
+    configure(nconfig) {
+      const experiments = {
+        ...nconfig.experiments,
+        topLevelAwait: true,
+      };
+
+      return {
+        ...nconfig,
+        experiments,
+      };
+    },
+    alias: {},
+  },
+};
+
+export default config;

package/dist-modules/components/FormGenerator.js

@@ -43,6 +43,7 @@ function FormGenerator(_ref) {
     formRef,
     onSubmit,
     onChange,
+    onStepChange,
     MuiGridAttributes = {
       spacing: 2
     }
@@ -78,6 +79,11 @@ function FormGenerator(_ref) {
       submitCallback(response, null, formData, formGuid);
     }
   }, []);
+  const onStepUpdate = (activeStep, isScreenChange, isLastStep) => {
+    if (typeof onStepChange === 'function') {
+      onStepChange(activeStep, isScreenChange, isLastStep);
+    }
+  };
   const renderDynamicComponent = (field, index) => {
     const {
       type = '',
@@ -105,7 +111,8 @@ function FormGenerator(_ref) {
       control: field,
       attributes: cProps,
       rules: rules,
-      onChange: onUpdate
+      onChange: onUpdate,
+      onStepUpdate: onStepUpdate
     }));
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, _extends({
@@ -140,6 +147,8 @@ FormGenerator.propTypes = process.env.NODE_ENV !== "production" ? {
   onSubmit: _propTypes.default.func,
   /** Component On Change Function */
   onChange: _propTypes.default.func,
+  /** Component On Change Function */
+  onStepChange: _propTypes.default.func,
   /** Grid Container Attributes */
   MuiGridAttributes: _propTypes.default.objectOf(_propTypes.default.object)
 } : {};
@@ -148,6 +157,7 @@ FormGenerator.defaultProps = {
   formRef: {},
   onSubmit: null,
   onChange: null,
+  onStepChange: null,
   MuiGridAttributes: {
     spacing: 2
   }

package/dist-modules/components/charts/Bar/bar.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Bar;
+var React = _interopRequireWildcard(require("react"));
+var _BarChart = require("@mui/x-charts/BarChart");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // eslint-disable-next-line import/no-extraneous-dependencies
+function Bar(_ref) {
+  let {
+    attributes
+  } = _ref;
+  const {
+    MuiChartAttributes = {},
+    id = ''
+  } = attributes;
+  return /*#__PURE__*/React.createElement(_BarChart.BarChart, _extends({
+    key: id
+  }, MuiChartAttributes));
+}
+Bar.propTypes = process.env.NODE_ENV !== "production" ? {
+  /** Attributes for Pie */
+  attributes: _propTypes.default.objectOf(_propTypes.default.object)
+} : {};
+Bar.defaultProps = {
+  attributes: {}
+};

package/dist-modules/components/charts/Line/line.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Line;
+var React = _interopRequireWildcard(require("react"));
+var _LineChart = require("@mui/x-charts/LineChart");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // eslint-disable-next-line import/no-extraneous-dependencies
+function Line(_ref) {
+  let {
+    attributes
+  } = _ref;
+  const {
+    MuiChartAttributes = {},
+    id = ''
+  } = attributes;
+  return /*#__PURE__*/React.createElement(_LineChart.LineChart, _extends({
+    key: id
+  }, MuiChartAttributes));
+}
+Line.propTypes = process.env.NODE_ENV !== "production" ? {
+  /** Attributes for Pie */
+  attributes: _propTypes.default.objectOf(_propTypes.default.object)
+} : {};
+Line.defaultProps = {
+  attributes: {}
+};

package/dist-modules/components/charts/Mixchart/mixChart.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MixChart;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _ResponsiveChartContainer = require("@mui/x-charts/ResponsiveChartContainer");
+var _LineChart = require("@mui/x-charts/LineChart");
+var _BarChart = require("@mui/x-charts/BarChart");
+var _ChartsXAxis = require("@mui/x-charts/ChartsXAxis");
+var _ChartsYAxis = require("@mui/x-charts/ChartsYAxis");
+var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* eslint-disable import/no-extraneous-dependencies */
+function MixChart(_ref) {
+  let {
+    attributes
+  } = _ref;
+  const {
+    id,
+    MuiBoxAttributes = {},
+    MuiChartContainerAttributes = {},
+    MuiChartXAxisAttributes = {},
+    MuiChartYAxisAttributes = {},
+    MuiChartSX = {}
+  } = attributes;
+  return /*#__PURE__*/React.createElement(_Box.default, _extends({
+    sx: {
+      width: '100%',
+      maxWidth: 600
+    },
+    key: id
+  }, MuiBoxAttributes), /*#__PURE__*/React.createElement(_ResponsiveChartContainer.ResponsiveChartContainer, _extends({
+    sx: {
+      [".".concat(_ChartsAxis.axisClasses.left, " .").concat(_ChartsAxis.axisClasses.label)]: {
+        transform: 'translate(-25px, 0)'
+      },
+      [".".concat(_ChartsAxis.axisClasses.right, " .").concat(_ChartsAxis.axisClasses.label)]: {
+        transform: 'translate(30px, 0)'
+      },
+      ...MuiChartSX
+    }
+  }, MuiChartContainerAttributes), /*#__PURE__*/React.createElement(_BarChart.BarPlot, null), /*#__PURE__*/React.createElement(_LineChart.LinePlot, null), /*#__PURE__*/React.createElement(_ChartsXAxis.ChartsXAxis, MuiChartXAxisAttributes), /*#__PURE__*/React.createElement(_ChartsYAxis.ChartsYAxis, MuiChartYAxisAttributes)));
+}
+MixChart.propTypes = process.env.NODE_ENV !== "production" ? {
+  /** Attributes for MixChart */
+  attributes: _propTypes.default.objectOf(_propTypes.default.object)
+} : {};
+MixChart.defaultProps = {
+  attributes: {}
+};

package/dist-modules/components/charts/Pie/pie.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Pie;
+var React = _interopRequireWildcard(require("react"));
+var _PieChart = require("@mui/x-charts/PieChart");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // eslint-disable-next-line import/no-extraneous-dependencies
+function Pie(_ref) {
+  let {
+    attributes
+  } = _ref;
+  const {
+    MuiChartAttributes = {},
+    id = ''
+  } = attributes;
+  return /*#__PURE__*/React.createElement(_PieChart.PieChart, _extends({
+    key: id
+  }, MuiChartAttributes));
+}
+Pie.propTypes = process.env.NODE_ENV !== "production" ? {
+  /** Attributes for Pie */
+  attributes: _propTypes.default.objectOf(_propTypes.default.object)
+} : {};
+Pie.defaultProps = {
+  attributes: {}
+};

package/dist-modules/components/controls/CheckBox/checkbox.js

@@ -1,80 +1,56 @@
-Object.defineProperty(exports, '__esModule', {
-  value: true,
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 exports.default = CheckBox;
-const _react = _interopRequireDefault(require('react'));
-const _propTypes = _interopRequireDefault(require('prop-types'));
-const _Checkbox = _interopRequireDefault(require('@mui/material/Checkbox'));
-const _FormControlLabel = _interopRequireDefault(require('@mui/material/FormControlLabel'));
-const _useUpdateEffect = _interopRequireDefault(require('../../../util/useUpdateEffect'));
-
-function _interopRequireDefault(obj) {
-  return obj && obj.__esModule ? obj : { default: obj };
-}
-function _extends() {
-  _extends = Object.assign
-    ? Object.assign.bind()
-    : function (target) {
-        for (let i = 1; i < arguments.length; i++) {
-          const source = arguments[i];
-          for (const key in source) {
-            if (Object.prototype.hasOwnProperty.call(source, key)) {
-              target[key] = source[key];
-            }
-          }
-        }
-        return target;
-      };
-  return _extends.apply(this, arguments);
-}
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _useUpdateEffect = _interopRequireDefault(require("../../../util/useUpdateEffect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /** Playground Component */
 function CheckBox(_ref) {
-  const { attributes, onChange } = _ref;
-  const { MuiAttributes = {}, MuiFCLAttributes = {}, id = '' } = attributes;
-  const [checked, setChecked] = _react.default.useState(
-    MuiAttributes.defaultChecked || attributes.value || false,
-  );
+  let {
+    attributes,
+    onChange
+  } = _ref;
+  const {
+    MuiAttributes = {},
+    MuiFCLAttributes = {},
+    id = ''
+  } = attributes;
+  const [checked, setChecked] = _react.default.useState(MuiAttributes.defaultChecked || attributes.value || false);
   (0, _useUpdateEffect.default)(() => {
     setChecked(attributes.value);
   }, [attributes.value]);
-  const handleChange = (event) => {
+  const handleChange = event => {
     setChecked(event.target.checked);
     onChange({
       id,
-      value: event.target.checked,
+      value: event.target.checked
     });
   };
-  return /* #__PURE__ */ _react.default.createElement(
-    _FormControlLabel.default,
-    _extends({}, MuiFCLAttributes, {
-      control: /* #__PURE__ */ _react.default.createElement(
-        _Checkbox.default,
-        _extends(
-          {
-            checked,
-            onChange: handleChange,
-          },
-          MuiAttributes,
-          {
-            inputProps: {
-              'aria-label': 'controlled',
-            },
-          },
-        ),
-      ),
-    }),
-  );
-}
-CheckBox.propTypes =
-  process.env.NODE_ENV !== 'production'
-    ? {
-        /** Attributes for Checkbox */
-        attributes: _propTypes.default.objectOf(_propTypes.default.object),
-        /** Function */
-        onChange: _propTypes.default.func,
+  return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, _extends({}, MuiFCLAttributes, {
+    control: /*#__PURE__*/_react.default.createElement(_Checkbox.default, _extends({
+      checked: checked,
+      onChange: handleChange
+    }, MuiAttributes, {
+      inputProps: {
+        'aria-label': 'controlled'
       }
-    : {};
+    }))
+  }));
+}
+CheckBox.propTypes = process.env.NODE_ENV !== "production" ? {
+  /** Attributes for Checkbox */
+  attributes: _propTypes.default.objectOf(_propTypes.default.object),
+  /** Function */
+  onChange: _propTypes.default.func
+} : {};
 CheckBox.defaultProps = {
   attributes: {},
-  onChange: null,
-};
+  onChange: null
+};

package/dist-modules/components/controls/Stepper/stepper.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Stepper;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Stepper = _interopRequireDefault(require("@mui/material/Stepper"));
+var _Step = _interopRequireDefault(require("@mui/material/Step"));
+var _StepLabel = _interopRequireDefault(require("@mui/material/StepLabel"));
+var _StepContent = _interopRequireDefault(require("@mui/material/StepContent"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _stepperComponents = _interopRequireDefault(require("../../../util/stepperComponents"));
+var _helper = require("../../../util/helper");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // eslint-disable-next-line import/no-cycle
+const initialState = {
+  activeStep: 0,
+  stepperResponse: {}
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case 'NEXT_STEP':
+      return {
+        ...state,
+        activeStep: state.activeStep + 1
+      };
+    case 'PREVIOUS_STEP':
+      return {
+        ...state,
+        activeStep: state.activeStep - 1
+      };
+    case 'UPDATE_RESPONSE':
+      {
+        return {
+          ...state,
+          stepperResponse: {
+            ...state.stepperResponse,
+            [action.guid]: {
+              ...state.stepperResponse[action.guid],
+              [action.id]: action.value
+            }
+          }
+        };
+      }
+    default:
+      return state;
+  }
+}
+function Stepper(_ref) {
+  let {
+    attributes,
+    onChange,
+    onStepUpdate
+  } = _ref;
+  const [state, dispatch] = (0, _react.useReducer)(reducer, {
+    ...initialState,
+    stepperResponse: {
+      [attributes.id]: attributes.value
+    }
+  });
+  const {
+    activeStep,
+    stepperResponse
+  } = state;
+  const handleStepChange = (stepChange, isScreenChange, isLastStep) => {
+    dispatch({
+      type: stepChange
+    });
+    onStepUpdate === null || onStepUpdate === void 0 || onStepUpdate(activeStep + (stepChange === 'NEXT_STEP' ? 1 : -1), isScreenChange, isLastStep);
+    if (isLastStep) {
+      onChange === null || onChange === void 0 || onChange({
+        id: attributes.id,
+        value: stepperResponse
+      });
+    }
+  };
+  const handleUpdate = (0, _react.useCallback)(_ref2 => {
+    let {
+      id,
+      value
+    } = _ref2;
+    dispatch({
+      type: 'UPDATE_RESPONSE',
+      guid: attributes.id,
+      id,
+      value
+    });
+    onChange === null || onChange === void 0 || onChange({
+      id,
+      value
+    });
+  }, [onChange]);
+  const renderStepButtons = (index, isScreenChange) => /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      mb: 2
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+    variant: "contained",
+    onClick: () => handleStepChange('NEXT_STEP', isScreenChange, index === attributes.MuiSteps.length - 1),
+    sx: {
+      mt: 1,
+      mr: 1
+    }
+  }, attributes.MuiButtonAttributes.back), index === attributes.MuiSteps.length - 1 ? attributes.MuiButtonAttributes.finalLabel || 'Finish' : attributes.MuiButtonAttributes.nextLabel || 'Continue'), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+    disabled: index === 0,
+    onClick: () => handleStepChange('PREVIOUS_STEP', isScreenChange, false),
+    sx: {
+      mt: 1,
+      mr: 1
+    }
+  }, attributes.MuiButtonAttributes.back), attributes.MuiButtonAttributes.backLabel || 'Back'));
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    sx: {
+      maxWidth: 400
+    }
+  }, attributes.MuiBoxAttributes), /*#__PURE__*/_react.default.createElement(_Stepper.default, _extends({
+    activeStep: activeStep,
+    orientation: "vertical"
+  }, attributes.MuiStepperAttributes), attributes.MuiSteps.map((step, index) => /*#__PURE__*/_react.default.createElement(_Step.default, _extends({
+    key: step.label
+  }, attributes.MuiStepAttributes), /*#__PURE__*/_react.default.createElement(_StepLabel.default, _extends({
+    optional: index === attributes.MuiSteps.length - 1 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      variant: "caption"
+    }, attributes.MuiStepLabelOptionalLabel || 'Last step')
+  }, attributes.MuiStepLabelAttributes), step.label), /*#__PURE__*/_react.default.createElement(_StepContent.default, attributes.MuiStepContentAttributes, step.components ? /*#__PURE__*/_react.default.createElement(_stepperComponents.default, {
+    onUpdate: handleUpdate,
+    components: (0, _helper.updatePatchData)(step.components, stepperResponse[attributes.id], attributes.id, stepperResponse)
+  }) : /*#__PURE__*/_react.default.createElement(_Typography.default, null, step.description), renderStepButtons(index, step.isScreenChange))))));
+}
+Stepper.propTypes = process.env.NODE_ENV !== "production" ? {
+  /** Attributes for Stepper */
+  attributes: _propTypes.default.objectOf(_propTypes.default.object),
+  /** Function */
+  onChange: _propTypes.default.func,
+  /** Function */
+  onStepUpdate: _propTypes.default.func
+} : {};
+Stepper.defaultProps = {
+  attributes: {},
+  onChange: null,
+  onStepUpdate: null
+};

package/dist-modules/components/controls/index.js

@@ -14,7 +14,14 @@ var _select = _interopRequireDefault(require("./Select/select"));
 var _checkbox = _interopRequireDefault(require("./CheckBox/checkbox"));
 var _switch = _interopRequireDefault(require("./Switch/switch"));
 var _radio = _interopRequireDefault(require("./Radio/radio"));
+var _stepper = _interopRequireDefault(require("./Stepper/stepper"));
+var _bar = _interopRequireDefault(require("../charts/Bar/bar"));
+var _line = _interopRequireDefault(require("../charts/Line/line"));
+var _pie = _interopRequireDefault(require("../charts/Pie/pie"));
+var _mixChart = _interopRequireDefault(require("../charts/Mixchart/mixChart"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// eslint-disable-next-line import/no-cycle
+
 const Controls = {
   Typography: _typography.default,
   TextField: _textfield.default,
@@ -25,6 +32,11 @@ const Controls = {
   Select: _select.default,
   CheckBox: _checkbox.default,
   Switch: _switch.default,
-  Radio: _radio.default
+  Radio: _radio.default,
+  Stepper: _stepper.default,
+  Bar: _bar.default,
+  Line: _line.default,
+  Pie: _pie.default,
+  MixChart: _mixChart.default
 };
 var _default = exports.default = Controls;

package/dist-modules/config/mui.js

@@ -48,6 +48,26 @@ const mui = {
   radio: {
     type: 'Radio',
     map: 'Radio'
+  },
+  stepper: {
+    type: 'Stepper',
+    map: 'Stepper'
+  },
+  bar: {
+    type: 'Bar',
+    map: 'Bar'
+  },
+  line: {
+    type: 'Line',
+    map: 'Line'
+  },
+  pie: {
+    type: 'Pie',
+    map: 'Pie'
+  },
+  mixchart: {
+    type: 'MixChart',
+    map: 'MixChart'
   }
 };
 var _default = exports.default = mui;

package/dist-modules/data/stepper.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mui = exports.customMui = void 0;
+const mui = exports.mui = [{
+  type: 'stepper',
+  props: {
+    id: 'stepper',
+    MuiBoxAttributes: {},
+    MuiStepLabelOptionalLabel: 'Last Step',
+    MuiStepperAttributes: {},
+    orientation: 'horizontal',
+    MuiSteps: [{
+      label: 'Select Service Request',
+      components: [{
+        type: 'select',
+        props: {
+          id: 'servicetype',
+          MuiAttributes: {
+            required: true
+          },
+          options: [{
+            value: 'New Installation',
+            label: 'New Installation'
+          }, {
+            value: 'Change Classification',
+            label: 'Change Classification'
+          }, {
+            value: 'Change Meter',
+            label: 'Change Meter'
+          }, {
+            value: 'Change Name',
+            label: 'Change Name'
+          }, {
+            value: 'Transfer Location',
+            label: 'Transfer Location'
+          }, {
+            value: 'Recheck Read',
+            label: 'Recheck Read'
+          }, {
+            value: 'Disconnection - Voluntary',
+            label: 'Disconnection - Voluntary'
+          }],
+          MuiBoxAttributes: {}
+        }
+      }]
+    }, {
+      label: 'Assign Priority',
+      isScreenChange: true,
+      components: [{
+        type: 'select',
+        props: {
+          id: 'priority',
+          MuiAttributes: {
+            required: true
+          },
+          options: [{
+            value: 'Emergency',
+            label: 'Emergency'
+          }, {
+            value: 'High',
+            label: 'High'
+          }, {
+            value: 'Medium',
+            label: 'Medium'
+          }, {
+            value: 'Low',
+            label: 'Low'
+          }],
+          MuiBoxAttributes: {}
+        }
+      }]
+    }, {
+      label: 'Choose Schedule In Calendar',
+      components: [{
+        id: 'start',
+        type: 'datetime',
+        props: {
+          id: 'start',
+          MuiAttributes: {
+            label: 'Start',
+            fullWidth: true,
+            disabled: true,
+            sx: {
+              width: '100%'
+            }
+          }
+        }
+      }, {
+        id: 'end',
+        type: 'datetime',
+        props: {
+          id: 'end',
+          MuiAttributes: {
+            label: 'End',
+            fullWidth: true,
+            disabled: true,
+            sx: {
+              width: '100%',
+              mt: 1.5
+            }
+          }
+        }
+      }]
+    }, {
+      label: 'Assign User',
+      components: [{
+        type: 'select',
+        props: {
+          id: 'assigntouser',
+          MuiAttributes: {},
+          options: [{
+            value: 'Dinakaran',
+            label: 'Dinakaran'
+          }, {
+            value: 'Thiyagarajan',
+            label: 'Thiyagarajan'
+          }],
+          MuiBoxAttributes: {}
+        }
+      }]
+    }, {
+      label: 'Determine Cost',
+      components: [{
+        id: 'determinecost',
+        type: 'radio',
+        props: {
+          id: 'determinecost',
+          value: 'Skip',
+          MuiAttributes: {},
+          MuiFLabelIcon: {},
+          MuiFLabel: '',
+          MuiFCLAttributes: {},
+          MuiFCLabels: ['Skip', 'Assign'],
+          MuiRGAttributes: {
+            row: true
+          }
+        }
+      }, {
+        id: 'cost',
+        type: 'textfield',
+        props: {
+          id: 'cost',
+          MuiAttributes: {}
+        }
+      }]
+    }, {
+      label: 'Description',
+      components: [{
+        id: 'description',
+        type: 'textfield',
+        props: {
+          id: 'description',
+          MuiAttributes: {
+            multiline: true,
+            rows: 3
+          }
+        }
+      }]
+    }, {
+      label: 'Review'
+    }],
+    MuiStepAttributes: {},
+    MuiStepLabelAttributes: {},
+    MuiStepContentAttributes: {},
+    MuiButtonAttributes: {
+      back: {},
+      next: {},
+      final: {},
+      backLabel: '',
+      nextLabel: '',
+      finalLabel: ''
+    }
+  },
+  layout: {
+    row: 1,
+    xs: 12,
+    sm: 12
+  }
+}];
+const customMui = exports.customMui = [{
+  type: 'stepper',
+  props: {
+    MuiAttributes: {}
+  },
+  layout: {
+    row: 1,
+    xs: 12,
+    sm: 12
+  }
+}];

package/dist-modules/util/stepperComponents.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StepperComponents;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var Controls = _interopRequireWildcard(require("../components/controls"));
+var _mui = _interopRequireDefault(require("../config/mui"));
+var _helper = require("./helper");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// eslint-disable-next-line import/no-cycle
+
+function StepperComponents(_ref) {
+  let {
+    components,
+    onUpdate
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, [...components].map((component, index) => {
+    const CustomComponent = Controls.default[_mui.default[component.type].map];
+    return /*#__PURE__*/_react.default.createElement(CustomComponent, {
+      key: (0, _helper.generateKey)('dynamic-stepper-comp', index),
+      attributes: component.props,
+      onChange: onUpdate
+    });
+  }));
+}
+StepperComponents.propTypes = process.env.NODE_ENV !== "production" ? {
+  /** Attributes for StepperComponent */
+  components: _propTypes.default.arrayOf(_propTypes.default.object),
+  /** Function */
+  onUpdate: _propTypes.default.func
+} : {};
+StepperComponents.defaultProps = {
+  components: [],
+  // rules: {},
+  onUpdate: null
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-mui",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "author": "Dinakaran S",
   "user": "dinakarans",
   "repository": {
@@ -19,8 +19,9 @@
     "@babel/plugin-transform-modules-commonjs": "^7.23.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.0",
-    "@mui/material": "^5.15.0",
+    "@mui/icons-material": "^5.15.1",
+    "@mui/material": "^5.15.1",
+    "@mui/x-charts": "^6.18.3",
     "@mui/x-data-grid": "^6.18.5",
     "@mui/x-date-pickers": "^6.18.5",
     "@testing-library/jest-dom": "^6.1.5",
@@ -36,15 +37,15 @@
     "react-dom": "^18.2.0",
     "react-json-tree": "^0.18.0",
     "react-number-format": "^5.3.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "validator": "^13.11.0",
     "web-vitals": "^3.5.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject",
     "styleguide": "styleguidist server",
     "styleguide:build": "rimraf docs && styleguidist build && mkdir docs && mv styleguide/* docs",
     "lint": "eslint .",
@@ -73,17 +74,19 @@
   "devDependencies": {
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.23.6",
+    "@craco/craco": "^7.1.0",
     "eslint": "8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^3.1.1",
-    "react-styleguidist": "^11.2.0",
+    "react-styleguidist": "^13.1.1",
     "tinycolor2": "^1.6.0"
   }
 }

package/styleguide.config.js

@@ -1,10 +1,29 @@
-const path = require('path');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const webpack = require('webpack');
 const { version } = require('./package.json');
 
 module.exports = {
   version,
   title: 'Dynamic MUI',
-  // Check for updates in the template structure for v13
+  dangerouslyUpdateWebpackConfig(config) {
+    config.module.rules.push({
+      test: /.\.md$/,
+      type: 'javascript/auto',
+    });
+    config.plugins.push(
+      new webpack.NormalModuleReplacementPlugin(
+        /react-styleguidist\/lib\/loaders\/utils\/client\/requireInRuntime$/,
+        'react-styleguidist/lib/loaders/utils/client/requireInRuntime',
+      ),
+    );
+    config.plugins.push(
+      new webpack.NormalModuleReplacementPlugin(
+        /react-styleguidist\/lib\/loaders\/utils\/client\/evalInContext$/,
+        'react-styleguidist/lib/loaders/utils/client/evalInContext',
+      ),
+    );
+    return config;
+  },
   template: {
     favicon: 'https://geoviewer.io/img/favicon.ico',
     head: {
@@ -21,7 +40,6 @@ module.exports = {
     },
   },
   theme: {
-    // Update the theme configuration according to the new theme structure in v13
     color: {
       codeBackground: '#272C34',
       codeString: '#a6e22e',
@@ -53,11 +71,9 @@ module.exports = {
     },
   },
   styles: {
-    // Ensure that custom styles are still compatible with v13
     Logo: {
       logo: {
         color: 'white',
-        // animation: '$blink ease-in-out 300ms infinite',
       },
       '@keyframes blink': {
         to: { opacity: 0 },
@@ -65,7 +81,6 @@ module.exports = {
     },
   },
   pagePerSection: true,
-  ignore: ['src/components/controls/index.js'],
   components: 'src/components/controls/**/*.js',
   sections: [
     {
@@ -81,8 +96,13 @@ module.exports = {
       usageMode: 'expand',
       sectionDepth: 2,
     },
+    {
+      name: 'Charts',
+      components: 'src/components/charts/**/*.js',
+      exampleMode: 'expand',
+      usageMode: 'expand',
+      sectionDepth: 2,
+    },
   ],
-  // Confirm if styleguideComponents structure is the same in v13
   styleguideComponents: {},
-  // Add any new configuration options introduced in v13
 };