chore(linting): set up spelling linting (#7389)

**Related Issue:** N/A ## Summary Wires up [`@cspell/eslint-plugin`](https://github.com/streetsidesoftware/cspell/tree/main/packages/cspell-eslint-plugin#readme) to help catch typos early. ### Notes * issues will be reported as warnings * added custom calcite design system dictionary (we can split up later as it grows) * time zone section was added since `ignorePaths` was not being honored for some reason (ESLint config is possibly overriding) * fixed some warnings
Esri · Aug 18, 2023 · 8960126 · 8960126
1 parent df2b911
commit 8960126
Show file tree

Hide file tree

Showing 46 changed files with 6,807 additions and 4,938 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -0,0 +1,23 @@
+{
+  "dictionaries": [
+    "calcite-dev",
+    "css",
+    "en-common-misspellings",
+    "fullstack",
+    "html",
+    "html-symbol-entities",
+    "lorem-ipsum",
+    "markdown",
+    "node",
+    "npm",
+    "shell",
+    "software-terms",
+    "typescript"
+  ],
+  "dictionaryDefinitions": [
+    {
+      "name": "calcite-dev",
+      "path": "./support/dictionaries/dict-calcite-design-system.txt"
+    }
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@babel/preset-react": "7.18.6",
+    "@cspell/eslint-plugin": "7.0.0",
     "@esri/calcite-base": "1.2.0",
     "@esri/calcite-colors": "6.1.0",
     "@rollup/plugin-node-resolve": "15.1.0",

diff --git a/packages/calcite-components/.eslintrc.cjs b/packages/calcite-components/.eslintrc.cjs
@@ -4,6 +4,7 @@ module.exports = {
     "jest/globals": true
   },
   extends: [
+    "plugin:@cspell/recommended",
     "plugin:@esri/calcite-components/recommended",
     "plugin:@stencil-community/recommended",
     "plugin:@typescript-eslint/recommended",

diff --git a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
@@ -216,7 +216,7 @@ export const hongKongLocale_TestOnly = (): string => `<calcite-action-bar expand
 <calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
-export const ukranianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="uk">
+export const ukrainianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="uk">
 <calcite-action text="Information" icon="information"></calcite-action>
 <calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;

diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -124,15 +124,15 @@ describe("calcite-alert", () => {
 
     const alert1 = await page.find("#alert-1");
     const button1 = await page.find("#button-1");
-    const alertclose1 = await page.find("#alert-1 >>> .alert-close");
+    const alertClose1 = await page.find("#alert-1 >>> .alert-close");
 
     expect(await alert1.isVisible()).not.toBe(true);
 
     await button1.click();
     await page.waitForTimeout(animationDurationInMs);
     expect(await alert1.isVisible()).toBe(true);
 
-    await alertclose1.click();
+    await alertClose1.click();
     await page.waitForTimeout(animationDurationInMs);
     expect(await alert1.isVisible()).not.toBe(true);
   });
@@ -161,16 +161,16 @@ describe("calcite-alert", () => {
     const button1 = await page.find("#button-1");
     const button2 = await page.find("#button-2");
     const button3 = await page.find("#button-3");
-    const alertclose1 = await page.find("#alert-1 >>> .alert-close");
-    const alertclose2 = await page.find("#alert-2 >>> .alert-close");
+    const alertClose1 = await page.find("#alert-1 >>> .alert-close");
+    const alertClose2 = await page.find("#alert-2 >>> .alert-close");
 
     await button1.click();
     await page.waitForTimeout(animationDurationInMs);
-    await alertclose1.click();
+    await alertClose1.click();
 
     await button2.click();
     await page.waitForTimeout(animationDurationInMs);
-    await alertclose2.click();
+    await alertClose2.click();
 
     await button3.click();
     await page.waitForTimeout(animationDurationInMs);

diff --git a/packages/calcite-components/src/components/avatar/avatar.spec.ts b/packages/calcite-components/src/components/avatar/avatar.spec.ts
@@ -10,7 +10,7 @@ describe("stringToHex", () => {
   });
   it("generates a valid hex color, regardless of input", () => {
     expect(isValidHex(stringToHex("hey dude"))).toBe(true);
-    expect(isValidHex(stringToHex("numbe8972983767869891823"))).toBe(true);
+    expect(isValidHex(stringToHex("number8972983767869891823"))).toBe(true);
     expect(isValidHex(stringToHex("asdf8798768657476876yashjkdfbasd"))).toBe(true);
     expect(isValidHex(stringToHex(")#@$%*@^#&%$(^!)@*)#$*!%"))).toBe(true);
     expect(isValidHex(stringToHex("0"))).toBe(true);

diff --git a/packages/calcite-components/src/components/avatar/avatar.tsx b/packages/calcite-components/src/components/avatar/avatar.tsx
@@ -110,7 +110,7 @@ export class Avatar {
   }
 
   /**
-   * Use fullname or username to generate initials
+   * Use fullName or username to generate initials
    */
   private generateInitials(): string | boolean {
     const { fullName, username } = this;

diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -126,9 +126,7 @@ describe("calcite-button", () => {
   });
 
   describe("accessible: href and target", () => {
-    accessible(
-      `<calcite-button rel="noopener noreferrer" target="_blank" class="mycustomclass" href="google.com">Continue</calcite-button>`
-    );
+    accessible(`<calcite-button rel="noopener noreferrer" target="_blank" href="google.com">Continue</calcite-button>`);
   });
 
   describe("accessible: icons and loading", () => {
@@ -243,7 +241,7 @@ describe("calcite-button", () => {
   it("passes attributes to rendered child link", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<calcite-button rel="noopener noreferrer" target="_blank" class="mycustomclass" href="google.com">Continue</calcite-button>`
+      `<calcite-button rel="noopener noreferrer" target="_blank" href="google.com">Continue</calcite-button>`
     );
     const element = await page.find("calcite-button");
     const elementAsButton = await page.find("calcite-button >>> button");
@@ -264,7 +262,7 @@ describe("calcite-button", () => {
 
   it("passes attributes to rendered child button", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-button type="reset" name="myname" class="mycustomclass">Continue</calcite-button>`);
+    await page.setContent(`<calcite-button type="reset" name="my-name">Continue</calcite-button>`);
     const element = await page.find("calcite-button");
     const elementAsButton = await page.find("calcite-button >>> button");
     const elementAsLink = await page.find("calcite-button >>> a");
@@ -275,7 +273,7 @@ describe("calcite-button", () => {
     expect(elementAsLink).toBeNull();
     expect(elementAsButton).not.toBeNull();
     expect(elementAsButton).toEqualAttribute("type", "reset");
-    expect(elementAsButton).toEqualAttribute("name", "myname");
+    expect(elementAsButton).toEqualAttribute("name", "my-name");
     expect(iconStart).toBeNull();
     expect(iconEnd).toBeNull();
     expect(loader).toBeNull();
@@ -407,28 +405,28 @@ describe("calcite-button", () => {
     expect(loader).toBeNull();
   });
 
-  it("hascontent class is present on rendered child when content (as text) is present", async () => {
+  it("contentSlotted class is present on rendered child when content (as text) is present", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button>Continue</calcite-button>`);
     const elementAsButton = await page.find("calcite-button >>> button");
     expect(elementAsButton).toHaveClass(CSS.contentSlotted);
   });
 
-  it("hascontent class is present on rendered child when content (as element) is present", async () => {
+  it("contentSlotted class is present on rendered child when content (as element) is present", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button><calcite-icon icon="banana" /></calcite-button>`);
     const elementAsButton = await page.find("calcite-button >>> button");
     expect(elementAsButton).toHaveClass(CSS.contentSlotted);
   });
 
-  it("hascontent class is present on rendered child when content (as text and element) is present", async () => {
+  it("contentSlotted class is present on rendered child when content (as text and element) is present", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button>Banana <calcite-icon icon="banana" /></calcite-button>`);
     const elementAsButton = await page.find("calcite-button >>> button");
     expect(elementAsButton).toHaveClass(CSS.contentSlotted);
   });
 
-  it("hascontent class is not present on rendered child when content is not present", async () => {
+  it("contentSlotted class is not present on rendered child when content is not present", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button icon-start='plus'></calcite-button>`);
     const elementAsButton = await page.find("calcite-button >>> button");

diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -408,12 +408,12 @@ describe("calcite-combobox", () => {
             </calcite-combobox>
           `
         );
-        const cbox = await page.find("calcite-combobox");
+        const combobox = await page.find("calcite-combobox");
         const openEvent = page.waitForEvent("calciteComboboxOpen");
-        await cbox.click();
+        await combobox.click();
         await openEvent;
 
-        const item1 = await cbox.find("calcite-combobox-item[value=one]");
+        const item1 = await combobox.find("calcite-combobox-item[value=one]");
 
         await item1.click();
         expect(await page.find("calcite-combobox >>> calcite-chip")).toBeDefined();
@@ -437,12 +437,12 @@ describe("calcite-combobox", () => {
             </calcite-combobox>
           `
         );
-        const cbox = await page.find("calcite-combobox");
+        const combobox = await page.find("calcite-combobox");
         const openEvent = page.waitForEvent("calciteComboboxOpen");
-        await cbox.click();
+        await combobox.click();
         await openEvent;
 
-        const item1 = await cbox.find("calcite-combobox-item[value=one]");
+        const item1 = await combobox.find("calcite-combobox-item[value=one]");
 
         await item1.click();
         expect(await page.find("calcite-combobox >>> calcite-chip")).toBeDefined();
@@ -466,15 +466,15 @@ describe("calcite-combobox", () => {
           </calcite-combobox>
         `
       );
-      const cbox = await page.find("calcite-combobox");
+      const combobox = await page.find("calcite-combobox");
       const openEvent = page.waitForEvent("calciteComboboxOpen");
-      await cbox.click();
+      await combobox.click();
       await openEvent;
 
-      const item1 = await cbox.find("calcite-combobox-item[value=child1]");
+      const item1 = await combobox.find("calcite-combobox-item[value=child1]");
       await item1.click();
 
-      const parent = await cbox.find("calcite-combobox-item[value=one]");
+      const parent = await combobox.find("calcite-combobox-item[value=one]");
       expect(parent).toBeDefined();
       expect(parent).toHaveAttribute("selected");
 
@@ -494,15 +494,15 @@ describe("calcite-combobox", () => {
           </calcite-combobox>
         `
       );
-      const cbox = await page.find("calcite-combobox");
+      const combobox = await page.find("calcite-combobox");
       const openEvent = page.waitForEvent("calciteComboboxOpen");
-      await cbox.click();
+      await combobox.click();
       await openEvent;
 
-      const parent = await cbox.find("calcite-combobox-item[value=parent]");
-      const parentItem = await cbox.find("calcite-combobox-item[value=parent] >>> li");
-      const item1 = await cbox.find("calcite-combobox-item[value=child1]");
-      const item2 = await cbox.find("calcite-combobox-item[value=child2]");
+      const parent = await combobox.find("calcite-combobox-item[value=parent]");
+      const parentItem = await combobox.find("calcite-combobox-item[value=parent] >>> li");
+      const item1 = await combobox.find("calcite-combobox-item[value=child1]");
+      const item2 = await combobox.find("calcite-combobox-item[value=child2]");
       await item1.click();
       await item2.click();
       await page.waitForChanges();
@@ -527,17 +527,17 @@ describe("calcite-combobox", () => {
           </calcite-combobox>
         `
       );
-      const cbox = await page.find("calcite-combobox");
+      const combobox = await page.find("calcite-combobox");
       const openEvent = page.waitForEvent("calciteComboboxOpen");
-      await cbox.click();
+      await combobox.click();
       await openEvent;
 
-      const item1 = await cbox.find("calcite-combobox-item[value=one]");
+      const item1 = await combobox.find("calcite-combobox-item[value=one]");
       await item1.click();
 
       let chip = await page.find("calcite-combobox >>> calcite-chip");
       expect(chip).not.toBeNull();
-      expect(await cbox.getProperty("open")).toBe(true);
+      expect(await combobox.getProperty("open")).toBe(true);
       await page.evaluate(() => {
         const combobox = document.querySelector("calcite-combobox");
         const chip = combobox.shadowRoot.querySelector("calcite-chip");
@@ -549,7 +549,7 @@ describe("calcite-combobox", () => {
 
       chip = await page.find("calcite-combobox >>> calcite-chip");
       expect(chip).toBeNull();
-      expect(await cbox.getProperty("open")).toBe(false);
+      expect(await combobox.getProperty("open")).toBe(false);
     });
 
     it("should honor calciteComboboxChipClose", async () => {
@@ -1332,9 +1332,9 @@ describe("calcite-combobox", () => {
       const chip = await page.find("calcite-combobox >>> calcite-chip");
       expect(chip).toBeNull();
 
-      const cbox = await page.find("calcite-combobox");
+      const combobox = await page.find("calcite-combobox");
       const openEvent = page.waitForEvent("calciteComboboxOpen");
-      await cbox.click();
+      await combobox.click();
       await openEvent;
 
       const items = await page.findAll("calcite-combobox-item");

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -1073,7 +1073,7 @@ describe("calcite-dropdown", () => {
     await page.evaluate(() => {
       const filter = document.querySelector(`calcite-pick-list`).shadowRoot.querySelector("calcite-filter");
       const filterInput = filter.shadowRoot.querySelector("calcite-input");
-      filterInput.value = "nums";
+      filterInput.value = "numbers";
     });
 
     expect(dropdownContentHeight.height).toBe("72px");

diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts
@@ -151,37 +151,37 @@ describe("calcite-filter", () => {
             name: "Harry",
             description: "developer",
             value: "harry",
-            metadata: { haircolor: "red", favoriteBand: "MetallicA" },
+            metadata: { hairColor: "red", favoriteBand: "MetallicA" },
           },
           {
             name: "Matt",
             description: "developer",
             value: "matt",
-            metadata: { haircolor: "black", favoriteBand: "Radiohead" },
+            metadata: { hairColor: "black", favoriteBand: "Radiohead" },
           },
           {
             name: "Franco",
             description: "developer",
             value: "franco",
-            metadata: { haircolor: "black", favoriteBand: "The Mars Volta" },
+            metadata: { hairColor: "black", favoriteBand: "The Mars Volta" },
           },
           {
             name: "Katy",
             description: "engineer",
             value: "katy",
-            metadata: { haircolor: "red", favoriteBand: "unknown" },
+            metadata: { hairColor: "red", favoriteBand: "unknown" },
           },
           {
             name: "Jon",
             description: "developer",
             value: "jon",
-            metadata: { haircolor: "brown", favoriteBand: "Hippity Hops" },
+            metadata: { hairColor: "brown", favoriteBand: "Hippity Hops" },
           },
           {
             name: "regex",
             description: "regex",
             value: "regex",
-            metadata: { haircolor: "rainbow", favoriteBand: "regex()" },
+            metadata: { hairColor: "rainbow", favoriteBand: "regex()" },
           },
         ];
       });
@@ -260,13 +260,13 @@ describe("calcite-filter", () => {
             name: "Harry",
             description: "developer",
             value: "harry",
-            metadata: { haircolor: "red", favoriteBand: "MetallicA" },
+            metadata: { hairColor: "red", favoriteBand: "MetallicA" },
           },
           {
             name: "Matt",
             description: "developer",
             value: "matt",
-            metadata: { haircolor: "black", favoriteBand: "Radiohead" },
+            metadata: { hairColor: "black", favoriteBand: "Radiohead" },
           },
         ];
       });
@@ -292,13 +292,13 @@ describe("calcite-filter", () => {
             name: "Harry",
             description: "developer",
             value: "harry",
-            metadata: { haircolor: "red", favoriteBand: "MetallicA" },
+            metadata: { hairColor: "red", favoriteBand: "MetallicA" },
           },
           {
             name: "Matt",
             description: "developer",
             value: "matt",
-            metadata: { haircolor: "black", favoriteBand: "Radiohead" },
+            metadata: { hairColor: "black", favoriteBand: "Radiohead" },
           },
         ];
       });

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
@@ -129,7 +129,7 @@ export const onlyProps = (): string => html`
       heading-level="${text("heading-level", "2")}"
       description="${text(
         "description",
-        "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+        "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall."
       )}"
       heading="${text(
         "heading",
@@ -181,7 +181,7 @@ export const noDoubleScrollbars_TestOnly = (): string => html`
   <div id="container">
     <calcite-flow>
       <calcite-flow-item heading="Example">
-        <div>### Stickied Content e.g. toolbar</div>
+        <div>### Sticky Content e.g. toolbar</div>
         <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sapien lectus, ultricies a molestie nec,
           sollicitudin ac nulla. Pellentesque tincidunt malesuada arcu et placerat. In malesuada neque lectus, at congue