feature/prettier added prettier, updated packages

Author: mykhalenych

.prettierignore

@@ -0,0 +1,2 @@
+/node_modules
+/build

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "semi": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false
+}

README.md

@@ -10,7 +10,7 @@ This task is similar to [Static List of TODOs](https://github.com/mate-academy/r
 - `Info` components should take one object and render its data.
 
 ## Instructions
-
+- Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
 - Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_static-list-of-posts-js/) and add it to the PR description.

package-lock.json

@@ -9,16 +9,16 @@
     "@cypress/react": "^5.12.4",
     "bulma": "^0.9.4",
     "classnames": "^2.3.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "^4.0.3"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
     "@cypress/webpack-dev-server": "^1.8.4",
     "@mate-academy/cypress-tools": "^1.0.4",
-    "@mate-academy/eslint-config-react": "^0.0.11",
+    "@mate-academy/eslint-config-react": "^0.0.12",
     "@mate-academy/eslint-config-react-typescript": "^1.0.12",
-    "@mate-academy/scripts": "^1.2.12",
+    "@mate-academy/scripts": "^1.7.0",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "^0.0.11",
     "@types/node": "^17.0.23",
@@ -31,8 +31,9 @@
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.2.0",
     "mochawesome-report-generator": "^6.2.0",
-    "node-sass": "^6.0.1",
+    "node-sass": "^7.0.1",
     "postcss": "^8.4.12",
+    "prettier": "^3.2.5",
     "stylelint": "^15.11.0",
     "typescript": "^4.6.3"
   },
@@ -42,7 +43,8 @@
     "test": "mate-scripts test -l",
     "lint-js": "mate-scripts lint -j",
     "lint-css": "mate-scripts lint -s",
-    "lint": "npm run lint-js && npm run lint-css",
+    "format": "prettier --write './src/**/*.{js,jsx}'",
+    "lint": "npm run format && npm run lint-js && npm run lint-css",
     "update": "mate-scripts update",
     "postinstall": "npm run update && cypress verify",
     "predeploy": "npm run build",

package.json

@@ -23,10 +23,9 @@ export const App = () => (
         </div>
 
         <p className="PostInfo__body">
-          est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae
-          ea dolores neque fugiat blanditiis voluptate porro vel nihil
-          molestiae ut reiciendis qui aperiam non debitis possimus qui neque
-          nisi nulla
+          est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea
+          dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut
+          reiciendis qui aperiam non debitis possimus qui neque nisi nulla
         </p>
 
         <hr />
@@ -36,9 +35,7 @@ export const App = () => (
 
       <div className="PostInfo">
         <div className="PostInfo__header">
-          <h3 className="PostInfo__title">
-            doloremque illum aliquid sunt
-          </h3>
+          <h3 className="PostInfo__title">doloremque illum aliquid sunt</h3>
 
           <p>
             {' Posted by  '}

src/App.jsx

@@ -1,3 +1 @@
-export const CommentInfo = () => (
-  <>Put the comment here</>
-);
+export const CommentInfo = () => <>Put the comment here</>;

src/components/CommentInfo/CommentInfo.jsx

@@ -18,8 +18,7 @@ describe('CommentInfo component', () => {
   });
 
   it('should show a name', () => {
-    cy.get('.CommentInfo__name')
-      .should('have.text', 'Comment name');
+    cy.get('.CommentInfo__name').should('have.text', 'Comment name');
   });
 
   it('should show an email', () => {
@@ -29,7 +28,6 @@ describe('CommentInfo component', () => {
   });
 
   it('should show a body', () => {
-    cy.get('.CommentInfo__body')
-      .should('have.text', 'Some comment text');
+    cy.get('.CommentInfo__body').should('have.text', 'Some comment text');
   });
 });

src/components/CommentInfo/CommentInfo.spec.jsx

@@ -1,3 +1 @@
-export const CommentList = () => (
-  <>Put the list here</>
-);
+export const CommentList = () => <>Put the list here</>;

src/components/CommentList/CommentList.jsx

@@ -47,11 +47,11 @@ describe('CommentList component', () => {
     });
 
     it('should render comments in correct order', () => {
-      cy.get('.CommentInfo__name').eq(0)
+      cy.get('.CommentInfo__name')
+        .eq(0)
         .should('have.text', 'id labore ex et quam laborum');
 
-      cy.get('.CommentInfo__name').eq(3)
-        .should('have.text', 'alias odio sit');
+      cy.get('.CommentInfo__name').eq(3).should('have.text', 'alias odio sit');
     });
   });
 

src/components/CommentList/CommentList.spec.js

@@ -1,3 +1 @@
-export const PostInfo = () => (
-  <>Put the post here</>
-);
+export const PostInfo = () => <>Put the post here</>;

src/components/PostInfo/PostInfo.jsx

@@ -52,7 +52,10 @@ describe('PostInfo', () => {
     });
 
     it('should have a correct title', () => {
-      cy.get('.PostInfo__title').should('have.text', 'et ea vero quia laudantium autem');
+      cy.get('.PostInfo__title').should(
+        'have.text',
+        'et ea vero quia laudantium autem',
+      );
     });
 
     it('should have a user', () => {
@@ -61,8 +64,15 @@ describe('PostInfo', () => {
 
     it('should contain all comments', () => {
       cy.get('.CommentInfo').should('have.length', 3);
-      cy.get('.CommentInfo__name').eq(0).should('have.text', 'esse autem dolorum');
-      cy.get('.CommentInfo__name').eq(2).should('have.text', 'culpa eius tempora sit consequatur neque iure deserunt');
+      cy.get('.CommentInfo__name')
+        .eq(0)
+        .should('have.text', 'esse autem dolorum');
+      cy.get('.CommentInfo__name')
+        .eq(2)
+        .should(
+          'have.text',
+          'culpa eius tempora sit consequatur neque iure deserunt',
+        );
     });
 
     it('should not show NoCommentsMessage', () => {
@@ -130,10 +140,15 @@ describe('PostInfo', () => {
 
       mount(<PostInfo post={otherPost} />);
 
-      cy.get('.PostInfo__title').should('have.text', 'ea molestias quasi exercitationem repellat qui ipsa sit aut');
+      cy.get('.PostInfo__title').should(
+        'have.text',
+        'ea molestias quasi exercitationem repellat qui ipsa sit aut',
+      );
       cy.get('.UserInfo').should('contain', 'Leanne Graham');
       cy.get('.CommentInfo').should('have.length', 2);
-      cy.get('.CommentInfo__name').eq(0).should('have.text', 'id labore ex et quam laborum');
+      cy.get('.CommentInfo__name')
+        .eq(0)
+        .should('have.text', 'id labore ex et quam laborum');
     });
   });
 });

src/components/PostInfo/PostInfo.spec.jsx

@@ -1,3 +1 @@
-export const PostList = () => (
-  <>Put the list here</>
-);
+export const PostList = () => <>Put the list here</>;

src/components/PostList/PostList.jsx

@@ -1,3 +1 @@
-export const UserInfo = () => (
-  <>Put the user here</>
-);
+export const UserInfo = () => <>Put the user here</>;

src/components/UserInfo/UserInfo.jsx

@@ -1,8 +1,5 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './App';
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('root'),
-);
+createRoot(document.getElementById('root')).render(<App />);