admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add Settings/Accounts/Emails page (#2867)

Browse Source 
Closes #2819
This commit is contained in:
Thaïs
2023-12-08 11:10:09 +01:00
committed by GitHub
parent 921366f5b3
commit 1f40c45140
20 changed files with 335 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/App.tsx
View File

@ -16,6 +16,7 @@ import { ImpersonateEffect } from '~/pages/impersonate/ImpersonateEffect';
import { NotFound } from '~/pages/not-found/NotFound'; import { NotFound } from '~/pages/not-found/NotFound';
import { Opportunities } from '~/pages/opportunities/Opportunities'; import { Opportunities } from '~/pages/opportunities/Opportunities';
import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts'; import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts';
import { SettingsAccountsEmails } from '~/pages/settings/accounts/SettingsAccountsEmails';
import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject'; import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject';
import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail'; import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail';
import { SettingsObjectEdit } from '~/pages/settings/data-model/SettingsObjectEdit'; import { SettingsObjectEdit } from '~/pages/settings/data-model/SettingsObjectEdit';
@ -73,6 +74,10 @@ export const App = () => {
path={SettingsPath.Accounts} path={SettingsPath.Accounts}
element={<SettingsAccounts />} element={<SettingsAccounts />}
/> />
<Route
path={SettingsPath.AccountsEmails}
element={<SettingsAccountsEmails />}
/>
<Route <Route
path={SettingsPath.WorkspaceMembersPage} path={SettingsPath.WorkspaceMembersPage}
element={<SettingsWorkspaceMembers />} element={<SettingsWorkspaceMembers />}

5
front/src/modules/favorites/components/Favorites.tsx
View File

@ -3,14 +3,13 @@ import styled from '@emotion/styled';
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList'; import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle'; import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { Avatar } from '@/users/components/Avatar'; import { Avatar } from '@/users/components/Avatar';
import { useFavorites } from '../hooks/useFavorites'; import { useFavorites } from '../hooks/useFavorites';
const StyledContainer = styled.div` const StyledContainer = styled(NavigationDrawerSection)`
display: flex;
flex-direction: column;
overflow-x: auto; overflow-x: auto;
width: 100%; width: 100%;
`; `;

23
front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
View File

@ -13,6 +13,7 @@ import {
IconTargetArrow, IconTargetArrow,
} from '@/ui/display/icon'; } from '@/ui/display/icon';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle'; import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -33,7 +34,7 @@ export const MainNavigationDrawerItems = () => {
return ( return (
<> <>
{!isMobile && ( {!isMobile && (
<> <NavigationDrawerSection>
<NavigationDrawerItem <NavigationDrawerItem
label="Search" label="Search"
Icon={IconSearch} Icon={IconSearch}
@ -61,19 +62,21 @@ export const MainNavigationDrawerItems = () => {
Icon={IconCheckbox} Icon={IconCheckbox}
count={currentUserDueTaskCount} count={currentUserDueTaskCount}
/> />
</> </NavigationDrawerSection>
)} )}
<Favorites /> <Favorites />
<NavigationDrawerSectionTitle label="Workspace" /> <NavigationDrawerSection>
<ObjectMetadataNavItems /> <NavigationDrawerSectionTitle label="Workspace" />
<NavigationDrawerItem <ObjectMetadataNavItems />
label="Opportunities" <NavigationDrawerItem
to="/objects/opportunities" label="Opportunities"
active={location.pathname === '/objects/opportunities'} to="/objects/opportunities"
Icon={IconTargetArrow} active={location.pathname === '/objects/opportunities'}
/> Icon={IconTargetArrow}
/>
</NavigationDrawerSection>
</> </>
); );
}; };

191
front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
View File

