text: import PureTaskList from './PureTaskList.vue';
  
  import * as TaskStories from './Task.stories';
  
  export default {
      component: PureTaskList,
      title: 'PureTaskList',
      decorators: [() => ({ template: '<div style="margin: 3em;"><story/></div>' })],
      argTypes: {
          onPinTask: {},
          onArchiveTask: {},
      },
  };
  
  const Template = args => ({
      components: { PureTaskList },
      setup() {
          return { args, ...TaskStories.actionsData };
      },
      template: '<PureTaskList v-bind="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,
  };