Merge pull request #2110 from flanksource/chore-prettier-add-tailwind…

…-plugin

chore: add prettier plugin for tailwind to sort tailwind classes

.github/workflows/publish.yaml

@@ -43,7 +43,7 @@ jobs:
         uses: elgohr/Publish-Docker-Github-Action@742a180fa47f3adfb5115902ae4955acc6ad769b # v4
         env:
           APP_DEPLOYMENT: CANARY_CHECKER
-          WITHOUT_AUTH: 'true'
+          WITHOUT_AUTH: "true"
         with:
           name: flanksource/canary-checker-ui
           username: ${{ secrets.DOCKER_USERNAME }}
@@ -55,8 +55,8 @@ jobs:
       - name: Publish incident-manager-ui to Registry
         uses: elgohr/Publish-Docker-Github-Action@742a180fa47f3adfb5115902ae4955acc6ad769b # v4
         env:
-          APP_DEPLOYMENT: 'INCIDENT_MANAGER'
-          WITHOUT_AUTH: 'false'
+          APP_DEPLOYMENT: "INCIDENT_MANAGER"
+          WITHOUT_AUTH: "false"
         with:
           name: flanksource/incident-manager-ui
           username: ${{ secrets.DOCKER_USERNAME }}
@@ -85,7 +85,7 @@ jobs:
           REPOSITORY: canary-checker-ui
           IMAGE_TAG: "v${{ needs.semantic-release.outputs.release-version }}"
           APP_DEPLOYMENT: CANARY_CHECKER
-          WITHOUT_AUTH: 'true'
+          WITHOUT_AUTH: "true"
         run: |
           docker build --build-arg APP_DEPLOYMENT --build-arg WITHOUT_AUTH -t $REGISTRY/$REGISTRY_ALIAS/$REPOSITORY:$IMAGE_TAG .
           docker push $REGISTRY/$REGISTRY_ALIAS/$REPOSITORY:$IMAGE_TAG
@@ -96,8 +96,8 @@ jobs:
           REGISTRY_ALIAS: k4y9r6y5
           REPOSITORY: incident-manager-ui
           IMAGE_TAG: "v${{ needs.semantic-release.outputs.release-version }}"
-          APP_DEPLOYMENT: 'INCIDENT_MANAGER'
-          WITHOUT_AUTH: 'false'
+          APP_DEPLOYMENT: "INCIDENT_MANAGER"
+          WITHOUT_AUTH: "false"
         run: |
           docker build --build-arg APP_DEPLOYMENT --build-arg WITHOUT_AUTH -t $REGISTRY/$REGISTRY_ALIAS/$REPOSITORY:$IMAGE_TAG .
           docker push $REGISTRY/$REGISTRY_ALIAS/$REPOSITORY:$IMAGE_TAG

.prettierrc

@@ -2,5 +2,6 @@
   "semi": true,
   "singleQuote": false,
   "trailingComma": "none",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.storybook/preview-head.html

@@ -1,6 +1,6 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap"
-    rel="stylesheet"
-/>
+  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap"
+  rel="stylesheet"
+/>

development.md

@@ -11,6 +11,7 @@ typescript: {
   check: false,
 }
 ```
+
 With CRA it's more complicated.
 
 ### css prop type
@@ -21,11 +22,10 @@ For type information related to css prop types (see: [issue-comment](https://git
   "jsxImportSource": "@emotion/react",
 ```
 
-
 ## Packages
 
 ### @headlressui/react
 
-We are using incsider (master) version of headlessui/react, for the `by` property on `Combobox`.  Without `by`, selected item logic was difficult to achieve.
+We are using incsider (master) version of headlessui/react, for the `by` property on `Combobox`. Without `by`, selected item logic was difficult to achieve.
 
 Be careful about updating this package.

e2e/.eslintrc.js

@@ -1,33 +1,25 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended"
-    ],
-    "overrides": [
-        {
-            "env": {
-                "node": true
-            },
-            "files": [
-                ".eslintrc.{js,cjs}"
-            ],
-            "parserOptions": {
-                "sourceType": "script"
-            }
-        }
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "@typescript-eslint"
-    ],
-    "rules": {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  overrides: [
+    {
+      env: {
+        node: true
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script"
+      }
     }
-}
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module"
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {}
+};

package.json

@@ -194,7 +194,8 @@
     "postcss": "^8",
     "postcss-loader": "^7.0.1",
     "postcss-nesting": "^12.1.2",
-    "prettier": "^2.3.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "semantic-release": "^22.0.12",
     "source-map-explorer": "^2.5.2",
     "storybook": "^7.6.17",

pages/_app.tsx

@@ -16,7 +16,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     <QueryClientProvider client={queryClient}>
       <div
         id="root"
-        className="flex flex-col w-screen h-screen overflow-auto"
+        className="flex h-screen w-screen flex-col overflow-auto"
         suppressHydrationWarning
       >
         {authProvider === "clerk" ? (

pages/api/[...paths].ts

@@ -79,4 +79,4 @@ export default async function handler(
       ...(isClerkAuth ? clerkBackendPathRewrites : kratosBackendPathRewrites)
     ]
   });
-}
+}