Integrates Prettier for formatting YAML, SCSS and JavaScript (#2013)

* Integrates Prettier for formatting YAML, SCSS and JavaScript

* Restoring the formatting for YAML and JSON fixtures and specifying that they be ignored by Prettier

.circleci/config.yml

@@ -44,8 +44,8 @@ jobs:
       - run: sudo apt update && sudo apt install postgresql-client libmsgpack-dev
       - install_dependencies
       - persist_to_workspace:
-          root: &root '~/pdc_describe'
-          paths: '*'
+          root: &root "~/pdc_describe"
+          paths: "*"
 
   rubocop:
     working_directory: *root
@@ -67,8 +67,11 @@ jobs:
           RAILS_ENV: test
     steps:
       - attach_workspace:
-          at: '~/pdc_describe'
+          at: "~/pdc_describe"
       - install_dependencies
+      - run:
+          name: Run prettier
+          command: yarn run prettier --check .
       - run:
           name: Run eslint
           command: yarn lint
@@ -85,7 +88,7 @@ jobs:
     steps:
       - attach_workspace:
           at: *root
-      - browser-tools/install-firefox    
+      - browser-tools/install-firefox
       - run:
           name: Wait for PostgreSQL
           command: dockerize -wait tcp://localhost:5432 -timeout 1m
@@ -95,8 +98,7 @@ jobs:
           name: Run Rspec
           command: bundle exec rspec spec
       - store_artifacts:
-          path:
-            ~/pdc_describe/coverage
+          path: ~/pdc_describe/coverage
       - coveralls/upload
 
 workflows:

.eslintrc.yaml

@@ -1,20 +1,21 @@
 env:
   browser: true
   es2021: true
-extends: 'airbnb-base'
+extends:
+  - "airbnb-base"
+  - "prettier"
 overrides: []
 parserOptions:
   ecmaVersion: latest
   sourceType: module
-ignorePatterns:
-  'app/javascript/entrypoints/vendor/**'
+ignorePatterns: "app/javascript/entrypoints/vendor/**"
 globals:
   $: readonly
-  pdc: readonly     # TODO: Used to pass datacite enums from Ruby to JS. When we move form construction to Ruby, should not be needed.
+  pdc: readonly # TODO: Used to pass datacite enums from Ruby to JS. When we move form construction to Ruby, should not be needed.
   isOrcid: readonly # TODO: Clean this up by using ESM import/export.
 rules:
   no-alert: off # OK: A lot easier than coding up new UI.
-  no-console:   # OK: console.log is fine for debugging, but we don't want to keep it around indefinitely.
-    - error     # Also make sure that warnings and errors are marked as such.
+  no-console: # OK: console.log is fine for debugging, but we don't want to keep it around indefinitely.
+    - error # Also make sure that warnings and errors are marked as such.
     - { allow: ["warn", "error"] }
   no-restricted-syntax: off # TODO: Just one failure

.github/workflows/pages.yml

@@ -2,7 +2,7 @@
 name: Deploy API docs to GitHub Pages
 on:
   push:
-    branches: ['main']
+    branches: ["main"]
     # paths:
     #   - '.github/workflows/pages.yml'
     #   - '.yardopts'
@@ -19,7 +19,7 @@ permissions:
 
 # Allow one concurrent deployment
 concurrency:
-  group: 'pages'
+  group: "pages"
   cancel-in-progress: true
 
 jobs:
@@ -37,4 +37,4 @@ jobs:
           # default `doc` as default of `.yardopts`
           # output-dir: 'doc'
           # default version is 3.2
-          ruby-version: '3.2'
+          ruby-version: "3.2"

.prettierignore

@@ -0,0 +1,9 @@
+README.md
+docs/
+architecture-decisions/
+.prettierrc
+vendor/
+.yarn/
+vite.config.mts
+spec/fixtures/**/*json
+spec/fixtures/**/*yaml

.prettierrc

@@ -0,0 +1,22 @@
+singleQuote: true
+proseWrap: never
+printWidth: 96
+overrides:
+  - files:
+      - '*.md'
+      - 'docs/**/*.md'
+    options:
+      proseWrap: preserve
+      singleQuote: false
+  - files:
+      - 'config/**/*.yml'
+      - '*.yml'
+      - '*.yaml'
+    options:
+      proseWrap: preserve
+      singleQuote: false
+  - files:
+      - 'app/assets/stylesheets/**/*.scss'
+    options:
+      proseWrap: preserve
+      singleQuote: false

app/assets/config/manifest.js

@@ -1,4 +1,3 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
 //= link edit_work_utils.js
-

app/assets/stylesheets/application.scss

@@ -20,7 +20,6 @@
 @import "components/users.scss";
 @import "components/nav.scss";
 
-
 #pdc-discovery-label {
   float: left;
   margin: 0 auto;
@@ -29,7 +28,8 @@
   text-align: center;
 }
 
