Move modal to helper plugin

packages/strapi-helper-plugin/lib/src/components/FooterModal/index.js

@@ -6,7 +6,8 @@
 
 import styled from 'styled-components';
 
-import { colors, sizes } from 'strapi-helper-plugin';
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
 
 const FooterModal = styled.div`
   padding-top: ${sizes.margin * 0.9}px;

packages/strapi-helper-plugin/lib/src/components/FooterModal/tests/index.test.js

@@ -10,7 +10,11 @@ describe('<FooterModal />', () => {
 
   it('should render its children', () => {
     const Child = () => <div>This is a child</div>;
-    const wrapper = shallow(<FooterModal><Child /></FooterModal>);
+    const wrapper = shallow(
+      <FooterModal>
+        <Child />
+      </FooterModal>
+    );
 
     expect(wrapper.find(Child).exists()).toBe(true);
   });

packages/strapi-helper-plugin/lib/src/components/HeaderModal/index.js

@@ -5,8 +5,8 @@
  */
 
 import styled from 'styled-components';
-
+import colors from '../../assets/styles/colors';
-import { colors, sizes } from 'strapi-helper-plugin';
+import sizes from '../../assets/styles/sizes';
 
 const HeaderModal = styled.div`
   color: ${colors.black};

packages/strapi-helper-plugin/lib/src/index.js

@@ -18,6 +18,8 @@ export { default as ErrorBoundary } from './components/ErrorBoundary';
 export { default as ExtendComponent } from './components/ExtendComponent';
 export { default as GlobalPagination } from './components/GlobalPagination';
 export { default as HeaderNav } from './components/HeaderNav';
+export { default as HeaderModal } from './components/HeaderModal';
+export { default as HeaderModalTitle } from './components/HeaderModalTitle';
 export { default as IcoContainer } from './components/IcoContainer';
 export { default as InputAddon } from './components/InputAddon';
 
@@ -87,6 +89,10 @@ export {
   default as LoadingIndicatorPage,
 } from './components/LoadingIndicatorPage';
 
+export { default as Modal } from './components/Modal';
+export { default as ModalBody } from './components/BodyModal';
+export { default as ModalFooter } from './components/FooterModal';
+export { default as ModalForm } from './components/FormModal';
 export { default as NotFound } from './components/NotFound';
 export { default as OverlayBlocker } from './components/OverlayBlocker';
 export { default as PageFooter } from './components/PageFooter';

packages/strapi-plugin-content-type-builder/admin/src/components/HeaderModal/tests/index.test.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import HeaderModal from '../index';
-
-describe('<HeaderModal />', () => {
-  it('should not crash', () => {
-    shallow(<HeaderModal />);
-  });
-
-  it('should render its children', () => {
-    const Child = () => <div>Some child</div>;
-    const wrapper = shallow(<HeaderModal><Child /></HeaderModal>);
-
-    expect(wrapper.find(Child).exists()).toBe(true);
-  });
-});

packages/strapi-plugin-content-type-builder/admin/src/components/HeaderModalTitle/tests/index.test.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import HeaderModalTitle from '../index';
-
-describe('<HeaderModalTitle />', () => {
-  it('should not crash', () => {
-    shallow(<HeaderModalTitle title="app.utils.defaultTitle" />);
-  });
-});

packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/index.js

@@ -9,20 +9,23 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { get, isEmpty } from 'lodash';
 
-import { ButtonModal, InputsIndex as Input } from 'strapi-helper-plugin';
+import {
+  ButtonModal,
+  HeaderModal,
+  HeaderModalTitle,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalForm,
+  InputsIndex as Input,
+} from 'strapi-helper-plugin';
 
 import pluginId from '../../pluginId';
 
-import BodyModal from '../../components/BodyModal';
 import ButtonModalPrimary from '../../components/ButtonModalPrimary';
 import CustomCheckbox from '../../components/CustomCheckbox';
-import FooterModal from '../../components/FooterModal';
-import FormModal from '../../components/FormModal';
-import HeaderModal from '../../components/HeaderModal';
-import HeaderModalTitle from '../../components/HeaderModalTitle';
 import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
 import HeaderNavLink from '../../components/HeaderNavLink';
-import WrapperModal from '../../components/WrapperModal';
 
 import Icon from '../../assets/icons/icon_type_ct.png';
 import IconGroup from '../../assets/icons/icon_type_groups.png';
