refactor: Make tailwind classes prettier

.pre-commit-config.yaml

@@ -127,10 +127,12 @@ repos:
         name: prettier
         entry: prettier --write
         language: node
-        types_or: [ts, css, html, markdown]
+        types_or: [javascript, jsx, ts, css, html, markdown]
         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/.storybook/main.js

@@ -3,14 +3,14 @@
 
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
     {
-      name: "@storybook/addon-postcss",
+      name: '@storybook/addon-postcss',
       options: {
         postcssLoaderOptions: {
           implementation: require('postcss')
@@ -19,11 +19,11 @@ const config = {
     }
   ],
   framework: {
-    name: "@storybook/react-vite",
-    options: {},
+    name: '@storybook/react-vite',
+    options: {}
   },
   docs: {
-    autodocs: "tag",
-  },
+    autodocs: 'tag'
+  }
 };
 export default config;

frontend/.storybook/preview.js

@@ -1,19 +1,19 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import '../src/index.css'
+import '../src/index.css';
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
+        date: /Date$/i
+      }
+    }
+  }
 };
 
 export default preview;

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/postcss.config.js

@@ -6,6 +6,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    autoprefixer: {}
+  }
+};

frontend/public/static/env.js

@@ -4,6 +4,6 @@
  */
 
 window.env = {
-    ROUTE_PREFIX: "__ROUTE_PREFIX__",
-    API_BASE_URL: "__ROUTE_PREFIX__/api",
+  ROUTE_PREFIX: '__ROUTE_PREFIX__',
+  API_BASE_URL: '__ROUTE_PREFIX__/api'
 };

frontend/src/APIConfig.js

@@ -5,8 +5,8 @@
 
 var API_BASE_URL = window.env.API_BASE_URL;
 var ROUTE_PREFIX = window.env.ROUTE_PREFIX;
-if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
-  ROUTE_PREFIX = "";
+if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
+  ROUTE_PREFIX = '';
   API_BASE_URL = `http://localhost:8000${ROUTE_PREFIX}/api`;
 }
 export { API_BASE_URL, ROUTE_PREFIX };

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">