Merge pull request #8 from twentyhq/cbo-add-central-panel

Rename tabs to Inbox, Contacts, Insights
This commit is contained in:
Charles Bochet 2022-12-05 23:00:40 +01:00 committed by GitHub
commit 33c30e0770
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 387 additions and 138 deletions

View File

@ -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",

View File

@ -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"
]
},

View File

@ -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 (
<AppLayout>
<Routes>
<Route path="/" element={<Tasks />} />
<Route path="/history" element={<History />} />
<Route path="/performances" element={<Performances />} />
<Route path="/" element={<Inbox />} />
<Route path="/contacts" element={<Contacts />} />
<Route path="/insights" element={<Insights />} />
</Routes>
</AppLayout>
);

View File

@ -16,7 +16,7 @@ function Navbar() {
<>
<NavbarContainer>
<NavItem
label="Tasks"
label="Inbox"
to="/"
active={
!!useMatch({
@ -26,21 +26,21 @@ function Navbar() {
}
/>
<NavItem
label="History"
to="/history"
label="Contacts"
to="/contacts"
active={
!!useMatch({
path: useResolvedPath('/history').pathname,
path: useResolvedPath('/contacts').pathname,
end: true,
})
}
/>
<NavItem
label="Performances"
to="/performances"
label="Insights"
to="/insights"
active={
!!useMatch({
path: useResolvedPath('/performances').pathname,
path: useResolvedPath('/insights').pathname,
end: true,
})
}

View File

@ -1,14 +1,14 @@
import { MemoryRouter } from 'react-router-dom';
import Navbar from '../../../layout/navbar/Navbar';
import Navbar from '../Navbar';
export default {
title: 'Navbar',
component: Navbar,
};
export const NavbarOnPerformance = () => (
<MemoryRouter initialEntries={['/performances']}>
export const NavbarOnInsights = () => (
<MemoryRouter initialEntries={['/insights']}>
<Navbar />
</MemoryRouter>
);

View File

@ -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', () => ({

View File

@ -0,0 +1,17 @@
import { render } from '@testing-library/react';
import { NavbarOnInsights } from '../__stories__/Navbar.stories';
it('Checks the NavItem renders', () => {
const { getByRole } = render(<NavbarOnInsights />);
expect(getByRole('button', { name: 'Insights' })).toHaveAttribute(
'aria-selected',
'true',
);
expect(getByRole('button', { name: 'Inbox' })).toHaveAttribute(
'aria-selected',
'false',
);
});

View File

@ -1,4 +1,4 @@
function History() {
function Contacts() {
return (
<div>
<h1>This is the history page</h1>
@ -6,4 +6,4 @@ function History() {
);
}
export default History;
export default Contacts;

View File

@ -1,4 +1,4 @@
function Performances() {
function Insights() {
return (
<div>
<h1>This is the performances page</h1>
@ -6,4 +6,4 @@ function Performances() {
);
}
export default Performances;
export default Insights;

View File

@ -0,0 +1,18 @@
import FullWidthContainer from '../../layout/containers/FullWidthContainer';
import DiscussionPanel from './discussion-panel/DiscussionPanel';
import ListPanel from './list-panel/ListPanel';
import PluginPanel from './plugin-panel/PluginPanel';
function Inbox() {
return (
<FullWidthContainer>
<>
<ListPanel />
<DiscussionPanel />
<PluginPanel />
</>
</FullWidthContainer>
);
}
export default Inbox;

View File

@ -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>
);

View File

@ -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');
});

View File

@ -0,0 +1,12 @@
import styled from '@emotion/styled';
const StyledPanel = styled.div`
display: flex;
flex-grow: 1;
`;
function DiscussionPanel() {
return <StyledPanel></StyledPanel>;
}
export default DiscussionPanel;

View File

@ -0,0 +1,7 @@
import styled from '@emotion/styled';
function Composer() {
return;
}
export default Composer;

View File

@ -0,0 +1,7 @@
import styled from '@emotion/styled';
function ComposerSwitch() {
return;
}
export default ComposerSwitch;

View File

@ -0,0 +1,7 @@
import styled from '@emotion/styled';
function Booking() {
return;
}
export default Booking;

View File

@ -0,0 +1,7 @@
import styled from '@emotion/styled';
function Message() {
return;
}
export default Message;

View File

@ -0,0 +1,7 @@
import styled from '@emotion/styled';
function Note() {
return;
}
export default Note;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

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

View File

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

View File

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

View File

@ -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');
});

View File

@ -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();
});

View File

@ -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();
});

View File

@ -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 (
<StyledPanel>
<StyledContainer>
<PluginHistory />
</StyledContainer>
<PluginPanelNav />
</StyledPanel>
);
}
export default PluginPanel;

View File

@ -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 (
<StyledNav>
<StyledNavItem>
<FontAwesomeIcon icon={faClone} size="lg" />
</StyledNavItem>
<StyledNavItem>
<FontAwesomeIcon icon={faClone} size="lg" />
</StyledNavItem>
<StyledNavItem>
<FontAwesomeIcon icon={faClone} size="lg" />
</StyledNavItem>
<StyledNavItem>
<FontAwesomeIcon icon={faClone} size="lg" />
</StyledNavItem>
<StyledNavItem>
<FontAwesomeIcon icon={faClone} size="lg" />
</StyledNavItem>
<StyledNavItem>
<FontAwesomeIcon icon={faClone} size="lg" />
</StyledNavItem>
</StyledNav>
);
}
export default PluginPanelNav;

View File

@ -0,0 +1,7 @@
import styled from '@emotion/styled';
function PluginHistory() {
return <div></div>;
}
export default PluginHistory;

View File

@ -0,0 +1,7 @@
import styled from '@emotion/styled';
function UserActivity() {
return;
}
export default UserActivity;

View File

@ -0,0 +1,7 @@
import styled from '@emotion/styled';
function UserInformation() {
return;
}
export default UserInformation;

View File

@ -1,12 +0,0 @@
import FullWidthContainer from '../../layout/containers/FullWidthContainer';
import TaskList from './TaskList';
function Tasks() {
return (
<FullWidthContainer>
<TaskList />
</FullWidthContainer>
);
}
export default Tasks;

View File

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

View File

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

View File

@ -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 = () => (
<MemoryRouter>
<Tasks />
</MemoryRouter>
);

View File

@ -1,17 +0,0 @@
import { render } from '@testing-library/react';
import { NavbarOnPerformance } from '../../../stories/layout/navbar/Navbar.stories';
it('Checks the NavItem renders', () => {
const { getByRole } = render(<NavbarOnPerformance />);
expect(getByRole('button', { name: 'Performances' })).toHaveAttribute(
'aria-selected',
'true',
);
expect(getByRole('button', { name: 'Tasks' })).toHaveAttribute(
'aria-selected',
'false',
);
});

View File

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

View File

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

View File

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

View File

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

2
server/.gitignore vendored
View File

@ -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