adding monkeytype

frontend/storybook/stories/AccountXpBar.stories.tsx

@@ -0,0 +1,62 @@
+import type { XpBreakdown } from "@monkeytype/schemas/results";
+
+import preview from "#.storybook/preview";
+import { onMount } from "solid-js";
+
+import { AccountXpBar } from "../../src/ts/components/layout/header/AccountXpBar";
+import { setXpBarData, setAnimatedLevel } from "../../src/ts/states/header";
+
+const meta = preview.meta({
+  title: "Layout/Header/AccountXpBar",
+  component: AccountXpBar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+});
+
+function XpBarStory(props: {
+  level: number;
+  addedXp: number;
+  resultingXp: number;
+  breakdown?: XpBreakdown;
+}) {
+  onMount(() => {
+    setXpBarData(null);
+    setAnimatedLevel(props.level);
+    // Delay so the effect picks up the change
+    setTimeout(() => {
+      setXpBarData({
+        addedXp: props.addedXp,
+        resultingXp: props.resultingXp,
+        breakdown: props.breakdown,
+      });
+    }, 1000);
+  });
+
+  return (
+    <div class="relative">
+      <div style="width: 150px;"></div>
+      <AccountXpBar />
+    </div>
+  );
+}
+
+export const WithBreakdown = meta.story(() => (
+  <XpBarStory
+    level={1}
+    addedXp={150}
+    resultingXp={150}
+    breakdown={{
+      base: 80,
+      fullAccuracy: 20,
+      punctuation: 10,
+      streak: 25,
+      daily: 15,
+    }}
+  />
+));
+
+export const NoBreakdown = meta.story(() => (
+  <XpBarStory level={1} addedXp={200} resultingXp={200} />
+));