create story for FilterUI

Author: aster-void

packages/web/src/components/FilterUI/FilterUI.tsx

@@ -16,9 +16,6 @@ import { RegistrationFilter } from "./FilterComponents/RegistrationFilter.tsx";
 import { SemestersCheckbox } from "./FilterComponents/Semester.tsx";
 import { FilterCard } from "./UI/FilterCard.tsx";
 
-/**
- *  フィルタの型定義
- */
 type Filter = {
   isFreewordForSyllabusDetail?: boolean; // フリーワード検索
   semesters?: Semester[]; // セメスター
@@ -29,10 +26,6 @@ type Filter = {
   showNotRegistered?: boolean; // 未履修の授業を表示する
 };
 
-/**
- *  フィルタUI
- * @returns フィルタUI
- */
 export const FilterUI: React.FC = () => {
   // 現在のフィルター
   const [filter, setFilter] = useState<Filter>({});

packages/web/src/components/FilterUI/Sample/page.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FilterUI } from "@/components/FilterUI/FilterUI.tsx";
+
+const meta = {
+  title: "Components/FilterUI",
+  component: FilterUI,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `A filter UI component that allows users to filter courses based on various criteria.
+        Includes filters for free text search, semesters, evaluation methods, class types, and registration status.`,
+      },
+    },
+  },
+  argTypes: {
+    // No direct props since FilterUI manages its own state internally
+  },
+} satisfies Meta<typeof FilterUI>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story showing the FilterUI with no initial filters
+const Template: Story = {
+  render: () => <FilterUI />,
+};
+
+export const Default = {
+  ...Template,
+  args: {},
+};