text: import React from "react";
  
  import { PureTaskList } from "./TaskList";
  import * as TaskStories from "./Task.stories";
  
  export default {
    component: PureTaskList,
    title: "TaskList",
    decorators: [(story) => <div style={{ padding: "3rem" }}>{story()}</div>], // 임의 wrapper를 제공하는 방법. React Context 등 provider로 감싸줄 때도 사용할 수 있다.
  };
  
  const Template = (args) => <PureTaskList {...args} />;
  
  export const Default = Template.bind({});
  Default.args = {
    // Shaping the stories through args composition.
    // The data was inherited from the Default story in task.stories.js.
    tasks: [
      { ...TaskStories.Default.args.task, id: "1", title: "Task 1" },
      { ...TaskStories.Default.args.task, id: "2", title: "Task 2" },
      { ...TaskStories.Default.args.task, id: "3", title: "Task 3" },
      { ...TaskStories.Default.args.task, id: "4", title: "Task 4" },
      { ...TaskStories.Default.args.task, id: "5", title: "Task 5" },
      { ...TaskStories.Default.args.task, id: "6", title: "Task 6" },
    ],
  };
  
  export const WithPinnedTasks = Template.bind({});
  WithPinnedTasks.args = {
    // Shaping the stories through args composition.
    // Inherited data coming from the Default story.
    tasks: [
      ...Default.args.tasks.slice(0, 5),
      { id: "6", title: "Task 6 (pinned)", state: "TASK_PINNED" },
    ],
  };
  
  export const Loading = Template.bind({});
  Loading.args = {
    tasks: [],
    loading: true,
  };
  
  export const Empty = Template.bind({});
  Empty.args = {
    // Shaping the stories through args composition.
    // Inherited data coming from the Loading story.
    ...Loading.args,
    loading: false,
  };
  