Skip to content

Commit 6c06e03

Browse files
SatontSatont
committed
refactor(web): migrate to reka-ui from radix
1 parent 2740aba commit 6c06e03

File tree

94 files changed

+594
-441
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+594
-441
lines changed

‎bun.lock

+154-19
Large diffs are not rendered by default.

‎web/app/assets/css/tailwind.css

+48
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,11 @@
4444
--sidebar-accent-foreground: 240 5.9% 10%;
4545
--sidebar-border: 220 13% 91%;
4646
--sidebar-ring: 217.2 91.2% 59.8%;
47+
--chart-1: 12 76% 61%;
48+
--chart-2: 173 58% 39%;
49+
--chart-3: 197 37% 24%;
50+
--chart-4: 43 74% 66%;
51+
--chart-5: 27 87% 67%;
4752
}
4853

4954
.dark-mode {
@@ -86,10 +91,53 @@
8691
--sidebar-border: 240 3.7% 15.9%;
8792
--sidebar-ring: 217.2 91.2% 59.8%;
8893
}
94+
.dark {
95+
--background: 240 10% 3.9%;
96+
--foreground: 0 0% 98%;
97+
--card: 240 10% 3.9%;
98+
--card-foreground: 0 0% 98%;
99+
--popover: 240 10% 3.9%;
100+
--popover-foreground: 0 0% 98%;
101+
--primary: 0 0% 98%;
102+
--primary-foreground: 240 5.9% 10%;
103+
--secondary: 240 3.7% 15.9%;
104+
--secondary-foreground: 0 0% 98%;
105+
--muted: 240 3.7% 15.9%;
106+
--muted-foreground: 240 5% 64.9%;
107+
--accent: 240 3.7% 15.9%;
108+
--accent-foreground: 0 0% 98%;
109+
--destructive: 0 62.8% 30.6%;
110+
--destructive-foreground: 0 0% 98%;
111+
--border: 240 3.7% 15.9%;
112+
--input: 240 3.7% 15.9%;
113+
--ring: 240 4.9% 83.9%;
114+
--chart-1: 220 70% 50%;
115+
--chart-2: 160 60% 45%;
116+
--chart-3: 30 80% 55%;
117+
--chart-4: 280 65% 60%;
118+
--chart-5: 340 75% 55%;
119+
--sidebar-background: 240 5.9% 10%;
120+
--sidebar-foreground: 240 4.8% 95.9%;
121+
--sidebar-primary: 224.3 76.3% 48%;
122+
--sidebar-primary-foreground: 0 0% 100%;
123+
--sidebar-accent: 240 3.7% 15.9%;
124+
--sidebar-accent-foreground: 240 4.8% 95.9%;
125+
--sidebar-border: 240 3.7% 15.9%;
126+
--sidebar-ring: 217.2 91.2% 59.8%;
127+
}
89128
}
90129

91130
@layer base {
92131
* {
93132
@apply border-border;
94133
}
95134
}
135+
136+
@layer base {
137+
* {
138+
@apply border-border;
139+
}
140+
body {
141+
@apply bg-background text-foreground;
142+
}
143+
}

‎web/app/components/ui/avatar/Avatar.vue

+11-14
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
<script setup lang="ts">
2-
import { AvatarRoot } from 'radix-vue'
3-
4-
import { type AvatarVariants, avatarVariant } from './index'
5-
62
import type { HTMLAttributes } from 'vue'
7-
8-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
4+
import { AvatarRoot } from 'reka-ui'
5+
import { avatarVariant, type AvatarVariants } from '.'
96
107
const props = withDefaults(defineProps<{
11-
class?: HTMLAttributes['class']
12-
size?: AvatarVariants['size']
13-
shape?: AvatarVariants['shape']
8+
class?: HTMLAttributes['class']
9+
size?: AvatarVariants['size']
10+
shape?: AvatarVariants['shape']
1411
}>(), {
15-
size: 'sm',
16-
shape: 'circle',
12+
size: 'sm',
13+
shape: 'circle',
1714
})
1815
</script>
1916

2017
<template>
21-
<AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
22-
<slot />
23-
</AvatarRoot>
18+
<AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
19+
<slot />
20+
</AvatarRoot>
2421
</template>

‎web/app/components/ui/avatar/AvatarFallback.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
2+
import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
33
44
const props = defineProps<AvatarFallbackProps>()
55
</script>

