refactor: Make tailwind classes prettier

.pre-commit-config.yaml

@@ -131,6 +131,8 @@ repos:
         additional_dependencies:
           - 'prettier@^3.3.3'
           - 'prettier-plugin-tailwindcss@^0.6.6'
+          - 'prettier-plugin-classnames@^0.7.2'
+          - 'prettier-plugin-merge@^0.7.1'
           - 'tailwind-scrollbar@^3.1.0'
   - repo: https://github.com/pre-commit/mirrors-eslint
     rev: v9.10.0
@@ -147,3 +149,6 @@ repos:
           - 'eslint-plugin-react@^7.34.1'
           - 'eslint-plugin-react-hooks@^4.6.2'
           - 'eslint-plugin-react-refresh@^0.4.5'
+        args: ['--fix']
+        types: []
+        files: '^frontend/.*\.(js|jsx)$'

frontend/.eslintrc.cjs

@@ -22,6 +22,7 @@ module.exports = {
       'warn',
       { allowConstantExport: true }
     ],
-    'max-len': ['error', { code: 79 }]
+    'max-len': ['error', { code: 100 }],
+    'react/no-unescaped-entities': 'off'
   }
 };

frontend/.prettierrc.js

@@ -4,11 +4,16 @@
  */
 
 module.exports = {
-  plugins: [require.resolve('prettier-plugin-tailwindcss')],
+  plugins: [
+    require.resolve('prettier-plugin-tailwindcss'),
+    require.resolve('prettier-plugin-classnames'),
+    require.resolve('prettier-plugin-merge')
+  ],
   semi: true,
   tabWidth: 2,
   printWidth: 79,
   singleQuote: true,
   trailingComma: 'none',
-  bracketSameLine: true
+  bracketSameLine: true,
+  endingPosition: 'absolute-with-indent'
 };

frontend/package.json

@@ -47,6 +47,8 @@
     "globals": "^15.9.0",
     "postcss": "^8.4.45",
     "prettier": "^3.3.3",
+    "prettier-plugin-classnames": "^0.7.2",
+    "prettier-plugin-merge": "^0.7.1",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "prop-types": "^15.8.1",
     "react-router-dom": "^6.26.2",

frontend/src/components/Badge.jsx

