chore: merge shadcn-ui branch

package.json

@@ -50,6 +50,7 @@
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",

src/app/explorer/page.tsx

@@ -20,14 +20,11 @@ import {
 import { useAtom, useAtomValue, useSetAtom } from "jotai"
 import { YourGuilds } from "@/components/YourGuilds"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
-import { Button } from "@/components/ui/Button"
-import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import { SignIn } from "@phosphor-icons/react"
 import Robot from "/public/landing/robot.svg"
 import { Card } from "@/components/ui/Card"
 import { walletSelectorModalAtom } from "@/components/Providers/atoms"
 
-
 const HeaderBackground = () => {
   const isNavStuck = useAtomValue(isNavStuckAtom)
   const isSearchStuck = useAtomValue(isSeachStuckAtom)
@@ -100,8 +97,9 @@ const Page = () => {
               )}
             </div>
           </div>
-          {isWeb3Connected ?
-            <YourGuilds /> :
+          {isWeb3Connected ? (
+            <YourGuilds />
+          ) : (
             <Card className="my-2 mb-12 flex flex-col items-stretch justify-between gap-8 p-6 font-semibold sm:flex-row sm:items-center">
               <div className="flex items-center gap-4">
                 <Robot className="size-8 min-w-8 text-white" />
@@ -115,7 +113,7 @@ const Page = () => {
                 <span className="text-md">Sign in</span>
               </Button>
             </Card>
-          }
+          )}
           <section id={ActiveSection.ExploreGuilds}>
             <h2 className="text-lg font-bold tracking-tight">
               Explore verified guilds

src/app/globals.css

@@ -49,7 +49,7 @@
     --success-foreground: 0 0% 100%;
 
     --border: 240 6% 90%;
-    --border-secondary: 240 6% 94%;
+    --border-muted: 240 6% 94%;
     --input: var(--border);
     --ring: 240, 0%, 45%, 25%;
 
@@ -136,7 +136,7 @@
     --success-foreground: 0 0% 100%;
 
     --border: 240 3% 38%;
-    --border-secondary: 240 3% 28%;
+    --border-muted: 240 3% 28%;
     --input: var(--border);
     --ring: 240 0% 45%;
 

src/v2/components/ui/Badge.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Badge, BadgeProps } from "./Badge"
+
+const meta: Meta<typeof Badge> = {
+  title: "Design system/Badge",
+  component: Badge,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = {
+  args: {
+    children: "Default",
+    variant: "default",
+    size: "md",
+  },
+  argTypes: {
+    variant: {
+      control: {
+        disable: true,
+      },
+    },
+    size: {
+      type: "string",
+      control: "radio",
+      options: ["sm", "md", "lg"] satisfies BadgeProps["size"][],
+    },
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    ...Default.args,
+    children: "Secondary",
+    variant: "secondary",
+  },
+  argTypes: Default.argTypes,
+}
+
+export const Destructive: Story = {
+  args: {
+    ...Default.args,
+    children: "Destructive",
+    variant: "destructive",
+  },
+  argTypes: Default.argTypes,
+}
+
+export const Outline: Story = {
+  args: {
+    ...Default.args,
+    children: "Outline",
+    variant: "outline",
+  },
+  argTypes: Default.argTypes,
+}

src/v2/components/ui/Badge.tsx

@@ -1,40 +1,38 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import { HTMLAttributes } from "react"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded border px-2.5 py-0.5 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
+  "inline-flex items-center rounded-md border-2 px-2 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-foreground/10 text-foreground hover:bg-foreground/20",
-        primary:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "border-transparent bg-primary text-primary-foreground shadow",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+          "border-transparent bg-destructive text-destructive-foreground shadow",
         outline: "text-foreground",
       },
+      size: {
+        sm: "text-xs h-5",
+        md: "text-sm h-6",
+        lg: "text-base h-8",
+      },
     },
     defaultVariants: {
       variant: "default",
+      size: "md",
     },
   }
 )
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+function Badge({ className, variant, size, ...props }: BadgeProps) {
   return (
-    <div
-      className={cn(badgeVariants({ variant }), "hover:bg-initial", className)}
-      {...props}
-    />
+    <div className={cn(badgeVariants({ variant, size }), className)} {...props} />
   )
 }
 

src/v2/components/ui/DropdownMenu.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./DropdownMenu"
+
+const DropdownMenuExample = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>Menu title</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>Menu item #1</DropdownMenuItem>
+      <DropdownMenuItem>Another item</DropdownMenuItem>
+      <DropdownMenuItem>This is the third one</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+)
+
+const meta: Meta<typeof DropdownMenuExample> = {
+  title: "Design system/DropdownMenu",
+  component: DropdownMenuExample,
+}
+
+export default meta
+
+type Story = StoryObj<typeof DropdownMenuExample>
+
+export const Default: Story = {}