refactor: setup faker

package.json

@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
+    "@faker-js/faker": "^8.4.1",
     "@playwright/test": "^1.44.1",
     "@storybook/addon-essentials": "^8.2.5",
     "@storybook/addon-interactions": "^8.2.5",

src/grants/components/grant-card/grant-card.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof GrantCard> = {
   title: 'grants/components/grant-card',
   component: GrantCard,
   args: {
-    grant: fakeGrant,
+    grant: fakeGrant(),
   },
 };
 

src/grants/components/grant-list/grant-list-item.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof GrantListItem> = {
   title: 'grants/components/grant-list-item',
   component: GrantListItem,
   args: {
-    grant: fakeGrant,
+    grant: fakeGrant(),
   },
 };
 

src/grants/components/grantee-card/grantee-card.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof GranteeCard> = {
   title: 'grants/components/grantee-card',
   component: GranteeCard,
   args: {
-    grantee: fakeGrantee,
+    grantee: fakeGrantee(),
   },
 };
 

src/grants/components/grantee-list/item/item.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof GranteeListItem> = {
   title: 'grants/components/grantee-list-item',
   component: GranteeListItem,
   args: {
-    grantee: fakeGrantee,
+    grantee: fakeGrantee(),
   },
 };
 

src/grants/pages/grant-page-layout.tsx

