241 lines
4.3 KiB
TypeScript
241 lines
4.3 KiB
TypeScript
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,
|
|
},
|
|
},
|
|
});
|