Welcome, Prettier

asseinfo · Nov 15, 2019 · 739ec2f · 739ec2f
1 parent bd6ac99
commit 739ec2f
Show file tree

Hide file tree

Showing 22 changed files with 195 additions and 152 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,11 +1,12 @@
 {
-  "extends": ["standard", "standard-react"],
+  "extends": ["standard", "standard-react", "plugin:prettier/recommended"],
   "plugins": ["react-hooks"],
   "env": {
     "jest": true
   },
   "rules": {
     "react/prop-types": "off",
+    "react/jsx-indent": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn"
   }

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "jsxSingleQuote": true
+}
diff --git a/package.json b/package.json
@@ -28,11 +28,13 @@
     "cypress": "3.6.1",
     "docz": "2.0.0-rc.53",
     "eslint": "6.6.0",
+    "eslint-config-prettier": "^6.5.0",
     "eslint-config-standard": "14.1.0",
     "eslint-config-standard-react": "9.2.0",
     "eslint-plugin-cypress": "2.7.0",
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-node": "10.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-react": "7.15.1",
     "eslint-plugin-react-hooks": "2.3.0",
@@ -42,6 +44,7 @@
     "jest": "24.8.0",
     "jest-environment-jsdom-fifteen": "1.0.0",
     "nyc": "14.1.1",
+    "prettier": "^1.19.1",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "start-server-and-test": "1.10.3",

diff --git a/src/components/Board/components/DefaultCard/index.js b/src/components/Board/components/DefaultCard/index.js
@@ -9,7 +9,9 @@ const DefaultCard = styled(CardSkeleton)`
   padding: 10px;
   margin-bottom: 7px;
 
-  ${({ dragging }) => dragging && `
+  ${({ dragging }) =>
+    dragging &&
+    `
     box-shadow: 2px 2px grey;
   `}
 `
@@ -26,7 +28,7 @@ const CardDescription = styled.div`
   padding-top: 10px;
 `
 
-export default function ({ children: card, dragging, allowRemoveCard, onCardRemove }) {
+export default function({ children: card, dragging, allowRemoveCard, onCardRemove }) {
   return (
     <DefaultCard dragging={dragging}>
       <span>

diff --git a/src/components/Board/components/DefaultCard/index.spec.js b/src/components/Board/components/DefaultCard/index.spec.js
@@ -9,7 +9,7 @@ describe('<DefaultCard />', () => {
 
   const card = { id: 1, title: 'Card title', description: 'Description' }
 
-  function mount (props) {
+  function mount(props) {
     subject = render(
       <DefaultCard onCardRemove={onCardRemove} {...props}>
         {card}
@@ -18,7 +18,7 @@ describe('<DefaultCard />', () => {
     return subject
   }
 
-  function reset () {
+  function reset() {
     subject = undefined
     onCardRemove.mockClear()
   }

diff --git a/src/components/Board/components/DefaultLaneHeader/index.js b/src/components/Board/components/DefaultLaneHeader/index.js
@@ -15,11 +15,13 @@ const LaneHeaderSkeleton = styled.div`
 
 const DefaultButton = styled.button`
   color: #333333;
-  background-color: #FFFFFF;
-  border-color: #CCCCCC;
+  background-color: #ffffff;
+  border-color: #cccccc;
 
-  :hover, :focus, :active {
-    background-color: #E6E6E6;
+  :hover,
+  :focus,
+  :active {
+    background-color: #e6e6e6;
   }
 `
 
@@ -29,42 +31,34 @@ const Input = styled.input`
   }
 `
 
