feat: add mui componentes from summit-admin

.gitignore

@@ -4,3 +4,4 @@ node_modules
 *.log
 .idea/
 package.json.lock
+.codegraph

package.json

@@ -22,9 +22,13 @@
     "@babel/runtime": "^7.20.7",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/material": "^5.15.20",
+    "@mui/icons-material": "^6.4.3",
+    "@mui/material": "^6.4.3",
+    "@mui/x-date-pickers": "^7.26.0",
     "@react-pdf/renderer": "^3.1.11",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/user-event": "14.5.2",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "babel-cli": "^6.26.0",
     "babel-jest": "^28.1.0",
@@ -36,12 +40,11 @@
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "dropzone": "5.7.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "extend": "^3.0.1",
     "file-loader": "^6.2.0",
     "final-form": "^4.20.7",
     "font-awesome": "^4.7.0",
+    "formik": "^2.4.6",
     "history": "^4.7.2",
     "i18n-react": "^0.6.4",
     "identity-obj-proxy": "^3.0.0",
@@ -65,12 +68,13 @@
     "node-sass": "^7.0.1",
     "path": "^0.12.7",
     "postcss-loader": "^6.2.1",
-    "react": "^16.6.3",
+    "react": "^17.0.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-bootstrap": "^0.31.5",
     "react-datetime": "^2.16.2",
     "react-dnd": "^16.0.0",
     "react-dnd-html5-backend": "^16.0.0",
-    "react-dom": "^16.4.1",
+    "react-dom": "^17.0.0",
     "react-dropzone": "^4.2.9",
     "react-final-form": "^6.5.9",
     "react-google-maps": "^9.4.5",
@@ -106,8 +110,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/material": "^5.15.20",
+    "@mui/icons-material": "^6.4.3",
+    "@mui/material": "^6.4.3",
+    "@mui/x-date-pickers": "^7.26.0",
     "@react-pdf/renderer": "^3.1.11",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "browser-tabs-lock": "^1.2.15",
@@ -116,6 +121,7 @@
     "extend": "^3.0.1",
     "final-form": "^4.20.7",
     "font-awesome": "^4.7.0",
+    "formik": "^2.4.6",
     "history": "^4.7.2",
     "i18n-react": "^0.6.4",
     "idtoken-verifier": "^2.2.2",
@@ -125,15 +131,17 @@
     "lodash": "^4.17.14",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.21",
-    "react": "^16.6.3",
+    "react": "^17.0.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-bootstrap": "^0.31.5",
     "react-datetime": "^2.16.2",
     "react-dnd": "^16.0.0",
     "react-dnd-html5-backend": "^16.0.0",
-    "react-dom": "^16.4.1",
+    "react-dom": "^17.0.0",
     "react-dropzone": "^4.2.9",
     "react-final-form": "^6.5.9",
     "react-google-maps": "^9.4.5",
+    "react-redux": "^5.0.7",
     "react-rte": "^0.16.3",
     "react-select": "^2.4.3",
     "react-star-ratings": "^2.3.0",
@@ -182,5 +190,6 @@
       "console": {}
     },
     "testEnvironment": "jsdom"
-  }
+  },
+  "dependencies": {}
 }

src/components/extra-questions/__test__/extra-questions.test.js

@@ -2,15 +2,11 @@
  * @jest-environment jsdom
  */
 import React from 'react';
