Skip to content

Commit bcf88df

Browse files
mrzachnugentmrzachnugent
committed
chore: update rn-primitives and use their newly exported types
1 parent 682146c commit bcf88df

38 files changed

+1923
-1440
lines changed

‎apps/showcase/app/(tabs)/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,9 @@ function TeamMemberHoverCard({ name }: { name: string }) {
191191
<View className='flex flex-row justify-between gap-4'>
192192
<Avatar alt='Vercel avatar'>
193193
<AvatarImage source={{ uri: 'https://github.com/vercel.png' }} />
194-
<AvatarFallback>VC</AvatarFallback>
194+
<AvatarFallback>
195+
<Text>VC</Text>
196+
</AvatarFallback>
195197
</Avatar>
196198
<View className='gap-1 flex-1'>
197199
<Text className='text-sm native:text-base font-semibold'>{name}</Text>

‎apps/showcase/package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020
"@react-native-community/slider": "4.5.2",
2121
"@react-navigation/material-top-tabs": "^6.6.5",
2222
"@react-navigation/native": "^6.0.2",
23-
"@rn-primitives/aspect-ratio": "~1.0.3",
24-
"@rn-primitives/collapsible": "~1.0.3",
25-
"@rn-primitives/label": "~1.0.3",
26-
"@rn-primitives/portal": "~1.0.3",
27-
"@rn-primitives/slider": "~1.0.3",
28-
"@rn-primitives/toast": "~1.0.3",
29-
"@rn-primitives/toolbar": "~1.0.3",
30-
"@rn-primitives/types": "~1.0.3",
23+
"@rn-primitives/aspect-ratio": "~1.1.0",
24+
"@rn-primitives/collapsible": "~1.1.0",
25+
"@rn-primitives/label": "~1.1.0",
26+
"@rn-primitives/portal": "~1.1.0",
27+
"@rn-primitives/slider": "~1.1.0",
28+
"@rn-primitives/toast": "~1.1.0",
29+
"@rn-primitives/toolbar": "~1.1.0",
30+
"@rn-primitives/types": "~1.1.0",
3131
"@rnr/reusables": "workspace:*",
3232
"@shopify/flash-list": "1.6.4",
3333
"@tanstack/react-table": "^8.11.7",

‎apps/starter-base/components/ui/avatar.tsx

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,45 @@
1-
import * as React from 'react';
21
import * as AvatarPrimitive from '@rn-primitives/avatar';
2+
import * as React from 'react';
33
import { cn } from '~/lib/utils';
44

55
const AvatarPrimitiveRoot = AvatarPrimitive.Root;
66
const AvatarPrimitiveImage = AvatarPrimitive.Image;
77
const AvatarPrimitiveFallback = AvatarPrimitive.Fallback;
88

9-
const Avatar = React.forwardRef<
10-
React.ElementRef<typeof AvatarPrimitiveRoot>,
11-
React.ComponentPropsWithoutRef<typeof AvatarPrimitiveRoot>
12-
>(({ className, ...props }, ref) => (
13-
<AvatarPrimitiveRoot
14-
ref={ref}
15-
className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
16-
{...props}
17-
/>
18-
));
9+
const Avatar = React.forwardRef<AvatarPrimitive.RootRef, AvatarPrimitive.RootProps>(
10+
({ className, ...props }, ref) => (
11+
<AvatarPrimitiveRoot
12+
ref={ref}
13+
className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
14+
{...props}
15+
/>
16+
)
17+
);
1918
Avatar.displayName = AvatarPrimitiveRoot.displayName;
2019

21-
const AvatarImage = React.forwardRef<
22-
React.ElementRef<typeof AvatarPrimitiveImage>,
23-
React.ComponentPropsWithoutRef<typeof AvatarPrimitiveImage>
24-
>(({ className, ...props }, ref) => (
25-
<AvatarPrimitiveImage
26-
ref={ref}
27-
className={cn('aspect-square h-full w-full', className)}
28-
{...props}
29-
/>
30-
));
20+
const AvatarImage = React.forwardRef<AvatarPrimitive.ImageRef, AvatarPrimitive.ImageProps>(
21+
({ className, ...props }, ref) => (
22+
<AvatarPrimitiveImage
23+
ref={ref}
24+
className={cn('aspect-square h-full w-full', className)}
25+
{...props}
26+
/>
27+
)
28+
);
3129
AvatarImage.displayName = AvatarPrimitiveImage.displayName;
3230

33-
const AvatarFallback = React.forwardRef<
34-
React.ElementRef<typeof AvatarPrimitiveFallback>,
35-
React.ComponentPropsWithoutRef<typeof AvatarPrimitiveFallback>
36-
>(({ className, ...props }, ref) => (
37-
<AvatarPrimitiveFallback
38-
ref={ref}
39-
className={cn(
40-
'flex h-full w-full items-center justify-center rounded-full bg-muted',
41-
className
42-
)}
43-
{...props}
44-
/>
45-
));
31+
const AvatarFallback = React.forwardRef<AvatarPrimitive.FallbackRef, AvatarPrimitive.FallbackProps>(
32+
({ className, ...props }, ref) => (
33+
<AvatarPrimitiveFallback
34+
ref={ref}
35+
className={cn(
36+
'flex h-full w-full items-center justify-center rounded-full bg-muted',
37+
className
38+
)}
39+
{...props}
40+
/>
41+
)
42+
);
4643
AvatarFallback.displayName = AvatarPrimitiveFallback.displayName;
4744

4845
export { Avatar, AvatarFallback, AvatarImage };

‎apps/starter-base/components/ui/card.tsx

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,24 @@
1+
import type { TextRef, ViewRef } from '@rn-primitives/types';
12
import * as React from 'react';
2-
import { Text, View } from 'react-native';
3+
import { Text, TextProps, View, ViewProps } from 'react-native';
34
import { TextClassContext } from '~/components/ui/text';
4-
import type { TextRef, ViewRef } from '@rn-primitives/types';
55
import { cn } from '~/lib/utils';
66

7-
const Card = React.forwardRef<ViewRef, React.ComponentPropsWithoutRef<typeof View>>(
8-
({ className, ...props }, ref) => (
9-
<View
10-
ref={ref}
11-
className={cn(
12-
'rounded-lg border border-border bg-card shadow-sm shadow-foreground/10',
13-
className
14-
)}
15-
{...props}
16-
/>
17-
)
18-
);
7+
const Card = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
8+
<View
9+
ref={ref}
10+
className={cn(
11+
'rounded-lg border border-border bg-card shadow-sm shadow-foreground/10',
12+
className
13+
)}
14+
{...props}
15+
/>
16+
));
1917
Card.displayName = 'Card';
2018

