prettier setup

githubnext · Mar 10, 2022 · 80abde0 · 80abde0
1 parent cd4ebe1
commit 80abde0
Show file tree

Hide file tree

Showing 30 changed files with 2,300 additions and 1,717 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/package.json b/package.json
@@ -9,13 +9,17 @@
       "extensions": "js,jsx,ts,tsx,css"
     }
   },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  },
   "scripts": {
     "watch": "npm-watch",
     "dev": "concurrently --kill-others \"npm run local\" \"npm run watch\"",
     "local": "vite --port 4000",
     "build": "tsc && vite build",
     "build-blocks": "node ./build.ts",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "prepare": "husky install"
   },
   "blocks": [
     {
@@ -283,7 +287,10 @@
     "@vitejs/plugin-react": "^1.0.0",
     "concurrently": "^6.4.0",
     "esbuild": "^0.13.14",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.5",
     "npm-watch": "^0.11.0",
+    "prettier": "2.5.1",
     "typescript": "^4.3.2",
     "vite": "^2.6.4"
   }

diff --git a/src/App.tsx b/src/App.tsx
@@ -22,8 +22,11 @@ function App() {
 
   useEffect(() => {
     const onUpdateMetadata = (event: MessageEvent) => {
-      const originRegex = new RegExp(/^https:\/\/\d{1,4}-\d{1,4}-\d{1,4}-sandpack\.codesandbox\.io$/)
-      if (!originRegex.test(origin) && origin !== window.location.origin) return;
+      const originRegex = new RegExp(
+        /^https:\/\/\d{1,4}-\d{1,4}-\d{1,4}-sandpack\.codesandbox\.io$/
+      );
+      if (!originRegex.test(origin) && origin !== window.location.origin)
+        return;
       if (event.data.codesandbox) return;
       if (event.data.type !== "update-metadata") return;
       const newMetadata = event?.data?.metadata || {};
@@ -56,29 +59,42 @@ function App() {
   const block = pkgJson?.blocks.find((v) => v.entry === blockId);
 
   return (
-    <div style={{
-      height: "100vh",
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden",
-      fontFamily: "sans-serif",
-    }}>
-      <div style={{
-        boxShadow: "0 0 1em rgba(0, 0, 0, 0.1)",
-        flex: "none",
+    <div
+      style={{
+        height: "100vh",
         display: "flex",
-        alignItems: "center",
-        flexWrap: "wrap",
-        padding: "0.5em",
-        zIndex: 10,
-      }}>
-        <div style={{ flex: 1, minWidth: "min(90vw, 13em)", margin: "0.6em 0.5em" }}>
-          <label style={{
-            fontSize: "0.9em",
-            fontWeight: 500,
-            display: "block",
-            marginBottom: "0.5em",
-          }} htmlFor="url">
+        flexDirection: "column",
+        overflow: "hidden",
+        fontFamily: "sans-serif",
+      }}
+    >
+      <div
+        style={{
+          boxShadow: "0 0 1em rgba(0, 0, 0, 0.1)",
+          flex: "none",
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "wrap",
+          padding: "0.5em",
+          zIndex: 10,
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            minWidth: "min(90vw, 13em)",
+            margin: "0.6em 0.5em",
+          }}
+        >
+          <label
+            style={{
+              fontSize: "0.9em",
+              fontWeight: 500,
+              display: "block",
+              marginBottom: "0.5em",
+            }}
+            htmlFor="url"
+          >
             GitHub File URL
           </label>
           <input
@@ -96,13 +112,22 @@ function App() {
             }}
           />
         </div>
-        <div style={{ flex: 1, minWidth: "min(90vw, 13em)", margin: "0.6em 0.5em" }}>
-          <label style={{
-            fontSize: "0.9em",
-            fontWeight: 500,
-            display: "block",
-            marginBottom: "0.5em",
-          }} htmlFor="block">
+        <div
+          style={{
+            flex: 1,
+            minWidth: "min(90vw, 13em)",
+            margin: "0.6em 0.5em",
+          }}
+        >
+          <label
+            style={{
+              fontSize: "0.9em",
+              fontWeight: 500,
+              display: "block",
+              marginBottom: "0.5em",
+            }}
+            htmlFor="block"
+          >
             Block
           </label>
           <select
@@ -149,13 +174,22 @@ function App() {
             </optgroup>
           </select>
         </div>
-        <div style={{ flex: 1, minWidth: "min(90vw, 13em)", margin: "0.6em 0.5em" }}>
-          <label style={{
-            fontSize: "0.9em",
-            fontWeight: 500,
-            display: "block",
-            marginBottom: "0.5em",
-          }} htmlFor="block">
+        <div
+          style={{
+            flex: 1,
+            minWidth: "min(90vw, 13em)",
+            margin: "0.6em 0.5em",
+          }}
+        >
+          <label
+            style={{
+              fontSize: "0.9em",
+              fontWeight: 500,
+              display: "block",
+              marginBottom: "0.5em",
+            }}
+            htmlFor="block"
+          >
             Environment
           </label>
           <select
@@ -181,17 +215,19 @@ function App() {
           </select>
         </div>
       </div>
-      <div style={{
-        flex: 1,
-        overflow: "auto",
-      }}>
+      <div
+        style={{
+          flex: 1,
+          overflow: "auto",
+        }}
+      >
         {(!blockId || !fileUrl) && (
-          <div style={{
-            padding: "1em",
-          }}>
-            <p>
-              Please select a block and enter a file path.
-            </p>
+          <div
+            style={{
+              padding: "1em",
+            }}
+          >
+            <p>Please select a block and enter a file path.</p>
           </div>
         )}
         {!!block && !!fileUrl && !!urlParts && (

diff --git a/src/blocks/file-blocks/annotate-react/CodeSandbox.tsx b/src/blocks/file-blocks/annotate-react/CodeSandbox.tsx
@@ -1,6 +1,6 @@
 import { SandpackPreview, SandpackProvider } from "@codesandbox/sandpack-react";
 import { useMemo } from "react";
-import "./style.css"
+import "./style.css";
 
 export const CodeSandbox = ({
   children,
@@ -9,19 +9,25 @@ export const CodeSandbox = ({
   children: string;
   dependencies?: string[];
 }) => {
-  const files = useMemo(() => ({
-    "/App.js": children,
-  }), [children]);
+  const files = useMemo(
+    () => ({
+      "/App.js": children,
+    }),
+    [children]
+  );
 
-  const parsedDependencies = useMemo(() => (
-    parseDependencies(dependencies || [])
-  ), [dependencies]);
+  const parsedDependencies = useMemo(
+    () => parseDependencies(dependencies || []),
+    [dependencies]
+  );
 
   return (
-    <div style={{
-      width: "100%",
-      height: "100%",
-    }}>
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+    >
       <SandpackProvider
         template="react"
         customSetup={{
@@ -36,7 +42,7 @@ export const CodeSandbox = ({
         />
       </SandpackProvider>
     </div>
-  )
+  );
 };
 
 const parseDependencies = (dependencies: string[]): Record<string, string> => {