diff --git a/.github/workflows/update-playwright-expectations.yaml b/.github/workflows/update-playwright-expectations.yaml index cded4e3b1..3dec0546c 100644 --- a/.github/workflows/update-playwright-expectations.yaml +++ b/.github/workflows/update-playwright-expectations.yaml @@ -23,11 +23,16 @@ jobs: steps: - name: Initial Checkout uses: actions/checkout@v5 - - name: Pull Request Checkout + - name: Pull Request Checkout (from comment) run: gh pr checkout ${{ github.event.issue.number }} - if: github.event.issue.pull_request && github.event_name == 'issue_comment' + if: github.event_name == 'issue_comment' env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - name: Pull Request Checkout (from label) + run: | + git fetch origin ${{ github.head_ref }} + git checkout ${{ github.head_ref }} + if: github.event_name == 'pull_request' - name: Setup ComfyUI Server uses: ./.github/actions/setup-comfyui-server - name: Setup Frontend @@ -53,7 +58,15 @@ jobs: git config --global user.name 'github-actions' git config --global user.email 'github-actions@github.com' git add browser_tests - git diff --cached --quiet || git commit -m "[automated] Update test expectations" - git push + if git diff --cached --quiet; then + echo "No changes to commit" + else + git commit -m "[automated] Update test expectations" + if [ "${{ github.event_name }}" = "pull_request" ]; then + git push origin HEAD:${{ github.head_ref }} + else + git push + fi + fi env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/AGENTS.md b/AGENTS.md index 59c9af1cd..0d060af1f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -5,7 +5,7 @@ - Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`. - Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`. - Public assets: `public/`. Build output: `dist/`. -- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.js`, `.prettierrc`. +- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.ts`, `.prettierrc`. ## Build, Test, and Development Commands - `pnpm dev`: Start Vite dev server. diff --git a/CLAUDE.md b/CLAUDE.md index 74e656f00..0b187fbfc 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -126,6 +126,5 @@ const value = api.getServerFeature('config_name', defaultValue) // Get config - NEVER use `--no-verify` flag when committing - NEVER delete or disable tests to make them pass - NEVER circumvent quality checks -- NEVER use `dark:` prefix - always use `dark-theme:` for dark mode styles, for example: `dark-theme:text-white dark-theme:bg-black` -- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `
` - +- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface` +- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `
` diff --git a/browser_tests/tests/minimap.spec.ts b/browser_tests/tests/minimap.spec.ts index df967d911..d1ab05fc5 100644 --- a/browser_tests/tests/minimap.spec.ts +++ b/browser_tests/tests/minimap.spec.ts @@ -66,12 +66,22 @@ test.describe('Minimap', () => { await comfyPage.nextFrame() await expect(minimapContainer).not.toBeVisible() + + // Open zoom controls dropdown again + await zoomControlsButton.click() + await comfyPage.nextFrame() + await expect(toggleButton).toContainText('Show Minimap') await toggleButton.click() await comfyPage.nextFrame() await expect(minimapContainer).toBeVisible() + + // Open zoom controls dropdown again to verify button text + await zoomControlsButton.click() + await comfyPage.nextFrame() + await expect(toggleButton).toContainText('Hide Minimap') }) diff --git a/eslint.config.ts b/eslint.config.ts index 131c63ace..4e19eba2e 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -4,36 +4,67 @@ import pluginI18n from '@intlify/eslint-plugin-vue-i18n' import { importX } from 'eslint-plugin-import-x' import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' import storybook from 'eslint-plugin-storybook' +import tailwind from 'eslint-plugin-tailwindcss' import unusedImports from 'eslint-plugin-unused-imports' import pluginVue from 'eslint-plugin-vue' import { defineConfig } from 'eslint/config' import globals from 'globals' -import tseslint from 'typescript-eslint' +import { + configs as tseslintConfigs, + parser as tseslintParser +} from 'typescript-eslint' import vueParser from 'vue-eslint-parser' const extraFileExtensions = ['.vue'] +const commonGlobals = { + ...globals.browser, + __COMFYUI_FRONTEND_VERSION__: 'readonly' +} as const + +const settings = { + 'import/resolver': { + typescript: true, + node: true + }, + tailwindcss: { + config: `${import.meta.dirname}/packages/design-system/src/css/style.css`, + functions: ['cn', 'clsx', 'tw'] + } +} as const + +const commonParserOptions = { + parser: tseslintParser, + projectService: true, + tsConfigRootDir: import.meta.dirname, + ecmaVersion: 2020, + sourceType: 'module', + extraFileExtensions +} as const + export default defineConfig([ { ignores: [ - 'src/scripts/*', - 'src/extensions/core/*', - 'src/types/vue-shim.d.ts', - 'packages/registry-types/src/comfyRegistryTypes.ts', - 'src/types/generatedManagerTypes.ts', + '.i18nrc.cjs', + 'components.d.ts', + 'lint-staged.config.js', + 'vitest.setup.ts', '**/vite.config.*.timestamp*', - '**/vitest.config.*.timestamp*' + '**/vitest.config.*.timestamp*', + 'packages/registry-types/src/comfyRegistryTypes.ts', + 'src/extensions/core/*', + 'src/scripts/*', + 'src/types/generatedManagerTypes.ts', + 'src/types/vue-shim.d.ts' ] }, { files: ['./**/*.{ts,mts}'], + settings, languageOptions: { - globals: { - ...globals.browser, - __COMFYUI_FRONTEND_VERSION__: 'readonly' - }, + globals: commonGlobals, parserOptions: { - parser: tseslint.parser, + ...commonParserOptions, projectService: { allowDefaultProject: [ 'vite.config.mts', @@ -42,47 +73,26 @@ export default defineConfig([ 'playwright.config.ts', 'playwright.i18n.config.ts' ] - }, - tsConfigRootDir: import.meta.dirname, - ecmaVersion: 2020, - sourceType: 'module', - extraFileExtensions - } - }, - settings: { - 'import/resolver': { - typescript: true, - node: true + } } } }, { files: ['./**/*.vue'], + settings, languageOptions: { - globals: { - ...globals.browser, - __COMFYUI_FRONTEND_VERSION__: 'readonly' - }, + globals: commonGlobals, parser: vueParser, - parserOptions: { - parser: tseslint.parser, - projectService: true, - tsConfigRootDir: import.meta.dirname, - ecmaVersion: 2020, - sourceType: 'module', - extraFileExtensions - } - }, - settings: { - 'import/resolver': { - typescript: true, - node: true - } + parserOptions: commonParserOptions } }, pluginJs.configs.recommended, - // eslint-disable-next-line import-x/no-named-as-default-member - tseslint.configs.recommended, + + tseslintConfigs.recommended, + // Difference in typecheck on CI vs Local + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore Bad types in the plugin + tailwind.configs['flat/recommended'], pluginVue.configs['flat/recommended'], eslintPluginPrettierRecommended, storybook.configs['flat/recommended'], @@ -114,6 +124,7 @@ export default defineConfig([ 'import-x/no-relative-packages': 'error', 'unused-imports/no-unused-imports': 'error', 'no-console': ['error', { allow: ['warn', 'error'] }], + 'tailwindcss/no-custom-classname': 'off', // TODO: fix 'vue/no-v-html': 'off', // Enforce dark-theme: instead of dark: prefix 'vue/no-restricted-class': ['error', '/^dark:/'], diff --git a/package.json b/package.json index 43ce2d1fb..b631ab224 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "@storybook/vue3-vite": "catalog:", "@tailwindcss/vite": "catalog:", "@trivago/prettier-plugin-sort-imports": "catalog:", + "@types/eslint-plugin-tailwindcss": "catalog:", "@types/fs-extra": "catalog:", "@types/jsdom": "catalog:", "@types/node": "catalog:", @@ -73,6 +74,7 @@ "eslint-plugin-import-x": "catalog:", "eslint-plugin-prettier": "catalog:", "eslint-plugin-storybook": "catalog:", + "eslint-plugin-tailwindcss": "catalog:", "eslint-plugin-unused-imports": "catalog:", "eslint-plugin-vue": "catalog:", "fs-extra": "^11.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8bb996c7d..3b362bc15 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -84,6 +84,9 @@ catalogs: '@trivago/prettier-plugin-sort-imports': specifier: ^5.2.0 version: 5.2.2 + '@types/eslint-plugin-tailwindcss': + specifier: ^3.17.0 + version: 3.17.0 '@types/fs-extra': specifier: ^11.0.4 version: 11.0.4 @@ -147,6 +150,9 @@ catalogs: eslint-plugin-storybook: specifier: ^9.1.6 version: 9.1.6 + eslint-plugin-tailwindcss: + specifier: 4.0.0-beta.0 + version: 4.0.0-beta.0 eslint-plugin-unused-imports: specifier: ^4.2.0 version: 4.2.0 @@ -274,6 +280,9 @@ catalogs: specifier: ^3.3.0 version: 3.3.0 +overrides: + '@types/eslint': '-' + importers: .: @@ -489,6 +498,9 @@ importers: '@trivago/prettier-plugin-sort-imports': specifier: 'catalog:' version: 5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.3.2) + '@types/eslint-plugin-tailwindcss': + specifier: 'catalog:' + version: 3.17.0 '@types/fs-extra': specifier: 'catalog:' version: 11.0.4 @@ -537,6 +549,9 @@ importers: eslint-plugin-storybook: specifier: 'catalog:' version: 9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2) + eslint-plugin-tailwindcss: + specifier: 'catalog:' + version: 4.0.0-beta.0(tailwindcss@4.1.12) eslint-plugin-unused-imports: specifier: 'catalog:' version: 4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2)) @@ -2990,6 +3005,9 @@ packages: '@types/diff-match-patch@1.0.36': resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==} + '@types/eslint-plugin-tailwindcss@3.17.0': + resolution: {integrity: sha512-ucQGf2YIdTcndYcxRU3UdZgmhUHsOlbIF4BaRtl0op+7k2JmqM2i3aXZ6XIcfZgVq1ZKov7VM5c/BR81ukmkyg==} + '@types/estree@1.0.5': resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} @@ -4508,7 +4526,7 @@ packages: resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: - '@types/eslint': '>=8.0.0' + '@types/eslint': '*' eslint: '>=8.0.0' eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0' prettier: '>=3.0.0' @@ -4525,6 +4543,12 @@ packages: eslint: '>=8' storybook: ^9.1.6 + eslint-plugin-tailwindcss@4.0.0-beta.0: + resolution: {integrity: sha512-WWCajZgQu38Sd67ZCl2W6i3MRzqB0d+H8s4qV9iB6lBJbsDOIpIlj6R1Fj2FXkoWErbo05pZnZYbCGIU9o/DsA==} + engines: {node: '>=18.12.0'} + peerDependencies: + tailwindcss: ^3.4.0 || ^4.0.0 + eslint-plugin-unused-imports@4.2.0: resolution: {integrity: sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w==} peerDependencies: @@ -6966,6 +6990,11 @@ packages: resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==} engines: {node: '>=10.0.0'} + tailwind-api-utils@1.0.3: + resolution: {integrity: sha512-KpzUHkH1ug1sq4394SLJX38ZtpeTiqQ1RVyFTTSY2XuHsNSTWUkRo108KmyyrMWdDbQrLYkSHaNKj/a3bmA4sQ==} + peerDependencies: + tailwindcss: ^3.3.0 || ^4.0.0 || ^4.0.0-beta + tailwind-merge@2.6.0: resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==} @@ -10336,6 +10365,8 @@ snapshots: '@types/diff-match-patch@1.0.36': {} + '@types/eslint-plugin-tailwindcss@3.17.0': {} + '@types/estree@1.0.5': {} '@types/estree@1.0.8': {} @@ -10748,7 +10779,7 @@ snapshots: '@vue/shared': 3.5.13 estree-walker: 2.0.2 magic-string: 0.30.19 - postcss: 8.5.1 + postcss: 8.5.6 source-map-js: 1.2.1 '@vue/compiler-ssr@3.5.13': @@ -12097,6 +12128,14 @@ snapshots: - supports-color - typescript + eslint-plugin-tailwindcss@4.0.0-beta.0(tailwindcss@4.1.12): + dependencies: + fast-glob: 3.3.3 + postcss: 8.5.6 + synckit: 0.11.11 + tailwind-api-utils: 1.0.3(tailwindcss@4.1.12) + tailwindcss: 4.1.12 + eslint-plugin-unused-imports@4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2)): dependencies: eslint: 9.35.0(jiti@2.4.2) @@ -15115,6 +15154,13 @@ snapshots: string-width: 4.2.3 strip-ansi: 6.0.1 + tailwind-api-utils@1.0.3(tailwindcss@4.1.12): + dependencies: + enhanced-resolve: 5.18.3 + jiti: 2.5.1 + local-pkg: 1.1.2 + tailwindcss: 4.1.12 + tailwind-merge@2.6.0: {} tailwindcss-primeui@0.6.1(tailwindcss@4.1.12): diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 936e0ce8b..f3b1ce376 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -29,6 +29,7 @@ catalog: '@storybook/vue3-vite': ^9.1.1 '@tailwindcss/vite': ^4.1.12 '@trivago/prettier-plugin-sort-imports': ^5.2.0 + '@types/eslint-plugin-tailwindcss': ^3.17.0 '@types/fs-extra': ^11.0.4 '@types/jsdom': ^21.1.7 '@types/node': ^20.14.8 @@ -50,6 +51,7 @@ catalog: eslint-plugin-import-x: ^4.16.1 eslint-plugin-prettier: ^5.5.4 eslint-plugin-storybook: ^9.1.6 + eslint-plugin-tailwindcss: 4.0.0-beta.0 eslint-plugin-unused-imports: ^4.2.0 eslint-plugin-vue: ^10.4.0 firebase: ^11.6.0 @@ -95,6 +97,9 @@ catalog: cleanupUnusedCatalogs: true +overrides: + '@types/eslint': '-' + ignoredBuiltDependencies: - '@firebase/util' - protobufjs diff --git a/src/App.vue b/src/App.vue index 6f6f10a1e..c0c9fdd20 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@ diff --git a/src/components/bottomPanel/BottomPanel.vue b/src/components/bottomPanel/BottomPanel.vue index 0ed71bffa..cffa74f76 100644 --- a/src/components/bottomPanel/BottomPanel.vue +++ b/src/components/bottomPanel/BottomPanel.vue @@ -1,17 +1,17 @@