Storybook (#328)

* feat(docs): add interactive examples and API references for Button, Card, and LoadingFallback components
- Updated dependencies
- Set `retries` to a fixed value of 3 for consistent test retries across environments.
- Increased `timeout` from 60 seconds to 120 seconds to allow more time for tests to complete.
- Reduced `expect` timeout from 10 seconds to 5 seconds for quicker feedback on assertions.

apps/e2e/package.json

@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.55.0",
     "@types/node": "^24.3.0",
     "dotenv": "17.2.1",
     "node-html-parser": "^7.0.1",

apps/e2e/playwright.config.ts

@@ -5,7 +5,8 @@ dotenvConfig();
 dotenvConfig({ path: '.env.local' });
 
 const enableBillingTests = process.env.ENABLE_BILLING_TESTS === 'true';
-const enableTeamAccountTests = (process.env.ENABLE_TEAM_ACCOUNT_TESTS ?? 'true') === 'true';
+const enableTeamAccountTests =
+  (process.env.ENABLE_TEAM_ACCOUNT_TESTS ?? 'true') === 'true';
 
 const testIgnore: string[] = [];
 
@@ -44,7 +45,7 @@ export default defineConfig({
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 3 : 1,
+  retries: 3,
   /* Limit parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
@@ -61,13 +62,13 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-    navigationTimeout: 5000,
+    navigationTimeout: 15_000,
   },
-  // test timeout set to 1 minutes
-  timeout: 60 * 1000,
+  // test timeout set to 2 minutes
+  timeout: 120 * 1000,
   expect: {
-    // expect timeout set to 10 seconds
-    timeout: 10 * 1000,
+    // expect timeout set to 5 seconds
+    timeout: 5 * 1000,
   },
   /* Configure projects for major browsers */
   projects: [

apps/e2e/tests/admin/admin.spec.ts

@@ -113,13 +113,23 @@ test.describe('Admin', () => {
       // Try with invalid confirmation
       await page.fill('[placeholder="Type CONFIRM to confirm"]', 'WRONG');
       await page.getByRole('button', { name: 'Ban User' }).click();
+
       await expect(
         page.getByRole('heading', { name: 'Ban User' }),
       ).toBeVisible(); // Dialog should still be open
 
       // Confirm with correct text
       await page.fill('[placeholder="Type CONFIRM to confirm"]', 'CONFIRM');
-      await page.getByRole('button', { name: 'Ban User' }).click();
+
+      await Promise.all([
+        page.getByRole('button', { name: 'Ban User' }).click(),
+        page.waitForResponse(
+          (response) =>
+            response.url().includes('/admin/accounts') &&
+            response.status() === 200,
+        ),
+      ]);
+
       await expect(page.getByText('Banned')).toBeVisible();
 
       await page.context().clearCookies();
@@ -156,7 +166,15 @@ test.describe('Admin', () => {
       ).toBeVisible();
 
       await page.fill('[placeholder="Type CONFIRM to confirm"]', 'CONFIRM');
-      await page.getByRole('button', { name: 'Reactivate User' }).click();
+
+      await Promise.all([
+        page.getByRole('button', { name: 'Reactivate User' }).click(),
+        page.waitForResponse(
+          (response) =>
+            response.url().includes('/admin/accounts') &&
+            response.status() === 200,
+        ),
+      ]);
 
       // Verify ban badge is removed
       await expect(page.getByText('Banned')).not.toBeVisible();
@@ -192,26 +210,31 @@ test.describe('Admin', () => {
 
     test('delete user flow', async ({ page }) => {
       await page.getByTestId('admin-delete-account-button').click();
+
       await expect(
         page.getByRole('heading', { name: 'Delete User' }),
       ).toBeVisible();
 
       // Try with invalid confirmation
       await page.fill('[placeholder="Type CONFIRM to confirm"]', 'WRONG');
+
       await page.getByRole('button', { name: 'Delete' }).click();
+
       await expect(
         page.getByRole('heading', { name: 'Delete User' }),
       ).toBeVisible(); // Dialog should still be open
 
       // Confirm with correct text
       await page.fill('[placeholder="Type CONFIRM to confirm"]', 'CONFIRM');
+
       await page.getByRole('button', { name: 'Delete' }).click();
 
       // Should redirect to admin dashboard
-      await expect(page).toHaveURL('/admin/accounts');
+      await page.waitForURL('/admin/accounts');
 
       // Log out
       await page.context().clearCookies();
+      await page.waitForURL('/');
 
       // Verify user can't log in
       await page.goto('/auth/sign-in');
@@ -231,7 +254,10 @@ test.describe('Admin', () => {
   });
 
   test.describe('Team Account Management', () => {
-    test.skip(process.env.ENABLE_TEAM_ACCOUNT_TESTS !== 'true', 'Team account tests are disabled');
+    test.skip(
+      process.env.ENABLE_TEAM_ACCOUNT_TESTS !== 'true',
+      'Team account tests are disabled',
+    );
 
     let testUserEmail: string;
     let teamName: string;
@@ -358,6 +384,7 @@ async function createUser(
 async function filterAccounts(page: Page, email: string) {
   await page
     .locator('[data-test="admin-accounts-table-filter-input"]')
+    .first()
     .fill(email);
 
   await page.keyboard.press('Enter');
@@ -366,4 +393,6 @@ async function filterAccounts(page: Page, email: string) {
 
 async function selectAccount(page: Page, email: string) {
   await page.getByRole('link', { name: email.split('@')[0] }).click();
+  await page.waitForURL(new RegExp(`/admin/accounts/[a-z0-9-]+`));
+  await page.waitForTimeout(500);
 }