adding monkeytype

frontend/storybook/stories/Conditional.stories.tsx

@@ -0,0 +1,52 @@
+import preview from "#.storybook/preview";
+import { Component, JSXElement } from "solid-js";
+
+import { Conditional } from "../../src/ts/components/common/Conditional";
+
+type ConditionalProps = {
+  if: boolean;
+  then: JSXElement;
+  else?: JSXElement;
+};
+
+const meta = preview.meta({
+  title: "Common/Conditional",
+  component: Conditional as Component<ConditionalProps>,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    if: { control: "boolean" },
+  },
+});
+
+export const Truthy = meta.story({
+  args: {
+    if: true,
+    then: <div style={{ color: "var(--text-color)" }}>Condition is true</div>,
+    else: <div style={{ color: "var(--error-color)" }}>Condition is false</div>,
+  },
+});
+
+export const Falsy = meta.story({
+  args: {
+    if: false,
+    then: <div style={{ color: "var(--text-color)" }}>Condition is true</div>,
+    else: <div style={{ color: "var(--error-color)" }}>Condition is false</div>,
+  },
+});
+
+export const NoFallback = meta.story({
+  args: {
+    if: true,
+    then: <div style={{ color: "var(--text-color)" }}>Visible content</div>,
+  },
+});
+
+export const FalsyNoFallback = meta.story({
+  args: {
+    if: false,
+    then: <div style={{ color: "var(--text-color)" }}>Hidden content</div>,
+  },
+});