-function LaneTitle ({ allowRenameLane, onClick, children: title }) {
-  return allowRenameLane ? (
-    <CursorPointer onClick={onClick}>
-      {title}
-    </CursorPointer>
-  ) : (
-    <span>
-      {title}
-    </span>
-  )
+function LaneTitle({ allowRenameLane, onClick, children: title }) {
+  return allowRenameLane ? <CursorPointer onClick={onClick}>{title}</CursorPointer> : <span>{title}</span>
 }
 
-function useRenameMode (state) {
+function useRenameMode(state) {
   const [renameMode, setRenameMode] = useState(state)
 
-  function toggleRenameMode () {
+  function toggleRenameMode() {
     setRenameMode(!renameMode)
   }
 
   return [renameMode, toggleRenameMode]
 }
 
-export default function ({ children: lane, allowRemoveLane, onLaneRemove, allowRenameLane, onLaneRename }) {
+export default function({ children: lane, allowRemoveLane, onLaneRemove, allowRenameLane, onLaneRename }) {
   const [renameMode, toggleRenameMode] = useRenameMode(false)
   const [title, setTitle] = useState(lane.title)
   const [titleInput, setTitleInput] = useState('')
 
-  function handleRenameLane (event) {
+  function handleRenameLane(event) {
     event.preventDefault()
 
     onLaneRename(lane.id, titleInput)
     setTitle(titleInput)
     toggleRenameMode()
   }
 
-  function handleRenameMode () {
+  function handleRenameMode() {
     setTitleInput(title)
     toggleRenameMode()
   }
@@ -74,11 +68,18 @@ export default function ({ children: lane, allowRemoveLane, onLaneRemove, allowR
       {renameMode ? (
         <form onSubmit={handleRenameLane}>
           <span>
-            <Input type='text' value={titleInput} onChange={({ target: { value } }) => setTitleInput(value)} autoFocus />
+            <Input
+              type='text'
+              value={titleInput}
+              onChange={({ target: { value } }) => setTitleInput(value)}
+              autoFocus
+            />
           </span>
           <span>
             <DefaultButton type='submit'>Rename</DefaultButton>
-            <DefaultButton type='button' onClick={handleRenameMode}>Cancel</DefaultButton>
+            <DefaultButton type='button' onClick={handleRenameMode}>
+              Cancel
+            </DefaultButton>
           </span>
         </form>
       ) : (

diff --git a/src/components/Board/components/DefaultLaneHeader/index.spec.js b/src/components/Board/components/DefaultLaneHeader/index.spec.js
@@ -10,13 +10,13 @@ describe('<DefaultLaneHeader />', () => {
 
   const lane = { id: 1, title: 'Lane title' }
 
-  function reset () {
+  function reset() {
     subject = undefined
     onLaneRemove.mockClear()
     onLaneRename.mockClear()
   }
 
-  function mount (props) {
+  function mount(props) {
     subject = render(
       <DefaultLaneHeader onLaneRemove={onLaneRemove} onLaneRename={onLaneRename} {...props}>
         {lane}

diff --git a/src/components/Board/components/Lane/components/Card/index.js b/src/components/Board/components/Lane/components/Card/index.js
@@ -7,20 +7,13 @@ const CardTemplate = styled.div`
   white-space: normal;
 `
 
-function Card ({ children, index, renderCard, disableCardDrag }) {
+function Card({ children, index, renderCard, disableCardDrag }) {
   return (
     <Draggable draggableId={String(children.id)} index={index} isDragDisabled={disableCardDrag}>
       {(provided, { isDragging }) => {
         return (
-          <div
-            ref={provided.innerRef}
-            {...provided.draggableProps}
-            {...provided.dragHandleProps}
-            data-testid='card'
-          >
-            <CardTemplate>
-              {renderCard(isDragging)}
-            </CardTemplate>
+          <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} data-testid='card'>
+            <CardTemplate>{renderCard(isDragging)}</CardTemplate>
           </div>
         )
       }}

diff --git a/src/components/Board/components/Lane/components/Card/index.spec.js b/src/components/Board/components/Lane/components/Card/index.spec.js
@@ -14,12 +14,16 @@ describe('<Card />', () => {
 
   const defaultCard = jest.fn(() => <div>Card title</div>)
 
-  function mount ({ children = card, ...otherProps } = {}) {
-    subject = render(<Card renderCard={defaultCard} {...otherProps}>{children}</Card>)
+  function mount({ children = card, ...otherProps } = {}) {
+    subject = render(
+      <Card renderCard={defaultCard} {...otherProps}>
+        {children}
+      </Card>
+    )
     return subject
   }
 
-  function reset () {
+  function reset() {
     subject = undefined
     defaultCard.mockClear()
   }
@@ -35,7 +39,9 @@ describe('<Card />', () => {
       callbacks.isDragging(true)
       mount()
     })
-    afterEach(() => { callbacks.isDragging(false) })
+    afterEach(() => {
+      callbacks.isDragging(false)
+    })
 
     it('calls the "renderCard" prop passing the dragging value', () => {
       expect(defaultCard).toHaveBeenCalledTimes(1)

diff --git a/src/components/Board/components/Lane/index.js b/src/components/Board/components/Lane/index.js
@@ -19,14 +19,7 @@ const DroppableLane = withDroppable(styled.div`
   min-height: 28px;
 `)
 
-function Lane ({
-  children,
-  index: laneIndex,
-  renderCard,
-  renderLaneHeader,
-  disableLaneDrag,
-  disableCardDrag
-}) {
+function Lane({ children, index: laneIndex, renderCard, renderLaneHeader, disableLaneDrag, disableCardDrag }) {
   return (
     <Draggable draggableId={`lane-draggable-${children.id}`} index={laneIndex} isDragDisabled={disableLaneDrag}>
       {laneProvided => (

diff --git a/src/components/Board/components/Lane/index.spec.js b/src/components/Board/components/Lane/index.spec.js
@@ -24,20 +24,16 @@ describe('<Lane />', () => {
     ]
   }
 
-  function mount ({ children = lane, ...otherProps } = {}) {
+  function mount({ children = lane, ...otherProps } = {}) {
     subject = render(
-      <Lane
-        {...otherProps}
-        renderLaneHeader={<div>Backlog</div>}
-        renderCard={renderCard}
-      >
+      <Lane {...otherProps} renderLaneHeader={<div>Backlog</div>} renderCard={renderCard}>
         {children}
       </Lane>
     )
     return subject
   }
 
-  function reset () {
+  function reset() {
     subject = undefined
     renderCard.mockClear()
   }

diff --git a/src/components/Board/components/LaneAdder/components/LaneForm/index.js b/src/components/Board/components/LaneAdder/components/LaneForm/index.js
@@ -12,10 +12,10 @@ const StyledLaneForm = styled(StyledLane)`
   }
 `
 
-function LaneForm ({ onConfirm, onCancel }) {
+function LaneForm({ onConfirm, onCancel }) {
   const inputLaneTitle = React.createRef()
 
-  function addLane (event) {
+  function addLane(event) {
     event.preventDefault()
 
     when(inputLaneTitle.current.value)(onConfirm)
@@ -26,7 +26,9 @@ function LaneForm ({ onConfirm, onCancel }) {
       <form onSubmit={addLane}>
         <input type='text' ref={inputLaneTitle} autoFocus />
         <button type='submit'>Add</button>
-        <button type='button' onClick={onCancel}>Cancel</button>
+        <button type='button' onClick={onCancel}>
+          Cancel
+        </button>
       </form>
     </StyledLaneForm>
   )

diff --git a/src/components/Board/components/LaneAdder/components/LaneForm/index.spec.js b/src/components/Board/components/LaneAdder/components/LaneForm/index.spec.js
@@ -5,15 +5,17 @@ import LaneForm from './'
 describe('<LaneForm />', () => {
   let subject, onConfirm, onCancel
 
-  function mount () {
+  function mount() {
     onConfirm = jest.fn()
     onCancel = jest.fn()
 
     subject = render(<LaneForm onConfirm={onConfirm} onCancel={onCancel} />)
   }
 
   beforeEach(mount)
-  afterEach(() => { subject = onConfirm = onCancel = undefined })
+  afterEach(() => {
+    subject = onConfirm = onCancel = undefined
+  })
 
   it('renders an input asking for a lane title', () => {
     expect(subject.container.querySelector('input')).toBeInTheDocument()

diff --git a/src/components/Board/components/LaneAdder/index.js b/src/components/Board/components/LaneAdder/index.js
@@ -16,17 +16,21 @@ const LaneAdderPlaceholder = styled.div`
   }
 `
 
-function LaneAdder ({ onConfirm }) {
+function LaneAdder({ onConfirm }) {
   const [isAddingLane, setAddingLane] = useState(false)
 
-  function confirmLane (title) {
+  function confirmLane(title) {
     onConfirm(title)
     setAddingLane(false)
   }
 
-  return isAddingLane
-    ? <LaneForm onConfirm={confirmLane} onCancel={() => setAddingLane(false)} />
-    : <LaneAdderPlaceholder onClick={() => setAddingLane(true)} role='button'>➕</LaneAdderPlaceholder>
+  return isAddingLane ? (
+    <LaneForm onConfirm={confirmLane} onCancel={() => setAddingLane(false)} />
+  ) : (
+    <LaneAdderPlaceholder onClick={() => setAddingLane(true)} role='button'>
+      ➕
+    </LaneAdderPlaceholder>
+  )
 }
 
 export default LaneAdder
diff --git a/src/components/Board/components/LaneAdder/index.spec.js b/src/components/Board/components/LaneAdder/index.spec.js
@@ -5,14 +5,16 @@ import LaneAdder from './'
 describe('<LaneAdder />', () => {
   let subject, onConfirm
 
-  function mount () {
+  function mount() {
     onConfirm = jest.fn()
 
     subject = render(<LaneAdder onConfirm={onConfirm} />)
   }
 
   beforeEach(mount)
-  afterEach(() => { subject = onConfirm = undefined })
+  afterEach(() => {
+    subject = onConfirm = undefined
+  })
 
   it('renders the lane placeholder to add a new lane', () => {
     expect(subject.queryByText('➕')).toBeInTheDocument()