21-
const CardHeader = React.forwardRef<ViewRef, React.ComponentPropsWithoutRef<typeof View>>(
22-
({ className, ...props }, ref) => (
23-
<View ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
24-
)
25-
);
19+
const CardHeader = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
20+
<View ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
21+
));
2622
CardHeader.displayName = 'CardHeader';
2723

2824
const CardTitle = React.forwardRef<TextRef, React.ComponentPropsWithoutRef<typeof Text>>(
@@ -41,27 +37,21 @@ const CardTitle = React.forwardRef<TextRef, React.ComponentPropsWithoutRef<typeo
4137
);
4238
CardTitle.displayName = 'CardTitle';
4339

44-
const CardDescription = React.forwardRef<TextRef, React.ComponentPropsWithoutRef<typeof Text>>(
45-
({ className, ...props }, ref) => (
46-
<Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
47-
)
48-
);
40+
const CardDescription = React.forwardRef<TextRef, TextProps>(({ className, ...props }, ref) => (
41+
<Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
42+
));
4943
CardDescription.displayName = 'CardDescription';
5044

51-
const CardContent = React.forwardRef<ViewRef, React.ComponentPropsWithoutRef<typeof View>>(
52-
({ className, ...props }, ref) => (
53-
<TextClassContext.Provider value='text-card-foreground'>
54-
<View ref={ref} className={cn('p-6 pt-0', className)} {...props} />
55-
</TextClassContext.Provider>
56-
)
57-
);
45+
const CardContent = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
46+
<TextClassContext.Provider value='text-card-foreground'>
47+
<View ref={ref} className={cn('p-6 pt-0', className)} {...props} />
48+
</TextClassContext.Provider>
49+
));
5850
CardContent.displayName = 'CardContent';
5951

