From 21dbba43826c540f5291ac7c1d5d68cbaa309337 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 4 Jan 2021 14:35:14 -0500 Subject: [PATCH 1/4] Add prettier to packages --- .eslintrc | 7 ++-- client/modules/IDE/components/FileNode.jsx | 2 +- package-lock.json | 42 ++++++++++++++++++++-- package.json | 3 ++ 4 files changed, 48 insertions(+), 6 deletions(-) diff --git a/.eslintrc b/.eslintrc index 1122f7e2e2..b2be2ffa01 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,5 @@ { - "extends": "airbnb", + "extends": ["airbnb", "prettier"], "parser": "babel-eslint", "env": { "browser": true, @@ -60,10 +60,13 @@ }, "allowChildren": false } + ], + "prettier/prettier": [ + "error" ] }, "plugins": [ - "react", "jsx-a11y", "import" + "react", "jsx-a11y", "import", "prettier" ], "settings": { "import/parser": "babel-eslint", diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx index f4b8166d31..c2d0271eea 100644 --- a/client/modules/IDE/components/FileNode.jsx +++ b/client/modules/IDE/components/FileNode.jsx @@ -271,7 +271,7 @@ class FileNode extends React.Component { } - + ); -export const DefaultTypeButton = () => ; +export const DefaultTypeButton = () => ( + +); -export const DisabledButton = () => ; +export const DisabledButton = () => ( + +); export const AnchorButton = () => ( - + ); export const ReactRouterLink = () => ( - + ); export const ButtonWithIconBefore = () => ( - + ); export const ButtonWithIconAfter = () => ( - + ); export const InlineButtonWithIconAfter = () => ( - ); diff --git a/client/common/icons.jsx b/client/common/icons.jsx index d4a458bca8..e4bb1d2de1 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -23,7 +23,6 @@ import CircleTerminal from '../images/circle-terminal.svg'; import CircleFolder from '../images/circle-folder.svg'; import CircleInfo from '../images/circle-info.svg'; - // HOC that adds the right web accessibility props // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html @@ -34,13 +33,17 @@ function withLabel(SvgComponent) { const StyledIcon = styled(SvgComponent)` &&& { color: ${prop('Icon.default')}; - & g, & path, & polygon { + & g, + & path, + & polygon { opacity: 1; fill: ${prop('Icon.default')}; } &:hover { color: ${prop('Icon.hover')}; - & g, & path, & polygon { + & g, + & path, + & polygon { opacity: 1; fill: ${prop('Icon.hover')}; } @@ -50,18 +53,16 @@ function withLabel(SvgComponent) { const { 'aria-label': ariaLabel } = props; if (ariaLabel) { - return (); + return ( + + ); } - return (); + return ; }; Icon.propTypes = { diff --git a/client/common/icons.stories.jsx b/client/common/icons.stories.jsx index 3c3307ab47..3df22e3196 100644 --- a/client/common/icons.stories.jsx +++ b/client/common/icons.stories.jsx @@ -12,7 +12,5 @@ export const AllIcons = () => { const names = Object.keys(icons); const SelectedIcon = icons[select('name', names, names[0])]; - return ( - - ); + return ; }; diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx index ea600cf91d..23fb9082f5 100644 --- a/client/components/AddRemoveButton.jsx +++ b/client/components/AddRemoveButton.jsx @@ -2,12 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withTranslation } from 'react-i18next'; - import AddIcon from '../images/plus.svg'; import RemoveIcon from '../images/minus.svg'; const AddRemoveButton = ({ type, onClick, t }) => { - const alt = type === 'add' ? t('AddRemoveButton.AltAddARIA') : t('AddRemoveButton.AltRemoveARIA'); + const alt = + type === 'add' + ? t('AddRemoveButton.AltAddARIA') + : t('AddRemoveButton.AltRemoveARIA'); const Icon = type === 'add' ? AddIcon : RemoveIcon; return ( diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx index 0cd29574ec..1bf7f5d0e4 100644 --- a/client/components/Dropdown.jsx +++ b/client/components/Dropdown.jsx @@ -13,11 +13,11 @@ const DropdownWrapper = styled.ul` color: ${prop('primaryTextColor')}; position: absolute; - right: ${props => (props.right ? 0 : 'initial')}; - left: ${props => (props.left ? 0 : 'initial')}; + right: ${(props) => (props.right ? 0 : 'initial')}; + left: ${(props) => (props.left ? 0 : 'initial')}; - ${props => (props.align === 'right' && 'right: 0;')} - ${props => (props.align === 'left' && 'left: 0;')} + ${(props) => props.align === 'right' && 'right: 0;'} + ${(props) => props.align === 'left' && 'left: 0;'} text-align: left; @@ -28,15 +28,20 @@ const DropdownWrapper = styled.ul` z-index: 2; border-radius: ${remSize(6)}; - & li:first-child { border-radius: ${remSize(5)} ${remSize(5)} 0 0; } - & li:last-child { border-radius: 0 0 ${remSize(5)} ${remSize(5)}; } + & li:first-child { + border-radius: ${remSize(5)} ${remSize(5)} 0 0; + } + & li:last-child { + border-radius: 0 0 ${remSize(5)} ${remSize(5)}; + } & li:hover { - background-color: ${prop('Button.hover.background')}; color: ${prop('Button.hover.foreground')}; - * { color: ${prop('Button.hover.foreground')}; } + * { + color: ${prop('Button.hover.foreground')}; + } } li { @@ -60,7 +65,9 @@ const DropdownWrapper = styled.ul` justify-content: flex-start; } - & button span { padding: 0px } + & button span { + padding: 0px; + } } `; @@ -68,32 +75,32 @@ const DropdownWrapper = styled.ul` // const MaybeIcon = (Element, label) => Element && ; const Dropdown = ({ items, align }) => ( - + {/* className="nav__items-left" */} - {items && items.map(({ - title, icon, href, action - }) => ( -
  • - {/* {MaybeIcon(icon, `Navigate to ${title}`)} */} - {href - ? {title} - : action()}>{title}} - -
    • - )) - } + {items && + items.map(({ title, icon, href, action }) => ( +
  • + {/* {MaybeIcon(icon, `Navigate to ${title}`)} */} + {href ? ( + {title} + ) : ( + action()}>{title} + )} +
    • + ))}     ); - Dropdown.propTypes = { align: PropTypes.oneOf(['left', 'right']), - items: PropTypes.arrayOf(PropTypes.shape({ - action: PropTypes.func, - icon: PropTypes.func, - href: PropTypes.string, - title: PropTypes.string - })), + items: PropTypes.arrayOf( + PropTypes.shape({ + action: PropTypes.func, + icon: PropTypes.func, + href: PropTypes.string, + title: PropTypes.string + }) + ) }; Dropdown.defaultProps = { diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index 993a9ff828..1bb435e72e 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -9,7 +9,10 @@ import { languageKeyToLabel } from '../i18n'; import * as IDEActions from '../modules/IDE/actions/ide'; import * as toastActions from '../modules/IDE/actions/toast'; import * as projectActions from '../modules/IDE/actions/project'; -import { setAllAccessibleOutput, setLanguage } from '../modules/IDE/actions/preferences'; +import { + setAllAccessibleOutput, + setLanguage +} from '../modules/IDE/actions/preferences'; import { logoutUser } from '../modules/User/actions'; import getConfig from '../utils/getConfig'; @@ -200,7 +203,11 @@ class Nav extends React.PureComponent { handleShare() { const { username } = this.props.params; - this.props.showShareModal(this.props.project.id, this.props.project.name, username); + this.props.showShareModal( + this.props.project.id, + this.props.project.name, + username + ); this.setDropdown('none'); } @@ -242,11 +249,20 @@ class Nav extends React.PureComponent { return (