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

Add styled component rule (#1261)

Browse Source 
* Add StyledComponent rule

* update doc

* update doc

* update doc
This commit is contained in:
Weiko
2023-08-17 20:58:02 -07:00
committed by GitHub
parent 390e70a196
commit 9b34a0ff3d
70 changed files with 433 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
docs/docs/developer/frontend/style-guide.mdx
View File

@ -100,3 +100,36 @@ type MyType = {
};
```
## Styling
### Use StyledComponents
Components should be styled with StyledComponents.
```tsx
// ❌ Bad
<div className="my-class">Hello World</div>
```
```tsx
// ✅ Good
const StyledTitle = styled.div`
color: red;
`;
```
Styled components should be prefixed with "Styled" to differentiate them from "real" components.
```tsx
// ❌ Bad
const Title = styled.div`
color: red;
`;
```
```tsx
// ✅ Good
const StyledTitle = styled.div`
color: red;
`;
```

1
front/.eslintrc.js
View File

@ -48,6 +48,7 @@ module.exports = {
'simple-import-sort/exports': 'error',
'twenty/sort-css-properties-alphabetically': 'error',
'twenty/no-hardcoded-colors': 'error',
'twenty/styled-components-prefixed-with-styled': 'error',
'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
"@typescript-eslint/no-unused-vars": "off",
"no-unused-vars": "off",

6
front/src/modules/activities/components/ActivityBodyEditor.tsx
View File

@ -10,7 +10,7 @@ import { Activity, useUpdateActivityMutation } from '~/generated/graphql';
import { ACTIVITY_UPDATE_FRAGMENT } from '../graphql/fragments/activityUpdateFragment';
const BlockNoteStyledContainer = styled.div`
const StyledBlockNoteStyledContainer = styled.div`
width: 100%;
`;
@ -70,8 +70,8 @@ export function ActivityBodyEditor({ activity, onChange }: OwnProps) {
});
return (
<BlockNoteStyledContainer>
<StyledBlockNoteStyledContainer>
<BlockEditor editor={editor} />
</BlockNoteStyledContainer>
</StyledBlockNoteStyledContainer>
);
}

10
front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx
View File

@ -15,7 +15,7 @@ const meta: Meta<typeof CommentChip> = {
export default meta;
type Story = StoryObj<typeof CommentChip>;
const TestCellContainer = styled.div`
const StyledTestCellContainer = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.primary};
display: flex;
@ -51,10 +51,10 @@ export const InCellDefault: Story = {
args: { count: 12 },
decorators: [
(Story) => (
<TestCellContainer>
<StyledTestCellContainer>
<StyledFakeCellText>Fake short text</StyledFakeCellText>
<Story />
</TestCellContainer>
</StyledTestCellContainer>
),
],
};
@ -63,12 +63,12 @@ export const InCellOverlappingBlur: Story = {
...InCellDefault,
decorators: [
(Story) => (
<TestCellContainer>
<StyledTestCellContainer>
<StyledFakeCellText>
Fake long text to demonstrate ellipsis
</StyledFakeCellText>
<Story />
</TestCellContainer>
</StyledTestCellContainer>
),
],
};

4
front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
const Separator = styled.div`
const StyledSeparator = styled.div`
background-color: ${({ theme }) => theme.border.color.medium};
height: 1px;
margin-bottom: ${({ theme }) => theme.spacing(3)};
@ -9,5 +9,5 @@ const Separator = styled.div`
`;
export function HorizontalSeparator(): JSX.Element {
return <Separator />;
return <StyledSeparator />;
}

6
front/src/modules/companies/__stories__/CompanyChip.stories.tsx
View File

@ -11,11 +11,11 @@ const meta: Meta<typeof CompanyChip> = {
component: CompanyChip,
decorators: [
(Story) => (
<TestCellContainer>
<StyledTestCellContainer>
<BrowserRouter>
<Story />
</BrowserRouter>
</TestCellContainer>
</StyledTestCellContainer>
),
ComponentDecorator,
],
@ -24,7 +24,7 @@ const meta: Meta<typeof CompanyChip> = {
export default meta;
type Story = StoryObj<typeof CompanyChip>;
const TestCellContainer = styled.div`
const StyledTestCellContainer = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.primary};
display: flex;

6
front/src/modules/people/components/__stories__/PeopleChip.stories.tsx
View File

@ -6,7 +6,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { PersonChip } from '../PersonChip';
const TestCellContainer = styled.div`
const StyledTestCellContainer = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.primary};
display: flex;
@ -22,11 +22,11 @@ const meta: Meta<typeof PersonChip> = {
component: PersonChip,
decorators: [
(Story) => (
<TestCellContainer>
<StyledTestCellContainer>
<BrowserRouter>
<Story />
</BrowserRouter>
</TestCellContainer>
</StyledTestCellContainer>
),
ComponentDecorator,
],

10
front/src/modules/spreadsheet-import/components/ContinueButton.tsx
View File

@ -4,7 +4,7 @@ import { MainButton } from '@/ui/button/components/MainButton';
import { Modal } from '@/ui/modal/components/Modal';
import { CircularProgressBar } from '@/ui/progress-bar/components/CircularProgressBar';
const Footer = styled(Modal.Footer)`
const StyledFooter = styled(Modal.Footer)`
height: 60px;
justify-content: center;
padding: 0px;
@ -12,7 +12,7 @@ const Footer = styled(Modal.Footer)`
padding-right: ${({ theme }) => theme.spacing(30)};
`;
const Button = styled(MainButton)`
const StyledButton = styled(MainButton)`
width: 200px;
`;
@ -27,11 +27,11 @@ export const ContinueButton = ({
title,
isLoading,
}: ContinueButtonProps) => (
<Footer>
<Button
<StyledFooter>
<StyledButton
icon={isLoading && <CircularProgressBar size={16} barWidth={2} />}
title={title}
onClick={!isLoading ? onContinue : undefined}
/>
</Footer>
</StyledFooter>
);

14
front/src/modules/spreadsheet-import/components/Heading.tsx
View File

@ -6,20 +6,20 @@ export type Props = React.ComponentProps<'div'> & {
description?: string;
};
const Container = styled.div`
const StyledContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
`;
const Title = styled.span`
const StyledTitle = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
text-align: center;
`;
const Description = styled.span`
const StyledDescription = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
@ -29,9 +29,9 @@ const Description = styled.span`
export function Heading({ title, description, ...props }: Props) {
return (
<Container {...props}>
<Title>{title}</Title>
{description && <Description>{description}</Description>}
</Container>
<StyledContainer {...props}>
<StyledTitle>{title}</StyledTitle>
{description && <StyledDescription>{description}</StyledDescription>}
</StyledContainer>
);
}

18
front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
View File

