Feature branch pull-request from feature/eslint-plugin-wb to main#3005
Merged
beaesguerra merged 7 commits intomainfrom Apr 15, 2026
Merged
Feature branch pull-request from feature/eslint-plugin-wb to main#3005beaesguerra merged 7 commits intomainfrom
feature/eslint-plugin-wb to main#3005beaesguerra merged 7 commits intomainfrom
Conversation
## Summary: Setting up the `@khanacademy/eslint-plugin-wonder-blocks` package. Used the set up from WB packages and the `@khanacademy/eslint-plugin` package from [wonder-stuff](https://github.com/Khan/wonder-stuff/tree/main/packages/eslint-plugin-khan) as a reference. Prior to creating this package, I used the [wonder-stuff-tool-new-pkg](https://github.com/Khan/wonder-stuff/tree/main/packages/wonder-stuff-tool-new-pkg) to publish the initial version of the package: https://www.npmjs.com/package/@khanacademy/eslint-plugin-wonder-blocks In this PR, the package is set up with the basics to verify that we can release the package to npm. Issue: WB-2207 ## Test plan: - Review the changes in the PR. - Confirm a npm snapshot package is created for the PR ## Implementation plan: 1. (done) Publish a new package to npm 2. (this PR) Set up the package in the wonder-blocks repo 3. Set up dependencies and infra for creating lint rules 4. Set up a custom lint rule (WB-2272) Author: beaesguerra Reviewers: claude[bot], jandrade Required Reviewers: Approved By: jandrade Checks: ⏭️ 3 checks have been skipped, ✅ 14 checks were successful, ⚪️ 1 check is neutral Pull Request URL: #2994
…-tab-role`) (#3000) ## Summary: Set up the `eslint-plugin-wonder-blocks` package to support the creation of custom rules: - Set up the first custom lint rule to verify the project set up: `no-custom-tab-role` - This rule will detect if `role="tab"` is used so that the WB ResponsiveTabs component can be suggested instead. The goal of this rule is to prevent custom implementations of this pattern since ResponsiveTabs handles many things out of the box like responsiveness, keyboard navigation, accessibility attributes and semantics, etc. - Unit tests - The tests in the eslint-plugin package run in a `jest-environment-node` environment instead of `jest-environment-jsdom` - RuleTester from `@typescript-eslint/rule-tester` is set up to work with jest - Unit test was set up for the `no-custom-tab-role` rule - Demo project was created so we can test out consuming the eslint-plugin package - We can import WB packages into the demo project so we can confirm that the lint rules work on WB components too Notes: - Most of these changes were based on how `@khanacademy/eslint-plugin` is set up in [wonder-stuff](https://github.com/Khan/wonder-stuff). Some changes were different to accommodate the wb repo set up (see PR annotations for more details) - We'll be moving to oxlint at some point. For now, we can set up eslint custom rules since it'll be compatible with oxlint. Then, we can decide later if we want to port our custom rules over! Issue: WB-2207, WB-2272 ## Test plan: 1. Tests and checks pass 2. Confirm that lint errors are caught in the `demo/` package ``` cd packages/eslint-plugin-wonder-blocks/demo/ pnpm lint ``` (Note: To see the lint errors in your IDE, temporarily remove the demo directory from `.eslintignore`. The demo directory needed to be added so that the expected lint errors don't fail when `khan-linter` runs) <img width="1007" height="257" alt="Screenshot 2026-04-08 at 10 03 03 AM" src="https://github.com/user-attachments/assets/51473fd8-be34-4ae4-b58e-5c612067b593" /> 3. Test the npm snapshot release in `frontend` to verify it detects custom tab implementations when the `no-custom-tab-role` rule is enabled (see Khan/frontend#10086) Author: beaesguerra Reviewers: beaesguerra, claude[bot], jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3000
## Summary: - Add docs for the eslint-plugin-wonder-blocks package - Include the docs for the custom WB lint rule `no-custom-tag-role` in Storybook - We create a separate mdx for each lint rule so that the rule name shows up in the side navigation and can be found via the search bar - Specify order of root categories Issue: WB-2304 ## Test plan: 1. Review the docs for the eslint-plugin-wonder-blocks package <img width="1718" height="884" alt="image" src="https://github.com/user-attachments/assets/0013b463-35f9-41ce-9fd7-bbf4316755ac" /> <img width="1723" height="930" alt="image" src="https://github.com/user-attachments/assets/79471d44-b269-49d3-ae13-6245a1f4e5b7" /> Author: beaesguerra Reviewers: beaesguerra, claude[bot], jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3003
🦋 Changeset detectedLatest commit: abe52a8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (1f16457) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR3005"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR3005 |
Contributor
|
Size Change: 0 B Total Size: 122 kB ℹ️ View Unchanged
|
Contributor
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-zhbyxeecuh.chromatic.com/ Chromatic results:
|
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
Contributor
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
## Summary: Set up `strict` and `recommended` eslint configs. The `recommended` config will enable the base lint rules for WB usage, and the `strict` config includes the recommended rules + more specific rules intended for modern projects without legacy wb patterns. We set up the `strict` config with the first wb lint rule `no-custom-tab-role`. As we add more lint rules, we can decide if it should only be enabled in recommended or strict cases. As part of this PR, I also updated the `eslint-plugin-wonder-blocks` README with information about the configs. This README is re-used for the SB docs. The demo project is also updated to use the `strict` config from the plugin. Issue: WB-2307 ## Test plan: 1. Confirm that linting still works in the `demo` project ```sh pnpm build cd packages/eslint-plugin-wonder-blocks/demo pnpm lint ``` You should see errors for the `no-custom-tab-role`. (To see this lint rules in the IDE, you can temporarily remove the `demo` dir from `.eslintignore` and restart the eslint server) <img width="934" height="194" alt="Screenshot 2026-04-13 at 3 11 13 PM" src="https://github.com/user-attachments/assets/a45688a9-c851-44ba-95d4-85c00ee6b787" /> 2. Confirm that the shared configs can be used in `frontend`. Here is the draft PR where I tested using the `strict` config for modern apps and the `recommended` config for the legacy app Khan/frontend#10285 3. Review the docs in SB around installation steps and the configs `?path=/docs/tools-eslint-plugin-wonder-blocks--docs` Author: beaesguerra Reviewers: beaesguerra, claude[bot], marcysutton Required Reviewers: Approved By: marcysutton Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #3009
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3005 +/- ##
============================
============================
Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
This PR includes the following commits:
no-custom-tab-role) (Set up eslint-plugin-wonder-blocks with first custom rule (no-custom-tab-role) #3000)Issue: WB-2207
Test plan: