From 6fd5968add9d0180eae77e3ad5db075cebc086c8 Mon Sep 17 00:00:00 2001 From: Aaron Benmohan John Date: Mon, 9 Mar 2026 13:51:08 +0530 Subject: [PATCH 1/4] fix(profile): prevent PB hover details from overlapping base values --- frontend/src/ts/components/pages/profile/UserProfile.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/ts/components/pages/profile/UserProfile.tsx b/frontend/src/ts/components/pages/profile/UserProfile.tsx index af7a0d7c69b5..4d998eafeaa3 100644 --- a/frontend/src/ts/components/pages/profile/UserProfile.tsx +++ b/frontend/src/ts/components/pages/profile/UserProfile.tsx @@ -126,8 +126,8 @@ function PbTable(props: {
{(item) => ( -
-
+
+
{item.mode2} {props.mode === "time" ? "seconds" : "words"}
@@ -143,7 +143,7 @@ function PbTable(props: {
-
+
{item.mode2} {props.mode === "time" ? "seconds" : "words"}
From 12ea563e462e7022f6036c402a7e6cbb263e5f8b Mon Sep 17 00:00:00 2001 From: Miodec Date: Mon, 9 Mar 2026 17:36:03 +0100 Subject: [PATCH 2/4] add profile story --- .../storybook/stories/UserProfile.stories.tsx | 250 ++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 frontend/storybook/stories/UserProfile.stories.tsx diff --git a/frontend/storybook/stories/UserProfile.stories.tsx b/frontend/storybook/stories/UserProfile.stories.tsx new file mode 100644 index 000000000000..e438a4f82a45 --- /dev/null +++ b/frontend/storybook/stories/UserProfile.stories.tsx @@ -0,0 +1,250 @@ +import preview from "#.storybook/preview"; +import { UserProfile as UserProfileType } from "@monkeytype/schemas/users"; + +import { UserProfile } from "../../src/ts/components/pages/profile/UserProfile"; + +const baseProfile: UserProfileType = { + uid: "user123", + name: "monkeytyper", + addedAt: 1700000000000, + xp: 42000, + streak: 15, + maxStreak: 30, + isPremium: false, + banned: false, + lbOptOut: false, + typingStats: { + completedTests: 1234, + startedTests: 1500, + timeTyping: 360000, + }, + personalBests: { + time: { + "15": [ + { + acc: 97.5, + consistency: 82.3, + difficulty: "normal", + language: "english", + raw: 145, + wpm: 138, + timestamp: 1700000000000, + }, + ], + "30": [ + { + acc: 96.2, + consistency: 80.1, + difficulty: "normal", + language: "english", + raw: 140, + wpm: 132, + timestamp: 1699000000000, + }, + ], + "60": [ + { + acc: 95.8, + consistency: 78.5, + difficulty: "normal", + language: "english", + raw: 135, + wpm: 125, + timestamp: 1698000000000, + }, + ], + "120": [ + { + acc: 94.1, + consistency: 76.0, + difficulty: "normal", + language: "english", + raw: 130, + wpm: 118, + timestamp: 1697000000000, + }, + ], + }, + words: { + "10": [ + { + acc: 100, + consistency: 90.0, + difficulty: "normal", + language: "english", + raw: 160, + wpm: 155, + timestamp: 1700000000000, + }, + ], + "25": [ + { + acc: 98.0, + consistency: 85.0, + difficulty: "normal", + language: "english", + raw: 150, + wpm: 142, + timestamp: 1699000000000, + }, + ], + "50": [ + { + acc: 96.5, + consistency: 81.0, + difficulty: "normal", + language: "english", + raw: 142, + wpm: 130, + timestamp: 1698000000000, + }, + ], + "100": [ + { + acc: 95.0, + consistency: 79.0, + difficulty: "normal", + language: "english", + raw: 138, + wpm: 122, + timestamp: 1697000000000, + }, + ], + }, + }, + details: { + bio: "Just a monkey typing away", + keyboard: "Custom 65%", + socialProfiles: { + twitter: "monkeytyper", + github: "monkeytyper", + website: "https://example.com", + }, + }, + // this is styled using global styles so it wont show up correctly in storybook + // testActivity: { + // testsByDays: [ + // null, + // 2, + // 5, + // null, + // 3, + // 8, + // 12, + // null, + // null, + // 1, + // 4, + // 6, + // null, + // 7, + // 3, + // null, + // null, + // 5, + // 9, + // 2, + // null, + // null, + // 4, + // 6, + // 11, + // 3, + // null, + // 8, + // 2, + // 5, + // ], + // lastDay: 1700000000000, + // }, + inventory: { + badges: [{ id: 1, selected: true }], + }, +}; + +const meta = preview.meta({ + title: "Pages/UserProfile", + component: UserProfile, + parameters: { + layout: "padded", + }, + tags: ["autodocs"], +}); + +export const Default = meta.story({ + args: { + profile: baseProfile, + }, +}); + +export const AccountPage = meta.story({ + args: { + profile: baseProfile, + isAccountPage: true, + }, +}); + +export const WithLeaderboard = meta.story({ + args: { + profile: { + ...baseProfile, + allTimeLbs: { + time: { + "15": { + english: { + rank: 42, + count: 50000, + }, + }, + "60": { + english: { + rank: 156, + count: 50000, + }, + }, + }, + }, + }, + }, +}); + +export const Banned = meta.story({ + args: { + profile: { + ...baseProfile, + banned: true, + details: undefined, + inventory: undefined, + }, + }, +}); + +export const LbOptOut = meta.story({ + args: { + profile: { + ...baseProfile, + lbOptOut: true, + }, + }, +}); + +export const NoPbs = meta.story({ + args: { + profile: { + ...baseProfile, + personalBests: { + time: {}, + words: {}, + }, + }, + }, +}); + +export const Premium = meta.story({ + args: { + profile: { + ...baseProfile, + isPremium: true, + }, + }, +}); From 33eaada56ef0e23c529217c4263b80619eea62e0 Mon Sep 17 00:00:00 2001 From: Miodec Date: Mon, 9 Mar 2026 17:36:48 +0100 Subject: [PATCH 3/4] one empty pb --- frontend/storybook/stories/UserProfile.stories.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/frontend/storybook/stories/UserProfile.stories.tsx b/frontend/storybook/stories/UserProfile.stories.tsx index e438a4f82a45..0c82414cdc03 100644 --- a/frontend/storybook/stories/UserProfile.stories.tsx +++ b/frontend/storybook/stories/UserProfile.stories.tsx @@ -53,17 +53,7 @@ const baseProfile: UserProfileType = { timestamp: 1698000000000, }, ], - "120": [ - { - acc: 94.1, - consistency: 76.0, - difficulty: "normal", - language: "english", - raw: 130, - wpm: 118, - timestamp: 1697000000000, - }, - ], + "120": [], }, words: { "10": [ From 867c12605fd57ca31c081cc973ca2a98a509a9db Mon Sep 17 00:00:00 2001 From: Aaron Benmohan John Date: Mon, 9 Mar 2026 22:51:22 +0530 Subject: [PATCH 4/4] fix(profile): only fade PB base content when PB exists --- frontend/src/ts/components/pages/profile/UserProfile.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/ts/components/pages/profile/UserProfile.tsx b/frontend/src/ts/components/pages/profile/UserProfile.tsx index 4d998eafeaa3..60c77e23bc24 100644 --- a/frontend/src/ts/components/pages/profile/UserProfile.tsx +++ b/frontend/src/ts/components/pages/profile/UserProfile.tsx @@ -127,7 +127,13 @@ function PbTable(props: { {(item) => (
-
+
{item.mode2} {props.mode === "time" ? "seconds" : "words"}
@@ -142,6 +148,7 @@ function PbTable(props: { })}
+