Skip to content

Commit cd39cf3

Browse files
santipalenquesmarcet
santipalenque
and
smarcet
authored
feat: add mui componentes from summit-admin (#204)
* feat: add mui componentes from summit-admin * fix: adding tests * fix: change react version to match admin, fix queries * fix: query action * fix: PR review feedback * fix: update pricefield * chore(deps): migrate to react 17.x (#205) * chore(deps): migrate to react 17.x * chore: fix warnings Signed-off-by: smarcet <smarcet@gmail.com> * chore(unit-tests): fix --------- Signed-off-by: smarcet <smarcet@gmail.com> * fix: price field null value --------- Signed-off-by: smarcet <smarcet@gmail.com> Co-authored-by: sebastian marcet <smarcet@gmail.com>
1 parent 0efec61 commit cd39cf3

130 files changed

Lines changed: 15007 additions & 734 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ node_modules
44
*.log
55
.idea/
66
package.json.lock
7+
.codegraph

‎package.json‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,13 @@
2222
"@babel/runtime": "^7.20.7",
2323
"@emotion/react": "^11.11.4",
2424
"@emotion/styled": "^11.11.5",
25-
"@mui/icons-material": "^7.3.9",
26-
"@mui/material": "^5.15.20",
25+
"@mui/icons-material": "^6.4.3",
26+
"@mui/material": "^6.4.3",
27+
"@mui/x-date-pickers": "^7.26.0",
2728
"@react-pdf/renderer": "^3.1.11",
29+
"@testing-library/jest-dom": "5.17.0",
30+
"@testing-library/react": "12.1.5",
31+
"@testing-library/user-event": "14.5.2",
2832
"awesome-bootstrap-checkbox": "^1.0.1",
2933
"babel-cli": "^6.26.0",
3034
"babel-jest": "^28.1.0",
@@ -36,12 +40,11 @@
3640
"css-loader": "^6.7.1",
3741
"css-minimizer-webpack-plugin": "^4.2.2",
3842
"dropzone": "5.7.2",
39-
"enzyme": "^3.11.0",
40-
"enzyme-adapter-react-16": "^1.15.6",
4143
"extend": "^3.0.1",
4244
"file-loader": "^6.2.0",
4345
"final-form": "^4.20.7",
4446
"font-awesome": "^4.7.0",
47+
"formik": "^2.4.6",
4548
"history": "^4.7.2",
4649
"i18n-react": "^0.6.4",
4750
"identity-obj-proxy": "^3.0.0",
@@ -65,12 +68,13 @@
6568
"node-sass": "^7.0.1",
6669
"path": "^0.12.7",
6770
"postcss-loader": "^6.2.1",
68-
"react": "^16.6.3",
71+
"react": "^17.0.0",
72+
"react-beautiful-dnd": "^13.1.1",
6973
"react-bootstrap": "^0.31.5",
7074
"react-datetime": "^2.16.2",
7175
"react-dnd": "^16.0.0",
7276
"react-dnd-html5-backend": "^16.0.0",
73-
"react-dom": "^16.4.1",
77+
"react-dom": "^17.0.0",
7478
"react-dropzone": "^4.2.9",
7579
"react-final-form": "^6.5.9",
7680
"react-google-maps": "^9.4.5",
@@ -106,8 +110,9 @@
106110
"peerDependencies": {
107111
"@emotion/react": "^11.11.4",
108112
"@emotion/styled": "^11.11.5",
109-
"@mui/icons-material": "^5.15.20",
110-
"@mui/material": "^5.15.20",
113+
"@mui/icons-material": "^6.4.3",
114+
"@mui/material": "^6.4.3",
115+
"@mui/x-date-pickers": "^7.26.0",
111116
"@react-pdf/renderer": "^3.1.11",
112117
"awesome-bootstrap-checkbox": "^1.0.1",
113118
"browser-tabs-lock": "^1.2.15",
@@ -116,6 +121,7 @@
116121
"extend": "^3.0.1",
117122
"final-form": "^4.20.7",
118123
"font-awesome": "^4.7.0",
124+
"formik": "^2.4.6",
119125
"history": "^4.7.2",
120126
"i18n-react": "^0.6.4",
121127
"idtoken-verifier": "^2.2.2",
@@ -125,15 +131,17 @@
125131
"lodash": "^4.17.14",
126132
"moment": "^2.22.2",
127133
"moment-timezone": "^0.5.21",
128-
"react": "^16.6.3",
134+
"react": "^17.0.0",
135+
"react-beautiful-dnd": "^13.1.1",
129136
"react-bootstrap": "^0.31.5",
130137
"react-datetime": "^2.16.2",
131138
"react-dnd": "^16.0.0",
132139
"react-dnd-html5-backend": "^16.0.0",
133-
"react-dom": "^16.4.1",
140+
"react-dom": "^17.0.0",
134141
"react-dropzone": "^4.2.9",
135142
"react-final-form": "^6.5.9",
136143
"react-google-maps": "^9.4.5",
144+
"react-redux": "^5.0.7",
137145
"react-rte": "^0.16.3",
138146
"react-select": "^2.4.3",
139147
"react-star-ratings": "^2.3.0",
@@ -182,5 +190,6 @@
182190
"console": {}
183191
},
184192
"testEnvironment": "jsdom"
185-
}
193+
},
194+
"dependencies": {}
186195
}

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

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,11 @@
22
* @jest-environment jsdom
33
*/
44
import React from 'react';
5+
import { render, act } from '@testing-library/react';
6+
import '@testing-library/jest-dom';
57
import ExtraQuestionsForm from '..';
6-
import Enzyme, {mount} from 'enzyme';
7-
import Adapter from 'enzyme-adapter-react-16';
8-
import Input from '../../inputs/text-input';
9-
import Dropdown from '../../inputs/dropdown';
108
import {toSlug} from '../../../utils/methods';
119

