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
CraveFood · Apr 15, 2021 · 0409aa6 · 0409aa6
1 parent d620bc7
commit 0409aa6
Show file tree

Hide file tree

Showing 95 changed files with 444 additions and 472 deletions.
diff --git 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
@@ -10,10 +10,10 @@ const StyledAlert = styled(Alert)`
   transform: rotate(5deg);
 `;
 
-const ExtendedAlert = props => <StyledAlert {...props} />;
+const ExtendedAlert = (props) => <StyledAlert {...props} />;
 
 storiesOf("Alert", module)
-  .addDecorator(storyFn => (
+  .addDecorator((storyFn) => (
     <div style={{ transform: "scale(1)", height: 200 }}>{storyFn()}</div>
   ))
   .add("default", () => (

diff --git a/packages/alert/src/styledComponents/Alert.js b/packages/alert/src/styledComponents/Alert.js
@@ -7,28 +7,28 @@ 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;
 
   display: flex;
   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;
     font-size: 18px;
     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
@@ -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
@@ -98,21 +98,21 @@ Button.defaultProps = {
 
 export default Button;
 
-export const PrimaryButton = props => (
+export const PrimaryButton = (props) => (
   <Button {...props} variant={buttonVariants.PRIMARY} />
 );
-export const NeutralButton = props => (
+export const NeutralButton = (props) => (
   <Button {...props} variant={buttonVariants.NEUTRAL} />
 );
-export const SecondaryButton = props => (
+export const SecondaryButton = (props) => (
   <Button {...props} variant={buttonVariants.SECONDARY} />
 );
-export const PositiveButton = props => (
+export const PositiveButton = (props) => (
   <Button {...props} variant={buttonVariants.POSITIVE} />
 );
-export const NegativeButton = props => (
+export const NegativeButton = (props) => (
   <Button {...props} variant={buttonVariants.NEGATIVE} />
 );
-export const GhostButton = props => (
+export const GhostButton = (props) => (
   <Button {...props} variant={buttonVariants.GHOST} />
 );
diff --git a/packages/button/src/Button.story.js b/packages/button/src/Button.story.js
@@ -78,7 +78,7 @@ const getStories = ({ title, ...props }) => (
   </GridContainer>
 );
 
-const CommonStory = props => (
+const CommonStory = (props) => (
   <FlexContainer>
     <RowTitles />
     {getStories({ ...props, title: "Default" })}

diff --git a/packages/button/src/styledComponents/Button.js b/packages/button/src/styledComponents/Button.js
@@ -7,7 +7,7 @@ import buttonVariants from "../constants/buttonVariants";
 
 const buttonHeight = ({ small }) => (small ? 32 : 40);
 
-const calcPadding = borderWidth => ({ paddingX, paddingY }) =>
+const calcPadding = (borderWidth) => ({ paddingX, paddingY }) =>
   `${paddingY - borderWidth + 1}px ${paddingX - borderWidth + 1}px`;
 
 function themeStyle(props) {
@@ -90,7 +90,7 @@ const Button = styled.button`
   line-height: 1.5;
   height: ${buttonHeight}px;
   min-width: ${buttonHeight}px;
-  width: ${props => {
+  width: ${(props) => {
     if (props.fluid) return "100%";
     if (props.iconOnly) return `${buttonHeight(props)}px`;
     return null;

diff --git a/packages/card/src/Card.js b/packages/card/src/Card.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import StyledCard from "./styledComponents/Card";
 import { cardTypes } from "./constants/cardTypes";
 
-const Card = props => <StyledCard {...props} />;
+const Card = (props) => <StyledCard {...props} />;
 
 Card.defaultProps = {
   width: "100%",

diff --git a/packages/card/src/styledComponents/Card.js b/packages/card/src/styledComponents/Card.js
@@ -4,7 +4,7 @@ import { colors } from "@crave/farmblocks-theme";
 
 import { cardTypes, cardTypeColors } from "../constants/cardTypes";
 
-const boxShadow = props => {
+const boxShadow = (props) => {
   if (props.boxShadow) {
     return props.boxShadow;
   }
@@ -14,20 +14,19 @@ const boxShadow = props => {
     : `0 1px 1px 0 ${colors.GREY_08}`;
 };
 
-const backgroundColor = props => {
-  return Object.keys(cardTypeColors).includes(props.type)
+const backgroundColor = (props) =>
+  Object.keys(cardTypeColors).includes(props.type)
     ? cardTypeColors[props.type]
     : cardTypeColors[cardTypes.DEFAULT];
-};
 
 const Card = styled.div`
   background-color: ${backgroundColor};
   box-shadow: ${boxShadow};
   border: solid 1px ${colors.GREY_08};
-  width: ${props => props.width};
+  width: ${(props) => props.width};
   box-sizing: border-box;
   border-radius: 4px;
-  overflow: ${props => props.overflow};
+  overflow: ${(props) => props.overflow};
   ${space}
 `;
 

diff --git a/packages/carousel/src/styledComponents/Carousel.js b/packages/carousel/src/styledComponents/Carousel.js
@@ -1,12 +1,13 @@
 import styled from "styled-components";
 import { colors } from "@crave/farmblocks-theme";
 
-const scale = props => (props.shouldScale ? 1.219 : 1);
-const activeItemWidth = props => props.itemConfig.width * scale(props);
-const activeItemHeight = props => props.itemConfig.height * scale(props);
-const spaceBetweenItems = props => props.itemConfig.margin * 2;
-const stepDistance = props => props.itemConfig.width + spaceBetweenItems(props);
-const activeItemMargin = props => {
+const scale = (props) => (props.shouldScale ? 1.219 : 1);
+const activeItemWidth = (props) => props.itemConfig.width * scale(props);
+const activeItemHeight = (props) => props.itemConfig.height * scale(props);
+const spaceBetweenItems = (props) => props.itemConfig.margin * 2;
+const stepDistance = (props) =>
+  props.itemConfig.width + spaceBetweenItems(props);
+const activeItemMargin = (props) => {
   const { itemConfig } = props;
   const scaledWidth = itemConfig.width * scale(props);
 
@@ -24,26 +25,26 @@ const Container = styled.div`
   ul {
     position: relative;
     left: 50%;
-    margin-left: ${props => -(activeItemWidth(props) / 2)}px;
-    height: ${props => activeItemHeight(props) + spaceBetweenItems(props)}px;
+    margin-left: ${(props) => -(activeItemWidth(props) / 2)}px;
+    height: ${(props) => activeItemHeight(props) + spaceBetweenItems(props)}px;
     list-style: none;
     padding: 0;
     display: inline-flex;
     align-items: center;
 
     transform: translateX(
-      ${props => -(props.activeItem * stepDistance(props))}px
+      ${(props) => -(props.activeItem * stepDistance(props))}px
     );
-    transition: transform ${props => props.itemConfig.transitionTime}s;
+    transition: transform ${(props) => props.itemConfig.transitionTime}s;
     will-change: transform;
 
     li {
-      margin: ${props => props.itemConfig.margin}px;
-      min-width: ${props => props.itemConfig.width}px;
-      width: ${props => props.itemConfig.width}px;
-      height: ${props => props.itemConfig.height}px;
+      margin: ${(props) => props.itemConfig.margin}px;
+      min-width: ${(props) => props.itemConfig.width}px;
+      width: ${(props) => props.itemConfig.width}px;
+      height: ${(props) => props.itemConfig.height}px;
 
-      transition: all ${props => props.itemConfig.transitionTime}s;
+      transition: all ${(props) => props.itemConfig.transitionTime}s;
       will-change: transform;
 
       .image {

diff --git a/packages/dropdown/src/components/Dropdown.js b/packages/dropdown/src/components/Dropdown.js
@@ -11,7 +11,7 @@ import { SmChevronDown } from "@crave/farmblocks-icon";
 import DropdownWrapper from "../styledComponents/DropdownWrapper";
 import DropdownMenuWrapper from "../styledComponents/DropdownMenuWrapper";
 
-const Dropdown = props => {
+const Dropdown = (props) => {
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
   return (

diff --git a/packages/dropdown/src/components/DropdownItem.js b/packages/dropdown/src/components/DropdownItem.js
@@ -4,7 +4,7 @@ import { MenuItem } from "react-aria-menubutton";
 
 import DropdownItemWrapper from "../styledComponents/DropdownItemWrapper";
 
-const DropdownItem = props => {
+const DropdownItem = (props) => {
   const { value, text, children, ...rest } = props;
   return (
     <DropdownItemWrapper {...rest}>

diff --git a/packages/dropdown/src/components/DropdownItem.story.js b/packages/dropdown/src/components/DropdownItem.story.js
@@ -4,9 +4,9 @@ import { storiesOf } from "@storybook/react";
 import StyledDropdownItemWrapper from "../styledComponents/DropdownItemWrapper";
 import StyledDropdownMenuWrapper from "../styledComponents/DropdownMenuWrapper";
 
-const DropdownItemWrapper = props => <StyledDropdownItemWrapper {...props} />;
+const DropdownItemWrapper = (props) => <StyledDropdownItemWrapper {...props} />;
 
-const DropdownMenuWrapper = props => <StyledDropdownMenuWrapper {...props} />;
+const DropdownMenuWrapper = (props) => <StyledDropdownMenuWrapper {...props} />;
 
 storiesOf("Dropdown/Styled components/Menu and item", module)
   .add("Default", () => (

diff --git a/packages/dropdown/src/styledComponents/DropdownItemWrapper.js b/packages/dropdown/src/styledComponents/DropdownItemWrapper.js
@@ -4,7 +4,7 @@ import { colors as colorConstants } from "@crave/farmblocks-theme";
 
 const borderRadius = "3px";
 
-const hoverColors = props => {
+const hoverColors = (props) => {
   if (props.footer) {
     return "";
   }
@@ -14,15 +14,15 @@ const hoverColors = props => {
   `;
 };
 
-const fontColor = props => {
+const fontColor = (props) => {
   if (props.selected && !props.highlighted) {
     return colorConstants.INDIGO_MILK_CAP;
   }
 
   return colorConstants.OYSTER;
 };
 
-const cursor = props => (props.footer ? "auto" : "pointer");
+const cursor = (props) => (props.footer ? "auto" : "pointer");
 
 const DropdownItemWrapper = styled.li`
   cursor: ${cursor};
@@ -36,7 +36,7 @@ const DropdownItemWrapper = styled.li`
   :hover {
     ${hoverColors};
   }
-  ${props => props.highlighted && hoverColors};
+  ${(props) => props.highlighted && hoverColors};
 
   border-bottom: solid 1px ${colorConstants.GREY_16};
 

diff --git a/packages/dropdown/src/styledComponents/DropdownMenuWrapper.js b/packages/dropdown/src/styledComponents/DropdownMenuWrapper.js
@@ -5,9 +5,9 @@ import { colors as colorConstants } from "@crave/farmblocks-theme";
 const DropdownMenuWrapper = styled.div`
   margin-top: 16px;
   min-width: 100%;
-  width: ${props => props.width};
+  width: ${(props) => props.width};
   whitespace: no-wrap;
-  max-height: ${props => props.maxHeight};
+  max-height: ${(props) => props.maxHeight};
   overflow-y: auto;
   scroll-behavior: smooth;
 
@@ -18,9 +18,9 @@ const DropdownMenuWrapper = styled.div`
   background: white;
 
   position: absolute;
-  right: ${props => props.align === "right" && 0};
+  right: ${(props) => props.align === "right" && 0};
 
-  z-index: ${props => props.zIndex};
+  z-index: ${(props) => props.zIndex};
 
   > ul {
     list-style: none;

diff --git a/packages/empty-state/src/Buttons.js b/packages/empty-state/src/Buttons.js
@@ -31,7 +31,7 @@ const Buttons = ({ actions }) => {
       mt={2}
       justifyContent="center"
     >
-      {actions.map(buttonProps => (
+      {actions.map((buttonProps) => (
         <Button
           key={`empty-state-button-${buttonProps.text}`}
           data-testid={`empty-state-button-${buttonProps.text}`}