adding monkeytype

frontend/storybook/stories/NotificationBubble.stories.tsx

@@ -0,0 +1,90 @@
+import preview from "#.storybook/preview";
+import { Component } from "solid-js";
+
+import { NotificationBubble } from "../../src/ts/components/common/NotificationBubble";
+
+const meta = preview.meta({
+  title: "Common/NotificationBubble",
+  component: NotificationBubble,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["fromCorner", "atCorner", "center"],
+    },
+    show: { control: "boolean" },
+  },
+  decorators: [
+    (Story: Component) => (
+      <div
+        style={{
+          position: "relative",
+          width: "48px",
+          height: "48px",
+          "background-color": "var(--sub-alt-color)",
+          "border-radius": "8px",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+});
+
+export const FromCorner = meta.story({
+  args: {
+    variant: "fromCorner",
+    show: true,
+  },
+});
+
+export const AtCorner = meta.story({
+  args: {
+    variant: "atCorner",
+    show: true,
+  },
+});
+
+export const Center = meta.story({
+  args: {
+    variant: "center",
+    show: true,
+  },
+});
+
+export const AllVariants = meta.story({
+  decorators: [
+    () => (
+      <div style={{ display: "flex", gap: "32px" }}>
+        {(["fromCorner", "atCorner", "center"] as const).map((variant) => (
+          <div
+            style={{
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "center",
+              gap: "8px",
+            }}
+          >
+            <div
+              style={{
+                position: "relative",
+                width: "48px",
+                height: "48px",
+                "background-color": "var(--sub-alt-color)",
+                "border-radius": "8px",
+              }}
+            >
+              <NotificationBubble variant={variant} show />
+            </div>
+            <div style={{ "font-size": "12px", color: "var(--sub-color)" }}>
+              {variant}
+            </div>
+          </div>
+        ))}
+      </div>
+    ),
+  ],
+});