Migrate to a monorepo structure (#2909)
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<HTMLDivElement>(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.background.danger
|
||||
: theme.background.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledButtonLabel = styled.div`
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-left: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
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,39 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { actionBarOpenState } from '../../states/actionBarIsOpenState';
|
||||
import { ActionBar } from '../ActionBar';
|
||||
|
||||
const FilledActionBar = (props: { selectedIds: string[] }) => {
|
||||
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
|
||||
setActionBarOpenState(true);
|
||||
return <ActionBar selectedIds={props.selectedIds} />;
|
||||
};
|
||||
|
||||
const meta: Meta<typeof ActionBar> = {
|
||||
title: 'UI/Navigation/ActionBar/ActionBar',
|
||||
component: FilledActionBar,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<RecordTableScope
|
||||
recordTableScopeId="companies"
|
||||
onColumnsChange={() => {}}
|
||||
>
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
</RecordTableScope>
|
||||
),
|
||||
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,42 @@
|
||||
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)};
|
||||
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/Navigation/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 { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
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<HTMLDivElement>(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}
|
||||
>
|
||||
<DropdownMenu 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>
|
||||
</DropdownMenu>
|
||||
</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,45 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
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 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/Navigation/ContextMenu/ContextMenu',
|
||||
component: FilledContextMenu,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<RecordTableScope
|
||||
recordTableScopeId="companies"
|
||||
onColumnsChange={() => {}}
|
||||
>
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
</RecordTableScope>
|
||||
),
|
||||
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>
|
||||
);
|
||||
@ -0,0 +1,33 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconBrandGithub } from '@/ui/display/icon';
|
||||
|
||||
import packageJson from '../../../../../../package.json';
|
||||
import { githubLink } from '../constants';
|
||||
|
||||
const StyledVersionLink = styled.a`
|
||||
align-items: center;
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
padding: 0 ${({ theme }) => theme.spacing(1)};
|
||||
text-decoration: none;
|
||||
|
||||
:hover {
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
}
|
||||
`;
|
||||
|
||||
export const GithubVersionLink = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledVersionLink href={githubLink} target="_blank" rel="noreferrer">
|
||||
<IconBrandGithub size={theme.icon.size.md} />
|
||||
{packageJson.version}
|
||||
</StyledVersionLink>
|
||||
);
|
||||
};
|
||||
@ -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 { Meta, StoryObj } from '@storybook/react';
|
||||
import { fn } from '@storybook/test';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { ContactLink } from '../ContactLink';
|
||||
|
||||
const meta: Meta<typeof ContactLink> = {
|
||||
title: 'UI/Navigation/Link/ContactLink',
|
||||
component: ContactLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
args: {
|
||||
className: 'ContactLink',
|
||||
href: '/test',
|
||||
children: 'Contact Link',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ContactLink>;
|
||||
const clickJestFn = 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,16 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { GithubVersionLink } from '../GithubVersionLink';
|
||||
|
||||
const meta: Meta<typeof GithubVersionLink> = {
|
||||
title: 'UI/Navigation/Link/GithubVersionLink',
|
||||
component: GithubVersionLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof GithubVersionLink>;
|
||||
|
||||
export const Default: Story = {};
|
||||
@ -0,0 +1,36 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { RawLink } from '../RawLink';
|
||||
|
||||
const meta: Meta<typeof RawLink> = {
|
||||
title: 'UI/Navigation/Link/RawLink',
|
||||
component: RawLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
args: {
|
||||
className: 'RawLink',
|
||||
href: '/test',
|
||||
children: 'Raw Link',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof RawLink>;
|
||||
const clickJestFn = 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,35 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { RoundedLink } from '../RoundedLink';
|
||||
|
||||
const meta: Meta<typeof RoundedLink> = {
|
||||
title: 'UI/Navigation/Link/RoundedLink',
|
||||
component: RoundedLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
args: {
|
||||
href: '/test',
|
||||
children: 'Rounded chip',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof RoundedLink>;
|
||||
const clickJestFn = 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,50 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { LinkType, SocialLink } from '../SocialLink';
|
||||
|
||||
const meta: Meta<typeof SocialLink> = {
|
||||
title: 'UI/Navigation/Link/SocialLink',
|
||||
component: SocialLink,
|
||||
decorators: [ComponentWithRouterDecorator],
|
||||
args: {
|
||||
href: '/test',
|
||||
children: 'Social Link',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SocialLink>;
|
||||
const clickJestFn = 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 @@
|
||||
export const githubLink = 'https://github.com/twentyhq/twenty';
|
||||
@ -0,0 +1,67 @@
|
||||
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?: (event: MouseEvent<HTMLLIElement>) => void;
|
||||
};
|
||||
|
||||
export const MenuItem = ({
|
||||
LeftIcon,
|
||||
accent = 'default',
|
||||
text,
|
||||
iconButtons,
|
||||
isTooltipOpen,
|
||||
className,
|
||||
testId,
|
||||
onClick,
|
||||
}: MenuItemProps) => {
|
||||
const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
|
||||
|
||||
const handleMenuItemClick = (event: MouseEvent<HTMLLIElement>) => {
|
||||
if (!onClick) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
onClick?.(event);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledHoverableMenuItemBase
|
||||
data-testid={testId ?? undefined}
|
||||
onClick={handleMenuItemClick}
|
||||
className={className}
|
||||
accent={accent}
|
||||
isMenuOpen={!!isTooltipOpen}
|
||||
>
|
||||
<StyledMenuItemLeftContent>
|
||||
<MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />
|
||||
</StyledMenuItemLeftContent>
|
||||
<div className="hoverable-buttons">
|
||||
{showIconButtons && (
|
||||
<FloatingIconButtonGroup iconButtons={iconButtons} size="small" />
|
||||
)}
|
||||
</div>
|
||||
</StyledHoverableMenuItemBase>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,108 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
import {
|
||||
StyledMenuItemLabel,
|
||||
StyledMenuItemLeftContent,
|
||||
} from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
import { MenuItemCommandHotKeys } from './MenuItemCommandHotKeys';
|
||||
|
||||
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 StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
|
||||
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
|
||||
--vertical-padding: ${({ theme }) => theme.spacing(2)};
|
||||
align-items: center;
|
||||
background: ${({ isSelected, theme }) =>
|
||||
isSelected ? theme.background.transparent.light : theme.background.primary};
|
||||
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)};
|
||||
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};
|
||||
}
|
||||
&[data-disabled='true'] {
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
cursor: not-allowed;
|
||||
}
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
export type MenuItemCommandProps = {
|
||||
LeftIcon?: IconComponent;
|
||||
text: string;
|
||||
firstHotKey?: string;
|
||||
secondHotKey?: string;
|
||||
className?: string;
|
||||
isSelected?: boolean;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export const MenuItemCommand = ({
|
||||
LeftIcon,
|
||||
text,
|
||||
firstHotKey,
|
||||
secondHotKey,
|
||||
className,
|
||||
isSelected,
|
||||
onClick,
|
||||
}: MenuItemCommandProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledMenuItemCommandContainer
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
isSelected={isSelected}
|
||||
>
|
||||
<StyledMenuItemLeftContent>
|
||||
{LeftIcon && (
|
||||
<StyledBigIconContainer>
|
||||
<LeftIcon size={theme.icon.size.sm} />
|
||||
</StyledBigIconContainer>
|
||||
)}
|
||||
<StyledMenuItemLabelText hasLeftIcon={!!LeftIcon}>
|
||||
{text}
|
||||
</StyledMenuItemLabelText>
|
||||
</StyledMenuItemLeftContent>
|
||||
<MenuItemCommandHotKeys
|
||||
firstHotKey={firstHotKey}
|
||||
secondHotKey={secondHotKey}
|
||||
/>
|
||||
</StyledMenuItemCommandContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,62 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const StyledCommandTextContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const StyledCommandText = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
padding-right: ${({ theme }) => theme.spacing(2)};
|
||||
padding-top: ${({ theme }) => theme.spacing(1)};
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledCommandKey = styled.div`
|
||||
align-items: center;
|
||||
background-color: ${({ theme }) => theme.background.secondary};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.strong};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.underline};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: ${({ theme }) => theme.spacing(5)};
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
export type MenuItemCommandHotKeysProps = {
|
||||
firstHotKey?: string;
|
||||
joinLabel?: string;
|
||||
secondHotKey?: string;
|
||||
};
|
||||
|
||||
export const MenuItemCommandHotKeys = ({
|
||||
firstHotKey,
|
||||
secondHotKey,
|
||||
joinLabel = 'then',
|
||||
}: MenuItemCommandHotKeysProps) => {
|
||||
return (
|
||||
<StyledCommandText>
|
||||
{firstHotKey && (
|
||||
<StyledCommandTextContainer>
|
||||
<StyledCommandKey>{firstHotKey}</StyledCommandKey>
|
||||
{secondHotKey && (
|
||||
<>
|
||||
{joinLabel}
|
||||
<StyledCommandKey>{secondHotKey}</StyledCommandKey>
|
||||
</>
|
||||
)}
|
||||
</StyledCommandTextContainer>
|
||||
)}
|
||||
</StyledCommandText>
|
||||
);
|
||||
};
|
||||
@ -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,68 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
|
||||
import {
|
||||
ColorSample,
|
||||
ColorSampleVariant,
|
||||
} from '@/ui/display/color/components/ColorSample';
|
||||
import { IconCheck } from '@/ui/display/icon';
|
||||
import { ThemeColor } from '@/ui/theme/constants/colors';
|
||||
|
||||
import {
|
||||
StyledMenuItemLabel,
|
||||
StyledMenuItemLeftContent,
|
||||
} from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
import { StyledMenuItemSelect } from './MenuItemSelect';
|
||||
|
||||
type MenuItemSelectColorProps = {
|
||||
selected: boolean;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
hovered?: boolean;
|
||||
color: ThemeColor;
|
||||
variant?: ColorSampleVariant;
|
||||
};
|
||||
|
||||
export const colorLabels: Record<ThemeColor, string> = {
|
||||
green: 'Green',
|
||||
turquoise: 'Turquoise',
|
||||
sky: 'Sky',
|
||||
blue: 'Blue',
|
||||
purple: 'Purple',
|
||||
pink: 'Pink',
|
||||
red: 'Red',
|
||||
orange: 'Orange',
|
||||
yellow: 'Yellow',
|
||||
gray: 'Gray',
|
||||
};
|
||||
|
||||
export const MenuItemSelectColor = ({
|
||||
color,
|
||||
selected,
|
||||
className,
|
||||
onClick,
|
||||
disabled,
|
||||
hovered,
|
||||
variant = 'default',
|
||||
}: MenuItemSelectColorProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledMenuItemSelect
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
selected={selected}
|
||||
disabled={disabled}
|
||||
hovered={hovered}
|
||||
>
|
||||
<StyledMenuItemLeftContent>
|
||||
<ColorSample colorName={color} variant={variant} />
|
||||
<StyledMenuItemLabel hasLeftIcon={true}>
|
||||
{colorLabels[color]}
|
||||
</StyledMenuItemLabel>
|
||||
</StyledMenuItemLeftContent>
|
||||
{selected && <IconCheck size={theme.icon.size.sm} />}
|
||||
</StyledMenuItemSelect>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,43 @@
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { Toggle, ToggleSize } from '@/ui/input/components/Toggle';
|
||||
|
||||
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
||||
import {
|
||||
StyledMenuItemBase,
|
||||
StyledMenuItemRightContent,
|
||||
} from '../internals/components/StyledMenuItemBase';
|
||||
|
||||
type MenuItemToggleProps = {
|
||||
LeftIcon?: IconComponent;
|
||||
toggled: boolean;
|
||||
text: string;
|
||||
className?: string;
|
||||
onToggleChange?: (toggled: boolean) => void;
|
||||
toggleSize?: ToggleSize;
|
||||
};
|
||||
|
||||
export const MenuItemToggle = ({
|
||||
LeftIcon,
|
||||
text,
|
||||
toggled,
|
||||
className,
|
||||
onToggleChange,
|
||||
toggleSize,
|
||||
}: MenuItemToggleProps) => {
|
||||
const handleOnClick = () => {
|
||||
onToggleChange?.(!toggled);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledMenuItemBase className={className} onClick={handleOnClick}>
|
||||
<MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
|
||||
<StyledMenuItemRightContent>
|
||||
<Toggle
|
||||
value={toggled}
|
||||
onChange={onToggleChange}
|
||||
toggleSize={toggleSize}
|
||||
/>
|
||||
</StyledMenuItemRightContent>
|
||||
</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/Navigation/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,95 @@
|
||||
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 { MenuItemCommand } from '../MenuItemCommand';
|
||||
|
||||
const meta: Meta<typeof MenuItemCommand> = {
|
||||
title: 'UI/Navigation/MenuItem/MenuItemCommand',
|
||||
component: MenuItemCommand,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemCommand>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'First option',
|
||||
firstHotKey: '⌘',
|
||||
secondHotKey: '1',
|
||||
},
|
||||
render: (props) => (
|
||||
<MenuItemCommand
|
||||
LeftIcon={props.LeftIcon}
|
||||
text={props.text}
|
||||
firstHotKey={props.firstHotKey}
|
||||
secondHotKey={props.secondHotKey}
|
||||
className={props.className}
|
||||
onClick={props.onClick}
|
||||
isSelected={false}
|
||||
></MenuItemCommand>
|
||||
),
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemCommand> = {
|
||||
args: {
|
||||
text: 'Menu item',
|
||||
firstHotKey: '⌘',
|
||||
secondHotKey: '1',
|
||||
},
|
||||
argTypes: {
|
||||
className: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'] },
|
||||
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 {};
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
options: {
|
||||
elementContainer: {
|
||||
width: 200,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
render: (props) => (
|
||||
<MenuItemCommand
|
||||
LeftIcon={props.LeftIcon}
|
||||
text={props.text}
|
||||
firstHotKey={props.firstHotKey}
|
||||
secondHotKey={props.secondHotKey}
|
||||
className={props.className}
|
||||
onClick={props.onClick}
|
||||
isSelected={false}
|
||||
></MenuItemCommand>
|
||||
),
|
||||
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/Navigation/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/Navigation/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/Navigation/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/Navigation/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/Navigation/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/Navigation/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,84 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ColorSampleVariant } from '@/ui/display/color/components/ColorSample';
|
||||
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
|
||||
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/Navigation/MenuItem/MenuItemSelectColor',
|
||||
component: MenuItemSelectColor,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemSelectColor>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: { color: 'green' },
|
||||
argTypes: { className: { control: false } },
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemSelectColor> = {
|
||||
argTypes: { className: { control: false } },
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'color',
|
||||
values: mainColorNames,
|
||||
props: (color: ThemeColor) => ({ color }),
|
||||
labels: (color: ThemeColor) => 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 {};
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'variant',
|
||||
values: ['default', 'pipeline'],
|
||||
props: (variant: ColorSampleVariant) => ({ variant }),
|
||||
labels: (variant: ColorSampleVariant) => variant,
|
||||
},
|
||||
] 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/Navigation/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(2)};
|
||||
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,33 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
import { NavigationBarItem } from './NavigationBarItem';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(4)};
|
||||
justify-content: center;
|
||||
padding: ${({ theme }) => theme.spacing(3)};
|
||||
`;
|
||||
|
||||
type NavigationBarProps = {
|
||||
activeItemName: string;
|
||||
items: { name: string; Icon: IconComponent; onClick: () => void }[];
|
||||
};
|
||||
|
||||
export const NavigationBar = ({
|
||||
activeItemName,
|
||||
items,
|
||||
}: NavigationBarProps) => (
|
||||
<StyledContainer>
|
||||
{items.map(({ Icon, name, onClick }) => (
|
||||
<NavigationBarItem
|
||||
key={name}
|
||||
Icon={Icon}
|
||||
isActive={activeItemName === name}
|
||||
onClick={onClick}
|
||||
/>
|
||||
))}
|
||||
</StyledContainer>
|
||||
);
|
||||
@ -0,0 +1,42 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
const StyledIconButton = styled.div<{ isActive?: boolean }>`
|
||||
align-items: center;
|
||||
background-color: ${({ isActive, theme }) =>
|
||||
isActive ? theme.background.transparent.light : 'none'};
|
||||
border-radius: ${({ theme }) => theme.spacing(1)};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: ${({ theme }) => theme.spacing(10)};
|
||||
justify-content: center;
|
||||
transition: background-color ${({ theme }) => theme.animation.duration.fast}s
|
||||
ease;
|
||||
width: ${({ theme }) => theme.spacing(10)};
|
||||
|
||||
&:hover {
|
||||
background-color: ${({ theme }) => theme.background.transparent.light};
|
||||
}
|
||||
`;
|
||||
|
||||
type NavigationBarItemProps = {
|
||||
Icon: IconComponent;
|
||||
isActive: boolean;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
export const NavigationBarItem = ({
|
||||
Icon,
|
||||
isActive,
|
||||
onClick,
|
||||
}: NavigationBarItemProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledIconButton isActive={isActive} onClick={onClick}>
|
||||
<Icon color={theme.color.gray50} size={theme.icon.size.lg} />
|
||||
</StyledIconButton>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,33 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import {
|
||||
IconCheckbox,
|
||||
IconList,
|
||||
IconSearch,
|
||||
IconSettings,
|
||||
} from '@/ui/display/icon';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
import { NavigationBar } from '../NavigationBar';
|
||||
|
||||
const meta: Meta<typeof NavigationBar> = {
|
||||
title: 'UI/Navigation/NavigationBar/NavigationBar',
|
||||
component: NavigationBar,
|
||||
args: {
|
||||
activeItemName: 'main',
|
||||
items: [
|
||||
{ name: 'main', Icon: IconList, onClick: () => undefined },
|
||||
{ name: 'search', Icon: IconSearch, onClick: () => undefined },
|
||||
{ name: 'tasks', Icon: IconCheckbox, onClick: () => undefined },
|
||||
{ name: 'settings', Icon: IconSettings, onClick: () => undefined },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavigationBar>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [ComponentDecorator, ComponentWithRouterDecorator],
|
||||
};
|
||||
@ -0,0 +1,119 @@
|
||||
import { ReactNode, useState } from 'react';
|
||||
import { css, useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { desktopNavDrawerWidths } from '../constants';
|
||||
|
||||
import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
|
||||
import { NavigationDrawerHeader } from './NavigationDrawerHeader';
|
||||
|
||||
export type NavigationDrawerProps = {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
footer?: ReactNode;
|
||||
isSubMenu?: boolean;
|
||||
logo?: string;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
const StyledAnimatedContainer = styled(motion.div)`
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(8)};
|
||||
height: 100%;
|
||||
min-width: ${desktopNavDrawerWidths.menu};
|
||||
padding: ${({ theme }) => theme.spacing(3, 2, 4)};
|
||||
|
||||
${({ isSubMenu, theme }) =>
|
||||
isSubMenu
|
||||
? css`
|
||||
padding-right: ${theme.spacing(8)};
|
||||
padding-top: 41px;
|
||||
`
|
||||
: ''}
|
||||
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledItemsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(8)};
|
||||
margin-bottom: auto;
|
||||
`;
|
||||
|
||||
export const NavigationDrawer = ({
|
||||
children,
|
||||
className,
|
||||
footer,
|
||||
isSubMenu,
|
||||
logo,
|
||||
title,
|
||||
}: NavigationDrawerProps) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const isMobile = useIsMobile();
|
||||
const theme = useTheme();
|
||||
const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState);
|
||||
|
||||
const handleHover = () => {
|
||||
setIsHovered(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
const desktopWidth = !isNavigationDrawerOpen
|
||||
? 12
|
||||
: isSubMenu
|
||||
? desktopNavDrawerWidths.submenu
|
||||
: desktopNavDrawerWidths.menu;
|
||||
|
||||
const mobileWidth = isNavigationDrawerOpen ? '100%' : 0;
|
||||
|
||||
return (
|
||||
<StyledAnimatedContainer
|
||||
className={className}
|
||||
initial={false}
|
||||
animate={{
|
||||
width: isMobile ? mobileWidth : desktopWidth,
|
||||
opacity: isNavigationDrawerOpen ? 1 : 0,
|
||||
}}
|
||||
transition={{
|
||||
duration: theme.animation.duration.normal,
|
||||
}}
|
||||
>
|
||||
<StyledContainer
|
||||
isSubMenu={isSubMenu}
|
||||
onMouseEnter={handleHover}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{isSubMenu && title ? (
|
||||
!isMobile && <NavigationDrawerBackButton title={title} />
|
||||
) : (
|
||||
<NavigationDrawerHeader
|
||||
name={title}
|
||||
logo={logo}
|
||||
showCollapseButton={isHovered}
|
||||
/>
|
||||
)}
|
||||
<StyledItemsContainer>{children}</StyledItemsContainer>
|
||||
{footer}
|
||||
</StyledContainer>
|
||||
</StyledAnimatedContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,57 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { IconChevronLeft } from '@/ui/display/icon/index';
|
||||
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
|
||||
|
||||
type NavigationDrawerBackButtonProps = {
|
||||
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(2)};
|
||||
line-height: ${({ theme }) => theme.text.lineHeight.md};
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
export const NavigationDrawerBackButton = ({
|
||||
title,
|
||||
}: NavigationDrawerBackButtonProps) => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<StyledIconAndButtonContainer
|
||||
onClick={() => {
|
||||
navigate(navigationMemorizedUrl, { replace: true });
|
||||
}}
|
||||
>
|
||||
<IconChevronLeft
|
||||
size={theme.icon.size.md}
|
||||
stroke={theme.icon.stroke.lg}
|
||||
/>
|
||||
<span>{title}</span>
|
||||
</StyledIconAndButtonContainer>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,58 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import {
|
||||
IconLayoutSidebarLeftCollapse,
|
||||
IconLayoutSidebarRightCollapse,
|
||||
} from '@/ui/display/icon';
|
||||
import { IconButton } from '@/ui/input/button/components/IconButton';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
|
||||
const StyledCollapseButton = styled.div`
|
||||
align-items: center;
|
||||
border-radius: ${({ theme }) => theme.border.radius.md};
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: ${({ theme }) => theme.spacing(6)};
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
width: ${({ theme }) => theme.spacing(6)};
|
||||
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.quaternary};
|
||||
}
|
||||
`;
|
||||
|
||||
type NavigationDrawerCollapseButtonProps = {
|
||||
className?: string;
|
||||
direction?: 'left' | 'right';
|
||||
};
|
||||
|
||||
export const NavigationDrawerCollapseButton = ({
|
||||
className,
|
||||
direction = 'left',
|
||||
}: NavigationDrawerCollapseButtonProps) => {
|
||||
const setIsNavigationDrawerOpen = useSetRecoilState(
|
||||
isNavigationDrawerOpenState,
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledCollapseButton
|
||||
className={className}
|
||||
onClick={() =>
|
||||
setIsNavigationDrawerOpen((previousIsOpen) => !previousIsOpen)
|
||||
}
|
||||
>
|
||||
<IconButton
|
||||
Icon={
|
||||
direction === 'left'
|
||||
? IconLayoutSidebarLeftCollapse
|
||||
: IconLayoutSidebarRightCollapse
|
||||
}
|
||||
variant="tertiary"
|
||||
size="small"
|
||||
/>
|
||||
</StyledCollapseButton>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,65 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: ${({ theme }) => theme.spacing(6)};
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const StyledLogo = styled.div<{ logo: string }>`
|
||||
background: url(${({ logo }) => 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};
|
||||
`;
|
||||
|
||||
const StyledNavigationDrawerCollapseButton = styled(
|
||||
NavigationDrawerCollapseButton,
|
||||
)<{ show?: boolean }>`
|
||||
margin-left: auto;
|
||||
opacity: ${({ show }) => (show ? 1 : 0)};
|
||||
transition: opacity ${({ theme }) => theme.animation.duration.normal}s;
|
||||
`;
|
||||
|
||||
type NavigationDrawerHeaderProps = {
|
||||
name?: string;
|
||||
logo?: string;
|
||||
showCollapseButton: boolean;
|
||||
};
|
||||
|
||||
export const NavigationDrawerHeader = ({
|
||||
name = 'Twenty',
|
||||
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=',
|
||||
showCollapseButton,
|
||||
}: NavigationDrawerHeaderProps) => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<StyledLogo logo={logo} />
|
||||
<StyledName>{name}</StyledName>
|
||||
{!isMobile && (
|
||||
<StyledNavigationDrawerCollapseButton
|
||||
direction="left"
|
||||
show={showCollapseButton}
|
||||
/>
|
||||
)}
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,175 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
type NavigationDrawerItemProps = {
|
||||
className?: string;
|
||||
label: string;
|
||||
level?: 1 | 2;
|
||||
to?: string;
|
||||
onClick?: () => void;
|
||||
Icon: IconComponent;
|
||||
active?: boolean;
|
||||
danger?: boolean;
|
||||
soon?: boolean;
|
||||
count?: number;
|
||||
keyboard?: string[];
|
||||
};
|
||||
|
||||
type StyledItemProps = {
|
||||
active?: boolean;
|
||||
danger?: boolean;
|
||||
level: 1 | 2;
|
||||
soon?: boolean;
|
||||
};
|
||||
|
||||
const StyledItem = styled.div<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};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
margin-left: ${({ level, theme }) => theme.spacing((level - 1) * 4)};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
padding-left: ${({ theme }) => theme.spacing(1)};
|
||||
padding-right: ${({ 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;
|
||||
`;
|
||||
|
||||
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;
|
||||
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;
|
||||
`;
|
||||
|
||||
export const NavigationDrawerItem = ({
|
||||
className,
|
||||
label,
|
||||
level = 1,
|
||||
Icon,
|
||||
to,
|
||||
onClick,
|
||||
active,
|
||||
danger,
|
||||
soon,
|
||||
count,
|
||||
keyboard,
|
||||
}: NavigationDrawerItemProps) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useIsMobile();
|
||||
const navigate = useNavigate();
|
||||
const setIsNavigationDrawerOpen = useSetRecoilState(
|
||||
isNavigationDrawerOpenState,
|
||||
);
|
||||
|
||||
const handleItemClick = () => {
|
||||
if (isMobile) {
|
||||
setIsNavigationDrawerOpen(false);
|
||||
}
|
||||
|
||||
if (onClick) {
|
||||
onClick();
|
||||
return;
|
||||
}
|
||||
|
||||
if (to) navigate(to);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledItem
|
||||
className={className}
|
||||
level={level}
|
||||
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}
|
||||
</StyledKeyBoardShortcut>
|
||||
)}
|
||||
</StyledItem>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const StyledGroup = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(0.5)};
|
||||
`;
|
||||
|
||||
export { StyledGroup as NavigationDrawerItemGroup };
|
||||
@ -0,0 +1,9 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const StyledSection = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.betweenSiblingsGap};
|
||||
`;
|
||||
|
||||
export { StyledSection as NavigationDrawerSection };
|
||||
@ -0,0 +1,19 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type NavigationDrawerSectionTitleProps = {
|
||||
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: ${({ theme }) => theme.spacing(1)};
|
||||
padding-top: 0;
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
export const NavigationDrawerSectionTitle = ({
|
||||
label,
|
||||
}: NavigationDrawerSectionTitleProps) => <StyledTitle>{label}</StyledTitle>;
|
||||
@ -0,0 +1,146 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Favorites } from '@/favorites/components/Favorites';
|
||||
import {
|
||||
IconAt,
|
||||
IconBell,
|
||||
IconBuildingSkyscraper,
|
||||
IconCalendarEvent,
|
||||
IconCheckbox,
|
||||
IconColorSwatch,
|
||||
IconLogout,
|
||||
IconMail,
|
||||
IconSearch,
|
||||
IconSettings,
|
||||
IconTargetArrow,
|
||||
IconUser,
|
||||
IconUserCircle,
|
||||
IconUsers,
|
||||
} from '@/ui/display/icon';
|
||||
import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||
|
||||
import { NavigationDrawer } from '../NavigationDrawer';
|
||||
import { NavigationDrawerItem } from '../NavigationDrawerItem';
|
||||
import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup';
|
||||
import { NavigationDrawerSection } from '../NavigationDrawerSection';
|
||||
import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
|
||||
|
||||
const meta: Meta<typeof NavigationDrawer> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',
|
||||
component: NavigationDrawer,
|
||||
decorators: [ComponentWithRouterDecorator, SnackBarDecorator],
|
||||
parameters: { layout: 'fullscreen' },
|
||||
argTypes: { children: { control: false }, footer: { control: false } },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavigationDrawer>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<NavigationDrawerSection>
|
||||
<NavigationDrawerItem label="Search" Icon={IconSearch} active />
|
||||
<NavigationDrawerItem
|
||||
label="Notifications"
|
||||
to="/inbox"
|
||||
Icon={IconBell}
|
||||
soon={true}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Settings"
|
||||
to="/settings/profile"
|
||||
Icon={IconSettings}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Tasks"
|
||||
to="/tasks"
|
||||
Icon={IconCheckbox}
|
||||
count={2}
|
||||
/>
|
||||
</NavigationDrawerSection>
|
||||
|
||||
<Favorites />
|
||||
|
||||
<NavigationDrawerSection>
|
||||
<NavigationDrawerSectionTitle label="Workspace" />
|
||||
<NavigationDrawerItem
|
||||
label="Companies"
|
||||
to="/companies"
|
||||
Icon={IconBuildingSkyscraper}
|
||||
/>
|
||||
<NavigationDrawerItem label="People" to="/people" Icon={IconUser} />
|
||||
<NavigationDrawerItem label="Opportunities" Icon={IconTargetArrow} />
|
||||
</NavigationDrawerSection>
|
||||
</>
|
||||
),
|
||||
footer: null,
|
||||
},
|
||||
};
|
||||
|
||||
export const Submenu: Story = {
|
||||
args: {
|
||||
isSubMenu: true,
|
||||
title: 'Settings',
|
||||
children: (
|
||||
<>
|
||||
<NavigationDrawerSection>
|
||||
<NavigationDrawerSectionTitle label="User" />
|
||||
<NavigationDrawerItem
|
||||
label="Profile"
|
||||
to="/settings/profile"
|
||||
Icon={IconUserCircle}
|
||||
active
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Appearance"
|
||||
to="/settings/profile/appearance"
|
||||
Icon={IconColorSwatch}
|
||||
/>
|
||||
<NavigationDrawerItemGroup>
|
||||
<NavigationDrawerItem
|
||||
label="Accounts"
|
||||
to="/settings/accounts"
|
||||
Icon={IconAt}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
level={2}
|
||||
label="Emails"
|
||||
to="/settings/accounts/emails"
|
||||
Icon={IconMail}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
level={2}
|
||||
label="Calendars"
|
||||
Icon={IconCalendarEvent}
|
||||
soon
|
||||
/>
|
||||
</NavigationDrawerItemGroup>
|
||||
</NavigationDrawerSection>
|
||||
|
||||
<NavigationDrawerSection>
|
||||
<NavigationDrawerSectionTitle label="Workspace" />
|
||||
<NavigationDrawerItem
|
||||
label="General"
|
||||
to="/settings/workspace"
|
||||
Icon={IconSettings}
|
||||
/>
|
||||
<NavigationDrawerItem
|
||||
label="Members"
|
||||
to="/settings/workspace-members"
|
||||
Icon={IconUsers}
|
||||
/>
|
||||
</NavigationDrawerSection>
|
||||
|
||||
<NavigationDrawerSection>
|
||||
<NavigationDrawerSectionTitle label="Other" />
|
||||
<NavigationDrawerItem label="Logout" Icon={IconLogout} />
|
||||
</NavigationDrawerSection>
|
||||
</>
|
||||
),
|
||||
footer: <GithubVersionLink />,
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { NavigationDrawerCollapseButton } from '../NavigationDrawerCollapseButton';
|
||||
|
||||
const meta: Meta<typeof NavigationDrawerCollapseButton> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/NavigationDrawerCollapseButton',
|
||||
decorators: [ComponentDecorator],
|
||||
component: NavigationDrawerCollapseButton,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavigationDrawerCollapseButton>;
|
||||
|
||||
export const Default: Story = {};
|
||||
@ -0,0 +1,94 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { IconSearch } from '@/ui/display/icon';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
|
||||
import { NavigationDrawerItem } from '../NavigationDrawerItem';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
const meta: Meta<typeof NavigationDrawerItem> = {
|
||||
title: 'UI/Navigation/NavigationDrawer/NavigationDrawerItem',
|
||||
component: NavigationDrawerItem,
|
||||
args: {
|
||||
label: 'Search',
|
||||
Icon: IconSearch,
|
||||
},
|
||||
argTypes: { Icon: { control: false } },
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NavigationDrawerItem>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<StyledContainer>
|
||||
<Story />
|
||||
</StyledContainer>
|
||||
),
|
||||
ComponentWithRouterDecorator,
|
||||
],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof NavigationDrawerItem> = {
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<StyledContainer>
|
||||
<Story />
|
||||
</StyledContainer>
|
||||
),
|
||||
CatalogDecorator,
|
||||
(Story) => (
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
pseudo: { hover: ['.hover'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'danger',
|
||||
values: [true, false],
|
||||
props: (danger: boolean) => ({ danger }),
|
||||
labels: (danger: boolean) => (danger ? 'Danger' : 'No Danger'),
|
||||
},
|
||||
{
|
||||
name: 'active',
|
||||
values: [true, false],
|
||||
props: (active: boolean) => ({ active }),
|
||||
labels: (active: boolean) => (active ? 'Active' : 'Inactive'),
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: ['Default', 'Hover'],
|
||||
props: (state: string) => ({
|
||||
className: state === 'Hover' ? 'hover' : undefined,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'adornments',
|
||||
values: ['Without Adornments', 'Soon Pill', 'Count', 'Keyboard Keys'],
|
||||
props: (adornmentName: string) =>
|
||||
adornmentName === 'Soon Pill'
|
||||
? { soon: true }
|
||||
: adornmentName === 'Count'
|
||||
? { count: 3 }
|
||||
: adornmentName === 'Keyboard Keys'
|
||||
? { keyboard: ['⌘', 'K'] }
|
||||
: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
export const desktopNavDrawerWidths = {
|
||||
menu: '236px',
|
||||
submenu: '536px',
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
|
||||
const isMobile = window.innerWidth <= MOBILE_VIEWPORT;
|
||||
|
||||
export const isNavigationDrawerOpenState = atom({
|
||||
key: 'isNavigationDrawerOpen',
|
||||
default: !isMobile,
|
||||
});
|
||||
@ -0,0 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
export const navigationMemorizedUrlState = atom<string>({
|
||||
key: 'navigationMemorizedUrlState',
|
||||
default: '/',
|
||||
});
|
||||
@ -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';
|
||||
@ -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;
|
||||
@ -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