mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add rule to order css in styled components alphabetically (#284)

Browse Source 
* Add plugin

* Run plugin
This commit is contained in:
Félix Malfait
2023-06-14 07:59:16 +02:00
committed by GitHub
parent 830b76cd9a
commit eb8fc50ff1
72 changed files with 568 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
front/src/modules/ui/components/menu/DropdownMenu.tsx
View File

@ -1,20 +1,20 @@
import styled from '@emotion/styled';
export const DropdownMenu = styled.div`
width: 200px;
height: fit-content;
display: flex;
flex-direction: column;
align-items: center;
backdrop-filter: blur(20px);
background: ${(props) => props.theme.secondaryBackgroundTransparent};
border: 1px solid ${(props) => props.theme.lightBorder};
border-radius: calc(${(props) => props.theme.borderRadius} * 2);
box-shadow: ${(props) => props.theme.modalBoxShadow};
backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
height: fit-content;
width: 200px;
`;

20
front/src/modules/ui/components/menu/DropdownMenuButton.tsx
View File

@ -6,25 +6,25 @@ export const DropdownMenuButton = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)};
padding: var(--vertical-padding) var(--horizontal-padding);
align-items: center;
width: calc(100% - 2 * var(--horizontal-padding));
height: calc(32px - 2 * var(--vertical-padding));
border-radius: ${(props) => props.theme.borderRadius};
color: ${(props) => props.theme.text60};
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
font-size: ${(props) => props.theme.fontSizeSmall};
gap: ${(props) => props.theme.spacing(2)};
border-radius: ${(props) => props.theme.borderRadius};
height: calc(32px - 2 * var(--vertical-padding));
cursor: pointer;
user-select: none;
padding: var(--vertical-padding) var(--horizontal-padding);
${hoverBackground};
color: ${(props) => props.theme.text60};
font-size: ${(props) => props.theme.fontSizeSmall};
user-select: none;
width: calc(100% - 2 * var(--horizontal-padding));
`;

8
front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx
View File

@ -12,23 +12,23 @@ type Props = {
};
const DropdownMenuCheckableItemContainer = styled(DropdownMenuButton)`
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
`;
const StyledLeftContainer = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${(props) => props.theme.spacing(2)};
`;
const StyledChildrenContainer = styled.div`
font-size: ${(props) => props.theme.fontSizeSmall};
align-items: center;
display: flex;
align-items: center;
font-size: ${(props) => props.theme.fontSizeSmall};
gap: ${(props) => props.theme.spacing(2)};
`;

14
front/src/modules/ui/components/menu/DropdownMenuItem.tsx
View File

@ -4,19 +4,19 @@ export const DropdownMenuItem = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)};
padding: var(--vertical-padding) var(--horizontal-padding);
align-items: center;
width: calc(100% - 2 * var(--horizontal-padding));
height: calc(32px - 2 * var(--vertical-padding));
border-radius: ${(props) => props.theme.borderRadius};
color: ${(props) => props.theme.text60};
display: flex;
flex-direction: row;
align-items: center;
font-size: ${(props) => props.theme.fontSizeSmall};
gap: ${(props) => props.theme.spacing(2)};
border-radius: ${(props) => props.theme.borderRadius};
height: calc(32px - 2 * var(--vertical-padding));
color: ${(props) => props.theme.text60};
font-size: ${(props) => props.theme.fontSizeSmall};
padding: var(--vertical-padding) var(--horizontal-padding);
width: calc(100% - 2 * var(--horizontal-padding));
`;

12
front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx
View File

@ -3,12 +3,12 @@ import styled from '@emotion/styled';
export const DropdownMenuItemContainer = styled.div`
--padding: ${(props) => props.theme.spacing(1 / 2)};
width: calc(100% - 2 * var(--padding));
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding);
display: flex;
flex-direction: column;
gap: 2px;
height: 100%;
padding: var(--padding);
width: calc(100% - 2 * var(--padding));
`;

12
front/src/modules/ui/components/menu/DropdownMenuSearch.tsx
View File

@ -7,23 +7,23 @@ export const DropdownMenuSearchContainer = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(2)};
--vertical-padding: ${(props) => props.theme.spacing(1)};
width: calc(100% - 2 * var(--horizontal-padding));
height: calc(36px - 2 * var(--vertical-padding));
align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder};
display: flex;
flex-direction: row;
align-items: center;
height: calc(36px - 2 * var(--vertical-padding));
padding: var(--vertical-padding) var(--horizontal-padding);
border-bottom: 1px solid ${(props) => props.theme.lightBorder};
width: calc(100% - 2 * var(--horizontal-padding));
`;
const StyledEditModeSearchInput = styled.input`
width: 100%;
font-size: ${(props) => props.theme.fontSizeSmall};
${textInputStyle}
font-size: ${(props) => props.theme.fontSizeSmall};
width: 100%;
`;
export function DropdownMenuSearch(

4
front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
View File

@ -14,14 +14,14 @@ type Props = {
const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
${hoverBackground};
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
`;
const StyledLeftContainer = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${(props) => props.theme.spacing(2)};
`;

4
front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx
View File

@ -1,8 +1,8 @@
import styled from '@emotion/styled';
export const DropdownMenuSeparator = styled.div`
width: 100%;
background-color: ${(props) => props.theme.mediumBorder};
height: 1px;
background-color: ${(props) => props.theme.mediumBorder};
width: 100%;
`;

10
front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx
View File

@ -34,22 +34,22 @@ 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`
width: 100%;
height: 400px;
width: 100%;
`;
const FakeBelowContainer = styled.div`
width: 300px;
height: 600px;
position: relative;
width: 300px;
`;
const MenuAbsolutePositionWrapper = styled.div`
width: fit-content;
height: fit-content;
position: absolute;
width: fit-content;
`;
const FakeMenuItemList = () => (