chore: Format dev with Prettier defaults (#8677)

* chore: use default prettier config
* chore: format with prettier
* chore: update prettier

Author: chaance

FAQ.md

@@ -120,7 +120,7 @@ const App = () => {
   return (
     <Route
       path="/somewhere"
-      render={props => <MyComponent {...props} color={color} />}
+      render={(props) => <MyComponent {...props} color={color} />}
     />
   );
 };

docs/api.md

@@ -213,7 +213,7 @@ import { create } from "react-test-renderer";
 import {
   MemoryRouter,
   Routes,
-  Route
+  Route,
 } from "react-router-dom";
 
 describe("My app", () => {
@@ -273,7 +273,7 @@ function UsersIndexPage({ users }) {
     <div>
       <h1>Users</h1>
       <ul>
-        {users.map(user => (
+        {users.map((user) => (
           <li key={user.id}>
             <Link to={user.id}>{user.name}</Link>
           </li>
@@ -439,14 +439,14 @@ const NavLink = React.forwardRef(
         className={({ isActive }) =>
           [
             props.className,
-            isActive ? activeClassName : null
+            isActive ? activeClassName : null,
           ]
             .filter(Boolean)
             .join(" ")
         }
         style={({ isActive }) => ({
           ...props.style,
-          ...(isActive ? activeStyle : null)
+          ...(isActive ? activeStyle : null),
         })}
       />
     );
@@ -512,7 +512,9 @@ class LoginForm extends React.Component {
         {user && (
           <Navigate to="/dashboard" replace={true} />
         )}
-        <form onSubmit={event => this.handleSubmit(event)}>
+        <form
+          onSubmit={(event) => this.handleSubmit(event)}
+        >
           <input type="text" name="username" />
           <input type="password" name="password" />
         </form>
@@ -594,7 +596,7 @@ function Parent() {
 ```tsx lines=[2]
 function Child() {
   const [count, setCount] = useOutletContext();
-  const increment = () => setCount(c => c + 1);
+  const increment = () => setCount((c) => c + 1);
   return <button onClick={increment}>{count}</button>;
 }
 ```
@@ -817,7 +819,7 @@ declare function generatePath(
 generatePath("/users/:id", { id: 42 }); // "/users/42"
 generatePath("/files/:type/*", {
   type: "img",
-  "*": "cat.jpg"
+  "*": "cat.jpg",
 }); // "/files/img/cat.jpg"
 ```
 
@@ -975,7 +977,7 @@ The `useLinkClickHandler` hook returns a click event handler to for navigation w
 ```tsx
 import {
   useHref,
-  useLinkClickHandler
+  useLinkClickHandler,
 } from "react-router-dom";
 
 const StyledLink = styled("a", { color: "fuchsia" });
@@ -996,14 +998,14 @@ const Link = React.forwardRef(
     let handleClick = useLinkClickHandler(to, {
       replace,
       state,
-      target
+      target,
     });
 
     return (
       <StyledLink
         {...rest}
         href={href}
-        onClick={event => {
+        onClick={(event) => {
           onClick?.(event);
           if (!event.defaultPrevented) {
             handleClick(event);
@@ -1051,13 +1053,13 @@ function Link({
 }) {
   let handlePress = useLinkPressHandler(to, {
     replace,
-    state
+    state,
   });
 
   return (
     <TouchableHighlight
       {...rest}
-      onPress={event => {
+      onPress={(event) => {
         onPress?.(event);
         if (!event.defaultPrevented) {
           handlePress(event);
@@ -1288,12 +1290,12 @@ function App() {
       children: [
         {
           path: "messages",
-          element: <DashboardMessages />
+          element: <DashboardMessages />,
         },
-        { path: "tasks", element: <DashboardTasks /> }
-      ]
+        { path: "tasks", element: <DashboardTasks /> },
+      ],
     },
-    { path: "team", element: <AboutPage /> }
+    { path: "team", element: <AboutPage /> },
   ]);
 
   return element;

docs/faq.md

@@ -15,7 +15,7 @@ This question usually stems from the fact that you're using React class componen
 import {
   useLocation,
   useNavigate,
-  useParams
+  useParams,
 } from "react-router-dom";
 
 function withRouter(Component) {
@@ -406,7 +406,7 @@ export async function loader({ params }) {
   }
 
   let user = await fakeDb.user.find({
-    where: { id: params.id }
+    where: { id: params.id },
   });
   if (!user) {
     throw new Response("", { status: 404 });

docs/getting-started/concepts.md

@@ -100,7 +100,7 @@ With **client side routing**, developers are able to manipulate the browser [his
 ```jsx
 <a
   href="/contact"
-  onClick={event => {
+  onClick={(event) => {
     // stop the browser from changing the URL and requesting the new document
     event.preventDefault();
     // push an entry into the browser history stack and change the URL
@@ -191,7 +191,7 @@ let location = {
   search: "?campaign=instagram&popular=true",
   hash: "",
   state: null,
-  key: "aefz24ie"
+  key: "aefz24ie",
 };
 
 // we can turn the location.search into URLSearchParams
@@ -279,8 +279,8 @@ function useFakeFetch(URL) {
     if (state === "loading") {
       let controller = new AbortController();
       fetch(URL, { signal: controller.signal })
-        .then(res => res.json())
-        .then(data => {
+        .then((res) => res.json())
+        .then((data) => {
           if (controller.aborted) return;
           // set the cache
           cache.set(cacheKey, data);
@@ -335,49 +335,49 @@ let routes = [
     children: [
       {
         index: true,
-        element: <Home />
+        element: <Home />,
       },
       {
         path: "teams",
         element: <Teams />,
         children: [
           {
             index: true,
-            element: <LeagueStandings />
+            element: <LeagueStandings />,
           },
           {
             path: ":teamId",
-            element: <Team />
+            element: <Team />,
           },
           {
             path: ":teamId/edit",
-            element: <EditTeam />
+            element: <EditTeam />,
           },
           {
             path: "new",
-            element: <NewTeamForm />
-          }
-        ]
-      }
-    ]
+            element: <NewTeamForm />,
+          },
+        ],
+      },
+    ],
   },
   {
     element: <PageLayout />,
     children: [
       {
         element: <Privacy />,
-        path: "/privacy"
+        path: "/privacy",
       },
       {
         element: <Tos />,
-        path: "/tos"
-      }
-    ]
+        path: "/tos",
+      },
+    ],
   },
   {
     element: <Contact />,
-    path: "/contact-us"
-  }
+    path: "/contact-us",
+  },
 ];
 ```
 
@@ -402,7 +402,7 @@ If we add up all the segments of all the branches of our [route config](#route-c
   "/teams/new",
   "/privacy",
   "/tos",
-  "/contact-us"
+  "/contact-us",
 ];
 ```
 
@@ -480,27 +480,27 @@ React Router will create an array of [matches](#match) from these routes and the
     params: null,
     route: {
       element: <App />,
-      path: "/"
-    }
+      path: "/",
+    },
   },
   {
     pathname: "/teams",
     params: null,
     route: {
       element: <Teams />,
-      path: "teams"
-    }
+      path: "teams",
+    },
   },
   {
     pathname: "/teams/firebirds",
     params: {
-      teamId: "firebirds"
+      teamId: "firebirds",
     },
     route: {
       element: <Team />,
-      path: ":teamId"
-    }
-  }
+      path: ":teamId",
+    },
+  },
 ];
 ```
 

docs/getting-started/installation.md

@@ -245,7 +245,7 @@ Once you have webpack configured and the necessary dependencies installed, somew
 import {
   BrowserRouter,
   Routes,
-  Route
+  Route,
 } from "react-router-dom";
 
 function App() {

docs/getting-started/overview.md

@@ -24,7 +24,7 @@ import { render } from "react-dom";
 import {
   BrowserRouter,
   Routes,
-  Route
+  Route,
 } from "react-router-dom";
 // import your route components too
 
@@ -82,7 +82,7 @@ function Invoices() {
   return (
     <div>
       <NewInvoiceForm
-        onSubmit={async event => {
+        onSubmit={async (event) => {
           let newInvoice = await createInvoice(
             event.target
           );
@@ -225,7 +225,7 @@ import {
   Routes,
   Route,
   Link,
-  Outlet
+  Outlet,
 } from "react-router-dom";
 
 function App() {
@@ -339,7 +339,7 @@ import {
   Routes,
   Route,
   Link,
-  Outlet
+  Outlet,
 } from "react-router-dom";
 
 function Home() {