feat: ESLint Playground 🎉

[snitin315]

Preview Link - https://deploy-preview-6--dreamy-nightingale-a71351.netlify.app/

Task List -

• Add code editor and lint code with eslint
• Fix code when clicking on fix
• Share URL functionality
• Let users select configuration
• Download configuration
• Show the squiggle under the problem text in the editor area.
• Show Popups
• Improve code editor theme for dark mode.
• Disable fix button if the error is not fixable.

[netlify]

✅ Deploy Preview for dreamy-nightingale-a71351 ready!

Name	Link
🔨 Latest commit	5d9cf91
🔍 Latest deploy log	https://app.netlify.com/sites/dreamy-nightingale-a71351/deploys/62480f439e32d70008769673
😎 Deploy Preview	https://deploy-preview-6--dreamy-nightingale-a71351.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[eslint-github-bot]

Hi @snitin315!, thanks for the Pull Request

The pull request title isn't properly formatted. We ask that you update the message to match this format, as we use it to generate changelogs and automate releases.

• The commit message tag wasn't recognized. Did you mean "docs", "fix", or "feat"?
• There should be a space following the initial tag and colon, for example 'feat: Message'.
• The first letter of the tag should be in lowercase

To Fix: You can fix this problem by clicking 'Edit' next to the pull request title at the top of this page.

Read more about contributing to ESLint here

[snitin315]

Yeah. Something wrong with the last commit. I will fix it.

[snitin315]

@SaraSoueidan can you check once again?

[snitin315]

One thing I noticed: it’s easy to accidentally zoom the page on mobile. Can we disable that?

@nzakas Yes, disabled.

[SaraSoueidan]

Yesss I see it now. Oh Gosh this is exciting seeing it come to life like that! :D

Quick question: the select and multi-select dropdowns in the config area are not the accessible ones I provided. Is there a reason why you're using the ones you're using and not the HTML I provided?

[snitin315]

Quick question: the select and multi-select dropdowns in the config area are not the accessible ones I provided. Is there a reason why you're using the ones you're using and not the HTML I provided?

@SaraSoueidan Yes, actually I had to migrate all the HTML components to react so that I can pass props and reuse them. The migration for select components seemed a bit complicated to me.
So, I went ahead with the react-select library for faster development. And we can actually override its styles however we like and I was able to get something close to our theme.

[snitin315]

@nzakas @SaraSoueidan Is this as per design that the popup is dark in the light theme?

[SaraSoueidan]

@snitin315 The problem isn't with the styles, it's with the markup. The code isn't accessible and it's also not even properly operable by keyboard. Styles can be overridden but the markup is where the accessibility is built into. Changing the styles is not enough.

[SaraSoueidan]

@nzakas @SaraSoueidan Is this as per design that the popup is dark in the light theme?

Yes, this is per design. The popup is dark in light theme, and a lighter grey in dark theme.

[snitin315]

@snitin315 The problem isn't with the styles, it's with the markup. The code isn't accessible and it's also not even properly operable by keyboard. Styles can be overridden but the markup is where the accessibility is built into. Changing the styles is not enough.

Oh, I see. I will work on migrating to the accesible select component you provided once everything else is done.

[SaraSoueidan]

@snitin315 The problem isn't with the styles, it's with the markup. The code isn't accessible and it's also not even properly operable by keyboard. Styles can be overridden but the markup is where the accessibility is built into. Changing the styles is not enough.

Oh, I see. I will work on migrating to the accesible select component you provided once everything else is done.

Awesome! Thank you ✨

[nzakas]

I’d suggest migrating the components after this PR is merged. I want to make sure we can make incremental improvements rather than trying to do everything in this branch.

So can we say the goal for this branch is to make the playground functional, and then we can tweak the parts that need fixing afterwards?

[snitin315]

Yeah, makes sense 👍

[snitin315]

@nzakas I believe the playground is functional now.

One thing that is not done yet is showing multiple fixes in the tooltip/popup in case of suggestion. We do show them in the console section though.

Popup works fine in case of a single fix.

Screen.Recording.2022-04-02.at.2.32.54.PM.mov

I suppose we can work on this in a separate PR as an enhancement (I can open an issue to keep track). Few more things to be done separately -

• Adding eslint and prettier
• removing stale html/css/js files
• Adding GitHub actions workflow
• Bug: Color contrast #8

[snitin315]

Marking this PR as ready for review, let me know if anyone finds any bugs.

[nzakas]

I think that this is a good stopping point for this PR. Basic functionality all seems to be working now. We can continue to iterate with smaller PRs.

Just leaving open in case anyone finds anything worth mentioning in the next couple days.