WIP: Rename exports

.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "plugins": [
     "react",
-    "react-hooks"
+    "react-hooks",
+    "import"
   ],
   "parserOptions": {
     "ecmaVersion": 2018,
@@ -20,7 +21,19 @@
   "settings": {
     "react": {
       "version": "detect"
-    }
+    },
+    "import/core-modules": [
+        "ttag",
+        "react-components",
+        "react-router-dom",
+        "react-router",
+        "react-redux",
+        "react-test-renderer",
+        "enzyme",
+        "enzyme-adapter-react-16",
+        "proton-shared",
+        "proton-shared/*"
+    ]
   },
   "extends": [
     "eslint:recommended",
@@ -29,6 +42,11 @@
   "rules": {
     "react/display-name": "off",
     "react/prop-types": "warn",
-    "react-hooks/rules-of-hooks": "error"
+    "react-hooks/rules-of-hooks": "error",
+    "import/no-unresolved": [2, {"commonjs": true, "amd": true, "ignore": ["proton-shared"]}],
+    "import/named": 2,
+    "import/namespace": 2,
+    "import/default": 2,
+    "import/export": 2
   }
 }

components/badge/Badge.js → Components/badge/index.js

@@ -20,4 +20,4 @@ Badge.defaultProps = {
     type: 'default'
 };
 
-export default Badge;
+export default Badge;

components/button/Copy.js → Components/button/copy.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { c } from 'ttag';
 
 import { textToClipboard } from 'proton-shared/lib/helpers/browser';
-import Button from './Button';
-import Icon from '../icon/Icon';
+import Button from './index';
+import Icon from '../icon';
 import { getClasses } from '../../helpers/component';
 
 const Copy = ({ className }) => {

Components/button/group.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Button from './index';
+import { getClasses } from '../../helpers/component';
+
+const ButtonGroup = ({ children, className, ...rest }) => (
+    <Button className={getClasses('pm-button pm-group-button', className)} {...rest}>
+        {children}
+    </Button>
+);
+
+ButtonGroup.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string
+};
+
+export default ButtonGroup;

components/button/LargeButton.js → Components/button/large.js

@@ -2,10 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { getClasses } from '../../helpers/component';
 
