From 0409aa61f15d22d00fd44693c91b97f788ac96a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20L=2E=20C=2E=20Ferreira?= Date: Fri, 9 Apr 2021 14:02:56 -0300 Subject: [PATCH] style: format code with new prettier rules affects: @crave/farmblocks-alert, @crave/farmblocks-amount-selectors, @crave/farmblocks-button, @crave/farmblocks-card, @crave/farmblocks-carousel, @crave/farmblocks-dropdown, @crave/farmblocks-empty-state, @crave/farmblocks-filter-popover, @crave/farmblocks-footer, @crave/farmblocks-form-wrapper, @crave/farmblocks-hoc-input, @crave/farmblocks-icon, @crave/farmblocks-image, @crave/farmblocks-input-checkbox, @crave/farmblocks-input-phone, @crave/farmblocks-input-radio, @crave/farmblocks-input-select, @crave/farmblocks-input-text, @crave/farmblocks-label, @crave/farmblocks-link, @crave/farmblocks-map-balloon, @crave/farmblocks-modal, @crave/farmblocks-popover, @crave/farmblocks-dev-scaffold, @crave/farmblocks-search-field, @crave/farmblocks-sidenav, @crave/farmblocks-stepper, @crave/farmblocks-table, @crave/farmblocks-tags, @crave/farmblocks-text, @crave/farmblocks-tooltip --- babel.config.js | 2 +- packages/alert/src/Alert.story.js | 4 +- packages/alert/src/styledComponents/Alert.js | 8 +- .../src/components/AmountSelectors.js | 6 +- packages/button/src/Button.js | 12 +- packages/button/src/Button.story.js | 2 +- .../button/src/styledComponents/Button.js | 4 +- packages/card/src/Card.js | 2 +- packages/card/src/styledComponents/Card.js | 11 +- .../carousel/src/styledComponents/Carousel.js | 31 ++--- packages/dropdown/src/components/Dropdown.js | 2 +- .../dropdown/src/components/DropdownItem.js | 2 +- .../src/components/DropdownItem.story.js | 4 +- .../styledComponents/DropdownItemWrapper.js | 8 +- .../styledComponents/DropdownMenuWrapper.js | 8 +- packages/empty-state/src/Buttons.js | 2 +- packages/filter-popover/src/FilterPopover.js | 112 +++++++++--------- .../filter-popover/src/FilterPopover.story.js | 2 +- packages/footer/src/components/Footer.js | 36 +++--- .../footer/src/components/HelperContent.js | 4 +- packages/form-wrapper/src/FormWrapper.js | 2 +- packages/hoc-input/src/formInput.js | 17 ++- .../hoc-input/src/formInput.story.utils.js | 14 +-- .../hoc-input/src/styledComponents/Wrapper.js | 7 +- packages/icon/buildJSX.js | 10 +- packages/icon/src/Icon.js | 2 +- packages/icon/src/IconsBrowser.js | 2 +- packages/image/src/Image.js | 4 +- packages/image/src/Image.story.js | 14 +-- packages/image/src/styledComponents/Image.js | 4 +- packages/input-checkbox/src/Checkbox.js | 4 +- packages/input-checkbox/src/Checkbox.story.js | 4 +- .../src/styledComponents/Checkbox.js | 19 +-- packages/input-phone/src/ChevronDown.js | 2 +- packages/input-phone/src/CountryList.js | 2 +- .../input-phone/src/CountrySelectorTrigger.js | 14 +-- packages/input-phone/src/PhoneInput.hooks.js | 12 +- packages/input-phone/src/PhoneInput.js | 8 +- packages/input-phone/src/PhoneInput.story.js | 6 +- packages/input-phone/src/PhoneInput.styled.js | 4 +- packages/input-phone/updateCountryList.js | 8 +- packages/input-radio/src/Radio.js | 2 +- packages/input-radio/src/RadioGroup.js | 6 +- .../input-radio/src/styledComponents/Label.js | 4 +- packages/input-select/src/Select.js | 30 ++--- packages/input-select/src/Select.story.js | 6 +- .../input-select/src/components/Item.story.js | 4 +- .../input-select/src/components/withImage.js | 2 +- .../src/styledComponents/DropdownWrapper.js | 4 +- packages/input-text/src/ProtectedCover.js | 50 ++++---- packages/input-text/src/protectedValue.js | 15 ++- packages/label/src/Label.js | 2 +- packages/link/src/components/Link.js | 2 +- packages/link/src/styledComponents/Link.js | 6 +- packages/map-balloon/src/MapBalloon.js | 6 +- packages/map-balloon/src/MapBalloon.story.js | 6 +- .../src/styledComponents/Balloon.js | 16 +-- .../src/styledComponents/PhotoBox.js | 2 +- .../map-balloon/src/styledComponents/Pin.js | 16 +-- .../src/styledComponents/SingleImage.js | 6 +- .../src/styledComponents/Wrapper.js | 6 +- packages/modal/src/DialogModal.js | 2 +- packages/modal/src/Modal.hooks.js | 2 +- packages/modal/src/Modal.js | 2 +- packages/modal/src/Modal.story.js | 66 +++++------ packages/modal/src/helpers.js | 2 +- packages/popover/src/Popover.js | 8 +- packages/popover/src/Popover.story.js | 14 +-- packages/scaffold/src/create-component.js | 4 +- packages/scaffold/src/templates/component.js | 2 +- packages/scaffold/src/templates/index.js | 2 +- packages/search-field/src/SearchField.js | 18 +-- .../search-field/src/SearchField.story.js | 8 +- .../search-field/src/components/Menu.story.js | 8 +- .../search-field/src/components/ScrollBox.js | 6 +- .../src/components/ScrollBox.story.js | 6 +- .../src/styledComponents/ScrollWrapper.js | 2 +- packages/sidenav/src/SideNav.story.js | 32 ++--- .../src/components/NavButton/CloseButton.js | 2 +- .../src/components/NavButton/ToggleButton.js | 2 +- .../src/components/NavItem/NavItem.story.js | 2 +- .../src/components/NavItem/NavItem.styled.js | 2 +- .../helpers/PageWrapper/PageWrapper.story.js | 2 +- packages/sidenav/src/utils/useToggle.js | 4 +- packages/stepper/src/components/Step.js | 2 +- packages/stepper/src/styledComponents/Step.js | 2 +- packages/table/src/components.styled.js | 4 +- packages/table/src/hooks/useTableMap.js | 5 +- packages/tag/src/components/Tag.js | 44 ++++--- .../components/styledComponent/StyledTag.js | 6 +- packages/text/src/components/Text.js | 19 ++- packages/tooltip/src/Tooltip.js | 8 +- packages/tooltip/src/Tooltip.styled.js | 2 +- packages/tooltip/src/TooltipContent.js | 2 +- packages/tooltip/src/TooltipContent.styled.js | 12 +- 95 files changed, 444 insertions(+), 472 deletions(-) diff --git a/babel.config.js b/babel.config.js index 8cb5e62e1..5e958941f 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,4 +1,4 @@ -module.exports = api => { +module.exports = (api) => { api.cache(true); return { presets: ["@babel/preset-react"], diff --git a/packages/alert/src/Alert.story.js b/packages/alert/src/Alert.story.js index 7a74d6f17..7d1016a5f 100644 --- a/packages/alert/src/Alert.story.js +++ b/packages/alert/src/Alert.story.js @@ -10,10 +10,10 @@ const StyledAlert = styled(Alert)` transform: rotate(5deg); `; -const ExtendedAlert = props => ; +const ExtendedAlert = (props) => ; storiesOf("Alert", module) - .addDecorator(storyFn => ( + .addDecorator((storyFn) => (
{storyFn()}
)) .add("default", () => ( diff --git a/packages/alert/src/styledComponents/Alert.js b/packages/alert/src/styledComponents/Alert.js index ca1cc00ac..ab62ba92c 100644 --- a/packages/alert/src/styledComponents/Alert.js +++ b/packages/alert/src/styledComponents/Alert.js @@ -7,7 +7,7 @@ import { ATTENTION } from "../constants/alertTypes"; const Container = styled.div` position: fixed; - ${props => (props.bottomAligned ? "bottom: 0" : "top: 0")}; + ${(props) => (props.bottomAligned ? "bottom: 0" : "top: 0")}; left: 0; right: 0; @@ -15,12 +15,12 @@ const Container = styled.div` justify-content: center; align-items: center; - background-color: ${props => bgColors[props.type]}; + background-color: ${(props) => bgColors[props.type]}; box-shadow: 0 2px 2px 0 rgba(46, 204, 113, 0.16); border: solid 1px rgba(0, 0, 0, 0.16); min-height: ${2 * 20 + 32}px; - z-index: ${props => props.zIndex}; + z-index: ${(props) => props.zIndex}; > p { font-family: Lato, sans-serif; @@ -28,7 +28,7 @@ const Container = styled.div` font-weight: 600; line-height: 1.33; text-align: center; - color: ${props => (props.type === ATTENTION ? colors.CARBON : "#ffffff")}; + color: ${(props) => (props.type === ATTENTION ? colors.CARBON : "#ffffff")}; margin: 0; } diff --git a/packages/amount-selectors/src/components/AmountSelectors.js b/packages/amount-selectors/src/components/AmountSelectors.js index f3e848bd4..fcf359d47 100644 --- a/packages/amount-selectors/src/components/AmountSelectors.js +++ b/packages/amount-selectors/src/components/AmountSelectors.js @@ -37,7 +37,7 @@ class AmountSelectors extends React.Component { const validValue = parseFloat(value); this.setState( - state => ({ + (state) => ({ value: validValue, displayValue: validValue || state.displayValue, }), @@ -64,7 +64,7 @@ class AmountSelectors extends React.Component { return this.props.onChange(validValue); }; - getValidValue = value => { + getValidValue = (value) => { const parsedValue = parseFloat(value) || 0; const validValue = Math.min( this.props.max, @@ -74,7 +74,7 @@ class AmountSelectors extends React.Component { return Number(validValue.toFixed(2)); }; - updateStateWithNewValue = value => { + updateStateWithNewValue = (value) => { const validValue = this.getValidValue(value); this.setState({ value: validValue, diff --git a/packages/button/src/Button.js b/packages/button/src/Button.js index f4cbc2782..a8a9942bc 100644 --- a/packages/button/src/Button.js +++ b/packages/button/src/Button.js @@ -98,21 +98,21 @@ Button.defaultProps = { export default Button; -export const PrimaryButton = props => ( +export const PrimaryButton = (props) => ( - )} - content={dismiss => ( - { + {props.hasValue && ( +
+ +
+ )} + + )} + content={(dismiss) => ( + { + dismiss(); + props.onFormCancelClick?.(e); + }} + onSave={(e) => { + if (props.dismissOnSave) { dismiss(); - props.onFormCancelClick?.(e); - }} - onSave={e => { - if (props.dismissOnSave) { - dismiss(); - } - props.onFormSaveClick(e, dismiss); - }} - saveLabel={props.formSaveLabel} - cancelLabel={props.formCancelLabel} - title={props.formTitle} - loading={props.formLoading} - saveButtonProps={{ small: true }} - > - {typeof props.formContent === "function" - ? props.formContent(dismiss) - : props.formContent} - - )} - /> - ); -}; + } + props.onFormSaveClick(e, dismiss); + }} + saveLabel={props.formSaveLabel} + cancelLabel={props.formCancelLabel} + title={props.formTitle} + loading={props.formLoading} + saveButtonProps={{ small: true }} + > + {typeof props.formContent === "function" + ? props.formContent(dismiss) + : props.formContent} + + )} + /> +); FilterPopover.defaultProps = { formSaveLabel: "Filter", diff --git a/packages/filter-popover/src/FilterPopover.story.js b/packages/filter-popover/src/FilterPopover.story.js index 8c3d2bffa..640e06a95 100644 --- a/packages/filter-popover/src/FilterPopover.story.js +++ b/packages/filter-popover/src/FilterPopover.story.js @@ -90,7 +90,7 @@ storiesOf("Filter Popover", module) ( + formContent={(dismiss) => ( )} /> diff --git a/packages/footer/src/components/Footer.js b/packages/footer/src/components/Footer.js index 60a9c1df3..200f920dd 100644 --- a/packages/footer/src/components/Footer.js +++ b/packages/footer/src/components/Footer.js @@ -29,25 +29,23 @@ const ActionsContainer = styled.div` } `; -const Footer = props => { - return ( - - - - - {props.actions} - - - ); -}; +const Footer = (props) => ( + + + + + {props.actions} + + +); Footer.propTypes = { helpImageSrc: PropTypes.string, diff --git a/packages/footer/src/components/HelperContent.js b/packages/footer/src/components/HelperContent.js index f11aa9b0d..bba577dac 100644 --- a/packages/footer/src/components/HelperContent.js +++ b/packages/footer/src/components/HelperContent.js @@ -14,7 +14,7 @@ const Container = styled.div` align-items: center; .text { - margin-bottom: ${props => props.size === fontSizes.MEDIUM && "8px"}; + margin-bottom: ${(props) => props.size === fontSizes.MEDIUM && "8px"}; } > .image { @@ -24,7 +24,7 @@ const Container = styled.div` Container.displayName = "HelperContentContainer"; -const HelperContent = props => { +const HelperContent = (props) => { const renderLink = props.linkText && (props.linkHref || props.linkOnClick); return ( diff --git a/packages/form-wrapper/src/FormWrapper.js b/packages/form-wrapper/src/FormWrapper.js index 3090f9b0b..8a7214f46 100644 --- a/packages/form-wrapper/src/FormWrapper.js +++ b/packages/form-wrapper/src/FormWrapper.js @@ -8,7 +8,7 @@ export const Body = styled.div` padding: 16px 16px 0 16px; `; -const FormWrapper = props => { +const FormWrapper = (props) => { const { title, extraContent, diff --git a/packages/hoc-input/src/formInput.js b/packages/hoc-input/src/formInput.js index afad922ef..20eb90f3e 100644 --- a/packages/hoc-input/src/formInput.js +++ b/packages/hoc-input/src/formInput.js @@ -42,8 +42,8 @@ export const formInputProps = { const getValueFromProps = ({ input, value }) => (input ? input.value : value); -const formInput = WrappedComponent => { - return class Input extends React.Component { +const formInput = (WrappedComponent) => + class Input extends React.Component { static displayName = wrapDisplayName(WrappedComponent, "formInput"); static propTypes = { @@ -71,7 +71,7 @@ const formInput = WrappedComponent => { } } - componentDidUpdate = prevProps => { + componentDidUpdate = (prevProps) => { if (this.props.focused && !prevProps.focused) { this.setInputFocus(); } @@ -109,7 +109,7 @@ const formInput = WrappedComponent => { this.inputRef?.focus(); }; - onChange = event => { + onChange = (event) => { this.setState({ value: event.value || event.target.value, }); @@ -118,7 +118,7 @@ const formInput = WrappedComponent => { this.props.onChange?.(event); }; - onFocus = event => { + onFocus = (event) => { this.props.onFocus?.(event); if (!this.props.autoControlFocusedStyle) { @@ -127,7 +127,7 @@ const formInput = WrappedComponent => { this.setState({ focused: true }); }; - onBlur = event => { + onBlur = (event) => { this.props.onBlur?.(event); if (!this.props.autoControlFocusedStyle) { @@ -174,7 +174,7 @@ const formInput = WrappedComponent => { // eslint-disable-next-line jsx-a11y/no-static-element-interactions
{ + ref={(element) => { this.inputRef = element && element.querySelector("input, textarea"); }} > @@ -257,7 +257,7 @@ const formInput = WrappedComponent => { )} - {validationMessages?.map(text => ( + {validationMessages?.map((text) => ( { ); } }; -}; export default formInput; diff --git a/packages/hoc-input/src/formInput.story.utils.js b/packages/hoc-input/src/formInput.story.utils.js index 38af7e6ed..8c470ca42 100644 --- a/packages/hoc-input/src/formInput.story.utils.js +++ b/packages/hoc-input/src/formInput.story.utils.js @@ -4,9 +4,11 @@ import { space, layout } from "styled-system"; import formInput from "./index"; -export const FbInput = formInput(props => React.createElement("input", props)); +export const FbInput = formInput((props) => + React.createElement("input", props), +); -export const Container = styled.div.attrs(props => ({ +export const Container = styled.div.attrs((props) => ({ width: props.width || [1, 1, 1, 1 / 3], }))` ${layout}; @@ -21,11 +23,7 @@ export const WithValue = ({ children }) => { { - setValue( - Math.random() - .toString(36) - .substr(2, 9), - ); + setValue(Math.random().toString(36).substr(2, 9)); }} value="Click me to change input value" /> @@ -43,7 +41,7 @@ export const FocusContainer = ({ children }) => { { - setFocused(value => !value); + setFocused((value) => !value); }} value="Click me to toggle focused style" /> diff --git a/packages/hoc-input/src/styledComponents/Wrapper.js b/packages/hoc-input/src/styledComponents/Wrapper.js index 48de2fe67..2f7460dfc 100644 --- a/packages/hoc-input/src/styledComponents/Wrapper.js +++ b/packages/hoc-input/src/styledComponents/Wrapper.js @@ -15,7 +15,7 @@ const getColorByStatus = ({ fallbackColor }) => ({ return fallbackColor; }; -const customCursor = props => (props.disabled ? "default" : "pointer"); +const customCursor = (props) => (props.disabled ? "default" : "pointer"); const fontStyles = css` font-family: Lato, sans-serif; @@ -42,7 +42,8 @@ const Wrapper = styled.div` border: solid 1px; border-radius: ${({ borderRadius }) => borderRadius}; border-color: ${getColorByStatus({ fallbackColor: colors.GREY_16 })}; - background-color: ${props => (props.disabled ? colors.GREY_16 : "#ffffff")}; + background-color: ${(props) => + props.disabled ? colors.GREY_16 : "#ffffff"}; ${focusedStyle}; @@ -80,7 +81,7 @@ const Wrapper = styled.div` border: 0; flex: 1; outline: none; - color: ${props => (props.disabled ? colors.GREY_32 : colors.CARBON)}; + color: ${(props) => (props.disabled ? colors.GREY_32 : colors.CARBON)}; background: none; &::placeholder { color: ${colors.GREY_32}; diff --git a/packages/icon/buildJSX.js b/packages/icon/buildJSX.js index 6a138814e..f3fa23500 100644 --- a/packages/icon/buildJSX.js +++ b/packages/icon/buildJSX.js @@ -18,8 +18,8 @@ if (!fs.existsSync(jsxSourcePath)) { fs.mkdirSync(jsxSourcePath); } -const isDir = name => fs.lstatSync(`${svgSourcePath}/${name}`).isDirectory(); -const isSvg = file => path.extname(file).toLowerCase() === ".svg"; +const isDir = (name) => fs.lstatSync(`${svgSourcePath}/${name}`).isDirectory(); +const isSvg = (file) => path.extname(file).toLowerCase() === ".svg"; const groups = fs .readdirSync(svgSourcePath) @@ -147,7 +147,7 @@ async function buildIndex(components) { "./src/jsx/index.js", components .map( - component => + (component) => `export { default as ${component} } from "./${component}";`, ) .sort() @@ -164,6 +164,4 @@ async function buildIndex(components) { } } -buildJSX() - .then(buildIndex) - .then(lintFiles); +buildJSX().then(buildIndex).then(lintFiles); diff --git a/packages/icon/src/Icon.js b/packages/icon/src/Icon.js index f146892b8..55aad6158 100644 --- a/packages/icon/src/Icon.js +++ b/packages/icon/src/Icon.js @@ -34,7 +34,7 @@ IconWrapper.defaultProps = { size: "1em", }; -export const withWrapper = Icon => +export const withWrapper = (Icon) => // eslint-disable-next-line react/prop-types React.forwardRef(({ className = "", ...props }, ref) => ( diff --git a/packages/icon/src/IconsBrowser.js b/packages/icon/src/IconsBrowser.js index f07e0b574..61cadd796 100644 --- a/packages/icon/src/IconsBrowser.js +++ b/packages/icon/src/IconsBrowser.js @@ -83,7 +83,7 @@ export default () => (
- {groupNames.map(groupName => ( + {groupNames.map((groupName) => ( <> {groupName} diff --git a/packages/image/src/Image.js b/packages/image/src/Image.js index 54d53c2e1..1b8c38ed2 100644 --- a/packages/image/src/Image.js +++ b/packages/image/src/Image.js @@ -5,9 +5,7 @@ import StyledImage from "./styledComponents/Image"; import { MEDIUM } from "./constants/thumbnailSizes"; import { COVER } from "./constants/fitModes"; -const Image = props => { - return ; -}; +const Image = (props) => ; Image.propTypes = { src: PropTypes.string.isRequired, diff --git a/packages/image/src/Image.story.js b/packages/image/src/Image.story.js index 9760f6e56..73eaf4935 100644 --- a/packages/image/src/Image.story.js +++ b/packages/image/src/Image.story.js @@ -19,7 +19,7 @@ const RenderImage = ({ ...props }) => ; -const Group = props => ( +const Group = (props) => (
{Object.keys(badgeSizes) .reverse() - .map(size => ( + .map((size) => (
{`${size} - ${badgeSizes[size]}px`}
@@ -52,7 +52,7 @@ storiesOf("Image", module)
{Object.keys(thumbnailSizes) .reverse() - .map(size => ( + .map((size) => (
{`${size} - ${thumbnailSizes[size]}px`}
@@ -69,7 +69,7 @@ storiesOf("Image", module)
{Object.keys(badgeSizes) .reverse() - .map(size => ( + .map((size) => (
{`${size} - ${badgeSizes[size]}px`}
@@ -82,7 +82,7 @@ storiesOf("Image", module)
{Object.keys(thumbnailSizes) .reverse() - .map(size => ( + .map((size) => (
{`${size} - ${thumbnailSizes[size]}px`}
@@ -93,13 +93,13 @@ storiesOf("Image", module) )) .add("image fit values", () => ( - {Object.keys(imgSrcs).map(src => ( + {Object.keys(imgSrcs).map((src) => ( <>
{src} image
- {Object.keys(fitModes).map(mode => ( + {Object.keys(fitModes).map((mode) => (
{`${fitModes[mode]}`}
diff --git a/packages/image/src/styledComponents/Image.js b/packages/image/src/styledComponents/Image.js index 8ba3a865d..918793bbd 100644 --- a/packages/image/src/styledComponents/Image.js +++ b/packages/image/src/styledComponents/Image.js @@ -3,7 +3,7 @@ import styled from "styled-components"; const getBorderRadius = ({ borderRadius, badge }) => badge ? "100%" : borderRadius; -const StyledImage = styled.img.attrs(props => ({ +const StyledImage = styled.img.attrs((props) => ({ width: props.width || props.size, height: props.height || props.size, }))` @@ -12,6 +12,6 @@ const StyledImage = styled.img.attrs(props => ({ object-fit: ${({ fit }) => fit}; box-shadow: ${({ withBoxShadow }) => withBoxShadow && "0px 4px 4px 0px rgba(0, 0, 0, 0.16);"}; - ${props => props.css}; + ${(props) => props.css}; `; export default StyledImage; diff --git a/packages/input-checkbox/src/Checkbox.js b/packages/input-checkbox/src/Checkbox.js index bdebe7b61..f0a7c6970 100644 --- a/packages/input-checkbox/src/Checkbox.js +++ b/packages/input-checkbox/src/Checkbox.js @@ -28,7 +28,7 @@ const createCheckbox = ({ isSwitch }) => clicked: false, }; - onMouseUp = event => { + onMouseUp = (event) => { if (isSwitch) { // we use a clicked state to flag that the // switch change started from a pointer click and not the spacebar @@ -37,7 +37,7 @@ const createCheckbox = ({ isSwitch }) => return this.props.onMouseUp(event); }; - onChange = event => { + onChange = (event) => { if (this.state.clicked) { // we only want to show the focus outline for when // the focus was gained with a tab keypress and not a click diff --git a/packages/input-checkbox/src/Checkbox.story.js b/packages/input-checkbox/src/Checkbox.story.js index 4aa3fc638..b986c476c 100644 --- a/packages/input-checkbox/src/Checkbox.story.js +++ b/packages/input-checkbox/src/Checkbox.story.js @@ -16,7 +16,7 @@ const checkboxStories = (moduleTitle, Checkbox) => return ( { + onChange={(e) => { setChecked(e.target.checked); action("onChange")(e); }} @@ -77,7 +77,7 @@ const checkboxStories = (moduleTitle, Checkbox) => { + onChange={(e) => { setLoading(true); setChecked(e.target.checked); setTimeout(() => { diff --git a/packages/input-checkbox/src/styledComponents/Checkbox.js b/packages/input-checkbox/src/styledComponents/Checkbox.js index 5389569ce..68d230875 100644 --- a/packages/input-checkbox/src/styledComponents/Checkbox.js +++ b/packages/input-checkbox/src/styledComponents/Checkbox.js @@ -5,7 +5,7 @@ const checkboxSize = "16px"; const toggleSize = "24px"; const margin = "8px"; -const checkboxColors = props => { +const checkboxColors = (props) => { if (props.disabled) { return css` color: ${colors.GREY_16}; @@ -20,7 +20,7 @@ const checkboxColors = props => { `; }; -const checkboxStyles = props => +const checkboxStyles = (props) => !props.switch && css` max-width: ${checkboxSize}; @@ -53,7 +53,7 @@ export const Loading = styled.div` } `; -const switchBackground = props => { +const switchBackground = (props) => { if (props.disabled) { return colors.GREY_32; } @@ -63,7 +63,7 @@ const switchBackground = props => { return colors.SUGAR; }; -const switchStyles = props => +const switchStyles = (props) => props.switch && css` width: 56px; @@ -89,7 +89,7 @@ const switchStyles = props => background: ${switchBackground}; `; -const hoverStyles = props => { +const hoverStyles = (props) => { /* eslint-disable consistent-return */ if (props.disabled) { @@ -135,7 +135,7 @@ const hoverStyles = props => { const Label = styled.label` display: inline-flex; - cursor: ${props => (props.disabled ? "default" : "pointer")}; + cursor: ${(props) => (props.disabled ? "default" : "pointer")}; padding-left: ${margin}; .centerVisibleCheckbox { @@ -161,16 +161,17 @@ const Label = styled.label` } .label { - margin-left: ${props => (props.hasText ? margin : "0")}; + margin-left: ${(props) => (props.hasText ? margin : "0")}; } :hover .visibleCheckbox { ${hoverStyles}; - border-width: ${props => (props.disabled || props.switch ? "1px" : "2px")}; + border-width: ${(props) => + props.disabled || props.switch ? "1px" : "2px"}; } .hiddenCheckbox:focus + div .visibleCheckbox { - ${props => + ${(props) => props.switch ? css` outline: auto 2px Highlight; diff --git a/packages/input-phone/src/ChevronDown.js b/packages/input-phone/src/ChevronDown.js index be88ed390..2dde2b0a3 100644 --- a/packages/input-phone/src/ChevronDown.js +++ b/packages/input-phone/src/ChevronDown.js @@ -1,6 +1,6 @@ import React from "react"; -const ChevronDown = props => ( +const ChevronDown = (props) => ( ( height={height} itemCount={data.items.length} itemData={data} - itemKey={index => data.items[index].code} + itemKey={(index) => data.items[index].code} itemSize={54} width={width} ref={ref} diff --git a/packages/input-phone/src/CountrySelectorTrigger.js b/packages/input-phone/src/CountrySelectorTrigger.js index f2aec9d00..607f42d28 100644 --- a/packages/input-phone/src/CountrySelectorTrigger.js +++ b/packages/input-phone/src/CountrySelectorTrigger.js @@ -13,14 +13,12 @@ const Trigger = styled.div` `; const CountrySelectorTrigger = React.memo( - ({ callingCode, flag, code, ...props }) => { - return ( - - {emojiSupport() ? flag : code} +{callingCode} - - - ); - }, + ({ callingCode, flag, code, ...props }) => ( + + {emojiSupport() ? flag : code} +{callingCode} + + + ), ); CountrySelectorTrigger.propTypes = { diff --git a/packages/input-phone/src/PhoneInput.hooks.js b/packages/input-phone/src/PhoneInput.hooks.js index cf601fbf9..e0dc0684d 100644 --- a/packages/input-phone/src/PhoneInput.hooks.js +++ b/packages/input-phone/src/PhoneInput.hooks.js @@ -13,7 +13,7 @@ export const useCountrySearch = (data, query, priority) => { try { const codes = priority?.split(","); - const topCountries = data?.filter(country => + const topCountries = data?.filter((country) => codes?.includes(country.code), ); @@ -23,7 +23,7 @@ export const useCountrySearch = (data, query, priority) => { ); const orderedTopCountries = - codes?.map(code => indexedTopCountries[code]) || []; + codes?.map((code) => indexedTopCountries[code]) || []; return [...orderedTopCountries, ...data]; } catch (_error) { @@ -43,15 +43,15 @@ export const useCountrySearch = (data, query, priority) => { return allCountries; } - return fuse.current.search(query).map(result => result.item); + return fuse.current.search(query).map((result) => result.item); }; export const useHighlight = ({ items, listRef, selectFn, cancelFnRef }) => { const [highlightIndex, setHighlightIndex] = useState(-1); const changeHighlight = useCallback( - modifier => { - setHighlightIndex(index => { + (modifier) => { + setHighlightIndex((index) => { if (!items.length) { return -1; } @@ -75,7 +75,7 @@ export const useHighlight = ({ items, listRef, selectFn, cancelFnRef }) => { }, [highlightIndex, listRef]); const handleKeyDown = useCallback( - event => { + (event) => { const { key } = event; if (key === "Enter") { if (highlightIndex === -1) { diff --git a/packages/input-phone/src/PhoneInput.js b/packages/input-phone/src/PhoneInput.js index e2b1f449c..a82039fc3 100644 --- a/packages/input-phone/src/PhoneInput.js +++ b/packages/input-phone/src/PhoneInput.js @@ -90,7 +90,7 @@ const PhoneInput = ({ [country], ); - const handleCountrySelection = useCallback(code => { + const handleCountrySelection = useCallback((code) => { setSelectedCountry(code); setCountryQuery(""); triggerChange("", code); @@ -104,7 +104,7 @@ const PhoneInput = ({ cancelFnRef: dismissRef, }); - const handleSearchChange = useCallback(event => { + const handleSearchChange = useCallback((event) => { setCountryQuery(event.target.value); resetIndex(); listRef.current?.scrollTo(0); @@ -154,11 +154,11 @@ const PhoneInput = ({ code={country} /> } - content={dismiss => { + content={(dismiss) => { dismissRef.current = dismiss; return ( { + onClick={(event) => { // We stop propagation to avoid giving focus to the main input // This happens because the popover is inside the input wrapper event.stopPropagation(); diff --git a/packages/input-phone/src/PhoneInput.story.js b/packages/input-phone/src/PhoneInput.story.js index 31ff850d1..04acf8009 100644 --- a/packages/input-phone/src/PhoneInput.story.js +++ b/packages/input-phone/src/PhoneInput.story.js @@ -6,7 +6,7 @@ import PhoneInput from "."; export default { title: "Form|Phone Input", component: PhoneInput, - decorators: [story =>
{story()}
], + decorators: [(story) =>
{story()}
], parameters: { componentSubtitle: "An Input component for international phone numbers", }, @@ -23,7 +23,7 @@ export const withState = () => { const [value, setValue] = useState(""); return ( { + onChange={(newValue) => { action("onChange")(newValue); setValue(newValue); }} @@ -47,7 +47,7 @@ export const changingDefaultCountry = () => { return ( <> { + onChange={(newValue) => { action("onChange")(newValue); setValue(newValue); }} diff --git a/packages/input-phone/src/PhoneInput.styled.js b/packages/input-phone/src/PhoneInput.styled.js index e8980ef89..053da4724 100644 --- a/packages/input-phone/src/PhoneInput.styled.js +++ b/packages/input-phone/src/PhoneInput.styled.js @@ -8,7 +8,7 @@ export const PopoverWrapper = styled.div` height: 100%; min-height: 340px; min-width: 280px; - @media only screen and (max-width: ${props => props.fullScreenBreakpoint}) { + @media only screen and (max-width: ${(props) => props.fullScreenBreakpoint}) { min-height: calc(100vh - 32px); } `; @@ -24,7 +24,7 @@ export const CountryListWrapper = styled.ul` export const NationalNumberInput = styled(TextInput)` .input { overflow: unset; - @media only screen and (max-width: ${props => + @media only screen and (max-width: ${(props) => props.tooltipProps?.fullScreenBreakpoint || props.fullScreenBreakpoint}) { input { diff --git a/packages/input-phone/updateCountryList.js b/packages/input-phone/updateCountryList.js index 50cf179a8..292abb73f 100644 --- a/packages/input-phone/updateCountryList.js +++ b/packages/input-phone/updateCountryList.js @@ -5,16 +5,16 @@ const { getCountryCallingCode } = require("libphonenumber-js"); const getNativeNames = (names, englishName) => { const nativeNames = Array.from( - new Set(Object.keys(names).map(lang => names[lang].common)), + new Set(Object.keys(names).map((lang) => names[lang].common)), ) - .filter(nativeName => nativeName !== englishName) + .filter((nativeName) => nativeName !== englishName) .join("; "); return nativeNames; }; const trimmedList = countries - .map(country => { + .map((country) => { let callingCode; try { callingCode = getCountryCallingCode(country.cca2); @@ -32,7 +32,7 @@ const trimmedList = countries altSpellings: country.altSpellings, }; }) - .filter(country => country !== null) + .filter((country) => country !== null) .sort((a, b) => a.name.localeCompare(b.name, "en")); const flags = trimmedList.reduce((acc, country) => { diff --git a/packages/input-radio/src/Radio.js b/packages/input-radio/src/Radio.js index b6f01713d..93e97bacc 100644 --- a/packages/input-radio/src/Radio.js +++ b/packages/input-radio/src/Radio.js @@ -17,7 +17,7 @@ class Radio extends React.Component { } } - handleClick = event => { + handleClick = (event) => { const { disabled, value } = this.props; const { checked } = this.state; if (!disabled) { diff --git a/packages/input-radio/src/RadioGroup.js b/packages/input-radio/src/RadioGroup.js index de61032ea..10e735d92 100644 --- a/packages/input-radio/src/RadioGroup.js +++ b/packages/input-radio/src/RadioGroup.js @@ -8,14 +8,14 @@ class RadioGroup extends React.Component { value: this.props.defaultValue, }; - componentDidUpdate = prevProps => { + componentDidUpdate = (prevProps) => { const { defaultValue } = this.props; if (prevProps.defaultValue !== defaultValue) { this.setState({ value: defaultValue }); } }; - handleChange = value => { + handleChange = (value) => { this.setState({ value, }); @@ -29,7 +29,7 @@ class RadioGroup extends React.Component { const allChildrenProps = { name, onChange: this.handleChange }; return ( - {React.Children.map(children, child => { + {React.Children.map(children, (child) => { const checked = child.props.value === value; const childProps = { checked, diff --git a/packages/input-radio/src/styledComponents/Label.js b/packages/input-radio/src/styledComponents/Label.js index 27781b841..16e946520 100644 --- a/packages/input-radio/src/styledComponents/Label.js +++ b/packages/input-radio/src/styledComponents/Label.js @@ -1,7 +1,7 @@ import styled, { css } from "styled-components"; import { colors } from "@crave/farmblocks-theme"; -const enabledStyles = props => +const enabledStyles = (props) => (props.disabled && css` .visibleInput { @@ -18,7 +18,7 @@ const enabledStyles = props => } `; -const checkedStyles = props => +const checkedStyles = (props) => props.checked && css` .checkedIndicator { diff --git a/packages/input-select/src/Select.js b/packages/input-select/src/Select.js index d3ac2bd5d..4eb99219d 100644 --- a/packages/input-select/src/Select.js +++ b/packages/input-select/src/Select.js @@ -41,7 +41,7 @@ class Select extends React.Component { }; } - componentDidUpdate = prevProps => { + componentDidUpdate = (prevProps) => { const { value } = this.props; if ( ((value || value === 0) && @@ -56,7 +56,7 @@ class Select extends React.Component { } }; - onMenuVisibilityChange = isMenuOpen => { + onMenuVisibilityChange = (isMenuOpen) => { if (!this.props.disableSearch && isMenuOpen && this.input) { this.input.select(); } @@ -64,7 +64,7 @@ class Select extends React.Component { this.props.onMenuVisibilityChange?.(isMenuOpen); }; - onFilter = event => { + onFilter = (event) => { if (!this.state.isSearching && !this.props.multi) { this.props.onChange(""); } @@ -82,9 +82,9 @@ class Select extends React.Component { onChange(item.value); }; - onRemoveTag = value => this.onSelect("", { value }); + onRemoveTag = (value) => this.onSelect("", { value }); - onKeyDown = autoCompleteOnKeyDown => event => { + onKeyDown = (autoCompleteOnKeyDown) => (event) => { const { value } = this.props; if ( this.props.multi && @@ -98,21 +98,21 @@ class Select extends React.Component { }; // eslint-disable-next-line consistent-return - getSelectedLabel = props => { + getSelectedLabel = (props) => { const item = (props.value || props.value === 0) && - props.items.find(x => x.value === props.value); + props.items.find((x) => x.value === props.value); if (item) { return item.label; } }; - normalizeItems = memoize(items => groupBy(items, "value")); + normalizeItems = memoize((items) => groupBy(items, "value")); renderTags = () => { const items = this.normalizeItems(this.props.items); - return getValues(this.props)?.map(value => { + return getValues(this.props)?.map((value) => { const item = items[value]?.[0]; if (!item) return null; @@ -129,7 +129,7 @@ class Select extends React.Component { }); }; - renderInput = autoCompleteProps => { + renderInput = (autoCompleteProps) => { const { ref, ...rest } = autoCompleteProps; const { @@ -150,7 +150,7 @@ class Select extends React.Component { : this.props.validationMessages; const selectedItem = items.find( - item => item.label === autoCompleteProps.value, + (item) => item.label === autoCompleteProps.value, ); const image = selectedItem && selectedItem.image; @@ -172,7 +172,7 @@ class Select extends React.Component { ); }; - renderMenu = items => { + renderMenu = (items) => { const { noResultsMessage, maxHeight } = this.props; if (!items?.length) { @@ -215,7 +215,7 @@ class Select extends React.Component { ); }; - shouldItemRender = item => { + shouldItemRender = (item) => { const { selectedLabel } = this.state; if (this.state.isSearching) { return ( @@ -236,7 +236,7 @@ class Select extends React.Component { item.label} + getItemValue={(item) => item.label} value={this.state.selectedLabel} onChange={this.onFilter} onSelect={this.onSelect} @@ -246,7 +246,7 @@ class Select extends React.Component { autoHighlight={false} onMenuVisibilityChange={this.onMenuVisibilityChange} wrapperStyle={{}} - ref={ref => { + ref={(ref) => { this.input = ref; }} /> diff --git a/packages/input-select/src/Select.story.js b/packages/input-select/src/Select.story.js index e69467dc6..bfc029350 100644 --- a/packages/input-select/src/Select.story.js +++ b/packages/input-select/src/Select.story.js @@ -65,7 +65,7 @@ storiesOf("Select Input", module)