chore(repo): re-enable eslint for @clerk/ui (#9218)

Author: alexcarpenter

.changeset/tall-donuts-repeat.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Use logical CSS properties for the organization members footer and the MFA setup task header, so both lay out correctly in right-to-left locales.

eslint.config.mjs

@@ -323,6 +323,7 @@ export default tseslint.config([
       'custom-rules': {
         rules: {
           'no-global-object': noGlobalObject,
+          'no-navigate-useClerk': noNavigateUseClerk,
           'no-unstable-methods': noUnstableMethods,
           'no-physical-css-properties': noPhysicalCssProperties,
         },
@@ -518,14 +519,6 @@ export default tseslint.config([
   {
     name: 'packages/clerk-js',
     files: ['packages/clerk-js/src/ui/**/*'],
-    plugins: {
-      'custom-rules': {
-        rules: {
-          'no-navigate-useClerk': noNavigateUseClerk,
-          'no-unstable-methods': noUnstableMethods,
-        },
-      },
-    },
     rules: {
       'custom-rules/no-navigate-useClerk': 'error',
       'custom-rules/no-unstable-methods': 'error',
@@ -534,15 +527,23 @@ export default tseslint.config([
   {
     name: 'packages/ui',
     files: ['packages/ui/src/**/*'],
+    // Tests assert on style values they receive; they are not authoring styles.
+    ignores: ['packages/ui/src/**/__tests__/**', 'packages/ui/src/**/*.test.{ts,tsx}'],
     rules: {
       'custom-rules/no-physical-css-properties': 'error',
+      'custom-rules/no-navigate-useClerk': 'error',
+      'custom-rules/no-unstable-methods': 'error',
     },
   },
   {
     name: 'packages/ui/mosaic',
     files: ['packages/ui/src/mosaic/**/*'],
     ignores: ['packages/ui/src/mosaic/utils.ts', 'packages/ui/src/mosaic/__tests__/**'],
     rules: {
+      // Mosaic renders elements through `render={p => <el {...p} />}`, so children and controls sit on
+      // the outer component. Both rules only see the empty inner element and always report.
+      'jsx-a11y/heading-has-content': 'off',
+      'jsx-a11y/label-has-associated-control': 'off',
       'no-restricted-syntax': [
         'error',
         {
@@ -566,6 +567,19 @@ export default tseslint.config([
     files: ['packages/*/src/**/*.test.{ts,tsx}'],
     rules: {
       '@typescript-eslint/unbound-method': 'off',
+      // vitest's `importOriginal<typeof import('...')>()` has no type-import equivalent.
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { prefer: 'type-imports', disallowTypeAnnotations: false, fixStyle: 'separate-type-imports' },
+      ],
+    },
+  },
+  {
+    name: 'packages - vitest type tests',
+    files: ['packages/*/src/**/*.test-d.ts'],
+    rules: {
+      // Type tests bind values only to read their type back off with `typeof`.
+      '@typescript-eslint/no-unused-vars': 'off',
     },
   },
   {

packages/testing/src/playwright/__tests__/setupClerkTestingToken.test.ts

@@ -4,7 +4,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { ERROR_MISSING_FRONTEND_API_URL } from '../../common/errors';
 
 // We need to reset the module-level WeakSet between tests
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 let setupClerkTestingToken: (typeof import('../setupClerkTestingToken'))['setupClerkTestingToken'];
 
 function createMockRoute(

packages/ui/package.json

@@ -84,8 +84,8 @@
     "dev:sandbox:serve": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${UI_PORT:-4011}",
     "format": "node ../../scripts/format-package.mjs",
     "format:check": "node ../../scripts/format-package.mjs --check",
+    "lint": "eslint src",
     "lint:attw": "attw --pack . --exclude-entrypoints themes/shadcn.css --profile esm-only",
-    "lint:disabled": "eslint src",
     "lint:publint": "publint",
     "showerrors": "tsc",
     "test": "vitest run",

packages/ui/src/Components.tsx

@@ -12,14 +12,14 @@ import type {
   EnvironmentResource,
   GoogleOneTapProps,
   OrganizationProfileModalProps,
-  SignInProps,
   SignInModalProps,
-  SignUpProps,
+  SignInProps,
   SignUpModalProps,
+  SignUpProps,
   UserProfileModalProps,
   UserProfileProps,
-  WaitlistProps,
   WaitlistModalProps,
+  WaitlistProps,
 } from '@clerk/shared/types';
 import { createDeferredPromise } from '@clerk/shared/utils';
 import React, { Suspense, useCallback, useRef, useSyncExternalStore } from 'react';

packages/ui/src/common/__tests__/ProviderIcon.test.tsx

@@ -56,7 +56,6 @@ describe('ProviderIcon', () => {
       );
 
       const icon = screen.getByLabelText('Apple icon');
-      const styles = window.getComputedStyle(icon);
 
       // Check that mask-image is applied (via inline styles)
       expect(icon).toHaveStyle({
@@ -225,7 +224,7 @@ describe('ProviderIcon', () => {
           id='google'
           iconUrl={null}
           name='Google'
-          isLoading={true}
+          isLoading
         />,
         { wrapper },
       );
@@ -242,7 +241,7 @@ describe('ProviderIcon', () => {
           id='google'
           iconUrl={null}
           name='Google'
-          isDisabled={true}
+          isDisabled
         />,
         { wrapper },
       );
@@ -261,7 +260,7 @@ describe('ProviderIcon', () => {
           id='google'
           iconUrl='https://example.com/google-icon.svg'
           name='Google'
-          isLoading={true}
+          isLoading
         />,
         { wrapper },
       );
@@ -279,7 +278,7 @@ describe('ProviderIcon', () => {
           id='google'
           iconUrl='https://example.com/google-icon.svg'
           name='Google'
-          isDisabled={true}
+          isDisabled
         />,
         { wrapper },
       );

packages/ui/src/components/APIKeys/__tests__/APIKeyModal.test.tsx

@@ -15,7 +15,7 @@ describe('APIKeyModal modalRoot behavior', () => {
     modalRoot.current = container;
     document.body.appendChild(container);
 
-    const { container: testContainer } = render(
+    render(
       <AppearanceProvider appearanceKey='signIn'>
         <InternalThemeProvider>
           <APIKeyModal
@@ -43,7 +43,7 @@ describe('APIKeyModal modalRoot behavior', () => {
     modalRoot.current = container;
     document.body.appendChild(container);
 
-    const { container: testContainer } = render(
+    render(
       <AppearanceProvider appearanceKey='signIn'>
         <InternalThemeProvider>
           <APIKeyModal
@@ -76,7 +76,7 @@ describe('APIKeyModal modalRoot behavior', () => {
 
     const getContainer = () => container2;
 
-    const { container: testContainer } = render(
+    render(
       <AppearanceProvider appearanceKey='signIn'>
         <InternalThemeProvider>
           <UNSAFE_PortalProvider getContainer={getContainer}>

packages/ui/src/components/AccountCredits/AccountCredits.tsx

@@ -1,4 +1,5 @@
 import { ProfileSection } from '@/ui/elements/Section';
+
 import { useCreditBalance, useSubscriberTypeLocalizationRoot } from '../../contexts';
 import { localizationKeys, Text, useLocalizations } from '../../customizables';
 import { useRouter } from '../../router';

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -4,11 +4,11 @@ import { useMemo, useState } from 'react';
 
 import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
+import { DevModeOverlay } from '@/ui/elements/DevModeNotice';
 import { Drawer } from '@/ui/elements/Drawer';
 import { LineItems } from '@/ui/elements/LineItems';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
-import { DevModeOverlay } from '@/ui/elements/DevModeNotice';
 import { Tooltip } from '@/ui/elements/Tooltip';
 import { toNegativeAmount } from '@/ui/utils/billing';
 import {

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/reducer.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { initialState, isStepReachable, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });