From 92267701ffa96a2ce9d4f35e3484cd159541ea87 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 5 Dec 2022 21:47:11 +0100 Subject: [PATCH 1/3] Rename tabs to Inbox, Contacts, Insights --- front/src/App.tsx | 12 ++++++------ front/src/layout/navbar/Navbar.tsx | 14 +++++++------- front/src/pages/{History.tsx => Contacts.tsx} | 4 ++-- front/src/pages/{Performances.tsx => Insights.tsx} | 4 ++-- .../src/pages/{tasks/Tasks.tsx => inbox/Inbox.tsx} | 4 ++-- front/src/pages/{tasks => inbox}/TaskList.tsx | 0 .../src/pages/{tasks => inbox}/TaskListHeader.tsx | 0 front/src/pages/{tasks => inbox}/TaskListItem.tsx | 0 front/src/stories/layout/navbar/Navbar.stories.tsx | 4 ++-- front/src/stories/pages/inbox/Inbox.stories.tsx | 13 +++++++++++++ .../pages/{tasks => inbox}/TaskList.stories.tsx | 4 ++-- .../{tasks => inbox}/TaskListHeader.stories.tsx | 4 ++-- .../{tasks => inbox}/TaskListItem.stories.tsx | 4 ++-- front/src/stories/pages/tasks/Tasks.stories.tsx | 13 ------------- front/src/tests/layout/navbar/Navbar.test.tsx | 8 ++++---- .../{tasks/Tasks.test.tsx => inbox/Inbox.test.tsx} | 6 +++--- .../tests/pages/{tasks => inbox}/TaskList.test.tsx | 4 ++-- .../pages/{tasks => inbox}/TaskListHeader.test.tsx | 2 +- .../pages/{tasks => inbox}/TaskListItem.test.tsx | 2 +- server/.gitignore | 2 +- 20 files changed, 52 insertions(+), 52 deletions(-) rename front/src/pages/{History.tsx => Contacts.tsx} (62%) rename front/src/pages/{Performances.tsx => Insights.tsx} (60%) rename front/src/pages/{tasks/Tasks.tsx => inbox/Inbox.tsx} (83%) rename front/src/pages/{tasks => inbox}/TaskList.tsx (100%) rename front/src/pages/{tasks => inbox}/TaskListHeader.tsx (100%) rename front/src/pages/{tasks => inbox}/TaskListItem.tsx (100%) create mode 100644 front/src/stories/pages/inbox/Inbox.stories.tsx rename front/src/stories/pages/{tasks => inbox}/TaskList.stories.tsx (57%) rename front/src/stories/pages/{tasks => inbox}/TaskListHeader.stories.tsx (66%) rename front/src/stories/pages/{tasks => inbox}/TaskListItem.stories.tsx (84%) delete mode 100644 front/src/stories/pages/tasks/Tasks.stories.tsx rename front/src/tests/pages/{tasks/Tasks.test.tsx => inbox/Inbox.test.tsx} (50%) rename front/src/tests/pages/{tasks => inbox}/TaskList.test.tsx (67%) rename front/src/tests/pages/{tasks => inbox}/TaskListHeader.test.tsx (72%) rename front/src/tests/pages/{tasks => inbox}/TaskListItem.test.tsx (72%) diff --git a/front/src/App.tsx b/front/src/App.tsx index 08bd528e9..57fb0953c 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import Tasks from './pages/tasks/Tasks'; -import History from './pages/History'; -import Performances from './pages/Performances'; +import Inbox from './pages/inbox/Inbox'; +import Contacts from './pages/Contacts'; +import Insights from './pages/Insights'; import AppLayout from './layout/AppLayout'; import { Routes, Route } from 'react-router-dom'; @@ -9,9 +9,9 @@ function App() { return ( - } /> - } /> - } /> + } /> + } /> + } /> ); diff --git a/front/src/layout/navbar/Navbar.tsx b/front/src/layout/navbar/Navbar.tsx index 09433bcb2..8931e0b88 100644 --- a/front/src/layout/navbar/Navbar.tsx +++ b/front/src/layout/navbar/Navbar.tsx @@ -16,7 +16,7 @@ function Navbar() { <>

This is the history page

@@ -6,4 +6,4 @@ function History() { ); } -export default History; +export default Contacts; diff --git a/front/src/pages/Performances.tsx b/front/src/pages/Insights.tsx similarity index 60% rename from front/src/pages/Performances.tsx rename to front/src/pages/Insights.tsx index a9837b175..295f39af0 100644 --- a/front/src/pages/Performances.tsx +++ b/front/src/pages/Insights.tsx @@ -1,4 +1,4 @@ -function Performances() { +function Insights() { return (

This is the performances page

@@ -6,4 +6,4 @@ function Performances() { ); } -export default Performances; +export default Insights; diff --git a/front/src/pages/tasks/Tasks.tsx b/front/src/pages/inbox/Inbox.tsx similarity index 83% rename from front/src/pages/tasks/Tasks.tsx rename to front/src/pages/inbox/Inbox.tsx index 4c3822e18..4a0779ee3 100644 --- a/front/src/pages/tasks/Tasks.tsx +++ b/front/src/pages/inbox/Inbox.tsx @@ -1,7 +1,7 @@ import FullWidthContainer from '../../layout/containers/FullWidthContainer'; import TaskList from './TaskList'; -function Tasks() { +function Inbox() { return ( @@ -9,4 +9,4 @@ function Tasks() { ); } -export default Tasks; +export default Inbox; diff --git a/front/src/pages/tasks/TaskList.tsx b/front/src/pages/inbox/TaskList.tsx similarity index 100% rename from front/src/pages/tasks/TaskList.tsx rename to front/src/pages/inbox/TaskList.tsx diff --git a/front/src/pages/tasks/TaskListHeader.tsx b/front/src/pages/inbox/TaskListHeader.tsx similarity index 100% rename from front/src/pages/tasks/TaskListHeader.tsx rename to front/src/pages/inbox/TaskListHeader.tsx diff --git a/front/src/pages/tasks/TaskListItem.tsx b/front/src/pages/inbox/TaskListItem.tsx similarity index 100% rename from front/src/pages/tasks/TaskListItem.tsx rename to front/src/pages/inbox/TaskListItem.tsx diff --git a/front/src/stories/layout/navbar/Navbar.stories.tsx b/front/src/stories/layout/navbar/Navbar.stories.tsx index 772c952e9..841b4c6df 100644 --- a/front/src/stories/layout/navbar/Navbar.stories.tsx +++ b/front/src/stories/layout/navbar/Navbar.stories.tsx @@ -7,8 +7,8 @@ export default { component: Navbar, }; -export const NavbarOnPerformance = () => ( - +export const NavbarOnInsights = () => ( + ); diff --git a/front/src/stories/pages/inbox/Inbox.stories.tsx b/front/src/stories/pages/inbox/Inbox.stories.tsx new file mode 100644 index 000000000..97aa92fa9 --- /dev/null +++ b/front/src/stories/pages/inbox/Inbox.stories.tsx @@ -0,0 +1,13 @@ +import { MemoryRouter } from 'react-router-dom'; +import Inbox from '../../../pages/inbox/Inbox'; + +export default { + title: 'Inbox', + component: Inbox, +}; + +export const InboxDefault = () => ( + + + +); diff --git a/front/src/stories/pages/tasks/TaskList.stories.tsx b/front/src/stories/pages/inbox/TaskList.stories.tsx similarity index 57% rename from front/src/stories/pages/tasks/TaskList.stories.tsx rename to front/src/stories/pages/inbox/TaskList.stories.tsx index 0a98aea9d..70eec25ec 100644 --- a/front/src/stories/pages/tasks/TaskList.stories.tsx +++ b/front/src/stories/pages/inbox/TaskList.stories.tsx @@ -1,7 +1,7 @@ -import TaskList from '../../../pages/tasks/TaskList'; +import TaskList from '../../../pages/inbox/TaskList'; export default { - title: 'Tasks', + title: 'Inbox', component: TaskList, }; diff --git a/front/src/stories/pages/tasks/TaskListHeader.stories.tsx b/front/src/stories/pages/inbox/TaskListHeader.stories.tsx similarity index 66% rename from front/src/stories/pages/tasks/TaskListHeader.stories.tsx rename to front/src/stories/pages/inbox/TaskListHeader.stories.tsx index 888660da6..58a5aa3b2 100644 --- a/front/src/stories/pages/tasks/TaskListHeader.stories.tsx +++ b/front/src/stories/pages/inbox/TaskListHeader.stories.tsx @@ -1,8 +1,8 @@ import { MemoryRouter } from 'react-router-dom'; -import TaskListHeader from '../../../pages/tasks/TaskListHeader'; +import TaskListHeader from '../../../pages/inbox/TaskListHeader'; export default { - title: 'Tasks', + title: 'Inbox', component: TaskListHeader, }; diff --git a/front/src/stories/pages/tasks/TaskListItem.stories.tsx b/front/src/stories/pages/inbox/TaskListItem.stories.tsx similarity index 84% rename from front/src/stories/pages/tasks/TaskListItem.stories.tsx rename to front/src/stories/pages/inbox/TaskListItem.stories.tsx index c611ad175..143dce87a 100644 --- a/front/src/stories/pages/tasks/TaskListItem.stories.tsx +++ b/front/src/stories/pages/inbox/TaskListItem.stories.tsx @@ -1,8 +1,8 @@ import { MemoryRouter } from 'react-router-dom'; -import TaskListItem from '../../../pages/tasks/TaskListItem'; +import TaskListItem from '../../../pages/inbox/TaskListItem'; export default { - title: 'Tasks', + title: 'Inbox', component: TaskListItem, }; diff --git a/front/src/stories/pages/tasks/Tasks.stories.tsx b/front/src/stories/pages/tasks/Tasks.stories.tsx deleted file mode 100644 index 1a3121735..000000000 --- a/front/src/stories/pages/tasks/Tasks.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { MemoryRouter } from 'react-router-dom'; -import Tasks from '../../../pages/tasks/Tasks'; - -export default { - title: 'Tasks', - component: Tasks, -}; - -export const TasksDefault = () => ( - - - -); diff --git a/front/src/tests/layout/navbar/Navbar.test.tsx b/front/src/tests/layout/navbar/Navbar.test.tsx index 6f4298e1e..0e813259e 100644 --- a/front/src/tests/layout/navbar/Navbar.test.tsx +++ b/front/src/tests/layout/navbar/Navbar.test.tsx @@ -1,16 +1,16 @@ import { render } from '@testing-library/react'; -import { NavbarOnPerformance } from '../../../stories/layout/navbar/Navbar.stories'; +import { NavbarOnInsights } from '../../../stories/layout/navbar/Navbar.stories'; it('Checks the NavItem renders', () => { - const { getByRole } = render(); + const { getByRole } = render(); - expect(getByRole('button', { name: 'Performances' })).toHaveAttribute( + expect(getByRole('button', { name: 'Insights' })).toHaveAttribute( 'aria-selected', 'true', ); - expect(getByRole('button', { name: 'Tasks' })).toHaveAttribute( + expect(getByRole('button', { name: 'Inbox' })).toHaveAttribute( 'aria-selected', 'false', ); diff --git a/front/src/tests/pages/tasks/Tasks.test.tsx b/front/src/tests/pages/inbox/Inbox.test.tsx similarity index 50% rename from front/src/tests/pages/tasks/Tasks.test.tsx rename to front/src/tests/pages/inbox/Inbox.test.tsx index 24e70d89e..6918edef7 100644 --- a/front/src/tests/pages/tasks/Tasks.test.tsx +++ b/front/src/tests/pages/inbox/Inbox.test.tsx @@ -1,9 +1,9 @@ import { render } from '@testing-library/react'; -import { TasksDefault } from '../../../stories/pages/tasks/Tasks.stories'; +import { InboxDefault } from '../../../stories/pages/inbox/Inbox.stories'; -it('Checks the Tasks page render', () => { - const { getAllByRole } = render(); +it('Checks the Inbox page render', () => { + const { getAllByRole } = render(); const button = getAllByRole('button'); expect(button[0]).toHaveTextContent('Sylvie Vartan'); diff --git a/front/src/tests/pages/tasks/TaskList.test.tsx b/front/src/tests/pages/inbox/TaskList.test.tsx similarity index 67% rename from front/src/tests/pages/tasks/TaskList.test.tsx rename to front/src/tests/pages/inbox/TaskList.test.tsx index 993aacd25..8ae9b42f5 100644 --- a/front/src/tests/pages/tasks/TaskList.test.tsx +++ b/front/src/tests/pages/inbox/TaskList.test.tsx @@ -1,8 +1,8 @@ import { render } from '@testing-library/react'; -import { TaskListDefault } from '../../../stories/pages/tasks/TaskList.stories'; +import { TaskListDefault } from '../../../stories/pages/inbox/TaskList.stories'; -it('Checks the Tasks page render', () => { +it('Checks the task list render', () => { const { getAllByRole } = render(); const button = getAllByRole('button'); diff --git a/front/src/tests/pages/tasks/TaskListHeader.test.tsx b/front/src/tests/pages/inbox/TaskListHeader.test.tsx similarity index 72% rename from front/src/tests/pages/tasks/TaskListHeader.test.tsx rename to front/src/tests/pages/inbox/TaskListHeader.test.tsx index b6d42fe91..e5ce2625c 100644 --- a/front/src/tests/pages/tasks/TaskListHeader.test.tsx +++ b/front/src/tests/pages/inbox/TaskListHeader.test.tsx @@ -1,6 +1,6 @@ import { render } from '@testing-library/react'; -import { TaskListHeaderDefault } from '../../../stories/pages/tasks/TaskListHeader.stories'; +import { TaskListHeaderDefault } from '../../../stories/pages/inbox/TaskListHeader.stories'; it('Checks the TaskListHeader render', () => { const { getAllByText } = render(); diff --git a/front/src/tests/pages/tasks/TaskListItem.test.tsx b/front/src/tests/pages/inbox/TaskListItem.test.tsx similarity index 72% rename from front/src/tests/pages/tasks/TaskListItem.test.tsx rename to front/src/tests/pages/inbox/TaskListItem.test.tsx index 27331e5fa..a9d9bf64a 100644 --- a/front/src/tests/pages/tasks/TaskListItem.test.tsx +++ b/front/src/tests/pages/inbox/TaskListItem.test.tsx @@ -1,6 +1,6 @@ import { render } from '@testing-library/react'; -import { TaskListItemDefault } from '../../../stories/pages/tasks/TaskListItem.stories'; +import { TaskListItemDefault } from '../../../stories/pages/inbox/TaskListItem.stories'; it('Checks the TaskListItem render', () => { const { getAllByText } = render(); diff --git a/server/.gitignore b/server/.gitignore index 22f55adc5..f50588412 100644 --- a/server/.gitignore +++ b/server/.gitignore @@ -30,6 +30,6 @@ lerna-debug.log* # IDE - VSCode .vscode/* !.vscode/settings.json -!.vscode/tasks.json +!.vscode/inbox.json !.vscode/launch.json !.vscode/extensions.json \ No newline at end of file From 374573871cecd7d8f6cfbab7b6853f7eef001e0f Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 5 Dec 2022 21:56:53 +0100 Subject: [PATCH 2/3] Move stories and tests inside each component folders --- .../navbar/__stories__}/NavItem.stories.tsx | 0 .../navbar/__stories__}/Navbar.stories.tsx | 2 +- .../navbar/__tests__}/NavItem.test.tsx | 2 +- .../navbar/__tests__}/Navbar.test.tsx | 2 +- front/src/pages/inbox/Inbox.tsx | 4 +- .../inbox/{TaskList.tsx => ListPanel.tsx} | 12 ++--- ...TaskListHeader.tsx => ListPanelHeader.tsx} | 4 +- .../{TaskListItem.tsx => ListPanelItem.tsx} | 6 +-- front/src/pages/inbox/PluginPanel.tsx | 50 +++++++++++++++++++ .../inbox/__stories__}/Inbox.stories.tsx | 2 +- .../inbox/__stories__/ListPanel.stories.tsx | 8 +++ .../__stories__/ListPanelHeader.stories.tsx | 9 ++++ .../__stories__/ListPanelItem.stories.tsx} | 8 +-- .../inbox/__tests__}/Inbox.test.tsx | 2 +- .../inbox/__tests__/ListPanel.test.tsx} | 4 +- .../inbox/__tests__/ListPanelHeader.test.tsx | 10 ++++ .../inbox/__tests__/ListPanelItem.test.tsx | 10 ++++ .../stories/pages/inbox/TaskList.stories.tsx | 8 --- .../pages/inbox/TaskListHeader.stories.tsx | 9 ---- .../tests/pages/inbox/TaskListHeader.test.tsx | 10 ---- .../tests/pages/inbox/TaskListItem.test.tsx | 10 ---- 21 files changed, 111 insertions(+), 61 deletions(-) rename front/src/{stories/layout/navbar => layout/navbar/__stories__}/NavItem.stories.tsx (100%) rename front/src/{stories/layout/navbar => layout/navbar/__stories__}/Navbar.stories.tsx (81%) rename front/src/{tests/layout/navbar => layout/navbar/__tests__}/NavItem.test.tsx (80%) rename front/src/{tests/layout/navbar => layout/navbar/__tests__}/Navbar.test.tsx (81%) rename front/src/pages/inbox/{TaskList.tsx => ListPanel.tsx} (79%) rename front/src/pages/inbox/{TaskListHeader.tsx => ListPanelHeader.tsx} (82%) rename front/src/pages/inbox/{TaskListItem.tsx => ListPanelItem.tsx} (94%) create mode 100644 front/src/pages/inbox/PluginPanel.tsx rename front/src/{stories/pages/inbox => pages/inbox/__stories__}/Inbox.stories.tsx (80%) create mode 100644 front/src/pages/inbox/__stories__/ListPanel.stories.tsx create mode 100644 front/src/pages/inbox/__stories__/ListPanelHeader.stories.tsx rename front/src/{stories/pages/inbox/TaskListItem.stories.tsx => pages/inbox/__stories__/ListPanelItem.stories.tsx} (70%) rename front/src/{tests/pages/inbox => pages/inbox/__tests__}/Inbox.test.tsx (76%) rename front/src/{tests/pages/inbox/TaskList.test.tsx => pages/inbox/__tests__/ListPanel.test.tsx} (58%) create mode 100644 front/src/pages/inbox/__tests__/ListPanelHeader.test.tsx create mode 100644 front/src/pages/inbox/__tests__/ListPanelItem.test.tsx delete mode 100644 front/src/stories/pages/inbox/TaskList.stories.tsx delete mode 100644 front/src/stories/pages/inbox/TaskListHeader.stories.tsx delete mode 100644 front/src/tests/pages/inbox/TaskListHeader.test.tsx delete mode 100644 front/src/tests/pages/inbox/TaskListItem.test.tsx diff --git a/front/src/stories/layout/navbar/NavItem.stories.tsx b/front/src/layout/navbar/__stories__/NavItem.stories.tsx similarity index 100% rename from front/src/stories/layout/navbar/NavItem.stories.tsx rename to front/src/layout/navbar/__stories__/NavItem.stories.tsx diff --git a/front/src/stories/layout/navbar/Navbar.stories.tsx b/front/src/layout/navbar/__stories__/Navbar.stories.tsx similarity index 81% rename from front/src/stories/layout/navbar/Navbar.stories.tsx rename to front/src/layout/navbar/__stories__/Navbar.stories.tsx index 841b4c6df..63dca6b2a 100644 --- a/front/src/stories/layout/navbar/Navbar.stories.tsx +++ b/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', diff --git a/front/src/tests/layout/navbar/NavItem.test.tsx b/front/src/layout/navbar/__tests__/NavItem.test.tsx similarity index 80% rename from front/src/tests/layout/navbar/NavItem.test.tsx rename to front/src/layout/navbar/__tests__/NavItem.test.tsx index 7d94194eb..f235428b4 100644 --- a/front/src/tests/layout/navbar/NavItem.test.tsx +++ b/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', () => ({ diff --git a/front/src/tests/layout/navbar/Navbar.test.tsx b/front/src/layout/navbar/__tests__/Navbar.test.tsx similarity index 81% rename from front/src/tests/layout/navbar/Navbar.test.tsx rename to front/src/layout/navbar/__tests__/Navbar.test.tsx index 0e813259e..b0bdb9553 100644 --- a/front/src/tests/layout/navbar/Navbar.test.tsx +++ b/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(); diff --git a/front/src/pages/inbox/Inbox.tsx b/front/src/pages/inbox/Inbox.tsx index 4a0779ee3..6d876e681 100644 --- a/front/src/pages/inbox/Inbox.tsx +++ b/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 ( - + ); } diff --git a/front/src/pages/inbox/TaskList.tsx b/front/src/pages/inbox/ListPanel.tsx similarity index 79% rename from front/src/pages/inbox/TaskList.tsx rename to front/src/pages/inbox/ListPanel.tsx index 102885df6..cf1752d89 100644 --- a/front/src/pages/inbox/TaskList.tsx +++ b/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 ( <> - + {tasks.map((item) => ( - + ))} ); } -export default TaskList; +export default ListPanel; diff --git a/front/src/pages/inbox/TaskListHeader.tsx b/front/src/pages/inbox/ListPanelHeader.tsx similarity index 82% rename from front/src/pages/inbox/TaskListHeader.tsx rename to front/src/pages/inbox/ListPanelHeader.tsx index 78627cc4c..1d0a0ad81 100644 --- a/front/src/pages/inbox/TaskListHeader.tsx +++ b/front/src/pages/inbox/ListPanelHeader.tsx @@ -10,8 +10,8 @@ const StyledHeader = styled.div` border-bottom: 1px solid #eaecee; `; -function TaskListHeader() { +function ListPanelHeader() { return 6 tasks waiting; } -export default TaskListHeader; +export default ListPanelHeader; diff --git a/front/src/pages/inbox/TaskListItem.tsx b/front/src/pages/inbox/ListPanelItem.tsx similarity index 94% rename from front/src/pages/inbox/TaskListItem.tsx rename to front/src/pages/inbox/ListPanelItem.tsx index 510a03800..c1a7d570d 100644 --- a/front/src/pages/inbox/TaskListItem.tsx +++ b/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 ( @@ -95,4 +95,4 @@ function TaskListItem({ task }: OwnProps) { ); } -export default TaskListItem; +export default ListPanelItem; diff --git a/front/src/pages/inbox/PluginPanel.tsx b/front/src/pages/inbox/PluginPanel.tsx new file mode 100644 index 000000000..cf1752d89 --- /dev/null +++ b/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 ( + + <> + + {tasks.map((item) => ( + + ))} + + + ); +} + +export default ListPanel; diff --git a/front/src/stories/pages/inbox/Inbox.stories.tsx b/front/src/pages/inbox/__stories__/Inbox.stories.tsx similarity index 80% rename from front/src/stories/pages/inbox/Inbox.stories.tsx rename to front/src/pages/inbox/__stories__/Inbox.stories.tsx index 97aa92fa9..b91c1fe47 100644 --- a/front/src/stories/pages/inbox/Inbox.stories.tsx +++ b/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', diff --git a/front/src/pages/inbox/__stories__/ListPanel.stories.tsx b/front/src/pages/inbox/__stories__/ListPanel.stories.tsx new file mode 100644 index 000000000..5ff9c50e3 --- /dev/null +++ b/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 = () => ; diff --git a/front/src/pages/inbox/__stories__/ListPanelHeader.stories.tsx b/front/src/pages/inbox/__stories__/ListPanelHeader.stories.tsx new file mode 100644 index 000000000..8564816bb --- /dev/null +++ b/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 = () => ; diff --git a/front/src/stories/pages/inbox/TaskListItem.stories.tsx b/front/src/pages/inbox/__stories__/ListPanelItem.stories.tsx similarity index 70% rename from front/src/stories/pages/inbox/TaskListItem.stories.tsx rename to front/src/pages/inbox/__stories__/ListPanelItem.stories.tsx index 143dce87a..d089994db 100644 --- a/front/src/stories/pages/inbox/TaskListItem.stories.tsx +++ b/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 = () => ( - ( + { const { getAllByRole } = render(); diff --git a/front/src/tests/pages/inbox/TaskList.test.tsx b/front/src/pages/inbox/__tests__/ListPanel.test.tsx similarity index 58% rename from front/src/tests/pages/inbox/TaskList.test.tsx rename to front/src/pages/inbox/__tests__/ListPanel.test.tsx index 8ae9b42f5..c34294777 100644 --- a/front/src/tests/pages/inbox/TaskList.test.tsx +++ b/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(); + const { getAllByRole } = render(); const button = getAllByRole('button'); expect(button[0]).toHaveTextContent('Sylvie Vartan'); diff --git a/front/src/pages/inbox/__tests__/ListPanelHeader.test.tsx b/front/src/pages/inbox/__tests__/ListPanelHeader.test.tsx new file mode 100644 index 000000000..5c18987ba --- /dev/null +++ b/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(); + + const text = getAllByText('6 tasks waiting'); + expect(text).toBeDefined(); +}); diff --git a/front/src/pages/inbox/__tests__/ListPanelItem.test.tsx b/front/src/pages/inbox/__tests__/ListPanelItem.test.tsx new file mode 100644 index 000000000..efe251375 --- /dev/null +++ b/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(); + + const text = getAllByText('Sylvie Vartan'); + expect(text).toBeDefined(); +}); diff --git a/front/src/stories/pages/inbox/TaskList.stories.tsx b/front/src/stories/pages/inbox/TaskList.stories.tsx deleted file mode 100644 index 70eec25ec..000000000 --- a/front/src/stories/pages/inbox/TaskList.stories.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import TaskList from '../../../pages/inbox/TaskList'; - -export default { - title: 'Inbox', - component: TaskList, -}; - -export const TaskListDefault = () => ; diff --git a/front/src/stories/pages/inbox/TaskListHeader.stories.tsx b/front/src/stories/pages/inbox/TaskListHeader.stories.tsx deleted file mode 100644 index 58a5aa3b2..000000000 --- a/front/src/stories/pages/inbox/TaskListHeader.stories.tsx +++ /dev/null @@ -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 = () => ; diff --git a/front/src/tests/pages/inbox/TaskListHeader.test.tsx b/front/src/tests/pages/inbox/TaskListHeader.test.tsx deleted file mode 100644 index e5ce2625c..000000000 --- a/front/src/tests/pages/inbox/TaskListHeader.test.tsx +++ /dev/null @@ -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(); - - const text = getAllByText('6 tasks waiting'); - expect(text).toBeDefined(); -}); diff --git a/front/src/tests/pages/inbox/TaskListItem.test.tsx b/front/src/tests/pages/inbox/TaskListItem.test.tsx deleted file mode 100644 index a9d9bf64a..000000000 --- a/front/src/tests/pages/inbox/TaskListItem.test.tsx +++ /dev/null @@ -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(); - - const text = getAllByText('Sylvie Vartan'); - expect(text).toBeDefined(); -}); From b4032d508de8268f48977930454ee1d91789676b Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Mon, 5 Dec 2022 22:59:56 +0100 Subject: [PATCH 3/3] Add Plugin Panel --- front/package-lock.json | 98 +++++++++++++++++++ front/package.json | 6 +- front/src/pages/inbox/Inbox.tsx | 10 +- front/src/pages/inbox/PluginPanel.tsx | 50 ---------- .../discussion-panel/DiscussionPanel.tsx | 12 +++ .../discussion-panel/composer/Composer.tsx | 7 ++ .../composer/ComposerSwitch.tsx | 7 ++ .../inbox/discussion-panel/events/Booking.tsx | 7 ++ .../inbox/discussion-panel/events/Message.tsx | 7 ++ .../inbox/discussion-panel/events/Note.tsx | 7 ++ .../inbox/{ => list-panel}/ListPanel.tsx | 0 .../{ => list-panel}/ListPanelHeader.tsx | 0 .../inbox/{ => list-panel}/ListPanelItem.tsx | 0 .../__stories__/ListPanel.stories.tsx | 0 .../__stories__/ListPanelHeader.stories.tsx | 0 .../__stories__/ListPanelItem.stories.tsx | 0 .../__tests__/ListPanel.test.tsx | 0 .../__tests__/ListPanelHeader.test.tsx | 0 .../__tests__/ListPanelItem.test.tsx | 0 .../pages/inbox/plugin-panel/PluginPanel.tsx | 27 +++++ .../inbox/plugin-panel/PluginPanelNav.tsx | 46 +++++++++ .../plugin-history/PanelHistory.tsx | 7 ++ .../plugin-history/UserActivity.tsx | 7 ++ .../plugin-history/UserInformation.tsx | 7 ++ 24 files changed, 252 insertions(+), 53 deletions(-) delete mode 100644 front/src/pages/inbox/PluginPanel.tsx create mode 100644 front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx create mode 100644 front/src/pages/inbox/discussion-panel/composer/Composer.tsx create mode 100644 front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx create mode 100644 front/src/pages/inbox/discussion-panel/events/Booking.tsx create mode 100644 front/src/pages/inbox/discussion-panel/events/Message.tsx create mode 100644 front/src/pages/inbox/discussion-panel/events/Note.tsx rename front/src/pages/inbox/{ => list-panel}/ListPanel.tsx (100%) rename front/src/pages/inbox/{ => list-panel}/ListPanelHeader.tsx (100%) rename front/src/pages/inbox/{ => list-panel}/ListPanelItem.tsx (100%) rename front/src/pages/inbox/{ => list-panel}/__stories__/ListPanel.stories.tsx (100%) rename front/src/pages/inbox/{ => list-panel}/__stories__/ListPanelHeader.stories.tsx (100%) rename front/src/pages/inbox/{ => list-panel}/__stories__/ListPanelItem.stories.tsx (100%) rename front/src/pages/inbox/{ => list-panel}/__tests__/ListPanel.test.tsx (100%) rename front/src/pages/inbox/{ => list-panel}/__tests__/ListPanelHeader.test.tsx (100%) rename front/src/pages/inbox/{ => list-panel}/__tests__/ListPanelItem.test.tsx (100%) create mode 100644 front/src/pages/inbox/plugin-panel/PluginPanel.tsx create mode 100644 front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx create mode 100644 front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx create mode 100644 front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx create mode 100644 front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx diff --git a/front/package-lock.json b/front/package-lock.json index afba0e57e..9bb69a12c 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -10,6 +10,10 @@ "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", + "@fortawesome/fontawesome-svg-core": "^6.2.1", + "@fortawesome/free-regular-svg-icons": "^6.2.1", + "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@types/node": "^16.18.4", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", @@ -2264,6 +2268,63 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz", + "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz", + "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz", + "integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz", + "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -35640,6 +35701,43 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz", + "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz", + "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz", + "integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz", + "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", diff --git a/front/package.json b/front/package.json index e8d046d88..efb7958ff 100644 --- a/front/package.json +++ b/front/package.json @@ -5,6 +5,10 @@ "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", + "@fortawesome/fontawesome-svg-core": "^6.2.1", + "@fortawesome/free-regular-svg-icons": "^6.2.1", + "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@types/node": "^16.18.4", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", @@ -43,7 +47,7 @@ "react-refresh": "0.14.0" }, "jest": { - "coveragePathIgnorePatterns" : [ + "coveragePathIgnorePatterns": [ "src/stories" ] }, diff --git a/front/src/pages/inbox/Inbox.tsx b/front/src/pages/inbox/Inbox.tsx index 6d876e681..e84334a1f 100644 --- a/front/src/pages/inbox/Inbox.tsx +++ b/front/src/pages/inbox/Inbox.tsx @@ -1,10 +1,16 @@ import FullWidthContainer from '../../layout/containers/FullWidthContainer'; -import ListPanel from './ListPanel'; +import DiscussionPanel from './discussion-panel/DiscussionPanel'; +import ListPanel from './list-panel/ListPanel'; +import PluginPanel from './plugin-panel/PluginPanel'; function Inbox() { return ( - + <> + + + + ); } diff --git a/front/src/pages/inbox/PluginPanel.tsx b/front/src/pages/inbox/PluginPanel.tsx deleted file mode 100644 index cf1752d89..000000000 --- a/front/src/pages/inbox/PluginPanel.tsx +++ /dev/null @@ -1,50 +0,0 @@ -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 ( - - <> - - {tasks.map((item) => ( - - ))} - - - ); -} - -export default ListPanel; diff --git a/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx b/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx new file mode 100644 index 000000000..f5be950b5 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx @@ -0,0 +1,12 @@ +import styled from '@emotion/styled'; + +const StyledPanel = styled.div` + display: flex; + flex-grow: 1; +`; + +function DiscussionPanel() { + return ; +} + +export default DiscussionPanel; diff --git a/front/src/pages/inbox/discussion-panel/composer/Composer.tsx b/front/src/pages/inbox/discussion-panel/composer/Composer.tsx new file mode 100644 index 000000000..410aedb89 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/composer/Composer.tsx @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +function Composer() { + return; +} + +export default Composer; diff --git a/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx b/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx new file mode 100644 index 000000000..401704285 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +function ComposerSwitch() { + return; +} + +export default ComposerSwitch; diff --git a/front/src/pages/inbox/discussion-panel/events/Booking.tsx b/front/src/pages/inbox/discussion-panel/events/Booking.tsx new file mode 100644 index 000000000..43db278ef --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/events/Booking.tsx @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +function Booking() { + return; +} + +export default Booking; diff --git a/front/src/pages/inbox/discussion-panel/events/Message.tsx b/front/src/pages/inbox/discussion-panel/events/Message.tsx new file mode 100644 index 000000000..6a131a5a6 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/events/Message.tsx @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +function Message() { + return; +} + +export default Message; diff --git a/front/src/pages/inbox/discussion-panel/events/Note.tsx b/front/src/pages/inbox/discussion-panel/events/Note.tsx new file mode 100644 index 000000000..bd696ff77 --- /dev/null +++ b/front/src/pages/inbox/discussion-panel/events/Note.tsx @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +function Note() { + return; +} + +export default Note; diff --git a/front/src/pages/inbox/ListPanel.tsx b/front/src/pages/inbox/list-panel/ListPanel.tsx similarity index 100% rename from front/src/pages/inbox/ListPanel.tsx rename to front/src/pages/inbox/list-panel/ListPanel.tsx diff --git a/front/src/pages/inbox/ListPanelHeader.tsx b/front/src/pages/inbox/list-panel/ListPanelHeader.tsx similarity index 100% rename from front/src/pages/inbox/ListPanelHeader.tsx rename to front/src/pages/inbox/list-panel/ListPanelHeader.tsx diff --git a/front/src/pages/inbox/ListPanelItem.tsx b/front/src/pages/inbox/list-panel/ListPanelItem.tsx similarity index 100% rename from front/src/pages/inbox/ListPanelItem.tsx rename to front/src/pages/inbox/list-panel/ListPanelItem.tsx diff --git a/front/src/pages/inbox/__stories__/ListPanel.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx similarity index 100% rename from front/src/pages/inbox/__stories__/ListPanel.stories.tsx rename to front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx diff --git a/front/src/pages/inbox/__stories__/ListPanelHeader.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx similarity index 100% rename from front/src/pages/inbox/__stories__/ListPanelHeader.stories.tsx rename to front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx diff --git a/front/src/pages/inbox/__stories__/ListPanelItem.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx similarity index 100% rename from front/src/pages/inbox/__stories__/ListPanelItem.stories.tsx rename to front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx diff --git a/front/src/pages/inbox/__tests__/ListPanel.test.tsx b/front/src/pages/inbox/list-panel/__tests__/ListPanel.test.tsx similarity index 100% rename from front/src/pages/inbox/__tests__/ListPanel.test.tsx rename to front/src/pages/inbox/list-panel/__tests__/ListPanel.test.tsx diff --git a/front/src/pages/inbox/__tests__/ListPanelHeader.test.tsx b/front/src/pages/inbox/list-panel/__tests__/ListPanelHeader.test.tsx similarity index 100% rename from front/src/pages/inbox/__tests__/ListPanelHeader.test.tsx rename to front/src/pages/inbox/list-panel/__tests__/ListPanelHeader.test.tsx diff --git a/front/src/pages/inbox/__tests__/ListPanelItem.test.tsx b/front/src/pages/inbox/list-panel/__tests__/ListPanelItem.test.tsx similarity index 100% rename from front/src/pages/inbox/__tests__/ListPanelItem.test.tsx rename to front/src/pages/inbox/list-panel/__tests__/ListPanelItem.test.tsx diff --git a/front/src/pages/inbox/plugin-panel/PluginPanel.tsx b/front/src/pages/inbox/plugin-panel/PluginPanel.tsx new file mode 100644 index 000000000..bf5acc7f1 --- /dev/null +++ b/front/src/pages/inbox/plugin-panel/PluginPanel.tsx @@ -0,0 +1,27 @@ +import styled from '@emotion/styled'; +import PluginPanelNav from './PluginPanelNav'; +import PluginHistory from './plugin-history/PanelHistory'; + +const StyledPanel = styled.div` + display: flex; + width: 350px; + border-left: 1px solid #eaecee; +`; + +const StyledContainer = styled.div` + display: flex; + flex-grow: 1; +`; + +function PluginPanel() { + return ( + + + + + + + ); +} + +export default PluginPanel; diff --git a/front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx b/front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx new file mode 100644 index 000000000..296526d6f --- /dev/null +++ b/front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx @@ -0,0 +1,46 @@ +import styled from '@emotion/styled'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faClone } from '@fortawesome/free-regular-svg-icons'; + +const StyledNav = styled.div` + display: flex; + flex-direction: column; + width: 60px; + border-left: 1px solid #eaecee; + background: #f1f3f5; +`; + +const StyledNavItem = styled.div` + display: flex; + width: 60px; + border-bottom: 1px solid #eaecee; + padding: 22px; + cursor: pointer; +`; + +function PluginPanelNav() { + return ( + + + + + + + + + + + + + + + + + + + + + ); +} + +export default PluginPanelNav; diff --git a/front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx b/front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx new file mode 100644 index 000000000..1d8bc01b4 --- /dev/null +++ b/front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +function PluginHistory() { + return
; +} + +export default PluginHistory; diff --git a/front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx b/front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx new file mode 100644 index 000000000..5109fbf57 --- /dev/null +++ b/front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +function UserActivity() { + return; +} + +export default UserActivity; diff --git a/front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx b/front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx new file mode 100644 index 000000000..c060da814 --- /dev/null +++ b/front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +function UserInformation() { + return; +} + +export default UserInformation;