+import { render, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import ExtraQuestionsForm from '..';
-import Enzyme, {mount} from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import Input from '../../inputs/text-input';
-import Dropdown from '../../inputs/dropdown';
 import {toSlug} from '../../../utils/methods';
 
-Enzyme.configure({adapter: new Adapter()});
-
 // jsdom does not implement scrollIntoView
 Element.prototype.scrollIntoView = jest.fn();
 
@@ -1067,7 +1063,7 @@ const completeAnswers2 = [
 ];
 
 it('has input', () => {
-    const component = mount(
+    const { container } = render(
         <ExtraQuestionsForm
             extraQuestions={questions}
             userAnswers={completeAnswers}
@@ -1078,13 +1074,13 @@ it('has input', () => {
         />,
     );
 
-    expect(component.find(Input).exists()).toBeTruthy();
-    expect(component.find(Dropdown).exists()).toBeTruthy();
-
+    // Text input (sub-question of type Text) and Dropdown (react-select) should be rendered
+    expect(container.querySelector('input[type="text"]')).not.toBeNull();
+    expect(container.querySelector('.ddl-extra-questions-container')).not.toBeNull();
 });
 
 it('meat-type and values should show prefer', () => {
-    const component = mount(
+    const { container } = render(
         <ExtraQuestionsForm
             extraQuestions={questions2And}
             userAnswers={completeAnswers2}
@@ -1095,8 +1091,7 @@ it('meat-type and values should show prefer', () => {
         />,
     );
 
-
-    expect(component.find('#prefer').exists()).toBeTruthy();
+    expect(container.querySelector('#prefer')).not.toBeNull();
 })
 
 it('question should disabled', () => {
@@ -1157,7 +1152,7 @@ it('question should disabled', () => {
         }
     ];
 
-    const component = mount(
+    const { container } = render(
         <ExtraQuestionsForm
             extraQuestions={testQuestions}
             userAnswers={testAnswers}
@@ -1170,9 +1165,10 @@ it('question should disabled', () => {
     );
 
     const slug = toSlug('cloud_service_provider_market_sub_segment');
-    expect(component.find('#'+slug).exists()).toBeTruthy();
-    const input = component.find('#'+slug+' input').at(1);
-    expect(input.props().disabled === true).toBeTruthy();
+    const slugContainer = container.querySelector('#chl_wrapper_' + slug);
+    expect(slugContainer).not.toBeNull();
+    const inputs = slugContainer.querySelectorAll('input[type="checkbox"]');
+    expect(inputs[1].disabled).toBe(true);
 })
 
 it('question should be enabled', () => {
@@ -1222,7 +1218,7 @@ it('question should be enabled', () => {
         }
     ];
 
-    const component = mount(
+    const { container } = render(
         <ExtraQuestionsForm
             extraQuestions={testQuestions}
             userAnswers={[]}
@@ -1235,9 +1231,10 @@ it('question should be enabled', () => {
     );
 
     const slug = toSlug('cloud_service_provider_market_sub_segment');
-    expect(component.find(`#${slug}`).exists()).toBeTruthy();
-    const input = component.find(`#${slug} input`).at(1);
-    expect(input.props().disabled === true).toBeFalsy();
+    const slugContainer = container.querySelector(`#chl_wrapper_${slug}`);
+    expect(slugContainer).not.toBeNull();
+    const inputs = slugContainer.querySelectorAll('input[type="checkbox"]');
+    expect(inputs[1].disabled).toBe(false);
 })
 
 
@@ -1517,7 +1514,7 @@ test('question with mandatory imcompleted subquestion should scroll', () => {
 
     const formRef = React.createRef();
 
-    const component = mount(
+    const { container } = render(
         <ExtraQuestionsForm
             extraQuestions={testQuestions}
             userAnswers={testAnswers}
@@ -1531,13 +1528,15 @@ test('question with mandatory imcompleted subquestion should scroll', () => {
     );
 
     const slug = toSlug('Organizational Role SUB-QUESTION (Other)');
-    expect(component.find(`#${slug}`).exists()).toBeTruthy();
-    const input = component.find(`#${slug} input`).at(0);
-    expect(input.props().disabled === true).toBeFalsy();
-
-    formRef.current.doSubmit();
+    // Text-type sub-question: the <input> itself has id=slug
+    const inputElement = container.querySelector(`input#${slug}`);
+    expect(inputElement).not.toBeNull();
+    expect(inputElement.disabled).toBe(false);
 
-    const question = component.find(`#${slug}`);
+    act(() => {
+        formRef.current.doSubmit();
+    });
 
+    expect(container.querySelector(`input#${slug}`)).not.toBeNull();
 });
 

src/components/index.js

@@ -57,6 +57,55 @@ export {default as SummitVenuesSelect} from './inputs/summit-venues-select'
 export {default as BulkActionsSelector} from './bulk-actions-selector'
 export {default as ScheduleBuilderView} from './schedule-builder-view'
 
+// mui components
+export {default as MuiCheckboxList} from './mui/checkbox-list'
+export {default as MuiChipList} from './mui/chip-list'
+export {default as MuiChipNotify} from './mui/chip-notify'
+export {default as MuiChipSelectInput} from './mui/chip-select-input'
+export {default as MuiConfirmDialog} from './mui/confirm-dialog'
+export {default as MuiCustomAlert} from './mui/custom-alert'
+export {default as MuiDndList} from './mui/dnd-list'
+export {default as MuiDropdownCheckbox} from './mui/dropdown-checkbox'
+export {default as MuiMenuButton} from './mui/menu-button'
+export {default as MuiSearchInput} from './mui/search-input'
+export {default as MuiShowConfirmDialog} from './mui/showConfirmDialog'
+export {default as MuiSponsorAddonSelect} from './mui/sponsor-addon-select'
+export {default as MuiSummitAddonSelect} from './mui/summit-addon-select'
+export {default as MuiSummitsDropdown} from './mui/summits-dropdown'
+export {default as MuiFormItemTable} from './mui/FormItemTable'
+export {default as MuiItemSettingsModal} from './mui/ItemSettingsModal'
+export {default as MuiNotesModal} from './mui/NotesModal'
+export {default as MuiSnackbarNotification} from './mui/SnackbarNotification'
+export {default as MuiInfiniteTable} from './mui/infinite-table'
+export {default as MuiEditableTable} from './mui/editable-table/mui-table-editable'
+export {default as MuiSortableTable} from './mui/sortable-table/mui-table-sortable'
+export {default as MuiTable} from './mui/table/mui-table'
+export {default as MuiAdditionalInput} from './mui/formik-inputs/additional-input/additional-input'
+export {default as MuiAdditionalInputList} from './mui/formik-inputs/additional-input/additional-input-list'
+export {default as MuiFormikAsyncSelect} from './mui/formik-inputs/mui-formik-async-select'
+export {default as MuiFormikCheckboxGroup} from './mui/formik-inputs/mui-formik-checkbox-group'
+export {default as MuiFormikCheckbox} from './mui/formik-inputs/mui-formik-checkbox'
+export {default as MuiFormikDatepicker} from './mui/formik-inputs/mui-formik-datepicker'
+export {default as MuiFormikDiscountField} from './mui/formik-inputs/mui-formik-discountfield'
+export {default as MuiFormikDropdownCheckbox} from './mui/formik-inputs/mui-formik-dropdown-checkbox'
+export {default as MuiFormikDropdownRadio} from './mui/formik-inputs/mui-formik-dropdown-radio'
+export {default as MuiFormikFileSizeField} from './mui/formik-inputs/mui-formik-file-size-field'
+export {default as MuiFormikPriceField} from './mui/formik-inputs/mui-formik-pricefield'
+export {default as MuiFormikQuantityField} from './mui/formik-inputs/mui-formik-quantity-field'
+export {default as MuiFormikRadioGroup} from './mui/formik-inputs/mui-formik-radio-group'
+export {default as MuiFormikSelectGroup} from './mui/formik-inputs/mui-formik-select-group'
+export {default as MuiFormikSelect} from './mui/formik-inputs/mui-formik-select'
+export {default as MuiFormikSummitAddonSelect} from './mui/formik-inputs/mui-formik-summit-addon-select'
+export {default as MuiFormikSwitch} from './mui/formik-inputs/mui-formik-switch'
+export {default as MuiFormikTextField} from './mui/formik-inputs/mui-formik-textfield'
+export {default as MuiFormikTimepicker} from './mui/formik-inputs/mui-formik-timepicker'
+export {default as MuiFormikUpload} from './mui/formik-inputs/mui-formik-upload'
+export {default as MuiCompanyInput} from './mui/formik-inputs/company-input-mui'
+export {default as MuiItemPriceTiers} from './mui/formik-inputs/item-price-tiers'
+export {default as MuiSponsorInput} from './mui/formik-inputs/mui-sponsor-input'
+export {default as MuiSponsorshipInput} from './mui/formik-inputs/sponsorship-input-mui'
+export {default as MuiSponsorshipSummitSelect} from './mui/formik-inputs/sponsorship-summit-select-mui'
+
 // this 5 includes 3rd party deps
 // export {default as ExtraQuestionsForm } from './extra-questions/index.js';
 // export {default as GMap} from './google-map';

src/components/inputs/promocode-input.js

@@ -14,7 +14,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import AsyncSelect from 'react-select/lib/Async';
-import {DEFAULT_PAGE_SIZE, queryPromocodes} from '../../utils/query-actions';
+import {queryPromocodes} from '../../utils/query-actions';
+import {DEFAULT_PER_PAGE} from '../../utils/constants';
 
 const PromocodeInput = ({summitId, error, value, onChange, id, multi, perPage, extraFilters, ...rest}) => {
 
@@ -87,7 +88,7 @@ PromocodeInput.propTypes = {
 };
 
 PromocodeInput.defaultProps = {
-    perPage: DEFAULT_PAGE_SIZE,
+    perPage: DEFAULT_PER_PAGE,
     extraFilters: []
 };