-import Button from './Button';
+import Button from './index';
 
 const LargeButton = ({ children, className, ...rest }) => {
-    return <Button className={getClasses('pm-button pm-button--large mr1', className)} {...rest}>{children}</Button>
+    return (
+        <Button className={getClasses('pm-button pm-button--large mr1', className)} {...rest}>
+            {children}
+        </Button>
+    );
 };
 
 LargeButton.propTypes = {
@@ -17,4 +21,4 @@ LargeButton.defaultProps = {
     className: ''
 };
 
-export default LargeButton;
+export default LargeButton;

components/button/LinkButton.js → Components/button/link.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from './Button';
+import Button from './index';
 
 const LinkButton = ({ children, className, ...rest }) => {
     return (

components/button/PrimaryButton.js → Components/button/primary.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from './Button';
+import Button from './index';
 import { getClasses } from '../../helpers/component';
 
 const PrimaryButton = ({ children, className, ...rest }) => {
-    return (<Button className={getClasses('pm-button-primary mr1', className)} {...rest}>{children}</Button>);
+    return (
+        <Button className={getClasses('pm-button-primary mr1', className)} {...rest}>
+            {children}
+        </Button>
+    );
 };
 
 PrimaryButton.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string
 };
 
-export default PrimaryButton;
+export default PrimaryButton;

Components/button/reset.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from './index';
+
+const ResetButton = ({ children, ...rest }) => (
+    <Button type="reset" {...rest}>
+        {children}
+    </Button>
+);
+
+ResetButton.propTypes = {
+    children: PropTypes.node.isRequired
+};
+
+export default ResetButton;

components/button/SmallButton.js → Components/button/small.js

@@ -2,10 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { getClasses } from '../../helpers/component';
 
-import Button from './Button';
+import Button from './index';
 
 const SmallButton = ({ children, className, ...rest }) => {
-    return <Button className={getClasses('pm-button pm-button--small mr1', className)} {...rest}>{children}</Button>
+    return (
+        <Button className={getClasses('pm-button pm-button--small mr1', className)} {...rest}>
+            {children}
+        </Button>
+    );
 };
 
 SmallButton.propTypes = {
@@ -17,4 +21,4 @@ SmallButton.defaultProps = {
     className: ''
 };
 
-export default SmallButton;
+export default SmallButton;

components/container/Block.js → Components/container/Block.js

@@ -11,4 +11,4 @@ Block.propTypes = {
     className: PropTypes.string
 };
 
-export default Block;
+export default Block;

components/container/Bordered.js → Components/container/Bordered.js

@@ -11,4 +11,4 @@ Bordered.propTypes = {
     className: PropTypes.string
 };
 
-export default Bordered;
+export default Bordered;

components/button/Group.js → Components/container/Group.js

@@ -7,4 +7,4 @@ Group.propTypes = {
     children: PropTypes.node.isRequired
 };
 
-export default Group;
+export default Group;

components/container/Row.js → Components/container/Row.js

@@ -3,12 +3,16 @@ import PropTypes from 'prop-types';
 import { getClasses } from '../../helpers/component';
 
 const Row = ({ children, className, ...rest }) => {
-    return <div className={getClasses('flex flex-nowrap onmobile-flex-column mb1', className)} {...rest}>{children}</div>;
+    return (
+        <div className={getClasses('flex flex-nowrap onmobile-flex-column mb1', className)} {...rest}>
+            {children}
+        </div>
+    );
 };
 
 Row.propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string
 };
 
-export default Row;
+export default Row;

components/dropdown/Dropdown.test.js → Components/dropdown/Dropdown.test.js

@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import Enzyme, { shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-import Dropdown from './Dropdown';
-import Button from '../button/Button';
+import Dropdown from './index';
+import Button from '../button/index';
 
 const myDropdown = () => {
     return (
@@ -20,7 +20,12 @@ describe('Dropdown', () => {
     const wrapper = shallow(myDropdown());
 
     it('renders without crashing', () => {
-        expect(wrapper.find(Button).shallow().text()).toBe('Profile');
+        expect(
+            wrapper
+                .find(Button)
+                .shallow()
+                .text()
+        ).toBe('Profile');
         expect(wrapper.find('input').exists()).toBe(false);
     });
 
@@ -40,4 +45,4 @@ describe('Dropdown', () => {
 
         expect(tree).toMatchSnapshot();
     });
-});
+});

components/dropdown/Dropdown.js → Components/dropdown/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import keycode from 'keycode';
 
-import Button from '../button/Button';
+import Button from '../button';
 
 const Dropdown = ({ isOpen, children, className, content, autoClose, autoCloseOutside }) => {
     const [open, setOpen] = useState(isOpen);

components/dropdown/DropdownItem.js → Components/dropdown/item.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
-import Button from '../button/Button';
-import Icon from '../icon/Icon';
+import Button from '../button';
+import Icon from '../icon';
 import { getClasses } from '../../helpers/component';
 
 const DropdownItem = ({ type, link, text, iconName, className, onClick, disabled }) => {

components/dropdown/DropdownMenu.js → Components/dropdown/menu.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DropdownItem from './DropdownItem';
+import DropdownItem from './item';
 
 const DropdownMenu = ({ list }) => {
     return (
         <ul>
-            {list.map((item, index) => <DropdownItem {...item} key={item.text + index}></DropdownItem>)}
+            {list.map((item, index) => (
+                <DropdownItem {...item} key={item.text + index} />
+            ))}
         </ul>
     );
 };

components/input/Checkbox.js → Components/input/Checkbox.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Input from './Input';
+import Input from './index';
 
 const Checkbox = ({ checked, ...rest }) => {
     return (

components/input/Password.js → Components/input/Password.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Input from './Input';
+import Input from './index';
 
 const Password = ({ ...rest }) => {
     const [type, setType] = useState('password');
@@ -9,9 +9,11 @@ const Password = ({ ...rest }) => {
     return (
         <>
             <Input type={type} {...rest} />
-            <button type="button" onClick={toggle}>TOGGLE</button>
+            <button type="button" onClick={toggle}>
+                TOGGLE
+            </button>
         </>
     );
 };
 
-export default Password;
+export default Password;

components/input/Radio.js → Components/input/Radio.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Input from './Input';
+import Input from './index';
 
 const Radio = ({ ...rest }) => {
     return (

components/input/Search.js → Components/input/Search.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Input from './Input';
+import Input from './index';
 import useDebounceInput from './useDebounceInput';
 
 /**

components/input/TextArea.js → Components/input/TextArea.js

@@ -55,7 +55,7 @@ const TextArea = ({ className, disabled, onPressEnter, onKeyDown, onChange, onFo
             onFocus={handleFocus}
             onKeyDown={handleKeyDown}
             {...rest}
-            />
+        />
     );
 };
 
@@ -78,4 +78,4 @@ TextArea.defaultProps = {
     rows: 5
 };
 
-export default TextArea;
+export default TextArea;

components/label/Label.js → Components/label/index.js

@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import { getClasses } from '../../helpers/component';
 
 const Label = ({ htmlFor, className, children, ...rest }) => {
-    return <label htmlFor={htmlFor} className={getClasses('pm-label', className)} {...rest}>{children}</label>;
+    return (
+        <label htmlFor={htmlFor} className={getClasses('pm-label', className)} {...rest}>
+            {children}
+        </label>
+    );
 };
 
 Label.propTypes = {
@@ -12,4 +16,4 @@ Label.propTypes = {
     htmlFor: PropTypes.string
 };
 
-export default Label;
+export default Label;

components/link/Info.js → Components/link/Info.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Href from './Href';
-import Icon from '../icon/Icon';
-import Tooltip from '../tooltip/Tooltip';
+import Href from './href';
+import Icon from '../icon';
+import Tooltip from '../tooltip';
 
 const wrapTooltip = (children, title) => <Tooltip title={title}>{children}</Tooltip>;
 const wrapLink = (children, url) => <Href url={url}>{children}</Href>;

components/link/LearnMore.js → Components/link/LearnMore.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { c } from 'ttag';
 
-import Href from './Href';
+import HrefLink from './href';
 
 const LearnMore = ({ url }) => {
-    return <Href url={url}>{c('Link').t`Learn more`}</Href>;
+    return <HrefLink url={url}>{c('Link').t`Learn more`}</HrefLink>;
 };
 
 LearnMore.propTypes = {