update prettier config

.eslintrc.js

@@ -1,21 +1,14 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true
+    es2021: true,
   },
-  extends: [
-    'plugin:react/recommended',
-    'standard-with-typescript'
-  ],
-  overrides: [
-  ],
+  extends: ['plugin:react/recommended', 'standard-with-typescript'],
+  overrides: [],
   parserOptions: {
     ecmaVersion: 'latest',
-    sourceType: 'module'
+    sourceType: 'module',
   },
-  plugins: [
-    'react'
-  ],
-  rules: {
-  }
-}
+  plugins: ['react'],
+  rules: {},
+};

.eslintrc.json

@@ -7,15 +7,11 @@
     "plugin:prettier/react",
     "plugin:prettier/@typescript-eslint"
   ],
-  "plugins": [
-    "@typescript-eslint",
-    "react",
-    "prettier"
-  ],
+  "plugins": ["@typescript-eslint", "react", "prettier"],
   "rules": {
     "react/react-in-jsx-scope": "off"
   },
   "globals": {
     "React": "writable"
   }
-}
+}

.prettierrc

@@ -1,4 +1,8 @@
 {
-	"semi": true,
-	"singleQuote": true
-}
+  "trailingComma": "es5",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

jest.config.js

@@ -32,5 +32,5 @@ module.exports = {
     '/node_modules/',
     '^.+\\.module\\.(css|sass|scss)$',
   ],
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
-}
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+};

jest.setup.js

@@ -1,3 +1,3 @@
 // jest.setup.js
 
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom/extend-expect';

next.config.js

@@ -1,16 +1,12 @@
 /** @type {import('next').NextConfig} */
 
-
 const nextConfig = {
   reactStrictMode: false,
   swcMinify: true,
   trailingSlash: true,
   images: {
-    unoptimized: true
+    unoptimized: true,
   },
-}
-
-module.exports = nextConfig
-
-
+};
 
+module.exports = nextConfig;

package.json

@@ -9,7 +9,9 @@
     "lint": "eslint --ext .ts,.tsx",
     "test": "jest",
     "coverage": "jest --coverage",
-    "export": "next export"
+    "export": "next export",
+    "format": "prettier --check --ignore-path .gitignore .",
+    "format:fix": "prettier --write --ignore-path .gitignore ."
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.9.4",
@@ -50,7 +52,6 @@
     "next": "13.0.2",
     "next-router-mock": "^0.9.9",
     "papaparse": "^5.4.1",
-    "prettier": "^2.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-force-graph": "^1.43.0",
@@ -80,6 +81,8 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.18",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "react-test-renderer": "^18.2.0",
     "tailwindcss": "^3.2.2"
   }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/components/announcements/TcAnnouncementsAlert.tsx

@@ -37,7 +37,7 @@ function TcAnnouncementsAlert() {
       }}
     >
       <TcAlert
-        variant="filled"
+        variant='filled'
         className={'bg-error-500'}
         icon={false}
         sx={{
@@ -47,7 +47,7 @@ function TcAnnouncementsAlert() {
           paddingY: 0,
         }}
       >
-        <div className="md:space-x-3 flex flex-col md:flex-row items-center justify-center p-0">
+        <div className='flex flex-col items-center justify-center p-0 md:flex-row md:space-x-3'>
           <TcText
             text={
               'Announcements needs write access at the server-level (i.e. Send Message, Send Messages in Threads, Create Public Threads, Create Private Threads, etc)'
@@ -56,9 +56,9 @@ function TcAnnouncementsAlert() {
             variant={'subtitle1'}
           />
           <TcButton
-            text="Update Permissions"
+            text='Update Permissions'
             onClick={handleGrantAccess}
-            className="text-white"
+            className='text-white'
           />
         </div>
       </TcAlert>