12-
Enzyme.configure({adapter: new Adapter()});
13-
1410
// jsdom does not implement scrollIntoView
1511
Element.prototype.scrollIntoView = jest.fn();
1612

@@ -1067,7 +1063,7 @@ const completeAnswers2 = [
10671063
];
10681064

10691065
it('has input', () => {
1070-
const component = mount(
1066+
const { container } = render(
10711067
<ExtraQuestionsForm
10721068
extraQuestions={questions}
10731069
userAnswers={completeAnswers}
@@ -1078,13 +1074,13 @@ it('has input', () => {
10781074
/>,
10791075
);
10801076

1081-
expect(component.find(Input).exists()).toBeTruthy();
1082-
expect(component.find(Dropdown).exists()).toBeTruthy();
1083-
1077+
// Text input (sub-question of type Text) and Dropdown (react-select) should be rendered
1078+
expect(container.querySelector('input[type="text"]')).not.toBeNull();
1079+
expect(container.querySelector('.ddl-extra-questions-container')).not.toBeNull();
10841080
});
10851081

10861082
it('meat-type and values should show prefer', () => {
1087-
const component = mount(
1083+
const { container } = render(
10881084
<ExtraQuestionsForm
10891085
extraQuestions={questions2And}
10901086
userAnswers={completeAnswers2}
@@ -1095,8 +1091,7 @@ it('meat-type and values should show prefer', () => {
10951091
/>,
10961092
);
10971093

1098-
1099-
expect(component.find('#prefer').exists()).toBeTruthy();
1094+
expect(container.querySelector('#prefer')).not.toBeNull();
11001095
})
11011096

11021097
it('question should disabled', () => {
@@ -1157,7 +1152,7 @@ it('question should disabled', () => {
11571152
}
11581153
];
11591154

1160-
const component = mount(
1155+
const { container } = render(
11611156
<ExtraQuestionsForm
11621157
extraQuestions={testQuestions}
11631158
userAnswers={testAnswers}
@@ -1170,9 +1165,10 @@ it('question should disabled', () => {
11701165
);
11711166

11721167
const slug = toSlug('cloud_service_provider_market_sub_segment');
1173-
expect(component.find('#'+slug).exists()).toBeTruthy();
1174-
const input = component.find('#'+slug+' input').at(1);
1175-
expect(input.props().disabled === true).toBeTruthy();
1168+
const slugContainer = container.querySelector('#chl_wrapper_' + slug);
1169+
expect(slugContainer).not.toBeNull();
1170+
const inputs = slugContainer.querySelectorAll('input[type="checkbox"]');
1171+
expect(inputs[1].disabled).toBe(true);
11761172
})
11771173

11781174
it('question should be enabled', () => {
@@ -1222,7 +1218,7 @@ it('question should be enabled', () => {
12221218
}
12231219
];
12241220

1225-
const component = mount(
1221+
const { container } = render(
12261222
<ExtraQuestionsForm
12271223
extraQuestions={testQuestions}
12281224
userAnswers={[]}
@@ -1235,9 +1231,10 @@ it('question should be enabled', () => {
12351231
);
12361232

12371233
const slug = toSlug('cloud_service_provider_market_sub_segment');
1238-
expect(component.find(`#${slug}`).exists()).toBeTruthy();
1239-
const input = component.find(`#${slug} input`).at(1);
1240-
expect(input.props().disabled === true).toBeFalsy();
1234+
const slugContainer = container.querySelector(`#chl_wrapper_${slug}`);
1235+
expect(slugContainer).not.toBeNull();
1236+
const inputs = slugContainer.querySelectorAll('input[type="checkbox"]');
1237+
expect(inputs[1].disabled).toBe(false);
12411238
})
12421239

12431240

@@ -1517,7 +1514,7 @@ test('question with mandatory imcompleted subquestion should scroll', () => {
15171514

15181515
const formRef = React.createRef();
15191516

1520-
const component = mount(
1517+
const { container } = render(
15211518
<ExtraQuestionsForm
15221519
extraQuestions={testQuestions}
15231520
userAnswers={testAnswers}
@@ -1531,13 +1528,15 @@ test('question with mandatory imcompleted subquestion should scroll', () => {
15311528
);
15321529

15331530
const slug = toSlug('Organizational Role SUB-QUESTION (Other)');
1534-
expect(component.find(`#${slug}`).exists()).toBeTruthy();
1535-
const input = component.find(`#${slug} input`).at(0);
1536-
expect(input.props().disabled === true).toBeFalsy();
1537-
1538-
formRef.current.doSubmit();
1531+
// Text-type sub-question: the <input> itself has id=slug
1532+
const inputElement = container.querySelector(`input#${slug}`);
1533+
expect(inputElement).not.toBeNull();
1534+
expect(inputElement.disabled).toBe(false);
15391535

1540-
const question = component.find(`#${slug}`);
1536+
act(() => {
1537+
formRef.current.doSubmit();
1538+
});
15411539

1540+
expect(container.querySelector(`input#${slug}`)).not.toBeNull();
15421541
});
15431542

‎src/components/index.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,55 @@ export {default as SummitVenuesSelect} from './inputs/summit-venues-select'
5757
export {default as BulkActionsSelector} from './bulk-actions-selector'
5858
export {default as ScheduleBuilderView} from './schedule-builder-view'
5959

60+
// mui components
61+
export {default as MuiCheckboxList} from './mui/checkbox-list'
62+
export {default as MuiChipList} from './mui/chip-list'
63+
export {default as MuiChipNotify} from './mui/chip-notify'
64+
export {default as MuiChipSelectInput} from './mui/chip-select-input'
65+
export {default as MuiConfirmDialog} from './mui/confirm-dialog'
66+
export {default as MuiCustomAlert} from './mui/custom-alert'
67+
export {default as MuiDndList} from './mui/dnd-list'
68+
export {default as MuiDropdownCheckbox} from './mui/dropdown-checkbox'
69+
export {default as MuiMenuButton} from './mui/menu-button'
70+
export {default as MuiSearchInput} from './mui/search-input'
71+
export {default as MuiShowConfirmDialog} from './mui/showConfirmDialog'
72+
export {default as MuiSponsorAddonSelect} from './mui/sponsor-addon-select'
73+
export {default as MuiSummitAddonSelect} from './mui/summit-addon-select'
74+
export {default as MuiSummitsDropdown} from './mui/summits-dropdown'
75+
export {default as MuiFormItemTable} from './mui/FormItemTable'
76+
export {default as MuiItemSettingsModal} from './mui/ItemSettingsModal'
77+
export {default as MuiNotesModal} from './mui/NotesModal'
78+
export {default as MuiSnackbarNotification} from './mui/SnackbarNotification'
79+
export {default as MuiInfiniteTable} from './mui/infinite-table'
80+
export {default as MuiEditableTable} from './mui/editable-table/mui-table-editable'
81+
export {default as MuiSortableTable} from './mui/sortable-table/mui-table-sortable'
82+
export {default as MuiTable} from './mui/table/mui-table'
83+
export {default as MuiAdditionalInput} from './mui/formik-inputs/additional-input/additional-input'
84+
export {default as MuiAdditionalInputList} from './mui/formik-inputs/additional-input/additional-input-list'
85+
export {default as MuiFormikAsyncSelect} from './mui/formik-inputs/mui-formik-async-select'
86+
export {default as MuiFormikCheckboxGroup} from './mui/formik-inputs/mui-formik-checkbox-group'
87+
export {default as MuiFormikCheckbox} from './mui/formik-inputs/mui-formik-checkbox'
88+
export {default as MuiFormikDatepicker} from './mui/formik-inputs/mui-formik-datepicker'
89+
export {default as MuiFormikDiscountField} from './mui/formik-inputs/mui-formik-discountfield'
90+
export {default as MuiFormikDropdownCheckbox} from './mui/formik-inputs/mui-formik-dropdown-checkbox'
91+
export {default as MuiFormikDropdownRadio} from './mui/formik-inputs/mui-formik-dropdown-radio'
92+
export {default as MuiFormikFileSizeField} from './mui/formik-inputs/mui-formik-file-size-field'
93+
export {default as MuiFormikPriceField} from './mui/formik-inputs/mui-formik-pricefield'
94+
export {default as MuiFormikQuantityField} from './mui/formik-inputs/mui-formik-quantity-field'
95+
export {default as MuiFormikRadioGroup} from './mui/formik-inputs/mui-formik-radio-group'
96+
export {default as MuiFormikSelectGroup} from './mui/formik-inputs/mui-formik-select-group'
97+
export {default as MuiFormikSelect} from './mui/formik-inputs/mui-formik-select'
98+
export {default as MuiFormikSummitAddonSelect} from './mui/formik-inputs/mui-formik-summit-addon-select'
99+
export {default as MuiFormikSwitch} from './mui/formik-inputs/mui-formik-switch'
100+
export {default as MuiFormikTextField} from './mui/formik-inputs/mui-formik-textfield'
101+
export {default as MuiFormikTimepicker} from './mui/formik-inputs/mui-formik-timepicker'
102+
export {default as MuiFormikUpload} from './mui/formik-inputs/mui-formik-upload'
103+
export {default as MuiCompanyInput} from './mui/formik-inputs/company-input-mui'
104+
export {default as MuiItemPriceTiers} from './mui/formik-inputs/item-price-tiers'
105+
export {default as MuiSponsorInput} from './mui/formik-inputs/mui-sponsor-input'
106+
export {default as MuiSponsorshipInput} from './mui/formik-inputs/sponsorship-input-mui'
107+
export {default as MuiSponsorshipSummitSelect} from './mui/formik-inputs/sponsorship-summit-select-mui'
108+
60109
// this 5 includes 3rd party deps
61110
// export {default as ExtraQuestionsForm } from './extra-questions/index.js';
62111
// export {default as GMap} from './google-map';

‎src/components/inputs/promocode-input.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
import React from 'react';
1515
import PropTypes from 'prop-types';
1616
import AsyncSelect from 'react-select/lib/Async';
17-
import {DEFAULT_PAGE_SIZE, queryPromocodes} from '../../utils/query-actions';
17+
import {queryPromocodes} from '../../utils/query-actions';
18+
import {DEFAULT_PER_PAGE} from '../../utils/constants';
1819

1920
const PromocodeInput = ({summitId, error, value, onChange, id, multi, perPage, extraFilters, ...rest}) => {
2021

@@ -87,7 +88,7 @@ PromocodeInput.propTypes = {
8788
};
8889

8990
PromocodeInput.defaultProps = {
90-
perPage: DEFAULT_PAGE_SIZE,
91+
perPage: DEFAULT_PER_PAGE,
9192
extraFilters: []
9293
};
9394

0 commit comments

Comments
 (0)