diff --git a/.vscode/settings.json b/.vscode/settings.json index a8537dabb25..969aef97ab3 100644 --- a/.vscode/settings.json +++ b/.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 }, diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b616773cb50..56202dcb6a2 100644 --- a/CONTRIBUTING.md +++ b/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. diff --git a/package-lock.json b/package-lock.json index 599f6201416..7db186eb15f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,7 +71,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", @@ -90,8 +90,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" }, "engines": { "node": ">=14.0.0" @@ -33952,11 +33951,13 @@ "dev": true }, "node_modules/rimraf": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.1.2.tgz", - "integrity": "sha512-BlIbgFryTbw3Dz6hyoWFhKk+unCcHMSkZGrTFVAx2WmttdBSonsdtRlwiuTbDqTKr+UlXIUqJVS4QT5tUzGENQ==", - "deprecated": "Please upgrade to 4.3.1 or higher to fix a potentially damaging issue regarding symbolic link following. See https://github.com/isaacs/rimraf/issues/259 for details.", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.1.tgz", + "integrity": "sha512-OfFZdwtd3lZ+XZzYP/6gTACubwFcHdLRqS9UX3UwpU2dnGQYkPFISRwvM3w9IiB2w7bW5qGo/uAwE4SmXXSKvg==", "dev": true, + "dependencies": { + "glob": "^10.2.5" + }, "bin": { "rimraf": "dist/cjs/src/bin.js" }, @@ -33967,6 +33968,52 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/rimraf/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/rimraf/node_modules/glob": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.1.tgz", + "integrity": "sha512-9BKYcEeIs7QwlCYs+Y3GBvqAMISufUS0i2ELd11zpZjxI5V9iyRj0HgzB5/cLf2NY4vcYBTYzJ7GIui7j/4DOw==", + "dev": true, + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^2.0.3", + "minimatch": "^9.0.1", + "minipass": "^5.0.0 || ^6.0.2", + "path-scurry": "^1.10.0" + }, + "bin": { + "glob": "dist/cjs/src/bin.js" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/rimraf/node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/ripemd160": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz", @@ -66641,10 +66688,46 @@ "dev": true }, "rimraf": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.1.2.tgz", - "integrity": "sha512-BlIbgFryTbw3Dz6hyoWFhKk+unCcHMSkZGrTFVAx2WmttdBSonsdtRlwiuTbDqTKr+UlXIUqJVS4QT5tUzGENQ==", - "dev": true + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.1.tgz", + "integrity": "sha512-OfFZdwtd3lZ+XZzYP/6gTACubwFcHdLRqS9UX3UwpU2dnGQYkPFISRwvM3w9IiB2w7bW5qGo/uAwE4SmXXSKvg==", + "dev": true, + "requires": { + "glob": "^10.2.5" + }, + "dependencies": { + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0" + } + }, + "glob": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.1.tgz", + "integrity": "sha512-9BKYcEeIs7QwlCYs+Y3GBvqAMISufUS0i2ELd11zpZjxI5V9iyRj0HgzB5/cLf2NY4vcYBTYzJ7GIui7j/4DOw==", + "dev": true, + "requires": { + "foreground-child": "^3.1.0", + "jackspeak": "^2.0.3", + "minimatch": "^9.0.1", + "minipass": "^5.0.0 || ^6.0.2", + "path-scurry": "^1.10.0" + } + }, + "minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "requires": { + "brace-expansion": "^2.0.1" + } + } + } }, "ripemd160": { "version": "2.0.2", diff --git a/package.json b/package.json index 08552e1b235..2bdc354132f 100644 --- a/package.json +++ b/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": { diff --git a/packages/calcite-components/.gitignore b/packages/calcite-components/.gitignore index bee540240a7..21d2801f286 100644 --- a/packages/calcite-components/.gitignore +++ b/packages/calcite-components/.gitignore @@ -1,6 +1,6 @@ __docs-temp__/* docs/ hydrate/ -src/**/*.js +*.js src/components/icon/assets www/ diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 1670d871d04..a28134dbe62 100644 --- a/packages/calcite-components/package.json +++ b/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 ' { - if ("cleanup" in options) { - rimraf.sync(resolve(`${process.cwd()}/${path}`)); - } - if ("exit" in options) { - process.exit(); - } - }; - - // do something when app is closing - process.on("exit", exitHandler.bind(null, { cleanup: true })); - - // catches ctrl+c event - process.on("SIGINT", exitHandler.bind(null, { exit: true })); - - // catches other kill process signals (e.g., concurrently --kill-others ...) - process.on("SIGHUP", exitHandler.bind(null, { exit: true })); - process.on("SIGTERM", exitHandler.bind(null, { exit: true })); - - // catches "kill pid" (for example: nodemon restart) - process.on("SIGUSR1", exitHandler.bind(null, { exit: true })); - process.on("SIGUSR2", exitHandler.bind(null, { exit: true })); - - // catches uncaught exceptions - process.on("uncaughtException", exitHandler.bind(null, { exit: true })); -})(); diff --git a/packages/eslint-plugin-calcite-components/.eslintrc.json b/packages/eslint-plugin-calcite-components/.eslintrc.json new file mode 100644 index 00000000000..f66885a6a9e --- /dev/null +++ b/packages/eslint-plugin-calcite-components/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "ignorePatterns": ["*"] +} diff --git a/turbo.json b/turbo.json index 6e905f00c2d..56515177f97 100644 --- a/turbo.json +++ b/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"] },