build: make sure eslint-plugin-calcite-components is set up correctly (…

…#7294)

**Related Issue:** #

## Summary

I forgot to mention that the packages within the monorepo are "local
dependencies", which means `npm install` won't install them, they have
to be built locally. A common workflow is `cd`ing directly into
calcite-components to do work. This caused issues with
`eslint-plugin-calcite-components` because it wasn't being built so it
wasn't working during development in CC.

I added a `start` turbo pipeline which will ensure all dependencies are
built first. So running `npm start` from the root directory will no
longer cause this issue.

I also cleaned up the Contributing doc and tweaked some eslint settings
that were causing issues in VSCode.

.vscode/settings.json

@@ -4,6 +4,7 @@
   "scss.validate": false,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "eslint.workingDirectories": [{ "mode": "auto" }],
   "editor.quickSuggestions": {
     "strings": true
   },

CONTRIBUTING.md

@@ -2,11 +2,11 @@
 
 Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).
 
-Note: New contributors should first contact [Ben Elan](mailto:belan@esri.com) or [Juan Carlos Franco](mailto:JFranco@esri.com) to join the [Calcite Components GitHub team](https://github.com/orgs/Esri/teams/calcite-components/members). Then, clone the repo via SSH key on your machine (this Git workflow is required in order to work with our Chromatic test integration).
+Note: New contributors should first contact [Ben Elan](mailto:belan@esri.com) or [Juan Carlos Franco](mailto:JFranco@esri.com) to join the [Calcite Contributors GitHub team](https://github.com/orgs/Esri/teams/calcite-contributors/members). Then, clone the repo via SSH key on your machine (this Git workflow is required in order to work with our Chromatic test integration).
 
 ## I want to contribute, what should I work on?
 
-Calcite Components is still in its early stages. You can help most by:
+You can help most by:
 
 - Adding ideas for components by [creating a New Component issue](https://github.com/Esri/calcite-design-system/issues/new?assignees=&labels=new+component%2C0+-+new%2Cneeds+triage&template=new-component.yml).
 - Requesting features for existing components by [creating a Enhancement issue](https://github.com/Esri/calcite-design-system/issues/new?assignees=&labels=enhancement%2C0+-+new%2Cneeds+triage&template=enhancement.yml).
@@ -112,11 +112,11 @@ If your IDE supports the [Language Server Protocol (LSP) specification](https://
 
 ## Starting the demos
 
-First, clone the repo and install the NPM dependencies from within the `calcite-components` directory:
+First, clone the repo and then install the NPM dependencies:
 
 ```sh
 git clone git@github.com:Esri/calcite-design-system.git
-cd calcite-components
+cd calcite-design-system
 npm install
 ```
 
@@ -126,23 +126,38 @@ Next, start the local Stencil development server on localhost:
 npm start
 ```
 
-The demos will open in the browser after building. Edit the pages in [`src/demos`](./src/demos) to modify the component demos, such as changing attributes or adding content to slots. When adding a new demo page, make sure to add a link in [`index.html`](./src/index.html) so others can find it. You can also edit the component code in [`src/components`](./src/components), and the changes will be reflected in the demos.
+The demos will open in the browser after building. Edit the pages in [`packages/calcite-components/src/demos`](.packages/calcite-components/src/demos) to modify the component demos, such as changing attributes or adding content to slots. When adding a new demo page, make sure to add a link in [`packages/calcite-components/src/index.html`](./packages/calcite-components/src/index.html) so others can find it. You can also edit the component code in [`packages/calcite-components/src/components`](packages/calcite-components/src/components`./src/components), and the changes will be reflected in the demos.
 
 ## Linting
 
-This project uses [lint-staged](https://www.npmjs.com/package/lint-staged) to automatically format code on commit, making it easier to contribute. There are also NPM scripts in [`package.json`](./package.json) to lint a variety of filetypes. To run them all:
+This project uses [lint-staged](https://www.npmjs.com/package/lint-staged) to automatically format code on commit, making it easier to contribute. Each package has it's own linting NPM scripts, so check there for more options. For example, calcite-components has NPM scripts that lint by different filetypes. To run the `lint` NPM script for all packages that have one, do:
 
 ```sh
 npm run lint
 ```
 
+Or use the `--workspace` flag to lint a single package.
+
+```sh
+npm --workspace=packages/calcite-components run lint
+```
+
+You can avoid using the `--workspace` flag in every command by `cd`ing into the package you're working on:
+
+```sh
+cd packages/calcite-components
+# the following will only lint and test calcite-components
+npm run lint
+npm test
+```
+
 ## Running the tests
 
-`npm test` will run the current test suite.
+`npm test` will run the test suites.
 
 Calcite Components include Stencil's default testing tools which are built on [Jest](https://jestjs.io/) and [Puppeteer](https://github.com/GoogleChrome/puppeteer).
 
-If you're working on writing tests for a particular component, it can be helpful to use `npm run test:watch` to retest on file changes. Once the initial tests run, typing `o` at the prompt will run tests only on changed files, allowing you to quickly iterate on tests for a specific component.
+If you're working on writing tests for a particular component, it can be helpful to use `npm --workspace=packages/calcite-components run test:watch` to retest on file changes. Once the initial tests run, typing `o` at the prompt will run tests only on changed files, allowing you to quickly iterate on tests for a specific component. You can also add a pattern to the end of the command to match for a test's file path.
 
 Please refer to the [Stencil testing documentation](https://stenciljs.com/docs/testing-overview) and Calcite's [testing conventions](./conventions/Testing.md) for more information.
 
@@ -156,9 +171,9 @@ Stencil creates API reference documentation using JSDoc, here is their [document
 
 1. Create a new file inside your component directory like `X.stories.js`
 2. Write stories
-3. Run the documentation locally with `npm run docs:preview`
+3. Run the documentation locally with `npm --workspace=packages/calcite-components run docs:preview`
 
-The `docs:preview` command will build Calcite Components and open your browser to view the storybook docs locally.
+Calcite Component's `docs:preview` command will build and open your browser to view the storybook docs locally.
 
 Please refer to the [Documentation Conventions](./conventions/Documentation.md) for more information.
 

package.json

@@ -15,6 +15,7 @@
     "version:latest": "lerna version --conventional-commits --create-release github --no-git-tag-version --no-push --yes && npm run util:sync-linked-package-versions",
     "prepare": "husky install",
     "preversion": "npm run util:is-in-sync-with-origin && npm run util:is-working-tree-clean",
+    "start": "turbo run start",
     "test": "turbo run test",
     "util:is-in-sync-with-origin": "[ \"$(git rev-parse --abbrev-ref HEAD)\" = \"main\" ] && [ \"$(git rev-parse main)\" = \"$(git rev-parse origin/main)\" ]",
     "util:is-next-deployable": "ts-node --esm support/isNextDeployable.ts",
@@ -83,7 +84,7 @@
     "quicktype-core": "23.0.48",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "rimraf": "4.1.2",
+    "rimraf": "5.0.1",
     "rollup": "2.77.1",
     "rollup-plugin-node-resolve": "5.2.0",
     "semver": "7.3.8",
@@ -102,8 +103,7 @@
     "type-fest": "3.11.1",
     "typescript": "4.9.5",
     "updtr": "4.0.0",
-    "workbox-build": "7.0.0",
-    "yargs": "17.7.2"
+    "workbox-build": "7.0.0"
   },
   "license": "SEE LICENSE.md",
   "engines": {

packages/calcite-components/.gitignore

@@ -1,6 +1,6 @@
 __docs-temp__/*
 docs/
 hydrate/
-src/**/*.js
+*.js
 src/components/icon/assets
 www/

packages/calcite-components/package.json

@@ -36,7 +36,7 @@
     "posttest": "npm run test:prerender",
     "prepublishOnly": "./support/stencilDoubleBuildTypesWorkaround.sh",
     "release:docs": "npm run docs && storybook-to-ghpages --existing-output-dir=docs",
-    "start": "concurrently --kill-others --raw \"tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev -- --serve\" \"ts-node --esm ./support/cleanOnProcessExit.ts --path ./src/demos/**/*.js \"",
+    "start": "npm run util:clean-js-files && concurrently --kill-others --raw \"tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev -- --serve\"",
     "test": "stencil test --no-docs --no-build --spec --e2e",
     "test:prerender": "stencil build --no-docs --prerender",
     "test:watch": "npm run build && npm run test -- -- --watchAll",
@@ -53,7 +53,7 @@
     "util:prep-build-reqs": "npm run util:copy-assets && npm run util:generate-t9n-types",
     "util:sync-t9n-en-bundles": "ts-node --esm support/syncEnT9nBundles.ts",
     "util:test-types": "tsc --esModuleInterop dist/types/**/*.d.ts dist/components/*.d.ts && ! grep -rnw 'dist/types' -e '<reference types=' && npm run util:clean-js-files",
-    "util:clean-js-files": "find src .storybook support -name '*.js' | xargs rm -rf && find . -maxdepth 1 -name '*.js' | xargs rm -rf",
+    "util:clean-js-files": "rimraf --glob -- *.js {src,.storybook,support}/**.js",
     "util:is-working-tree-clean": "[ -z \"$(git status --porcelain=v1)\" ]"
   },
   "repository": {

packages/eslint-plugin-calcite-components/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "ignorePatterns": ["*"]
+}

turbo.json

@@ -5,6 +5,11 @@
       "dependsOn": ["^build"],
       "outputs": ["**/dist/**", "www/**", "hydrate/**", "docs/**", "src/components.d.ts"]
     },
+    "start": {
+      "dependsOn": ["^build"],
+      "cache": false,
+      "persistent": true
+    },
     "test": {
       "dependsOn": ["build"]
     },