bitroll-team · PedroChaparro · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 23, 2023
diff --git a/README.md b/README.md
@@ -29,3 +29,4 @@ Note that this template is meant to be customized. Here are some things you migh
 - [ ] The favicons in the [`public/icons`](./public/icons/) folder. You can use [this generator](https://realfavicongenerator.net/) to generate them from an image.
 - [ ] The github username and email in the [`integration.yaml`](./.github/workflows/integration.yaml) file.
 - [ ] The environment variables in the [`Dockerfile`](./Dockerfile) to match your production environment. Note that this is needed because, as React is a client-side framework, the environment variables are embedded in the build.
+- [ ] The [`shadcn/ui`](https://ui.shadcn.com/) theme. As shadcn/ui is a customizable library, you can use a [pre-defined](https://ui.shadcn.com/themes) theme or create your own by modifying the [`src/index.css`](./src/index.css) file.
diff --git a/components.json b/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/e2e/.gitkeep b/e2e/.gitkeep
diff --git a/e2e/characters-infinite-scroll.spec.ts b/e2e/characters-infinite-scroll.spec.ts
@@ -0,0 +1,38 @@
+import { expect, test } from "@playwright/test";
+
+test("infinite scroll", async ({ page }) => {
+  await page.goto("/");
+
+  const CARDS_SELECTOR = "li.character-card";
+  const SKELETONS_SELECTOR = "div.character-card-skeleton";
+  const CARDS_PER_PAGE = 20;
+  const SKELETONS_PER_LOAD = 12;
+
+  // Should show 20 skeleton cards before loading
+  await page.waitForSelector(SKELETONS_SELECTOR);
+  const skeletonCards = await page.$$(SKELETONS_SELECTOR);
+  expect(skeletonCards.length).toBe(SKELETONS_PER_LOAD);
+
+  // Should have 20 characters at the beginning after loading
+  await page.waitForSelector(CARDS_SELECTOR);
+  const initialCharacters = await page.$$(CARDS_SELECTOR);
+  expect(initialCharacters.length).toBe(CARDS_PER_PAGE);
+
+  // Scroll to bottom
+  await page.evaluate(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  });
+
+  // Should show the same amount of skeleton cards after scrolling
+  await page.waitForSelector(SKELETONS_SELECTOR);
+  const skeletonCardsAfterScroll = await page.$$(SKELETONS_SELECTOR);
+  expect(skeletonCardsAfterScroll.length).toBe(SKELETONS_PER_LOAD);
+
+  // Wait until the skeletons disappear
+  await expect(page.locator(SKELETONS_SELECTOR)).toHaveCount(0);
+
+  // Should have 40 characters after loading
+  await page.waitForSelector(CARDS_SELECTOR);
+  const charactersAfterScroll = await page.$$(CARDS_SELECTOR);
+  expect(charactersAfterScroll.length).toBe(CARDS_PER_PAGE * 2);
+});
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
     <title>{{ Title }}</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" class="bg-primary-foreground"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -22,12 +22,19 @@
     "format:fix": "prettier src/ --write"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-query": "5.0.0",
     "@tanstack/react-query-devtools": "^5.0.1",
+    "@uidotdev/usehooks": "2.4.1",
     "axios": "1.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.288.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "6.17.0"
+    "react-router-dom": "6.17.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
@@ -38,11 +45,14 @@
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
     "@vitejs/plugin-react-swc": "^3.4.0",
+    "autoprefixer": "10.4.16",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "8.4.31",
     "prettier": "3.0.3",
+    "tailwindcss": "3.3.3",
     "typescript": "^5.2.2",
     "vite": "^4.5.0"
   }