style(js): Use sentry's prettier config (#793)

Author: evanpurkhiser

.babelrc.js

@@ -8,6 +8,6 @@ if (process.env.NODE_ENV !== `test`) {
 
 module.exports = {
   sourceMaps: true,
-  presets: ["babel-preset-gatsby-package"],
+  presets: ['babel-preset-gatsby-package'],
   ignore,
 };

.prettierrc

@@ -1,7 +1,7 @@
-import React from "react";
-import PageContext from "~src/components/pageContext";
+import React from 'react';
+import PageContext from '~src/components/pageContext';
 
-export const wrapPageElement = ({ element, props: { pageContext } }) => (
+export const wrapPageElement = ({element, props: {pageContext}}) => (
   <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>
 );
 

gatsby-browser.js

@@ -1,21 +1,17 @@
-require("ts-node").register({
+require('ts-node').register({
   files: true, // to that TS node hooks have access to local typings too
 });
 
-const activeEnv =
-  process.env.GATSBY_ENV || process.env.NODE_ENV || "development";
+const activeEnv = process.env.GATSBY_ENV || process.env.NODE_ENV || 'development';
 
 console.log(`Using environment config: '${activeEnv}'`);
 
-require("dotenv").config({
+require('dotenv').config({
   path: `.env.${activeEnv}`,
 });
 
-if (
-  process.env.VERCEL_GITHUB_COMMIT_REF === "master" &&
-  process.env.ALGOLIA_ADMIN_KEY
-) {
-  process.env.ALGOLIA_INDEX = "1";
+if (process.env.VERCEL_GITHUB_COMMIT_REF === 'master' && process.env.ALGOLIA_ADMIN_KEY) {
+  process.env.ALGOLIA_INDEX = '1';
 }
 
-module.exports = require("./src/gatsby/config");
+module.exports = require('./src/gatsby/config');

gatsby-config.js

@@ -1,36 +1,34 @@
-const Sentry = require("@sentry/node");
-require("@sentry/tracing");
-const Profiling = require("@sentry/profiling-node");
+const Sentry = require('@sentry/node');
+require('@sentry/tracing');
+const Profiling = require('@sentry/profiling-node');
 
-const activeEnv =
-  process.env.GATSBY_ENV || process.env.NODE_ENV || "development";
+const activeEnv = process.env.GATSBY_ENV || process.env.NODE_ENV || 'development';
 
 Sentry.init({
   dsn:
     process.env.SENTRY_DSN ||
-    "https://[email protected]/5266138",
+    'https://[email protected]/5266138',
   environment: activeEnv,
-  tracesSampleRate: activeEnv === "development" ? 0 : 1,
-  profilesSampleRate: activeEnv === "development" ? 0 : 1, // Set profiling sampling rate.
+  tracesSampleRate: activeEnv === 'development' ? 0 : 1,
+  profilesSampleRate: activeEnv === 'development' ? 0 : 1, // Set profiling sampling rate.
   integrations: [new Profiling.ProfilingIntegration()],
 });
 
-exports.onCreateNode = require("./src/gatsby/onCreateNode").default;
-exports.onCreateWebpackConfig = require("./src/gatsby/onCreateWebpackConfig").default;
-exports.createPages = require("./src/gatsby/createPages").default;
-exports.createSchemaCustomization = require("./src/gatsby/createSchemaCustomization").default;
+exports.onCreateNode = require('./src/gatsby/onCreateNode').default;
+exports.onCreateWebpackConfig = require('./src/gatsby/onCreateWebpackConfig').default;
+exports.createPages = require('./src/gatsby/createPages').default;
+exports.createSchemaCustomization =
+  require('./src/gatsby/createSchemaCustomization').default;
 
 Sentry.configureScope(scope => {
   const id = process.env.GITHUB_RUN_ID;
   if (id) {
-    scope.setUser({ id });
+    scope.setUser({id});
   }
 });
 
 function startFromPrevTransaction(newTransactionContext) {
-  const oldTransaction = Sentry.getCurrentHub()
-    ?.getScope()
-    ?.getTransaction();
+  const oldTransaction = Sentry.getCurrentHub()?.getScope()?.getTransaction();
 
   let oldTransactionTraceParent;
   if (oldTransaction) {
@@ -59,29 +57,27 @@ function startFromPrevTransaction(newTransactionContext) {
 
 exports.onPreInit = () => {
   startFromPrevTransaction({
-    op: "build",
-    name: "Init",
+    op: 'build',
+    name: 'Init',
   });
 };
 
 exports.onPreBootstrap = () => {
   startFromPrevTransaction({
-    op: "build",
-    name: "Bootstrap",
+    op: 'build',
+    name: 'Bootstrap',
   });
 };
 
 exports.onPreBuild = () => {
   startFromPrevTransaction({
-    op: "build",
-    name: "Build",
+    op: 'build',
+    name: 'Build',
   });
 };
 
 exports.onPostBuild = () => {
-  const transaction = Sentry.getCurrentHub()
-    ?.getScope()
-    ?.getTransaction();
+  const transaction = Sentry.getCurrentHub()?.getScope()?.getTransaction();
   if (transaction) {
     transaction.finish();
   }

gatsby-node.js

@@ -1,6 +1,6 @@
-import React from "react";
-import PageContext from "~src/components/pageContext";
+import React from 'react';
+import PageContext from '~src/components/pageContext';
 
-export const wrapPageElement = ({ element, props: { pageContext } }) => (
+export const wrapPageElement = ({element, props: {pageContext}}) => (
   <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>
 );

gatsby-ssr.js

@@ -1,6 +1,6 @@
 module.exports = {
   transform: {
-    "^.+\\.[jt]sx?$": `<rootDir>/jest-transformer.js`,
+    '^.+\\.[jt]sx?$': `<rootDir>/jest-transformer.js`,
   },
   testEnvironment: `jest-environment-jsdom-fourteen`,
   testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],

jest.config.js

@@ -64,7 +64,7 @@
     "init": "cp .env.example .env.development && yarn install",
     "prestart": "gatsby clean",
     "start": "yarn run develop",
-    "format": "prettier --ignore-path .gitignore --write \"**/*.js\"",
+    "format": "prettier --ignore-path .gitignore --write \"**/*.{js,ts,jsx,tsx}\"",
     "test": "GATSBY_ENV=test gatsby build"
   },
   "devDependencies": {
@@ -75,7 +75,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
     "jest-environment-jsdom-fourteen": "^1.0.1",
-    "prettier": "^1.19.1",
+    "prettier": "2.7.1",
     "react-test-renderer": "^16.13.1"
   },
   "volta": {

package.json

@@ -0,0 +1,12 @@
+/* eslint-env node */
+module.exports = {
+  bracketSpacing: false,
+  bracketSameLine: false,
+  printWidth: 90,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: false,
+  arrowParens: 'avoid',
+};

prettier.config.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 type Props = {
   title?: string;
@@ -15,22 +15,17 @@ export default ({
   deepLink,
   dismiss = false,
 }: Props): JSX.Element => {
-  let className = "alert";
+  let className = 'alert';
   if (level) {
     className += ` alert-${level}`;
   }
-  if (children.props && typeof children.props.children === "string") {
-    className += " markdown-text-only";
+  if (children.props && typeof children.props.children === 'string') {
+    className += ' markdown-text-only';
   }
   return (
     <div className={className} role="alert" id={deepLink}>
       {dismiss && (
-        <button
-          type="button"
-          className="close"
-          data-dismiss="alert"
-          aria-label="Close"
-        >
+        <button type="button" className="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       )}

src/components/alert.tsx

@@ -1,39 +1,34 @@
-import React, { useRef } from "react";
+import React, {useRef} from 'react';
 
-import CodeContext, { useCodeContextState } from "./codeContext";
-import SEO from "./seo";
-import Layout from "./layout";
-import SmartLink from "./smartLink";
-import TableOfContents from "./tableOfContents";
-import * as Sentry from "@sentry/gatsby";
+import CodeContext, {useCodeContextState} from './codeContext';
+import SEO from './seo';
+import Layout from './layout';
+import SmartLink from './smartLink';
+import TableOfContents from './tableOfContents';
+import * as Sentry from '@sentry/gatsby';
 
 type GitHubCTAProps = {
   sourceInstanceName: string;
   relativePath: string;
 };
 
-const GitHubCTA = ({
-  sourceInstanceName,
-  relativePath,
-}: GitHubCTAProps): JSX.Element => (
+const GitHubCTA = ({sourceInstanceName, relativePath}: GitHubCTAProps): JSX.Element => (
   <div className="github-cta">
     <small>
-      You can{" "}
+      You can{' '}
       <SmartLink
         to={`https://github.com/getsentry/develop/edit/master/src/${sourceInstanceName}/${relativePath}`}
       >
         edit this page
-      </SmartLink>{" "}
+      </SmartLink>{' '}
       on GitHub.
     </small>
   </div>
 );
 
-const WrappedTOC = React.forwardRef(
-  (props, ref: React.RefObject<HTMLDivElement>) => {
-    return <TableOfContents {...props} contentRef={ref} />;
-  }
-);
+const WrappedTOC = React.forwardRef((props, ref: React.RefObject<HTMLDivElement>) => {
+  return <TableOfContents {...props} contentRef={ref} />;
+});
 
 type Props = {
   data?: {
@@ -55,29 +50,27 @@ type Props = {
 };
 
 export default ({
-  data: { file } = {},
+  data: {file} = {},
   pageContext = {},
   seoTitle,
   sidebar,
   children,
   prependToc,
 }: Props): JSX.Element => {
-  const tx = Sentry.getCurrentHub()
-    .getScope()
-    .getTransaction();
+  const tx = Sentry.getCurrentHub().getScope().getTransaction();
   if (tx) {
-    tx.setStatus("ok");
+    tx.setStatus('ok');
   }
 
-  const { title, excerpt, description } = pageContext;
+  const {title, excerpt, description} = pageContext;
   const hasToc = !pageContext.notoc;
 
   const contentRef = useRef<HTMLDivElement>(null);
 
-  const pageDescription = description || (excerpt ? excerpt.slice(0, 160) : "");
+  const pageDescription = description || (excerpt ? excerpt.slice(0, 160) : '');
 
   return (
-    <Layout {...{ sidebar, pageContext }}>
+    <Layout {...{sidebar, pageContext}}>
       <SEO
         title={seoTitle || title}
         description={pageDescription}
@@ -87,9 +80,7 @@ export default ({
       <div className="row">
         <div
           className={
-            hasToc || prependToc
-              ? "col-sm-8 col-md-12 col-lg-8 col-xl-9"
-              : "col-12"
+            hasToc || prependToc ? 'col-sm-8 col-md-12 col-lg-8 col-xl-9' : 'col-12'
           }
         >
           <h1 className="mb-3">{title}</h1>

src/components/basePage.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { useLocation } from "@reach/router";
-import { StaticQuery, graphql } from "gatsby";
-import SmartLink from "./smartLink";
+import React from 'react';
+import {useLocation} from '@reach/router';
+import {StaticQuery, graphql} from 'gatsby';
+import SmartLink from './smartLink';
 
 const query = graphql`
   query BreadcrumbsQuery {
@@ -35,19 +35,19 @@ type Props = {
 
 const getTitle = node => {
   // TODO(dcramer): support frontmatter somehow from js files
-  if (node.path === "/") return "Home";
+  if (node.path === '/') return 'Home';
   return node.context.title;
 };
 
 export const Breadcrumbs = ({
   data: {
-    allSitePage: { nodes },
+    allSitePage: {nodes},
   },
 }: Props) => {
   const location = useLocation();
   let currentPath = location.pathname;
-  if (currentPath.substr(currentPath.length - 1) !== "/")
-    currentPath = currentPath += "/";
+  if (currentPath.substr(currentPath.length - 1) !== '/')
+    currentPath = currentPath += '/';
   const rootNode = nodes.find(n => n.path === currentPath);
   if (!rootNode) {
     console.warn(`Cant find root node for breadcrumbs: ${currentPath}`);
@@ -56,7 +56,7 @@ export const Breadcrumbs = ({
   const trailNodes = nodes.filter(n => rootNode.path.indexOf(n.path) === 0);
 
   return (
-    <ul className="breadcrumb" style={{ margin: 0 }}>
+    <ul className="breadcrumb" style={{margin: 0}}>
       {trailNodes
         .sort((a, b) => a.path.localeCompare(b.path))
         .map(n => {