feat: add prettier command (#83)

* feat: add prettier command

(cherry picked from commit f47577a90c4f9210ecfbe34b491f7e618c04b6ca)

* Update .prettierignore

* Update .prettierrc

.prettierignore

@@ -0,0 +1,6 @@
+dist
+node_modules
+.yarn
+build
+coverage
+.docusaurus

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
+  "printWidth": 80,
+  "proseWrap": "never",
+  "singleQuote": true,
+  "trailingComma": "all"
+}

CODE_OF_CONDUCT.md

@@ -1,2 +1,3 @@
 # Code of Conduct
-Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
+
+Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated.

CONTRIBUTING.md

@@ -1,8 +1,9 @@
 # Contributing to Infima
-We want to make contributing to this project as easy and transparent as
-possible.
+
+We want to make contributing to this project as easy and transparent as possible.
 
 ## Pull Requests
+
 We actively welcome your pull requests.
 
 1. Fork the repo and create your branch from `master`.
@@ -13,19 +14,17 @@ We actively welcome your pull requests.
 6. If you haven't already, complete the Contributor License Agreement ("CLA").
 
 ## Contributor License Agreement ("CLA")
-In order to accept your pull request, we need you to submit a CLA. You only need
-to do this once to work on any of Facebook's open source projects.
+
+In order to accept your pull request, we need you to submit a CLA. You only need to do this once to work on any of Facebook's open source projects.
 
 Complete your CLA here: <https://code.facebook.com/cla>
 
 ## Issues
-We use GitHub issues to track public bugs. Please ensure your description is
-clear and has sufficient instructions to be able to reproduce the issue.
 
-Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
-disclosure of security bugs. In those cases, please go through the process
-outlined on that page and do not file a public issue.
+We use GitHub issues to track public bugs. Please ensure your description is clear and has sufficient instructions to be able to reproduce the issue.
+
+Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. In those cases, please go through the process outlined on that page and do not file a public issue.
 
 ## License
-By contributing to Infima, you agree that your contributions will be licensed
-under the LICENSE file in the root directory of this source tree.
+
+By contributing to Infima, you agree that your contributions will be licensed under the LICENSE file in the root directory of this source tree.

package.json

@@ -8,6 +8,8 @@
   ],
   "private": true,
   "scripts": {
+    "prettier": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx}\"",
+    "prettier:docs": "prettier --config .prettierrc --write \"**/*.{md,mdx}\"",
     "start": "cd packages/core && npm start",
     "build": "yarn workspace infima build",
     "website:start": "yarn workspace infima-website start",
@@ -17,6 +19,15 @@
   },
   "devDependencies": {
     "husky": "^5.0.9",
-    "is-ci": "^3.0.0"
+    "is-ci": "^3.0.0",
+    "prettier": "^2.2.1"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "prettier --write"
+    ],
+    "*.{md,mdx}": [
+      "prettier --write"
+    ]
   }
 }

packages/core/dist/js/alerts.js