‎web/app/components/ui/avatar/AvatarImage.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<script setup lang="ts">
2-
import { AvatarImage, type AvatarImageProps } from 'radix-vue'
2+
import type { AvatarImageProps } from 'reka-ui'
3+
import { AvatarImage } from 'reka-ui'
34
45
const props = defineProps<AvatarImageProps>()
56
</script>
67

78
<template>
8-
<AvatarImage v-bind="props" class="h-full w-full object-cover" />
9+
<AvatarImage v-bind="props" class="h-full w-full object-cover">
10+
<slot />
11+
</AvatarImage>
912
</template>

‎web/app/components/ui/badge/Badge.vue

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
<script setup lang="ts">
2-
import { type BadgeVariants, badgeVariants } from './index'
3-
42
import type { HTMLAttributes } from 'vue'
5-
6-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
4+
import { type BadgeVariants, badgeVariants } from '.'
75
86
const props = defineProps<{
9-
variant?: BadgeVariants['variant']
10-
class?: HTMLAttributes['class']
7+
variant?: BadgeVariants['variant']
8+
class?: HTMLAttributes['class']
119
}>()
1210
</script>
1311

1412
<template>
15-
<div :class="cn(badgeVariants({ variant }), props.class)">
16-
<slot />
17-
</div>
13+
<div :class="cn(badgeVariants({ variant }), props.class)">
14+
<slot />
15+
</div>
1816
</template>

‎web/app/components/ui/button/Button.vue

+14-17
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
<script setup lang="ts">
2-
import { Primitive, type PrimitiveProps } from 'radix-vue'
3-
4-
import { type ButtonVariants, buttonVariants } from './index'
5-
62
import type { HTMLAttributes } from 'vue'
7-
8-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
4+
import { Primitive, type PrimitiveProps } from 'reka-ui'
5+
import { type ButtonVariants, buttonVariants } from '.'
96
107
interface Props extends PrimitiveProps {
11-
variant?: ButtonVariants['variant']
12-
size?: ButtonVariants['size']
13-
class?: HTMLAttributes['class']
8+
variant?: ButtonVariants['variant']
9+
size?: ButtonVariants['size']
10+
class?: HTMLAttributes['class']
1411
}
1512
1613
const props = withDefaults(defineProps<Props>(), {
17-
as: 'button',
14+
as: 'button',
1815
})
1916
</script>
2017

2118
<template>
22-
<Primitive
23-
:as="as"
24-
:as-child="asChild"
25-
:class="cn(buttonVariants({ variant, size }), props.class)"
26-
>
27-
<slot />
28-
</Primitive>
19+
<Primitive
20+
:as="as"
21+
:as-child="asChild"
22+
:class="cn(buttonVariants({ variant, size }), props.class)"
23+
>
24+
<slot />
25+
</Primitive>
2926
</template>

‎web/app/components/ui/button/index.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { cva, type VariantProps } from 'class-variance-authority'
1+
import type { VariantProps } from 'class-variance-authority'
2+
import { cva } from 'class-variance-authority'
23

34
export { default as Button } from './Button.vue'
45

