Fix prettier CI and add it to pre commit (#4100)

* Add prettier before commit and during CI

* Add workflow

* Reverse merge main to branch

* dry run prettier

* dry run prettier

* [warn] jsxBracketSameLine is deprecated so replaced it to bracketSameLine

* Revert "[warn] jsxBracketSameLine is deprecated so replaced it to bracketSameLine"

This reverts commit 43dbe9ed3fba10b03a90d989cf90b4af4efd2212.

* Revert "dry run prettier"

This reverts commit b62948042cd8f8addf8ee23110de4096a8630926.

* Revert "dry run prettier"

This reverts commit 382f9a4691dee04673e461b3eda0d52c1aefda3b.

* Revert "Reverse merge main to branch"

This reverts commit 43667eaf29b9ab4266397251c8d781f611dcdcf8.

* [warn] jsxBracketSameLine is deprecated so replaced it to bracketSameLine

.github/workflows/beta_site_lint.yml

@@ -0,0 +1,27 @@
+name: Beta Site Lint
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    name: Lint on node 12.x and ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1.6.0
+        with:
+          working-directory: 'beta'
+
+
+      - name: Lint codebase
+        run: cd beta && yarn ci-check

beta/.husky/pre-commit

@@ -4,4 +4,5 @@
 cd beta
 yarn generate-ids
 git add -u src/pages/**/*.md
+yarn prettier
 yarn lint:fix

beta/.prettierrc

@@ -1,7 +1,7 @@
 {
   "bracketSpacing": false,
   "singleQuote": true,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "trailingComma": "es5",
   "printWidth": 80
 }

beta/plugins/remark-header-custom-ids.js

@@ -36,27 +36,27 @@ module.exports = ({
       // A bit weird: this is to support MDX 2 comments in expressions,
       // while we’re still on MDX 1, which doesn’t support them.
       if (!tail || tail.type !== 'text' || tail.value !== '/}') {
-        return
+        return;
       }
 
-      tail = children[children.length - 2]
+      tail = children[children.length - 2];
 
       if (!tail && tail.type !== 'emphasis') {
-        return
+        return;
       }
 
-      const id = toString(tail)
+      const id = toString(tail);
 
-      tail = children[children.length - 3]
+      tail = children[children.length - 3];
 
       if (!tail || tail.type !== 'text' || !tail.value.endsWith('{/')) {
-        return
+        return;
       }
 
       // Remove the emphasis and trailing `/}`
-      children.splice(children.length - 2, 2)
+      children.splice(children.length - 2, 2);
       // Remove the `{/`
-      tail.value = tail.value.replace(/[ \t]*\{\/$/, '')
+      tail.value = tail.value.replace(/[ \t]*\{\/$/, '');
 
       const data = patch(node, 'data', {});
 

beta/src/components/Button.tsx

@@ -32,8 +32,10 @@ export function Button({
         className,
         'text-base leading-tight font-bold border rounded-lg py-2 px-4 focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:border-link active:text-white active:ring-0 active:ring-offset-0 outline-none inline-flex items-center my-1',
         {
-          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link': active,
-          'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent': !active,
+          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
+            active,
+          'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent':
+            !active,
         }
       )}>
       {children}

beta/src/components/Layout/Nav/MobileNav.tsx

@@ -74,7 +74,8 @@ function TabButton({
   const classes = cn(
     'inline-flex items-center w-full border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link hover:gray-5',
     {
-      'text-link dark:text-link-dark dark:border-link-dark border-link font-bold': isActive,
+      'text-link dark:text-link-dark dark:border-link-dark border-link font-bold':
+        isActive,
       'border-transparent': !isActive,
     }
   );

beta/src/components/Layout/Nav/NavLink.tsx

@@ -16,7 +16,8 @@ interface NavLinkProps {
 export default function NavLink({href, children, isActive}: NavLinkProps) {
   const classes = cn(
     {
-      'text-link border-link dark:text-link-dark dark:border-link-dark font-bold': isActive,
+      'text-link border-link dark:text-link-dark dark:border-link-dark font-bold':
+        isActive,
     },
     {'border-transparent': !isActive},
     'inline-flex w-full items-center border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link dark:hover:text-link-dark whitespace-nowrap'

beta/src/components/Layout/Sidebar/SidebarLink.tsx

@@ -65,7 +65,8 @@ export function SidebarLink({
             'dark:text-primary-dark text-primary': heading,
             'text-base text-secondary dark:text-secondary-dark':
               !selected && !heading,
-            'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': selected,
+            'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
+              selected,
           }
         )}>
         {title}

beta/src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -21,8 +21,7 @@ interface InlineHiglight {
   endColumn: number;
 }
 
-const CodeBlock = React.forwardRef(function CodeBlock
-  (
+const CodeBlock = React.forwardRef(function CodeBlock(
   {
     children,
     className = 'language-js',
@@ -56,16 +55,14 @@ const CodeBlock = React.forwardRef(function CodeBlock
       (line: InlineHiglight) => ({
         ...line,
         elementAttributes: {'data-step': `${line.step}`},
-          className: cn(
-            'code-step bg-opacity-10 relative rounded-md p-1 ml-2',
-            {
-              'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4': !noMarkers,
+        className: cn('code-step bg-opacity-10 relative rounded-md p-1 ml-2', {
+          'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4':
+            !noMarkers,
           'bg-blue-40 before:bg-blue-40': line.step === 1,
           'bg-yellow-40 before:bg-yellow-40': line.step === 2,
           'bg-green-40 before:bg-green-40': line.step === 3,
           'bg-purple-40 before:bg-purple-40': line.step === 4,
-            }
-          ),
+        }),
       })
     );
 
@@ -107,8 +104,7 @@ const CodeBlock = React.forwardRef(function CodeBlock
       </SandpackProvider>
     </div>
   );
-  }
-);
+});
 
 export default CodeBlock;
 

beta/src/components/MDX/ExpandableExample.tsx

@@ -60,8 +60,10 @@ function ExpandableExample({
         <Button
           active={true}
           className={cn({
-            'bg-purple-50 border-purple-50 hover:bg-purple-40 focus:bg-purple-50 active:bg-purple-50': isDeepDive,
-            'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50': isExample,
+            'bg-purple-50 border-purple-50 hover:bg-purple-40 focus:bg-purple-50 active:bg-purple-50':
+              isDeepDive,
+            'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50':
+              isExample,
           })}
           onClick={() => setIsExpanded((current) => !current)}>
           <span className="mr-1">

beta/src/components/MDX/MDXComponents.tsx

@@ -185,7 +185,12 @@ function Illustration({
   return (
     <div className="my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
-        <img src={src} alt={alt} style={{maxHeight: 300}} className="bg-white rounded-lg" />
+        <img
+          src={src}
+          alt={alt}
+          style={{maxHeight: 300}}
+          className="bg-white rounded-lg"
+        />
         {caption ? (
           <figcaption className="text-center leading-tight mt-4">
             {caption}
@@ -235,7 +240,9 @@ function IllustrationBlock({
       {sequential ? (
         <ol className="mdx-illustration-block flex">
           {images.map((x: any, i: number) => (
-            <li className="flex-1" key={i}>{x}</li>
+            <li className="flex-1" key={i}>
+              {x}
+            </li>
           ))}
         </ol>
       ) : (

beta/src/components/Seo.tsx

@@ -25,10 +25,7 @@ export const Seo = withRouter(
     <Head>
       {/* DEFAULT */}
 
-      <meta
-        name="viewport"
-        content="width=device-width, initial-scale=1"
-      />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
 
       {title != null && <title key="title">{title}</title>}
       {description != null && (

beta/src/utils/forwardRefWithAs.tsx

@@ -96,7 +96,7 @@ export function forwardRefWithAs<Props, ComponentType extends As>(
     ref: React.RefObject<any>
   ) => React.ReactElement | null
 ) {
-  return (React.forwardRef(comp as any) as unknown) as ComponentWithAs<
+  return React.forwardRef(comp as any) as unknown as ComponentWithAs<
     ComponentType,
     Props
   >;