Skip to content

Commit 3bd0afc

Browse files
gustavotoyotagustavotoyota
committed
refactor: migrate from lucide-vue-next to @lucide/vue and replace native selects with shadcn Select components
- Replace lucide-vue-next with @lucide/vue package (v1.17.0) - Update @vueuse/core to v14.3.0 and reka-ui to v2.9.8 - Replace all native <select> elements with shadcn Select components in ArrowPropertiesCard and NotePropertiesCard - Add "Note Properties", "Arrow Properties", and "Page Properties" section headers to right sidebar - Update all lucide icon imports across 15+ components to
1 parent fa451fc commit 3bd0afc

39 files changed

Lines changed: 669 additions & 106 deletions

‎new-deepnotes/apps/web/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@deepnotes/collab-wire": "workspace:^",
1818
"@deepnotes/e2ee": "workspace:^",
1919
"@deepnotes/realtime-wire": "workspace:^",
20+
"@lucide/vue": "^1.17.0",
2021
"@tailwindcss/vite": "^4.2.4",
2122
"@tiptap/core": "3.22.4",
2223
"@tiptap/extension-code-block-lowlight": "3.22.4",
@@ -42,19 +43,18 @@
4243
"@tiptap/starter-kit": "3.22.4",
4344
"@tiptap/vue-3": "3.22.4",
4445
"@tiptap/y-tiptap": "3.0.3",
45-
"@vueuse/core": "^14.2.1",
46+
"@vueuse/core": "^14.3.0",
4647
"@vueuse/shared": "14.2.1",
4748
"class-variance-authority": "^0.7.1",
4849
"clsx": "^2.1.1",
4950
"highlight.js": "^11.11.1",
5051
"html2canvas": "^1.4.1",
5152
"katex": "0.16.22",
5253
"lowlight": "3.3.0",
53-
"lucide-vue-next": "^1.0.0",
5454
"msgpackr": "^1.11.2",
5555
"nanoid": "^5.1.5",
5656
"openapi-fetch": "^0.17.0",
57-
"reka-ui": "^2.9.6",
57+
"reka-ui": "^2.9.8",
5858
"shadcn-vue": "^2.6.2",
5959
"tailwind-merge": "^3.5.0",
6060
"tailwindcss": "^4.2.4",
@@ -65,12 +65,12 @@
6565
"yjs": "^13.6.30"
6666
},
6767
"devDependencies": {
68+
"@playwright/test": "^1.52.0",
6869
"@types/node": "^22.14.1",
6970
"@vitejs/plugin-vue": "^5.2.3",
7071
"@vue/test-utils": "^2.4.6",
7172
"happy-dom": "^17.4.4",
7273
"msw": "^2.0.0",
73-
"@playwright/test": "^1.52.0",
7474
"openapi-typescript": "^7.13.0",
7575
"tsx": "^4.21.0",
7676
"typescript": "^5.8.3",

‎new-deepnotes/apps/web/src/components/ui/checkbox/Checkbox.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
33
44
import type { HTMLAttributes } from 'vue'
55
import { reactiveOmit } from '@vueuse/core'
6-
import { CheckIcon } from 'lucide-vue-next'
6+
import { CheckIcon } from '@lucide/vue'
77
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
88
import { cn } from '@/lib/utils'
99

‎new-deepnotes/apps/web/src/components/ui/select/Select.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup lang="ts">
2+
import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
3+
import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
4+
5+
const props = defineProps<SelectRootProps>()
6+
const emits = defineEmits<SelectRootEmits>()
7+
8+
const forwarded = useForwardPropsEmits(props, emits)
9+
</script>
10+
11+
<template>
12+
<SelectRoot
13+
v-slot="slotProps"
14+
data-slot="select"
15+
v-bind="forwarded"
16+
>
17+
<slot v-bind="slotProps" />
18+
</SelectRoot>
19+
</template>

‎new-deepnotes/apps/web/src/components/ui/select/SelectContent.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script setup lang="ts">
2+
import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
3+
import type { HTMLAttributes } from 'vue'
4+
import { reactiveOmit } from '@vueuse/core'
5+
import {
6+
SelectContent,
7+
SelectPortal,
8+
SelectViewport,
9+
useForwardPropsEmits,
10+
} from 'reka-ui'
11+
import { cn } from '@/lib/utils'
12+
import { SelectScrollDownButton, SelectScrollUpButton } from '.'
13+
14+
defineOptions({
15+
inheritAttrs: false,
16+
})
17+
18+
const props = withDefaults(
19+
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
20+
{
21+
position: 'item-aligned',
22+
align: 'center',
23+
},
24+
)
25+
const emits = defineEmits<SelectContentEmits>()
26+
27+
const delegatedProps = reactiveOmit(props, 'class')
28+
29+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
30+
</script>
31+
32+
<template>
33+
<SelectPortal>
34+
<SelectContent
35+
data-slot="select-content"
36+
:data-align-trigger="position === 'item-aligned'"
37+
v-bind="{ ...$attrs, ...forwarded }"
38+
:class="cn(
39+
'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-translucent relative z-50 max-h-(--reka-select-content-available-height) origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
40+
position === 'popper'
41+
&& 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
42+
props.class,
43+
)
44+
"
45+
>
46+
<SelectScrollUpButton />
47+
<SelectViewport
48+
:data-position="position"
49+
:class="cn(
50+
'data-[position=popper]:h-[var(--reka-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--reka-select-trigger-width)]',
51+
)"
52+
>
53+
<slot />
54+
</SelectViewport>
55+
<SelectScrollDownButton />
56+
</SelectContent>
57+
</SelectPortal>
58+
</template>