@@ -1,18 +1,22 @@
-
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
 const color_classes = {
-    "default": "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
-    "danger": "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
-    "success": "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
-    "warning": "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300"
-}
+  default: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+  danger: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
+  success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+  warning:
+    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300'
+};
 /*
-* provides a badge that may have different colors
-*/
-export const Badge = ({ children, color="default" }) => (
-    <div className={"text-xs inline-block font-medium me-2 px-2.5 py-1 rounded-full " + color_classes[color] }>
-        {children}
-    </div>
+ * provides a badge that may have different colors
+ */
+export const Badge = ({ children, color = 'default' }) => (
+  <div
+    className={
+      'me-2 inline-block rounded-full px-2.5 py-1 text-xs font-medium ' +
+      color_classes[color]
+    }>
+    {children}
+  </div>
 );

frontend/src/components/Breadcrumbs.jsx

@@ -67,9 +67,7 @@ export const Breadcrumbs = () => {
   return (
     <nav
       aria-label="breadcrumb"
-      className={
-        'flex items-center font-medium text-black dark:text-gray-200'
-      }>
+      className="flex items-center font-medium text-black dark:text-gray-200">
       <ol className="flex items-center">
         <li className="hidden items-center truncate lg:block">
           <Link to={'/'}>{breadcrumbLabels['/']}</Link>
@@ -86,19 +84,16 @@ export const Breadcrumbs = () => {
               {!last && (
                 <Link
                   to={to}
-                  className={
-                    'hidden max-w-64 truncate whitespace-nowrap md:block'
-                  }>
+                  className="hidden max-w-64 truncate whitespace-nowrap
+                    md:block">
                   {label}
                 </Link>
               )}
               {last && (
                 <span
-                  className={
-                    'hidden w-full truncate whitespace-nowrap ' +
-                    'text-custom-blue custom-phone-width:block ' +
-                    'custom-phone-width:max-w-60 md:max-w-full'
-                  }
+                  className="hidden w-full truncate whitespace-nowrap
+                    text-custom-blue custom-phone-width:block
+                    custom-phone-width:max-w-60 md:max-w-full"
                   title={label}>
                   {label}
                 </span>

frontend/src/components/Button.jsx

@@ -6,13 +6,10 @@ export const Button = ({ children, ...props }) => {
     <a
       href="#"
       {...props}
-      className={
-        'print:hidden rounded-md mx-1 bg-custom-blue px-2.5 py-1.5 ' +
-        'text-sm font-semibold text-white shadow-sm dark:shadow-dark ' +
-        'hover:bg-custom-blue-hover hover:text-gray-50 ' +
-        'focus-visible:outline focus-visible:outline-2 ' +
-        'focus-visible:outline-offset-2'
-      }>
+      className="mx-1 rounded-md bg-custom-blue px-2.5 py-1.5 text-sm
+        font-semibold text-white shadow-sm hover:bg-custom-blue-hover
+        hover:text-gray-50 focus-visible:outline focus-visible:outline-2
+        focus-visible:outline-offset-2 dark:shadow-dark print:hidden">
       {children}
     </a>
   );

frontend/src/components/Card.jsx

@@ -4,11 +4,9 @@
 export const Card = ({ children, onClick }) => (
   <div
     onClick={onClick}
-    className={
-      'm-2 max-w-sm cursor-pointer rounded-lg border border-gray-200 ' +
-      'bg-white shadow-md hover:bg-gray-100 dark:border-gray-700' +
-      'dark:bg-gray-800 dark:shadow-dark dark:hover:bg-gray-700 '
-    }>
+    className="m-2 max-w-sm cursor-pointer rounded-lg border border-gray-200
+      bg-white shadow-md hover:bg-gray-100 dark:border-gray-700
+      dark:bg-gray-800 dark:shadow-dark dark:hover:bg-gray-700">
     {children}
   </div>
 );

frontend/src/components/DiffExplorer.jsx

@@ -1,7 +1,7 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   CirclePlus,
   CircleX,
@@ -123,13 +123,15 @@ export const DiffExplorer = ({
             )}
             <span
               onClick={() => handleLeafClick(node)}
-              className={`flex-1 cursor-pointer truncate ${node.change === 'deleted' ? 'pointer-events-none' : ''}`}
+              className={`flex-1 cursor-pointer truncate
+                ${node.change === 'deleted' ? 'pointer-events-none' : ''}`}
               title={node.display_name}>
               {node.display_name}
             </span>
           </div>
           <span
-            className={`flex h-6 w-6 items-center justify-center rounded-full ${getNodeClass(node.change, node.attributes)}`}>
+            className={`flex h-6 w-6 items-center justify-center rounded-full
+              ${getNodeClass(node.change, node.attributes)}`}>
             {getIcon(node.change, node.attributes)}
           </span>
         </div>

frontend/src/components/DiffView.jsx

@@ -87,18 +87,20 @@ export const DiffView = ({ objectID, endpoint }) => {
   }, [objectID]);
 
   return (
-    <div className="flex min-h-screen items-center justify-center overflow-x-hidden">
+    <div
+      className="flex min-h-screen items-center justify-center
+        overflow-x-hidden">
       {isLoading ? (
         <Spinner />
       ) : (
         <div
-          className="html-content mb-4 rounded-lg border-4 border-transparent
-            bg-gray-100 p-8 text-gray-700 shadow-lg scrollbar
-            scrollbar-track-gray-200 scrollbar-thumb-gray-400
+          className="html-content scrollbar scrollbar-track-gray-200
+            scrollbar-thumb-gray-400 dark:scrollbar-track-custom-dark-3
+            dark:scrollbar-thumb-slate-600 mb-4 rounded-lg border-4
+            border-transparent bg-gray-100 p-8 text-gray-700 shadow-lg
             hover:border-gray-300 hover:shadow-md dark:bg-custom-dark-2
-            dark:text-gray-100 dark:shadow-dark
-            dark:scrollbar-track-custom-dark-3 dark:scrollbar-thumb-slate-600
-            md:w-[210mm] print:m-0 print:bg-transparent print:p-0 print:shadow-none">
+            dark:text-gray-100 dark:shadow-dark md:w-[210mm] print:m-0
+            print:bg-transparent print:p-0 print:shadow-none">
           {details.map((item, idx) => {
             if (item.type === 'SVGDisplay') {
               return <SVGDisplay key={idx} content={item.content} />;

frontend/src/components/Header.jsx

@@ -9,11 +9,9 @@ import { HomeIcon } from './HomeIcon';
 export const Header = () => {
   return (
     <header
-      className={
-        'fixed left-0 top-0 z-50 w-screen items-center justify-between ' +
-        'rounded-b-lg bg-gray-100 p-6 text-lg text-white shadow-lg ' +
-        'dark:bg-custom-dark-2 dark:shadow-dark print:hidden'
-      }>
+      className="fixed left-0 top-0 z-50 w-screen items-center justify-between
+        rounded-b-lg bg-gray-100 p-6 text-lg text-white shadow-lg
+        dark:bg-custom-dark-2 dark:shadow-dark print:hidden">
       {' '}
       <div className="flex w-full items-center justify-between">
         <div className="flex flex-1">

frontend/src/components/HomeIcon.jsx

@@ -1,8 +1,8 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { Home } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Home } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 export const HomeIcon = () => {
   return (

frontend/src/components/InstanceView.jsx

@@ -70,28 +70,24 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
     <>
       <div
         ref={contentRef}
-        className={`
-        html-content mb-4 rounded-lg border-4 border-transparent
-        bg-gray-100 p-8 text-gray-700 shadow-lg scrollbar
-        scrollbar-track-gray-200 scrollbar-thumb-gray-400
-        hover:border-gray-300 hover:shadow-md dark:bg-custom-dark-2
-        dark:text-gray-100  dark:shadow-dark
-        dark:scrollbar-track-custom-dark-3 dark:scrollbar-thumb-slate-600
-        md:w-[210mm] print:m-0 print:bg-transparent print:p-0 print:shadow-none
-      `}
+        className="html-content scrollbar scrollbar-track-gray-200
+          scrollbar-thumb-gray-400 dark:scrollbar-track-custom-dark-3
+          dark:scrollbar-thumb-slate-600 mb-4 rounded-lg border-4
+          border-transparent bg-gray-100 p-8 text-gray-700 shadow-lg
+          hover:border-gray-300 hover:shadow-md dark:bg-custom-dark-2
+          dark:text-gray-100 dark:shadow-dark md:w-[210mm] print:m-0
+          print:bg-transparent print:p-0 print:shadow-none"
         onMouseEnter={() => setIsHovering(true)}
         onMouseLeave={() => setIsHovering(false)}>
         {isHovering && (
           <div className="fixed hidden md:-ml-14 md:-mt-6 md:block">
             <div
               onClick={() => window.print()}
-              className={`
-              flex cursor-pointer items-center justify-center
-              rounded-full bg-custom-blue p-2 text-white
-              transition-colors duration-700 ease-in-out
-              hover:bg-custom-dark-4 dark:bg-custom-blue
-              dark:text-gray-100 dark:hover:bg-custom-light
-            `}>
+              className="flex cursor-pointer items-center justify-center
+                rounded-full bg-custom-blue p-2 text-white transition-colors
+                duration-700 ease-in-out hover:bg-custom-dark-4
+                dark:bg-custom-blue dark:text-gray-100
+                dark:hover:bg-custom-light">
               <Printer></Printer>
             </div>
           </div>

frontend/src/components/Lightbox.jsx

@@ -59,10 +59,8 @@ export const Lightbox = ({ onClose, imageSource }) => {
       <div className="z-50 flex flex-col items-center justify-center">
         <div
           id="control-bar"
-          className={`
-            fixed top-0 z-50 flex w-screen justify-center bg-black py-4
-             print:hidden
-          `}>
+          className="fixed top-0 z-50 flex w-screen justify-center bg-black
+            py-4 print:hidden">
           <LightboxButton onClick={() => window.print()} className="mr-4">
             <Printer />
           </LightboxButton>
@@ -78,10 +76,8 @@ export const Lightbox = ({ onClose, imageSource }) => {
                   dangerouslySetInnerHTML={{
                     __html: setHeightAndWeightOfSVG(imageSource)
                   }}
-                  className={
-                    'select-text overflow-visible ' +
-                    (isClicked ? 'cursor-grabbing' : 'cursor-grab')
-                  }
+                  className={`select-text overflow-visible
+                  ${isClicked ? 'cursor-grabbing' : 'cursor-grab'}`}
                   onMouseDown={() => setIsClicked(true)}></div>
               </TransformComponent>
             </TransformWrapper>

frontend/src/components/LightboxButton.jsx

@@ -5,9 +5,9 @@ export const LightboxButton = ({ onClick, children, className = '' }) => {
   return (
     <div
       onClick={onClick}
-      className={`flex cursor-pointer items-center justify-center
-    rounded-full p-2 text-white transition-colors duration-700
-    ease-in-out hover:bg-custom-dark-4 ${className}`}>
+      className={`flex cursor-pointer items-center justify-center rounded-full
+        p-2 text-white transition-colors duration-700 ease-in-out
+        hover:bg-custom-dark-4 ${className}`}>
       {children}
     </div>
   );