chore(components): update eslint & prettier setup

.npmrc

@@ -11,7 +11,10 @@ resolve-peers-from-workspace-root=false
 # Less strict, but required for tooling to not barf on duplicate peer trees.
 # (many libraries declare the same peers, which resolve to the same
 #  versions)
+dedupe-injected-deps=true
 dedupe-peer-dependents=true
+inject-workspace-packages=true
+sync-injected-deps-after-scripts[]=build
 public-hoist-pattern[]=ember-source
 
 ################

package.json

@@ -3,6 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "format": "pnpm -r --if-present format",
+    "lint": "pnpm -r --if-present lint",
+    "lint:fix": "pnpm -r --if-present lint:fix",
     "release-candidate-packages": "pnpm changeset publish --tag rc",
     "release-packages": "pnpm changeset publish",
     "version-candidate-packages": "pnpm changeset version --snapshot rc && pnpm install --lockfile-only",

packages/components/.gitignore

@@ -1,32 +1,17 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# The authoritative copies of these live in the monorepo root (because they're
+# more useful on github that way), but the build copies them into here so they
+# will also appear in published NPM packages.
+/README.md
+/LICENSE.md
 
 # compiled output
-/dist/
-/declarations/
+dist/
+declarations/
 
-# dependencies
-/bower_components/
-/node_modules/
+# npm/pnpm/yarn pack output
+*.tgz
 
-# misc
-/.env*
-/.pnp*
-/.sass-cache
-/.eslintcache
-/connect.lock
-/coverage/
-/libpeerconnection.log
-/npm-debug.log*
-/testem.log
-/yarn-error.log
-.DS_Store
+# deps & caches
 node_modules/
-.vscode/settings.json
-
-# ember-try
-/.node_modules.ember-try/
-/bower.json.ember-try
-/package.json.ember-try
-
-# broccoli-debug
-/DEBUG/
+.eslintcache
+.prettiercache

packages/components/.prettierignore