‎new-deepnotes/apps/web/src/components/ui/select/SelectGroup.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import type { SelectGroupProps } from 'reka-ui'
3+
import type { HTMLAttributes } from 'vue'
4+
import { reactiveOmit } from '@vueuse/core'
5+
import { SelectGroup } from 'reka-ui'
6+
import { cn } from '@/lib/utils'
7+
8+
const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = reactiveOmit(props, 'class')
11+
</script>
12+
13+
<template>
14+
<SelectGroup
15+
data-slot="select-group"
16+
v-bind="delegatedProps"
17+
:class="cn('scroll-my-1 p-1', props.class)"
18+
>
19+
<slot />
20+
</SelectGroup>
21+
</template>

‎new-deepnotes/apps/web/src/components/ui/select/SelectItem.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script setup lang="ts">
2+
import type { SelectItemProps } from 'reka-ui'
3+
4+
import type { HTMLAttributes } from 'vue'
5+
import { CheckIcon } from '@lucide/vue'
6+
import { reactiveOmit } from '@vueuse/core'
7+
import {
8+
SelectItem,
9+
SelectItemIndicator,
10+
SelectItemText,
11+
useForwardProps,
12+
} from 'reka-ui'
13+
import { cn } from '@/lib/utils'
14+
15+
const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
16+
17+
const delegatedProps = reactiveOmit(props, 'class')
18+
19+
const forwardedProps = useForwardProps(delegatedProps)
20+
</script>
21+
22+
<template>
23+
<SelectItem
24+
data-slot="select-item"
25+
v-bind="forwardedProps"
26+
:class="
27+
cn(
28+
'focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
29+
props.class,
30+
)
31+
"
32+
>
33+
<span class="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
34+
<SelectItemIndicator>
35+
<slot name="indicator-icon">
36+
<CheckIcon class="pointer-events-none" />
37+
</slot>
38+
</SelectItemIndicator>
39+
</span>
40+
41+
<SelectItemText>
42+
<slot />
43+
</SelectItemText>
44+
</SelectItem>
45+
</template>

‎new-deepnotes/apps/web/src/components/ui/select/SelectItemText.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
import type { SelectItemTextProps } from 'reka-ui'
3+
import { SelectItemText } from 'reka-ui'
4+
5+
const props = defineProps<SelectItemTextProps>()
6+
</script>
7+
8+
<template>
9+
<SelectItemText
10+
data-slot="select-item-text"
11+
v-bind="props"
12+
>
13+
<slot />
14+
</SelectItemText>
15+
</template>

‎new-deepnotes/apps/web/src/components/ui/select/SelectLabel.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="ts">
2+
import type { SelectLabelProps } from 'reka-ui'
3+
import type { HTMLAttributes } from 'vue'
4+
import { SelectLabel } from 'reka-ui'
5+
import { cn } from '@/lib/utils'
6+
7+
const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
8+
</script>
9+
10+
<template>
11+
<SelectLabel
12+
data-slot="select-label"
13+
:class="cn('text-muted-foreground px-1.5 py-1 text-xs', props.class)"
14+
>
15+
<slot />
16+
</SelectLabel>
17+
</template>

‎new-deepnotes/apps/web/src/components/ui/select/SelectScrollDownButton.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
import type { SelectScrollDownButtonProps } from 'reka-ui'
3+
4+
import type { HTMLAttributes } from 'vue'
5+
import { ChevronDownIcon } from '@lucide/vue'
6+
import { reactiveOmit } from '@vueuse/core'
7+
import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
8+
import { cn } from '@/lib/utils'
9+
10+
const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
11+
12+
const delegatedProps = reactiveOmit(props, 'class')
13+
14+
const forwardedProps = useForwardProps(delegatedProps)
15+
</script>
16+
17+
<template>
18+
<SelectScrollDownButton
19+
data-slot="select-scroll-down-button"
20+
v-bind="forwardedProps"
21+
:class="cn('bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=size-])]:size-4', props.class)"
22+
>
23+
<slot>
24+
<ChevronDownIcon />
25+
</slot>
26+
</SelectScrollDownButton>
27+
</template>

‎new-deepnotes/apps/web/src/components/ui/select/SelectScrollUpButton.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
import type { SelectScrollUpButtonProps } from 'reka-ui'
3+
4+
import type { HTMLAttributes } from 'vue'
5+
import { ChevronUpIcon } from '@lucide/vue'
6+
import { reactiveOmit } from '@vueuse/core'
7+
import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
8+
import { cn } from '@/lib/utils'
9+
10+
const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
11+
12+
const delegatedProps = reactiveOmit(props, 'class')
13+
14+
const forwardedProps = useForwardProps(delegatedProps)
15+
</script>
16+
17+
<template>
18+
<SelectScrollUpButton
19+
data-slot="select-scroll-up-button"
20+
v-bind="forwardedProps"
21+
:class="cn('bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=size-])]:size-4', props.class)"
22+
>
23+
<slot>
24+
<ChevronUpIcon />
25+
</slot>
26+
</SelectScrollUpButton>
27+
</template>

0 commit comments

Comments
 (0)