Move frontend to Vite 5 (#2775)
* 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
co-authored by
Charles Bochet
Charles Bochet
parent
f24541beda
commit
a70a9281eb
@@ -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: ${
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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: ${
|
||||
|
||||
@@ -34,8 +34,8 @@ export const IconButtonGroup = ({
|
||||
index === 0
|
||||
? 'left'
|
||||
: index === iconButtons.length - 1
|
||||
? 'right'
|
||||
: 'middle';
|
||||
? 'right'
|
||||
: 'middle';
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
|
||||
@@ -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')};
|
||||
|
||||
@@ -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')};
|
||||
|
||||
@@ -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};
|
||||
|
||||
@@ -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',
|
||||
|
||||
+2
-3
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user