adding monkeytype

frontend/storybook/stories/FieldIndicator.stories.tsx

@@ -0,0 +1,90 @@
+import preview from "#.storybook/preview";
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Component } from "solid-js";
+
+import { FieldIndicator } from "../../src/ts/components/ui/form/FieldIndicator";
+
+type MetaState = {
+  isTouched?: boolean;
+  isValid?: boolean;
+  isValidating?: boolean;
+  errors?: string[];
+  hasWarning?: boolean;
+  warnings?: string[];
+};
+
+function createFieldMock(meta: MetaState) {
+  const stateMeta = {
+    isTouched: true,
+    isValid: true,
+    isValidating: false,
+    errors: [],
+    ...meta,
+  };
+
+  return {
+    get state() {
+      return {
+        meta: stateMeta,
+      };
+    },
+
+    getMeta() {
+      return {
+        hasWarning: meta.hasWarning ?? false,
+        warnings: meta.warnings ?? [],
+      };
+    },
+  } as unknown as AnyFieldApi;
+}
+
+const meta = preview.meta({
+  title: "UI/Form/FieldIndicator",
+  component: FieldIndicator as Component<{
+    field?: AnyFieldApi;
+  }>,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+});
+
+export const Validating = meta.story({
+  args: {
+    field: createFieldMock({
+      isValidating: true,
+    }),
+  },
+});
+
+export const Warning = meta.story({
+  args: {
+    field: createFieldMock({
+      isValid: true,
+      hasWarning: true,
+      warnings: ["are you sure?", "are you really sure?"],
+    }),
+  },
+});
+
+export const Valid = meta.story({
+  args: {
+    field: createFieldMock({
+      isValid: true,
+    }),
+  },
+});
+
+export const Error = meta.story({
+  args: {
+    field: createFieldMock({
+      isValid: false,
+      errors: [
+        "Failed validation",
+        "Extra error",
+        "very very very very very very very very very long error",
+      ],
+    }),
+  },
+});