@@ -7,22 +8,21 @@ export const buttonVariants = cva(
78
{
89
variants: {
910
variant: {
10-
default:
11-
'bg-primary text-primary-foreground shadow hover:bg-primary/90',
11+
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
1212
destructive:
13-
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
13+
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
1414
outline:
15-
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
15+
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
1616
secondary:
17-
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
17+
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
1818
ghost: 'hover:bg-accent hover:text-accent-foreground',
1919
link: 'text-primary underline-offset-4 hover:underline',
2020
},
2121
size: {
22-
default: 'h-9 px-4 py-2',
23-
sm: 'h-8 rounded-md px-3 text-xs',
24-
lg: 'h-10 rounded-md px-8',
25-
icon: 'h-9 w-9',
22+
default: 'h-10 px-4 py-2',
23+
sm: 'h-9 rounded-md px-3',
24+
lg: 'h-11 rounded-md px-8',
25+
icon: 'h-10 w-10',
2626
},
2727
},
2828
defaultVariants: {

‎web/app/components/ui/card/Card.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import type { HTMLAttributes } from 'vue'
3-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
44
55
const props = defineProps<{
66
class?: HTMLAttributes['class']

‎web/app/components/ui/card/CardContent.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import type { HTMLAttributes } from 'vue'
3-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
44
55
const props = defineProps<{
66
class?: HTMLAttributes['class']

‎web/app/components/ui/card/CardDescription.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import type { HTMLAttributes } from 'vue'
3-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
44
55
const props = defineProps<{
66
class?: HTMLAttributes['class']

‎web/app/components/ui/card/CardFooter.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import type { HTMLAttributes } from 'vue'
3-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
44
55
const props = defineProps<{
66
class?: HTMLAttributes['class']

‎web/app/components/ui/card/CardHeader.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import type { HTMLAttributes } from 'vue'
3-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
44
55
const props = defineProps<{
66
class?: HTMLAttributes['class']

‎web/app/components/ui/card/CardTitle.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import type { HTMLAttributes } from 'vue'
3-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
44
55
const props = defineProps<{
66
class?: HTMLAttributes['class']

‎web/app/components/ui/dropdown-menu/DropdownMenu.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
2+
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'
33
44
const props = defineProps<DropdownMenuRootProps>()
55
const emits = defineEmits<DropdownMenuRootEmits>()
@@ -8,7 +8,7 @@ const forwarded = useForwardPropsEmits(props, emits)
88
</script>
99

1010
<template>
11-
<DropdownMenuRoot v-bind="forwarded" :modal>
12-
<slot />
13-
</DropdownMenuRoot>
11+
<DropdownMenuRoot v-bind="forwarded">
12+
<slot />
13+
</DropdownMenuRoot>
1414
</template>

‎web/app/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils'
2+
import { cn } from '~/lib/utils'
33
import { Check } from 'lucide-vue-next'
44
import {
55
DropdownMenuCheckboxItem,
66
type DropdownMenuCheckboxItemEmits,
77
type DropdownMenuCheckboxItemProps,
88
DropdownMenuItemIndicator,
99
useForwardPropsEmits,
10-
} from 'radix-vue'
10+
} from 'reka-ui'
1111
import { computed, type HTMLAttributes } from 'vue'
1212
1313
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()

‎web/app/components/ui/dropdown-menu/DropdownMenuContent.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils'
2+
import { cn } from '~/lib/utils'
33
import {
44
DropdownMenuContent,
55
type DropdownMenuContentEmits,
66
type DropdownMenuContentProps,
77
DropdownMenuPortal,
88
useForwardPropsEmits,
9-
} from 'radix-vue'
9+
} from 'reka-ui'
1010
import { computed, type HTMLAttributes } from 'vue'
1111
1212
const props = withDefaults(

‎web/app/components/ui/dropdown-menu/DropdownMenuGroup.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
2+
import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'
33
44
const props = defineProps<DropdownMenuGroupProps>()
55
</script>

‎web/app/components/ui/dropdown-menu/DropdownMenuItem.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils'
3-
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
2+
import { cn } from '~/lib/utils'
3+
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
44
import { computed, type HTMLAttributes } from 'vue'
55
66
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()

‎web/app/components/ui/dropdown-menu/DropdownMenuLabel.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils'
3-
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
2+
import { cn } from '~/lib/utils'
3+
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'
44
import { computed, type HTMLAttributes } from 'vue'
55
66
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()

‎web/app/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
type DropdownMenuRadioGroupEmits,
55
type DropdownMenuRadioGroupProps,
66
useForwardPropsEmits,
7-
} from 'radix-vue'
7+
} from 'reka-ui'
88
99
const props = defineProps<DropdownMenuRadioGroupProps>()
1010
const emits = defineEmits<DropdownMenuRadioGroupEmits>()

‎web/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils'
2+
import { cn } from '~/lib/utils'
33
import { Circle } from 'lucide-vue-next'
44
import {
55
DropdownMenuItemIndicator,
66
DropdownMenuRadioItem,
77
type DropdownMenuRadioItemEmits,
88
type DropdownMenuRadioItemProps,
99
useForwardPropsEmits,
10-
} from 'radix-vue'
10+
} from 'reka-ui'
1111
import { computed, type HTMLAttributes } from 'vue'
1212
1313
const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()

‎web/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils'
2+
import { cn } from '~/lib/utils'
33
import {
44
DropdownMenuSeparator,
55
type DropdownMenuSeparatorProps,
6-
} from 'radix-vue'
6+
} from 'reka-ui'
77
import { computed, type HTMLAttributes } from 'vue'
88
99
const props = defineProps<DropdownMenuSeparatorProps & {

‎web/app/components/ui/dropdown-menu/DropdownMenuShortcut.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import type { HTMLAttributes } from 'vue'
3-
import { cn } from '@/lib/utils'
3+
import { cn } from '~/lib/utils'
44
55
const props = defineProps<{
66
class?: HTMLAttributes['class']

0 commit comments

Comments
 (0)