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 lint:fix
+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,94 +21,90 @@ interface InlineHiglight {
   endColumn: number;
 }
 
-const CodeBlock = React.forwardRef(function CodeBlock
-  (
-    {
-      children,
-      className = 'language-js',
-      metastring,
-      noMargin,
-      noMarkers,
-    }: {
-      children: string;
-      className?: string;
-      metastring: string;
-      noMargin?: boolean;
-      noMarkers?: boolean;
-    },
-    ref?: React.Ref<HTMLDivElement>
-  ) {
-    const getDecoratedLineInfo = () => {
-      if (!metastring) {
-        return [];
-      }
+const CodeBlock = React.forwardRef(function CodeBlock(
+  {
+    children,
+    className = 'language-js',
+    metastring,
+    noMargin,
+    noMarkers,
+  }: {
+    children: string;
+    className?: string;
+    metastring: string;
+    noMargin?: boolean;
+    noMarkers?: boolean;
+  },
+  ref?: React.Ref<HTMLDivElement>
+) {
+  const getDecoratedLineInfo = () => {
+    if (!metastring) {
+      return [];
+    }
 
-      const linesToHighlight = getHighlightLines(metastring);
-      const highlightedLineConfig = linesToHighlight.map((line) => {
-        return {
-          className: 'bg-github-highlight dark:bg-opacity-10',
-          line,
-        };
-      });
+    const linesToHighlight = getHighlightLines(metastring);
+    const highlightedLineConfig = linesToHighlight.map((line) => {
+      return {
+        className: 'bg-github-highlight dark:bg-opacity-10',
+        line,
+      };
+    });
 
-      const inlineHighlightLines = getInlineHighlights(metastring, children);
-      const inlineHighlightConfig = inlineHighlightLines.map(
-        (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,
-              '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,
-            }
-          ),
-        })
-      );
+    const inlineHighlightLines = getInlineHighlights(metastring, children);
+    const inlineHighlightConfig = inlineHighlightLines.map(
+      (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,
+          '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,
+        }),
+      })
+    );
 
-      return highlightedLineConfig.concat(inlineHighlightConfig);
-    };
+    return highlightedLineConfig.concat(inlineHighlightConfig);
+  };
 
-    // e.g. "language-js"
-    const language = className.substring(9);
-    const filename = '/index.' + language;
-    const decorators = getDecoratedLineInfo();
-    return (
-      <div
-        translate="no"
-        className={cn(
-          'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
-          !noMargin && 'my-8'
-        )}>
-        <SandpackProvider
-          customSetup={{
-            entry: filename,
-            files: {
-              [filename]: {
-                code: children.trimEnd(),
-              },
+  // e.g. "language-js"
+  const language = className.substring(9);
+  const filename = '/index.' + language;
+  const decorators = getDecoratedLineInfo();
+  return (
+    <div
+      translate="no"
+      className={cn(
+        'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
+        !noMargin && 'my-8'
+      )}>
+      <SandpackProvider
+        customSetup={{
+          entry: filename,
+          files: {
+            [filename]: {
+              code: children.trimEnd(),
             },
-          }}>
-          <SandpackThemeProvider theme={CustomTheme}>
-            <ClasserProvider
-              classes={{
-                'sp-cm': styles.codeViewer,
-              }}>
-              <SandpackCodeViewer
-                ref={ref}
-                showLineNumbers={false}
-                decorators={decorators}
-              />
-            </ClasserProvider>
-          </SandpackThemeProvider>
-        </SandpackProvider>
-      </div>
-    );
-  }
-);
+          },
+        }}>
+        <SandpackThemeProvider theme={CustomTheme}>
+          <ClasserProvider
+            classes={{
+              'sp-cm': styles.codeViewer,
+            }}>
+            <SandpackCodeViewer
+              ref={ref}
+              showLineNumbers={false}
+              decorators={decorators}
+            />
+          </ClasserProvider>
+        </SandpackThemeProvider>
+      </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
   >;