Refactor UI folder (#2016)
* Added Overview page * Revised Getting Started page * Minor revision * Edited readme, minor modifications to docs * Removed sweep.yaml, .devcontainer, .ergomake * Moved security.md to .github, added contributing.md * changes as per code review * updated contributing.md * fixed broken links & added missing links in doc, improved structure * fixed link in wsl setup * fixed server link, added https cloning in yarn-setup * removed package-lock.json * added doc card, admonitions * removed underline from nav buttons * refactoring modules/ui * refactoring modules/ui * Change folder case * Fix theme location * Fix case 2 * Fix storybook --------- Co-authored-by: Nimra Ahmed <nimra1408@gmail.com> Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>
This commit is contained in:
Charles Bochet
@ -0,0 +1,62 @@
|
||||
import React, { useRef } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
|
||||
import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState';
|
||||
|
||||
import { actionBarOpenState } from '../states/actionBarIsOpenState';
|
||||
|
||||
import { ActionBarItem } from './ActionBarItem';
|
||||
|
||||
type ActionBarProps = {
|
||||
selectedIds: string[];
|
||||
};
|
||||
|
||||
const StyledContainerActionBar = styled.div`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.secondary};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
bottom: 38px;
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
||||
display: flex;
|
||||
height: 48px;
|
||||
|
||||
left: 50%;
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
padding-right: ${({ theme }) => theme.spacing(2)};
|
||||
position: absolute;
|
||||
top: auto;
|
||||
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
`;
|
||||
|
||||
export const ActionBar = ({ selectedIds }: ActionBarProps) => {
|
||||
const actionBarOpen = useRecoilValue(actionBarOpenState);
|
||||
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
|
||||
const actionBarEntries = useRecoilValue(actionBarEntriesState);
|
||||
const wrapperRef = useRef(null);
|
||||
|
||||
if (selectedIds.length === 0 || !actionBarOpen || contextMenuIsOpen) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<StyledContainerActionBar
|
||||
data-select-disable
|
||||
className="action-bar"
|
||||
ref={wrapperRef}
|
||||
>
|
||||
{actionBarEntries.map((item) => (
|
||||
<ActionBarItem
|
||||
Icon={item.Icon}
|
||||
accent={item.accent}
|
||||
label={item.label}
|
||||
onClick={item.onClick}
|
||||
key={item.label}
|
||||
/>
|
||||
))}
|
||||
</StyledContainerActionBar>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,55 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
import { ActionBarItemAccent } from '../types/ActionBarItemAccent';
|
||||
|
||||
type ActionBarItemProps = {
|
||||
Icon: IconComponent;
|
||||
label: string;
|
||||
accent?: ActionBarItemAccent;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
const StyledButton = styled.div<{ accent: ActionBarItemAccent }>`
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
color: ${(props) =>
|
||||
props.accent === 'danger'
|
||||
? props.theme.color.red
|
||||
: props.theme.font.color.secondary};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
transition: background 0.1s ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: ${({ theme, accent }) =>
|
||||
accent === 'danger'
|
||||
? theme.tag.background.red
|
||||
: theme.background.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledButtonLabel = styled.div`
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
export const ActionBarItem = ({
|
||||
label,
|
||||
Icon,
|
||||
accent = 'standard',
|
||||
onClick,
|
||||
}: ActionBarItemProps) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<StyledButton accent={accent} onClick={onClick}>
|
||||
{Icon && <Icon size={theme.icon.size.md} />}
|
||||
<StyledButtonLabel>{label}</StyledButtonLabel>
|
||||
</StyledButton>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,42 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
|
||||
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { actionBarOpenState } from '../../states/actionBarIsOpenState';
|
||||
import { ActionBar } from '../ActionBar';
|
||||
|
||||
const FilledActionBar = (props: { selectedIds: string[] }) => {
|
||||
const { setActionBarEntries } = useCompanyTableActionBarEntries();
|
||||
setActionBarEntries();
|
||||
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
|
||||
setActionBarOpenState(true);
|
||||
return <ActionBar selectedIds={props.selectedIds} />;
|
||||
};
|
||||
|
||||
const meta: Meta<typeof ActionBar> = {
|
||||
title: 'UI/ActionBar/ActionBar',
|
||||
component: FilledActionBar,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<RecoilScope CustomRecoilScopeContext={TableRecoilScopeContext}>
|
||||
<MemoryRouter>
|
||||
<CompanyTableMockMode />
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
</RecoilScope>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
args: { selectedIds: ['TestId'] },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ActionBar>;
|
||||
|
||||
export const Default: Story = {};
|
||||
@ -0,0 +1,8 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
import { ActionBarEntry } from '../types/ActionBarEntry';
|
||||
|
||||
export const actionBarEntriesState = atom<ActionBarEntry[]>({
|
||||
key: 'actionBarEntriesState',
|
||||
default: [],
|
||||
});
|
||||
@ -0,0 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
export const actionBarOpenState = atom<boolean>({
|
||||
key: 'actionBarOpenState',
|
||||
default: false,
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
import { ActionBarItemAccent } from './ActionBarItemAccent';
|
||||
|
||||
export type ActionBarEntry = {
|
||||
label: string;
|
||||
Icon: IconComponent;
|
||||
accent?: ActionBarItemAccent;
|
||||
onClick: () => void;
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export type ActionBarItemAccent = 'standard' | 'danger';
|
||||
@ -0,0 +1,43 @@
|
||||
import { Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type BreadcrumbProps = {
|
||||
className?: string;
|
||||
links: { children: string; href?: string }[];
|
||||
};
|
||||
|
||||
const StyledWrapper = styled.nav`
|
||||
align-items: center;
|
||||
color: ${({ theme }) => theme.font.color.extraLight};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.lg};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: ${({ theme }) => theme.spacing(6)};
|
||||
line-height: ${({ theme }) => theme.text.lineHeight.md};
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
const StyledText = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
`;
|
||||
|
||||
export const Breadcrumb = ({ className, links }: BreadcrumbProps) => (
|
||||
<StyledWrapper className={className}>
|
||||
{links.map((link, index) => (
|
||||
<Fragment key={index}>
|
||||
{link.href ? (
|
||||
<StyledLink to={link.href}>{link.children}</StyledLink>
|
||||
) : (
|
||||
<StyledText>{link.children}</StyledText>
|
||||
)}
|
||||
{index < links.length - 1 && '/'}
|
||||
</Fragment>
|
||||
))}
|
||||
</StyledWrapper>
|
||||
);
|
||||
@ -0,0 +1,24 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { Breadcrumb } from '../Breadcrumb';
|
||||
|
||||
const meta: Meta<typeof Breadcrumb> = {
|
||||
title: 'UI/Breadcrumb/Breadcrumb',
|
||||
component: Breadcrumb,
|
||||
decorators: [ComponentDecorator, ComponentWithRouterDecorator],
|
||||
args: {
|
||||
links: [
|
||||
{ children: 'Objects', href: '/link-1' },
|
||||
{ children: 'Companies', href: '/link-2' },
|
||||
{ children: 'New' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Breadcrumb>;
|
||||
|
||||
export const Default: Story = {};
|
||||
@ -0,0 +1,91 @@
|
||||
import React, { useRef } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
|
||||
import { actionBarOpenState } from '@/ui/navigation/action-bar/states/actionBarIsOpenState';
|
||||
import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState';
|
||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||
|
||||
import { contextMenuEntriesState } from '../states/contextMenuEntriesState';
|
||||
import { contextMenuIsOpenState } from '../states/contextMenuIsOpenState';
|
||||
import { PositionType } from '../types/PositionType';
|
||||
|
||||
import { ContextMenuItem } from './ContextMenuItem';
|
||||
|
||||
type ContextMenuProps = {
|
||||
selectedIds: string[];
|
||||
};
|
||||
|
||||
type StyledContainerProps = {
|
||||
position: PositionType;
|
||||
};
|
||||
|
||||
const StyledContainerContextMenu = styled.div<StyledContainerProps>`
|
||||
align-items: flex-start;
|
||||
background: ${({ theme }) => theme.background.secondary};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
|
||||
left: ${(props) => `${props.position.x}px`};
|
||||
position: fixed;
|
||||
top: ${(props) => `${props.position.y}px`};
|
||||
|
||||
transform: translateX(-50%);
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
`;
|
||||
|
||||
export const ContextMenu = ({ selectedIds }: ContextMenuProps) => {
|
||||
const contextMenuPosition = useRecoilValue(contextMenuPositionState);
|
||||
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
|
||||
const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
|
||||
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
|
||||
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
|
||||
const wrapperRef = useRef(null);
|
||||
|
||||
useListenClickOutside({
|
||||
refs: [wrapperRef],
|
||||
callback: () => {
|
||||
setContextMenuOpenState(false);
|
||||
setActionBarOpenState(true);
|
||||
},
|
||||
});
|
||||
|
||||
if (selectedIds.length === 0 || !contextMenuIsOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const width = contextMenuEntries.some(
|
||||
(contextMenuEntry) => contextMenuEntry.label === 'Remove from favorites',
|
||||
)
|
||||
? 200
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<StyledContainerContextMenu
|
||||
className="context-menu"
|
||||
ref={wrapperRef}
|
||||
position={contextMenuPosition}
|
||||
>
|
||||
<StyledDropdownMenu data-select-disable width={width}>
|
||||
<DropdownMenuItemsContainer>
|
||||
{contextMenuEntries.map((item) => (
|
||||
<ContextMenuItem
|
||||
Icon={item.Icon}
|
||||
label={item.label}
|
||||
accent={item.accent}
|
||||
onClick={item.onClick}
|
||||
key={item.label}
|
||||
/>
|
||||
))}
|
||||
</DropdownMenuItemsContainer>
|
||||
</StyledDropdownMenu>
|
||||
</StyledContainerContextMenu>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
|
||||
|
||||
import { ContextMenuItemAccent } from '../types/ContextMenuItemAccent';
|
||||
|
||||
type ContextMenuItemProps = {
|
||||
Icon: IconComponent;
|
||||
label: string;
|
||||
accent?: ContextMenuItemAccent;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
export const ContextMenuItem = ({
|
||||
label,
|
||||
Icon,
|
||||
accent = 'default',
|
||||
onClick,
|
||||
}: ContextMenuItemProps) => (
|
||||
<MenuItem LeftIcon={Icon} onClick={onClick} accent={accent} text={label} />
|
||||
);
|
||||
@ -0,0 +1,48 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
|
||||
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { contextMenuIsOpenState } from '../../states/contextMenuIsOpenState';
|
||||
import { contextMenuPositionState } from '../../states/contextMenuPositionState';
|
||||
import { ContextMenu } from '../ContextMenu';
|
||||
|
||||
const FilledContextMenu = (props: { selectedIds: string[] }) => {
|
||||
const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
|
||||
setContextMenuEntries();
|
||||
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
|
||||
setContextMenuPosition({
|
||||
x: 100,
|
||||
y: 10,
|
||||
});
|
||||
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
|
||||
setContextMenuOpenState(true);
|
||||
return <ContextMenu selectedIds={props.selectedIds} />;
|
||||
};
|
||||
|
||||
const meta: Meta<typeof ContextMenu> = {
|
||||
title: 'UI/ContextMenu/ContextMenu',
|
||||
component: FilledContextMenu,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<RecoilScope CustomRecoilScopeContext={TableRecoilScopeContext}>
|
||||
<MemoryRouter>
|
||||
<CompanyTableMockMode></CompanyTableMockMode>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
</RecoilScope>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
args: { selectedIds: ['TestId'] },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ContextMenu>;
|
||||
|
||||
export const Default: Story = {};
|
||||
@ -0,0 +1,8 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
import { ContextMenuEntry } from '../types/ContextMenuEntry';
|
||||
|
||||
export const contextMenuEntriesState = atom<ContextMenuEntry[]>({
|
||||
key: 'contextMenuEntriesState',
|
||||
default: [],
|
||||
});
|
||||
@ -0,0 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
export const contextMenuIsOpenState = atom<boolean>({
|
||||
key: 'contextMenuIsOpenState',
|
||||
default: false,
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
import { PositionType } from '@/ui/navigation/context-menu/types/PositionType';
|
||||
|
||||
export const contextMenuPositionState = atom<PositionType>({
|
||||
key: 'contextMenuPositionState',
|
||||
default: {
|
||||
x: null,
|
||||
y: null,
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
import { ContextMenuItemAccent } from './ContextMenuItemAccent';
|
||||
|
||||
export type ContextMenuEntry = {
|
||||
label: string;
|
||||
Icon: IconComponent;
|
||||
accent?: ContextMenuItemAccent;
|
||||
onClick: () => void;
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export type ContextMenuItemAccent = 'default' | 'danger';
|
||||
@ -0,0 +1,4 @@
|
||||
export type PositionType = {
|
||||
x: number | null;
|
||||
y: number | null;
|
||||
};
|
||||
@ -0,0 +1,43 @@
|
||||
import * as React from 'react';
|
||||
import { Link as ReactLink } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type ContactLinkProps = {
|
||||
className?: string;
|
||||
href: string;
|
||||
children?: React.ReactNode;
|
||||
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
||||
};
|
||||
|
||||
const StyledClickable = styled.div`
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: ${({ theme }) => theme.border.color.strong};
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
text-decoration-color: ${({ theme }) => theme.font.color.primary};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const ContactLink = ({
|
||||
className,
|
||||
href,
|
||||
children,
|
||||
onClick,
|
||||
}: ContactLinkProps) => (
|
||||
<div>
|
||||
<StyledClickable className={className}>
|
||||
<ReactLink target="_blank" onClick={onClick} to={href}>
|
||||
{children}
|
||||
</ReactLink>
|
||||
</StyledClickable>
|
||||
</div>
|
||||
);
|
||||
37
front/src/modules/ui/navigation/link/components/RawLink.tsx
Normal file
37
front/src/modules/ui/navigation/link/components/RawLink.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import * as React from 'react';
|
||||
import { Link as ReactLink } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type RawLinkProps = {
|
||||
className?: string;
|
||||
href: string;
|
||||
children?: React.ReactNode;
|
||||
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
||||
};
|
||||
|
||||
const StyledClickable = styled.div`
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
`;
|
||||
|
||||
export const RawLink = ({
|
||||
className,
|
||||
href,
|
||||
children,
|
||||
onClick,
|
||||
}: RawLinkProps) => (
|
||||
<div>
|
||||
<StyledClickable className={className}>
|
||||
<ReactLink target="_blank" onClick={onClick} to={href}>
|
||||
{children}
|
||||
</ReactLink>
|
||||
</StyledClickable>
|
||||
</div>
|
||||
);
|
||||
@ -0,0 +1,41 @@
|
||||
import * as React from 'react';
|
||||
import { Link as ReactLink } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Chip, ChipSize, ChipVariant } from '@/ui/display/chip/components/Chip';
|
||||
|
||||
type RoundedLinkProps = {
|
||||
href: string;
|
||||
children?: React.ReactNode;
|
||||
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
||||
};
|
||||
|
||||
const StyledClickable = styled.div`
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
`;
|
||||
|
||||
export const RoundedLink = ({ children, href, onClick }: RoundedLinkProps) => (
|
||||
<div>
|
||||
{children !== '' ? (
|
||||
<StyledClickable>
|
||||
<ReactLink target="_blank" to={href} onClick={onClick}>
|
||||
<Chip
|
||||
label={`${children}`}
|
||||
variant={ChipVariant.Rounded}
|
||||
size={ChipSize.Small}
|
||||
/>
|
||||
</ReactLink>
|
||||
</StyledClickable>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@ -0,0 +1,64 @@
|
||||
import * as React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { RoundedLink } from './RoundedLink';
|
||||
|
||||
export enum LinkType {
|
||||
Url = 'url',
|
||||
LinkedIn = 'linkedin',
|
||||
Twitter = 'twitter',
|
||||
}
|
||||
|
||||
type SocialLinkProps = {
|
||||
href: string;
|
||||
children?: React.ReactNode;
|
||||
type?: LinkType;
|
||||
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
||||
};
|
||||
|
||||
const StyledRawLink = styled(RoundedLink)`
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
`;
|
||||
|
||||
export const SocialLink = ({
|
||||
children,
|
||||
href,
|
||||
onClick,
|
||||
type,
|
||||
}: SocialLinkProps) => {
|
||||
let displayValue = children;
|
||||
|
||||
if (type === 'linkedin') {
|
||||
const matches = href.match(
|
||||
/(?:https?:\/\/)?(?:www.)?linkedin.com\/(?:in|company)\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
|
||||
);
|
||||
if (matches && matches[1]) {
|
||||
displayValue = matches[1];
|
||||
} else {
|
||||
displayValue = 'LinkedIn';
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'twitter') {
|
||||
const matches = href.match(
|
||||
/(?:https?:\/\/)?(?:www.)?twitter.com\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
|
||||
);
|
||||
if (matches && matches[1]) {
|
||||
displayValue = `@${matches[1]}`;
|
||||
} else {
|
||||
displayValue = '@twitter';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledRawLink href={href} onClick={onClick}>
|
||||
{displayValue}
|
||||
</StyledRawLink>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
import { jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { ContactLink } from '../ContactLink';
|
||||
|
||||
const meta: Meta<typeof ContactLink> = {
|
||||
title: 'UI/Link/ContactLink',
|
||||
component: ContactLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
args: {
|
||||
className: 'ContactLink',
|
||||
href: '/test',
|
||||
children: 'Contact Link',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ContactLink>;
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const Email: Story = {
|
||||
args: {
|
||||
href: `mailto:${'email@example.com'}`,
|
||||
children: 'email@example.com',
|
||||
onClick: clickJestFn,
|
||||
},
|
||||
};
|
||||
|
||||
export const Phone: Story = {
|
||||
args: {
|
||||
children: '11111111111',
|
||||
onClick: clickJestFn,
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,38 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import { jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { RawLink } from '../RawLink';
|
||||
|
||||
const meta: Meta<typeof RawLink> = {
|
||||
title: 'UI/Link/RawLink',
|
||||
component: RawLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
args: {
|
||||
className: 'RawLink',
|
||||
href: '/test',
|
||||
children: 'Raw Link',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof RawLink>;
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
onClick: clickJestFn,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await expect(clickJestFn).toHaveBeenCalledTimes(0);
|
||||
const link = canvas.getByRole('link');
|
||||
await userEvent.click(link);
|
||||
|
||||
await expect(clickJestFn).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,37 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import { jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { RoundedLink } from '../RoundedLink';
|
||||
|
||||
const meta: Meta<typeof RoundedLink> = {
|
||||
title: 'UI/Link/RoundedLink',
|
||||
component: RoundedLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
args: {
|
||||
href: '/test',
|
||||
children: 'Rounded chip',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof RoundedLink>;
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
onClick: clickJestFn,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await expect(clickJestFn).toHaveBeenCalledTimes(0);
|
||||
const link = canvas.getByRole('link');
|
||||
await userEvent.click(link);
|
||||
|
||||
await expect(clickJestFn).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,52 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import { jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { LinkType, SocialLink } from '../SocialLink';
|
||||
|
||||
const meta: Meta<typeof SocialLink> = {
|
||||
title: 'UI/Link/SocialLink',
|
||||
component: SocialLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
args: {
|
||||
href: '/test',
|
||||
children: 'Social Link',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SocialLink>;
|
||||
const clickJestFn = jest.fn();
|
||||
|
||||
const linkedin: LinkType = LinkType.LinkedIn;
|
||||
const twitter: LinkType = LinkType.Twitter;
|
||||
|
||||
export const LinkedIn: Story = {
|
||||
args: {
|
||||
href: '/LinkedIn',
|
||||
children: 'LinkedIn',
|
||||
onClick: clickJestFn,
|
||||
type: linkedin,
|
||||
},
|
||||
};
|
||||
|
||||
export const Twitter: Story = {
|
||||
args: {
|
||||
href: '/Twitter',
|
||||
children: 'Twitter',
|
||||
onClick: clickJestFn,
|
||||
type: twitter,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await expect(clickJestFn).toHaveBeenCalledTimes(0);
|
||||
const link = canvas.getByRole('link');
|
||||
await userEvent.click(link);
|
||||
|
||||
await expect(clickJestFn).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,59 @@
|
||||
import { MouseEvent } from 'react';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { FloatingIconButtonGroup } from '@/ui/input/button/components/FloatingIconButtonGroup';
|
||||
|
||||
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
||||
import {
|
||||
StyledHoverableMenuItemBase,
|
||||
StyledMenuItemLeftContent,
|
||||
} from '../internals/components/StyledMenuItemBase';
|
||||
import { MenuItemAccent } from '../types/MenuItemAccent';
|
||||
|
||||
export type MenuItemIconButton = {
|
||||
Icon: IconComponent;
|
||||
onClick?: (event: MouseEvent<any>) => void;
|
||||
};
|
||||
|
||||
export type MenuItemProps = {
|
||||
LeftIcon?: IconComponent | null;
|
||||
accent?: MenuItemAccent;
|
||||
text: string;
|
||||
iconButtons?: MenuItemIconButton[];
|
||||
isTooltipOpen?: boolean;
|
||||
className?: string;
|
||||
testId?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export const MenuItem = ({
|
||||
LeftIcon,
|
||||
accent = 'default',
|
||||
text,
|
||||
iconButtons,
|
||||
isTooltipOpen,
|
||||
className,
|
||||
testId,
|
||||
onClick,
|
||||
}: MenuItemProps) => {
|
||||
const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
|
||||
|
||||
return (
|
||||
<StyledHoverableMenuItemBase
|
||||
data-testid={testId ?? undefined}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
accent={accent}
|
||||
isMenuOpen={!!isTooltipOpen}
|
||||
>
|
||||
<StyledMenuItemLeftContent>
|
||||
<MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />
|
||||
</StyledMenuItemLeftContent>
|
||||
<div className="hoverable-buttons">
|
||||
{showIconButtons && (
|
||||
<FloatingIconButtonGroup iconButtons={iconButtons} />
|
||||
)}
|
||||
</div>
|
||||
</StyledHoverableMenuItemBase>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,115 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { Command } from 'cmdk';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
import {
|
||||
StyledMenuItemLabel,
|
||||
StyledMenuItemLeftContent,
|
||||
} from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
const StyledMenuItemLabelText = styled(StyledMenuItemLabel)`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
`;
|
||||
|
||||
const StyledBigIconContainer = styled.div`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledCommandText = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
padding-right: ${({ theme }) => theme.spacing(2)};
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledMenuItemCommandContainer = styled(Command.Item)`
|
||||
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
|
||||
--vertical-padding: ${({ theme }) => theme.spacing(2)};
|
||||
align-items: center;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
color: ${({ theme }) => theme.font.color.secondary};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: calc(32px - 2 * var(--vertical-padding));
|
||||
height: 24px;
|
||||
justify-content: space-between;
|
||||
padding: var(--vertical-padding) var(--horizontal-padding);
|
||||
position: relative;
|
||||
transition: all 150ms ease;
|
||||
transition-property: none;
|
||||
user-select: none;
|
||||
width: calc(100% - 2 * var(--horizontal-padding));
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
}
|
||||
&[data-selected='true'] {
|
||||
background: ${({ theme }) => theme.background.tertiary};
|
||||
/* Could be nice to add a caret like this for better accessibility in the future
|
||||
But it needs to be consistend with other picker dropdown (e.g. company)
|
||||
&:after {
|
||||
background: ${({ theme }) => theme.background.quaternary};
|
||||
content: '';
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
z-index: ${({ theme }) => theme.lastLayerZIndex};
|
||||
} */
|
||||
}
|
||||
&[data-disabled='true'] {
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
cursor: not-allowed;
|
||||
}
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
export type MenuItemCommandProps = {
|
||||
LeftIcon?: IconComponent;
|
||||
text: string;
|
||||
command: string;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export const MenuItemCommand = ({
|
||||
LeftIcon,
|
||||
text,
|
||||
command,
|
||||
className,
|
||||
onClick,
|
||||
}: MenuItemCommandProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledMenuItemCommandContainer onSelect={onClick} className={className}>
|
||||
<StyledMenuItemLeftContent>
|
||||
{LeftIcon && (
|
||||
<StyledBigIconContainer>
|
||||
<LeftIcon size={theme.icon.size.sm} />
|
||||
</StyledBigIconContainer>
|
||||
)}
|
||||
<StyledMenuItemLabelText hasLeftIcon={!!LeftIcon}>
|
||||
{text}
|
||||
</StyledMenuItemLabelText>
|
||||
</StyledMenuItemLeftContent>
|
||||
<StyledCommandText>{command}</StyledCommandText>
|
||||
</StyledMenuItemCommandContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,52 @@
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { FloatingIconButtonGroup } from '@/ui/input/button/components/FloatingIconButtonGroup';
|
||||
|
||||
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
||||
import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
|
||||
import { MenuItemAccent } from '../types/MenuItemAccent';
|
||||
|
||||
import { MenuItemIconButton } from './MenuItem';
|
||||
|
||||
export type MenuItemDraggableProps = {
|
||||
LeftIcon: IconComponent | undefined;
|
||||
accent?: MenuItemAccent;
|
||||
iconButtons?: MenuItemIconButton[];
|
||||
isTooltipOpen?: boolean;
|
||||
onClick?: () => void;
|
||||
text: string;
|
||||
isDragDisabled?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
export const MenuItemDraggable = ({
|
||||
LeftIcon,
|
||||
accent = 'default',
|
||||
iconButtons,
|
||||
isTooltipOpen,
|
||||
onClick,
|
||||
text,
|
||||
isDragDisabled = false,
|
||||
className,
|
||||
}: MenuItemDraggableProps) => {
|
||||
const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
|
||||
|
||||
return (
|
||||
<StyledHoverableMenuItemBase
|
||||
onClick={onClick}
|
||||
accent={accent}
|
||||
className={className}
|
||||
isMenuOpen={!!isTooltipOpen}
|
||||
>
|
||||
<MenuItemLeftContent
|
||||
LeftIcon={LeftIcon}
|
||||
text={text}
|
||||
showGrip={!isDragDisabled}
|
||||
/>
|
||||
{showIconButtons && (
|
||||
<FloatingIconButtonGroup
|
||||
className="hoverable-buttons"
|
||||
iconButtons={iconButtons}
|
||||
/>
|
||||
)}
|
||||
</StyledHoverableMenuItemBase>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,43 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { Checkbox } from '@/ui/input/components/Checkbox';
|
||||
|
||||
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
||||
import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
const StyledLeftContentWithCheckboxContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
type MenuItemMultiSelectProps = {
|
||||
LeftIcon?: IconComponent;
|
||||
selected: boolean;
|
||||
text: string;
|
||||
className: string;
|
||||
onSelectChange?: (selected: boolean) => void;
|
||||
};
|
||||
|
||||
export const MenuItemMultiSelect = ({
|
||||
LeftIcon,
|
||||
text,
|
||||
selected,
|
||||
className,
|
||||
onSelectChange,
|
||||
}: MenuItemMultiSelectProps) => {
|
||||
const handleOnClick = () => {
|
||||
onSelectChange?.(!selected);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledMenuItemBase className={className} onClick={handleOnClick}>
|
||||
<StyledLeftContentWithCheckboxContainer>
|
||||
<Checkbox checked={selected} />
|
||||
<MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
|
||||
</StyledLeftContentWithCheckboxContainer>
|
||||
</StyledMenuItemBase>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,51 @@
|
||||
import { ReactNode } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Checkbox } from '@/ui/input/components/Checkbox';
|
||||
|
||||
import {
|
||||
StyledMenuItemBase,
|
||||
StyledMenuItemLabel,
|
||||
StyledMenuItemLeftContent,
|
||||
} from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
const StyledLeftContentWithCheckboxContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
type MenuItemMultiSelectAvatarProps = {
|
||||
avatar?: ReactNode;
|
||||
selected: boolean;
|
||||
text: string;
|
||||
className?: string;
|
||||
onSelectChange?: (selected: boolean) => void;
|
||||
};
|
||||
|
||||
export const MenuItemMultiSelectAvatar = ({
|
||||
avatar,
|
||||
text,
|
||||
selected,
|
||||
className,
|
||||
onSelectChange,
|
||||
}: MenuItemMultiSelectAvatarProps) => {
|
||||
const handleOnClick = () => {
|
||||
onSelectChange?.(!selected);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledMenuItemBase className={className} onClick={handleOnClick}>
|
||||
<StyledLeftContentWithCheckboxContainer>
|
||||
<Checkbox checked={selected} />
|
||||
<StyledMenuItemLeftContent>
|
||||
{avatar}
|
||||
<StyledMenuItemLabel hasLeftIcon={!!avatar}>
|
||||
{text}
|
||||
</StyledMenuItemLabel>
|
||||
</StyledMenuItemLeftContent>
|
||||
</StyledLeftContentWithCheckboxContainer>
|
||||
</StyledMenuItemBase>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
|
||||
import { IconChevronRight } from '@/ui/display/icon';
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
||||
import {
|
||||
StyledMenuItemBase,
|
||||
StyledMenuItemLeftContent,
|
||||
} from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
export type MenuItemNavigateProps = {
|
||||
LeftIcon?: IconComponent;
|
||||
text: string;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const MenuItemNavigate = ({
|
||||
LeftIcon,
|
||||
text,
|
||||
className,
|
||||
onClick,
|
||||
}: MenuItemNavigateProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledMenuItemBase onClick={onClick} className={className}>
|
||||
<StyledMenuItemLeftContent>
|
||||
<MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
|
||||
</StyledMenuItemLeftContent>
|
||||
<IconChevronRight size={theme.icon.size.sm} />
|
||||
</StyledMenuItemBase>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,75 @@
|
||||
import { css, useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconCheck } from '@/ui/display/icon';
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
||||
import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
export const StyledMenuItemSelect = styled(StyledMenuItemBase)<{
|
||||
selected: boolean;
|
||||
disabled?: boolean;
|
||||
hovered?: boolean;
|
||||
}>`
|
||||
${({ theme, selected, disabled, hovered }) => {
|
||||
if (selected) {
|
||||
return css`
|
||||
background: ${theme.background.transparent.light};
|
||||
&:hover {
|
||||
background: ${theme.background.transparent.medium};
|
||||
}
|
||||
`;
|
||||
} else if (disabled) {
|
||||
return css`
|
||||
background: inherit;
|
||||
&:hover {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
color: ${theme.font.color.tertiary};
|
||||
|
||||
cursor: default;
|
||||
`;
|
||||
} else if (hovered) {
|
||||
return css`
|
||||
background: ${theme.background.transparent.light};
|
||||
`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
|
||||
type MenuItemSelectProps = {
|
||||
LeftIcon: IconComponent | null | undefined;
|
||||
selected: boolean;
|
||||
text: string;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
hovered?: boolean;
|
||||
};
|
||||
|
||||
export const MenuItemSelect = ({
|
||||
LeftIcon,
|
||||
text,
|
||||
selected,
|
||||
className,
|
||||
onClick,
|
||||
disabled,
|
||||
hovered,
|
||||
}: MenuItemSelectProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledMenuItemSelect
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
selected={selected}
|
||||
disabled={disabled}
|
||||
hovered={hovered}
|
||||
>
|
||||
<MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
|
||||
{selected && <IconCheck size={theme.icon.size.sm} />}
|
||||
</StyledMenuItemSelect>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,55 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
|
||||
import { IconCheck } from '@/ui/display/icon';
|
||||
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
|
||||
|
||||
import {
|
||||
StyledMenuItemLabel,
|
||||
StyledMenuItemLeftContent,
|
||||
} from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
import { StyledMenuItemSelect } from './MenuItemSelect';
|
||||
|
||||
type MenuItemSelectAvatarProps = {
|
||||
avatar: ReactNode;
|
||||
selected: boolean;
|
||||
text: string;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
hovered?: boolean;
|
||||
testId?: string;
|
||||
};
|
||||
|
||||
export const MenuItemSelectAvatar = ({
|
||||
avatar,
|
||||
text,
|
||||
selected,
|
||||
className,
|
||||
onClick,
|
||||
disabled,
|
||||
hovered,
|
||||
testId,
|
||||
}: MenuItemSelectAvatarProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledMenuItemSelect
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
selected={selected}
|
||||
disabled={disabled}
|
||||
hovered={hovered}
|
||||
data-testid={testId}
|
||||
>
|
||||
<StyledMenuItemLeftContent>
|
||||
{avatar}
|
||||
<StyledMenuItemLabel hasLeftIcon={!!avatar}>
|
||||
<OverflowingTextWithTooltip text={text} />
|
||||
</StyledMenuItemLabel>
|
||||
</StyledMenuItemLeftContent>
|
||||
{selected && <IconCheck size={theme.icon.size.sm} />}
|
||||
</StyledMenuItemSelect>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,59 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconCheck } from '@/ui/display/icon';
|
||||
import { ThemeColor } from '@/ui/theme/constants/colors';
|
||||
|
||||
import {
|
||||
StyledMenuItemLabel,
|
||||
StyledMenuItemLeftContent,
|
||||
} from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
import { StyledMenuItemSelect } from './MenuItemSelect';
|
||||
|
||||
const StyledColorSample = styled.div<{ colorName: ThemeColor }>`
|
||||
background-color: ${({ theme, colorName }) =>
|
||||
theme.tag.background[colorName]};
|
||||
border: 1px solid ${({ theme, colorName }) => theme.color[colorName]};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
`;
|
||||
|
||||
type MenuItemSelectColorProps = {
|
||||
selected: boolean;
|
||||
text: string;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
hovered?: boolean;
|
||||
color: ThemeColor;
|
||||
};
|
||||
|
||||
export const MenuItemSelectColor = ({
|
||||
color,
|
||||
text,
|
||||
selected,
|
||||
className,
|
||||
onClick,
|
||||
disabled,
|
||||
hovered,
|
||||
}: MenuItemSelectColorProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledMenuItemSelect
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
selected={selected}
|
||||
disabled={disabled}
|
||||
hovered={hovered}
|
||||
>
|
||||
<StyledMenuItemLeftContent>
|
||||
<StyledColorSample colorName={color} />
|
||||
<StyledMenuItemLabel hasLeftIcon={true}>{text}</StyledMenuItemLabel>
|
||||
</StyledMenuItemLeftContent>
|
||||
{selected && <IconCheck size={theme.icon.size.sm} />}
|
||||
</StyledMenuItemSelect>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,32 @@
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { Toggle } from '@/ui/input/components/Toggle';
|
||||
|
||||
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
||||
import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
type MenuItemToggleProps = {
|
||||
LeftIcon?: IconComponent;
|
||||
toggled: boolean;
|
||||
text: string;
|
||||
className: string;
|
||||
onToggleChange?: (toggled: boolean) => void;
|
||||
};
|
||||
|
||||
export const MenuItemToggle = ({
|
||||
LeftIcon,
|
||||
text,
|
||||
toggled,
|
||||
className,
|
||||
onToggleChange,
|
||||
}: MenuItemToggleProps) => {
|
||||
const handleOnClick = () => {
|
||||
onToggleChange?.(!toggled);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledMenuItemBase className={className} onClick={handleOnClick}>
|
||||
<MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
|
||||
<Toggle value={toggled} onChange={onToggleChange} />
|
||||
</StyledMenuItemBase>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,112 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconBell } from '@/ui/display/icon';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { MenuItemAccent } from '../../types/MenuItemAccent';
|
||||
import { MenuItem } from '../MenuItem';
|
||||
|
||||
const meta: Meta<typeof MenuItem> = {
|
||||
title: 'UI/MenuItem/MenuItem',
|
||||
component: MenuItem,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItem>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'Menu item text',
|
||||
LeftIcon: IconBell,
|
||||
accent: 'default',
|
||||
iconButtons: [
|
||||
{ Icon: IconBell, onClick: () => console.log('Clicked') },
|
||||
{ Icon: IconBell, onClick: () => console.log('Clicked') },
|
||||
],
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItem> = {
|
||||
args: { ...Default.args },
|
||||
argTypes: {
|
||||
accent: { control: false },
|
||||
className: { control: false },
|
||||
iconButtons: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'withIcon',
|
||||
values: [true, false],
|
||||
props: (withIcon: boolean) => ({
|
||||
LeftIcon: withIcon ? IconBell : undefined,
|
||||
}),
|
||||
labels: (withIcon: boolean) =>
|
||||
withIcon ? 'With left icon' : 'Without left icon',
|
||||
},
|
||||
{
|
||||
name: 'accents',
|
||||
values: ['default', 'danger'] satisfies MenuItemAccent[],
|
||||
props: (accent: MenuItemAccent) => ({ accent }),
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover'],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: state };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'iconButtons',
|
||||
values: ['no icon button', 'two icon buttons'],
|
||||
props: (choice: string) => {
|
||||
switch (choice) {
|
||||
case 'no icon button': {
|
||||
return {
|
||||
iconButtons: [],
|
||||
};
|
||||
}
|
||||
case 'two icon buttons': {
|
||||
return {
|
||||
iconButtons: [
|
||||
{
|
||||
Icon: IconBell,
|
||||
onClick: () =>
|
||||
console.log('Clicked on first icon button'),
|
||||
},
|
||||
{
|
||||
Icon: IconBell,
|
||||
onClick: () =>
|
||||
console.log('Clicked on second icon button'),
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,98 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { Command } from 'cmdk';
|
||||
|
||||
import { IconBell } from '@/ui/display/icon';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { MenuItemCommand } from '../MenuItemCommand';
|
||||
|
||||
const meta: Meta<typeof MenuItemCommand> = {
|
||||
title: 'UI/MenuItem/MenuItemCommand',
|
||||
component: MenuItemCommand,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemCommand>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'First option',
|
||||
command: '⌘ 1',
|
||||
},
|
||||
render: (props) => (
|
||||
<Command>
|
||||
<MenuItemCommand
|
||||
LeftIcon={props.LeftIcon}
|
||||
text={props.text}
|
||||
command={props.text}
|
||||
className={props.className}
|
||||
onClick={props.onClick}
|
||||
></MenuItemCommand>
|
||||
</Command>
|
||||
),
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemCommand> = {
|
||||
args: { LeftIcon: IconBell, text: 'Menu item', command: '⌘1' },
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'withIcon',
|
||||
values: [true, false],
|
||||
props: (withIcon: boolean) => ({
|
||||
LeftIcon: withIcon ? IconBell : undefined,
|
||||
}),
|
||||
labels: (withIcon: boolean) =>
|
||||
withIcon ? 'With left icon' : 'Without left icon',
|
||||
},
|
||||
{
|
||||
name: 'selected',
|
||||
values: [true, false],
|
||||
props: () => ({}),
|
||||
labels: (selected: boolean) =>
|
||||
selected ? 'Selected' : 'Not selected',
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover'],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: state };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
render: (props) => (
|
||||
<Command>
|
||||
<MenuItemCommand
|
||||
LeftIcon={props.LeftIcon}
|
||||
text={props.text}
|
||||
command={props.text}
|
||||
className={props.className}
|
||||
onClick={props.onClick}
|
||||
></MenuItemCommand>
|
||||
</Command>
|
||||
),
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,106 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconBell, IconMinus } from '@/ui/display/icon';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
CatalogOptions,
|
||||
} from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { MenuItemAccent } from '../../types/MenuItemAccent';
|
||||
import { MenuItemDraggable } from '../MenuItemDraggable';
|
||||
|
||||
const meta: Meta<typeof MenuItemDraggable> = {
|
||||
title: 'ui/MenuItem/MenuItemDraggable',
|
||||
component: MenuItemDraggable,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemDraggable>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
LeftIcon: IconBell,
|
||||
accent: 'default',
|
||||
iconButtons: [{ Icon: IconMinus, onClick: () => console.log('Clicked') }],
|
||||
onClick: () => console.log('Clicked'),
|
||||
text: 'Menu item draggable',
|
||||
isDragDisabled: false,
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: Story = {
|
||||
args: { ...Default.args },
|
||||
argTypes: {
|
||||
accent: { control: false },
|
||||
iconButtons: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'isDragDisabled',
|
||||
values: [true, false],
|
||||
props: (isDragDisabled: boolean) => ({
|
||||
isDragDisabled: isDragDisabled,
|
||||
}),
|
||||
labels: (isDragDisabled: boolean) =>
|
||||
isDragDisabled ? 'Without drag icon' : 'With drag icon',
|
||||
},
|
||||
{
|
||||
name: 'accents',
|
||||
values: ['default', 'danger', 'placeholder'] as MenuItemAccent[],
|
||||
props: (accent: MenuItemAccent) => ({ accent }),
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover'],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: state };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'iconButtons',
|
||||
values: ['no icon button', 'minus icon buttons'],
|
||||
props: (choice: string) => {
|
||||
switch (choice) {
|
||||
case 'no icon button': {
|
||||
return {
|
||||
iconButtons: [],
|
||||
};
|
||||
}
|
||||
case 'minus icon buttons': {
|
||||
return {
|
||||
iconButtons: [
|
||||
{
|
||||
Icon: IconMinus,
|
||||
onClick: () =>
|
||||
console.log('Clicked on minus icon button'),
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
] as CatalogDimension[],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
} as CatalogOptions,
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,78 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconBell } from '@/ui/display/icon';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
CatalogOptions,
|
||||
} from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { MenuItemMultiSelect } from '../MenuItemMultiSelect';
|
||||
|
||||
const meta: Meta<typeof MenuItemMultiSelect> = {
|
||||
title: 'UI/MenuItem/MenuItemMultiSelect',
|
||||
component: MenuItemMultiSelect,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemMultiSelect>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'First option',
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemMultiSelect> = {
|
||||
args: { LeftIcon: IconBell, text: 'Menu item' },
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'withIcon',
|
||||
values: [true, false],
|
||||
props: (withIcon: boolean) => ({
|
||||
LeftIcon: withIcon ? IconBell : undefined,
|
||||
}),
|
||||
labels: (withIcon: boolean) =>
|
||||
withIcon ? 'With left icon' : 'Without left icon',
|
||||
},
|
||||
{
|
||||
name: 'selected',
|
||||
values: [true, false],
|
||||
props: (selected: boolean) => ({ selected }),
|
||||
labels: (selected: boolean) =>
|
||||
selected ? 'Selected' : 'Not selected',
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover'],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: state };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
] as CatalogDimension[],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
} as CatalogOptions,
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,84 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Avatar } from '@/users/components/Avatar';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
CatalogOptions,
|
||||
} from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { avatarUrl } from '~/testing/mock-data/users';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { MenuItemMultiSelectAvatar } from '../MenuItemMultiSelectAvatar';
|
||||
|
||||
const meta: Meta<typeof MenuItemMultiSelectAvatar> = {
|
||||
title: 'UI/MenuItem/MenuItemMultiSelectAvatar',
|
||||
component: MenuItemMultiSelectAvatar,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemMultiSelectAvatar>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'First option',
|
||||
avatar: <Avatar avatarUrl={avatarUrl} placeholder="L" />,
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemMultiSelectAvatar> = {
|
||||
args: { text: 'Menu item' },
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'withAvatar',
|
||||
values: [true, false],
|
||||
props: (withAvatar: boolean) => ({
|
||||
avatar: withAvatar ? (
|
||||
<Avatar avatarUrl={avatarUrl} placeholder="L" />
|
||||
) : (
|
||||
<Avatar avatarUrl={''} placeholder="L" />
|
||||
),
|
||||
}),
|
||||
labels: (withAvatar: boolean) =>
|
||||
withAvatar ? 'With avatar' : 'Without avatar',
|
||||
},
|
||||
{
|
||||
name: 'selected',
|
||||
values: [true, false],
|
||||
props: (selected: boolean) => ({ selected }),
|
||||
labels: (selected: boolean) =>
|
||||
selected ? 'Selected' : 'Not selected',
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover'],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: state };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
] as CatalogDimension[],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
} as CatalogOptions,
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,71 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconBell } from '@/ui/display/icon';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
CatalogOptions,
|
||||
} from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { MenuItemNavigate } from '../MenuItemNavigate';
|
||||
|
||||
const meta: Meta<typeof MenuItemNavigate> = {
|
||||
title: 'UI/MenuItem/MenuItemNavigate',
|
||||
component: MenuItemNavigate,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemNavigate>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'First option',
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemNavigate> = {
|
||||
args: { LeftIcon: IconBell, text: 'Menu item' },
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'withIcon',
|
||||
values: [true, false],
|
||||
props: (withIcon: boolean) => ({
|
||||
LeftIcon: withIcon ? IconBell : undefined,
|
||||
}),
|
||||
labels: (withIcon: boolean) =>
|
||||
withIcon ? 'With left icon' : 'Without left icon',
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover'],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: state };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
] as CatalogDimension[],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
} as CatalogOptions,
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,79 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconBell } from '@/ui/display/icon';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
CatalogOptions,
|
||||
} from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { MenuItemSelect } from '../MenuItemSelect';
|
||||
|
||||
const meta: Meta<typeof MenuItemSelect> = {
|
||||
title: 'UI/MenuItem/MenuItemSelect',
|
||||
component: MenuItemSelect,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemSelect>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'First option',
|
||||
LeftIcon: IconBell,
|
||||
},
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemSelect> = {
|
||||
args: { LeftIcon: IconBell, text: 'Menu item' },
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'withIcon',
|
||||
values: [true, false],
|
||||
props: (withIcon: boolean) => ({
|
||||
LeftIcon: withIcon ? IconBell : undefined,
|
||||
}),
|
||||
labels: (withIcon: boolean) =>
|
||||
withIcon ? 'With left icon' : 'Without left icon',
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover', 'selected', 'hover+selected'],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: 'hover' };
|
||||
case 'selected':
|
||||
return { selected: true };
|
||||
case 'hover+selected':
|
||||
return { className: 'hover', selected: true };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
] as CatalogDimension[],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
} as CatalogOptions,
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,93 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Avatar } from '@/users/components/Avatar';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
CatalogOptions,
|
||||
} from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { avatarUrl } from '~/testing/mock-data/users';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { MenuItemSelectAvatar } from '../MenuItemSelectAvatar';
|
||||
|
||||
const meta: Meta<typeof MenuItemSelectAvatar> = {
|
||||
title: 'UI/MenuItem/MenuItemSelectAvatar',
|
||||
component: MenuItemSelectAvatar,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemSelectAvatar>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'First option',
|
||||
avatar: <Avatar avatarUrl={avatarUrl} placeholder="L" />,
|
||||
},
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemSelectAvatar> = {
|
||||
args: { text: 'Menu item' },
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'withAvatar',
|
||||
values: [true, false],
|
||||
props: (withAvatar: boolean) => ({
|
||||
avatar: withAvatar ? (
|
||||
<Avatar avatarUrl={avatarUrl} placeholder="L" />
|
||||
) : (
|
||||
<Avatar avatarUrl={''} placeholder="L" />
|
||||
),
|
||||
}),
|
||||
labels: (withAvatar: boolean) =>
|
||||
withAvatar ? 'With avatar' : 'Without avatar',
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: [
|
||||
'default',
|
||||
'hover',
|
||||
'disabled',
|
||||
'selected',
|
||||
'hover+selected',
|
||||
],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: 'hover' };
|
||||
case 'disabled':
|
||||
return { disabled: true };
|
||||
case 'selected':
|
||||
return { selected: true };
|
||||
|
||||
case 'hover+selected':
|
||||
return { className: 'hover', selected: true };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
] as CatalogDimension[],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
} as CatalogOptions,
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,87 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { tagLight } from '@/ui/theme/constants/tag';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
CatalogOptions,
|
||||
} from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { MenuItemSelectColor } from '../MenuItemSelectColor';
|
||||
|
||||
const meta: Meta<typeof MenuItemSelectColor> = {
|
||||
title: 'UI/MenuItem/MenuItemSelectColor',
|
||||
component: MenuItemSelectColor,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemSelectColor>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'First option',
|
||||
color: 'green',
|
||||
},
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemSelectColor> = {
|
||||
args: { text: 'Menu item' },
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'color',
|
||||
values: Object.keys(tagLight.background),
|
||||
props: (color: string) => ({
|
||||
color: color,
|
||||
}),
|
||||
labels: (color: string) => color,
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: [
|
||||
'default',
|
||||
'hover',
|
||||
'disabled',
|
||||
'selected',
|
||||
'hover+selected',
|
||||
],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: 'hover' };
|
||||
case 'disabled':
|
||||
return { disabled: true };
|
||||
case 'selected':
|
||||
return { selected: true };
|
||||
|
||||
case 'hover+selected':
|
||||
return { className: 'hover', selected: true };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
] as CatalogDimension[],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
} as CatalogOptions,
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,77 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconBell } from '@/ui/display/icon';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
CatalogOptions,
|
||||
} from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { MenuItemToggle } from '../MenuItemToggle';
|
||||
|
||||
const meta: Meta<typeof MenuItemToggle> = {
|
||||
title: 'UI/MenuItem/MenuItemToggle',
|
||||
component: MenuItemToggle,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemToggle>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'First option',
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemToggle> = {
|
||||
args: { LeftIcon: IconBell, text: 'Menu item' },
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'withIcon',
|
||||
values: [true, false],
|
||||
props: (withIcon: boolean) => ({
|
||||
LeftIcon: withIcon ? IconBell : undefined,
|
||||
}),
|
||||
labels: (withIcon: boolean) =>
|
||||
withIcon ? 'With left icon' : 'Without left icon',
|
||||
},
|
||||
{
|
||||
name: 'toggled',
|
||||
values: [true, false],
|
||||
props: (toggled: boolean) => ({ toggled }),
|
||||
labels: (toggled: boolean) => (toggled ? 'Toggled' : 'Not toggled'),
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['default', 'hover'],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
return { className: state };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
] satisfies CatalogDimension[],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
} satisfies CatalogOptions,
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
@ -0,0 +1,42 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
|
||||
import { IconGripVertical } from '@/ui/display/icon';
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
|
||||
|
||||
import {
|
||||
StyledMenuItemLabel,
|
||||
StyledMenuItemLeftContent,
|
||||
} from './StyledMenuItemBase';
|
||||
|
||||
type MenuItemLeftContentProps = {
|
||||
LeftIcon: IconComponent | null | undefined;
|
||||
showGrip?: boolean;
|
||||
text: string;
|
||||
};
|
||||
|
||||
export const MenuItemLeftContent = ({
|
||||
LeftIcon,
|
||||
text,
|
||||
showGrip = false,
|
||||
}: MenuItemLeftContentProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledMenuItemLeftContent>
|
||||
{showGrip && (
|
||||
<IconGripVertical
|
||||
size={theme.icon.size.md}
|
||||
stroke={theme.icon.stroke.sm}
|
||||
color={theme.font.color.extraLight}
|
||||
/>
|
||||
)}
|
||||
{LeftIcon && (
|
||||
<LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
|
||||
)}
|
||||
<StyledMenuItemLabel hasLeftIcon={!!LeftIcon}>
|
||||
<OverflowingTextWithTooltip text={text} />
|
||||
</StyledMenuItemLabel>
|
||||
</StyledMenuItemLeftContent>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,113 @@
|
||||
import { css } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { hoverBackground } from '@/ui/theme/constants/effects';
|
||||
|
||||
import { MenuItemAccent } from '../../types/MenuItemAccent';
|
||||
|
||||
export type MenuItemBaseProps = {
|
||||
accent?: MenuItemAccent;
|
||||
};
|
||||
|
||||
export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
|
||||
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
|
||||
--vertical-padding: ${({ theme }) => theme.spacing(2)};
|
||||
|
||||
align-items: center;
|
||||
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
|
||||
height: calc(32px - 2 * var(--vertical-padding));
|
||||
|
||||
justify-content: space-between;
|
||||
padding: var(--vertical-padding) var(--horizontal-padding);
|
||||
|
||||
${hoverBackground};
|
||||
|
||||
${({ theme, accent }) => {
|
||||
switch (accent) {
|
||||
case 'danger': {
|
||||
return css`
|
||||
color: ${theme.font.color.danger};
|
||||
&:hover {
|
||||
background: ${theme.background.transparent.danger};
|
||||
}
|
||||
`;
|
||||
}
|
||||
case 'placeholder': {
|
||||
return css`
|
||||
color: ${theme.font.color.tertiary};
|
||||
`;
|
||||
}
|
||||
case 'default':
|
||||
default: {
|
||||
return css`
|
||||
color: ${theme.font.color.secondary};
|
||||
`;
|
||||
}
|
||||
}
|
||||
}}
|
||||
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
width: calc(100% - 2 * var(--horizontal-padding));
|
||||
`;
|
||||
|
||||
export const StyledMenuItemLabel = styled.div<{ hasLeftIcon: boolean }>`
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
overflow: hidden;
|
||||
padding-left: ${({ theme, hasLeftIcon }) =>
|
||||
hasLeftIcon ? '' : theme.spacing(1)};
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
export const StyledNoIconFiller = styled.div`
|
||||
width: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
export const StyledMenuItemLeftContent = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const StyledMenuItemRightContent = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`;
|
||||
|
||||
export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
|
||||
isMenuOpen: boolean;
|
||||
}>`
|
||||
& .hoverable-buttons {
|
||||
opacity: ${({ isMenuOpen }) => (isMenuOpen ? 1 : 0)};
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
right: ${({ theme }) => theme.spacing(2)};
|
||||
transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& .hoverable-buttons {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1 @@
|
||||
export type MenuItemAccent = 'default' | 'danger' | 'placeholder';
|
||||
@ -0,0 +1,43 @@
|
||||
import { useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import NavItemsContainer from './NavItemsContainer';
|
||||
import NavWorkspaceButton from './NavWorkspaceButton';
|
||||
import SupportChat from './SupportChat';
|
||||
|
||||
type MainNavbarProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
margin-bottom: ${({ theme }) => theme.spacing(2.5)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const MainNavbar = ({ children }: MainNavbarProps) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const handleHover = () => {
|
||||
setIsHovered(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<div onMouseEnter={handleHover} onMouseLeave={handleMouseLeave}>
|
||||
<NavWorkspaceButton showCollapseButton={isHovered} />
|
||||
<NavItemsContainer>{children}</NavItemsContainer>
|
||||
</div>
|
||||
<SupportChat />
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainNavbar;
|
||||
@ -0,0 +1,56 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { IconChevronLeft } from '@/ui/display/icon/index';
|
||||
import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
|
||||
|
||||
type NavBackButtonProps = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
const StyledIconAndButtonContainer = styled.button`
|
||||
align-items: center;
|
||||
background: inherit;
|
||||
border: none;
|
||||
color: ${({ theme }) => theme.font.color.secondary};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: ${({ theme }) => theme.font.size.lg};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const NavBackButton = ({ title }: NavBackButtonProps) => {
|
||||
const navigate = useNavigate();
|
||||
const [, setIsNavbarSwitchingSize] = useRecoilState(
|
||||
isNavbarSwitchingSizeState,
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledContainer>
|
||||
<StyledIconAndButtonContainer
|
||||
onClick={() => {
|
||||
setIsNavbarSwitchingSize(true);
|
||||
navigate('/', { replace: true });
|
||||
}}
|
||||
>
|
||||
<IconChevronLeft />
|
||||
<span>{title}</span>
|
||||
</StyledIconAndButtonContainer>
|
||||
</StyledContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavBackButton;
|
||||
@ -0,0 +1,75 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import {
|
||||
IconLayoutSidebarLeftCollapse,
|
||||
IconLayoutSidebarRightCollapse,
|
||||
} from '@/ui/display/icon';
|
||||
import { IconButton } from '@/ui/input/button/components/IconButton';
|
||||
import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
|
||||
|
||||
const StyledCollapseButton = styled(motion.div)`
|
||||
align-items: center;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.quaternary};
|
||||
}
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
|
||||
padding: 0;
|
||||
|
||||
user-select: none;
|
||||
width: 24px;
|
||||
`;
|
||||
|
||||
type NavCollapseButtonProps = {
|
||||
direction?: 'left' | 'right';
|
||||
show?: boolean;
|
||||
};
|
||||
|
||||
const NavCollapseButton = ({
|
||||
direction = 'left',
|
||||
show = true,
|
||||
}: NavCollapseButtonProps) => {
|
||||
const [isNavbarOpened, setIsNavbarOpened] =
|
||||
useRecoilState(isNavbarOpenedState);
|
||||
|
||||
const iconSize = 'small';
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledCollapseButton
|
||||
animate={{
|
||||
opacity: show ? 1 : 0,
|
||||
}}
|
||||
transition={{
|
||||
duration: theme.animation.duration.normal,
|
||||
}}
|
||||
onClick={() => setIsNavbarOpened(!isNavbarOpened)}
|
||||
>
|
||||
<IconButton
|
||||
Icon={
|
||||
direction === 'left'
|
||||
? IconLayoutSidebarLeftCollapse
|
||||
: IconLayoutSidebarRightCollapse
|
||||
}
|
||||
variant="tertiary"
|
||||
size={iconSize}
|
||||
/>
|
||||
</StyledCollapseButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavCollapseButton;
|
||||
166
front/src/modules/ui/navigation/navbar/components/NavItem.tsx
Normal file
166
front/src/modules/ui/navigation/navbar/components/NavItem.tsx
Normal file
@ -0,0 +1,166 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { isNavbarOpenedState } from '../../../layout/states/isNavbarOpenedState';
|
||||
|
||||
type NavItemProps = {
|
||||
label: string;
|
||||
to?: string;
|
||||
onClick?: () => void;
|
||||
Icon: IconComponent;
|
||||
active?: boolean;
|
||||
danger?: boolean;
|
||||
soon?: boolean;
|
||||
count?: number;
|
||||
keyboard?: string[];
|
||||
};
|
||||
|
||||
type StyledItemProps = {
|
||||
active?: boolean;
|
||||
danger?: boolean;
|
||||
soon?: boolean;
|
||||
};
|
||||
|
||||
const StyledItem = styled.button<StyledItemProps>`
|
||||
align-items: center;
|
||||
background: ${(props) =>
|
||||
props.active ? props.theme.background.transparent.light : 'inherit'};
|
||||
border: none;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
color: ${(props) => {
|
||||
if (props.active) {
|
||||
return props.theme.font.color.primary;
|
||||
}
|
||||
if (props.danger) {
|
||||
return props.theme.color.red;
|
||||
}
|
||||
if (props.soon) {
|
||||
return props.theme.font.color.light;
|
||||
}
|
||||
return props.theme.font.color.secondary;
|
||||
}};
|
||||
cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
|
||||
display: flex;
|
||||
font-family: 'Inter';
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
margin-bottom: calc(${({ theme }) => theme.spacing(1)} / 2);
|
||||
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
padding-top: ${({ theme }) => theme.spacing(1)};
|
||||
pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
|
||||
:hover {
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
color: ${(props) =>
|
||||
props.danger ? props.theme.color.red : props.theme.font.color.primary};
|
||||
}
|
||||
:hover .keyboard-shortcuts {
|
||||
visibility: visible;
|
||||
}
|
||||
user-select: none;
|
||||
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
font-size: ${({ theme }) => theme.font.size.lg};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledItemLabel = styled.div`
|
||||
display: flex;
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const StyledSoonPill = styled.div`
|
||||
align-items: center;
|
||||
background-color: ${({ theme }) => theme.background.transparent.light};
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
height: 16px;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
padding-right: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const StyledItemCount = styled.div`
|
||||
align-items: center;
|
||||
background-color: ${({ theme }) => theme.color.blue};
|
||||
border-radius: ${({ theme }) => theme.border.radius.rounded};
|
||||
color: ${({ theme }) => theme.grayScale.gray0};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
|
||||
height: 16px;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
width: 16px;
|
||||
`;
|
||||
|
||||
const StyledKeyBoardShortcut = styled.div`
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
letter-spacing: 1px;
|
||||
margin-left: auto;
|
||||
visibility: hidden;
|
||||
`;
|
||||
|
||||
const NavItem = ({
|
||||
label,
|
||||
Icon,
|
||||
to,
|
||||
onClick,
|
||||
active,
|
||||
danger,
|
||||
soon,
|
||||
count,
|
||||
keyboard,
|
||||
}: NavItemProps) => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const [, setIsNavbarOpened] = useRecoilState(isNavbarOpenedState);
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const handleItemClick = () => {
|
||||
if (isMobile) {
|
||||
setIsNavbarOpened(false);
|
||||
}
|
||||
|
||||
if (onClick) {
|
||||
onClick();
|
||||
} else if (to) {
|
||||
navigate(to);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledItem
|
||||
onClick={handleItemClick}
|
||||
active={active}
|
||||
aria-selected={active}
|
||||
danger={danger}
|
||||
soon={soon}
|
||||
>
|
||||
{Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
|
||||
<StyledItemLabel>{label}</StyledItemLabel>
|
||||
{soon && <StyledSoonPill>Soon</StyledSoonPill>}
|
||||
{!!count && <StyledItemCount>{count}</StyledItemCount>}
|
||||
{keyboard && (
|
||||
<StyledKeyBoardShortcut className="keyboard-shortcuts">
|
||||
{keyboard.map((key) => key)}
|
||||
</StyledKeyBoardShortcut>
|
||||
)}
|
||||
</StyledItem>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavItem;
|
||||
@ -0,0 +1,17 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type NavItemsContainerProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const StyledNavItemsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 40px;
|
||||
`;
|
||||
|
||||
const NavItemsContainer = ({ children }: NavItemsContainerProps) => (
|
||||
<StyledNavItemsContainer>{children}</StyledNavItemsContainer>
|
||||
);
|
||||
|
||||
export default NavItemsContainer;
|
||||
@ -0,0 +1,22 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type NavTitleProps = {
|
||||
label: string;
|
||||
};
|
||||
|
||||
const StyledTitle = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
padding-top: ${({ theme }) => theme.spacing(8)};
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
const NavTitle = ({ label }: NavTitleProps) => (
|
||||
<StyledTitle>{label}</StyledTitle>
|
||||
);
|
||||
|
||||
export default NavTitle;
|
||||
@ -0,0 +1,78 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { currentUserState } from '@/auth/states/currentUserState';
|
||||
import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
|
||||
|
||||
import NavCollapseButton from './NavCollapseButton';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
display: flex;
|
||||
height: 34px;
|
||||
justify-content: space-between;
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const StyledLogoAndNameContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
type StyledLogoProps = {
|
||||
logo?: string | null;
|
||||
};
|
||||
|
||||
const StyledLogo = styled.div<StyledLogoProps>`
|
||||
background: url(${(props) => props.logo});
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: ${({ theme }) => theme.border.radius.xs};
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
`;
|
||||
|
||||
const StyledName = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-family: 'Inter';
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
type NavWorkspaceButtonProps = {
|
||||
showCollapseButton: boolean;
|
||||
};
|
||||
|
||||
const NavWorkspaceButton = ({
|
||||
showCollapseButton,
|
||||
}: NavWorkspaceButtonProps) => {
|
||||
const currentUser = useRecoilValue(currentUserState);
|
||||
|
||||
const currentWorkspace = currentUser?.workspaceMember?.workspace;
|
||||
const DEFAULT_LOGO =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=';
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<StyledLogoAndNameContainer>
|
||||
<StyledLogo
|
||||
logo={
|
||||
currentWorkspace?.logo
|
||||
? getImageAbsoluteURIOrBase64(currentWorkspace.logo)
|
||||
: DEFAULT_LOGO
|
||||
}
|
||||
></StyledLogo>
|
||||
<StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
|
||||
</StyledLogoAndNameContainer>
|
||||
<NavCollapseButton direction="left" show={showCollapseButton} />
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavWorkspaceButton;
|
||||
@ -0,0 +1,62 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
|
||||
import { useIsSubMenuNavbarDisplayed } from '@/ui/layout/hooks/useIsSubMenuNavbarDisplayed';
|
||||
import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
|
||||
import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { leftNavbarWidth, leftSubMenuNavbarWidth } from '../constants';
|
||||
|
||||
const StyledNavbarContainer = styled(motion.div)`
|
||||
align-items: end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
type NavbarAnimatedContainerProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export const NavbarAnimatedContainer = ({
|
||||
children,
|
||||
}: NavbarAnimatedContainerProps) => {
|
||||
const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
|
||||
const [, setIsNavbarSwitchingSize] = useRecoilState(
|
||||
isNavbarSwitchingSizeState,
|
||||
);
|
||||
const isInSubMenu = useIsSubMenuNavbarDisplayed();
|
||||
const theme = useTheme();
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const leftBarWidth = isInSubMenu
|
||||
? isMobile
|
||||
? leftSubMenuNavbarWidth.mobile
|
||||
: leftSubMenuNavbarWidth.desktop
|
||||
: isMobile
|
||||
? leftNavbarWidth.mobile
|
||||
: leftNavbarWidth.desktop;
|
||||
|
||||
return (
|
||||
<StyledNavbarContainer
|
||||
onAnimationComplete={() => {
|
||||
setIsNavbarSwitchingSize(false);
|
||||
}}
|
||||
animate={{
|
||||
width: isNavbarOpened ? leftBarWidth : '0',
|
||||
opacity: isNavbarOpened ? 1 : 0,
|
||||
}}
|
||||
transition={{
|
||||
duration: theme.animation.duration.normal,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</StyledNavbarContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,80 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconBrandGithub } from '@/ui/display/icon';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import packageJson from '../../../../../../package.json';
|
||||
import { githubLink, leftNavbarWidth } from '../constants';
|
||||
|
||||
import NavBackButton from './NavBackButton';
|
||||
import NavItemsContainer from './NavItemsContainer';
|
||||
|
||||
type SubMenuNavbarProps = {
|
||||
children: React.ReactNode;
|
||||
backButtonTitle: string;
|
||||
displayVersion?: boolean;
|
||||
};
|
||||
|
||||
const StyledVersionContainer = styled.div`
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledVersion = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
:hover {
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
}
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledVersionLink = styled.a`
|
||||
align-items: center;
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
:hover {
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
padding-top: ${({ theme }) => theme.spacing(9)};
|
||||
width: ${() => (useIsMobile() ? '100%' : leftNavbarWidth.desktop)};
|
||||
`;
|
||||
|
||||
const SubMenuNavbar = ({
|
||||
children,
|
||||
backButtonTitle,
|
||||
displayVersion,
|
||||
}: SubMenuNavbarProps) => {
|
||||
const version = packageJson.version;
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<div>
|
||||
<NavBackButton title={backButtonTitle} />
|
||||
<NavItemsContainer>{children}</NavItemsContainer>
|
||||
</div>
|
||||
{displayVersion && (
|
||||
<StyledVersionContainer>
|
||||
<StyledVersionLink href={githubLink} target="_blank" rel="noreferrer">
|
||||
<IconBrandGithub size={theme.icon.size.md} />
|
||||
<StyledVersion>{version}</StyledVersion>
|
||||
</StyledVersionLink>
|
||||
</StyledVersionContainer>
|
||||
)}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubMenuNavbar;
|
||||
@ -0,0 +1,93 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { currentUserState } from '@/auth/states/currentUserState';
|
||||
import { supportChatState } from '@/client-config/states/supportChatState';
|
||||
import { IconHelpCircle } from '@/ui/display/icon';
|
||||
import { Button } from '@/ui/input/button/components/Button';
|
||||
import { User } from '~/generated/graphql';
|
||||
|
||||
const StyledButtonContainer = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const insertScript = ({
|
||||
src,
|
||||
innerHTML,
|
||||
onLoad,
|
||||
}: {
|
||||
src?: string;
|
||||
innerHTML?: string;
|
||||
onLoad?: (...args: any[]) => void;
|
||||
}) => {
|
||||
const script = document.createElement('script');
|
||||
if (src) script.src = src;
|
||||
if (innerHTML) script.innerHTML = innerHTML;
|
||||
if (onLoad) script.onload = onLoad;
|
||||
document.body.appendChild(script);
|
||||
};
|
||||
|
||||
const SupportChat = () => {
|
||||
const currentUser = useRecoilValue(currentUserState);
|
||||
const supportChat = useRecoilValue(supportChatState);
|
||||
const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false);
|
||||
|
||||
const configureFront = useCallback(
|
||||
(
|
||||
chatId: string,
|
||||
currentUser: Pick<User, 'email' | 'displayName' | 'supportUserHash'>,
|
||||
) => {
|
||||
const url = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
|
||||
const script = document.querySelector(`script[src="${url}"]`);
|
||||
|
||||
if (!script) {
|
||||
insertScript({
|
||||
src: url,
|
||||
onLoad: () => {
|
||||
window.FrontChat?.('init', {
|
||||
chatId,
|
||||
useDefaultLauncher: false,
|
||||
email: currentUser.email,
|
||||
name: currentUser.displayName,
|
||||
userHash: currentUser?.supportUserHash,
|
||||
});
|
||||
setIsFrontChatLoaded(true);
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
supportChat?.supportDriver === 'front' &&
|
||||
supportChat.supportFrontChatId &&
|
||||
currentUser?.email &&
|
||||
!isFrontChatLoaded
|
||||
) {
|
||||
configureFront(supportChat.supportFrontChatId, currentUser);
|
||||
}
|
||||
}, [
|
||||
configureFront,
|
||||
currentUser,
|
||||
isFrontChatLoaded,
|
||||
supportChat?.supportDriver,
|
||||
supportChat.supportFrontChatId,
|
||||
]);
|
||||
|
||||
return isFrontChatLoaded ? (
|
||||
<StyledButtonContainer>
|
||||
<Button
|
||||
variant={'tertiary'}
|
||||
size={'small'}
|
||||
title="Support"
|
||||
Icon={IconHelpCircle}
|
||||
onClick={() => window.FrontChat?.('show')}
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default SupportChat;
|
||||
@ -0,0 +1,45 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Favorites } from '@/favorites/components/Favorites';
|
||||
import {
|
||||
IconBell,
|
||||
IconBuildingSkyscraper,
|
||||
IconCheckbox,
|
||||
IconSearch,
|
||||
IconSettings,
|
||||
IconTargetArrow,
|
||||
IconUser,
|
||||
} from '@/ui/display/icon';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import MainNavbar from '../MainNavbar';
|
||||
import NavItem from '../NavItem';
|
||||
import NavTitle from '../NavTitle';
|
||||
|
||||
const meta: Meta<typeof MainNavbar> = {
|
||||
title: 'UI/Navbar/MainNavbar',
|
||||
component: MainNavbar,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof MainNavbar>;
|
||||
|
||||
const navItems = (
|
||||
<>
|
||||
<NavItem label="Search" Icon={IconSearch} />
|
||||
<NavItem label="Notifications" to="/inbox" Icon={IconBell} soon={true} />
|
||||
<NavItem label="Settings" to="/settings/profile" Icon={IconSettings} />
|
||||
<NavItem label="Tasks" to="/tasks" Icon={IconCheckbox} count={2} />
|
||||
<Favorites />
|
||||
<NavTitle label="Workspace" />
|
||||
<NavItem label="Companies" to="/companies" Icon={IconBuildingSkyscraper} />
|
||||
<NavItem label="People" to="/people" Icon={IconUser} />
|
||||
<NavItem label="Opportunities" Icon={IconTargetArrow} />
|
||||
</>
|
||||
);
|
||||
|
||||
export const Default: Story = {
|
||||
args: { children: navItems },
|
||||
argTypes: { children: { control: false } },
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import NavCollapseButton from '../NavCollapseButton';
|
||||
|
||||
const meta: Meta<typeof NavCollapseButton> = {
|
||||
title: 'UI/Navbar/NavCollapseButton',
|
||||
component: NavCollapseButton,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavCollapseButton>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Hidden: Story = {
|
||||
args: { show: false },
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
@ -0,0 +1,95 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconSearch, IconSettings } from '@/ui/display/icon';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import NavItem from '../NavItem';
|
||||
|
||||
const meta: Meta<typeof NavItem> = {
|
||||
title: 'UI/Navbar/NavItem',
|
||||
component: NavItem,
|
||||
};
|
||||
|
||||
const StyledNavItemContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
const ComponentDecorator: Decorator = (Story) => (
|
||||
<StyledNavItemContainer>
|
||||
<Story />
|
||||
</StyledNavItemContainer>
|
||||
);
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavItem>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Search',
|
||||
Icon: IconSearch,
|
||||
onClick: () => console.log('clicked'),
|
||||
active: true,
|
||||
},
|
||||
argTypes: { Icon: { control: false }, onClick: { control: false } },
|
||||
decorators: [ComponentDecorator, ComponentWithRouterDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof NavItem> = {
|
||||
args: Default.args,
|
||||
decorators: [
|
||||
ComponentDecorator,
|
||||
CatalogDecorator,
|
||||
ComponentWithRouterDecorator,
|
||||
],
|
||||
parameters: {
|
||||
pseudo: { hover: ['button:has(svg.tabler-icon-settings)'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'active',
|
||||
values: [true, false],
|
||||
props: (active: boolean) => ({ active }),
|
||||
labels: (active: boolean) => (active ? 'Active' : 'Inactive'),
|
||||
},
|
||||
{
|
||||
name: 'danger',
|
||||
values: [true, false],
|
||||
props: (danger: boolean) => ({ danger }),
|
||||
labels: (danger: boolean) => (danger ? 'Danger' : 'No Danger'),
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['Default', 'Hover'],
|
||||
props: (state: string) =>
|
||||
state === 'Default'
|
||||
? {}
|
||||
: { label: 'Settings', Icon: IconSettings },
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Soon: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
active: false,
|
||||
soon: true,
|
||||
},
|
||||
argTypes: { Icon: { control: false }, onClick: { control: false } },
|
||||
decorators: [ComponentDecorator, ComponentWithRouterDecorator],
|
||||
};
|
||||
|
||||
export const Count: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
count: 3,
|
||||
},
|
||||
argTypes: { Icon: { control: false }, onClick: { control: false } },
|
||||
decorators: [ComponentDecorator, ComponentWithRouterDecorator],
|
||||
};
|
||||
@ -0,0 +1,55 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import {
|
||||
IconColorSwatch,
|
||||
IconLogout,
|
||||
IconSettings,
|
||||
IconUserCircle,
|
||||
IconUsers,
|
||||
} from '@/ui/display/icon';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import NavItem from '../NavItem';
|
||||
import NavTitle from '../NavTitle';
|
||||
import SubMenuNavbar from '../SubMenuNavbar';
|
||||
|
||||
const meta: Meta<typeof SubMenuNavbar> = {
|
||||
title: 'UI/Navbar/SubMenuNavbar',
|
||||
component: SubMenuNavbar,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SubMenuNavbar>;
|
||||
|
||||
const navItems = (
|
||||
<>
|
||||
<NavTitle label="User" />
|
||||
<NavItem
|
||||
label="Profile"
|
||||
to="/settings/profile"
|
||||
Icon={IconUserCircle}
|
||||
active
|
||||
/>
|
||||
<NavItem
|
||||
label="Experience"
|
||||
to="/settings/profile/experience"
|
||||
Icon={IconColorSwatch}
|
||||
/>
|
||||
<NavTitle label="Workspace" />
|
||||
<NavItem label="General" to="/settings/workspace" Icon={IconSettings} />
|
||||
<NavItem
|
||||
label="Members"
|
||||
to="/settings/workspace-members"
|
||||
Icon={IconUsers}
|
||||
/>
|
||||
<NavTitle label="Other" />
|
||||
|
||||
<NavItem label="Logout" Icon={IconLogout} />
|
||||
</>
|
||||
);
|
||||
|
||||
export const Default: Story = {
|
||||
args: { children: navItems, backButtonTitle: 'Back' },
|
||||
argTypes: { children: { control: false } },
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
};
|
||||
11
front/src/modules/ui/navigation/navbar/constants/index.ts
Normal file
11
front/src/modules/ui/navigation/navbar/constants/index.ts
Normal file
@ -0,0 +1,11 @@
|
||||
export const leftNavbarWidth = {
|
||||
mobile: 'calc(100% - 16px)',
|
||||
desktop: '220px',
|
||||
};
|
||||
|
||||
export const leftSubMenuNavbarWidth = {
|
||||
mobile: 'calc(100% - 16px)',
|
||||
desktop: '520px',
|
||||
};
|
||||
|
||||
export const githubLink = 'https://github.com/twentyhq/twenty';
|
||||
124
front/src/modules/ui/navigation/step-bar/components/Step.tsx
Normal file
124
front/src/modules/ui/navigation/step-bar/components/Step.tsx
Normal file
@ -0,0 +1,124 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import { AnimatedCheckmark } from '@/ui/display/checkmark/components/AnimatedCheckmark';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
const StyledContainer = styled.div<{ isLast: boolean }>`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: ${({ isLast }) => (isLast ? '0' : '1')};
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
flex-grow: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledStepCircle = styled(motion.div)`
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
`;
|
||||
|
||||
const StyledStepIndex = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
`;
|
||||
|
||||
const StyledStepLabel = styled.span<{ isActive: boolean }>`
|
||||
color: ${({ theme, isActive }) =>
|
||||
isActive ? theme.font.color.primary : theme.font.color.tertiary};
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledStepLine = styled(motion.div)`
|
||||
height: 2px;
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
margin-right: ${({ theme }) => theme.spacing(2)};
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export type StepProps = React.PropsWithChildren &
|
||||
React.ComponentProps<'div'> & {
|
||||
isActive?: boolean;
|
||||
isLast?: boolean;
|
||||
index?: number;
|
||||
label: string;
|
||||
};
|
||||
|
||||
export const Step = ({
|
||||
isActive = false,
|
||||
isLast = false,
|
||||
index = 0,
|
||||
label,
|
||||
children,
|
||||
}: StepProps) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const variantsCircle = {
|
||||
active: {
|
||||
backgroundColor: theme.font.color.primary,
|
||||
borderColor: theme.font.color.primary,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
inactive: {
|
||||
backgroundColor: theme.background.transparent.lighter,
|
||||
borderColor: theme.border.color.medium,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
};
|
||||
|
||||
const variantsLine = {
|
||||
active: {
|
||||
backgroundColor: theme.font.color.primary,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
inactive: {
|
||||
backgroundColor: theme.border.color.medium,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledContainer isLast={isLast}>
|
||||
<StyledStepCircle
|
||||
variants={variantsCircle}
|
||||
animate={isActive ? 'active' : 'inactive'}
|
||||
>
|
||||
{isActive && (
|
||||
<AnimatedCheckmark
|
||||
isAnimating={isActive}
|
||||
color={theme.grayScale.gray0}
|
||||
/>
|
||||
)}
|
||||
{!isActive && <StyledStepIndex>{index + 1}</StyledStepIndex>}
|
||||
</StyledStepCircle>
|
||||
<StyledStepLabel isActive={isActive}>{label}</StyledStepLabel>
|
||||
{!isLast && !isMobile && (
|
||||
<StyledStepLine
|
||||
variants={variantsLine}
|
||||
animate={isActive ? 'active' : 'inactive'}
|
||||
/>
|
||||
)}
|
||||
{isActive && children}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
Step.displayName = 'StepBar/Step';
|
||||
@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { Step, StepProps } from './Step';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export type StepBarProps = React.PropsWithChildren &
|
||||
React.ComponentProps<'div'> & {
|
||||
activeStep: number;
|
||||
};
|
||||
|
||||
export const StepBar = ({ activeStep, children }: StepBarProps) => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
{React.Children.map(children, (child, index) => {
|
||||
if (!React.isValidElement(child)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// If the child is not a Step, return it as-is
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
if (child.type?.displayName !== Step.displayName) {
|
||||
return child;
|
||||
}
|
||||
|
||||
// We should only render the active step, and if activeStep is -1, we should only render the first step only when it's mobile device
|
||||
if (
|
||||
isMobile &&
|
||||
(activeStep === -1 ? index !== 0 : index !== activeStep)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return React.cloneElement<StepProps>(child as any, {
|
||||
index,
|
||||
isActive: index <= activeStep,
|
||||
isLast: index === React.Children.count(children) - 1,
|
||||
});
|
||||
})}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
StepBar.Step = Step;
|
||||
60
front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts
Normal file
60
front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { stepBarInternalState } from '../states/stepBarInternalState';
|
||||
|
||||
export type StepsOptions = {
|
||||
initialStep: number;
|
||||
};
|
||||
|
||||
export const useStepBar = ({ initialStep }: StepsOptions) => {
|
||||
const [stepBarInternal, setStepBarInternal] =
|
||||
useRecoilState(stepBarInternalState);
|
||||
|
||||
const nextStep = () => {
|
||||
setStepBarInternal((prevState) => ({
|
||||
...prevState,
|
||||
activeStep: prevState.activeStep + 1,
|
||||
}));
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
setStepBarInternal((prevState) => ({
|
||||
...prevState,
|
||||
activeStep: prevState.activeStep - 1,
|
||||
}));
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
setStepBarInternal((prevState) => ({
|
||||
...prevState,
|
||||
activeStep: 0,
|
||||
}));
|
||||
};
|
||||
|
||||
const setStep = useCallback(
|
||||
(step: number) => {
|
||||
setStepBarInternal((prevState) => ({
|
||||
...prevState,
|
||||
activeStep: step,
|
||||
}));
|
||||
},
|
||||
[setStepBarInternal],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialStep !== undefined) {
|
||||
setStep(initialStep);
|
||||
}
|
||||
// We only want this to happen on mount
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return {
|
||||
nextStep,
|
||||
prevStep,
|
||||
reset,
|
||||
setStep,
|
||||
activeStep: stepBarInternal.activeStep,
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
export type StepsState = {
|
||||
activeStep: number;
|
||||
};
|
||||
|
||||
export const stepBarInternalState = atom<StepsState>({
|
||||
key: 'step-bar/internal-state',
|
||||
default: {
|
||||
activeStep: -1,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user