-.welcome-headers, #welcome-to-pdc {
+.welcome-headers,
+#welcome-to-pdc {
   font-size: 2rem !important;
 }
 
@@ -52,7 +52,7 @@ ol > li::marker {
 .strong {
   text-shadow: 1px 0 #000;
   letter-spacing: 1px;
-  font-weight:bold;
+  font-weight: bold;
 }
 
 ul li {
@@ -369,10 +369,9 @@ div.form-subcommunities {
   @media all and (min-width: 765px) {
     grid-template-columns: 1fr 1fr 1fr;
   }
-
 }
 
-div.form-subcommunities .form-check{
+div.form-subcommunities .form-check {
   padding: 0em 1rem;
   margin-top: 0.5rem;
   margin-bottom: 0;
@@ -383,7 +382,7 @@ div.form-subcommunities .form-check{
 }
 
 table.dataTable {
-  overflow-wrap: anywhere
+  overflow-wrap: anywhere;
 }
 
 .user-edit-long-field {

app/assets/stylesheets/components/header.scss

@@ -13,7 +13,7 @@ header {
   }
 
   .about,
-  .groups, 
+  .groups,
   .how-to-submit,
   .help {
     background-color: #595959;

app/javascript/entrypoints/application.js

@@ -37,7 +37,11 @@ import EditGroupUtils from './edit_group_utils';
 import.meta.glob('../channels/*.js');
 
 // Load Rails JavaScript API
-if (typeof (window._rails_loaded) === 'undefined' || window._rails_loaded == null || !window._rails_loaded) {
+if (
+  typeof window._rails_loaded === 'undefined' ||
+  window._rails_loaded == null ||
+  !window._rails_loaded
+) {
   Rails.start();
 }
 
@@ -53,7 +57,7 @@ function ready() {
   WorksWizardReview.bind('#grant-button');
 
   // This should be moved into the Rails object
-  if (typeof (pdc) !== 'undefined' && pdc != null && pdc) {
+  if (typeof pdc !== 'undefined' && pdc != null && pdc) {
     const groupUtils = new EditGroupUtils(window.jQuery);
     groupUtils.bind(pdc);
   }

app/javascript/entrypoints/edit_group_utils.js

@@ -82,14 +82,26 @@ class EditGroupUtils {
 
   onAddSubmitter() {
     const url = this.pdc.addSubmitterUrl;
-    this.addUserToGroup(url, '#submitter-uid-to-add', '#add-submitter-message', '#submitter-list', 'submit');
+    this.addUserToGroup(
+      url,
+      '#submitter-uid-to-add',
+      '#add-submitter-message',
+      '#submitter-list',
+      'submit',
+    );
     $('#submitter-uid-to-add').focus();
     return false;
   }
 
   onAddAdmin() {
     const url = this.pdc.addAdminUrl;
-    this.addUserToGroup(url, '#admin-uid-to-add', '#add-admin-message', '#curator-list', 'admin');
+    this.addUserToGroup(
+      url,
+      '#admin-uid-to-add',
+      '#add-admin-message',
+      '#curator-list',
+      'admin',
+    );
     $('#admin-uid-to-add').focus();
     return false;
   }
@@ -130,7 +142,8 @@ class EditGroupUtils {
       html += ' (you)';
     }
     if (isSuperAdmin) {
-      html += ' <i title="This is a system administrator, access cannot be changed." class="bi bi-person-workspace"></i>';
+      html +=
+        ' <i title="This is a system administrator, access cannot be changed." class="bi bi-person-workspace"></i>';
     }
     if (canDelete) {
       html += `
@@ -171,7 +184,15 @@ class EditGroupUtils {
       const isYou = false;
       const isSuperAdmin = false;
       // eslint-disable-next-line max-len
-      this.addUserHtml(this.elList, this.uid, this.groupId, this.role, canDelete, isYou, isSuperAdmin);
+      this.addUserHtml(
+        this.elList,
+        this.uid,
+        this.groupId,
+        this.role,
+        canDelete,
+        isYou,
+        isSuperAdmin,
+      );
       // eslint-enable-next-line max-len
     };
 

app/javascript/entrypoints/pdc/copy_to_clipboard.es6

@@ -13,13 +13,25 @@ export default class CopytoClipboard {
 
   copy_doi() {
     const doi = $('#copy-doi').data('url');
-    this.copyToClipboard(doi, '#copy-doi-icon', '#copy-doi-label', 'copy-doi-label-normal', 'copy-doi-label-copied');
+    this.copyToClipboard(
+      doi,
+      '#copy-doi-icon',
+      '#copy-doi-label',
+      'copy-doi-label-normal',
+      'copy-doi-label-copied',
+    );
     return false;
   }
 
   copy_citation(target) {
     const value = target.parentElement.dataset.text;
-    this.copyToClipboard(value, target.parentElement.children[0], target.parentElement.children[1], 'copy-doi-label-normal', 'copy-doi-label-copied');
+    this.copyToClipboard(
+      value,
+      target.parentElement.children[0],
+      target.parentElement.children[1],
+      'copy-doi-label-normal',
+      'copy-doi-label-copied',
+    );
     return false;
   }
 
@@ -58,15 +70,18 @@ export default class CopytoClipboard {
   //  to an element)
   copyToClipboard(value, iconEl, labelEl, normalClass, copiedClass) {
     // Copy value to the clipboard....
-    navigator.clipboard.writeText(value).then(() => {
-      // ...and notify the user
-      this.setCopiedToClipboard(iconEl, labelEl, normalClass, copiedClass);
-      setTimeout(() => {
-        this.resetCopyToClipboard(iconEl, labelEl, normalClass, copiedClass);
-      }, 20000);
-    }, () => {
-      this.errorCopyToClipboard(iconEl, 'Copy to clipboard failed');
-    });
+    navigator.clipboard.writeText(value).then(
+      () => {
+        // ...and notify the user
+        this.setCopiedToClipboard(iconEl, labelEl, normalClass, copiedClass);
+        setTimeout(() => {
+          this.resetCopyToClipboard(iconEl, labelEl, normalClass, copiedClass);
+        }, 20000);
+      },
+      () => {
+        this.errorCopyToClipboard(iconEl, 'Copy to clipboard failed');
+      },
+    );
     // Clear focus from the button.
     document.activeElement.blur();
   }

app/javascript/entrypoints/pdc/edit_required_fields.es6

@@ -67,7 +67,7 @@ export default class EditRequiredFields {
     let i;
     const rows = $('.creators-table-row');
     for (i = 0; i < rows.length; i += 1) {
-      if (!((new TableRow(rows[i])).is_empty())) {
+      if (!new TableRow(rows[i]).is_empty()) {
         return true;
       }
     }
@@ -79,12 +79,24 @@ export default class EditRequiredFields {
     let validCreators = true;
     const rows = $('.creators-table-row');
     for (i = 0; i < rows.length; i += 1) {
-      if (!(new TableRow(rows[i])).is_empty()) {
-        if (!this.valid_required_field(rows[i], '.given-entry-creator', '.given-name-required-message')) {
+      if (!new TableRow(rows[i]).is_empty()) {
+        if (
+          !this.valid_required_field(
+            rows[i],
+            '.given-entry-creator',
+            '.given-name-required-message',
+          )
+        ) {
           validCreators = false;
         }
 
-        if (!this.valid_required_field(rows[i], '.family-entry-creator', '.family-name-required-message')) {
+        if (
+          !this.valid_required_field(
+            rows[i],
+            '.family-entry-creator',
+            '.family-name-required-message',
+          )
+        ) {
           validCreators = false;
         }
       }
@@ -97,7 +109,7 @@ export default class EditRequiredFields {
     let i;
     const rows = $('.contributors-table-row');
     for (i = 0; i < rows.length; i += 1) {
-      if (!((new TableRow(rows[i])).is_empty())) {
+      if (!new TableRow(rows[i]).is_empty()) {
         return true;
       }
     }
@@ -109,8 +121,14 @@ export default class EditRequiredFields {
     let validContributors = true;
     const rows = $('.contributors-table-row');
     for (i = 0; i < rows.length; i += 1) {
-      if (!(new TableRow(rows[i])).is_empty()) {
-        if (!this.valid_required_field(rows[i], '.type-entry-contributor', '.type-required-message')) {
+      if (!new TableRow(rows[i]).is_empty()) {
+        if (
+          !this.valid_required_field(
+            rows[i],
+            '.type-entry-contributor',
+            '.type-required-message',
+          )
+        ) {
           validContributors = false;
         }
       }