Move stories and tests inside each component folders

front/src/pages/inbox/Inbox.tsx

@@ -1,10 +1,10 @@
 import FullWidthContainer from '../../layout/containers/FullWidthContainer';
-import TaskList from './TaskList';
+import ListPanel from './ListPanel';
 
 function Inbox() {
   return (
     <FullWidthContainer>
-      <TaskList />
+      <ListPanel />
     </FullWidthContainer>
   );
 }

front/src/pages/inbox/ListPanel.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import TaskListHeader from './TaskListHeader';
-import TaskListItem from './TaskListItem';
+import ListPanelHeader from './ListPanelHeader';
+import ListPanelItem from './ListPanelItem';
 
 const StyledList = styled.div`
   display: flex;
@@ -17,7 +17,7 @@ export type Task = {
   lastMessage: string;
 };
 
-function TaskList() {
+function ListPanel() {
   const tasks: Task[] = [
     {
       id: 1,
@@ -38,13 +38,13 @@ function TaskList() {
   return (
     <StyledList>
       <>
-        <TaskListHeader />
+        <ListPanelHeader />
         {tasks.map((item) => (
-          <TaskListItem key={item.id} task={item} />
+          <ListPanelItem key={item.id} task={item} />
         ))}
       </>
     </StyledList>
   );
 }
 
-export default TaskList;
+export default ListPanel;

front/src/pages/inbox/ListPanelHeader.tsx

@@ -10,8 +10,8 @@ const StyledHeader = styled.div`
   border-bottom: 1px solid #eaecee;
 `;
 
-function TaskListHeader() {
+function ListPanelHeader() {
   return <StyledHeader>6 tasks waiting</StyledHeader>;
 }
 
-export default TaskListHeader;
+export default ListPanelHeader;

front/src/pages/inbox/ListPanelItem.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Task } from './TaskList';
+import { Task } from './ListPanel';
 
 type OwnProps = {
   task: Task;
@@ -72,7 +72,7 @@ const StyledContent = styled.div`
   margin-top: 8px;
 `;
 
-function TaskListItem({ task }: OwnProps) {
+function ListPanelItem({ task }: OwnProps) {
   return (
     <StyledListItem>
       <StyledHeader>
@@ -95,4 +95,4 @@ function TaskListItem({ task }: OwnProps) {
   );
 }
 
-export default TaskListItem;
+export default ListPanelItem;

front/src/pages/inbox/PluginPanel.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import ListPanelHeader from './ListPanelHeader';
+import ListPanelItem from './ListPanelItem';
+
+const StyledList = styled.div`
+  display: flex;
+  width: 325px;
+  flex-direction: column;
+  border-right: 2px solid #eaecee;
+`;
+
+export type Task = {
+  id: number;
+  targetUser: string;
+  label: string;
+  time: string;
+  lastMessage: string;
+};
+
+function ListPanel() {
+  const tasks: Task[] = [
+    {
+      id: 1,
+      targetUser: 'Sylvie Vartan',
+      label: 'Guest at #xxx property',
+      time: '3h',
+      lastMessage:
+        'I’m looking for my order but couldn’t find it. Could you help me find it. I don’t know where ...',
+    },
+    {
+      id: 2,
+      targetUser: 'Johnny Halliday',
+      label: 'Guest at #xxx property',
+      time: '4h',
+      lastMessage: 'Hello, this is Johnny',
+    },
+  ];
+  return (
+    <StyledList>
+      <>
+        <ListPanelHeader />
+        {tasks.map((item) => (
+          <ListPanelItem key={item.id} task={item} />
+        ))}
+      </>
+    </StyledList>
+  );
+}
+
+export default ListPanel;

front/src/pages/inbox/__stories__/Inbox.stories.tsx

@@ -0,0 +1,13 @@
+import { MemoryRouter } from 'react-router-dom';
+import Inbox from '../Inbox';
+
+export default {
+  title: 'Inbox',
+  component: Inbox,
+};
+
+export const InboxDefault = () => (
+  <MemoryRouter>
+    <Inbox />
+  </MemoryRouter>
+);

front/src/pages/inbox/__stories__/ListPanel.stories.tsx

@@ -0,0 +1,8 @@
+import ListPanel from '../ListPanel';
+
+export default {
+  title: 'Inbox',
+  component: ListPanel,
+};
+
+export const ListPanelDefault = () => <ListPanel />;

front/src/pages/inbox/__stories__/ListPanelHeader.stories.tsx

@@ -0,0 +1,9 @@
+import { MemoryRouter } from 'react-router-dom';
+import ListPanelHeader from '../ListPanelHeader';
+
+export default {
+  title: 'Inbox',
+  component: ListPanelHeader,
+};
+
+export const ListPanelHeaderDefault = () => <ListPanelHeader />;

front/src/pages/inbox/__stories__/ListPanelItem.stories.tsx

@@ -0,0 +1,20 @@
+import { MemoryRouter } from 'react-router-dom';
+import ListPanelItem from '../ListPanelItem';
+
+export default {
+  title: 'Inbox',
+  component: ListPanelItem,
+};
+
+export const ListPanelItemDefault = () => (
+  <ListPanelItem
+    task={{
+      id: 1,
+      targetUser: 'Sylvie Vartan',
+      label: 'Guest at #xxx property',
+      time: '3h',
+      lastMessage:
+        'I’m looking for my order but couldn’t find it. Could you help me find it. I don’t know where ...',
+    }}
+  />
+);

front/src/pages/inbox/__tests__/Inbox.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { InboxDefault } from '../__stories__/Inbox.stories';
+
+it('Checks the Inbox page render', () => {
+  const { getAllByRole } = render(<InboxDefault />);
+
+  const button = getAllByRole('button');
+  expect(button[0]).toHaveTextContent('Sylvie Vartan');
+});

front/src/pages/inbox/__tests__/ListPanel.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { ListPanelDefault } from '../__stories__/ListPanel.stories';
+
+it('Checks the task list render', () => {
+  const { getAllByRole } = render(<ListPanelDefault />);
+
+  const button = getAllByRole('button');
+  expect(button[0]).toHaveTextContent('Sylvie Vartan');
+});

front/src/pages/inbox/__tests__/ListPanelHeader.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { ListPanelHeaderDefault } from '../__stories__/ListPanelHeader.stories';
+
+it('Checks the ListPanelHeader render', () => {
+  const { getAllByText } = render(<ListPanelHeaderDefault />);
+
+  const text = getAllByText('6 tasks waiting');
+  expect(text).toBeDefined();
+});

front/src/pages/inbox/__tests__/ListPanelItem.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { ListPanelItemDefault } from '../__stories__/ListPanelItem.stories';
+
+it('Checks the ListPanelItem render', () => {
+  const { getAllByText } = render(<ListPanelItemDefault />);
+
+  const text = getAllByText('Sylvie Vartan');
+  expect(text).toBeDefined();
+});