text: import React from "react";
  
  import {
    Title,
    Subtitle,
    Description,
    Primary,
    ArgsTable,
    Stories,
    PRIMARY_STORY,
  } from "@storybook/addon-docs";
  
  import TaskList from "../components/TaskList";
  import Task from "../components/Task";
  import * as TaskStories from "./Task.stories";
  
  import TaskListDocs from "./TaskList.docs.mdx";
  
  import { Provider } from "react-redux";
  
  import { configureStore, createSlice } from "@reduxjs/toolkit";
  
  // A super-simple mock of the state of the store
  export const MockedState = {
    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" },
    ],
    status: "idle",
    error: null,
  };
  
  // A super-simple mock of a redux store
  const Mockstore = ({ taskboxState, children }) => (
    <Provider
      store={configureStore({
        reducer: {
          taskbox: createSlice({
            name: "taskbox",
            initialState: taskboxState,
            reducers: {
              updateTaskState: (state, action) => {
                const { id, newTaskState } = action.payload;
                const task = state.tasks.findIndex((task) => task.id === id);
                if (task >= 0) {
                  state.tasks[task].state = newTaskState;
                }
              },
            },
          }).reducer,
        },
      })}
    >
      {children}
    </Provider>
  );
  
  export default {
    component: TaskList,
    title: "Components/TaskList",
    decorators: [(story) => <div style={{ padding: "3rem" }}>{story()}</div>],
    subcomponents: { Task },
    parameters: {
      docs: {
        page: TaskListDocs,
      },
    },
    excludeStories: /.*MockedState$/,
  };
  
  const Template = () => <TaskList />;
  
  export const Default = Template.bind({});
  Default.decorators = [
    (story) => <Mockstore taskboxState={MockedState}>{story()}</Mockstore>,
  ];
  
  export const WithPinnedTasks = Template.bind({});
  WithPinnedTasks.decorators = [
    (story) => {
      const pinnedtasks = [
        ...MockedState.tasks.slice(0, 5),
        { id: "6", title: "Task 6 (pinned)", state: "TASK_PINNED" },
      ];
  
      return (
        <Mockstore
          taskboxState={{
            ...MockedState,
            tasks: pinnedtasks,
          }}
        >
          {story()}
        </Mockstore>
      );
    },
  ];
  
  export const Loading = Template.bind({});
  Loading.decorators = [
    (story) => (
      <Mockstore
        taskboxState={{
          ...MockedState,
          status: "loading",
        }}
      >
        {story()}
      </Mockstore>
    ),
  ];
  
  export const Empty = Template.bind({});
  Empty.decorators = [
    (story) => (
      <Mockstore
        taskboxState={{
          ...MockedState,
          tasks: [],
        }}
      >
        {story()}
      </Mockstore>
    ),
  ];
  