@@ -6,7 +6,7 @@
  */
 
 function alert($elements) {
-  $elements.forEach($alert => {
+  $elements.forEach(($alert) => {
     $alert.addEventListener('click', (e) => {
       if (e.target && e.target.classList.contains('close')) {
         $alert.remove();

packages/core/dist/js/alerts.min.js

@@ -6,7 +6,7 @@
  */
 
 function alert($elements) {
-  $elements.forEach($alert => {
+  $elements.forEach(($alert) => {
     $alert.addEventListener('click', (e) => {
       if (e.target && e.target.classList.contains('close')) {
         $alert.remove();

packages/core/dist/js/dropdowns.js

@@ -6,13 +6,13 @@
  */
 
 function dropdowns($elements) {
-  $elements.forEach($dropdown => {
+  $elements.forEach(($dropdown) => {
     if ($dropdown.classList.contains('dropdown--hoverable')) {
       return;
     }
 
     const $toggle = $dropdown.querySelector('[data-toggle="dropdown"]');
-    $toggle.addEventListener('click', e => {
+    $toggle.addEventListener('click', (e) => {
       function dismissDropdown() {
         $toggle.classList.remove('button--active');
         $dropdown.classList.remove('dropdown--show');

packages/core/dist/js/dropdowns.min.js

@@ -6,13 +6,13 @@
  */
 
 function dropdowns($elements) {
-  $elements.forEach($dropdown => {
+  $elements.forEach(($dropdown) => {
     if ($dropdown.classList.contains('dropdown--hoverable')) {
       return;
     }
 
     const $toggle = $dropdown.querySelector('[data-toggle="dropdown"]');
-    $toggle.addEventListener('click', e => {
+    $toggle.addEventListener('click', (e) => {
       function dismissDropdown() {
         $toggle.classList.remove('button--active');
         $dropdown.classList.remove('dropdown--show');

packages/core/dist/js/menu.js

@@ -6,8 +6,8 @@
  */
 
 function menu($elements) {
-  $elements.forEach($menu => {
-    $menu.addEventListener('click', event => {
+  $elements.forEach(($menu) => {
+    $menu.addEventListener('click', (event) => {
       let $listItem = event.target;
       while ($listItem) {
         if ($listItem.classList.contains('menu')) {
@@ -37,7 +37,7 @@ function menu($elements) {
 
       $menu
         .querySelectorAll('.menu__link')
-        .forEach($elItem => $elItem.classList.remove('menu__link--active'));
+        .forEach(($elItem) => $elItem.classList.remove('menu__link--active'));
 
       // Traverse parents and add active class.
       while ($listItem) {
@@ -58,7 +58,7 @@ function menu($elements) {
 
     $button = $menu.querySelector('.menu__button');
     if ($button) {
-      $button.addEventListener('click', e => {
+      $button.addEventListener('click', (e) => {
         $menu.classList.toggle('menu--show');
       });
     }

packages/core/dist/js/menu.min.js

@@ -6,8 +6,8 @@
  */
 
 function menu($elements) {
-  $elements.forEach($menu => {
-    $menu.addEventListener('click', event => {
+  $elements.forEach(($menu) => {
+    $menu.addEventListener('click', (event) => {
       let $listItem = event.target;
       while ($listItem) {
         if ($listItem.classList.contains('menu')) {
@@ -37,7 +37,7 @@ function menu($elements) {
 
       $menu
         .querySelectorAll('.menu__link')
-        .forEach($elItem => $elItem.classList.remove('menu__link--active'));
+        .forEach(($elItem) => $elItem.classList.remove('menu__link--active'));
 
       // Traverse parents and add active class.
       while ($listItem) {
@@ -58,7 +58,7 @@ function menu($elements) {
 
     $button = $menu.querySelector('.menu__button');
     if ($button) {
-      $button.addEventListener('click', e => {
+      $button.addEventListener('click', (e) => {
         $menu.classList.toggle('menu--show');
       });
     }

packages/core/dist/js/navbar.js

@@ -6,7 +6,7 @@
  */
 
 function navbar($elements) {
-  $elements.forEach($navbar => {
+  $elements.forEach(($navbar) => {
     // TODO: Use data-toggle approach.
     const $toggle = $navbar.querySelector('.navbar__toggle');
     const $sidebar = $navbar.querySelector('.navbar-sidebar');
@@ -17,12 +17,12 @@ function navbar($elements) {
       return;
     }
 
-    $toggle.addEventListener('click', e => {
+    $toggle.addEventListener('click', (e) => {
       $navbar.classList.add('navbar-sidebar--show');
     });
 
-    [$backdrop, $sidebarClose].forEach($el =>
-      $el.addEventListener('click', e => {
+    [$backdrop, $sidebarClose].forEach(($el) =>
+      $el.addEventListener('click', (e) => {
         $navbar.classList.remove('navbar-sidebar--show');
       }),
     );

packages/core/dist/js/navbar.min.js

@@ -6,7 +6,7 @@
  */
 
 function navbar($elements) {
-  $elements.forEach($navbar => {
+  $elements.forEach(($navbar) => {
     // TODO: Use data-toggle approach.
     const $toggle = $navbar.querySelector('.navbar__toggle');
     const $sidebar = $navbar.querySelector('.navbar-sidebar');
@@ -17,12 +17,12 @@ function navbar($elements) {
       return;
     }
 
-    $toggle.addEventListener('click', e => {
+    $toggle.addEventListener('click', (e) => {
       $navbar.classList.add('navbar-sidebar--show');
     });
 
-    [$backdrop, $sidebarClose].forEach($el =>
-      $el.addEventListener('click', e => {
+    [$backdrop, $sidebarClose].forEach(($el) =>
+      $el.addEventListener('click', (e) => {
         $navbar.classList.remove('navbar-sidebar--show');
       }),
     );

packages/core/dist/js/radio-behavior.js

@@ -7,15 +7,15 @@
 
 function makeRadioBehavior(eventName, itemClass, activeItemClass) {
   return function radioBehavior($elements) {
-    $elements.forEach($element => {
-      $element.addEventListener(eventName, event => {
+    $elements.forEach(($element) => {
+      $element.addEventListener(eventName, (event) => {
         if (event.target && event.target.classList.contains(itemClass)) {
-          $element.querySelectorAll('.' + itemClass).forEach($elItem => 
-            $elItem.classList.remove(activeItemClass)
-          );
+          $element
+            .querySelectorAll('.' + itemClass)
+            .forEach(($elItem) => $elItem.classList.remove(activeItemClass));
           event.target.classList.add(activeItemClass);
         }
       });
     });
-  }
+  };
 }

packages/core/dist/js/radio-behavior.min.js

@@ -7,15 +7,15 @@
 
 function makeRadioBehavior(eventName, itemClass, activeItemClass) {
   return function radioBehavior($elements) {
-    $elements.forEach($element => {
-      $element.addEventListener(eventName, event => {
+    $elements.forEach(($element) => {
+      $element.addEventListener(eventName, (event) => {
         if (event.target && event.target.classList.contains(itemClass)) {
-          $element.querySelectorAll('.' + itemClass).forEach($elItem => 
-            $elItem.classList.remove(activeItemClass)
-          );
+          $element
+            .querySelectorAll('.' + itemClass)
+            .forEach(($elItem) => $elItem.classList.remove(activeItemClass));
           event.target.classList.add(activeItemClass);
         }
       });
     });
-  }
+  };
 }

packages/core/gulpfile.js

@@ -26,7 +26,7 @@ function transformStyles() {
         '**/_*/**', // Exclude entire directories starting with '_'.
       ],
     })
-    .pipe(postcss(modernPreset.plugins, { syntax: modernPreset.syntax }))
+    .pipe(postcss(modernPreset.plugins, {syntax: modernPreset.syntax}))
     .pipe(gulp.dest('./dist/css'));
 }
 
@@ -46,15 +46,15 @@ function transformScripts() {
 function minifyStyles() {
   return gulp
     .src('./dist/css/**/*.css')
-    .pipe(rename({ suffix: '.min' }))
+    .pipe(rename({suffix: '.min'}))
     .pipe(postcss([cssnano()]))
     .pipe(gulp.dest('./dist/css'));
 }
 
 function minifyScripts() {
   return gulp
     .src('./dist/js/**/*.js')
-    .pipe(rename({ suffix: '.min' }))
+    .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest('./dist/js'));
 }
 
@@ -79,7 +79,10 @@ function clean() {
   return del(['./dist/**/*', './demo/css/**', './demo/js/**']);
 }
 
-const transformAssets = gulp.parallel(gulp.series(transformStyles, createRtlStyles), transformScripts);
+const transformAssets = gulp.parallel(
+  gulp.series(transformStyles, createRtlStyles),
+  transformScripts,
+);
 const copyAssetsToDemo = gulp.parallel(copyStylesToDemo, copyScriptsToDemo);
 const minifyAssets = gulp.parallel(minifyStyles, minifyScripts);
 const transformAndCopy = gulp.series(transformAssets, copyAssetsToDemo);

packages/core/js/alerts.js

@@ -6,7 +6,7 @@
  */
 
 function alert($elements) {
-  $elements.forEach($alert => {
+  $elements.forEach(($alert) => {
     $alert.addEventListener('click', (e) => {
       if (e.target && e.target.classList.contains('close')) {
         $alert.remove();

packages/core/js/dropdowns.js

@@ -6,13 +6,13 @@
  */
 
 function dropdowns($elements) {
-  $elements.forEach($dropdown => {
+  $elements.forEach(($dropdown) => {
     if ($dropdown.classList.contains('dropdown--hoverable')) {
       return;
     }
 
     const $toggle = $dropdown.querySelector('[data-toggle="dropdown"]');
-    $toggle.addEventListener('click', e => {
+    $toggle.addEventListener('click', (e) => {
       function dismissDropdown() {
         $toggle.classList.remove('button--active');
         $dropdown.classList.remove('dropdown--show');

packages/core/js/menu.js

@@ -6,8 +6,8 @@
  */
 
 function menu($elements) {
-  $elements.forEach($menu => {
-    $menu.addEventListener('click', event => {
+  $elements.forEach(($menu) => {
+    $menu.addEventListener('click', (event) => {
       let $listItem = event.target;
       while ($listItem) {
         if ($listItem.classList.contains('menu')) {
@@ -37,7 +37,7 @@ function menu($elements) {
 
       $menu
         .querySelectorAll('.menu__link')
-        .forEach($elItem => $elItem.classList.remove('menu__link--active'));
+        .forEach(($elItem) => $elItem.classList.remove('menu__link--active'));
 
       // Traverse parents and add active class.
       while ($listItem) {
@@ -58,7 +58,7 @@ function menu($elements) {
 
     $button = $menu.querySelector('.menu__button');
     if ($button) {
-      $button.addEventListener('click', e => {
+      $button.addEventListener('click', (e) => {
         $menu.classList.toggle('menu--show');
       });
     }