@@ -318,7 +321,7 @@ class AttributeForm extends React.Component {
     const currentForm = this.getCurrentForm();
 
     return (
-      <WrapperModal
+      <Modal
         isOpen={isOpen}
         onClosed={this.handleOnClosed}
         onOpened={this.handleOnOpened}
@@ -354,12 +357,12 @@ class AttributeForm extends React.Component {
           </section>
         </HeaderModal>
         <form onSubmit={this.handleSubmitAndContinue}>
-          <FormModal>
+          <ModalForm>
-            <BodyModal>
+            <ModalBody>
               {showForm && currentForm.map(this.renderInput)}
-            </BodyModal>
+            </ModalBody>
-          </FormModal>
+          </ModalForm>
-          <FooterModal>
+          <ModalFooter>
             <section>
               <ButtonModalPrimary
                 message={`${pluginId}.form.button.add.field`}
@@ -379,9 +382,9 @@ class AttributeForm extends React.Component {
                 onClick={this.handleSubmit}
               />
             </section>
-          </FooterModal>
+          </ModalFooter>
         </form>
-      </WrapperModal>
+      </Modal>
     );
   }
 }

packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/tests/index.test.js

@@ -4,14 +4,13 @@ import { FormattedMessage } from 'react-intl';
 import mountWithIntl from 'testUtils/mountWithIntl';
 import formatMessagesWithPluginId from 'testUtils/formatMessages';
 
-import { InputsIndex as Input } from 'strapi-helper-plugin';
+import { HeaderModalTitle, InputsIndex as Input } from 'strapi-helper-plugin';
 // This part is needed if you need to test the lifecycle of a container that contains FormattedMessages
 
 import pluginId from '../../../pluginId';
 import pluginTradsEn from '../../../translations/en.json';
 
 import CustomCheckbox from '../../../components/CustomCheckbox';
-import HeaderModalTitle from '../../../components/HeaderModalTitle';
 import AttributeForm from '../index';
 
 const messages = formatMessagesWithPluginId(pluginId, pluginTradsEn);

packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/index.js

@@ -7,15 +7,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-
+import {
+  HeaderModal,
+  HeaderModalTitle,
+  Modal,
+  ModalBody,
+  ModalFooter,
+} from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';
 
 import AttributeOption from '../../components/AttributeOption';
-import BodyModal from '../../components/BodyModal';
-import FooterModal from '../../components/FooterModal';
-import HeaderModal from '../../components/HeaderModal';
-import HeaderModalTitle from '../../components/HeaderModalTitle';
-import WrapperModal from '../../components/WrapperModal';
 
 import Icon from '../../assets/icons/icon_type_ct.png';
 import IconGroup from '../../assets/icons/icon_type_groups.png';
@@ -164,7 +165,7 @@ class AttributesPickerModal extends React.Component {
     const { featureName, featureType, isOpen } = this.props;
 
     return (
-      <WrapperModal
+      <Modal
         isOpen={isOpen}
         onToggle={this.handleToggle}
         onClosed={this.handleOnClosed}
@@ -185,11 +186,11 @@ class AttributesPickerModal extends React.Component {
             </HeaderModalTitle>
           </section>
         </HeaderModal>
-        <BodyModal style={{ paddingTop: '0.4rem', paddingBottom: '3rem' }}>
+        <ModalBody style={{ paddingTop: '0.4rem', paddingBottom: '3rem' }}>
           {attributes.map(this.renderAttribute)}
-        </BodyModal>
+        </ModalBody>
-        <FooterModal />
+        <ModalFooter />
-      </WrapperModal>
+      </Modal>
     );
   }
 }

packages/strapi-plugin-content-type-builder/admin/src/containers/ModelForm/index.js

@@ -9,17 +9,20 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { get, isEmpty, upperFirst } from 'lodash';
 
-import { ButtonModal, InputsIndex as Input } from 'strapi-helper-plugin';
+import {
+  ButtonModal,
+  HeaderModal,
+  HeaderModalTitle,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  InputsIndex as Input,
+} from 'strapi-helper-plugin';
 
 import pluginId from '../../pluginId';
 
-import BodyModal from '../../components/BodyModal';
-import FooterModal from '../../components/FooterModal';
-import HeaderModal from '../../components/HeaderModal';
-import HeaderModalTitle from '../../components/HeaderModalTitle';
 import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
 import HeaderNavLink from '../../components/HeaderNavLink';
-import WrapperModal from '../../components/WrapperModal';
 
 import Icon from '../../assets/icons/icon_type_ct.png';
 import IconGroup from '../../assets/icons/icon_type_groups.png';
@@ -226,7 +229,7 @@ class ModelForm extends React.Component {
     const currentForm = get(forms, activeTab, forms.base);
 
     return (
-      <WrapperModal
+      <Modal
         isOpen={isOpen}
         onOpened={this.handleOnOpened}
         onClosed={this.handleOnClosed}
@@ -261,8 +264,8 @@ class ModelForm extends React.Component {
           </section>
         </HeaderModal>
         <form onSubmit={this.handleSubmit}>
-          <BodyModal>{currentForm.items.map(this.renderInput)}</BodyModal>
+          <ModalBody>{currentForm.items.map(this.renderInput)}</ModalBody>
-          <FooterModal>
+          <ModalFooter>
             <section>
               <ButtonModal
                 isSecondary
@@ -274,9 +277,9 @@ class ModelForm extends React.Component {
                 type="submit"
               />
             </section>
-          </FooterModal>
+          </ModalFooter>
         </form>
-      </WrapperModal>
+      </Modal>
     );
   }
 }

packages/strapi-plugin-content-type-builder/admin/src/containers/RelationForm/index.js

@@ -9,19 +9,23 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { get, isEmpty } from 'lodash';
 
-import { ButtonModal, InputsIndex as Input } from 'strapi-helper-plugin';
+import {
+  ButtonModal,
+  HeaderModal,
+  HeaderModalTitle,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalForm,
+  InputsIndex as Input,
+} from 'strapi-helper-plugin';
 
 import pluginId from '../../pluginId';
 
-import BodyModal from '../../components/BodyModal';
 import ButtonModalPrimary from '../../components/ButtonModalPrimary';
-import FooterModal from '../../components/FooterModal';
+
-import FormModal from '../../components/FormModal';
-import HeaderModal from '../../components/HeaderModal';
 import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
-import HeaderModalTitle from '../../components/HeaderModalTitle';
 import HeaderNavLink from '../../components/HeaderNavLink';
-import WrapperModal from '../../components/WrapperModal';
 
 import NaturePicker from './NaturePicker';
 import RelationWrapper from './RelationWrapper';
@@ -287,7 +291,7 @@ class RelationForm extends React.Component {
         : this.renderAdvancedSettings();
 
     return (
-      <WrapperModal
+      <Modal
         isOpen={isOpen}
         onClosed={this.handleOnClosed}
         onOpened={this.handleOnOpened}
@@ -323,10 +327,10 @@ class RelationForm extends React.Component {
           </section>
         </HeaderModal>
         <form onSubmit={this.handleSubmitAndContinue}>
-          <FormModal>
+          <ModalForm>
-            <BodyModal>{showForm && content}</BodyModal>
+            <ModalBody>{showForm && content}</ModalBody>
-          </FormModal>
+          </ModalForm>
-          <FooterModal>
+          <ModalFooter>
             <section>
               <ButtonModalPrimary
                 message={`${pluginId}.form.button.add.field`}
@@ -346,9 +350,9 @@ class RelationForm extends React.Component {
                 onClick={this.handleSubmit}
               />
             </section>
-          </FooterModal>
+          </ModalFooter>
         </form>
-      </WrapperModal>
+      </Modal>
     );
   }
 }

packages/strapi-plugin-content-type-builder/admin/src/containers/RelationFormGroup/index.js

@@ -9,22 +9,27 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { get, isEmpty } from 'lodash';
 
-import { ButtonModal, InputsIndex as Input } from 'strapi-helper-plugin';
+import {
+  ButtonModal,
+  HeaderModal,
+  HeaderModalTitle,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalForm,
+  InputsIndex as Input,
+} from 'strapi-helper-plugin';
 
 import pluginId from '../../pluginId';
 
-import BodyModal from '../../components/BodyModal';
 import ButtonModalPrimary from '../../components/ButtonModalPrimary';
-import FooterModal from '../../components/FooterModal';
+
-import FormModal from '../../components/FormModal';
-import HeaderModal from '../../components/HeaderModal';
 import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
-import HeaderModalTitle from '../../components/HeaderModalTitle';
+
 import HeaderNavLink from '../../components/HeaderNavLink';
 import RelationNaturePicker from '../../components/RelationNaturePicker';
 import RelationBox from '../../components/RelationBox';
 import RelationsWrapper from '../../components/RelationsWrapper';
-import WrapperModal from '../../components/WrapperModal';
 
 import Icon from '../../assets/icons/icon_type_ct.png';
 import IconGroup from '../../assets/icons/icon_type_groups.png';
@@ -295,7 +300,7 @@ class RelationFormGroup extends React.Component {
         : this.renderAdvancedSettings();
 
     return (
-      <WrapperModal
+      <Modal
         isOpen={isOpen}
         onClosed={this.handleOnClosed}
         onOpened={this.handleOnOpened}
@@ -331,12 +336,12 @@ class RelationFormGroup extends React.Component {
           </section>
         </HeaderModal>
         <form onSubmit={this.handleSubmitAndContinue}>
-          <FormModal>
+          <ModalForm>
-            <BodyModal>
+            <ModalBody>
               <RelationsWrapper>{showForm && content}</RelationsWrapper>
-            </BodyModal>
+            </ModalBody>
-          </FormModal>
+          </ModalForm>
-          <FooterModal>
+          <ModalFooter>
             <section>
               <ButtonModalPrimary
                 message={`${pluginId}.form.button.add.field`}
@@ -356,9 +361,9 @@ class RelationFormGroup extends React.Component {
                 onClick={this.handleSubmit}
               />
             </section>
-          </FooterModal>
+          </ModalFooter>
         </form>
-      </WrapperModal>
+      </Modal>
     );
   }
 }