Skip to content

build: make sure eslint-plugin-calcite-components is set up correctly #7294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
benelan merged 6 commits into from
Jul 7, 2023
Merged

build: make sure eslint-plugin-calcite-components is set up correctly #7294

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
228792f
build: make sure eslint-plugin-calcite-components is set up correctly
benelan Jul 7, 2023
2250c6f
chore: cleanup
benelan Jul 7, 2023
35d67bc
Merge branch 'main' into benelan/eslint-plugin-build-required
benelan Jul 7, 2023
a1faf63
docs: cleanup
benelan Jul 7, 2023
13a6570
docs: cleanup
benelan Jul 7, 2023
b249208
Merge branch 'main' into benelan/eslint-plugin-build-required
benelan Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"scss.validate": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.workingDirectories": [{ "mode": "auto" }],
"editor.quickSuggestions": {
"strings": true
},
Expand Down
35 changes: 25 additions & 10 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down Expand Up @@ -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, install the NPM dependencies:

@jcfranco jcfranco Jul 7, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: I feel like we need an "and then" between cloning and installing deps. I'll leave this up to you.


```sh
git clone git@github.com:Esri/calcite-design-system.git
cd calcite-components
cd calcite-design-system
npm install
```

Expand All @@ -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 command for all packages, 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 lint and test calcite-components only
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.

Expand All @@ -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.

Expand Down
105 changes: 94 additions & 11 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
__docs-temp__/*
docs/
hydrate/
src/**/*.js
*.js
src/components/icon/assets
www/
4 changes: 2 additions & 2 deletions packages/calcite-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
48 changes: 0 additions & 48 deletions packages/calcite-components/support/cleanOnProcessExit.ts
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions packages/eslint-plugin-calcite-components/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"ignorePatterns": ["*"]

@jcfranco jcfranco Jul 7, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any package with this configuration will skip linting entirely, right? If so, won't this make the contributing instructions on linting misleading?

@jcfranco jcfranco Jul 7, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now, maybe the contributing doc can be updated to indicate that ESLint will only run on calcite-components and we can tweak our linting config to lint properly outside calcite-components after this lands?

@benelan benelan Jul 7, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I added this to CCR and the eslint plugin so eslint won't complain about there not being a config which covers their files.

I'm working on pulling shared eslint/tsconfigs into separate workspaces as part of the lint-staged fix. After that happens, the base eslint config will be used in these packages.

So I'm going to leave the doc as is for now so I don't have to change it and then change it back.

}
5 changes: 5 additions & 0 deletions turbo.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
},
Expand Down