adding monkeytype

frontend/storybook/stories/Fa.stories.tsx

@@ -0,0 +1,119 @@
+import preview from "#.storybook/preview";
+
+import { Fa } from "../../src/ts/components/common/Fa";
+
+const meta = preview.meta({
+  title: "Common/Fa",
+  component: Fa,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    icon: { control: "text" },
+    variant: {
+      control: "select",
+      options: ["solid", "regular", "brand"],
+    },
+    fixedWidth: { control: "boolean" },
+    spin: { control: "boolean" },
+    size: { control: "number" },
+    class: { control: "text" },
+  },
+});
+
+export const Default = meta.story({
+  args: {
+    icon: "fa-cog",
+    variant: "solid",
+  },
+});
+
+export const Spinning = meta.story({
+  args: {
+    icon: "fa-circle-notch",
+    variant: "solid",
+    spin: true,
+  },
+});
+
+export const FixedWidth = meta.story({
+  args: {
+    icon: "fa-home",
+    variant: "solid",
+    fixedWidth: true,
+  },
+});
+
+export const CustomSize = meta.story({
+  args: {
+    icon: "fa-star",
+    variant: "solid",
+    size: 3,
+  },
+});
+
+export const Brand = meta.story({
+  args: {
+    icon: "fa-discord",
+    variant: "brand",
+    size: 2,
+  },
+});
+
+export const AllVariants = meta.story({
+  render: () => (
+    <div
+      style={{
+        display: "grid",
+        "grid-template-columns": "auto repeat(3, 1fr)",
+        gap: "16px",
+        "align-items": "center",
+        "font-size": "1.5em",
+      }}
+    >
+      <div style={{ "font-size": "10px", color: "var(--sub-color)" }} />
+      <div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
+        Solid
+      </div>
+      <div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
+        Regular
+      </div>
+      <div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
+        Brand
+      </div>
+
+      <div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
+        Default
+      </div>
+      <Fa icon="fa-cog" variant="solid" />
+      <Fa icon="fa-circle" variant="regular" />
+      <Fa icon="fa-discord" variant="brand" />
+
+      <div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
+        Fixed Width
+      </div>
+      <Fa icon="fa-cog" variant="solid" fixedWidth />
+      <Fa icon="fa-circle" variant="regular" fixedWidth />
+      <Fa icon="fa-discord" variant="brand" fixedWidth />
+
+      <div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
+        Spinning
+      </div>
+      <Fa icon="fa-circle-notch" variant="solid" spin />
+      <Fa icon="fa-circle-notch" variant="solid" spin />
+      <div />
+
+      <div style={{ "font-size": "10px", color: "var(--sub-color)" }}>
+        Sizes
+      </div>
+      <div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
+        <Fa icon="fa-star" variant="solid" size={1} />
+        <Fa icon="fa-star" variant="solid" size={2} />
+        <Fa icon="fa-star" variant="solid" size={3} />
+      </div>
+      <div />
+      <div />
+    </div>
+  ),
+});