@ -5,15 +5,19 @@ import { useAuth } from '@/auth/hooks/useAuth';
import { AppPath } from '@/types/AppPath'; import { AppPath } from '@/types/AppPath';
import { import {
IconAt, IconAt,
IconCalendarEvent,
IconColorSwatch, IconColorSwatch,
IconHierarchy2, IconHierarchy2,
IconLogout, IconLogout,
IconMail,
IconRobot, IconRobot,
IconSettings, IconSettings,
IconUserCircle, IconUserCircle,
IconUsers, IconUsers,
} from '@/ui/display/icon'; } from '@/ui/display/icon';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle'; import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@ -27,97 +31,122 @@ export const SettingsNavigationDrawerItems = () => {
}, [signOut, navigate]); }, [signOut, navigate]);
const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED'); const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
const isMessagingActive = !!useMatch({ const isAccountsItemActive = !!useMatch({
path: useResolvedPath('/settings/accounts').pathname, path: useResolvedPath('/settings/accounts').pathname,
end: true, end: true,
}); });
const isAccountsEmailsItemActive = !!useMatch({
path: useResolvedPath('/settings/accounts/emails').pathname,
end: true,
});
return ( return (
<> <>
<NavigationDrawerSectionTitle label="User" /> <NavigationDrawerSection>
<NavigationDrawerItem <NavigationDrawerSectionTitle label="User" />
label="Profile"
to="/settings/profile"
Icon={IconUserCircle}
active={
!!useMatch({
path: useResolvedPath('/settings/profile').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
label="Appearance"
to="/settings/profile/appearance"
Icon={IconColorSwatch}
active={
!!useMatch({
path: useResolvedPath('/settings/profile/appearance').pathname,
end: true,
})
}
/>
{isMessagingEnabled && (
<NavigationDrawerItem <NavigationDrawerItem
label="Accounts" label="Profile"
to="/settings/accounts" to="/settings/profile"
Icon={IconAt} Icon={IconUserCircle}
active={isMessagingActive} active={
!!useMatch({
path: useResolvedPath('/settings/profile').pathname,
end: true,
})
}
/> />
)} <NavigationDrawerItem
label="Appearance"
to="/settings/profile/appearance"
Icon={IconColorSwatch}
active={
!!useMatch({
path: useResolvedPath('/settings/profile/appearance').pathname,
end: true,
})
}
/>
{isMessagingEnabled && (
<NavigationDrawerItemGroup>
<NavigationDrawerItem
label="Accounts"
to="/settings/accounts"
Icon={IconAt}
active={isAccountsItemActive}
/>
<NavigationDrawerItem
level={2}
label="Emails"
to="/settings/accounts/emails"
Icon={IconMail}
active={isAccountsEmailsItemActive}
/>
<NavigationDrawerItem
level={2}
label="Calendars"
Icon={IconCalendarEvent}
soon
/>
</NavigationDrawerItemGroup>
)}
</NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" /> <NavigationDrawerSection>
<NavigationDrawerItem <NavigationDrawerSectionTitle label="Workspace" />
label="General" <NavigationDrawerItem
to="/settings/workspace" label="General"
Icon={IconSettings} to="/settings/workspace"
active={ Icon={IconSettings}
!!useMatch({ active={
path: useResolvedPath('/settings/workspace').pathname, !!useMatch({
end: true, path: useResolvedPath('/settings/workspace').pathname,
}) end: true,
} })
/> }
<NavigationDrawerItem />
label="Members" <NavigationDrawerItem
to="/settings/workspace-members" label="Members"
Icon={IconUsers} to="/settings/workspace-members"
active={ Icon={IconUsers}
!!useMatch({ active={
path: useResolvedPath('/settings/workspace-members').pathname, !!useMatch({
end: true, path: useResolvedPath('/settings/workspace-members').pathname,
}) end: true,
} })
/> }
<NavigationDrawerItem />
label="Data model" <NavigationDrawerItem
to="/settings/objects" label="Data model"
Icon={IconHierarchy2} to="/settings/objects"
active={ Icon={IconHierarchy2}
!!useMatch({ active={
path: useResolvedPath('/settings/objects').pathname, !!useMatch({
end: false, path: useResolvedPath('/settings/objects').pathname,
}) end: false,
} })
/> }
<NavigationDrawerItem />
label="Developers" <NavigationDrawerItem
to="/settings/developers/api-keys" label="Developers"
Icon={IconRobot} to="/settings/developers/api-keys"
active={ Icon={IconRobot}
!!useMatch({ active={
path: useResolvedPath('/settings/developers/api-keys').pathname, !!useMatch({
end: true, path: useResolvedPath('/settings/developers/api-keys').pathname,
}) end: true,
} })
/> }
/>
</NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Other" /> <NavigationDrawerSection>
<NavigationDrawerItem <NavigationDrawerSectionTitle label="Other" />
label="Logout" <NavigationDrawerItem
onClick={handleLogout} label="Logout"
Icon={IconLogout} onClick={handleLogout}
/> Icon={IconLogout}
/>
</NavigationDrawerSection>
</> </>
); );
}; };

1
front/src/modules/types/SettingsPath.ts
View File

@ -2,6 +2,7 @@ export enum SettingsPath {
ProfilePage = 'profile', ProfilePage = 'profile',
Appearance = 'profile/appearance', Appearance = 'profile/appearance',
Accounts = 'accounts', Accounts = 'accounts',
AccountsEmails = 'accounts/emails',
Objects = 'objects', Objects = 'objects',
ObjectDetail = 'objects/:objectSlug', ObjectDetail = 'objects/:objectSlug',
ObjectEdit = 'objects/:objectSlug/edit', ObjectEdit = 'objects/:objectSlug/edit',

3
front/src/modules/ui/layout/page/RightDrawerContainer.tsx
View File

@ -18,8 +18,7 @@ const StyledMainContainer = styled.div`
flex-direction: row; flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
min-height: 0; min-height: 0;
padding-bottom: ${({ theme }) => theme.spacing(4)}; padding: ${({ theme }) => theme.spacing(0, 3)};
padding-right: ${({ theme }) => theme.spacing(3)};
width: 100%; width: 100%;
@media (max-width: ${MOBILE_VIEWPORT}px) { @media (max-width: ${MOBILE_VIEWPORT}px) {

2
front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
View File

@ -16,7 +16,7 @@ type SubMenuTopBarContainerProps = {
const StyledContainer = styled.div<{ isMobile: boolean }>` const StyledContainer = styled.div<{ isMobile: boolean }>`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: ${({ theme, isMobile }) => (!isMobile ? theme.spacing(4) : 0)}; padding-top: ${({ theme, isMobile }) => (!isMobile ? theme.spacing(3) : 0)};
width: 100%; width: 100%;
`; `;

1
front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
View File

@ -14,7 +14,6 @@ const StyledWrapper = styled.nav`
font-size: ${({ theme }) => theme.font.size.lg}; font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.semiBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
height: ${({ theme }) => theme.spacing(6)};
line-height: ${({ theme }) => theme.text.lineHeight.md}; line-height: ${({ theme }) => theme.text.lineHeight.md};
`; `;

9
front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
View File

@ -31,16 +31,16 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${({ theme }) => theme.spacing(10)}; gap: ${({ theme }) => theme.spacing(8)};
height: 100%; height: 100%;
min-width: ${desktopNavDrawerWidths.menu}; min-width: ${desktopNavDrawerWidths.menu};
padding: ${({ theme }) => theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(3, 2, 4)};
padding-bottom: ${({ theme }) => theme.spacing(4)};
${({ isSubMenu, theme }) => ${({ isSubMenu, theme }) =>
isSubMenu isSubMenu
? css` ? css`
padding-top: ${theme.spacing(11)}; padding-right: ${theme.spacing(8)};
padding-top: 41px;
` `
: ''} : ''}
@ -52,6 +52,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
const StyledItemsContainer = styled.div` const StyledItemsContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${({ theme }) => theme.spacing(8)};
margin-bottom: auto; margin-bottom: auto;
`; `;

10
front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
View File

@ -1,4 +1,5 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
@ -19,7 +20,8 @@ const StyledIconAndButtonContainer = styled.button`
flex-direction: row; flex-direction: row;
font-size: ${({ theme }) => theme.font.size.lg}; font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.semiBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(2)};
line-height: ${({ theme }) => theme.text.lineHeight.md};
padding: ${({ theme }) => theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
width: 100%; width: 100%;
`; `;
@ -33,6 +35,7 @@ const StyledContainer = styled.div`
export const NavigationDrawerBackButton = ({ export const NavigationDrawerBackButton = ({
title, title,
}: NavigationDrawerBackButtonProps) => { }: NavigationDrawerBackButtonProps) => {
const theme = useTheme();
const navigate = useNavigate(); const navigate = useNavigate();
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState); const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
@ -43,7 +46,10 @@ export const NavigationDrawerBackButton = ({
navigate(navigationMemorizedUrl, { replace: true }); navigate(navigationMemorizedUrl, { replace: true });
}} }}
> >
<IconChevronLeft /> <IconChevronLeft
size={theme.icon.size.md}
stroke={theme.icon.stroke.lg}
/>
<span>{title}</span> <span>{title}</span>
</StyledIconAndButtonContainer> </StyledIconAndButtonContainer>
</StyledContainer> </StyledContainer>

3
front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
View File

@ -8,9 +8,8 @@ const StyledContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
height: 34px; height: ${({ theme }) => theme.spacing(6)};
padding: ${({ theme }) => theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
padding-bottom: ${({ theme }) => theme.spacing(2)};
user-select: none; user-select: none;
`; `;

7
front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
View File

@ -11,6 +11,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
type NavigationDrawerItemProps = { type NavigationDrawerItemProps = {
className?: string; className?: string;
label: string; label: string;
level?: 1 | 2;
to?: string; to?: string;
onClick?: () => void; onClick?: () => void;
Icon: IconComponent; Icon: IconComponent;
@ -24,6 +25,7 @@ type NavigationDrawerItemProps = {
type StyledItemProps = { type StyledItemProps = {
active?: boolean; active?: boolean;
danger?: boolean; danger?: boolean;
level: 1 | 2;
soon?: boolean; soon?: boolean;
}; };
@ -50,7 +52,7 @@ const StyledItem = styled.div<StyledItemProps>`
font-family: 'Inter'; font-family: 'Inter';
font-size: ${({ theme }) => theme.font.size.md}; font-size: ${({ theme }) => theme.font.size.md};
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
margin-bottom: calc(${({ theme }) => theme.spacing(1)} / 2); margin-left: ${({ level, theme }) => theme.spacing((level - 1) * 4)};
padding-bottom: ${({ theme }) => theme.spacing(1)}; padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)}; padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)}; padding-right: ${({ theme }) => theme.spacing(1)};
@ -86,7 +88,6 @@ const StyledSoonPill = styled.div`
font-size: ${({ theme }) => theme.font.size.xs}; font-size: ${({ theme }) => theme.font.size.xs};
height: 16px; height: 16px;
justify-content: center; justify-content: center;
margin-left: auto;
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
`; `;
@ -120,6 +121,7 @@ const StyledKeyBoardShortcut = styled.div`
export const NavigationDrawerItem = ({ export const NavigationDrawerItem = ({
className, className,
label, label,
level = 1,
Icon, Icon,
to, to,
onClick, onClick,
@ -152,6 +154,7 @@ export const NavigationDrawerItem = ({
return ( return (
<StyledItem <StyledItem
className={className} className={className}
level={level}
onClick={handleItemClick} onClick={handleItemClick}
active={active} active={active}
aria-selected={active} aria-selected={active}

9
front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup.tsx Normal file
View File

@ -0,0 +1,9 @@
import styled from '@emotion/styled';
const StyledGroup = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(0.5)};
`;
export { StyledGroup as NavigationDrawerItemGroup };

9
front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx Normal file
View File

@ -0,0 +1,9 @@
import styled from '@emotion/styled';
const StyledSection = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(1)};
`;
export { StyledSection as NavigationDrawerSection };

5
front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
View File

@ -9,9 +9,8 @@ const StyledTitle = styled.div`
display: flex; display: flex;
font-size: ${({ theme }) => theme.font.size.xs}; font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
padding-bottom: ${({ theme }) => theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)}; padding-top: 0;
padding-top: ${({ theme }) => theme.spacing(8)};
text-transform: uppercase; text-transform: uppercase;
`; `;

139
front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx
View File

@ -2,11 +2,14 @@ import { Meta, StoryObj } from '@storybook/react';
import { Favorites } from '@/favorites/components/Favorites'; import { Favorites } from '@/favorites/components/Favorites';
import { import {
IconAt,
IconBell, IconBell,
IconBuildingSkyscraper, IconBuildingSkyscraper,
IconCalendarEvent,
IconCheckbox, IconCheckbox,
IconColorSwatch, IconColorSwatch,
IconLogout, IconLogout,
IconMail,
IconSearch, IconSearch,
IconSettings, IconSettings,
IconTargetArrow, IconTargetArrow,
@ -21,6 +24,8 @@ import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { NavigationDrawer } from '../NavigationDrawer'; import { NavigationDrawer } from '../NavigationDrawer';
import { NavigationDrawerItem } from '../NavigationDrawerItem'; import { NavigationDrawerItem } from '../NavigationDrawerItem';
import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle'; import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
import { NavigationDrawerSection } from '../NavigationDrawerSection';
import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup';
const meta: Meta<typeof NavigationDrawer> = { const meta: Meta<typeof NavigationDrawer> = {
title: 'UI/Navigation/NavigationDrawer/NavigationDrawer', title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',
@ -37,33 +42,39 @@ export const Default: Story = {
args: { args: {
children: ( children: (
<> <>
<NavigationDrawerItem label="Search" Icon={IconSearch} active /> <NavigationDrawerSection>
<NavigationDrawerItem <NavigationDrawerItem label="Search" Icon={IconSearch} active />
label="Notifications" <NavigationDrawerItem
to="/inbox" label="Notifications"
Icon={IconBell} to="/inbox"
soon={true} Icon={IconBell}
/> soon={true}
<NavigationDrawerItem />
label="Settings" <NavigationDrawerItem
to="/settings/profile" label="Settings"
Icon={IconSettings} to="/settings/profile"
/> Icon={IconSettings}
<NavigationDrawerItem />
label="Tasks" <NavigationDrawerItem
to="/tasks" label="Tasks"
Icon={IconCheckbox} to="/tasks"
count={2} Icon={IconCheckbox}
/> count={2}
/>
</NavigationDrawerSection>
<Favorites /> <Favorites />
<NavigationDrawerSectionTitle label="Workspace" />
<NavigationDrawerItem <NavigationDrawerSection>
label="Companies" <NavigationDrawerSectionTitle label="Workspace" />
to="/companies" <NavigationDrawerItem
Icon={IconBuildingSkyscraper} label="Companies"
/> to="/companies"
<NavigationDrawerItem label="People" to="/people" Icon={IconUser} /> Icon={IconBuildingSkyscraper}
<NavigationDrawerItem label="Opportunities" Icon={IconTargetArrow} /> />
<NavigationDrawerItem label="People" to="/people" Icon={IconUser} />
<NavigationDrawerItem label="Opportunities" Icon={IconTargetArrow} />
</NavigationDrawerSection>
</> </>
), ),
footer: null, footer: null,
@ -76,32 +87,58 @@ export const Submenu: Story = {
title: 'Settings', title: 'Settings',
children: ( children: (
<> <>
<NavigationDrawerSectionTitle label="User" /> <NavigationDrawerSection>
<NavigationDrawerItem <NavigationDrawerSectionTitle label="User" />
label="Profile" <NavigationDrawerItem
to="/settings/profile" label="Profile"
Icon={IconUserCircle} to="/settings/profile"
active Icon={IconUserCircle}
/> active
<NavigationDrawerItem />
label="Appearance" <NavigationDrawerItem
to="/settings/profile/appearance" label="Appearance"
Icon={IconColorSwatch} to="/settings/profile/appearance"
/> Icon={IconColorSwatch}
<NavigationDrawerSectionTitle label="Workspace" /> />
<NavigationDrawerItem <NavigationDrawerItemGroup>
label="General" <NavigationDrawerItem
to="/settings/workspace" label="Accounts"
Icon={IconSettings} to="/settings/accounts"
/> Icon={IconAt}
<NavigationDrawerItem />
label="Members" <NavigationDrawerItem
to="/settings/workspace-members" level={2}
Icon={IconUsers} label="Emails"
/> to="/settings/accounts/emails"
Icon={IconMail}
/>
<NavigationDrawerItem
level={2}
label="Calendars"
Icon={IconCalendarEvent}
soon
/>
</NavigationDrawerItemGroup>
</NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Other" /> <NavigationDrawerSection>
<NavigationDrawerItem label="Logout" Icon={IconLogout} /> <NavigationDrawerSectionTitle label="Workspace" />
<NavigationDrawerItem
label="General"
to="/settings/workspace"
Icon={IconSettings}
/>
<NavigationDrawerItem
label="Members"
to="/settings/workspace-members"
Icon={IconUsers}
/>
</NavigationDrawerSection>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Other" />
<NavigationDrawerItem label="Logout" Icon={IconLogout} />
</NavigationDrawerSection>
</> </>
), ),
footer: <GithubVersionLink />, footer: <GithubVersionLink />,

3
front/src/modules/ui/theme/constants/theme.ts
View File

@ -35,7 +35,8 @@ const common = {
}, },
}, },
spacingMultiplicator: 4, spacingMultiplicator: 4,
spacing: (multiplicator: number) => `${multiplicator * 4}px`, spacing: (...args: number[]) =>
args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),
betweenSiblingsGap: `2px`, betweenSiblingsGap: `2px`,
table: { table: {
horizontalCellMargin: '8px', horizontalCellMargin: '8px',

17
front/src/pages/settings/accounts/SettingsAccountsEmails.tsx Normal file
View File

@ -0,0 +1,17 @@
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings } from '@/ui/display/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsAccountsEmails = () => (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Accounts', href: '/settings/accounts' },
{ children: 'Emails' },
]}
/>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);

28
front/src/pages/settings/accounts/__stories__/SettingsAccounts.stories.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Meta, StoryObj } from '@storybook/react';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { SettingsAccounts } from '../SettingsAccounts';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Accounts/SettingsAccounts',
component: SettingsAccounts,
decorators: [PageDecorator],
args: {
routePath: '/settings/accounts',
},
parameters: {
layout: 'fullscreen',
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsAccounts>;
export const Default: Story = {};

28
front/src/pages/settings/accounts/__stories__/SettingsAccountsEmails.stories.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Meta, StoryObj } from '@storybook/react';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { SettingsAccountsEmails } from '../SettingsAccountsEmails';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Accounts/SettingsAccountsEmails',
component: SettingsAccountsEmails,
decorators: [PageDecorator],
args: {
routePath: '/settings/accounts/emails',
},
parameters: {
layout: 'fullscreen',
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsAccountsEmails>;
export const Default: Story = {};