Move stories and tests inside each component folders

front/src/layout/navbar/__stories__/Navbar.stories.tsx

@@ -1,6 +1,6 @@
 import { MemoryRouter } from 'react-router-dom';
 
-import Navbar from '../../../layout/navbar/Navbar';
+import Navbar from '../Navbar';
 
 export default {
   title: 'Navbar',

front/src/layout/navbar/__tests__/NavItem.test.tsx

@@ -1,6 +1,6 @@
 import { render, fireEvent } from '@testing-library/react';
 
-import { NavItemDefault } from '../../../stories/layout/navbar/NavItem.stories'; //👈 Our stories imported here.
+import { NavItemDefault } from '../__stories__/NavItem.stories';
 
 const mockedNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({

front/src/layout/navbar/__tests__/Navbar.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import { NavbarOnInsights } from '../../../stories/layout/navbar/Navbar.stories';
+import { NavbarOnInsights } from '../__stories__/Navbar.stories';
 
 it('Checks the NavItem renders', () => {
   const { getByRole } = render(<NavbarOnInsights />);

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 ListPanelHeader from './ListPanelHeader';
-import TaskListItem from './TaskListItem';
+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

@@ -1,5 +1,5 @@
 import { MemoryRouter } from 'react-router-dom';
-import Inbox from '../../../pages/inbox/Inbox';
+import Inbox from '../Inbox';
 
 export default {
   title: 'Inbox',

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

@@ -1,13 +1,13 @@
 import { MemoryRouter } from 'react-router-dom';
-import TaskListItem from '../../../pages/inbox/TaskListItem';
+import ListPanelItem from '../ListPanelItem';
 
 export default {
   title: 'Inbox',
-  component: TaskListItem,
+  component: ListPanelItem,
 };
 
-export const TaskListItemDefault = () => (
+export const ListPanelItemDefault = () => (
-  <TaskListItem
+  <ListPanelItem
     task={{
       id: 1,
       targetUser: 'Sylvie Vartan',

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

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import { InboxDefault } from '../../../stories/pages/inbox/Inbox.stories';
+import { InboxDefault } from '../__stories__/Inbox.stories';
 
 it('Checks the Inbox page render', () => {
   const { getAllByRole } = render(<InboxDefault />);

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

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
 
-import { TaskListDefault } from '../../../stories/pages/inbox/TaskList.stories';
+import { ListPanelDefault } from '../__stories__/ListPanel.stories';
 
 it('Checks the task list render', () => {
-  const { getAllByRole } = render(<TaskListDefault />);
+  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();
+});

front/src/stories/pages/inbox/TaskList.stories.tsx

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

front/src/stories/pages/inbox/TaskListHeader.stories.tsx

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

front/src/tests/pages/inbox/TaskListHeader.test.tsx

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

front/src/tests/pages/inbox/TaskListItem.test.tsx

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