adding monkeytype

frontend/storybook/stories/Balloon.stories.tsx

@@ -0,0 +1,123 @@
+import preview from "#.storybook/preview";
+import { Component } from "solid-js";
+
+import { Balloon } from "../../src/ts/components/common/Balloon";
+
+const meta = preview.meta({
+  title: "Common/Balloon",
+  component: Balloon as Component,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    text: { control: "text" },
+    position: {
+      control: "select",
+      options: ["up", "down", "left", "right"],
+    },
+    break: { control: "boolean" },
+    length: {
+      control: "select",
+      options: ["small", "medium", "large", "xlarge", "fit"],
+    },
+    inline: { control: "boolean" },
+  },
+});
+
+export const Default = meta.story(() => (
+  <Balloon text="Tooltip text">
+    <span style={{ color: "var(--text-color)", cursor: "pointer" }}>
+      Hover me
+    </span>
+  </Balloon>
+));
+
+export const AllPositions = meta.story(() => (
+  <div
+    style={{
+      display: "grid",
+      "grid-template-columns": "repeat(2, 1fr)",
+      gap: "48px",
+      padding: "64px",
+      color: "var(--text-color)",
+    }}
+  >
+    <Balloon text="Tooltip above" position="up">
+      <span style={{ cursor: "pointer" }}>Up</span>
+    </Balloon>
+    <Balloon text="Tooltip below" position="down">
+      <span style={{ cursor: "pointer" }}>Down</span>
+    </Balloon>
+    <Balloon text="Tooltip left" position="left">
+      <span style={{ cursor: "pointer" }}>Left</span>
+    </Balloon>
+    <Balloon text="Tooltip right" position="right">
+      <span style={{ cursor: "pointer" }}>Right</span>
+    </Balloon>
+  </div>
+));
+
+export const Lengths = meta.story(() => (
+  <div
+    style={{
+      display: "flex",
+      "flex-direction": "column",
+      gap: "32px",
+      padding: "64px",
+      color: "var(--text-color)",
+    }}
+  >
+    <Balloon text="Short" length="small">
+      <span style={{ cursor: "pointer" }}>Small</span>
+    </Balloon>
+    <Balloon text="A medium length tooltip message" length="medium">
+      <span style={{ cursor: "pointer" }}>Medium</span>
+    </Balloon>
+    <Balloon
+      text="A longer tooltip message that takes up more space"
+      length="large"
+    >
+      <span style={{ cursor: "pointer" }}>Large</span>
+    </Balloon>
+    <Balloon
+      text="An extra large tooltip with a lot of text content inside it"
+      length="xlarge"
+    >
+      <span style={{ cursor: "pointer" }}>XLarge</span>
+    </Balloon>
+    <Balloon text="Fits content" length="fit">
+      <span style={{ cursor: "pointer" }}>Fit</span>
+    </Balloon>
+  </div>
+));
+
+export const Inline = meta.story(() => (
+  <p style={{ color: "var(--text-color)" }}>
+    This is text with a{" "}
+    <Balloon text="Inline tooltip" inline>
+      <span
+        style={{
+          color: "var(--main-color)",
+          cursor: "pointer",
+          "text-decoration": "underline",
+        }}
+      >
+        inline element
+      </span>
+    </Balloon>{" "}
+    inside a sentence.
+  </p>
+));
+
+export const WithBreak = meta.story(() => (
+  <Balloon
+    text="This is a very long tooltip message that should break into multiple lines when displayed"
+    break
+    length="medium"
+  >
+    <span style={{ color: "var(--text-color)", cursor: "pointer" }}>
+      Hover for multiline tooltip
+    </span>
+  </Balloon>
+));