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

Move frontend to Vite 5 (#2775)

Browse Source 
* merge squashed

- A couple of CJS modules into ESM (config mostly)
- Vite complains about node.js modules: fixed `useIsMatchingLocation.ts`
	> or use rollupOptions in vite.config.ts
	> ref: https://github.com/saleor/saleor-dashboard/blob/f0e4f59d97e2a8c3e22bd2af7b7ce68a361fc9a4/vite.config.js#L6
- Adjust Storybook to work with Vite: use @storybook/test
- Use SWC for jest tranformations
- Remove unused deps:
	- ts-jest: replaced with @swc/jest, typecheck by `tsc`
	- babel plugins
	- @svgr/plugin-jsx: not used
	- @testing-library/user-event: handled by @storybook/test
	- @typescript-eslint/utils: was not plugged in
	- tsup, esbuild-plugin-svgr: will look into that later
- Install Vite required deps, and remove craco/webpack deps
- Adjust SVG to work with Vite as components
- Fixed `Step.tsx`: I dont know if one should be swaped for the other,
  but there should be no slash
- Initial formating and linting:
	- removed empty object params
	- sorting imports, etc..

* prettier: fix pattern

* coverage: sb coverage report isnt working

* Add missing pieces

* `yarn lint --fix`

* fix: scripts permissions

* tsc: cut errors in half

* fix: remove `react-app-env.d.ts`

* tsc: all fixed, except `react-data-grid` types issue

* eslint: ignore env-config.js

* eslint: Align ci with config

* msw: bypass testing warnings

ref: https://stackoverflow.com/questions/68024935/msw-logging-warnings-for-unhandled-supertest-requests

* rebase: and fix things

* Adjust to current `graphql-codegen` no ESM support

* Remove vite plugin and use built-in methods

* rebase: and some fixes

* quick fix + `corepack use yarn@1.22.19`

* Fix build errors

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Aasim Attia
2023-12-10 17:22:43 +02:00
committed by GitHub
parent f24541beda
commit a70a9281eb
132 changed files with 4428 additions and 8978 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/modules/ui/display/chip/components/Chip.tsx
+10 -10
View File
@@ -41,8 +41,8 @@ const StyledContainer = styled.div<Partial<ChipProps>>`
variant === ChipVariant.Highlighted
? theme.background.transparent.light
: variant === ChipVariant.Rounded
? theme.background.transparent.lighter
: 'transparent'};
? theme.background.transparent.lighter
: 'transparent'};
border-color: ${({ theme, variant }) =>
variant === ChipVariant.Rounded ? theme.border.color.medium : 'none'};
border-radius: ${({ theme, variant }) =>
@@ -56,14 +56,14 @@ const StyledContainer = styled.div<Partial<ChipProps>>`
disabled
? theme.font.color.light
: accent === ChipAccent.TextPrimary
? theme.font.color.primary
: theme.font.color.secondary};
? theme.font.color.primary
: theme.font.color.secondary};
cursor: ${({ clickable, disabled, variant }) =>
disabled || variant === ChipVariant.Transparent
? 'inherit'
: clickable
? 'pointer'
: 'inherit'};
? 'pointer'
: 'inherit'};
display: inline-flex;
font-weight: ${({ theme, accent }) =>
accent === ChipAccent.TextSecondary ? theme.font.weight.medium : 'inherit'};
@@ -85,8 +85,8 @@ const StyledContainer = styled.div<Partial<ChipProps>>`
(variant === ChipVariant.Highlighted
? theme.background.transparent.medium
: variant === ChipVariant.Regular
? theme.background.transparent.light
: 'transparent') +
? theme.background.transparent.light
: 'transparent') +
';'
);
}
@@ -100,8 +100,8 @@ const StyledContainer = styled.div<Partial<ChipProps>>`
(variant === ChipVariant.Highlighted
? theme.background.transparent.strong
: variant === ChipVariant.Regular
? theme.background.transparent.medium
: 'transparent') +
? theme.background.transparent.medium
: 'transparent') +
';'
);
}
front/src/modules/ui/display/icon/components/IconAddressBook.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { TablerIconsProps } from '@/ui/display/icon';
import { ReactComponent as IconAddressBookRaw } from '../assets/address-book.svg';
import IconAddressBookRaw from '../assets/address-book.svg?react';
type IconAddressBookProps = TablerIconsProps;
front/src/modules/ui/display/icon/components/IconGoogle.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { useTheme } from '@emotion/react';
import { ReactComponent as IconGoogleRaw } from '../assets/google-icon.svg';
import IconGoogleRaw from '../assets/google-icon.svg?react';
interface IconGoogleProps {
size?: number;
front/src/modules/ui/display/icon/components/IconTwentyStar.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { TablerIconsProps } from '@/ui/display/icon';
import { ReactComponent as IconTwentyStarRaw } from '../assets/twenty-star.svg';
import IconTwentyStarRaw from '../assets/twenty-star.svg?react';
type IconTwentyStarProps = TablerIconsProps;
front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { TablerIconsProps } from '@/ui/display/icon';
import { ReactComponent as IconTwentyStarFilledRaw } from '../assets/twenty-star-filled.svg';
import IconTwentyStarFilledRaw from '../assets/twenty-star-filled.svg?react';
type IconTwentyStarFilledProps = TablerIconsProps;
front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { expect, fn, userEvent, within } from '@storybook/test';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
@@ -23,7 +22,7 @@ type Story = StoryObj<typeof Status>;
export const Default: Story = {
args: {
color: 'red',
onClick: jest.fn(),
onClick: fn(),
},
decorators: [ComponentDecorator],
play: async ({ canvasElement, args }) => {
front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { expect, fn, userEvent, within } from '@storybook/test';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
@@ -23,7 +22,7 @@ type Story = StoryObj<typeof Tag>;
export const Default: Story = {
args: {
color: 'red',
onClick: jest.fn(),
onClick: fn(),
},
decorators: [ComponentDecorator],
play: async ({ canvasElement, args }) => {
front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { userEvent, within } from '@storybook/test';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
front/src/modules/ui/input/button/components/Button.tsx
+6 -6
View File
@@ -142,8 +142,8 @@ const StyledButton = styled.button<
? theme.color.blue
: theme.background.transparent.light
: focus
? theme.color.blue
: 'transparent'
? theme.color.blue
: 'transparent'
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${
@@ -178,8 +178,8 @@ const StyledButton = styled.button<
? theme.color.blue
: theme.color.blue20
: focus
? theme.color.blue
: 'transparent'
? theme.color.blue
: 'transparent'
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${
@@ -210,8 +210,8 @@ const StyledButton = styled.button<
? theme.color.red
: theme.border.color.danger
: focus
? theme.color.red
: 'transparent'
? theme.color.red
: 'transparent'
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${
front/src/modules/ui/input/button/components/FloatingButton.tsx
+2 -2
View File
@@ -40,8 +40,8 @@ const StyledButton = styled.button<
focus ? `,0 0 0 3px ${theme.color.blue10}` : ''
}`
: focus
? `0 0 0 3px ${theme.color.blue10}`
: 'none'};
? `0 0 0 3px ${theme.color.blue10}`
: 'none'};
color: ${({ theme, disabled, focus }) => {
return !disabled
? focus
front/src/modules/ui/input/button/components/FloatingIconButton.tsx
+3 -5
View File
@@ -33,9 +33,7 @@ const StyledButton = styled.button<
align-items: center;
backdrop-filter: ${({ applyBlur }) => (applyBlur ? 'blur(20px)' : 'none')};
background: ${({ theme, isActive }) =>
!!isActive
? theme.background.transparent.medium
: theme.background.primary};
isActive ? theme.background.transparent.medium : theme.background.primary};
border: ${({ focus, theme }) =>
focus ? `1px solid ${theme.color.blue}` : 'transparent'};
border-radius: ${({ position, theme }) => {
@@ -56,8 +54,8 @@ const StyledButton = styled.button<
theme.background.transparent.medium
}${focus ? `,0 0 0 3px ${theme.color.blue10}` : ''}`
: focus
? `0 0 0 3px ${theme.color.blue10}`
: 'none'};
? `0 0 0 3px ${theme.color.blue10}`
: 'none'};
box-sizing: border-box;
color: ${({ theme, disabled, focus }) => {
return !disabled
front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx
+4 -4
View File
@@ -42,10 +42,10 @@ export const FloatingIconButtonGroup = ({
iconButtons.length === 1
? 'standalone'
: index === 0
? 'left'
: index === iconButtons.length - 1
? 'right'
: 'middle';
? 'left'
: index === iconButtons.length - 1
? 'right'
: 'middle';
return (
<FloatingIconButton
front/src/modules/ui/input/button/components/IconButton.tsx
+6 -6
View File
@@ -137,8 +137,8 @@ const StyledButton = styled.button<
? theme.color.blue
: theme.background.transparent.light
: focus
? theme.color.blue
: 'transparent'
? theme.color.blue
: 'transparent'
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${
@@ -173,8 +173,8 @@ const StyledButton = styled.button<
? theme.color.blue
: theme.color.blue20
: focus
? theme.color.blue
: 'transparent'
? theme.color.blue
: 'transparent'
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${
@@ -201,8 +201,8 @@ const StyledButton = styled.button<
variant === 'secondary'
? theme.border.color.danger
: focus
? theme.color.red
: 'transparent'
? theme.color.red
: 'transparent'
};
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
box-shadow: ${
front/src/modules/ui/input/button/components/IconButtonGroup.tsx
+2 -2
View File
@@ -34,8 +34,8 @@ export const IconButtonGroup = ({
index === 0
? 'left'
: index === iconButtons.length - 1
? 'right'
: 'middle';
? 'right'
: 'middle';
return (
<IconButton
front/src/modules/ui/input/button/components/LightButton.tsx
+4 -4
View File
@@ -33,14 +33,14 @@ const StyledButton = styled.button<
return active || focus
? theme.color.blue
: !disabled
? theme.font.color.secondary
: theme.font.color.extraLight;
? theme.font.color.secondary
: theme.font.color.extraLight;
case 'tertiary':
return active || focus
? theme.color.blue
: !disabled
? theme.font.color.tertiary
: theme.font.color.extraLight;
? theme.font.color.tertiary
: theme.font.color.extraLight;
}
}};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
front/src/modules/ui/input/button/components/LightIconButton.tsx
+4 -4
View File
@@ -38,14 +38,14 @@ const StyledButton = styled.button<
return active || focus
? theme.color.blue
: !disabled
? theme.font.color.secondary
: theme.font.color.extraLight;
? theme.font.color.secondary
: theme.font.color.extraLight;
case 'tertiary':
return active || focus
? theme.color.blue
: !disabled
? theme.font.color.tertiary
: theme.font.color.extraLight;
? theme.font.color.tertiary
: theme.font.color.extraLight;
}
}};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
front/src/modules/ui/input/button/components/RoundedIconButton.tsx
+3 -1
View File
@@ -19,7 +19,9 @@ const StyledIconButton = styled.button`
outline: none;
padding: 0;
transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
transition:
color 0.1s ease-in-out,
background 0.1s ease-in-out;
&:disabled {
background: ${({ theme }) => theme.background.quaternary};
front/src/modules/ui/input/button/components/__stories__/MainButton.stories.tsx
+2 -3
View File
@@ -1,13 +1,12 @@
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { expect, fn, userEvent, within } from '@storybook/test';
import { IconBrandGoogle } from '@/ui/display/icon';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { MainButton } from '../MainButton';
const clickJestFn = jest.fn();
const clickJestFn = fn();
const meta: Meta<typeof MainButton> = {
title: 'UI/Input/Button/MainButton',
front/src/modules/ui/input/button/components/__stories__/RoundedIconButton.stories.tsx
+2 -3
View File
@@ -1,13 +1,12 @@
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { expect, fn, userEvent, within } from '@storybook/test';
import { IconArrowRight } from '@/ui/display/icon';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { RoundedIconButton } from '../RoundedIconButton';
const clickJestFn = jest.fn();
const clickJestFn = fn();
const meta: Meta<typeof RoundedIconButton> = {
title: 'UI/Input/Button/RoundedIconButton',
front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import { expect } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { expect, userEvent, within } from '@storybook/test';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { sleep } from '~/testing/sleep';
front/src/modules/ui/input/components/__stories__/Select.stories.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { userEvent, within } from '@storybook/test';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import { expect } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { expect, userEvent, within } from '@storybook/test';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
+1 -2
View File
@@ -1,8 +1,7 @@
import { useState } from 'react';
import styled from '@emotion/styled';
import { expect } from '@storybook/jest';
import { Decorator, Meta, StoryObj } from '@storybook/react';
import { userEvent, waitFor, within } from '@storybook/testing-library';
import { expect, userEvent, waitFor, within } from '@storybook/test';
import { PlayFunction } from '@storybook/types';
import { Button } from '@/ui/input/button/components/Button';
front/src/modules/ui/layout/tab/components/Tab.tsx
+2 -2
View File
@@ -23,8 +23,8 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
active
? theme.font.color.primary
: disabled
? theme.font.color.light
: theme.font.color.secondary};
? theme.font.color.light
: theme.font.color.secondary};
cursor: pointer;
display: flex;
front/src/modules/ui/layout/tab/components/__stories__/Tablist.stories.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import { expect } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
import { expect, within } from '@storybook/test';
import { IconCheckbox } from '@/ui/display/icon';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
front/src/modules/ui/layout/table/components/TableCell.tsx
+2 -2
View File
@@ -14,8 +14,8 @@ const StyledTableCell = styled.div<TableCellProps>`
align === 'right'
? 'flex-end'
: align === 'center'
? 'center'
: 'flex-start'};
? 'center'
: 'flex-start'};
padding: 0 ${({ theme }) => theme.spacing(2)};
text-align: ${({ align }) => align ?? 'left'};
`;
front/src/modules/ui/layout/table/components/TableHeader.tsx
+2 -2
View File
@@ -11,8 +11,8 @@ const StyledTableHeader = styled.div<{ align?: 'left' | 'center' | 'right' }>`
align === 'right'
? 'flex-end'
: align === 'center'
? 'center'
: 'flex-start'};
? 'center'
: 'flex-start'};
padding: 0 ${({ theme }) => theme.spacing(2)};
text-align: ${({ align }) => align ?? 'left'};
`;
front/src/modules/ui/layout/table/components/TableSection.tsx
+2 -1
View File
@@ -32,7 +32,8 @@ const StyledSection = styled.div<{ isExpanded: boolean }>`
max-height: ${({ isExpanded }) => (isExpanded ? '1000px' : 0)};
opacity: ${({ isExpanded }) => (isExpanded ? 1 : 0)};
overflow: hidden;
transition: max-height ${({ theme }) => theme.animation.duration.normal}s,
transition:
max-height ${({ theme }) => theme.animation.duration.normal}s,
opacity ${({ theme }) => theme.animation.duration.normal}s;
`;
front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
@@ -18,7 +18,7 @@ const meta: Meta<typeof ContactLink> = {
export default meta;
type Story = StoryObj<typeof ContactLink>;
const clickJestFn = jest.fn();
const clickJestFn = fn();
export const Email: Story = {
args: {
front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
@@ -19,7 +18,7 @@ const meta: Meta<typeof RawLink> = {
export default meta;
type Story = StoryObj<typeof RawLink>;
const clickJestFn = jest.fn();
const clickJestFn = fn();
export const Default: Story = {
args: {
front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
@@ -18,7 +17,7 @@ const meta: Meta<typeof RoundedLink> = {
export default meta;
type Story = StoryObj<typeof RoundedLink>;
const clickJestFn = jest.fn();
const clickJestFn = fn();
export const Default: Story = {
args: {
front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
@@ -18,7 +17,7 @@ const meta: Meta<typeof SocialLink> = {
export default meta;
type Story = StoryObj<typeof SocialLink>;
const clickJestFn = jest.fn();
const clickJestFn = fn();
const linkedin: LinkType = LinkType.LinkedIn;
const twitter: LinkType = LinkType.Twitter;
front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+2 -2
View File
@@ -80,8 +80,8 @@ export const NavigationDrawer = ({
const desktopWidth = !isNavigationDrawerOpen
? 12
: isSubMenu
? desktopNavDrawerWidths.submenu
: desktopNavDrawerWidths.menu;
? desktopNavDrawerWidths.submenu
: desktopNavDrawerWidths.menu;
const mobileWidth = isNavigationDrawerOpen ? '100%' : 0;
front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx
+4 -4
View File
@@ -83,10 +83,10 @@ export const Catalog: CatalogStory<Story, typeof NavigationDrawerItem> = {
adornmentName === 'Soon Pill'
? { soon: true }
: adornmentName === 'Count'
? { count: 3 }
: adornmentName === 'Keyboard Keys'
? { keyboard: ['⌘', 'K'] }
: {},
? { count: 3 }
: adornmentName === 'Keyboard Keys'
? { keyboard: ['⌘', 'K'] }
: {},
},
],
},
front/src/modules/ui/navigation/step-bar/components/Step.tsx
+1 -1
View File
@@ -121,4 +121,4 @@ export const Step = ({
);
};
Step.displayName = 'StepBar/Step';
Step.displayName = 'StepBar';
front/src/modules/ui/theme/constants/effects.ts
+27 -30
View File
@@ -2,36 +2,33 @@ import { css } from '@emotion/react';
import { ThemeType } from './theme';
export const overlayBackground = (props: { theme: ThemeType }) =>
css`
backdrop-filter: blur(8px);
background: ${props.theme.background.transparent.secondary};
box-shadow: ${props.theme.boxShadow.strong};
`;
export const overlayBackground = (props: { theme: ThemeType }) => css`
backdrop-filter: blur(8px);
background: ${props.theme.background.transparent.secondary};
box-shadow: ${props.theme.boxShadow.strong};
`;
export const textInputStyle = (props: { theme: ThemeType }) =>
css`
background-color: transparent;
border: none;
color: ${props.theme.font.color.primary};
export const textInputStyle = (props: { theme: ThemeType }) => css`
background-color: transparent;
border: none;
color: ${props.theme.font.color.primary};
font-family: ${props.theme.font.family};
font-size: inherit;
font-weight: inherit;
outline: none;
padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
&::placeholder,
&::-webkit-input-placeholder {
color: ${props.theme.font.color.light};
font-family: ${props.theme.font.family};
font-size: inherit;
font-weight: inherit;
outline: none;
padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
font-weight: ${props.theme.font.weight.medium};
}
`;
&::placeholder,
&::-webkit-input-placeholder {
color: ${props.theme.font.color.light};
font-family: ${props.theme.font.family};
font-weight: ${props.theme.font.weight.medium};
}
`;
export const hoverBackground = (props: any) =>
css`
transition: background 0.1s ease;
&:hover {
background: ${props.theme.background.transparent.light};
}
`;
export const hoverBackground = (props: any) => css`
transition: background 0.1s ease;
&:hover {
background: ${props.theme.background.transparent.light};
}
`;
front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts
-1
View File
@@ -1,4 +1,3 @@
// eslint-disable-next-line no-restricted-imports
import { useHotkeys } from 'react-hotkeys-hook';
import {
HotkeyCallback,
front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts
+1 -2
View File
@@ -1,4 +1,3 @@
// eslint-disable-next-line no-restricted-imports
import { Options, useHotkeys } from 'react-hotkeys-hook';
import { Keys } from 'react-hotkeys-hook/dist/types';
import { useRecoilState } from 'recoil';
@@ -56,7 +55,7 @@ export const useSequenceHotkeys = (
setPendingHotkey(null);
if (!!options.preventDefault) {
if (options.preventDefault) {
keyboardEvent.stopImmediatePropagation();
keyboardEvent.stopPropagation();
keyboardEvent.preventDefault();