style: Add prettier code formatter configuration (#266)

fix: Add prettier to package-lock

style: run prettier then eslint, with adjusted eslint disabling comments

fix: Remove stray semicolon from CatalogBadges markup

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -16,4 +16,4 @@ jobs:
     secrets:
       GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
       GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/ci.yml

@@ -2,7 +2,7 @@ name: Default CI
 on:
   push:
     branches:
-    - 'main'
+      - 'main'
   pull_request:
     branches:
       - '**'
@@ -14,26 +14,26 @@ jobs:
         node: [16]
         npm: [8.5.x]
     steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
-    - name: Setup Nodejs
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node }}
-    - run: npm install -g npm@${{ matrix.npm }}
-    - name: Install dependencies
-      run: npm ci
-    - name: Validate package-lock.json changes
-      run: make validate-no-uncommitted-package-lock-changes
-    - name: Lint
-      run: npm run lint
-    - name: Test
-      run: npm run test
-    - name: Build
-      run: npm run build
-    - name: i18n_extract
-      run: npm run i18n_extract
-    - name: Coverage
-      uses: codecov/codecov-action@v1
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Nodejs
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+      - run: npm install -g npm@${{ matrix.npm }}
+      - name: Install dependencies
+        run: npm ci
+      - name: Validate package-lock.json changes
+        run: make validate-no-uncommitted-package-lock-changes
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test
+      - name: Build
+        run: npm run build
+      - name: i18n_extract
+        run: npm run i18n_extract
+      - name: Coverage
+        uses: codecov/codecov-action@v1

.github/workflows/lockfileversion-check.yml

@@ -5,7 +5,7 @@ name: Lockfile Version check
 on:
   push:
     branches:
-    - master
+      - master
   pull_request:
 
 jobs:

.prettierignore

@@ -0,0 +1,8 @@
+# Ignore artifacts:
+node_modules
+.babelrc
+.eslintignore
+.eslintrc.json
+.gitignore
+.npmignore
+commitlint.config.js

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

__mocks__/react-instantsearch-dom.jsx

@@ -12,14 +12,20 @@ const advertisedCourseRun = {
 
 const fakeHits = [
   {
-    objectID: '1', title: 'bla', advertised_course_run: advertisedCourseRun, key: 'Bees101',
+    objectID: '1',
+    title: 'bla',
+    advertised_course_run: advertisedCourseRun,
+    key: 'Bees101',
   },
   {
-    objectID: '2', title: 'blp', advertised_course_run: advertisedCourseRun, key: 'Wasps200',
+    objectID: '2',
+    title: 'blp',
+    advertised_course_run: advertisedCourseRun,
+    key: 'Wasps200',
   },
 ];
 
-MockReactInstantSearch.connectStateResults = Component => function (props) {
+MockReactInstantSearch.connectStateResults = (Component) => function (props) {
   return (
     <Component
       searchResults={{
@@ -38,7 +44,7 @@ MockReactInstantSearch.connectStateResults = Component => function (props) {
   );
 };
 
-MockReactInstantSearch.connectPagination = Component => function (props) {
+MockReactInstantSearch.connectPagination = (Component) => function (props) {
   return <Component nbPages={2} maxPagesDisplayed={2} {...props} />;
 };
 
@@ -47,11 +53,11 @@ MockReactInstantSearch.InstantSearch = function ({ children }) {
   return <div>{children}</div>;
 };
 
-MockReactInstantSearch.connectCurrentRefinements = Component => function (props) {
+MockReactInstantSearch.connectCurrentRefinements = (Component) => function (props) {
   return <Component items={[]} {...props} />;
 };
 
-MockReactInstantSearch.connectRefinementList = Component => function (props) {
+MockReactInstantSearch.connectRefinementList = (Component) => function (props) {
   return (
     <Component
       attribute="subjects"
@@ -65,11 +71,11 @@ MockReactInstantSearch.connectRefinementList = Component => function (props) {
   );
 };
 
-MockReactInstantSearch.connectSearchBox = Component => function (props) {
+MockReactInstantSearch.connectSearchBox = (Component) => function (props) {
   return <Component {...props} />;
 };
 
-MockReactInstantSearch.connectPagination = Component => function (props) {
+MockReactInstantSearch.connectPagination = (Component) => function (props) {
   return <Component nbPages={1} {...props} />;
 };
 

jest.config.js

@@ -1,11 +1,6 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
-  setupFiles: [
-    '<rootDir>/src/setupTest.js',
-  ],
-  coveragePathIgnorePatterns: [
-    'src/setupTest.js',
-    'src/i18n',
-  ],
+  setupFiles: ['<rootDir>/src/setupTest.js'],
+  coveragePathIgnorePatterns: ['src/setupTest.js', 'src/i18n'],
 });

package.json

@@ -81,6 +81,7 @@
     "glob": "7.2.3",
     "husky": "6.0.0",
     "jest": "24.9.0",
+    "prettier": "2.7.1",
     "reactifex": "1.1.1"
   }
 }

public/index.html

@@ -1,16 +1,18 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en-us">
+  <head>
+    <title>Enterprise Public Catalog</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex" />
+    <link
+      rel="shortcut icon"
+      href="<%=htmlWebpackPlugin.options.FAVICON_URL%>"
+      type="image/x-icon"
+    />
+  </head>
 
-<head>
-  <title>Enterprise Public Catalog</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="robots" content="noindex">
-  <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
-</head>
-
-<body>
-  <div id="root"></div>
-</body>
-
+  <body>
+    <div id="root"></div>
+  </body>
 </html>

renovate.json

@@ -1,7 +1,5 @@
 {
-  "extends": [
-    "config:base"
-  ],
+  "extends": ["config:base"],
   "packageRules": [
     {
       "matchUpdateTypes": ["minor", "patch"],

src/components/PageWrapper.jsx

@@ -11,9 +11,7 @@ function PageWrapper({ children, className }) {
   return (
     <Container className={className}>
       <Helmet title={PAGE_TITLE} />
-      <div data-testid={DATA_TEST_ID}>
-        {children}
-      </div>
+      <div data-testid={DATA_TEST_ID}>{children}</div>
     </Container>
   );
 }

src/components/app/tests/App.test.jsx

@@ -17,20 +17,18 @@ getAuthenticatedUser.mockReturnValue({ username: 'test-username' });
 // all we are testing is routes, we don't care what's rendered as long as it's the right page
 jest.mock('react-instantsearch-dom', () => ({
   ...jest.requireActual('react-instantsearch-dom'),
-  InstantSearch: () => (<div>SEARCH</div>),
-  Index: () => (<div>SEARCH</div>),
+  InstantSearch: () => <div>SEARCH</div>,
+  Index: () => <div>SEARCH</div>,
 }));
 
 mockWindowLocations();
 
-const mockConfig = () => (
-  {
-    HUBSPOT_MARKETING_URL: 'http://bobsdooremporium.com',
-    EDX_FOR_BUSINESS_TITLE: 'ayylmao',
-    EDX_FOR_ONLINE_EDU_TITLE: 'foo',
-    EDX_ENTERPRISE_ALACARTE_TITLE: 'baz',
-  }
-);
+const mockConfig = () => ({
+  HUBSPOT_MARKETING_URL: 'http://bobsdooremporium.com',
+  EDX_FOR_BUSINESS_TITLE: 'ayylmao',
+  EDX_FOR_ONLINE_EDU_TITLE: 'foo',
+  EDX_ENTERPRISE_ALACARTE_TITLE: 'baz',
+});
 
 jest.mock('@edx/frontend-platform', () => ({
   ...jest.requireActual('@edx/frontend-platform'),