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 ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body <body className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}>
className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}
>
<Providers>{children}</Providers> <Providers>{children}</Providers>
</body> </body>
</html> </html>

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

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

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

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

2
apps/web/package.json
View File

@ -11,7 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@workspace/ui": "workspace:*", "@workspace/ui": "workspace:*",
"lucide-react": "0.475.0", "lucide-react": "0.477.0",
"next-themes": "^0.4.4", "next-themes": "^0.4.4",
"next": "15.2.0", "next": "15.2.0",
"react": "19.0.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-dropdown-menu": "^2.1.6",
"@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-slot": "^1.1.2",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-react": "0.475.0",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"tailwind-merge": "^3.0.1", "tailwind-merge": "^3.0.1",
@ -33,6 +32,7 @@
"@workspace/eslint-config": "workspace:*", "@workspace/eslint-config": "workspace:*",
"@workspace/typescript-config": "workspace:*", "@workspace/typescript-config": "workspace:*",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"lucide-react": "0.477.0",
"tailwindcss": "^4", "tailwindcss": "^4",
"typescript": "^5" "typescript": "^5"
} }

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

@ -9,14 +9,10 @@ const buttonVariants = cva(
{ {
variants: { variants: {
variant: { variant: {
default: default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
destructive: outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90', secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
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', ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline', link: 'text-primary underline-offset-4 hover:underline',
}, },
@ -46,13 +42,7 @@ function Button({
}) { }) {
const Comp = asChild ? Slot : 'button'; const Comp = asChild ? Slot : 'button';
return ( return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
);
} }
export { Button, buttonVariants }; 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'; import { cn } from '@workspace/ui/lib/utils';
function DropdownMenu({ function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />; return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
} }
function DropdownMenuPortal({ function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
...props return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return (
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
);
} }
function DropdownMenuTrigger({ function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
...props return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return (
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
);
} }
function DropdownMenuContent({ function DropdownMenuContent({
@ -51,12 +38,8 @@ function DropdownMenuContent({
); );
} }
function DropdownMenuGroup({ function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
...props return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
);
} }
function DropdownMenuItem({ function DropdownMenuItem({
@ -108,15 +91,8 @@ function DropdownMenuCheckboxItem({
); );
} }
function DropdownMenuRadioGroup({ function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
...props return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
);
} }
function DropdownMenuRadioItem({ function DropdownMenuRadioItem({
@ -154,19 +130,13 @@ function DropdownMenuLabel({
<DropdownMenuPrimitive.Label <DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label" data-slot="dropdown-menu-label"
data-inset={inset} data-inset={inset}
className={cn( className={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
'px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8',
className,
)}
{...props} {...props}
/> />
); );
} }
function DropdownMenuSeparator({ function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return ( return (
<DropdownMenuPrimitive.Separator <DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator" data-slot="dropdown-menu-separator"
@ -176,25 +146,17 @@ function DropdownMenuSeparator({
); );
} }
function DropdownMenuShortcut({ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
className,
...props
}: React.ComponentProps<'span'>) {
return ( return (
<span <span
data-slot="dropdown-menu-shortcut" data-slot="dropdown-menu-shortcut"
className={cn( className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
'text-muted-foreground ml-auto text-xs tracking-widest',
className,
)}
{...props} {...props}
/> />
); );
} }
function DropdownMenuSub({ function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />; return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
} }

16
pnpm-lock.yaml
View File

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