diff --git a/front/.storybook/preview-head.html b/front/.storybook/preview-head.html new file mode 100644 index 000000000..ea6fb49f7 --- /dev/null +++ b/front/.storybook/preview-head.html @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/front/package.json b/front/package.json index ce682e454..e8d046d88 100644 --- a/front/package.json +++ b/front/package.json @@ -20,7 +20,8 @@ "test": "react-scripts test", "eject": "react-scripts eject", "storybook": "start-storybook -p 6006 -s public", - "build-storybook": "build-storybook -s public" + "build-storybook": "build-storybook -s public", + "coverage": "react-scripts test --coverage" }, "eslintConfig": { "extends": [ @@ -41,6 +42,11 @@ "overrides": { "react-refresh": "0.14.0" }, + "jest": { + "coveragePathIgnorePatterns" : [ + "src/stories" + ] + }, "browserslist": { "production": [ ">0.2%", diff --git a/front/public/index.html b/front/public/index.html index aa069f27c..0b1e7de4a 100644 --- a/front/public/index.html +++ b/front/public/index.html @@ -10,34 +10,14 @@ content="Web site created using create-react-app" /> - - - - React App + + + + Twenty
- diff --git a/front/src/App.tsx b/front/src/App.tsx index 8df06b06f..08bd528e9 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Tasks from './pages/Tasks'; +import Tasks from './pages/tasks/Tasks'; import History from './pages/History'; import Performances from './pages/Performances'; import AppLayout from './layout/AppLayout'; diff --git a/front/src/index.css b/front/src/index.css index ec2585e8c..3479ed478 100644 --- a/front/src/index.css +++ b/front/src/index.css @@ -1,13 +1,6 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: 'Source Sans Pro', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/front/src/layout/AppLayout.tsx b/front/src/layout/AppLayout.tsx index 236f98696..290f25c8a 100644 --- a/front/src/layout/AppLayout.tsx +++ b/front/src/layout/AppLayout.tsx @@ -1,9 +1,10 @@ -import Navbar from './Navbar'; +import Navbar from './navbar/Navbar'; import styled from '@emotion/styled'; const StyledLayout = styled.div` display: flex; flex-direction: column; + height: 100vh; `; type OwnProps = { diff --git a/front/src/layout/containers/FullWidthContainer.tsx b/front/src/layout/containers/FullWidthContainer.tsx new file mode 100644 index 000000000..797ab9109 --- /dev/null +++ b/front/src/layout/containers/FullWidthContainer.tsx @@ -0,0 +1,16 @@ +import styled from '@emotion/styled'; + +type OwnProps = { + children: JSX.Element; +}; + +const StyledContainer = styled.div` + display: flex; + height: calc(100vh - 60px); +`; + +function FullWidthContainer({ children }: OwnProps) { + return {children}; +} + +export default FullWidthContainer; diff --git a/front/src/layout/NavItem.tsx b/front/src/layout/navbar/NavItem.tsx similarity index 100% rename from front/src/layout/NavItem.tsx rename to front/src/layout/navbar/NavItem.tsx diff --git a/front/src/layout/Navbar.tsx b/front/src/layout/navbar/Navbar.tsx similarity index 100% rename from front/src/layout/Navbar.tsx rename to front/src/layout/navbar/Navbar.tsx diff --git a/front/src/pages/Tasks.tsx b/front/src/pages/Tasks.tsx deleted file mode 100644 index 877134e2a..000000000 --- a/front/src/pages/Tasks.tsx +++ /dev/null @@ -1,9 +0,0 @@ -function Tasks() { - return ( -
-

This is the home page

-
- ); -} - -export default Tasks; diff --git a/front/src/pages/tasks/TaskList.tsx b/front/src/pages/tasks/TaskList.tsx new file mode 100644 index 000000000..102885df6 --- /dev/null +++ b/front/src/pages/tasks/TaskList.tsx @@ -0,0 +1,50 @@ +import styled from '@emotion/styled'; +import TaskListHeader from './TaskListHeader'; +import TaskListItem from './TaskListItem'; + +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 TaskList() { + 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 TaskList; diff --git a/front/src/pages/tasks/TaskListHeader.tsx b/front/src/pages/tasks/TaskListHeader.tsx new file mode 100644 index 000000000..78627cc4c --- /dev/null +++ b/front/src/pages/tasks/TaskListHeader.tsx @@ -0,0 +1,17 @@ +import styled from '@emotion/styled'; + +const StyledHeader = styled.div` + display: flex; + font-weight: bold; + align-items: center; + padding: 16px 24px; + font-size: 18px; + letter-spacing: 1px; + border-bottom: 1px solid #eaecee; +`; + +function TaskListHeader() { + return 6 tasks waiting; +} + +export default TaskListHeader; diff --git a/front/src/pages/tasks/TaskListItem.tsx b/front/src/pages/tasks/TaskListItem.tsx new file mode 100644 index 000000000..510a03800 --- /dev/null +++ b/front/src/pages/tasks/TaskListItem.tsx @@ -0,0 +1,98 @@ +import styled from '@emotion/styled'; +import { Task } from './TaskList'; + +type OwnProps = { + task: Task; +}; + +const StyledListItem = styled.button` + display: flex; + padding: 16px 24px; + flex-direction: column; + color: #2e3138; + border: 0; + border-bottom: 1px solid #eaecee; + cursor: pointer; + font-family: inherit; + text-align: inherit; + align-items: inherit; + background: #f1f3f5; +`; + +const StyledHeader = styled.div` + display: flex; + justify-content: space-between; +`; + +const StyledAvatarAndTitle = styled.div` + display: flex; +`; + +const StyledAvatar = styled.div` + display: flex; + width: 40px; + height: 40px; + border-radius: 40px; + background: #52555b; + font-size: 20px; + color: white; + align-items: center; + justify-content: center; + font-weight: bold; +`; + +const StyledTitle = styled.div` + display: flex; + flex-direction: column; + margin-left: 8px; +`; + +const StyledName = styled.div` + font-weight: bold; + font-size: 18px; + color: black; +`; + +const StyledLabel = styled.div` + display: flex; + font-size: 14px; +`; + +const StyledTime = styled.div` + display: flex; + justify-self: flex-end; + color: #7d8187; + font-size: 14px; +`; + +const StyledContent = styled.div` + display: flex; + color: #52555b; + font-size: 14px; + margin-top: 8px; +`; + +function TaskListItem({ task }: OwnProps) { + return ( + + + + + {task.targetUser + .split(' ') + .map((n) => n[0]) + .join('')} + + + {task.targetUser} + {task.label} + + + {task.time} + + {task.lastMessage} + + ); +} + +export default TaskListItem; diff --git a/front/src/pages/tasks/Tasks.tsx b/front/src/pages/tasks/Tasks.tsx new file mode 100644 index 000000000..4c3822e18 --- /dev/null +++ b/front/src/pages/tasks/Tasks.tsx @@ -0,0 +1,12 @@ +import FullWidthContainer from '../../layout/containers/FullWidthContainer'; +import TaskList from './TaskList'; + +function Tasks() { + return ( + + + + ); +} + +export default Tasks; diff --git a/front/src/stories/layout/NavItem.stories.tsx b/front/src/stories/layout/navbar/NavItem.stories.tsx similarity index 87% rename from front/src/stories/layout/NavItem.stories.tsx rename to front/src/stories/layout/navbar/NavItem.stories.tsx index 4ac07df33..0f58f587a 100644 --- a/front/src/stories/layout/NavItem.stories.tsx +++ b/front/src/stories/layout/navbar/NavItem.stories.tsx @@ -1,6 +1,6 @@ import { MemoryRouter } from 'react-router-dom'; -import NavItem from '../../layout/NavItem'; +import NavItem from '../../../layout/navbar/NavItem'; export default { title: 'NavItem', diff --git a/front/src/stories/layout/Navbar.stories.tsx b/front/src/stories/layout/navbar/Navbar.stories.tsx similarity index 82% rename from front/src/stories/layout/Navbar.stories.tsx rename to front/src/stories/layout/navbar/Navbar.stories.tsx index ea7b283b8..772c952e9 100644 --- a/front/src/stories/layout/Navbar.stories.tsx +++ b/front/src/stories/layout/navbar/Navbar.stories.tsx @@ -1,6 +1,6 @@ import { MemoryRouter } from 'react-router-dom'; -import Navbar from '../../layout/Navbar'; +import Navbar from '../../../layout/navbar/Navbar'; export default { title: 'Navbar', diff --git a/front/src/stories/pages/tasks/TaskList.stories.tsx b/front/src/stories/pages/tasks/TaskList.stories.tsx new file mode 100644 index 000000000..0a98aea9d --- /dev/null +++ b/front/src/stories/pages/tasks/TaskList.stories.tsx @@ -0,0 +1,8 @@ +import TaskList from '../../../pages/tasks/TaskList'; + +export default { + title: 'Tasks', + component: TaskList, +}; + +export const TaskListDefault = () => ; diff --git a/front/src/stories/pages/tasks/TaskListHeader.stories.tsx b/front/src/stories/pages/tasks/TaskListHeader.stories.tsx new file mode 100644 index 000000000..888660da6 --- /dev/null +++ b/front/src/stories/pages/tasks/TaskListHeader.stories.tsx @@ -0,0 +1,9 @@ +import { MemoryRouter } from 'react-router-dom'; +import TaskListHeader from '../../../pages/tasks/TaskListHeader'; + +export default { + title: 'Tasks', + component: TaskListHeader, +}; + +export const TaskListHeaderDefault = () => ; diff --git a/front/src/stories/pages/tasks/TaskListItem.stories.tsx b/front/src/stories/pages/tasks/TaskListItem.stories.tsx new file mode 100644 index 000000000..c611ad175 --- /dev/null +++ b/front/src/stories/pages/tasks/TaskListItem.stories.tsx @@ -0,0 +1,20 @@ +import { MemoryRouter } from 'react-router-dom'; +import TaskListItem from '../../../pages/tasks/TaskListItem'; + +export default { + title: 'Tasks', + component: TaskListItem, +}; + +export const TaskListItemDefault = () => ( + +); diff --git a/front/src/stories/pages/tasks/Tasks.stories.tsx b/front/src/stories/pages/tasks/Tasks.stories.tsx new file mode 100644 index 000000000..1a3121735 --- /dev/null +++ b/front/src/stories/pages/tasks/Tasks.stories.tsx @@ -0,0 +1,13 @@ +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/NavItem.test.tsx b/front/src/tests/layout/navbar/NavItem.test.tsx similarity index 80% rename from front/src/tests/layout/NavItem.test.tsx rename to front/src/tests/layout/navbar/NavItem.test.tsx index 526855f97..7d94194eb 100644 --- a/front/src/tests/layout/NavItem.test.tsx +++ b/front/src/tests/layout/navbar/NavItem.test.tsx @@ -1,6 +1,6 @@ import { render, fireEvent } from '@testing-library/react'; -import { NavItemDefault } from '../../stories/layout/NavItem.stories'; //👈 Our stories imported here. +import { NavItemDefault } from '../../../stories/layout/navbar/NavItem.stories'; //👈 Our stories imported here. const mockedNavigate = jest.fn(); jest.mock('react-router-dom', () => ({ diff --git a/front/src/tests/layout/Navbar.test.tsx b/front/src/tests/layout/navbar/Navbar.test.tsx similarity index 81% rename from front/src/tests/layout/Navbar.test.tsx rename to front/src/tests/layout/navbar/Navbar.test.tsx index 2157a5e22..6f4298e1e 100644 --- a/front/src/tests/layout/Navbar.test.tsx +++ b/front/src/tests/layout/navbar/Navbar.test.tsx @@ -1,6 +1,6 @@ import { render } from '@testing-library/react'; -import { NavbarOnPerformance } from '../../stories/layout/Navbar.stories'; +import { NavbarOnPerformance } from '../../../stories/layout/navbar/Navbar.stories'; it('Checks the NavItem renders', () => { const { getByRole } = render(); diff --git a/front/src/tests/pages/tasks/TaskList.test.tsx b/front/src/tests/pages/tasks/TaskList.test.tsx new file mode 100644 index 000000000..993aacd25 --- /dev/null +++ b/front/src/tests/pages/tasks/TaskList.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { TaskListDefault } from '../../../stories/pages/tasks/TaskList.stories'; + +it('Checks the Tasks page render', () => { + const { getAllByRole } = render(); + + const button = getAllByRole('button'); + expect(button[0]).toHaveTextContent('Sylvie Vartan'); +}); diff --git a/front/src/tests/pages/tasks/TaskListHeader.test.tsx b/front/src/tests/pages/tasks/TaskListHeader.test.tsx new file mode 100644 index 000000000..b6d42fe91 --- /dev/null +++ b/front/src/tests/pages/tasks/TaskListHeader.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { TaskListHeaderDefault } from '../../../stories/pages/tasks/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/tasks/TaskListItem.test.tsx b/front/src/tests/pages/tasks/TaskListItem.test.tsx new file mode 100644 index 000000000..27331e5fa --- /dev/null +++ b/front/src/tests/pages/tasks/TaskListItem.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { TaskListItemDefault } from '../../../stories/pages/tasks/TaskListItem.stories'; + +it('Checks the TaskListItem render', () => { + const { getAllByText } = render(); + + const text = getAllByText('Sylvie Vartan'); + expect(text).toBeDefined(); +}); diff --git a/front/src/tests/pages/tasks/Tasks.test.tsx b/front/src/tests/pages/tasks/Tasks.test.tsx new file mode 100644 index 000000000..24e70d89e --- /dev/null +++ b/front/src/tests/pages/tasks/Tasks.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { TasksDefault } from '../../../stories/pages/tasks/Tasks.stories'; + +it('Checks the Tasks page render', () => { + const { getAllByRole } = render(); + + const button = getAllByRole('button'); + expect(button[0]).toHaveTextContent('Sylvie Vartan'); +});