adding monkeytype

frontend/storybook/stories/UserProfile.stories.tsx

@@ -0,0 +1,240 @@
+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": [],
+    },
+    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,
+    },
+  },
+});