[ui-v2] Remove faker in favor of falso (#17403)

PrefectHQ · Mar 6, 2025 · 70b052c · 70b052c
1 parent 2b556a0
commit 70b052c
Show file tree

Hide file tree

Showing 25 changed files with 391 additions and 237 deletions.
diff --git a/ui-v2/package-lock.json b/ui-v2/package-lock.json
diff --git a/ui-v2/package.json b/ui-v2/package.json
@@ -79,7 +79,6 @@
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
 		"@eslint/js": "^9.21.0",
-		"@faker-js/faker": "^9.5.1",
 		"@storybook/addon-a11y": "^8.6.3",
 		"@storybook/addon-essentials": "^8.6.3",
 		"@storybook/addon-interactions": "^8.6.3",

diff --git a/ui-v2/src/components/deployments/deployment-schedules/deployment-schedules.stories.tsx b/ui-v2/src/components/deployments/deployment-schedules/deployment-schedules.stories.tsx
@@ -6,14 +6,14 @@ import {
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { createFakeDeployment } from "@/mocks";
-import { faker } from "@faker-js/faker";
+import { randRecentDate, randUuid } from "@ngneat/falso";
 import { DeploymentSchedules } from "./deployment-schedules";
 
 const baseDeploymentSchedule = {
-	id: faker.string.uuid(),
-	created: faker.date.recent().toISOString(),
-	updated: faker.date.recent().toISOString(),
-	deployment_id: faker.string.uuid(),
+	id: randUuid(),
+	created: randRecentDate().toISOString(),
+	updated: randRecentDate().toISOString(),
+	deployment_id: randUuid(),
 	active: true,
 	max_scheduled_runs: null,
 };

diff --git a/ui-v2/src/components/deployments/deployment-schedules/get-schedule-title.test.ts b/ui-v2/src/components/deployments/deployment-schedules/get-schedule-title.test.ts
@@ -1,14 +1,14 @@
 import type { DeploymentSchedule } from "@/api/deployments";
-import { faker } from "@faker-js/faker";
+import { randRecentDate, randUuid } from "@ngneat/falso";
 import { describe, expect, it } from "vitest";
 import { getScheduleTitle } from "./get-schedule-title";
 
 describe("getScheduleTitle()", () => {
 	const baseDeploymentSchedule = {
-		id: faker.string.uuid(),
-		created: faker.date.recent().toISOString(),
-		updated: faker.date.recent().toISOString(),
-		deployment_id: faker.string.uuid(),
+		id: randUuid(),
+		created: randRecentDate().toISOString(),
+		updated: randRecentDate().toISOString(),
+		deployment_id: randUuid(),
 		active: true,
 		max_scheduled_runs: null,
 	};
@@ -18,7 +18,7 @@ describe("getScheduleTitle()", () => {
 			...baseDeploymentSchedule,
 			schedule: {
 				interval: 3600,
-				anchor_date: faker.date.recent().toISOString(),
+				anchor_date: randRecentDate().toISOString(),
 				timezone: "UTC",
 			},
 		};

diff --git a/ui-v2/src/components/deployments/deployment-schedules/schedule-action-menu.test.tsx b/ui-v2/src/components/deployments/deployment-schedules/schedule-action-menu.test.tsx
@@ -1,17 +1,16 @@
 import { Toaster } from "@/components/ui/sonner";
-import { faker } from "@faker-js/faker";
+import { randRecentDate, randUuid } from "@ngneat/falso";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
 import { createWrapper } from "@tests/utils";
+import { describe, expect, it, vi } from "vitest";
 import { ScheduleActionMenu } from "./schedule-action-menu";
 
 const MOCK_DEPLOYMENT_SCHEDULE = {
-	id: faker.string.uuid(),
-	created: faker.date.recent().toISOString(),
-	updated: faker.date.recent().toISOString(),
-	deployment_id: faker.string.uuid(),
+	id: randUuid(),
+	created: randRecentDate().toISOString(),
+	updated: randRecentDate().toISOString(),
+	deployment_id: randUuid(),
 	active: true,
 	max_scheduled_runs: null,
 	schedule: {

diff --git a/ui-v2/src/components/deployments/deployment-schedules/schedule-toggle-switch.test.tsx b/ui-v2/src/components/deployments/deployment-schedules/schedule-toggle-switch.test.tsx
@@ -1,21 +1,21 @@
 import { Toaster } from "@/components/ui/sonner";
-import { faker } from "@faker-js/faker";
+import { randRecentDate, randUuid } from "@ngneat/falso";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { createWrapper } from "@tests/utils";
 import { expect, test } from "vitest";
 import { ScheduleToggleSwitch } from "./schedule-toggle-switch";
 
 const MOCK_DEPLOYMENT_SCHEDULE = {
-	id: faker.string.uuid(),
-	created: faker.date.recent().toISOString(),
-	updated: faker.date.recent().toISOString(),
-	deployment_id: faker.string.uuid(),
+	id: randUuid(),
+	created: randRecentDate().toISOString(),
+	updated: randRecentDate().toISOString(),
+	deployment_id: randUuid(),
 	active: true,
 	max_scheduled_runs: null,
 	schedule: {
 		interval: 3600,
-		anchor_date: faker.date.recent().toISOString(),
+		anchor_date: randRecentDate().toISOString(),
 		timezone: "UTC",
 	},
 };

diff --git a/ui-v2/src/components/flow-runs/flow-run-card/flow-run-card.stories.tsx b/ui-v2/src/components/flow-runs/flow-run-card/flow-run-card.stories.tsx
@@ -7,7 +7,7 @@ import {
 	routerDecorator,
 	toastDecorator,
 } from "@/storybook/utils";
-import { faker } from "@faker-js/faker";
+import { randNumber } from "@ngneat/falso";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { buildApiUrl } from "@tests/utils/handlers";
@@ -21,7 +21,7 @@ const MOCK_DATA_WITH_DEPLOYMENT = createFakeFlowRunWithDeploymentAndFlow({
 	id: "0",
 });
 const MOCK_FLOW_RUNS_TASK_COUNT = {
-	"0": faker.number.int({ min: 0, max: 5 }),
+	"0": randNumber({ min: 0, max: 5 }),
 };
 
 const meta = {

diff --git a/ui-v2/src/components/flow-runs/flow-runs-list/flow-runs-list.stories.tsx b/ui-v2/src/components/flow-runs/flow-runs-list/flow-runs-list.stories.tsx
@@ -6,7 +6,7 @@ import {
 	routerDecorator,
 	toastDecorator,
 } from "@/storybook/utils";
-import { faker } from "@faker-js/faker";
+import { randNumber } from "@ngneat/falso";
 import { fn } from "@storybook/test";
 import { buildApiUrl } from "@tests/utils/handlers";
 import { http, HttpResponse } from "msw";
@@ -41,11 +41,11 @@ const MOCK_DATA = [
 ];
 
 const MOCK_FLOW_RUNS_TASK_COUNT = {
-	"0": faker.number.int({ min: 0, max: 5 }),
-	"1": faker.number.int({ min: 0, max: 5 }),
-	"2": faker.number.int({ min: 0, max: 5 }),
-	"3": faker.number.int({ min: 0, max: 5 }),
-	"4": faker.number.int({ min: 0, max: 5 }),
+	"0": randNumber({ min: 0, max: 5 }),
+	"1": randNumber({ min: 0, max: 5 }),
+	"2": randNumber({ min: 0, max: 5 }),
+	"3": randNumber({ min: 0, max: 5 }),
+	"4": randNumber({ min: 0, max: 5 }),
 };
 
 const meta = {

diff --git a/ui-v2/src/components/ui/flow-run-activity-bar-graph/flow-run-activity-bar-graph.stories.tsx b/ui-v2/src/components/ui/flow-run-activity-bar-graph/flow-run-activity-bar-graph.stories.tsx
@@ -1,11 +1,10 @@
+import { createFakeFlowRunWithDeploymentAndFlow } from "@/mocks/create-fake-flow-run";
+import { routerDecorator } from "@/storybook/utils";
+import { randPastDate } from "@ngneat/falso";
 import type { Meta, StoryObj } from "@storybook/react";
 import type { ComponentProps } from "react";
 import { FlowRunActivityBarChart } from ".";
 
-import { createFakeFlowRunWithDeploymentAndFlow } from "@/mocks/create-fake-flow-run";
-import { routerDecorator } from "@/storybook/utils";
-import { faker } from "@faker-js/faker";
-
 export default {
 	title: "UI/FlowRunActivityBarChart",
 	component: FlowRunActivityBarChart,
@@ -30,7 +29,7 @@ type Story = StoryObj<typeof FlowRunActivityBarChart>;
 
 export const Randomized: Story = {
 	args: {
-		startDate: faker.date.past(),
+		startDate: randPastDate(),
 		endDate: new Date(),
 		enrichedFlowRuns: Array.from(
 			{ length: 18 },

diff --git a/ui-v2/src/components/ui/schedule-badge/schedule-badge.stories.tsx b/ui-v2/src/components/ui/schedule-badge/schedule-badge.stories.tsx
@@ -3,7 +3,12 @@ import {
 	generateRandomIntervalSchedule,
 	generateRandomRRuleSchedule,
 } from "@/mocks/create-fake-schedule";
-import { faker } from "@faker-js/faker";
+import {
+	randBoolean,
+	randNumber,
+	randRecentDate,
+	randUuid,
+} from "@ngneat/falso";
 import type { Meta, StoryObj } from "@storybook/react";
 import { ScheduleBadge } from ".";
 
@@ -20,12 +25,12 @@ type Story = StoryObj<typeof ScheduleBadge>;
 export const CronSchedule: Story = {
 	args: {
 		schedule: {
-			id: faker.string.uuid(),
-			created: faker.date.recent().toISOString(),
-			updated: faker.date.recent().toISOString(),
-			deployment_id: faker.string.uuid(),
-			active: faker.datatype.boolean(),
-			max_scheduled_runs: faker.number.int({ min: 1, max: 100 }),
+			id: randUuid(),
+			created: randRecentDate().toISOString(),
+			updated: randRecentDate().toISOString(),
+			deployment_id: randUuid(),
+			active: randBoolean(),
+			max_scheduled_runs: randNumber({ min: 1, max: 100 }),
 			schedule: generateRandomCronSchedule(),
 		},
 	},
@@ -34,12 +39,12 @@ export const CronSchedule: Story = {
 export const IntervalSchedule: Story = {
 	args: {
 		schedule: {
-			id: faker.string.uuid(),
-			created: faker.date.recent().toISOString(),
-			updated: faker.date.recent().toISOString(),
-			deployment_id: faker.string.uuid(),
-			active: faker.datatype.boolean(),
-			max_scheduled_runs: faker.number.int({ min: 1, max: 100 }),
+			id: randUuid(),
+			created: randRecentDate().toISOString(),
+			updated: randRecentDate().toISOString(),
+			deployment_id: randUuid(),
+			active: randBoolean(),
+			max_scheduled_runs: randNumber({ min: 1, max: 100 }),
 			schedule: generateRandomIntervalSchedule(),
 		},
 	},
@@ -48,12 +53,12 @@ export const IntervalSchedule: Story = {
 export const RRuleSchedule: Story = {
 	args: {
 		schedule: {
-			id: faker.string.uuid(),
-			created: faker.date.recent().toISOString(),
-			updated: faker.date.recent().toISOString(),
-			deployment_id: faker.string.uuid(),
-			active: faker.datatype.boolean(),
-			max_scheduled_runs: faker.number.int({ min: 1, max: 100 }),
+			id: randUuid(),
+			created: randRecentDate().toISOString(),
+			updated: randRecentDate().toISOString(),
+			deployment_id: randUuid(),
+			active: randBoolean(),
+			max_scheduled_runs: randNumber({ min: 1, max: 100 }),
 			schedule: generateRandomRRuleSchedule(),
 		},
 	},

diff --git a/ui-v2/src/components/ui/schedule-badge/schedule-badge.test.tsx b/ui-v2/src/components/ui/schedule-badge/schedule-badge.test.tsx
@@ -1,5 +1,5 @@
 import * as useIsOverflowingModule from "@/hooks/use-is-overflowing";
-import { faker } from "@faker-js/faker";
+import { randUuid } from "@ngneat/falso";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
@@ -189,7 +189,7 @@ describe("ScheduleBadgeGroup", () => {
 			.mockReturnValue(true);
 		const user = userEvent.setup();
 		const schedules = Array.from({ length: 10 }, () => ({
-			id: faker.string.uuid(),
+			id: randUuid(),
 			created: new Date().toISOString(),
 			updated: new Date().toISOString(),
 			active: true,

diff --git a/ui-v2/src/mocks/create-fake-artifact.ts b/ui-v2/src/mocks/create-fake-artifact.ts
@@ -1,25 +1,31 @@
 import type { components } from "@/api/prefect";
-import { faker } from "@faker-js/faker";
+import {
+	randAlphaNumeric,
+	randPastDate,
+	randSentence,
+	randUuid,
+	randWord,
+} from "@ngneat/falso";
 
 export const createFakeArtifact = (
 	overrides?: Partial<components["schemas"]["Artifact"]>,
 ): components["schemas"]["Artifact"] => {
 	return {
-		id: faker.string.uuid(),
-		created: faker.date.past().toISOString(),
-		updated: faker.date.past().toISOString(),
-		key: `key-${faker.string.alphanumeric({ length: 10 })}`,
+		id: randUuid(),
+		created: randPastDate().toISOString(),
+		updated: randPastDate().toISOString(),
+		key: `key-${randAlphaNumeric({ length: 10 }).join()}`,
 		type: "result",
-		description: faker.lorem.sentence(),
+		description: randSentence(),
 		data: {
-			arr: faker.helpers.uniqueArray([faker.word.sample()], 5),
+			arr: randWord({ length: 5 }),
 		},
 		metadata_: {
-			key: faker.lorem.word(),
-			[faker.lorem.word()]: faker.lorem.word(),
+			key: randWord(),
+			[randWord()]: randWord(),
 		},
-		flow_run_id: faker.string.uuid(),
-		task_run_id: faker.string.uuid(),
+		flow_run_id: randUuid(),
+		task_run_id: randUuid(),
 		...overrides,
 	};
 };
diff --git a/ui-v2/src/mocks/create-fake-automation.ts b/ui-v2/src/mocks/create-fake-automation.ts
@@ -1,16 +1,22 @@
 import type { components } from "@/api/prefect";
-import { faker } from "@faker-js/faker";
+import {
+	randBoolean,
+	randPastDate,
+	randProductAdjective,
+	randProductName,
+	randUuid,
+} from "@ngneat/falso";
 
 export const createFakeAutomation = (
 	overrides?: Partial<components["schemas"]["Automation"]>,
 ): components["schemas"]["Automation"] => {
 	return {
-		name: `${faker.word.adjective()} automation`,
-		description: `${faker.word.adjective()} ${faker.word.noun()}`,
-		enabled: faker.datatype.boolean(),
+		name: `${randProductAdjective()} automation`,
+		description: `${randProductAdjective()} ${randProductName()}`,
+		enabled: randBoolean(),
 		trigger: {
 			type: "event",
-			id: faker.string.uuid(),
+			id: randUuid(),
 			match: {
 				"prefect.resource.id": "prefect.deployment.*",
 			},
@@ -29,9 +35,9 @@ export const createFakeAutomation = (
 		],
 		actions_on_trigger: [],
 		actions_on_resolve: [],
-		id: faker.string.uuid(),
-		created: faker.date.past().toISOString(),
-		updated: faker.date.past().toISOString(),
+		id: randUuid(),
+		created: randPastDate().toISOString(),
+		updated: randPastDate().toISOString(),
 		...overrides,
 	};
 };