refactor(Dialog): extract logic into custom hooks for better maintainability

biome.json

@@ -1,4 +1,190 @@
 {
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": true,
+    "useEditorconfig": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 100,
+    "attributePosition": "auto",
+    "bracketSpacing": true,
+    "ignore": [
+      "**/package.json",
+      "**/yarn.lock",
+      "coverage/**",
+      "**/coverage/**",
+      "**/build",
+      "**/dist",
+      "**/node_modules",
+      "**/vendor-js/**",
+      "**/*-css.ts",
+      "**/*-svg.ts"
+    ]
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": false,
+      "a11y": {
+        "noBlankTarget": "error"
+      },
+      "complexity": {
+        "noBannedTypes": "error",
+        "noExtraBooleanCast": "error",
+        "noMultipleSpacesInRegularExpressionLiterals": "error",
+        "noUselessCatch": "error",
+        "noUselessConstructor": "off",
+        "noUselessRename": "warn",
+        "noUselessStringConcat": "warn",
+        "noUselessTernary": "error",
+        "noUselessThisAlias": "error",
+        "noUselessTypeConstraint": "error",
+        "noUselessUndefinedInitialization": "error",
+        "noWith": "error",
+        "useArrowFunction": "warn"
+      },
+      "correctness": {
+        "noConstAssign": "error",
+        "noConstantCondition": "error",
+        "noEmptyCharacterClassInRegex": "error",
+        "noEmptyPattern": "off",
+        "noGlobalObjectCalls": "error",
+        "noInnerDeclarations": "error",
+        "noInvalidConstructorSuper": "error",
+        "noNewSymbol": "error",
+        "noNonoctalDecimalEscape": "error",
+        "noPrecisionLoss": "error",
+        "noSelfAssign": "error",
+        "noSetterReturn": "error",
+        "noSwitchDeclarations": "error",
+        "noUndeclaredVariables": "error",
+        "noUnreachable": "error",
+        "noUnreachableSuper": "error",
+        "noUnsafeFinally": "error",
+        "noUnsafeOptionalChaining": "error",
+        "noUnusedImports": "error",
+        "noUnusedLabels": "error",
+        "noUnusedVariables": "error",
+        "useArrayLiterals": "off",
+        "useExhaustiveDependencies": "warn",
+        "useHookAtTopLevel": "error",
+        "useIsNan": "error",
+        "useJsxKeyInIterable": "error",
+        "useValidForDirection": "error",
+        "useYield": "error"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "warn"
+      },
+      "style": {
+        "noArguments": "warn",
+        "noDoneCallback": "error",
+        "noNamespace": "error",
+        "noRestrictedGlobals": {
+          "level": "error",
+          "options": {
+            "deniedGlobals": ["parseInt"]
+          }
+        },
+        "noUselessElse": "warn",
+        "noVar": "warn",
+        "useAsConstAssertion": "error",
+        "useBlockStatements": "off",
+        "useCollapsedElseIf": "error",
+        "useConsistentBuiltinInstantiation": "error",
+        "useTemplate": "warn"
+      },
+      "suspicious": {
+        "noAssignInExpressions": "error",
+        "noAsyncPromiseExecutor": "error",
+        "noCatchAssign": "error",
+        "noClassAssign": "error",
+        "noCommentText": "error",
+        "noCompareNegZero": "error",
+        "noConsole": {
+          "level": "error",
+          "options": {
+            "allow": ["warn", "error", "info"]
+          }
+        },
+        "noControlCharactersInRegex": "error",
+        "noDebugger": "error",
+        "noDuplicateCase": "error",
+        "noDuplicateClassMembers": "error",
+        "noDuplicateJsxProps": "error",
+        "noDuplicateObjectKeys": "error",
+        "noDuplicateParameters": "error",
+        "noEmptyBlockStatements": "off",
+        "noExplicitAny": "warn",
+        "noExportsInTest": "error",
+        "noExtraNonNullAssertion": "error",
+        "noFallthroughSwitchClause": "error",
+        "noFocusedTests": "error",
+        "noFunctionAssign": "error",
+        "noGlobalAssign": "error",
+        "noImportAssign": "error",
+        "noMisleadingCharacterClass": "error",
+        "noMisleadingInstantiator": "error",
+        "noMisplacedAssertion": "error",
+        "noPrototypeBuiltins": "error",
+        "noRedeclare": "error",
+        "noShadowRestrictedNames": "error",
+        "noSkippedTests": "warn",
+        "noSparseArray": "error",
+        "noUnsafeDeclarationMerging": "error",
+        "noUnsafeNegation": "error",
+        "useGetterReturn": "error",
+        "useValidTypeof": "error"
+      }
+    },
+    "ignore": ["**/*.md", "**/build", "**/dist", "**/node_modules", "**/vendor-js/**", "**/*.json"]
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "es5",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto",
+      "bracketSpacing": true
+    },
+    "jsxRuntime": "transparent",
+    "globals": ["global", "browser", "expect"]
+  },
+  "overrides": [
+    {
+      "include": ["**/*.test.*"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noExplicitAny": "off"
+          },
+          "correctness": {
+            "noUndeclaredVariables": "off"
+          }
+        }
+      }
+    }
+  ]
+}
+=======
 	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
 	"vcs": {
 		"enabled": true,

examples/testapp/.gitignore

@@ -0,0 +1 @@
+src/components/test-dialog.tsx

packages/account-sdk/src/ui/Dialog/Dialog.test.tsx

@@ -5,6 +5,37 @@ import { vi } from 'vitest';
 
 import { DialogContainer, DialogInstance, DialogInstanceProps } from './Dialog.js';
 
+// Mock des hooks
+vi.mock('../hooks/index.js', () => ({
+  usePhonePortrait: vi.fn(() => false),
+  useDragToDismiss: vi.fn(() => ({
+    dragY: 0,
+    isDragging: false,
+    handlers: {
+      onTouchStart: vi.fn(),
+      onTouchMove: vi.fn(),
+      onTouchEnd: vi.fn(),
+    },
+  })),
+  useUsername: vi.fn(() => ({
+    isLoading: false,
+    username: 'testuser.eth',
+  })),
+}));
+
+// Mock du store et getDisplayableUsername
+vi.mock(':store/store.js', () => ({
+  store: {
+    account: {
+      get: vi.fn(() => ({ accounts: ['0x123'] })),
+    },
+  },
+}));
+
+vi.mock(':core/username/getDisplayableUsername.js', () => ({
+  getDisplayableUsername: vi.fn(() => Promise.resolve('testuser.eth')),
+}));
+
 const renderDialogContainer = (props?: Partial<DialogInstanceProps>) =>
   render(
     <DialogContainer>
@@ -16,6 +47,8 @@ describe('DialogContainer', () => {
   beforeEach(() => {
     vi.useFakeTimers();
     vi.spyOn(window, 'setTimeout');
+    // Reset mocks
+    vi.clearAllMocks();
   });
 
   afterEach(() => {
@@ -53,6 +86,7 @@ describe('DialogContainer', () => {
 
     const button = screen.getByText('Try again');
     expect(button).toBeInTheDocument();
+    expect(button.tagName).toBe('BUTTON'); // Vérifie que c'est un bouton sémantique
 
     fireEvent.click(button);
     expect(onClick).toHaveBeenCalledTimes(1);
@@ -72,6 +106,7 @@ describe('DialogContainer', () => {
 
     const button = screen.getByText('Cancel');
     expect(button).toBeInTheDocument();
+    expect(button.tagName).toBe('BUTTON');
 
     fireEvent.click(button);
     expect(onClick).toHaveBeenCalledTimes(1);
@@ -84,8 +119,11 @@ describe('DialogContainer', () => {
     const closeButton = document.getElementsByClassName(
       '-base-acc-sdk-dialog-instance-header-close'
     )[0];
-    fireEvent.click(closeButton);
 
+    expect(closeButton.tagName).toBe('BUTTON'); // Vérifie que c'est un bouton
+    expect(closeButton).toHaveAttribute('aria-label', 'Close dialog'); // Accessibilité
+
+    fireEvent.click(closeButton);
     expect(handleClose).toHaveBeenCalledTimes(1);
   });
 
@@ -111,4 +149,91 @@ describe('DialogContainer', () => {
     expect(screen.getByText('Primary')).toBeInTheDocument();
     expect(screen.getByText('Secondary')).toBeInTheDocument();
   });
+
+  test('displays username when loaded', () => {
+    renderDialogContainer();
+
+    // Le mock retourne 'testuser.eth'
+    expect(screen.getByText('Signed in as testuser.eth')).toBeInTheDocument();
+  });
+
+  test('displays default title when no username', async () => {
+    // Mock pour retourner pas d'username
+    const { useUsername } = vi.mocked(await import('../hooks/index.js'));
+    useUsername.mockReturnValue({
+      isLoading: false,
+      username: null,
+    });
+
+    renderDialogContainer();
+
+    expect(screen.getByText('Base Account')).toBeInTheDocument();
+  });
+
+  test('uses drag handlers from hook', async () => {
+    const mockHandlers = {
+      onTouchStart: vi.fn(),
+      onTouchMove: vi.fn(),
+      onTouchEnd: vi.fn(),
+    };
+
+    const { useDragToDismiss } = vi.mocked(await import('../hooks/index.js'));
+    useDragToDismiss.mockReturnValue({
+      dragY: 50,
+      isDragging: true,
+      handlers: mockHandlers,
+    });
+
+    renderDialogContainer();
+
+    const backdrop = document.getElementsByClassName('-base-acc-sdk-dialog-backdrop')[0];
+
+    // Vérifie que les handlers sont attachés
+    fireEvent.touchStart(backdrop);
+    fireEvent.touchMove(backdrop);
+    fireEvent.touchEnd(backdrop);
+
+    expect(mockHandlers.onTouchStart).toHaveBeenCalled();
+    expect(mockHandlers.onTouchMove).toHaveBeenCalled();
+    expect(mockHandlers.onTouchEnd).toHaveBeenCalled();
+  });
+
+  test('applies drag transform from hook', async () => {
+    const { useDragToDismiss } = vi.mocked(await import('../hooks/index.js'));
+    useDragToDismiss.mockReturnValue({
+      dragY: 100,
+      isDragging: true,
+      handlers: {
+        onTouchStart: vi.fn(),
+        onTouchMove: vi.fn(),
+        onTouchEnd: vi.fn(),
+      },
+    });
+
+    renderDialogContainer();
+
+    const dialog = document.getElementsByClassName('-base-acc-sdk-dialog')[0];
+    expect(dialog).toHaveStyle('transform: translateY(100px)');
+    expect(dialog).toHaveStyle('transition: none');
+  });
+
+  test('shows handle bar on phone portrait', async () => {
+    const { usePhonePortrait } = vi.mocked(await import('../hooks/index.js'));
+    usePhonePortrait.mockReturnValue(true);
+
+    renderDialogContainer();
+
+    const handleBar = document.getElementsByClassName('-base-acc-sdk-dialog-handle-bar')[0];
+    expect(handleBar).toBeInTheDocument();
+  });
+
+  test('hides handle bar on desktop', async () => {
+    const { usePhonePortrait } = vi.mocked(await import('../hooks/index.js'));
+    usePhonePortrait.mockReturnValue(false);
+
+    renderDialogContainer();
+
+    const handleBar = document.getElementsByClassName('-base-acc-sdk-dialog-handle-bar')[0];
+    expect(handleBar).toBeUndefined();
+  });
 });