@@ -1,26 +1,9 @@
 # unconventional js
 /blueprints/*/files/
-/vendor/
 
 # compiled output
 /dist/
-/tmp/
 /declarations/
 
-# dependencies
-/bower_components/
-/node_modules/
-
 # misc
-/coverage/
-!.*
-.eslintcache
-.lint-todo/
-
-# ember-try
-/.node_modules.ember-try/
-/bower.json.ember-try
-/npm-shrinkwrap.json.ember-try
-/package.json.ember-try
-/package-lock.json.ember-try
-/yarn.lock.ember-try
+/coverage/

packages/components/.prettierrc.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
 module.exports = {
-  singleQuote: true,
+  plugins: ['prettier-plugin-ember-template-tag'],
   trailingComma: 'es5',
   overrides: [
     {
-      files: '*.hbs',
+      files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',
       options: {
-        singleQuote: false,
-        printWidth: 120,
+        singleQuote: true,
+        templateSingleQuote: false,
       },
     },
     {
-      files: '*.scss',
+      files: '*.{hbs,scss}',
       options: {
-        singleQuote: false,
+        printWidth: 120,
       },
     },
   ],

packages/components/.template-lintrc.cjs

@@ -14,5 +14,4 @@ module.exports = {
     'no-redundant-role': false,
     'no-builtin-form-components': false,
   },
-  ignore: ['blueprints/**'],
 };

packages/components/CHANGELOG-FIGMA-COMPONENTS.md

@@ -70,10 +70,10 @@ In many cases, replacing v1.0 library components with the components in the Figm
 - Added an `alignment` property which can be set at the root level to `left` or `center`.
 - The footer now supports up to three actions at once. The actions are now organized in accordance with our [Button Organization](/patterns/button-organization) pattern.
 - Updated several visual styles including:
-    - Removing the divider
-    - Reducing the title from `Display/400/Bold` to `Display/300/Bold`
-    - Changing the icon and the title color from `Foreground/Faint` to `Foreground/Strong`
-    - Changing the body text color from `Foreground/Faint` to `Foreground/Primary`
+  - Removing the divider
+  - Reducing the title from `Display/400/Bold` to `Display/300/Bold`
+  - Changing the icon and the title color from `Foreground/Faint` to `Foreground/Strong`
+  - Changing the body text color from `Foreground/Faint` to `Foreground/Primary`
 
 _Adding support for three actions within the `ApplicationState` results in a breaking change to the previous actions. Before updating the library, we recommend annotating the text and icon name (with a comment or otherwise) in files that are in progress or still being referenced by engineering._
 

packages/components/CHANGELOG-FIGMA-PATTERNS.md

@@ -2,4 +2,4 @@
 
 ## December 20th, 2024
 
-Released HDS Patterns UI Kit v2.0.
+Released HDS Patterns UI Kit v2.0.

packages/components/CHANGELOG-FIGMA-UTILITIES.md

@@ -10,4 +10,4 @@ Released [HDS Wireframes UI Kit](https://www.figma.com/design/w0ukydeAsbv6sJirLx
 
 ## August 30th, 2024
 
-Released [HDS A11y Helper Annotations Kit](https://www.figma.com/design/EEfM1jjqLfUv59eYLopn5x/HDS-A11Y-Helper-UI-Kit?m=auto)
+Released [HDS A11y Helper Annotations Kit](https://www.figma.com/design/EEfM1jjqLfUv59eYLopn5x/HDS-A11Y-Helper-UI-Kit?m=auto)

packages/components/CHANGELOG.md

@@ -1545,7 +1545,7 @@ Alternatively, you can import the CSS by adding this configuration in `ember-cli
 
 ```js
 app.import(
-  'node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css'
+  "node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css"
 );
 ```
 

packages/components/CONTRIBUTING.md

@@ -2,46 +2,46 @@
 
 ## Installation
 
-* `git clone <repository-url>`
-* `pnpm install`
-* `cd packages/components`
+- `git clone <repository-url>`
+- `pnpm install`
+- `cd packages/components`
 
 ## Building
 
-* `pnpm build`
+- `pnpm build`
 
 To set a watcher on files located in `src` and rebuild on change
 
-* `pnpm start`
+- `pnpm start`
 
 ## Linting
 
-* `pnpm lint`
-* `pnpm lint:fix`
+- `pnpm lint`
+- `pnpm lint:fix`
 
 ## Stylelinting
 
-* `pnpm lint:css`
-* `pnpm lint:css:fix`
+- `pnpm lint:css`
+- `pnpm lint:css:fix`
 
 Notice: to have VSCode autofix the code on save, you have to:
 
-* install the [Stylelint extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
-* in either the user or workspace settings add the entry `"source.fixAll.stylelint": true` to the `editor.codeActionsOnSave` option
+- install the [Stylelint extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+- in either the user or workspace settings add the entry `"source.fixAll.stylelint": true` to the `editor.codeActionsOnSave` option
 
 ## Running tests
 
 The associated test application is located at the root of the monorepo, in `showcase`
 
-* `cd showcase`
-* `ember test` – Runs the test suite on the current Ember version
-* `ember test --server` – Runs the test suite in "watch mode"
-* `ember try:each` – Runs the test suite against multiple Ember versions
+- `cd showcase`
+- `ember test` – Runs the test suite on the current Ember version
+- `ember test --server` – Runs the test suite in "watch mode"
+- `ember try:each` – Runs the test suite against multiple Ember versions
 
 ## Running the `showcase` application
 
-* `cd showcase`
-* `pnpm start`
-* Visit the application at [http://localhost:4200](http://localhost:4200).
+- `cd showcase`
+- `pnpm start`
+- Visit the application at [http://localhost:4200](http://localhost:4200).
 
 For more information on using ember-cli, visit [https://cli.emberjs.com/release/](https://cli.emberjs.com/release/).

packages/components/NEW-COMPONENT-CHECKLIST.md

@@ -14,7 +14,9 @@ The following should be available as resources for the Project Kickoff.
 A project kickoff will be scheduled before the project start date. The kickoff will be used to align on project scope, timelines, and milestones and as a space to discuss any open questions. In attendance should be Design Systems Team leadership, lead Designer and Engineer on the project, and Design/Engineer buddies (if applicable).
 
 ## Design Checklist
+
 The design checklist has 4 primary parts:
+
 1. component design
 2. testing
 3. documentation
@@ -23,6 +25,7 @@ The design checklist has 4 primary parts:
 The design process is largely cyclical, so some steps may be repeated until final approval.
 
 ### Component Design
+
 - [ ] [create a branch](https://help.figma.com/hc/en-us/articles/360063144053-Create-branches-and-merge-changes#Create_a_branch) in the [product components ui kit](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components)
 - [ ] add a new page for the component, as needed
 - [ ] copy & paste the [new component template](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components?type=design&node-id=46856-287&mode=design&t=V4zCk5Jv07PcHYzZ-4) to the new page
@@ -59,6 +62,7 @@ The design process is largely cyclical, so some steps may be repeated until fina
   - let them know it's been approved and answer any remaining questions
 
 ### Component Testing
+
 - [ ] prepare for testing
   - [ ] lock the components
   - [ ] change the badge in the banner to "Experimental"
@@ -72,24 +76,27 @@ The design process is largely cyclical, so some steps may be repeated until fina
 - [ ] if iterations are needed, work through the process until approved (don't forget to branch!)
 
 ### Documentation
+
 - [ ] while the component is being tested, write the documentation
   - artifacts should include:
     - design guidelines
     - specifications
     - relevant accessibility details
 
 ### Release in Figma
+
 Once key stakeholders have tested the component and iterations are approved, prepare for a final release of the component.
 
 - [ ] add a changelog entry to [CHANGELOG-FIGMA-COMPONENTS.md](https://github.com/hashicorp/design-system/blob/main/packages/components/CHANGELOG-FIGMA-COMPONENTS.md)
 - [ ] if changes were made, publish the component
 - [ ] once the code has been released, communicate the release in the slack channel [#team-design-systems](https://hashicorp.slack.com/archives/C7KTUHNUS)
 
-
 ## Engineering Checklist
+
 The engineering checklist has six parts: creating the feature branch, component template, component backing class, component style, tests, and documentation.
 
 ### Dependency
+
 - Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however.
 
 ### Component Creation