diff --git a/front/package-lock.json b/front/package-lock.json index afba0e57e0..9bb69a12c2 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 e8d046d88e..efb7958ff0 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 6d876e6816..e84334a1f8 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 cf1752d894..0000000000 --- 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 0000000000..f5be950b59 --- /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 0000000000..410aedb894 --- /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 0000000000..401704285c --- /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 0000000000..43db278ef1 --- /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 0000000000..6a131a5a6a --- /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 0000000000..bd696ff778 --- /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 0000000000..bf5acc7f10 --- /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 0000000000..296526d6fb --- /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 0000000000..1d8bc01b4a --- /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 0000000000..5109fbf572 --- /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 0000000000..c060da8140 --- /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;