chore: add code formatting with Prettier (#619)

.eslintrc.json

@@ -14,27 +14,19 @@
   ],
   "overrides": [
     {
-      "files": [
-        "*.js",
-        "*.ts"
-      ],
+      "files": ["*.js", "*.ts"],
       "parserOptions": {
-        "project": [
-          "tsconfig.json"
-        ],
+        "project": ["tsconfig.json"],
         "tsconfigRootDir": ".",
         "createDefaultProgram": true
       },
-      "extends": [
-        "plugin:@tylertech-eslint/recommended"
-      ],
+      "extends": ["plugin:@tylertech-eslint/recommended", "plugin:prettier/recommended"],
       "rules": {
         "@typescript-eslint/indent": "off",
         "@typescript-eslint/no-empty-interface": ["error", { "allowSingleExtends": true }],
         "@typescript-eslint/explicit-function-return-type": ["error", { "allowExpressions": true }],
         "@typescript-eslint/comma-dangle": ["error"],
         "@typescript-eslint/comma-spacing": ["error"],
-        "@typescript-eslint/no-extra-parens": ["error", "all", { "nestedBinaryExpressions": false }],
         "@typescript-eslint/explicit-member-accessibility": ["error", { "overrides": { "constructors": "no-public" } }],
         "@typescript-eslint/arrow-body-style": "off",
         "@typescript-eslint/no-require-imports": "error",
@@ -46,7 +38,7 @@
         "no-extra-parens": "off",
         "max-len": "off",
         "arrow-body-style": "off",
-        "eqeqeq": ["error", "always", {"null": "ignore"}]
+        "eqeqeq": ["error", "always", { "null": "ignore" }]
       }
     }
   ]

.github/workflows/format.yml

@@ -0,0 +1,42 @@
+name: Code Style
+
+on:
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Cache Dependencies
+        id: cache
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Use Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install
+        run: npm ci
+
+      - name: Prettier Check
+        run: npm run prettier:check

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.prettierignore

@@ -0,0 +1,14 @@
+.github/
+.husky/
+.storybook/
+.storybook-static/
+.coverage/
+dist/
+docs/
+node_modules/
+src/dev/
+src/test/
+package-lock.json
+CONTRIBUTING.md
+CHANGELOG.md
+README.md

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "printWidth": 160,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

.storybook/_preview-storybook.scss

@@ -51,7 +51,7 @@ blockquote {
 // Tables
 //
 
-.sbdocs.sbdocs-content table :is(td,th) {
+.sbdocs.sbdocs-content table :is(td, th) {
   color: var(--forge-theme-text-high);
   border-color: var(--forge-theme-outline);
 }
@@ -75,7 +75,7 @@ blockquote {
 
 .sbdocs code > span {
   font: inherit;
-  
+
   > a {
     font: inherit;
     color: var(--forge-theme-primary);

.storybook/manager.ts

@@ -7,5 +7,5 @@ addons.setConfig({
     filters: {
       hidden: item => !item.tags?.includes('hidden')
     }
-  },
+  }
 });

.storybook/preview-head.html

@@ -1,6 +1,6 @@
-<meta http-equiv="cache-control" content="no-cache">
-<meta http-equiv="expires" content="0"> 
-<meta http-equiv="pragma" content="no-cache">
+<meta http-equiv="cache-control" content="no-cache" />
+<meta http-equiv="expires" content="0" />
+<meta http-equiv="pragma" content="no-cache" />
 
-<link rel="shortcut icon" href="https://cdn.forge.tylertech.com/favicon.ico">
-<link rel="stylesheet" href="https://cdn.forge.tylertech.com/v1/css/tyler-font.css">
+<link rel="shortcut icon" href="https://cdn.forge.tylertech.com/favicon.ico" />
+<link rel="stylesheet" href="https://cdn.forge.tylertech.com/v1/css/tyler-font.css" />

README.md

@@ -105,7 +105,7 @@ The `forge.css` file contains other stylesheets that you may or may not need. We
 Additionally, apply the `forge-typography` class to a root element (typically the `<body>`):
 
 ```html
-<body class="forge-typography">
+<body class="forge-typography"></body>
 ```
 
 ### Using via CDN
@@ -116,14 +116,16 @@ As an example, the text-field and button components can be loaded directly like
 
 ```html
 <!-- Optionally include a minimal base set of styles commonly used with Forge-based applications -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tylertech/forge@2.0.0/dist/forge-core.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tylertech/forge@2.0.0/dist/forge-core.css" />
 
 <!-- Always include the theme and typography styles -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tylertech/forge@2.0.0/dist/theme/forge-theme.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tylertech/forge@2.0.0/dist/typography/forge-typography.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tylertech/forge@2.0.0/dist/theme/forge-theme.css" />
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@tylertech/forge@2.0.0/dist/typography/forge-typography.css" />
 
 <!-- Some components (such as button) require the use of a global stylesheet (for now) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tylertech/forge@2.0.0/dist/button/forge-button.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tylertech/forge@2.0.0/dist/button/forge-button.css" />
 
 <!-- Load the ES modules JavaScript for each component you need -->
 <script type="module" src="https://cdn.jsdelivr.net/npm/@tylertech/forge@2.0.0/dist/esm/text-field/index.js"></script>
@@ -146,7 +148,7 @@ Now the text-field and button components can be used anywhere in the DOM:
 Don't forget to also add the `forge-typography` class to the `<body>` element to ensure your application inherits the default typography styles:
 
 ```html
-<body class="forge-typography">
+<body class="forge-typography"></body>
 ```
 
 ## Need help?

commitlint.config.js → commitlint.config.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extends: ['@commitlint/config-conventional'],
   rules: {
     'header-max-length': [0, 'always', 100],

custom-elements-manifest.config.mjs

@@ -26,13 +26,13 @@ export default {
       tags: {
         dependency: {
           mappedName: 'dependencies',
-          isArray: true,
+          isArray: true
         },
         globalconfig: {
           mappedName: 'globalConfigProperties',
-          isArray: true,
-        },
+          isArray: true
+        }
       }
-    }),
+    })
   ]
 };

forge.json

@@ -4,9 +4,7 @@
     "header": "/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n"
   },
   "karma": {
-    "stylesheets": [
-      "src/lib/forge.scss"
-    ]
+    "stylesheets": ["src/lib/forge.scss"]
   },
   "packageConfig": {
     "copyFiles": [