diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index e892cd5..71e4354 100644 --- a/.pre-commit-config.yaml +++ b/.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)$' diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs index 71ff1a6..dd09ade 100644 --- a/frontend/.eslintrc.cjs +++ b/frontend/.eslintrc.cjs @@ -13,7 +13,11 @@ module.exports = { ], ignorePatterns: ['dist', '.eslintrc.cjs'], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, - settings: { react: { version: '18.2' } }, + settings: { + react: { + version: '18.2' + } + }, plugins: ['react-refresh'], rules: { 'react/jsx-no-target-blank': 'off', @@ -22,6 +26,6 @@ module.exports = { 'warn', { allowConstantExport: true } ], - 'max-len': ['error', { code: 79 }] + 'max-len': ['error', { code: 100, ignoreUrls: true, ignoreStrings: true }] } }; diff --git a/frontend/.prettierrc.js b/frontend/.prettierrc.js index d17e3d4..2947e97 100644 --- a/frontend/.prettierrc.js +++ b/frontend/.prettierrc.js @@ -4,11 +4,18 @@ */ 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, + endOfLine: 'lf', + useTabs: false, + endingPosition: 'absolute-with-indent' }; diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js index b11f63a..14e108f 100644 --- a/frontend/.storybook/main.js +++ b/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; diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js index b27ad0f..8c248a6 100644 --- a/frontend/.storybook/preview.js +++ b/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; diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 380544c..76ab84b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -43,6 +43,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", @@ -6048,6 +6050,15 @@ "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==" }, + "node_modules/diff": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz", + "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==", + "dev": true, + "engines": { + "node": ">=0.3.1" + } + }, "node_modules/diff-sequences": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz", @@ -10308,6 +10319,43 @@ "node": ">=6.0.0" } }, + "node_modules/prettier-plugin-classnames": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/prettier-plugin-classnames/-/prettier-plugin-classnames-0.7.2.tgz", + "integrity": "sha512-rocYqVSWV/YSJE+TA7b1IgYY9/I4bx0lxJjE5Iwv/kavNNEYhKh7Gl1+MQARQYgPisGMd5DU8Uj6ZEVX0KmTTA==", + "dev": true, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "prettier": "^2 || ^3", + "prettier-plugin-astro": "*", + "prettier-plugin-svelte": "*" + }, + "peerDependenciesMeta": { + "prettier-plugin-astro": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + } + } + }, + "node_modules/prettier-plugin-merge": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/prettier-plugin-merge/-/prettier-plugin-merge-0.7.1.tgz", + "integrity": "sha512-R3dSlv3kAlScjd/liWjTkGHcUrE4MBhPKKBxVOvHK7+FY2P5SEmLarZiD11VUEuaMRK0L7zqIurX6JcRYS9Y5Q==", + "dev": true, + "dependencies": { + "diff": "5.1.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "prettier": "^2 || ^3" + } + }, "node_modules/prettier-plugin-tailwindcss": { "version": "0.6.6", "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7f9e643..cf9ecee 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,7 +10,7 @@ "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "lint:fix": "eslint . --fix", - "format": "prettier --write ./**/*.{js,jsx,ts,tsx,css,md,json} --config ./.prettierrc.json" + "format": "prettier --write ./**/*.{js,jsx,ts,tsx,css,md,json} --config ./.prettierrc.js" }, "dependencies": { "@icons-pack/react-simple-icons": "^10.0.0", @@ -40,7 +40,6 @@ "dompurify": "^3.1.6", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.35.2", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.11", @@ -48,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", diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index f139503..61dd434 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -6,6 +6,6 @@ module.exports = { plugins: { tailwindcss: {}, - autoprefixer: {}, - }, -} + autoprefixer: {} + } +}; diff --git a/frontend/public/static/env.js b/frontend/public/static/env.js index 83ba5c4..1f83af3 100644 --- a/frontend/public/static/env.js +++ b/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' }; diff --git a/frontend/src/APIConfig.js b/frontend/src/APIConfig.js index b0b75f1..422211d 100644 --- a/frontend/src/APIConfig.js +++ b/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 }; diff --git a/frontend/src/components/AppInfo.jsx b/frontend/src/components/AppInfo.jsx index 0004e08..8b69f11 100644 --- a/frontend/src/components/AppInfo.jsx +++ b/frontend/src/components/AppInfo.jsx @@ -26,7 +26,9 @@ export const AppInfo = () => { className="flex items-center space-x-2 hover:underline" target="_blank"> Contribute on GitHub -
+
diff --git a/frontend/src/components/Badge.jsx b/frontend/src/components/Badge.jsx index a24b443..dd6b12c 100644 --- a/frontend/src/components/Badge.jsx +++ b/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" }) => ( -
- {children} -
+ * provides a badge that may have different colors + */ +export const Badge = ({ children, color = 'default' }) => ( +
+ {children} +
); diff --git a/frontend/src/components/Breadcrumbs.jsx b/frontend/src/components/Breadcrumbs.jsx index dafe0f8..d2805a6 100644 --- a/frontend/src/components/Breadcrumbs.jsx +++ b/frontend/src/components/Breadcrumbs.jsx @@ -67,9 +67,7 @@ export const Breadcrumbs = () => { return (
+ className={`flex h-6 w-6 items-center justify-center rounded-full + ${getNodeClass(node.change, node.attributes)}`}> {getIcon(node.change, node.attributes)} diff --git a/frontend/src/components/DiffView.jsx b/frontend/src/components/DiffView.jsx index f75580e..b6b6f77 100644 --- a/frontend/src/components/DiffView.jsx +++ b/frontend/src/components/DiffView.jsx @@ -87,18 +87,20 @@ export const DiffView = ({ objectID, endpoint }) => { }, [objectID]); return ( -
+
{isLoading ? ( ) : (
+ 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 ; diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx index 518914e..750f92d 100644 --- a/frontend/src/components/Header.jsx +++ b/frontend/src/components/Header.jsx @@ -9,11 +9,9 @@ import { HomeIcon } from './HomeIcon'; export const Header = () => { return (
+ 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"> {' '}
diff --git a/frontend/src/components/HomeIcon.jsx b/frontend/src/components/HomeIcon.jsx index 86ec315..4f1ae5a 100644 --- a/frontend/src/components/HomeIcon.jsx +++ b/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 ( diff --git a/frontend/src/components/InstanceView.jsx b/frontend/src/components/InstanceView.jsx index 7c291d3..2114de7 100644 --- a/frontend/src/components/InstanceView.jsx +++ b/frontend/src/components/InstanceView.jsx @@ -70,28 +70,24 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => { <>
setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}> {isHovering && (
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">
diff --git a/frontend/src/components/Lightbox.jsx b/frontend/src/components/Lightbox.jsx index 684e175..dce6dfb 100644 --- a/frontend/src/components/Lightbox.jsx +++ b/frontend/src/components/Lightbox.jsx @@ -59,10 +59,8 @@ export const Lightbox = ({ onClose, imageSource }) => {
+ className="fixed top-0 z-50 flex w-screen justify-center bg-black + py-4 print:hidden"> window.print()} className="mr-4"> @@ -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)}>
diff --git a/frontend/src/components/LightboxButton.jsx b/frontend/src/components/LightboxButton.jsx index 5cfbf62..097db6b 100644 --- a/frontend/src/components/LightboxButton.jsx +++ b/frontend/src/components/LightboxButton.jsx @@ -5,9 +5,9 @@ export const LightboxButton = ({ onClick, children, className = '' }) => { return (
+ 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}
); diff --git a/frontend/src/components/ModelDiff.jsx b/frontend/src/components/ModelDiff.jsx index 5e9da4c..0c086a9 100644 --- a/frontend/src/components/ModelDiff.jsx +++ b/frontend/src/components/ModelDiff.jsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { API_BASE_URL, ROUTE_PREFIX } from '../APIConfig'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { Spinner } from './Spinner'; export const ModelDiff = ({ onRefetch, hasDiffed }) => { @@ -86,7 +86,9 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => { setCommitDetails(data); const options = data.map((commit) => ({ value: JSON.stringify(commit), - label: `${commit.hash.substring(0, 7)} ${commit.tag ? `(${commit.tag})` : ''} - ${commit.subject} - Created on ${commit.date.substring(0, 10)}` + label: `${commit.hash.substring(0, 7)} ${ + commit.tag ? `(${commit.tag})` : '' + } - ${commit.subject} - Created on ${commit.date.substring(0, 10)}` })); setSelectionOptions(options); @@ -107,7 +109,9 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => { return (
e.stopPropagation()}>
@@ -134,15 +141,12 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {

Cannot generate model diff: {error}

-

- Select 'Deep clone' before running the session or run - model within git repo. -

) : ( <> @@ -169,7 +173,8 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {

{commitDetails[0].description.includes('\n') && (
{ placeholder="Search..." value={searchTerm} onChange={handleSearchChange} - className="mx-auto mb-2 w-full rounded border-2 border-transparent - bg-custom-light p-2 text-gray-700 shadow-sm focus:border-gray-400 - focus:outline-none dark:border-gray-500 dark:bg-custom-dark-3 - dark:text-gray-100 dark:focus:border-custom-dark-1" + className="mx-auto mb-2 w-full rounded border-2 + border-transparent bg-custom-light p-2 text-gray-700 shadow-sm + focus:border-gray-400 focus:outline-none dark:border-gray-500 + dark:bg-custom-dark-3 dark:text-gray-100 + dark:focus:border-custom-dark-1" />