@@ -15,7 +15,7 @@ export const GrantPageLayout = ({
   params: { grantId },
 }: Props) => {
   // TODO: fetch grant using grantId
-  const grant = fakeGrant;
+  const grant = fakeGrant();
 
   return (
     <div className="flex flex-col gap-8 p-8">

src/grants/pages/grantee-page-layout.tsx

@@ -14,7 +14,7 @@ export const GranteePageLayout = ({ grantId, granteeId, children }: Props) => {
   const baseHref = `/grants/${grantId}/grantees/${granteeId}/projects`;
 
   // TODO: fetch grantee
-  const grantee = fakeGrantee;
+  const grantee = fakeGrantee();
 
   // TODO: fetch projects
   const projects = [

src/grants/testutils/fake-grant.ts

@@ -1,37 +1,42 @@
+import { faker } from '@faker-js/faker';
+
+import { capitalize } from '@/shared/utils/capitalize';
+
+import { fakeNullable } from '@/shared/testutils/fake-nullable';
+
 import { Grant } from '@/grants/core/schemas';
 
-export const fakeGrant: Grant = {
-  id: 'thank-arb',
-  name: 'ThankArb Grant Program',
-  networks: [
-    {
-      name: 'Ethereum',
-      logo: null,
-    },
-    {
-      name: 'Solana',
-      logo: null,
-    },
-  ],
-  ecosystem: 'Solana',
-  totalFunds: 17_000_000,
-  totalDisbursedFunds: 17_000_000,
-  summary:
-    'The 01 Exchange grants program, in collaboration with the Solana Foundation, is open to everyone in the community and provides on-going opportunities to contribute to the 01 and Solana ecosystem.',
-  categories: ['DEX', 'Communities', 'Reasearch', 'DeFi'],
-  type: 'Direct Grants',
-  reputations: [
-    '🎯 Clear Goal',
-    '✨ Smooth Application',
-    '⚖️ Fair Rounds',
-    '🛠 Easy Tech',
-    '🤝 Supportive Team',
-    '🏆 Great Reviewers',
-    '💰 Fast Disbursement',
-  ],
-  logo: null,
-  url: 'https://www.arbitrumhub.io/grant-hub/thrive/grants/thank-arb/',
-  twitter: 'https://x.com/arbitrumdao_hub',
-  discord: 'https://discord.com/',
-  granteesCount: 17,
-};
+faker.seed(420);
+
+const emojiPool = ['🎯', '✨', '⚖️', '🛠', '🤝', '🏆', '💰'];
+
+export const fakeGrant = (): Grant => ({
+  id: faker.string.uuid(),
+  name: faker.company.name(),
+  networks: Array.from({ length: faker.number.int({ min: 0, max: 4 }) }).map(
+    () => ({
+      name: capitalize(faker.company.buzzNoun()),
+      logo: fakeNullable(faker.image.url()),
+    }),
+  ),
+  ecosystem: capitalize(faker.company.buzzNoun()),
+  totalFunds: faker.number.int({ min: 500_000, max: 200_000_000 }),
+  totalDisbursedFunds: faker.number.int({ min: 500_000, max: 10_000_000 }),
+  summary: faker.lorem.paragraph({ min: 3, max: 8 }),
+  categories: Array.from({ length: faker.number.int({ min: 1, max: 6 }) }).map(
+    () => faker.commerce.department(),
+  ),
+  type: faker.lorem.words({ min: 1, max: 2 }),
+  reputations: Array.from({ length: faker.number.int({ min: 1, max: 6 }) }).map(
+    () => `${faker.helpers.arrayElement(emojiPool)} faker.company.buzzPhrase()`,
+  ),
+  logo: fakeNullable(faker.image.url()),
+  url: faker.internet.url(),
+  twitter: fakeNullable(
+    `https://x.com/${faker.internet.userName().toLocaleLowerCase()}`,
+  ),
+  discord: fakeNullable(
+    `https://discord.com/${faker.internet.userName().toLocaleLowerCase()}`,
+  ),
+  granteesCount: faker.number.int({ min: 1, max: 100 }),
+});

src/grants/testutils/fake-grantee.ts

@@ -1,13 +1,18 @@
+import { faker } from '@faker-js/faker';
+
+import { fakeNullable } from '@/shared/testutils/fake-nullable';
+
 import { Grantee } from '@/grants/core/schemas';
 
-export const fakeGrantee: Grantee = {
-  id: 'grantee-1',
-  name: 'Layer Zero',
-  logo: null,
-  category: 'Distributed',
-  summary:
-    'Sound was founded with the hypothesis that music fans crave a deeper experience and are willing to support their favorite artists. The fixed price of music is suffocating artists, with streaming services refusing to unlock the full value of music and failing to allow music fans to directly support artists. As a result, only 0.1% of musicians make a living wage from their art. On Sound, artists can release their music and sell digital collectibles to their fans. Listeners can discover and collect new music to prove they were an early supporter and engage with their favorite artists. For the first time, curators can create playlists and share their favorite songs and earn alongside the artists.',
-  url: 'sound.xyz',
-  lastFunding: 17_000_000,
-  fundingDate: 1637452800,
-};
+faker.seed(69);
+
+export const fakeGrantee = (): Grantee => ({
+  id: faker.string.uuid(),
+  name: faker.company.name(),
+  logo: fakeNullable(faker.image.url()),
+  category: faker.commerce.department(),
+  summary: faker.lorem.paragraph({ min: 3, max: 8 }),
+  url: faker.internet.url(),
+  lastFunding: faker.number.int({ min: 500_000, max: 200_000_000 }),
+  fundingDate: faker.date.past(5).getTime(),
+});

src/grants/testutils/mock-grant-list-query.ts

@@ -12,7 +12,7 @@ export const mockGrantListQuery = (
   mockInfiniteListQuery(
     {
       url: GRANT_QUERY_URLS.GRANT_LIST,
-      data: Array.from({ length: 10 }).map(() => fakeGrant),
+      data: Array.from({ length: 10 }).map(() => fakeGrant()),
     },
     result,
     options,

src/grants/testutils/mock-grantee-list-query.ts

@@ -12,7 +12,7 @@ export const mockGranteeListQuery = (
   mockInfiniteListQuery(
     {
       url: GRANT_QUERY_URLS.GRANTEE_LIST,
-      data: Array.from({ length: 10 }).map(() => fakeGrantee),
+      data: Array.from({ length: 10 }).map(() => fakeGrantee()),
     },
     result,
     options,

src/shared/testutils/fake-nullable.ts

@@ -0,0 +1,4 @@
+import { faker } from '@faker-js/faker';
+
+export const fakeNullable = <T>(value: T) =>
+  faker.datatype.boolean() ? value : null;