add prettier config and run it on JS

jamsocket · Jul 26, 2023 · d355a71 · d355a71
1 parent 41bc25a
commit d355a71
Show file tree

Hide file tree

Showing 26 changed files with 900 additions and 717 deletions.
diff --git a/examples/.prettierrc b/examples/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 100,
+    "semi": false
+}
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/package.json b/examples/package.json
@@ -6,18 +6,12 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md}\""
   },
   "dependencies": {
-    "@types/codemirror": "^5.60.8",
-    "@types/node": "20.4.2",
-    "@types/quill": "^2.0.10",
-    "@types/react": "18.2.15",
-    "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
     "codemirror": "^5.65.14",
-    "eslint": "8.45.0",
-    "eslint-config-next": "13.4.10",
     "next": "13.4.10",
     "postcss": "8.4.26",
     "quill": "^1.3.7",
@@ -31,5 +25,16 @@
     "y-quill": "^0.1.5",
     "y-websocket": "^1.5.0",
     "yjs": "^13.6.7"
+  },
+  "devDependencies": {
+    "@types/codemirror": "^5.60.8",
+    "@types/node": "20.4.2",
+    "@types/quill": "^2.0.10",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.10",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.4.1"
   }
 }
diff --git a/examples/src/app/color/Color.tsx b/examples/src/app/color/Color.tsx
@@ -1,45 +1,56 @@
-"use client"
+'use client'
 
-import { useMap } from "@/lib/provider";
-import { useState } from "react";
+import { useMap } from '@/lib/provider'
+import { useState } from 'react'
 
 const GRID_SIZE = 10
 const COLORS = ['red', 'green', 'blue', 'purple', 'orange', 'pink', 'brown', null]
 const DEFAULT_COLOR = '#eee'
 
 export function ColorGrid() {
-    const items = useMap<string>('colorgrid')
-    const [color, setColor] = useState<string | null>('red')
+  const items = useMap<string>('colorgrid')
+  const [color, setColor] = useState<string | null>('red')
 
-    return <div className="space-y-3">
-        <h1>Color Grid</h1>
-        <div className="space-x-2 flex flex-row">
-            {
-                COLORS.map((color) => <div key={color} className="w-10 h-10" style={{backgroundColor: color ?? DEFAULT_COLOR}} onClick={() => setColor(color)}></div>)
-            }
-        </div>
-        <table>
-            <tbody>
-                {
-                    Array.from({length: GRID_SIZE}, (x, i) => <tr key={i}>
-                        {
-                            Array.from({length: GRID_SIZE}, (x, j) => {
-                                const key = `${i},${j}`
-                                const item = items!.get(key)
-                                return <td key={key}>
-                                    <div className="w-10 h-10" style={{backgroundColor: item || DEFAULT_COLOR}} onClick={() => {
-                                        if (color === null) {
-                                            items!.delete(key)
-                                        } else {
-                                            items!.set(key, color)
-                                        }
-                                    }}></div>
-                                </td>
-                            })
+  return (
+    <div className="space-y-3">
+      <h1>Color Grid</h1>
+      <div className="space-x-2 flex flex-row">
+        {COLORS.map((color) => (
+          <div
+            key={color}
+            className="w-10 h-10"
+            style={{ backgroundColor: color ?? DEFAULT_COLOR }}
+            onClick={() => setColor(color)}
+          ></div>
+        ))}
+      </div>
+      <table>
+        <tbody>
+          {Array.from({ length: GRID_SIZE }, (x, i) => (
+            <tr key={i}>
+              {Array.from({ length: GRID_SIZE }, (x, j) => {
+                const key = `${i},${j}`
+                const item = items!.get(key)
+                return (
+                  <td key={key}>
+                    <div
+                      className="w-10 h-10"
+                      style={{ backgroundColor: item || DEFAULT_COLOR }}
+                      onClick={() => {
+                        if (color === null) {
+                          items!.delete(key)
+                        } else {
+                          items!.set(key, color)
                         }
-                    </tr>)
-                }
-            </tbody>
-        </table>
+                      }}
+                    ></div>
+                  </td>
+                )
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
+  )
 }
diff --git a/examples/src/app/color/page.tsx b/examples/src/app/color/page.tsx
@@ -11,7 +11,7 @@ export default async function Home({ searchParams }: HomeProps) {
   const connectionKey = await getOrCreateDoc(searchParams.doc, ENV_CONFIG)
 
   return (
-    <YDocProvider connectionKey={connectionKey} setQueryParam='doc'>
+    <YDocProvider connectionKey={connectionKey} setQueryParam="doc">
       <ColorGrid />
     </YDocProvider>
   )