feat(tools): remove eslint-plugin-prettier for prettier (#42438)

* feat: remove eslint-plugin-prettier for prettier

This removes the annoying lint warnings when all that needs to change is
formatting

* fix: use .js lint-staged config to ignore properly

* fix: lint everything if a lot of files are changed

It's faster than making lots of individual linter calls

* chore: apply prettier

* fix: ignore code in curriculum-file-structure

tools/ui-components/.babelrc.js

@@ -1,15 +1,15 @@
 module.exports = {
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-typescript",
+  presets: [
+    '@babel/preset-react',
+    '@babel/preset-typescript',
     [
-      "@babel/preset-env",
+      '@babel/preset-env',
       {
-        "targets": {
-          "browsers": [">0.25%", "not dead"]
+        targets: {
+          browsers: ['>0.25%', 'not dead']
         }
       }
     ]
   ],
-  "plugins": [["transform-react-remove-prop-types", { "removeImport": true }]]
-}
+  plugins: [['transform-react-remove-prop-types', { removeImport: true }]]
+};

tools/ui-components/.storybook/main.js

@@ -11,7 +11,8 @@ module.exports = {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
-    },
-  },
+      propFilter: prop =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
+    }
+  }
 };

tools/ui-components/src/introduction.stories.mdx

@@ -8,7 +8,7 @@ import Plugin from './assets/plugin.svg';
 import Repo from './assets/repo.svg';
 import StackAlt from './assets/stackalt.svg';
 
-<Meta title="Example/Introduction" />
+<Meta title='Example/Introduction' />
 
 <style>{`
   .subheading {
@@ -123,48 +123,48 @@ Browse example stories now by navigating to them in the sidebar.
 View their code in the `src/stories` directory to learn how they work.
 We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
 
-<div className="subheading">Configure</div>
+<div className='subheading'>Configure</div>
 
-<div className="link-list">
+<div className='link-list'>
   <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
+    className='link-item'
+    href='https://storybook.js.org/docs/react/addons/addon-types'
+    target='_blank'
   >
-    <img src={Plugin} alt="plugin" />
+    <img src={Plugin} alt='plugin' />
     <span>
       <strong>Presets for popular tools</strong>
       Easy setup for TypeScript, SCSS and more.
     </span>
   </a>
   <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
+    className='link-item'
+    href='https://storybook.js.org/docs/react/configure/webpack'
+    target='_blank'
   >
-    <img src={StackAlt} alt="Build" />
+    <img src={StackAlt} alt='Build' />
     <span>
       <strong>Build configuration</strong>
       How to customize webpack and Babel
     </span>
   </a>
   <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
+    className='link-item'
+    href='https://storybook.js.org/docs/react/configure/styling-and-css'
+    target='_blank'
   >
-    <img src={Colors} alt="colors" />
+    <img src={Colors} alt='colors' />
     <span>
       <strong>Styling</strong>
       How to load and configure CSS libraries
     </span>
   </a>
   <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
+    className='link-item'
+    href='https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack'
+    target='_blank'
   >
-    <img src={Flow} alt="flow" />
+    <img src={Flow} alt='flow' />
     <span>
       <strong>Data</strong>
       Providers and mocking for data libraries
@@ -172,32 +172,40 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
   </a>
 </div>
 
-<div className="subheading">Learn</div>
+<div className='subheading'>Learn</div>
 
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
+<div className='link-list'>
+  <a className='link-item' href='https://storybook.js.org/docs' target='_blank'>
+    <img src={Repo} alt='repo' />
     <span>
       <strong>Storybook documentation</strong>
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
+  <a
+    className='link-item'
+    href='https://storybook.js.org/tutorials/'
+    target='_blank'
+  >
+    <img src={Direction} alt='direction' />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
+  <a
+    className='link-item'
+    href='https://github.com/storybookjs/storybook'
+    target='_blank'
+  >
+    <img src={Code} alt='code' />
     <span>
       <strong>GitHub project</strong>
       View the source and add issues
     </span>
   </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
+  <a className='link-item' href='https://discord.gg/storybook' target='_blank'>
+    <img src={Comments} alt='comments' />
     <span>
       <strong>Discord chat</strong>
       Chat with maintainers and the community
@@ -205,7 +213,7 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
   </a>
 </div>
 
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+<div className='tip-wrapper'>
+  <span className='tip'>Tip</span>Edit the Markdown in{' '}
   <code>src/stories/Introduction.stories.mdx</code>
 </div>

tools/ui-components/tsconfig.json

@@ -9,5 +9,5 @@
     "moduleResolution": "node",
     "strict": true,
     "noEmit": true
-  },
-}
+  }
+}