chore(tools): fix linter

Naomi Carrigan · Naomi Carrigan · commit 4938a25210e3 · 2023-12-13T15:35:28.000-08:00
diff --git a/apps/top-flex-box-example/.eslintrc.json b/apps/top-flex-box-example/.eslintrc.json
@@ -1,10 +1,15 @@
 {
-    "extends": "../../.eslintrc.json",
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaVersion": 2018,
-        "ecmaFeatures": {
-            "jsx": true
-        }
+  "extends": ["plugin:react/recommended"],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2018,
+    "ecmaFeatures": {
+      "jsx": true
     }
-}
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
diff --git a/apps/top-flex-box-example/package-lock.json b/apps/top-flex-box-example/package-lock.json
diff --git a/apps/top-flex-box-example/package.json b/apps/top-flex-box-example/package.json
@@ -23,5 +23,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint-plugin-react": "^7.33.2"
   }
 }
diff --git a/apps/top-flex-box-example/src/App.js b/apps/top-flex-box-example/src/App.js
@@ -1,12 +1,13 @@
-import { Sandpack } from "@codesandbox/sandpack-react"
+import { React } from 'react';
+import { Sandpack } from '@codesandbox/sandpack-react';
 
 function App() {
   return (
-      <Sandpack
-        files={{
-          "styles.css": {
-            active: true,
-            code: `
+    <Sandpack
+      files={{
+        'styles.css': {
+          active: true,
+          code: `
 .flex-container {
   /* display: flex; */
   gap: 12px;
@@ -20,9 +21,9 @@ function App() {
   /* flex: 1; */
 }
           `
-          },
-          "index.html": {
-            code: `
+        },
+        'index.html': {
+          code: `
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -39,14 +40,14 @@ function App() {
     </div>
 </body>
 </html>`
-          },
-        }}
-        options={{
-          editorHeight: "100vh",
-        }}
-        theme={'dark'}
-        template="static"
-      />
+        }
+      }}
+      options={{
+        editorHeight: '100vh'
+      }}
+      theme={'dark'}
+      template='static'
+    />
   );
 }
 
diff --git a/apps/top-flex-box-example/src/index.css b/apps/top-flex-box-example/src/index.css
@@ -1,9 +1,9 @@
 #editor {
-    height: 100%;
-    width: 100%;
+  height: 100%;
+  width: 100%;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-}
+  margin: 0;
+  padding: 0;
+}
diff --git a/apps/top-flex-box-example/src/index.js b/apps/top-flex-box-example/src/index.js
@@ -9,5 +9,3 @@ root.render(
     <App />
   </React.StrictMode>
 );
-
-

Original file line number	Diff line number	Diff line change
`@@ -23,5 +23,8 @@`
`23`	`23`	`"last 1 firefox version",`
`24`	`24`	`"last 1 safari version"`
`25`	`25`	`]`
	`26`	`+ },`
	`27`	`+ "devDependencies": {`
	`28`	`+ "eslint-plugin-react": "^7.33.2"`
`26`	`29`	`}`
`27`	`30`	`}`
-Original file line number
+Diff line change
     <App />
   </React.StrictMode>
 );
+-
+-