Merge branch 'dev' into 34-add-storybook-for-form-components

packages/web/stories/Filter.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { fn } from "@storybook/test";
+
+import { useState } from "@storybook/preview-api";
+
+import Filter from "@sparcs-students/web/common/components/Filter/index";
+
+const meta: Meta<typeof Filter> = {
+  title: "components/Filter",
+  component: Filter,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {
+    itemList: {
+      control: false,
+    },
+    selectedList: {
+      control: false,
+    },
+    setSelectedList: {
+      control: false,
+    },
+  },
+
+  args: { setSelectedList: fn() },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const example: Story = {
+  args: {
+    itemList: ["개발자", "디자이너", "기획자"],
+    selectedList: ["개발자", "디자이너", "기획자"],
+  },
+  render: function Render(args) {
+    const [selectedList, setSelectedList] = useState<string[]>([
+      "개발자",
+      "디자이너",
+      "기획자",
+    ]);
+    return (
+      <Filter
+        {...args}
+        itemList={["개발자", "디자이너", "기획자"]}
+        selectedList={selectedList}
+        setSelectedList={setSelectedList}
+      />
+    );
+  },
+};

packages/web/stories/FoldableSectionTitle.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { fn } from "@storybook/test";
+import { useState } from "@storybook/preview-api";
+
+import FoldableSectionTitle from "@sparcs-students/web/common/components/FoldableSectionTitle";
+
+const meta: Meta<typeof FoldableSectionTitle> = {
+  title: "components/FoldableSectionTitle",
+  component: FoldableSectionTitle,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {
+    title: {
+      control: { type: "text" },
+    },
+    toggle: {
+      control: false,
+    },
+    toggleHandler: {
+      control: false,
+    },
+  },
+  args: { toggleHandler: fn() },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const example: Story = {
+  args: {
+    title: "2024년 가을학기",
+    toggle: false,
+  },
+  render: function Render(args) {
+    const [toggle, setToggle] = useState<boolean>(false);
+    return (
+      <FoldableSectionTitle
+        {...args}
+        toggle={toggle}
+        toggleHandler={() => setToggle(!toggle)}
+      />
+    );
+  },
+};

packages/web/stories/Info.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Info from "@sparcs-students/web/common/components/Info";
+
+const meta: Meta<typeof Info> = {
+  title: "components/Info",
+  component: Info,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {
+    text: {
+      control: { type: "text" },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const example: Story = {
+  args: {
+    text: "술박스는 술박스입니다.",
+  },
+};

packages/web/stories/SearchInput.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { useState } from "@storybook/preview-api";
+
+import SearchInput from "@sparcs-students/web/common/components/SearchInput";
+
+const meta: Meta<typeof SearchInput> = {
+  title: "components/SearchInput",
+  component: SearchInput,
+  parameters: {
+    layout: "centered",
+  },
+
+  argTypes: {
+    searchText: {
+      control: false,
+    },
+    handleChange: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const example: Story = {
+  args: {
+    searchText: "술박스",
+  },
+  render: function Render(args) {
+    const [searchText, setSearchText] = useState<string>("");
+    return (
+      <SearchInput
+        {...args}
+        searchText={searchText}
+        handleChange={setSearchText}
+      />
+    );
+  },
+};

packages/web/stories/Tag.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Tag from "@sparcs-students/web/common/components/Tag";
+
+const meta: Meta<typeof Tag> = {
+  title: "components/Tag",
+  component: Tag,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"], // CHACHA: needed to display description
+
+  argTypes: {
+    children: {
+      control: false,
+    },
+    color: {
+      control: { type: "select" },
+      options: [
+        "GREEN",
+        "BLUE",
+        "ORANGE",
+        "PURPLE",
+        "PINK",
+        "YELLOW",
+        "RED",
+        "GRAY",
+      ],
+      description:
+        "다양한 색을 전달할 수 있으나, 현재 GREEN, RED에 관한 디자인만 설정되어 있습니다.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const example: Story = {
+  args: {
+    children: <div>Example Tag Children</div>,
+  },
+};