chore(*): Sync linting and IDE config (#2137)

### What

Commit essential linting and formatting config from our favourite IDE to
the repository. The aim is to have the same config across the team and
across IDE so we avoid dealing with changes that shouldn't be part of
our PR.

* Add config for Intellij and vscode
  - Remove gitignore on .idea config
  - Disable prettier on MDX files
  - Use LF as default line separator
  - Enable format on save
* Run `prettier --write
"**/*.{**/*,*}.{js,ts,jsx,tsx,scss,css,html,json}"`
* Remove prettier-ignore in mdx files

About MDX:
Disable formatting totally, as the maximum printWidth rule conflicts
with MDX syntax about new line = `<p>`.
Latest issue that we had:
#2128 . Issue on Prettier
repository: prettier/prettier#12209

If this wouldn't be enough, the second option is to ensure that our
files are checked before committed with a git hook:
https://github.com/lint-staged/lint-staged

For review: you can do it commit by commit.

---------

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>

.gitignore

@@ -6,9 +6,6 @@ bower_components/
 package-lock.json
 yarn.lock
 
-# IDEs and editors
-.idea/
-
 # Log files
 .pnpm-debug.log
 lerna-debug.log

.prettierrc

@@ -8,8 +8,7 @@
   "jsxSingleQuote": false,
   "trailingComma": "all",
   "bracketSpacing": true,
-  "bracketLine": false,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "arrowParens": "avoid",
   "insertPragma": false,
   "proseWrap": "preserve",

.vscode/settings.json

@@ -1,2 +1,9 @@
 {
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[mdx]": {
+    "editor.defaultFormatter": null,
+    "editor.formatOnSave": false
+  },
+  "files.eol": "\n"
 }

packages/components/cypress/e2e/tabs.cy.ts

@@ -15,16 +15,21 @@ describe('tabs', () => {
 
     it('should only show the first tab header as active', () => {
       cy.get('@headers').each(($header, index) => {
-        cy.wrap($header).find('.active').should(index === 0 ? 'exist' : 'not.exist');
+        cy.wrap($header)
+          .find('.active')
+          .should(index === 0 ? 'exist' : 'not.exist');
       });
     });
 
     it('should only show the tab panel associated with the first tab header', () => {
       cy.get('post-tab-panel:visible').as('panel');
       cy.get('@panel').should('have.length', 1);
-      cy.get('@headers').first().invoke('attr', 'panel').then(panel => {
-        cy.get('@panel').invoke('attr', 'name').should('equal', panel);
-      });
+      cy.get('@headers')
+        .first()
+        .invoke('attr', 'panel')
+        .then(panel => {
+          cy.get('@panel').invoke('attr', 'name').should('equal', panel);
+        });
     });
 
     it('should activate a clicked tab header and deactivate the tab header that was previously activated', () => {
@@ -42,9 +47,12 @@ describe('tabs', () => {
 
       cy.get('post-tab-panel:visible').as('panel');
       cy.get('@panel').should('have.length', 1);
-      cy.get('@headers').last().invoke('attr', 'panel').then(panel => {
-        cy.get('@panel').invoke('attr', 'name').should('equal', panel);
-      });
+      cy.get('@headers')
+        .last()
+        .invoke('attr', 'panel')
+        .then(panel => {
+          cy.get('@panel').invoke('attr', 'name').should('equal', panel);
+        });
     });
   });
 
@@ -57,19 +65,27 @@ describe('tabs', () => {
 
     it('should only show the requested active tab panel', () => {
       cy.get('@panel').should('have.length', 1);
-      cy.get('@tabs').invoke('attr', 'active-panel').then(activePanel => {
-        cy.get('@panel').invoke('attr', 'name').should('equal', activePanel);
-      });
+      cy.get('@tabs')
+        .invoke('attr', 'active-panel')
+        .then(activePanel => {
+          cy.get('@panel').invoke('attr', 'name').should('equal', activePanel);
+        });
     });
 
     it('should show as active only the tab header associated with the requested active tab panel', () => {
-      cy.get('@tabs').invoke('attr', 'active-panel').then(activePanel => {
-        cy.get('@headers').each($header => {
-          cy.wrap($header).invoke('attr', 'panel').then(panel => {
-            cy.wrap($header).find('.active').should(panel === activePanel ? 'exist' : 'not.exist');
+      cy.get('@tabs')
+        .invoke('attr', 'active-panel')
+        .then(activePanel => {
+          cy.get('@headers').each($header => {
+            cy.wrap($header)
+              .invoke('attr', 'panel')
+              .then(panel => {
+                cy.wrap($header)
+                  .find('.active')
+                  .should(panel === activePanel ? 'exist' : 'not.exist');
+              });
           });
         });
-      });
     });
   });
 
@@ -89,9 +105,12 @@ describe('tabs', () => {
 
       cy.get('post-tab-panel:visible').as('panel');
       cy.get('@panel').should('have.length', 1);
-      cy.get('@headers').first().invoke('attr', 'panel').then(panel => {
-        cy.get('@panel').invoke('attr', 'name').should('equal', panel);
-      });
+      cy.get('@headers')
+        .first()
+        .invoke('attr', 'panel')
+        .then(panel => {
+          cy.get('@panel').invoke('attr', 'name').should('equal', panel);
+        });
     });
 
     it('should activate the newly added tab header after clicking on it', () => {
@@ -115,9 +134,11 @@ describe('tabs', () => {
 
       cy.get('post-tab-panel:visible').as('panel');
       cy.get('@panel').should('have.length', 1);
-      cy.get('@new-panel').invoke('attr', 'panel').then(panel => {
-        cy.get('@panel').invoke('attr', 'name').should('equal', panel);
-      });
+      cy.get('@new-panel')
+        .invoke('attr', 'panel')
+        .then(panel => {
+          cy.get('@panel').invoke('attr', 'name').should('equal', panel);
+        });
     });
 
     it('should remove a tab header', () => {

packages/components/src/utils/property-checkers/tests/check-pattern.spec.ts

@@ -10,7 +10,18 @@ describe('checkPattern', () => {
   });
 
   it('should throw the provided error if the value is not a string', () => {
-    [undefined, null, NaN, 1, true, {}, [], () => {/* empty */}].forEach(notString => {
+    [
+      undefined,
+      null,
+      NaN,
+      1,
+      true,
+      {},
+      [],
+      () => {
+        /* empty */
+      },
+    ].forEach(notString => {
       expect(runCheckForValue(notString)).toThrow(error);
     });
   });