liaohui
/
fenghuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upgrade lucide-react and move it to devDep 

- add more testing for dropdown
This commit is contained in:
Borris 2025-03-01 20:23:31 +04:00
parent fcf5488a59
commit f82f416855
10 changed files with 355 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/app/layout.tsx
View File

@ -27,9 +27,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body
className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}
>
<body className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}>
<Providers>{children}</Providers>
</body>
</html>

86
apps/web/app/page.tsx
View File

@ -1,34 +1,34 @@
import { ModeToggle } from '@/components/mode-toggle';
import { Button, buttonVariants } from '@workspace/ui/components/button';
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from '@workspace/ui/components/dropdown-menu';
import { cn } from '@workspace/ui/lib/utils';
import { ChevronDownIcon } from 'lucide-react';
import Image from 'next/image';
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<Image className="dark:invert" src="/next.svg" alt="Next.js logo" width={180} height={38} priority />
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{' '}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
app/page.tsx
</code>
.
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">app/page.tsx</code>.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<p>
All the buttons are from the <kbd>ui</kbd> package. The auto complete
works as well.
All the buttons are from the <kbd>ui</kbd> package. The auto complete works as well.
</p>
<pre className="border rounded-sm p-1.5 bg-foreground/10">
@ -40,6 +40,27 @@ import { cn } from '@workspace/ui/lib/utils';`}</code>
<Button size={'sm'}>Click me</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size={'sm'}>
Dropdown <ChevronDownIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Item 1</DropdownMenuItem>
<DropdownMenuItem>Item 2</DropdownMenuItem>
<DropdownMenuCheckboxItem checked>Item 3</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem>Item 3</DropdownMenuCheckboxItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>Item 3</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>Item 3.1</DropdownMenuItem>
<DropdownMenuItem>Item 3.2</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuContent>
</DropdownMenu>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className={cn(buttonVariants({ size: 'lg' }), 'rounded-full')}
@ -47,20 +68,11 @@ import { cn } from '@workspace/ui/lib/utils';`}</code>
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
<Image className="dark:invert" src="/vercel.svg" alt="Vercel logomark" width={20} height={20} />
Deploy now
</a>
<a
className={cn(
buttonVariants({ size: 'lg', variant: 'outline' }),
'rounded-full',
)}
className={cn(buttonVariants({ size: 'lg', variant: 'outline' }), 'rounded-full')}
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
@ -76,13 +88,7 @@ import { cn } from '@workspace/ui/lib/utils';`}</code>
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
<Image aria-hidden src="/file.svg" alt="File icon" width={16} height={16} />
Learn
</a>
<a
@ -91,13 +97,7 @@ import { cn } from '@workspace/ui/lib/utils';`}</code>
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
<Image aria-hidden src="/window.svg" alt="Window icon" width={16} height={16} />
Examples
</a>
<a
@ -106,13 +106,7 @@ import { cn } from '@workspace/ui/lib/utils';`}</code>
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
<Image aria-hidden src="/globe.svg" alt="Globe icon" width={16} height={16} />
Go to nextjs.org →
</a>
</footer>

12
apps/web/components/mode-toggle.tsx
View File

@ -25,15 +25,9 @@ export function ModeToggle() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme('light')}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}>
System
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);

2
apps/web/package.json
View File

@ -11,7 +11,7 @@
},
"dependencies": {
"@workspace/ui": "workspace:*",
"lucide-react": "0.475.0",
"lucide-react": "0.477.0",
"next-themes": "^0.4.4",
"next": "15.2.0",
"react": "19.0.0",

2
packages/ui/package.json
View File

@ -17,7 +17,6 @@
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-slot": "^1.1.2",
"clsx": "^2.1.1",
"lucide-react": "0.475.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^3.0.1",
@ -33,6 +32,7 @@
"@workspace/eslint-config": "workspace:*",
"@workspace/typescript-config": "workspace:*",
"class-variance-authority": "^0.7.1",
"lucide-react": "0.477.0",
"tailwindcss": "^4",
"typescript": "^5"
}

20
packages/ui/src/components/button.tsx
View File

@ -9,14 +9,10 @@ const buttonVariants = cva(
{
variants: {
variant: {
default:
'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
destructive:
'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
outline:
'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
@ -46,13 +42,7 @@ function Button({
}) {
const Comp = asChild ? Slot : 'button';
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
);
return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
}
export { Button, buttonVariants };

66
packages/ui/src/components/dropdown-menu.tsx
View File

@ -6,29 +6,16 @@ import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
import { cn } from '@workspace/ui/lib/utils';
function DropdownMenu({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
}
function DropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return (
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
);
function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
}
function DropdownMenuTrigger({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return (
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
);
function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
}
function DropdownMenuContent({
@ -51,12 +38,8 @@ function DropdownMenuContent({
);
}
function DropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
);
function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
}
function DropdownMenuItem({
@ -108,15 +91,8 @@ function DropdownMenuCheckboxItem({
);
}
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
);
function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
}
function DropdownMenuRadioItem({
@ -154,19 +130,13 @@ function DropdownMenuLabel({
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
'px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8',
className,
)}
className={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
{...props}
/>
);
}
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
@ -176,25 +146,17 @@ function DropdownMenuSeparator({
);
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<'span'>) {
function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn(
'text-muted-foreground ml-auto text-xs tracking-widest',
className,
)}
className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
{...props}
/>
);
}
function DropdownMenuSub({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
}

16
pnpm-lock.yaml
View File

@ -30,8 +30,8 @@ importers:
specifier: workspace:*
version: link:../../packages/ui
lucide-react:
specifier: 0.475.0
version: 0.475.0(react@19.0.0)
specifier: 0.477.0
version: 0.477.0(react@19.0.0)
next:
specifier: 15.2.0
version: 15.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@ -122,9 +122,6 @@ importers:
clsx:
specifier: ^2.1.1
version: 2.1.1
lucide-react:
specifier: 0.475.0
version: 0.475.0(react@19.0.0)
react:
specifier: ^19.0.0
version: 19.0.0
@ -165,6 +162,9 @@ importers:
class-variance-authority:
specifier: ^0.7.1
version: 0.7.1
lucide-react:
specifier: 0.477.0
version: 0.477.0(react@19.0.0)
tailwindcss:
specifier: ^4
version: 4.0.6
@ -1855,8 +1855,8 @@ packages:
resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
engines: {node: '>=12'}
lucide-react@0.475.0:
resolution: {integrity: sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==}
lucide-react@0.477.0:
resolution: {integrity: sha512-yCf7aYxerFZAbd8jHJxjwe1j7jEMPptjnaOqdYeirFnEy85cNR3/L+o0I875CYFYya+eEVzZSbNuRk8BZPDpVw==}
peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
@ -4475,7 +4475,7 @@ snapshots:
lru-cache@7.18.3: {}
lucide-react@0.475.0(react@19.0.0):
lucide-react@0.477.0(react@19.0.0):
dependencies:
react: 19.0.0