Skip to content
This repository was archived by the owner on Mar 15, 2024. It is now read-only.

Commit db1ba80

Browse files
benoitgrelardbenoitgrelard
authored
Upgrade Primitives + Stitches (#379)
* Upgrade Primitives + Stitches * Upgrade deps * Remove banner
1 parent 6025f2e commit db1ba80

12 files changed

+1040
-894
lines changed

‎components/AlertDialog.tsx

+33-19
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from 'react';
2-
import { styled } from '../stitches.config';
2+
import { styled, CSS } from '../stitches.config';
33
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
44
import { overlayStyles } from './Overlay';
55
import { panelStyles } from './Panel';
66

7-
type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root> & {
8-
children: React.ReactNode;
9-
};
7+
const AlertDialog = AlertDialogPrimitive.Root;
8+
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
109

1110
const StyledOverlay = styled(AlertDialogPrimitive.Overlay, overlayStyles, {
1211
position: 'fixed',
@@ -16,16 +15,7 @@ const StyledOverlay = styled(AlertDialogPrimitive.Overlay, overlayStyles, {
1615
left: 0,
1716
});
1817

19-
export function AlertDialog({ children, ...props }: AlertDialogProps) {
20-
return (
21-
<AlertDialogPrimitive.Root {...props}>
22-
<StyledOverlay />
23-
{children}
24-
</AlertDialogPrimitive.Root>
25-
);
26-
}
27-
28-
export const AlertDialogContent = styled(AlertDialogPrimitive.Content, panelStyles, {
18+
export const StyledContent = styled(AlertDialogPrimitive.Content, panelStyles, {
2919
position: 'fixed',
3020
top: '50%',
3121
left: '50%',
@@ -40,8 +30,32 @@ export const AlertDialogContent = styled(AlertDialogPrimitive.Content, panelStyl
4030
},
4131
});
4232

43-
export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
44-
export const AlertDialogTitle = AlertDialogPrimitive.Title;
45-
export const AlertDialogDescription = AlertDialogPrimitive.Description;
46-
export const AlertDialogAction = AlertDialogPrimitive.Action;
47-
export const AlertDialogCancel = AlertDialogPrimitive.Cancel;
33+
type AlertDialogContentPrimitiveProps = React.ComponentProps<typeof AlertDialogPrimitive.Content>;
34+
type AlertDialogContentProps = AlertDialogContentPrimitiveProps & { css?: CSS };
35+
36+
const AlertDialogContent = React.forwardRef<
37+
React.ElementRef<typeof StyledContent>,
38+
AlertDialogContentProps
39+
>(({ children, ...props }, forwardedRef) => (
40+
<AlertDialogPrimitive.Portal>
41+
<StyledOverlay />
42+
<StyledContent {...props} ref={forwardedRef}>
43+
{children}
44+
</StyledContent>
45+
</AlertDialogPrimitive.Portal>
46+
));
47+
48+
const AlertDialogTitle = AlertDialogPrimitive.Title;
49+
const AlertDialogDescription = AlertDialogPrimitive.Description;
50+
const AlertDialogAction = AlertDialogPrimitive.Action;
51+
const AlertDialogCancel = AlertDialogPrimitive.Cancel;
52+
53+
export {
54+
AlertDialog,
55+
AlertDialogTrigger,
56+
AlertDialogContent,
57+
AlertDialogTitle,
58+
AlertDialogDescription,
59+
AlertDialogAction,
60+
AlertDialogCancel,
61+
};

‎components/ContextMenu.tsx

+53-30
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,58 @@ import { Box } from './Box';
77
import { Flex } from './Flex';
88
import { panelStyles } from './Panel';
99

10-
export const ContextMenu = ContextMenuPrimitive.Root;
11-
export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
10+
const ContextMenu = ContextMenuPrimitive.Root;
11+
const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
1212

13-
export const ContextMenuContent = styled(ContextMenuPrimitive.Content, menuCss, panelStyles);
13+
const StyledContent = styled(ContextMenuPrimitive.Content, menuCss, panelStyles);
1414

15-
export const ContextMenuSeparator = styled(ContextMenuPrimitive.Separator, separatorCss);
15+
type ContextMenuContentPrimitiveProps = React.ComponentProps<typeof ContextMenuPrimitive.Content>;
16+
type ContextMenuContentProps = ContextMenuContentPrimitiveProps & { css?: CSS };
1617

17-
export const ContextMenuItem = styled(ContextMenuPrimitive.Item, itemCss);
18+
const ContextMenuContent = React.forwardRef<
19+
React.ElementRef<typeof StyledContent>,
20+
ContextMenuContentProps
21+
>((props, forwardedRef) => (
22+
<ContextMenuPrimitive.Portal>
23+
<StyledContent {...props} ref={forwardedRef} />
24+
</ContextMenuPrimitive.Portal>
25+
));
26+
27+
const ContextMenuItem = styled(ContextMenuPrimitive.Item, itemCss);
28+
const ContextMenuGroup = styled(ContextMenuPrimitive.Group, {});
29+
const ContextMenuLabel = styled(ContextMenuPrimitive.Label, labelCss);
30+
const ContextMenuSeparator = styled(ContextMenuPrimitive.Separator, separatorCss);
31+
32+
const StyledContextMenuCheckboxItem = styled(ContextMenuPrimitive.CheckboxItem, itemCss);
33+
34+
type ContextMenuCheckboxItemPrimitiveProps = React.ComponentProps<
35+
typeof ContextMenuPrimitive.CheckboxItem
36+
>;
37+
type ContextMenuCheckboxItemProps = ContextMenuCheckboxItemPrimitiveProps & { css?: CSS };
38+
39+
const ContextMenuCheckboxItem = React.forwardRef<
40+
React.ElementRef<typeof StyledContextMenuCheckboxItem>,
41+
ContextMenuCheckboxItemProps
42+
>(({ children, ...props }, forwardedRef) => (
43+
<StyledContextMenuCheckboxItem {...props} ref={forwardedRef}>
44+
<Box as="span" css={{ position: 'absolute', left: '$1' }}>
45+
<ContextMenuPrimitive.ItemIndicator>
46+
<CheckIcon />
47+
</ContextMenuPrimitive.ItemIndicator>
48+
</Box>
49+
{children}
50+
</StyledContextMenuCheckboxItem>
51+
));
1852

53+
const ContextMenuRadioGroup = styled(ContextMenuPrimitive.RadioGroup, {});
1954
const StyledContextMenuRadioItem = styled(ContextMenuPrimitive.RadioItem, itemCss);
2055

2156
type ContextMenuRadioItemPrimitiveProps = React.ComponentProps<
2257
typeof ContextMenuPrimitive.RadioItem
2358
>;
2459
type ContextMenuRadioItemProps = ContextMenuRadioItemPrimitiveProps & { css?: CSS };
2560

26-
export const ContextMenuRadioItem = React.forwardRef<
61+
const ContextMenuRadioItem = React.forwardRef<
2762
React.ElementRef<typeof StyledContextMenuRadioItem>,
2863
ContextMenuRadioItemProps
2964
>(({ children, ...props }, forwardedRef) => (
@@ -46,27 +81,15 @@ export const ContextMenuRadioItem = React.forwardRef<
4681
</StyledContextMenuRadioItem>
4782
));
4883

49-
const StyledContextMenuCheckboxItem = styled(ContextMenuPrimitive.CheckboxItem, itemCss);
50-
51-
type ContextMenuCheckboxItemPrimitiveProps = React.ComponentProps<
52-
typeof ContextMenuPrimitive.CheckboxItem
53-
>;
54-
type ContextMenuCheckboxItemProps = ContextMenuCheckboxItemPrimitiveProps & { css?: CSS };
55-
56-
export const ContextMenuCheckboxItem = React.forwardRef<
57-
React.ElementRef<typeof StyledContextMenuCheckboxItem>,
58-
ContextMenuCheckboxItemProps
59-
>(({ children, ...props }, forwardedRef) => (
60-
<StyledContextMenuCheckboxItem {...props} ref={forwardedRef}>
61-
<Box as="span" css={{ position: 'absolute', left: '$1' }}>
62-
<ContextMenuPrimitive.ItemIndicator>
63-
<CheckIcon />
64-
</ContextMenuPrimitive.ItemIndicator>
65-
</Box>
66-
{children}
67-
</StyledContextMenuCheckboxItem>
68-
));
69-
70-
export const ContextMenuLabel = styled(ContextMenuPrimitive.Label, labelCss);
71-
export const ContextMenuRadioGroup = styled(ContextMenuPrimitive.RadioGroup, {});
72-
export const ContextMenuGroup = styled(ContextMenuPrimitive.Group, {});
84+
export {
85+
ContextMenu,
86+
ContextMenuTrigger,
87+
ContextMenuContent,
88+
ContextMenuItem,
89+
ContextMenuGroup,
90+
ContextMenuLabel,
91+
ContextMenuSeparator,
92+
ContextMenuCheckboxItem,
93+
ContextMenuRadioGroup,
94+
ContextMenuRadioItem,
95+
};

‎components/DesignSystemProvider.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
import React from 'react';
2-
import { IdProvider } from '@radix-ui/react-id';
2+
import { TooltipProvider } from '@radix-ui/react-tooltip';
33

4-
export const DesignSystemProvider: React.FC = ({ children }) => <IdProvider>{children}</IdProvider>;
4+
type TooltipProviderProps = React.ComponentProps<typeof TooltipProvider>;
5+
interface DesignSystemProviderProps extends TooltipProviderProps {}
6+
7+
export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = (props) => {
8+
return <TooltipProvider {...props} />;
9+
};

‎components/Dialog.tsx

+22-29
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import { overlayStyles } from './Overlay';
66
import { panelStyles } from './Panel';
77
import { IconButton } from './IconButton';
88

9-
type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {
10-
children: React.ReactNode;
11-
};
9+
const Dialog = DialogPrimitive.Root;
10+
const DialogTrigger = DialogPrimitive.Trigger;
1211

1312
const StyledOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {
1413
position: 'fixed',
@@ -18,15 +17,6 @@ const StyledOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {
1817
left: 0,
1918
});
2019

21-
export function Dialog({ children, ...props }: DialogProps) {
22-
return (
23-
<DialogPrimitive.Root {...props}>
24-
<StyledOverlay />
25-
{children}
26-
</DialogPrimitive.Root>
27-
);
28-
}
29-
3020
const StyledContent = styled(DialogPrimitive.Content, panelStyles, {
3121
position: 'fixed',
3222
top: '50%',
@@ -56,21 +46,24 @@ const StyledCloseButton = styled(DialogPrimitive.Close, {
5646
type DialogContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;
5747
type DialogContentProps = DialogContentPrimitiveProps & { css?: CSS };
5848

59-
export const DialogContent = React.forwardRef<
60-
React.ElementRef<typeof StyledContent>,
61-
DialogContentProps
62-
>(({ children, ...props }, forwardedRef) => (
63-
<StyledContent {...props} ref={forwardedRef}>
64-
{children}
65-
<StyledCloseButton asChild>
66-
<IconButton variant="ghost">
67-
<Cross1Icon />
68-
</IconButton>
69-
</StyledCloseButton>
70-
</StyledContent>
71-
));
49+
const DialogContent = React.forwardRef<React.ElementRef<typeof StyledContent>, DialogContentProps>(
50+
({ children, ...props }, forwardedRef) => (
51+
<DialogPrimitive.Portal>
52+
<StyledOverlay />
53+
<StyledContent {...props} ref={forwardedRef}>
54+
{children}
55+
<StyledCloseButton asChild>
56+
<IconButton variant="ghost">
57+
<Cross1Icon />
58+
</IconButton>
59+
</StyledCloseButton>
60+
</StyledContent>
61+
</DialogPrimitive.Portal>
62+
)
63+
);
64+
65+
const DialogClose = DialogPrimitive.Close;
66+
const DialogTitle = DialogPrimitive.Title;
67+
const DialogDescription = DialogPrimitive.Description;
7268

73-
export const DialogTrigger = DialogPrimitive.Trigger;
74-
export const DialogClose = DialogPrimitive.Close;
75-
export const DialogTitle = DialogPrimitive.Title;
76-
export const DialogDescription = DialogPrimitive.Description;
69+
export { Dialog, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogDescription };

‎components/DropdownMenu.tsx

+56-30
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,58 @@ import { Box } from './Box';
77
import { Flex } from './Flex';
88
import { panelStyles } from './Panel';
99

10-
export const DropdownMenu = DropdownMenuPrimitive.Root;
11-
export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
12-
export const DropdownMenuContent = styled(DropdownMenuPrimitive.Content, menuCss, panelStyles);
13-
export const DropdownMenuSeparator = styled(DropdownMenuPrimitive.Separator, separatorCss);
14-
export const DropdownMenuItem = styled(DropdownMenuPrimitive.Item, itemCss);
10+
const DropdownMenu = DropdownMenuPrimitive.Root;
11+
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
1512

13+
const StyledContent = styled(DropdownMenuPrimitive.Content, menuCss, panelStyles);
14+
15+
type DropdownMenuContentPrimitiveProps = React.ComponentProps<typeof DropdownMenuPrimitive.Content>;
16+
type DropdownMenuContentProps = DropdownMenuContentPrimitiveProps & { css?: CSS };
17+
18+
const DropdownMenuContent = React.forwardRef<
19+
React.ElementRef<typeof StyledContent>,
20+
DropdownMenuContentProps
21+
>((props, forwardedRef) => (
22+
<DropdownMenuPrimitive.Portal>
23+
<StyledContent {...props} ref={forwardedRef} />
24+
</DropdownMenuPrimitive.Portal>
25+
));
26+
27+
const DropdownMenuItem = styled(DropdownMenuPrimitive.Item, itemCss);
28+
const DropdownMenuGroup = styled(DropdownMenuPrimitive.Group, {});
29+
const DropdownMenuLabel = styled(DropdownMenuPrimitive.Label, labelCss);
30+
const DropdownMenuSeparator = styled(DropdownMenuPrimitive.Separator, separatorCss);
31+
32+
const StyledDropdownMenuCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, itemCss);
33+
34+
type DialogMenuCheckboxItemPrimitiveProps = React.ComponentProps<
35+
typeof DropdownMenuPrimitive.CheckboxItem
36+
>;
37+
type DialogMenuCheckboxItemProps = DialogMenuCheckboxItemPrimitiveProps & { css?: CSS };
38+
39+
const DropdownMenuCheckboxItem = React.forwardRef<
40+
React.ElementRef<typeof StyledDropdownMenuCheckboxItem>,
41+
DialogMenuCheckboxItemProps
42+
>(({ children, ...props }, forwardedRef) => (
43+
<StyledDropdownMenuCheckboxItem {...props} ref={forwardedRef}>
44+
<Box as="span" css={{ position: 'absolute', left: '$1' }}>
45+
<DropdownMenuPrimitive.ItemIndicator>
46+
<CheckIcon />
47+
</DropdownMenuPrimitive.ItemIndicator>
48+
</Box>
49+
{children}
50+
</StyledDropdownMenuCheckboxItem>
51+
));
52+
53+
const DropdownMenuRadioGroup = styled(DropdownMenuPrimitive.RadioGroup, {});
1654
const StyledDropdownMenuRadioItem = styled(DropdownMenuPrimitive.RadioItem, itemCss);
1755

1856
type DialogMenuRadioItemPrimitiveProps = React.ComponentProps<
1957
typeof DropdownMenuPrimitive.RadioItem
2058
>;
2159
type DialogMenuRadioItemProps = DialogMenuRadioItemPrimitiveProps & { css?: CSS };
2260

23-
export const DropdownMenuRadioItem = React.forwardRef<
61+
const DropdownMenuRadioItem = React.forwardRef<
2462
React.ElementRef<typeof StyledDropdownMenuRadioItem>,
2563
DialogMenuRadioItemProps
2664
>(({ children, ...props }, forwardedRef) => (
@@ -43,27 +81,15 @@ export const DropdownMenuRadioItem = React.forwardRef<
4381
</StyledDropdownMenuRadioItem>
4482
));
4583

46-
const StyledDropdownMenuCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, itemCss);
47-
48-
type DialogMenuCheckboxItemPrimitiveProps = React.ComponentProps<
49-
typeof DropdownMenuPrimitive.CheckboxItem
50-
>;
51-
type DialogMenuCheckboxItemProps = DialogMenuCheckboxItemPrimitiveProps & { css?: CSS };
52-
53-
export const DropdownMenuCheckboxItem = React.forwardRef<
54-
React.ElementRef<typeof StyledDropdownMenuCheckboxItem>,
55-
DialogMenuCheckboxItemProps
56-
>(({ children, ...props }, forwardedRef) => (
57-
<StyledDropdownMenuCheckboxItem {...props} ref={forwardedRef}>
58-
<Box as="span" css={{ position: 'absolute', left: '$1' }}>
59-
<DropdownMenuPrimitive.ItemIndicator>
60-
<CheckIcon />
61-
</DropdownMenuPrimitive.ItemIndicator>
62-
</Box>
63-
{children}
64-
</StyledDropdownMenuCheckboxItem>
65-
));
66-
67-
export const DropdownMenuLabel = styled(DropdownMenuPrimitive.Label, labelCss);
68-
export const DropdownMenuRadioGroup = styled(DropdownMenuPrimitive.RadioGroup, {});
69-
export const DropdownMenuGroup = styled(DropdownMenuPrimitive.Group, {});
84+
export {
85+
DropdownMenu,
86+
DropdownMenuTrigger,
87+
DropdownMenuContent,
88+
DropdownMenuItem,
89+
DropdownMenuGroup,
90+
DropdownMenuLabel,
91+
DropdownMenuSeparator,
92+
DropdownMenuCheckboxItem,
93+
DropdownMenuRadioGroup,
94+
DropdownMenuRadioItem,
95+
};

‎components/Menu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const itemCss = css(baseItemCss, {
2525
position: 'relative',
2626
color: '$hiContrast',
2727

28-
'&:focus': {
28+
'&[data-highlighted]': {
2929
outline: 'none',
3030
backgroundColor: '$blue9',
3131
color: 'white',

0 commit comments

Comments
 (0)