@ -25,7 +25,7 @@ import { AppTooltip } from '@/ui/tooltip/AppTooltip';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useUpdateEffect } from '~/hooks/useUpdateEffect';
const DropdownItem = styled.div`
const StyledDropdownItem = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.border.radius.sm};
@ -42,7 +42,7 @@ const DropdownItem = styled.div`
}
`;
const DropdownLabel = styled.span<{ isPlaceholder: boolean }>`
const StyledDropdownLabel = styled.span<{ isPlaceholder: boolean }>`
color: ${({ theme, isPlaceholder }) =>
isPlaceholder ? theme.font.color.tertiary : theme.font.color.primary};
display: flex;
@ -53,7 +53,7 @@ const DropdownLabel = styled.span<{ isPlaceholder: boolean }>`
padding-right: ${({ theme }) => theme.spacing(1)};
`;
const FloatingDropdown = styled.div`
const StyledFloatingDropdown = styled.div`
z-index: ${({ theme }) => theme.lastLayerZIndex};
`;
@ -147,7 +147,7 @@ export const MatchColumnSelect = ({
return (
<>
<DropdownItem
<StyledDropdownItem
id={name}
ref={(node) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@ -158,14 +158,14 @@ export const MatchColumnSelect = ({
onClick={handleDropdownItemClick}
>
{renderIcon(value?.icon)}
<DropdownLabel isPlaceholder={!value?.label}>
<StyledDropdownLabel isPlaceholder={!value?.label}>
{value?.label ?? placeholder}
</DropdownLabel>
</StyledDropdownLabel>
<IconChevronDown size={16} color={theme.font.color.tertiary} />
</DropdownItem>
</StyledDropdownItem>
{isOpen &&
createPortal(
<FloatingDropdown ref={refs.setFloating} style={floatingStyles}>
<StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}>
<DropdownMenu
ref={dropdownContainerRef}
width={dropdownItemRef.current?.clientWidth}
@ -210,7 +210,7 @@ export const MatchColumnSelect = ({
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
</FloatingDropdown>,
</StyledFloatingDropdown>,
document.body,
)}
</>

6
front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx
View File

@ -6,7 +6,7 @@ import { IconButton } from '@/ui/button/components/IconButton';
import { useDialog } from '@/ui/dialog/hooks/useDialog';
import { IconX } from '@/ui/icon/index';
const CloseButtonContainer = styled.div`
const StyledCloseButtonContainer = styled.div`
align-items: center;
aspect-ratio: 1;
display: flex;
@ -39,12 +39,12 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
return (
<>
<CloseButtonContainer>
<StyledCloseButtonContainer>
<IconButton
icon={<IconX size={16} color={theme.font.color.tertiary} />}
onClick={handleClose}
/>
</CloseButtonContainer>
</StyledCloseButtonContainer>
</>
);
};

36
front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import type { Columns } from '../MatchColumnsStep';
const GridContainer = styled.div`
const StyledGridContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
@ -12,7 +12,7 @@ const GridContainer = styled.div`
width: 100%;
`;
const Grid = styled.div`
const StyledGrid = styled.div`
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
box-sizing: border-box;
@ -26,7 +26,7 @@ type HeightProps = {
height?: `${number}px`;
};
const GridRow = styled.div<HeightProps>`
const StyledGridRow = styled.div<HeightProps>`
box-sizing: border-box;
display: flex;
flex-direction: row;
@ -37,7 +37,7 @@ type PositionProps = {
position: 'left' | 'right';
};
const GridCell = styled.div<PositionProps>`
const StyledGridCell = styled.div<PositionProps>`
align-items: center;
box-sizing: border-box;
display: flex;
@ -59,7 +59,7 @@ const GridCell = styled.div<PositionProps>`
}};
`;
const GridHeader = styled.div<PositionProps>`
const StyledGridHeader = styled.div<PositionProps>`
align-items: center;
background-color: ${({ theme }) => theme.background.tertiary};
box-sizing: border-box;
@ -98,29 +98,31 @@ export const ColumnGrid = <T extends string>({
}: ColumnGridProps<T>) => {
return (
<>
<GridContainer>
<Grid>
<GridRow height="29px">
<GridHeader position="left">Imported data</GridHeader>
<GridHeader position="right">Twenty fields</GridHeader>
</GridRow>
<StyledGridContainer>
<StyledGrid>
<StyledGridRow height="29px">
<StyledGridHeader position="left">Imported data</StyledGridHeader>
<StyledGridHeader position="right">Twenty fields</StyledGridHeader>
</StyledGridRow>
{columns.map((column, index) => {
const userColumn = renderUserColumn(columns, index);
const templateColumn = renderTemplateColumn(columns, index);
if (React.isValidElement(userColumn)) {
return (
<GridRow key={index}>
<GridCell position="left">{userColumn}</GridCell>
<GridCell position="right">{templateColumn}</GridCell>
</GridRow>
<StyledGridRow key={index}>
<StyledGridCell position="left">{userColumn}</StyledGridCell>
<StyledGridCell position="right">
{templateColumn}
</StyledGridCell>
</StyledGridRow>
);
}
return null;
})}
</Grid>
</GridContainer>
</StyledGrid>
</StyledGridContainer>
</>
);
};

10
front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx
View File

@ -11,12 +11,12 @@ import type {
MatchedSelectOptionsColumn,
} from '../MatchColumnsStep';
const Container = styled.div`
const StyledContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)};
`;
const SelectLabel = styled.span`
const StyledSelectLabel = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -40,8 +40,8 @@ export const SubMatchingSelect = <T extends string>({
const value = options.find((opt) => opt.value === option.value);
return (
<Container>
<SelectLabel>{option.entry}</SelectLabel>
<StyledContainer>
<StyledSelectLabel>{option.entry}</StyledSelectLabel>
<MatchColumnSelect
value={value}
placeholder="Select..."
@ -51,6 +51,6 @@ export const SubMatchingSelect = <T extends string>({
options={options}
name={option.entry}
/>
</Container>
</StyledContainer>
);
};

24
front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx
View File

@ -18,14 +18,14 @@ import { ColumnType } from '../MatchColumnsStep';
import { SubMatchingSelect } from './SubMatchingSelect';
const Container = styled.div`
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
min-height: 10px;
width: 100%;
`;
const AccordionButton = styled(ChakraAccordionButton)`
const StyledAccordionButton = styled(ChakraAccordionButton)`
align-items: center;
background-color: ${({ theme }) => theme.accent.secondary};
border: none;
@ -46,12 +46,12 @@ const AccordionButton = styled(ChakraAccordionButton)`
}
`;
const AccordionContainer = styled.div`
const StyledAccordionContainer = styled.div`
display: flex;
width: 100%;
`;
const AccordionLabel = styled.span`
const StyledAccordionLabel = styled.span`
color: ${({ theme }) => theme.font.color.primary};
display: flex;
flex: 1;
@ -123,7 +123,7 @@ export const TemplateColumn = <T extends string>({
);
return (
<Container>
<StyledContainer>
<MatchColumnSelect
placeholder="Select column..."
value={isIgnored ? ignoreValue : selectValue}
@ -132,15 +132,15 @@ export const TemplateColumn = <T extends string>({
name={column.header}
/>
{isSelect && (
<AccordionContainer>
<StyledAccordionContainer>
<Accordion allowMultiple width="100%">
<AccordionItem border="none" py={1}>
<AccordionButton data-testid="accordion-button">
<AccordionLabel>
<StyledAccordionButton data-testid="accordion-button">
<StyledAccordionLabel>
{getAccordionTitle<T>(fields, column)}
</AccordionLabel>
</StyledAccordionLabel>
<AccordionIcon as={IconChevronDown} />
</AccordionButton>
</StyledAccordionButton>
<AccordionPanel pb={4} pr={3} display="flex" flexDir="column">
{column.matchedOptions.map((option) => (
<SubMatchingSelect
@ -153,8 +153,8 @@ export const TemplateColumn = <T extends string>({
</AccordionPanel>
</AccordionItem>
</Accordion>
</AccordionContainer>
</StyledAccordionContainer>
)}
</Container>
</StyledContainer>
);
};

14
front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx
View File

@ -5,13 +5,13 @@ import { assertNotNull } from '~/utils/assert';
import type { Column } from '../MatchColumnsStep';
const Container = styled.div`
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
width: 100%;
`;
const Value = styled.span`
const StyledValue = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -20,7 +20,7 @@ const Value = styled.span`
white-space: nowrap;
`;
const Example = styled.span`
const StyledExample = styled.span`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -42,9 +42,9 @@ export const UserTableColumn = <T extends string>({
const entry = entries.find(assertNotNull);
return (
<Container>
<Value>{header}</Value>
{entry && <Example>{`ex: ${entry}`}</Example>}
</Container>
<StyledContainer>
<StyledValue>{header}</StyledValue>
{entry && <StyledExample>{`ex: ${entry}`}</StyledExample>}
</StyledContainer>
);
};

6
front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
View File

@ -12,7 +12,7 @@ const StyledHeading = styled(Heading)`
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
const TableContainer = styled.div`
const StyledTableContainer = styled.div`
display: flex;
flex-grow: 1;
height: 0px;
@ -42,13 +42,13 @@ export const SelectHeaderStep = ({ data, onContinue }: SelectHeaderProps) => {
<>
<Modal.Content>
<StyledHeading title="Select header row" />
<TableContainer>
<StyledTableContainer>
<SelectHeaderTable
data={data}
selectedRows={selectedRows}
setSelectedRows={setSelectedRows}
/>
</TableContainer>
</StyledTableContainer>
</Modal.Content>
<ContinueButton
onContinue={handleContinue}

12
front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
View File

@ -7,7 +7,7 @@ import { Radio } from '@/ui/input/radio/components/Radio';
import { RadioGroup } from '@/ui/input/radio/components/RadioGroup';
import { Modal } from '@/ui/modal/components/Modal';
const Content = styled(Modal.Content)`
const StyledContent = styled(Modal.Content)`
align-items: center;
`;
@ -15,7 +15,7 @@ const StyledHeading = styled(Heading)`
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
const RadioContainer = styled.div`
const StyledRadioContainer = styled.div`
display: flex;
flex-direction: column;
flex-grow: 1;
@ -46,16 +46,16 @@ export const SelectSheetStep = ({
return (
<>
<Content>
<StyledContent>
<StyledHeading title="Select the sheet to use" />
<RadioContainer>
<StyledRadioContainer>
<RadioGroup onValueChange={(value) => setValue(value)} value={value}>
{sheetNames.map((sheetName) => (
<Radio value={sheetName} key={sheetName} />
))}
</RadioGroup>
</RadioContainer>
</Content>
</StyledRadioContainer>
</StyledContent>
<ContinueButton
isLoading={isLoading}
onContinue={() => handleOnContinue(value)}

6
front/src/modules/spreadsheet-import/steps/components/Steps.tsx
View File

@ -8,7 +8,7 @@ import { useStepBar } from '@/ui/step-bar/hooks/useStepBar';
import { UploadFlow } from './UploadFlow';
const Header = styled(Modal.Header)`
const StyledHeader = styled(Modal.Header)`
background-color: ${({ theme }) => theme.background.secondary};
border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
height: 60px;
@ -36,13 +36,13 @@ export const Steps = () => {
return (
<>
<Header>
<StyledHeader>
<StepBar activeStep={activeStep}>
{steps.map((key) => (
<StepBar.Step label={stepTitles[key]} key={key} />
))}
</StepBar>
</Header>
</StyledHeader>
<UploadFlow nextStep={nextStep} />
</>
);

6
front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
View File

@ -17,7 +17,7 @@ import { SelectSheetStep } from './SelectSheetStep/SelectSheetStep';
import { UploadStep } from './UploadStep/UploadStep';
import { ValidationStep } from './ValidationStep/ValidationStep';
const ProgressBarContainer = styled(Modal.Content)`
const StyledProgressBarContainer = styled(Modal.Content)`
align-items: center;
display: flex;
justify-content: center;
@ -209,13 +209,13 @@ export const UploadFlow = ({ nextStep }: Props) => {
case StepType.loading:
default:
return (
<ProgressBarContainer>
<StyledProgressBarContainer>
<CircularProgressBar
size={80}
barWidth={8}
barColor={theme.font.color.primary}
/>
</ProgressBarContainer>
</StyledProgressBarContainer>
);
}
};

6
front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx
View File

@ -6,7 +6,7 @@ import { Modal } from '@/ui/modal/components/Modal';
import { DropZone } from './components/DropZone';
const Content = styled(Modal.Content)`
const StyledContent = styled(Modal.Content)`
padding: ${({ theme }) => theme.spacing(6)};
`;
@ -27,8 +27,8 @@ export const UploadStep = ({ onContinue }: UploadProps) => {
);
return (
<Content>
<StyledContent>
<DropZone onContinue={handleOnContinue} isLoading={isLoading} />
</Content>
</StyledContent>
);
};

22
front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx
View File

@ -8,7 +8,7 @@ import { readFileAsync } from '@/spreadsheet-import/utils/readFilesAsync';
import { MainButton } from '@/ui/button/components/MainButton';
import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
const Container = styled.div`
const StyledContainer = styled.div`
align-items: center;
background: ${({ theme }) => `
repeating-linear-gradient(
@ -55,7 +55,7 @@ const Container = styled.div`
position: relative;
`;
const Overlay = styled.div`
const StyledOverlay = styled.div`
background: ${({ theme }) => theme.background.transparent.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
bottom: 0px;
@ -65,14 +65,14 @@ const Overlay = styled.div`
top: 0px;
`;
const Text = styled.span`
const StyledText = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
text-align: center;
`;
const Button = styled(MainButton)`
const StyledButton = styled(MainButton)`
margin-top: ${({ theme }) => theme.spacing(2)};
width: 200px;
`;
@ -125,19 +125,19 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
});
return (
<Container {...getRootProps()}>
{isDragActive && <Overlay />}
<StyledContainer {...getRootProps()}>
{isDragActive && <StyledOverlay />}
<input {...getInputProps()} />
{isDragActive ? (
<Text>Drop file here...</Text>
<StyledText>Drop file here...</StyledText>
) : loading || isLoading ? (
<Text>Processing...</Text>
<StyledText>Processing...</StyledText>
) : (
<>
<Text>Upload .xlsx, .xls or .csv file</Text>
<Button onClick={open} title="Select file" />
<StyledText>Upload .xlsx, .xls or .csv file</StyledText>
<StyledButton onClick={open} title="Select file" />
</>
)}
</Container>
</StyledContainer>
);
};

16
front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx
View File

@ -5,21 +5,21 @@ import styled from '@emotion/styled';
import type { Fields } from '@/spreadsheet-import/types';
import { AppTooltip } from '@/ui/tooltip/AppTooltip';
const HeaderContainer = styled.div`
const StyledHeaderContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
position: relative;
`;
const HeaderLabel = styled.span`
const StyledHeaderLabel = styled.span`
display: flex;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
`;
const DefaultContainer = styled.div`
const StyledDefaultContainer = styled.div`
min-height: 100%;
min-width: 100%;
overflow: hidden;
@ -33,8 +33,10 @@ export const generateColumns = <T extends string>(fields: Fields<T>) =>
name: column.label,
minWidth: 150,
headerRenderer: () => (
<HeaderContainer>
<HeaderLabel id={`${column.key}`}>{column.label}</HeaderLabel>
<StyledHeaderContainer>
<StyledHeaderLabel id={`${column.key}`}>
{column.label}
</StyledHeaderLabel>
{column.description &&
createPortal(
<AppTooltip
@ -44,10 +46,10 @@ export const generateColumns = <T extends string>(fields: Fields<T>) =>
/>,
document.body,
)}
</HeaderContainer>
</StyledHeaderContainer>
),
formatter: ({ row }) => (
<DefaultContainer>{row[column.key]}</DefaultContainer>
<StyledDefaultContainer>{row[column.key]}</StyledDefaultContainer>
),
}),
);

30
front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
View File

@ -17,7 +17,7 @@ import { Modal } from '@/ui/modal/components/Modal';
import { generateColumns } from './components/columns';
import type { Meta } from './types';
const Toolbar = styled.div`
const StyledToolbar = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
@ -25,20 +25,20 @@ const Toolbar = styled.div`
margin-top: ${({ theme }) => theme.spacing(8)};
`;
const ErrorToggle = styled.div`
const StyledErrorToggle = styled.div`
align-items: center;
display: flex;
flex-direction: row;
`;
const ErrorToggleDescription = styled.span`
const StyledErrorToggleDescription = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
margin-left: ${({ theme }) => theme.spacing(2)};
`;
const ScrollContainer = styled.div`
const StyledScrollContainer = styled.div`
display: flex;
flex-direction: column;
flex-grow: 1;
@ -46,7 +46,7 @@ const ScrollContainer = styled.div`
width: 100%;
`;
const NoRowsContainer = styled.div`
const StyledNoRowsContainer = styled.div`
display: flex;
grid-column: 1/-1;
justify-content: center;
@ -188,16 +188,16 @@ export const ValidationStep = <T extends string>({
title="Review your import"
description="Correct the issues and fill the missing data."
/>
<Toolbar>
<ErrorToggle>
<StyledToolbar>
<StyledErrorToggle>
<Toggle
value={filterByErrors}
onChange={() => setFilterByErrors(!filterByErrors)}
/>
<ErrorToggleDescription>
<StyledErrorToggleDescription>
Show only rows with errors
</ErrorToggleDescription>
</ErrorToggle>
</StyledErrorToggleDescription>
</StyledErrorToggle>
<Button
icon={<IconTrash />}
title="Remove"
@ -205,8 +205,8 @@ export const ValidationStep = <T extends string>({
onClick={deleteSelectedRows}
disabled={selectedRows.size === 0}
/>
</Toolbar>
<ScrollContainer>
</StyledToolbar>
<StyledScrollContainer>
<Table
rowKeyGetter={rowKeyGetter}
rows={tableData}
@ -216,15 +216,15 @@ export const ValidationStep = <T extends string>({
onSelectedRowsChange={setSelectedRows}
components={{
noRowsFallback: (
<NoRowsContainer>
<StyledNoRowsContainer>
{filterByErrors
? 'No data containing errors'
: 'No data found'}
</NoRowsContainer>
</StyledNoRowsContainer>
),
}}
/>
</ScrollContainer>
</StyledScrollContainer>
</Modal.Content>
<ContinueButton onContinue={onContinue} title="Confirm" />
</>

38
front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
View File

@ -14,21 +14,21 @@ import { AppTooltip } from '@/ui/tooltip/AppTooltip';
import type { Meta } from '../types';
const HeaderContainer = styled.div`
const StyledHeaderContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
position: relative;
`;
const HeaderLabel = styled.span`
const StyledHeaderLabel = styled.span`
display: flex;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
`;
const CheckboxContainer = styled.div`
const StyledCheckboxContainer = styled.div`
align-items: center;
box-sizing: content-box;
display: flex;
@ -39,13 +39,13 @@ const CheckboxContainer = styled.div`
width: 100%;
`;
const ToggleContainer = styled.div`
const StyledToggleContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
`;
const InputContainer = styled.div`
const StyledInputContainer = styled.div`
align-items: center;
display: flex;
min-height: 100%;
@ -53,7 +53,7 @@ const InputContainer = styled.div`
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const DefaultContainer = styled.div`
const StyledDefaultContainer = styled.div`
min-height: 100%;
min-width: 100%;
overflow: hidden;
@ -79,7 +79,7 @@ export const generateColumns = <T extends string>(
const [isRowSelected, onRowSelectionChange] = useRowSelection();
return (
<CheckboxContainer>
<StyledCheckboxContainer>
<Checkbox
aria-label="Select"
checked={isRowSelected}
@ -92,7 +92,7 @@ export const generateColumns = <T extends string>(
});
}}
/>
</CheckboxContainer>
</StyledCheckboxContainer>
);
},
},
@ -103,8 +103,10 @@ export const generateColumns = <T extends string>(
minWidth: 150,
resizable: true,
headerRenderer: () => (
<HeaderContainer>
<HeaderLabel id={`${column.key}`}>{column.label}</HeaderLabel>
<StyledHeaderContainer>
<StyledHeaderLabel id={`${column.key}`}>
{column.label}
</StyledHeaderLabel>
{column.description &&
createPortal(
<AppTooltip
@ -114,7 +116,7 @@ export const generateColumns = <T extends string>(
/>,
document.body,
)}
</HeaderContainer>
</StyledHeaderContainer>
),
editable: column.fieldType.type !== 'checkbox',
editor: ({ row, onRowChange, onClose }) => {
@ -158,7 +160,7 @@ export const generateColumns = <T extends string>(
);
}
return <InputContainer>{component}</InputContainer>;
return <StyledInputContainer>{component}</StyledInputContainer>;
},
editorOptions: {
editOnClick: true,
@ -170,7 +172,7 @@ export const generateColumns = <T extends string>(
switch (column.fieldType.type) {
case 'checkbox':
component = (
<ToggleContainer
<StyledToggleContainer
id={`${columnKey}-${row.__index}`}
onClick={(event) => {
event.stopPropagation();
@ -185,23 +187,23 @@ export const generateColumns = <T extends string>(
});
}}
/>
</ToggleContainer>
</StyledToggleContainer>
);
break;
case 'select':
component = (
<DefaultContainer id={`${columnKey}-${row.__index}`}>
<StyledDefaultContainer id={`${columnKey}-${row.__index}`}>
{column.fieldType.options.find(
(option) => option.value === row[columnKey as T],
)?.label || null}
</DefaultContainer>
</StyledDefaultContainer>
);
break;
default:
component = (
<DefaultContainer id={`${columnKey}-${row.__index}`}>
<StyledDefaultContainer id={`${columnKey}-${row.__index}`}>
{row[columnKey]}
</DefaultContainer>
</StyledDefaultContainer>
);
}

12
front/src/modules/ui/button/components/DropdownButton.tsx
View File

@ -65,11 +65,11 @@ const StyledDropdownItem = styled.button<ButtonProps>`
}
`;
const DropdownContainer = styled.div`
const StyledDropdownContainer = styled.div`
position: relative;
`;
const DropdownMenu = styled.div`
const StyledDropdownMenu = styled.div`
display: flex;
flex-direction: column;
position: absolute;
@ -112,7 +112,7 @@ export function DropdownButton({
return (
<>
{selectedOption && (
<DropdownContainer>
<StyledDropdownContainer>
<StyledButton
onClick={() => setIsOpen(!isOpen)}
{...buttonProps}
@ -123,7 +123,7 @@ export function DropdownButton({
{options.length > 1 && <IconChevronDown />}
</StyledButton>
{isOpen && (
<DropdownMenu>
<StyledDropdownMenu>
{options
.filter((option) => option.label !== selectedOption.label)
.map((option, index) => (
@ -135,9 +135,9 @@ export function DropdownButton({
{option.label}
</StyledDropdownItem>
))}
</DropdownMenu>
</StyledDropdownMenu>
)}
</DropdownContainer>
</StyledDropdownContainer>
)}
</>
);

22
front/src/modules/ui/color-scheme/components/ColorSchemePicker.tsx
View File

@ -13,12 +13,12 @@ const StyledContainer = styled.div`
}
`;
const CardContainer = styled.div`
const StyledCardContainer = styled.div`
display: flex;
flex-direction: column;
`;
const Label = styled.span`
const StyledLabel = styled.span`
color: ${({ theme }) => theme.font.color.secondary};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -33,30 +33,30 @@ export type ColorSchemePickerProps = {
export function ColorSchemePicker({ value, onChange }: ColorSchemePickerProps) {
return (
<StyledContainer>
<CardContainer>
<StyledCardContainer>
<ColorSchemeCard
onClick={() => onChange(ColorScheme.Light)}
variant="light"
selected={value === ColorScheme.Light}
/>
<Label>Light</Label>
</CardContainer>
<CardContainer>
<StyledLabel>Light</StyledLabel>
</StyledCardContainer>
<StyledCardContainer>
<ColorSchemeCard
onClick={() => onChange(ColorScheme.Dark)}
variant="dark"
selected={value === ColorScheme.Dark}
/>
<Label>Dark</Label>
</CardContainer>
<CardContainer>
<StyledLabel>Dark</StyledLabel>
</StyledCardContainer>
<StyledCardContainer>
<ColorSchemeCard
onClick={() => onChange(ColorScheme.System)}
variant="system"
selected={value === ColorScheme.System}
/>
<Label>System settings</Label>
</CardContainer>
<StyledLabel>System settings</StyledLabel>
</StyledCardContainer>
</StyledContainer>
);
}

6
front/src/modules/ui/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
View File

@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { ColorSchemeCard } from '../ColorSchemeCard';
const Container = styled.div`
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
> * + * {
@ -18,9 +18,9 @@ const meta: Meta<typeof ColorSchemeCard> = {
component: ColorSchemeCard,
decorators: [
(Story) => (
<Container>
<StyledContainer>
<Story />
</Container>
</StyledContainer>
),
ComponentDecorator,
],

24
front/src/modules/ui/dialog/components/Dialog.tsx
View File

@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
import { Button, ButtonVariant } from '@/ui/button/components/Button';
const DialogOverlay = styled(motion.div)`
const StyledDialogOverlay = styled(motion.div)`
align-items: center;
background: ${({ theme }) => theme.background.overlay};
display: flex;
@ -17,7 +17,7 @@ const DialogOverlay = styled(motion.div)`
z-index: 9999;
`;
const DialogContainer = styled(motion.div)`
const StyledDialogContainer = styled(motion.div)`
background: ${({ theme }) => theme.background.primary};
border-radius: 8px;
display: flex;
@ -28,7 +28,7 @@ const DialogContainer = styled(motion.div)`
width: 100%;
`;
const DialogTitle = styled.span`
const StyledDialogTitle = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
@ -36,7 +36,7 @@ const DialogTitle = styled.span`
text-align: center;
`;
const DialogMessage = styled.span`
const StyledDialogMessage = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
@ -44,7 +44,7 @@ const DialogMessage = styled.span`
text-align: center;
`;
const DialogButton = styled(Button)`
const StyledDialogButton = styled(Button)`
justify-content: center;
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
@ -87,7 +87,7 @@ export function Dialog({
};
return (
<DialogOverlay
<StyledDialogOverlay
variants={dialogVariants}
initial="closed"
animate="open"
@ -99,16 +99,16 @@ export function Dialog({
}
}}
>
<DialogContainer
<StyledDialogContainer
variants={containerVariants}
transition={{ damping: 15, stiffness: 100 }}
{...rootProps}
>
{title && <DialogTitle>{title}</DialogTitle>}
{message && <DialogMessage>{message}</DialogMessage>}
{title && <StyledDialogTitle>{title}</StyledDialogTitle>}
{message && <StyledDialogMessage>{message}</StyledDialogMessage>}
{children}
{buttons.map((button) => (
<DialogButton
<StyledDialogButton
key={button.title}
onClick={(e) => {
button?.onClick?.(e);
@ -119,7 +119,7 @@ export function Dialog({
{...button}
/>
))}
</DialogContainer>
</DialogOverlay>
</StyledDialogContainer>
</StyledDialogOverlay>
);
}

1
front/src/modules/ui/dropdown/components/DropdownMenu.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
export const DropdownMenu = styled.div<{

6
front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx
View File

@ -11,7 +11,7 @@ type Props = {
id?: string;
};
const DropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
const StyledDropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
align-items: center;
display: flex;
justify-content: space-between;
@ -42,11 +42,11 @@ export function DropdownMenuCheckableItem({
}
return (
<DropdownMenuCheckableItemContainer onClick={handleClick}>
<StyledDropdownMenuCheckableItemContainer onClick={handleClick}>
<StyledLeftContainer>
<Checkbox checked={checked} />
<StyledChildrenContainer>{children}</StyledChildrenContainer>
</StyledLeftContainer>
</DropdownMenuCheckableItemContainer>
</StyledDropdownMenuCheckableItemContainer>
);
}

6
front/src/modules/ui/dropdown/components/DropdownMenuInput.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/theme/constants/effects';
export const DropdownMenuInputContainer = styled.div`
const StyledDropdownMenuInputContainer = styled.div`
--vertical-padding: ${({ theme }) => theme.spacing(1)};
align-items: center;
@ -28,7 +28,7 @@ export const DropdownMenuInput = forwardRef<
HTMLInputElement,
InputHTMLAttributes<HTMLInputElement>
>((props, ref) => (
<DropdownMenuInputContainer>
<StyledDropdownMenuInputContainer>
<StyledInput autoComplete="off" placeholder="Search" {...props} ref={ref} />
</DropdownMenuInputContainer>
</StyledDropdownMenuInputContainer>
));

1
front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
export const DropdownMenuItemsContainer = styled.div<{

6
front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx
View File

@ -13,7 +13,7 @@ type Props = React.ComponentProps<'li'> & {
disabled?: boolean;
};
const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<
const StyledDropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<
Pick<Props, 'hovered'>
>`
${hoverBackground};
@ -72,7 +72,7 @@ export function DropdownMenuSelectableItem({
}, [hovered]);
return (
<DropdownMenuSelectableItemContainer
<StyledDropdownMenuSelectableItemContainer
{...restProps}
onClick={handleClick}
hovered={hovered}
@ -82,6 +82,6 @@ export function DropdownMenuSelectableItem({
<StyledRightIcon>
{selected && <IconCheck size={theme.icon.size.md} />}
</StyledRightIcon>
</DropdownMenuSelectableItemContainer>
</StyledDropdownMenuSelectableItemContainer>
);
}

1
front/src/modules/ui/dropdown/components/DropdownMenuSeparator.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
export const DropdownMenuSeparator = styled.div`

1
front/src/modules/ui/dropdown/components/DropdownMenuSubheader.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
export const DropdownMenuSubheader = styled.div`

16
front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -43,19 +43,19 @@ const FakeContentBelow = () => (
const avatarUrl =
'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';
const FakeMenuContent = styled.div`
const StyledFakeMenuContent = styled.div`
height: 400px;
width: 100%;
`;
const FakeBelowContainer = styled.div`
const StyledFakeBelowContainer = styled.div`
height: 600px;
position: relative;
width: 300px;
`;
const MenuAbsolutePositionWrapper = styled.div`
const StyledMenuAbsolutePositionWrapper = styled.div`
height: fit-content;
position: absolute;
@ -157,7 +157,7 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
export const Empty: Story = {
render: (args) => (
<DropdownMenu {...args}>
<FakeMenuContent />
<StyledFakeMenuContent />
</DropdownMenu>
),
};
@ -166,12 +166,12 @@ export const WithContentBelow: Story = {
...Empty,
decorators: [
(Story) => (
<FakeBelowContainer>
<StyledFakeBelowContainer>
<FakeContentBelow />
<MenuAbsolutePositionWrapper>
<StyledMenuAbsolutePositionWrapper>
<Story />
</MenuAbsolutePositionWrapper>
</FakeBelowContainer>
</StyledMenuAbsolutePositionWrapper>
</StyledFakeBelowContainer>
),
],
};

6
front/src/modules/ui/editable-field/components/EditableField.tsx
View File

@ -50,7 +50,7 @@ const StyledEditButtonContainer = styled(motion.div)`
right: 0;
`;
export const EditableFieldBaseContainer = styled.div`
export const StyledEditableFieldBaseContainer = styled.div`
align-items: center;
box-sizing: border-box;
@ -114,7 +114,7 @@ export function EditableField({
const showEditButton = !isFieldInEditMode && isHovered && useEditButton;
return (
<EditableFieldBaseContainer
<StyledEditableFieldBaseContainer
onMouseEnter={handleContainerMouseEnter}
onMouseLeave={handleContainerMouseLeave}
>
@ -151,6 +151,6 @@ export function EditableField({
<EditableFieldEditButton />
</StyledEditButtonContainer>
)}
</EditableFieldBaseContainer>
</StyledEditableFieldBaseContainer>
);
}

12
front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
export const EditableFieldNormalModeOuterContainer = styled.div<
const StyledEditableFieldNormalModeOuterContainer = styled.div<
Pick<
OwnProps,
| 'disableClick'
@ -51,7 +51,7 @@ export const EditableFieldNormalModeOuterContainer = styled.div<
}}
`;
export const EditableFieldNormalModeInnerContainer = styled.div`
const StyledEditableFieldNormalModeInnerContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.primary};
font-size: 'inherit';
@ -82,16 +82,16 @@ export function EditableFieldDisplayMode({
isDisplayModeFixHeight,
}: React.PropsWithChildren<OwnProps>) {
return (
<EditableFieldNormalModeOuterContainer
<StyledEditableFieldNormalModeOuterContainer
onClick={disableClick ? undefined : onClick}
disableClick={disableClick}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
disableHoverEffect={disableHoverEffect}
isDisplayModeFixHeight={isDisplayModeFixHeight}
>
<EditableFieldNormalModeInnerContainer>
<StyledEditableFieldNormalModeInnerContainer>
{children}
</EditableFieldNormalModeInnerContainer>
</EditableFieldNormalModeOuterContainer>
</StyledEditableFieldNormalModeInnerContainer>
</StyledEditableFieldNormalModeOuterContainer>
);
}

6
front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
export const EditableFieldEditModeContainer = styled.div<OwnProps>`
const StyledEditableFieldEditModeContainer = styled.div<OwnProps>`
align-items: center;
display: flex;
@ -33,11 +33,11 @@ export function EditableFieldEditMode({
useRegisterCloseFieldHandlers(wrapperRef, onSubmit, onCancel);
return (
<EditableFieldEditModeContainer
<StyledEditableFieldEditModeContainer
data-testid="editable-field-edit-mode-container"
ref={wrapperRef}
>
{children}
</EditableFieldEditModeContainer>
</StyledEditableFieldEditModeContainer>
);
}

6
front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx
View File

@ -19,7 +19,7 @@ import {
FieldRelationValue,
} from '../types/FieldMetadata';
const RelationPickerContainer = styled.div`
const StyledRelationPickerContainer = styled.div`
left: 0px;
position: absolute;
top: -8px;
@ -116,13 +116,13 @@ export function GenericEditableRelationFieldEditMode() {
}
return (
<RelationPickerContainer>
<StyledRelationPickerContainer>
<RelationPicker
fieldDefinition={currentEditableFieldDefinition}
fieldValue={fieldValue}
handleEntitySubmit={handleSubmit}
handleCancel={handleCancel}
/>
</RelationPickerContainer>
</StyledRelationPickerContainer>
);
}

30
front/src/modules/ui/input/image/components/ImageInput.tsx
View File

@ -5,12 +5,12 @@ import styled from '@emotion/styled';
import { Button, ButtonVariant } from '@/ui/button/components/Button';
import { IconFileUpload, IconTrash, IconUpload } from '@/ui/icon';
const Container = styled.div`
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
`;
const Picture = styled.button<{ withPicture: boolean }>`
const StyledPicture = styled.button<{ withPicture: boolean }>`
align-items: center;
background: ${({ theme, disabled }) =>
disabled ? theme.background.secondary : theme.background.tertiary};
@ -46,7 +46,7 @@ const Picture = styled.button<{ withPicture: boolean }>`
}};
`;
const Content = styled.div`
const StyledContent = styled.div`
display: flex;
flex: 1;
flex-direction: column;
@ -54,7 +54,7 @@ const Content = styled.div`
margin-left: ${({ theme }) => theme.spacing(4)};
`;
const ButtonContainer = styled.div`
const StyledButtonContainer = styled.div`
display: flex;
flex-direction: row;
> * + * {
@ -62,7 +62,7 @@ const ButtonContainer = styled.div`
}
`;
const Text = styled.span`
const StyledText = styled.span`
color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
`;
@ -92,8 +92,8 @@ export function ImageInput({
};
return (
<Container {...restProps}>
<Picture
<StyledContainer {...restProps}>
<StyledPicture
withPicture={!!picture}
disabled={disabled}
onClick={onUploadButtonClick}
@ -106,9 +106,9 @@ export function ImageInput({
) : (
<IconFileUpload size={theme.icon.size.md} />
)}
</Picture>
<Content>
<ButtonContainer>
</StyledPicture>
<StyledContent>
<StyledButtonContainer>
<StyledHiddenFileInput
type="file"
ref={hiddenFileInput}
@ -136,11 +136,11 @@ export function ImageInput({
disabled={!picture || disabled}
fullWidth
/>
</ButtonContainer>
<Text>
</StyledButtonContainer>
<StyledText>
We support your best PNGs, JPEGs and GIFs portraits under 10MB
</Text>
</Content>
</Container>
</StyledText>
</StyledContent>
</StyledContainer>
);
}

16
front/src/modules/ui/input/radio/components/Radio.tsx
View File

@ -16,7 +16,7 @@ export enum LabelPosition {
Right = 'right',
}
const Container = styled.div<{ labelPosition?: LabelPosition }>`
const StyledContainer = styled.div<{ labelPosition?: LabelPosition }>`
${({ labelPosition }) =>
labelPosition === LabelPosition.Left
? `
@ -33,7 +33,7 @@ type RadioInputProps = {
'radio-size'?: RadioSize;
};
const RadioInput = styled(motion.input)<RadioInputProps>`
const StyledRadioInput = styled(motion.input)<RadioInputProps>`
-webkit-appearance: none;
appearance: none;
background-color: transparent;
@ -86,7 +86,7 @@ type LabelProps = {
labelPosition?: LabelPosition;
};
const Label = styled.label<LabelProps>`
const StyledLabel = styled.label<LabelProps>`
color: ${({ theme }) => theme.font.color.primary};
cursor: pointer;
font-size: ${({ theme }) => theme.font.size.sm};
@ -126,8 +126,8 @@ export function Radio({
}
return (
<Container {...restProps} labelPosition={labelPosition}>
<RadioInput
<StyledContainer {...restProps} labelPosition={labelPosition}>
<StyledRadioInput
type="radio"
id="input-radio"
name="input-radio"
@ -142,15 +142,15 @@ export function Radio({
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
/>
{value && (
<Label
<StyledLabel
htmlFor="input-radio"
labelPosition={labelPosition}
disabled={disabled}
>
{value}
</Label>
</StyledLabel>
)}
</Container>
</StyledContainer>
);
}

17
front/src/modules/ui/input/text/components/TextInputContainer.tsx
View File

@ -1,17 +0,0 @@
import styled from '@emotion/styled';
import { overlayBackground } from '@/ui/theme/constants/effects';
export const TextInputContainer = styled.div`
align-items: center;
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
margin-left: -1px;
min-height: 32px;
width: inherit;
${overlayBackground}
z-index: 10;
`;

1
front/src/modules/ui/input/text/components/TextInputDisplay.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
export const TextInputDisplay = styled.div`

25
front/src/modules/ui/input/text/components/TextInputEdit.tsx
View File

@ -1,15 +1,28 @@
import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/theme/constants/effects';
import { overlayBackground } from '@/ui/theme/constants/effects';
import { TextInputContainer } from './TextInputContainer';
const InplaceInputTextInput = styled.input`
const StyledInplaceInputTextInput = styled.input`
margin: 0;
width: 100%;
${textInputStyle}
`;
const StyledTextInputContainer = styled.div`
align-items: center;
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
margin-left: -1px;
min-height: 32px;
width: inherit;
${overlayBackground}
z-index: 10;
`;
export type TextInputEditProps = {
placeholder?: string;
value?: string;
@ -24,14 +37,14 @@ export function TextInputEdit({
autoFocus,
}: TextInputEditProps) {
return (
<TextInputContainer>
<InplaceInputTextInput
<StyledTextInputContainer>
<StyledInplaceInputTextInput
autoComplete="off"
autoFocus={autoFocus}
placeholder={placeholder}
value={value}
onChange={(e) => onChange?.(e.target.value)}
/>
</TextInputContainer>
</StyledTextInputContainer>
);
}

10
front/src/modules/ui/input/toggle/components/Toggle.tsx
View File

@ -7,7 +7,7 @@ type ContainerProps = {
color?: string;
};
const Container = styled.div<ContainerProps>`
const StyledContainer = styled.div<ContainerProps>`
align-items: center;
background-color: ${({ theme, isOn, color }) =>
isOn ? color ?? theme.color.blue : theme.background.quaternary};
@ -19,7 +19,7 @@ const Container = styled.div<ContainerProps>`
width: 32px;
`;
const Circle = styled(motion.div)`
const StyledCircle = styled(motion.div)`
background-color: #fff;
border-radius: 50%;
height: 16px;
@ -56,8 +56,8 @@ export function Toggle({ value, onChange, color }: ToggleProps) {
}, [value]);
return (
<Container onClick={handleChange} isOn={isOn} color={color}>
<Circle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
</Container>
<StyledContainer onClick={handleChange} isOn={isOn} color={color}>
<StyledCircle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
</StyledContainer>
);
}

6
front/src/modules/ui/layout/components/DefaultLayout.tsx
View File

@ -37,7 +37,7 @@ const StyledLayout = styled.div`
const NAVBAR_WIDTH = '236px';
const MainContainer = styled.div`
const StyledMainContainer = styled.div`
display: flex;
flex-direction: row;
overflow: hidden;
@ -63,7 +63,7 @@ export function DefaultLayout({ children }: OwnProps) {
<NavbarAnimatedContainer>
<AppNavbar />
</NavbarAnimatedContainer>
<MainContainer>
<StyledMainContainer>
{onboardingStatus && onboardingStatus !== OnboardingStatus.Completed ? (
<>
<CompaniesMockMode />
@ -76,7 +76,7 @@ export function DefaultLayout({ children }: OwnProps) {
) : (
<>{children}</>
)}
</MainContainer>
</StyledMainContainer>
</StyledLayout>
);
}

1
front/src/modules/ui/layout/components/ShowPageContainer.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

32
front/src/modules/ui/layout/page-bar/components/PageBar.tsx
View File

@ -14,7 +14,7 @@ import { isNavbarOpenedState } from '../../states/isNavbarOpenedState';
export const PAGE_BAR_MIN_HEIGHT = 40;
const TopBarContainer = styled.div`
const StyledTopBarContainer = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.noisy};
color: ${({ theme }) => theme.font.color.primary};
@ -35,18 +35,18 @@ const StyledLeftContainer = styled.div`
width: 100%;
`;
const TitleContainer = styled.div`
const StyledTitleContainer = styled.div`
display: flex;
font-size: ${({ theme }) => theme.font.size.md};
margin-left: ${({ theme }) => theme.spacing(1)};
max-width: 50%;
`;
const TopBarButtonContainer = styled.div`
const StyledTopBarButtonContainer = styled.div`
margin-right: ${({ theme }) => theme.spacing(1)};
`;
const BackIconButton = styled(IconButton)`
const StyledBackIconButton = styled(IconButton)`
margin-right: ${({ theme }) => theme.spacing(1)};
`;
@ -58,7 +58,7 @@ const StyledTopBarIconTitleContainer = styled.div`
width: 100%;
`;
const ActionButtonsContainer = styled.div`
const StyledActionButtonsContainer = styled.div`
display: inline-flex;
gap: ${({ theme }) => theme.spacing(2)};
`;
@ -91,29 +91,29 @@ export function PageBar({
return (
<>
<TopBarContainer>
<StyledTopBarContainer>
<StyledLeftContainer>
{!isNavbarOpened && (
<TopBarButtonContainer>
<StyledTopBarButtonContainer>
<NavCollapseButton direction="right" />
</TopBarButtonContainer>
</StyledTopBarButtonContainer>
)}
{hasBackButton && (
<TopBarButtonContainer>
<BackIconButton
<StyledTopBarButtonContainer>
<StyledBackIconButton
icon={<IconChevronLeft size={iconSize} />}
onClick={navigateBack}
/>
</TopBarButtonContainer>
</StyledTopBarButtonContainer>
)}
<StyledTopBarIconTitleContainer>
{icon}
<TitleContainer data-testid="top-bar-title">
<StyledTitleContainer data-testid="top-bar-title">
<OverflowingTextWithTooltip text={title} />
</TitleContainer>
</StyledTitleContainer>
</StyledTopBarIconTitleContainer>
</StyledLeftContainer>
<ActionButtonsContainer>
<StyledActionButtonsContainer>
{onFavoriteButtonClick && (
<IconButton
icon={<IconHeart size={16} />}
@ -134,8 +134,8 @@ export function PageBar({
variant="border"
/>
)}
</ActionButtonsContainer>
</TopBarContainer>
</StyledActionButtonsContainer>
</StyledTopBarContainer>
</>
);
}

1
front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

1
front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import styled from '@emotion/styled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

12
front/src/modules/ui/modal/components/Modal.tsx
View File

@ -7,7 +7,7 @@ import {
useListenClickOutside,
} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
const ModalDiv = styled(motion.div)`
const StyledModalDiv = styled(motion.div)`
display: flex;
flex-direction: column;
background: ${({ theme }) => theme.background.primary};
@ -43,7 +43,7 @@ const StyledFooter = styled.div`
padding: ${({ theme }) => theme.spacing(5)};
`;
const BackDrop = styled(motion.div)`
const StyledBackDrop = styled(motion.div)`
align-items: center;
background: ${({ theme }) => theme.background.overlay};
display: flex;
@ -111,8 +111,8 @@ export function Modal({
}
return (
<BackDrop>
<ModalDiv
<StyledBackDrop>
<StyledModalDiv
// framer-motion seems to have typing problems with refs
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
@ -125,8 +125,8 @@ export function Modal({
{...restProps}
>
{children}
</ModalDiv>
</BackDrop>
</StyledModalDiv>
</StyledBackDrop>
);
}

6
front/src/modules/ui/navbar/components/NavBackButton.tsx
View File

@ -9,7 +9,7 @@ type OwnProps = {
title: string;
};
const IconAndButtonContainer = styled.button`
const StyledIconAndButtonContainer = styled.button`
align-items: center;
background: inherit;
border: none;
@ -39,7 +39,7 @@ export default function NavBackButton({ title }: OwnProps) {
return (
<>
<StyledContainer>
<IconAndButtonContainer
<StyledIconAndButtonContainer
onClick={() => {
setIsNavbarSwitchingSize(true);
navigate('/', { replace: true });
@ -47,7 +47,7 @@ export default function NavBackButton({ title }: OwnProps) {
>
<IconChevronLeft />
<span>{title}</span>
</IconAndButtonContainer>
</StyledIconAndButtonContainer>
</StyledContainer>
</>
);

10
front/src/modules/ui/navbar/components/NavCollapseButton.tsx
View File

@ -10,7 +10,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { navbarIconSize } from '../constants';
const CollapseButton = styled.button`
const StyledCollapseButton = styled.button`
align-items: center;
background: inherit;
border: 0;
@ -48,13 +48,13 @@ export default function NavCollapseButton({
return (
<>
{direction === 'left' ? (
<CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<IconLayoutSidebarLeftCollapse size={iconSize} />
</CollapseButton>
</StyledCollapseButton>
) : (
<CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
<IconLayoutSidebarRightCollapse size={iconSize} />
</CollapseButton>
</StyledCollapseButton>
)}
</>
);

6
front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx
View File

@ -21,7 +21,7 @@ const StyledContainer = styled.div`
user-select: none;
`;
const LogoAndNameContainer = styled.div`
const StyledLogoAndNameContainer = styled.div`
align-items: center;
display: flex;
`;
@ -56,7 +56,7 @@ function NavWorkspaceButton() {
return (
<StyledContainer>
<LogoAndNameContainer>
<StyledLogoAndNameContainer>
<StyledLogo
logo={
currentWorkspace?.logo
@ -65,7 +65,7 @@ function NavWorkspaceButton() {
}
></StyledLogo>
<StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
</LogoAndNameContainer>
</StyledLogoAndNameContainer>
<NavCollapseButton direction="left" />
</StyledContainer>
);

10
front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx
View File

@ -10,14 +10,14 @@ import { RightDrawerPages } from '../types/RightDrawerPages';
import { RightDrawerTopBar } from './RightDrawerTopBar';
const RightDrawerPage = styled.div`
const StyledRightDrawerPage = styled.div`
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
`;
const RightDrawerBody = styled.div`
const StyledRightDrawerBody = styled.div`
display: flex;
flex-direction: column;
height: calc(
@ -47,9 +47,9 @@ export function RightDrawerRouter() {
}
return (
<RightDrawerPage>
<StyledRightDrawerPage>
<RightDrawerTopBar />
<RightDrawerBody>{page}</RightDrawerBody>
</RightDrawerPage>
<StyledRightDrawerBody>{page}</StyledRightDrawerBody>
</StyledRightDrawerPage>
);
}

6
front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx
View File

@ -24,7 +24,7 @@ const StyledRightDrawerTopBar = styled.div`
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const TopBarWrapper = styled.div`
const StyledTopBarWrapper = styled.div`
display: flex;
`;
@ -34,10 +34,10 @@ export function RightDrawerTopBar() {
return (
<StyledRightDrawerTopBar>
<TopBarWrapper>
<StyledTopBarWrapper>
<RightDrawerTopBarCloseButton />
{!isMobile && <RightDrawerTopBarExpandButton />}
</TopBarWrapper>
</StyledTopBarWrapper>
<ActivityActionBar activityId={activityId ?? ''} />
</StyledRightDrawerTopBar>
);

12
front/src/modules/ui/snack-bar/components/SnackBar.tsx
View File

@ -51,7 +51,7 @@ const StyledIconContainer = styled.div`
margin-right: ${({ theme }) => theme.spacing(2)};
`;
const ProgressBarContainer = styled.div`
const StyledProgressBarContainer = styled.div`
height: 5px;
left: 0;
position: absolute;
@ -59,7 +59,7 @@ const ProgressBarContainer = styled.div`
top: 0;
`;
const CloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
const StyledCloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
align-items: center;
background-color: transparent;
border: none;
@ -162,20 +162,20 @@ export function SnackBar({
variant={variant}
{...rootProps}
>
<ProgressBarContainer>
<StyledProgressBarContainer>
<ProgressBar
ref={progressBarRef}
barHeight={5}
barColor={rgba(theme.grayScale.gray0, 0.3)}
duration={duration}
/>
</ProgressBarContainer>
</StyledProgressBarContainer>
{icon && <StyledIconContainer>{icon}</StyledIconContainer>}
{children ? children : message}
{allowDismiss && (
<CloseButton variant={variant} onClick={closeSnackbar}>
<StyledCloseButton variant={variant} onClick={closeSnackbar}>
<IconX aria-label="Close" size={theme.icon.size.md} />
</CloseButton>
</StyledCloseButton>
)}
</StyledMotionContainer>
);

12
front/src/modules/ui/snack-bar/components/SnackBarProvider.tsx
View File

@ -6,7 +6,7 @@ import { snackBarInternalState } from '../states/snackBarState';
import { SnackBar } from './SnackBar';
const SnackBarContainer = styled.div`
const StyledSnackBarContainer = styled.div`
display: flex;
flex-direction: column;
position: fixed;
@ -15,7 +15,7 @@ const SnackBarContainer = styled.div`
z-index: 99999999;
`;
const SnackBarMotionContainer = styled(motion.div)`
const StyledSnackBarMotionContainer = styled(motion.div)`
margin-right: ${({ theme }) => theme.spacing(3)};
margin-top: ${({ theme }) => theme.spacing(3)};
`;
@ -68,9 +68,9 @@ export function SnackBarProvider({ children }: React.PropsWithChildren) {
return (
<>
{children}
<SnackBarContainer>
<StyledSnackBarContainer>
{snackBarState.queue.map((snackBar) => (
<SnackBarMotionContainer
<StyledSnackBarMotionContainer
key={snackBar.id}
variants={reducedMotion ? reducedVariants : variants}
initial="initial"
@ -83,9 +83,9 @@ export function SnackBarProvider({ children }: React.PropsWithChildren) {
{...snackBar}
onClose={() => handleSnackBarClose(snackBar.id)}
/>
</SnackBarMotionContainer>
</StyledSnackBarMotionContainer>
))}
</SnackBarContainer>
</StyledSnackBarContainer>
</>
);
}

24
front/src/modules/ui/step-bar/components/Step.tsx
View File

@ -4,13 +4,13 @@ import { motion } from 'framer-motion';
import { AnimatedCheckmark } from '@/ui/checkmark/components/AnimatedCheckmark';
const Container = styled.div<{ isLast: boolean }>`
const StyledContainer = styled.div<{ isLast: boolean }>`
align-items: center;
display: flex;
flex-grow: ${({ isLast }) => (isLast ? '0' : '1')};
`;
const StepCircle = styled(motion.div)`
const StyledStepCircle = styled(motion.div)`
align-items: center;
border-radius: 50%;
border-style: solid;
@ -25,13 +25,13 @@ const StepCircle = styled(motion.div)`
width: 20px;
`;
const StepIndex = styled.span`
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 StepLabel = styled.span<{ isActive: boolean }>`
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};
@ -40,7 +40,7 @@ const StepLabel = styled.span<{ isActive: boolean }>`
white-space: nowrap;
`;
const StepLine = styled(motion.div)`
const StyledStepLine = styled(motion.div)`
height: 2px;
margin-left: ${({ theme }) => theme.spacing(2)};
margin-right: ${({ theme }) => theme.spacing(2)};
@ -90,8 +90,8 @@ export const Step = ({
};
return (
<Container isLast={isLast}>
<StepCircle
<StyledContainer isLast={isLast}>
<StyledStepCircle
variants={variantsCircle}
animate={isActive ? 'active' : 'inactive'}
>
@ -101,17 +101,17 @@ export const Step = ({
color={theme.grayScale.gray0}
/>
)}
{!isActive && <StepIndex>{index + 1}</StepIndex>}
</StepCircle>
<StepLabel isActive={isActive}>{label}</StepLabel>
{!isActive && <StyledStepIndex>{index + 1}</StyledStepIndex>}
</StyledStepCircle>
<StyledStepLabel isActive={isActive}>{label}</StyledStepLabel>
{!isLast && (
<StepLine
<StyledStepLine
variants={variantsLine}
animate={isActive ? 'active' : 'inactive'}
/>
)}
{isActive && children}
</Container>
</StyledContainer>
);
};

6
front/src/modules/ui/step-bar/components/StepBar.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { Step, StepProps } from './Step';
const Container = styled.div`
const StyledContainer = styled.div`
display: flex;
flex: 1;
justify-content: space-between;
@ -16,7 +16,7 @@ export type StepsProps = React.PropsWithChildren &
export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
return (
<Container {...restProps}>
<StyledContainer {...restProps}>
{React.Children.map(children, (child, index) => {
if (!React.isValidElement(child)) {
return null;
@ -35,7 +35,7 @@ export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
isLast: index === React.Children.count(children) - 1,
});
})}
</Container>
</StyledContainer>
);
};

6
front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx
View File

@ -27,7 +27,7 @@ const StyledEditableCellDisplayModeOuterContainer = styled.div<
: ''}
`;
const EditableCellDisplayModeInnerContainer = styled.div`
const StyledEditableCellDisplayModeInnerContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
@ -52,9 +52,9 @@ export function EditableCellDisplayContainer({
softFocus={softFocus}
ref={scrollRef}
>
<EditableCellDisplayModeInnerContainer>
<StyledEditableCellDisplayModeInnerContainer>
{children}
</EditableCellDisplayModeInnerContainer>
</StyledEditableCellDisplayModeInnerContainer>
</StyledEditableCellDisplayModeOuterContainer>
);
}

1
front/src/modules/ui/tooltip/AppTooltip.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable twenty/styled-components-prefixed-with-styled */
import { Tooltip } from 'react-tooltip';
import styled from '@emotion/styled';

6
front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx
View File

@ -7,7 +7,7 @@ const StyledContainer = styled(motion.div)`
overflow: hidden;
`;
const Word = styled(motion.span)`
const StyledWord = styled(motion.span)`
white-space: pre;
`;
@ -61,9 +61,9 @@ export function AnimatedTextWord({ text = '', ...restProps }: Props) {
{...restProps}
>
{words.map((word, index) => (
<Word variants={childAnimation} key={index}>
<StyledWord variants={childAnimation} key={index}>
{word}
</Word>
</StyledWord>
))}
</StyledContainer>
);

14
front/src/modules/workspace/components/WorkspaceMemberCard.tsx
View File

@ -14,7 +14,7 @@ const StyledContainer = styled.div`
padding: ${({ theme }) => theme.spacing(3)};
`;
const Content = styled.div`
const StyledContent = styled.div`
display: flex;
flex: 1;
flex-direction: column;
@ -22,11 +22,11 @@ const Content = styled.div`
margin-left: ${({ theme }) => theme.spacing(3)};
`;
const NameText = styled.span`
const StyledNameText = styled.span`
color: ${({ theme }) => theme.font.color.primary};
`;
const EmailText = styled.span`
const StyledEmailText = styled.span`
color: ${({ theme }) => theme.font.color.tertiary};
`;
@ -50,10 +50,10 @@ export function WorkspaceMemberCard({ workspaceMember, accessory }: OwnProps) {
type="squared"
size="xl"
/>
<Content>
<NameText>{workspaceMember.user.displayName}</NameText>
<EmailText>{workspaceMember.user.email}</EmailText>
</Content>
<StyledContent>
<StyledNameText>{workspaceMember.user.displayName}</StyledNameText>
<StyledEmailText>{workspaceMember.user.email}</StyledEmailText>
</StyledContent>
{accessory}
</StyledContainer>

6
front/src/pages/settings/SettingsWorkspaceMembers.tsx
View File

@ -30,7 +30,7 @@ const StyledContainer = styled.div`
width: 350px;
`;
const ButtonContainer = styled.div`
const StyledButtonContainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
@ -109,7 +109,7 @@ export function SettingsWorkspaceMembers() {
workspaceMember={{ user: member.user }}
accessory={
currentUser?.id !== member.user.id && (
<ButtonContainer>
<StyledButtonContainer>
<Button
onClick={() => {
setIsConfirmationModalOpen(true);
@ -119,7 +119,7 @@ export function SettingsWorkspaceMembers() {
size={ButtonSize.Small}
icon={<IconTrash size={theme.icon.size.md} />}
/>
</ButtonContainer>
</StyledButtonContainer>
)
}
/>

2
front/yarn.lock
View File

@ -9722,7 +9722,7 @@ eslint-plugin-testing-library@^5.0.1:
"@typescript-eslint/utils" "^5.58.0"
"eslint-plugin-twenty@file:../packages/eslint-plugin-twenty":
version "0.0.1"
version "0.0.2"
dependencies:
postcss "^8.4.24"

2
packages/eslint-plugin-twenty/index.js
View File

@ -1,10 +1,12 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const noHardcodedColors = require('./rules/no-hardcoded-colors');
const cssAlphabetically = require('./rules/sort-css-properties-alphabetically');
const styledComponentsPrefixedWithStyled = require('./rules/styled-components-prefixed-with-styled');
module.exports = {
rules: {
'no-hardcoded-colors': noHardcodedColors,
'sort-css-properties-alphabetically': cssAlphabetically,
'styled-components-prefixed-with-styled': styledComponentsPrefixedWithStyled,
},
};

2
packages/eslint-plugin-twenty/package.json
View File

@ -1,6 +1,6 @@
{
"name": "eslint-plugin-twenty",
"version": "0.0.1",
"version": "0.0.2",
"main": "index.js",
"dependencies": {
"postcss": "^8.4.24"

32
packages/eslint-plugin-twenty/rules/styled-components-prefixed-with-styled.js Normal file
View File

@ -0,0 +1,32 @@
module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'Warn when StyledComponents are not prefixed with Styled',
},
recommended: true,
fixable: 'code',
schema: [],
},
create: function(context) {
return {
VariableDeclarator: node => {
const templateExpr = node.init
if (templateExpr?.type !== 'TaggedTemplateExpression') {
return;
}
const tag = templateExpr.tag
const tagged = tag.type === 'MemberExpression' ? tag.object
: tag.type === 'CallExpression' ? tag.callee
: null
if (tagged?.name === 'styled') {
const variable = node.id;
if (variable?.name.startsWith('Styled')) {
return;
}
context.report({ node, message: `'${variable.name}' is a StyledComponent and is not prefixed with Styled.` });
}
},
}
}
};