60-
const CardFooter = React.forwardRef<ViewRef, React.ComponentPropsWithoutRef<typeof View>>(
61-
({ className, ...props }, ref) => (
62-
<View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />
63-
)
64-
);
52+
const CardFooter = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
53+
<View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />
54+
));
6555
CardFooter.displayName = 'CardFooter';
6656

6757
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

‎apps/starter-base/components/ui/progress.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import * as ProgressPrimitive from '@rn-primitives/progress';
12
import * as React from 'react';
23
import { Platform, View } from 'react-native';
34
import Animated, {
@@ -7,12 +8,11 @@ import Animated, {
78
useDerivedValue,
89
withSpring,
910
} from 'react-native-reanimated';
10-
import * as ProgressPrimitive from '@rn-primitives/progress';
1111
import { cn } from '~/lib/utils';
1212

1313
const Progress = React.forwardRef<
14-
React.ElementRef<typeof ProgressPrimitive.Root>,
15-
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
14+
ProgressPrimitive.RootRef,
15+
ProgressPrimitive.RootProps & {
1616
indicatorClassName?: string;
1717
}
1818
>(({ className, value, indicatorClassName, ...props }, ref) => {

‎apps/starter-base/components/ui/tooltip.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1+
import * as TooltipPrimitive from '@rn-primitives/tooltip';
12
import * as React from 'react';
23
import { Platform, StyleSheet } from 'react-native';
34
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
45
import { TextClassContext } from '~/components/ui/text';
5-
import * as TooltipPrimitive from '@rn-primitives/tooltip';
66
import { cn } from '~/lib/utils';
77

88
const Tooltip = TooltipPrimitive.Root;
99

1010
const TooltipTrigger = TooltipPrimitive.Trigger;
1111

1212
const TooltipContent = React.forwardRef<
13-
React.ElementRef<typeof TooltipPrimitive.Content>,
14-
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { portalHost?: string }
13+
TooltipPrimitive.ContentRef,
14+
TooltipPrimitive.ContentProps & { portalHost?: string }
1515
>(({ className, sideOffset = 4, portalHost, ...props }, ref) => (
1616
<TooltipPrimitive.Portal hostName={portalHost}>
1717
<TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>

‎apps/starter-base/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
"dependencies": {
1616
"@react-native-async-storage/async-storage": "1.23.1",
1717
"@react-navigation/native": "^6.0.2",
18-
"@rn-primitives/avatar": "~1.0.4",
19-
"@rn-primitives/portal": "~1.0.3",
20-
"@rn-primitives/progress": "~1.0.3",
21-
"@rn-primitives/slot": "~1.0.3",
22-
"@rn-primitives/tooltip": "~1.0.3",
23-
"@rn-primitives/types": "~1.0.3",
18+
"@rn-primitives/avatar": "~1.1.0",
19+
"@rn-primitives/portal": "~1.1.0",
20+
"@rn-primitives/progress": "~1.1.0",
21+
"@rn-primitives/slot": "~1.1.0",
22+
"@rn-primitives/tooltip": "~1.1.0",
23+
"@rn-primitives/types": "~1.1.0",
2424
"class-variance-authority": "^0.7.0",
2525
"clsx": "^2.1.0",
2626
"expo": "^51.0.24",

‎packages/reusables/package.json

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -142,36 +142,36 @@
142142
"@hookform/resolvers": "^3.3.4",
143143
"@react-native-community/slider": "4.4.2",
144144
"@react-navigation/native": "^6.0.2",
145-
"@rn-primitives/accordion": "~1.0.3",
146-
"@rn-primitives/alert-dialog": "~1.0.3",
147-
"@rn-primitives/aspect-ratio": "~1.0.3",
148-
"@rn-primitives/avatar": "~1.0.4",
149-
"@rn-primitives/checkbox": "~1.0.3",
150-
"@rn-primitives/collapsible": "~1.0.3",
151-
"@rn-primitives/context-menu": "~1.0.3",
152-
"@rn-primitives/dialog": "~1.0.3",
153-
"@rn-primitives/dropdown-menu": "~1.0.3",
154-
"@rn-primitives/hover-card": "~1.0.3",
155-
"@rn-primitives/label": "~1.0.3",
156-
"@rn-primitives/menubar": "~1.0.3",
157-
"@rn-primitives/navigation-menu": "~1.0.3",
158-
"@rn-primitives/popover": "~1.0.3",
159-
"@rn-primitives/portal": "~1.0.3",
160-
"@rn-primitives/progress": "~1.0.3",
161-
"@rn-primitives/radio-group": "~1.0.3",
162-
"@rn-primitives/select": "~1.0.4",
163-
"@rn-primitives/separator": "~1.0.3",
164-
"@rn-primitives/slider": "~1.0.3",
165-
"@rn-primitives/slot": "~1.0.3",
166-
"@rn-primitives/switch": "~1.0.3",
167-
"@rn-primitives/table": "~1.0.3",
168-
"@rn-primitives/tabs": "~1.0.3",
169-
"@rn-primitives/toast": "~1.0.3",
170-
"@rn-primitives/toggle": "~1.0.3",
171-
"@rn-primitives/toggle-group": "~1.0.3",
172-
"@rn-primitives/toolbar": "~1.0.3",
173-
"@rn-primitives/tooltip": "~1.0.3",
174-
"@rn-primitives/types": "~1.0.3",
145+
"@rn-primitives/accordion": "~1.1.0",
146+
"@rn-primitives/alert-dialog": "~1.1.0",
147+
"@rn-primitives/aspect-ratio": "~1.1.0",
148+
"@rn-primitives/avatar": "~1.1.0",
149+
"@rn-primitives/checkbox": "~1.1.0",
150+
"@rn-primitives/collapsible": "~1.1.0",
151+
"@rn-primitives/context-menu": "~1.1.0",
152+
"@rn-primitives/dialog": "~1.1.0",
153+
"@rn-primitives/dropdown-menu": "~1.1.0",
154+
"@rn-primitives/hover-card": "~1.1.0",
155+
"@rn-primitives/label": "~1.1.0",
156+
"@rn-primitives/menubar": "~1.1.0",
157+
"@rn-primitives/navigation-menu": "~1.1.0",
158+
"@rn-primitives/popover": "~1.1.0",
159+
"@rn-primitives/portal": "~1.1.0",
160+
"@rn-primitives/progress": "~1.1.0",
161+
"@rn-primitives/radio-group": "~1.1.0",
162+
"@rn-primitives/select": "~1.1.0",
163+
"@rn-primitives/separator": "~1.1.0",
164+
"@rn-primitives/slider": "~1.1.0",
165+
"@rn-primitives/slot": "~1.1.0",
166+
"@rn-primitives/switch": "~1.1.0",
167+
"@rn-primitives/table": "~1.1.0",
168+
"@rn-primitives/tabs": "~1.1.0",
169+
"@rn-primitives/toast": "~1.1.0",
170+
"@rn-primitives/toggle": "~1.1.0",
171+
"@rn-primitives/toggle-group": "~1.1.0",
172+
"@rn-primitives/toolbar": "~1.1.0",
173+
"@rn-primitives/tooltip": "~1.1.0",
174+
"@rn-primitives/types": "~1.1.0",
175175
"@shopify/flash-list": "1.6.4",
176176
"@tanstack/react-table": "^8.11.7",
177177
"class-variance-authority": "^0.7.0",

0 commit comments

Comments
 (0)