Refactoring shortcuts and commandbar (#412)
* Begin refactoring shortcuts and commandbar * Continue refacto hotkeys * Remove debug logs * Add new story * Simplify hotkeys * Simplify hotkeys --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Félix Malfait
96
front/src/modules/command-menu/components/CommandMenu.tsx
Normal file
96
front/src/modules/command-menu/components/CommandMenu.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { useDirectHotkeys } from '@/hotkeys/hooks/useDirectHotkeys';
|
||||
|
||||
import { isCommandMenuOpenedState } from '../states/isCommandMenuOpened';
|
||||
|
||||
import { CommandMenuItem } from './CommandMenuItem';
|
||||
import {
|
||||
StyledDialog,
|
||||
StyledEmpty,
|
||||
StyledGroup,
|
||||
StyledInput,
|
||||
StyledList,
|
||||
// StyledSeparator,
|
||||
} from './CommandMenuStyles';
|
||||
|
||||
export function CommandMenu() {
|
||||
const [open, setOpen] = useRecoilState(isCommandMenuOpenedState);
|
||||
|
||||
useDirectHotkeys(
|
||||
'ctrl+k,meta+k',
|
||||
() => {
|
||||
setOpen((prevOpen) => !prevOpen);
|
||||
},
|
||||
[setOpen],
|
||||
);
|
||||
|
||||
/*
|
||||
TODO: Allow performing actions on page through CommandBar
|
||||
|
||||
import { useMatch, useResolvedPath } from 'react-router-dom';
|
||||
import { IconBuildingSkyscraper, IconUser } from '@/ui/icons';
|
||||
|
||||
const createSection = (
|
||||
<StyledGroup heading="Create">
|
||||
<CommandMenuItem
|
||||
label="Create People"
|
||||
onClick={createPeople}
|
||||
icon={<IconUser />}
|
||||
shortcuts={
|
||||
!!useMatch({
|
||||
path: useResolvedPath('/people').pathname,
|
||||
end: true,
|
||||
})
|
||||
? ['C']
|
||||
: []
|
||||
}
|
||||
/>
|
||||
<CommandMenuItem
|
||||
label="Create Company"
|
||||
onClick={createCompany}
|
||||
icon={<IconBuildingSkyscraper />}
|
||||
shortcuts={
|
||||
!!useMatch({
|
||||
path: useResolvedPath('/companies').pathname,
|
||||
end: true,
|
||||
})
|
||||
? ['C']
|
||||
: []
|
||||
}
|
||||
/>
|
||||
</StyledGroup>
|
||||
);*/
|
||||
|
||||
return (
|
||||
<StyledDialog
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
label="Global Command Menu"
|
||||
>
|
||||
<StyledInput placeholder="Search" />
|
||||
<StyledList>
|
||||
<StyledEmpty>No results found.</StyledEmpty>
|
||||
<StyledGroup heading="Go to">
|
||||
<CommandMenuItem to="/people" label="People" shortcuts={['G', 'P']} />
|
||||
<CommandMenuItem
|
||||
to="/companies"
|
||||
label="Companies"
|
||||
shortcuts={['G', 'C']}
|
||||
/>
|
||||
<CommandMenuItem
|
||||
to="/opportunities"
|
||||
label="Opportunities"
|
||||
shortcuts={['G', 'O']}
|
||||
/>
|
||||
<CommandMenuItem
|
||||
to="/settings/profile"
|
||||
label="Settings"
|
||||
shortcuts={['G', 'S']}
|
||||
/>
|
||||
</StyledGroup>
|
||||
</StyledList>
|
||||
</StyledDialog>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
import { ReactNode } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { IconArrowUpRight } from '@/ui/icons';
|
||||
|
||||
import { isCommandMenuOpenedState } from '../states/isCommandMenuOpened';
|
||||
|
||||
import {
|
||||
StyledIconAndLabelContainer,
|
||||
StyledIconContainer,
|
||||
StyledMenuItem,
|
||||
StyledShortCut,
|
||||
StyledShortcutsContainer,
|
||||
} from './CommandMenuStyles';
|
||||
|
||||
export type OwnProps = {
|
||||
label: string;
|
||||
to?: string;
|
||||
onClick?: () => void;
|
||||
icon?: ReactNode;
|
||||
shortcuts?: Array<string>;
|
||||
};
|
||||
|
||||
export function CommandMenuItem({
|
||||
label,
|
||||
to,
|
||||
onClick,
|
||||
icon,
|
||||
shortcuts,
|
||||
}: OwnProps) {
|
||||
const setOpen = useSetRecoilState(isCommandMenuOpenedState);
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (to) {
|
||||
icon = <IconArrowUpRight />;
|
||||
}
|
||||
|
||||
const onItemClick = () => {
|
||||
setOpen(false);
|
||||
|
||||
if (onClick) {
|
||||
onClick();
|
||||
return;
|
||||
}
|
||||
if (to) {
|
||||
navigate(to);
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledMenuItem onSelect={onItemClick}>
|
||||
<StyledIconAndLabelContainer>
|
||||
<StyledIconContainer>{icon}</StyledIconContainer>
|
||||
{label}
|
||||
</StyledIconAndLabelContainer>
|
||||
<StyledShortcutsContainer>
|
||||
{shortcuts &&
|
||||
shortcuts.map((shortcut, index) => {
|
||||
const prefix = index > 0 ? 'then' : '';
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
{prefix}
|
||||
<StyledShortCut>{shortcut}</StyledShortCut>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</StyledShortcutsContainer>
|
||||
</StyledMenuItem>
|
||||
);
|
||||
}
|
||||
138
front/src/modules/command-menu/components/CommandMenuStyles.tsx
Normal file
138
front/src/modules/command-menu/components/CommandMenuStyles.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Command } from 'cmdk';
|
||||
|
||||
export const StyledDialog = styled(Command.Dialog)`
|
||||
background: ${(props) => props.theme.primaryBackground};
|
||||
border-radius: ${(props) => props.theme.borderRadius};
|
||||
box-shadow: ${(props) => props.theme.heavyBoxShadow};
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
left: 50%;
|
||||
max-width: 640px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const StyledInput = styled(Command.Input)`
|
||||
background: ${(props) => props.theme.primaryBackground};
|
||||
border: none;
|
||||
border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
|
||||
border-radius: 0;
|
||||
color: ${(props) => props.theme.text100};
|
||||
font-size: ${(props) => props.theme.fontSizeLarge};
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: ${(props) => props.theme.spacing(5)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const StyledMenuItem = styled(Command.Item)`
|
||||
align-items: center;
|
||||
color: ${(props) => props.theme.text80};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: ${(props) => props.theme.fontSizeMedium};
|
||||
gap: ${(props) => props.theme.spacing(3)};
|
||||
height: 40px;
|
||||
justify-content: space-between;
|
||||
padding: 0 ${(props) => props.theme.spacing(4)};
|
||||
position: relative;
|
||||
transition: all 150ms ease;
|
||||
transition-property: none;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
background: ${(props) => props.theme.lightBackgroundTransparent};
|
||||
}
|
||||
&[data-selected='true'] {
|
||||
background: ${(props) => props.theme.tertiaryBackground};
|
||||
/* Could be nice to add a caret like this for better accessibility in the future
|
||||
But it needs to be consistend with other picker dropdown (e.g. company)
|
||||
&:after {
|
||||
background: ${(props) => props.theme.quaternaryBackground};
|
||||
content: '';
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
z-index: ${(props) => props.theme.lastLayerZIndex};
|
||||
} */
|
||||
}
|
||||
&[data-disabled='true'] {
|
||||
color: ${(props) => props.theme.text30};
|
||||
cursor: not-allowed;
|
||||
}
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledList = styled(Command.List)`
|
||||
background: ${(props) => props.theme.secondaryBackground};
|
||||
height: min(300px, var(--cmdk-list-height));
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
transition: 100ms ease;
|
||||
transition-property: height;
|
||||
`;
|
||||
|
||||
export const StyledGroup = styled(Command.Group)`
|
||||
[cmdk-group-heading] {
|
||||
align-items: center;
|
||||
color: ${(props) => props.theme.text30};
|
||||
display: flex;
|
||||
font-size: ${(props) => props.theme.fontSizeExtraSmall};
|
||||
font-weight: ${(props) => props.theme.fontWeightBold};
|
||||
padding-bottom: ${(props) => props.theme.spacing(2)};
|
||||
padding-left: ${(props) => props.theme.spacing(4)};
|
||||
padding-right: ${(props) => props.theme.spacing(4)};
|
||||
padding-top: ${(props) => props.theme.spacing(2)};
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledEmpty = styled(Command.Empty)`
|
||||
align-items: center;
|
||||
color: ${(props) => props.theme.text30};
|
||||
display: flex;
|
||||
font-size: ${(props) => props.theme.fontSizeMedium};
|
||||
height: 64px;
|
||||
justify-content: center;
|
||||
white-space: pre-wrap;
|
||||
`;
|
||||
|
||||
export const StyledSeparator = styled(Command.Separator)``;
|
||||
|
||||
export const StyledIconAndLabelContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${(props) => props.theme.spacing(2)};
|
||||
`;
|
||||
export const StyledIconContainer = styled.div`
|
||||
align-items: center;
|
||||
background: ${(props) => props.theme.lightBackgroundTransparent};
|
||||
border-radius: 4px;
|
||||
color: ${(props) => props.theme.text60};
|
||||
display: flex;
|
||||
padding: ${(props) => props.theme.spacing(1)};
|
||||
`;
|
||||
export const StyledShortCut = styled.div`
|
||||
background-color: ${(props) => props.theme.lightBackgroundTransparent};
|
||||
border-radius: 4px;
|
||||
color: ${(props) => props.theme.text30};
|
||||
margin-left: ${(props) => props.theme.spacing(1)};
|
||||
margin-right: ${(props) => props.theme.spacing(1)};
|
||||
padding: ${(props) => props.theme.spacing(1)};
|
||||
`;
|
||||
|
||||
export const StyledShortcutsContainer = styled.div`
|
||||
align-items: center;
|
||||
color: ${(props) => props.theme.text30};
|
||||
display: flex;
|
||||
font-size: ${(props) => props.theme.fontSizeSmall};
|
||||
`;
|
||||
@ -0,0 +1,38 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { fireEvent } from '@storybook/testing-library';
|
||||
|
||||
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
|
||||
|
||||
import { CommandMenu } from '../CommandMenu';
|
||||
|
||||
const meta: Meta<typeof CommandMenu> = {
|
||||
title: 'Modules/CommandMenu/CommandMenu',
|
||||
component: CommandMenu,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof CommandMenu>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MemoryRouter>
|
||||
<CommandMenu />
|
||||
</MemoryRouter>,
|
||||
),
|
||||
};
|
||||
|
||||
export const CmdK: Story = {
|
||||
render: getRenderWrapperForComponent(
|
||||
<MemoryRouter>
|
||||
<CommandMenu />
|
||||
</MemoryRouter>,
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
fireEvent.keyDown(canvasElement, {
|
||||
key: 'k',
|
||||
code: 'KeyK',
|
||||
metaKey: true,
|
||||
});
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
export const isCommandMenuOpenedState = atom({
|
||||
key: 'command-menu/isCommandMenuOpenedState',
|
||||
default: false,
|
||||
});
|
||||
Reference in New Issue
Block a user