adding monkeytype

frontend/storybook/stories/AnimeConditional.stories.tsx

@@ -0,0 +1,79 @@
+import preview from "#.storybook/preview";
+import { Accessor, Component, createSignal, JSXElement } from "solid-js";
+
+import { AnimeConditional } from "../../src/ts/components/common/anime/AnimeConditional";
+
+type AnimeConditionalProps = {
+  if: boolean;
+  then: JSXElement | ((value: Accessor<NonNullable<boolean>>) => JSXElement);
+  else?: JSXElement;
+  exitBeforeEnter?: boolean;
+};
+
+const meta = preview.meta({
+  title: "Common/Anime/AnimeConditional",
+  component: AnimeConditional as Component<AnimeConditionalProps>,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    if: { control: "boolean" },
+    exitBeforeEnter: { control: "boolean" },
+  },
+});
+
+export const Default = meta.story({
+  args: {
+    if: true,
+    exitBeforeEnter: true,
+    then: (
+      <div style={{ color: "var(--text-color)", padding: "16px" }}>
+        Condition is true
+      </div>
+    ),
+    else: (
+      <div style={{ color: "var(--error-color)", padding: "16px" }}>
+        Condition is false
+      </div>
+    ),
+  },
+});
+
+export const InteractiveToggle = meta.story({
+  render: () => {
+    const [show, setShow] = createSignal(true);
+    return (
+      <div>
+        <button
+          style={{
+            padding: "8px 16px",
+            cursor: "pointer",
+            "background-color": "var(--sub-alt-color)",
+            color: "var(--text-color)",
+            border: "none",
+            "border-radius": "8px",
+            "margin-bottom": "16px",
+          }}
+          onClick={() => setShow((prev) => !prev)}
+        >
+          Toggle ({show() ? "showing true" : "showing false"})
+        </button>
+        <AnimeConditional
+          if={show()}
+          exitBeforeEnter
+          then={
+            <div style={{ color: "var(--text-color)", padding: "16px" }}>
+              Condition is true
+            </div>
+          }
+          else={
+            <div style={{ color: "var(--error-color)", padding: "16px" }}>
+              Condition is false
+            </div>
+          }
+        />
+      </div>
+    );
+  },
+});