From 6927d7906d041440b652f91187ec3c134ededdfe Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 9 Nov 2024 20:43:06 +0800
Subject: [PATCH] update badge/button/separator/skeleton component to svelte 5

---
 .../src/lib/components/ui/badge/badge.svelte  | 48 +++++++--
 frontend/src/lib/components/ui/badge/index.ts | 22 +----
 .../lib/components/ui/button/button.svelte    | 97 +++++++++++++++----
 .../src/lib/components/ui/button/index.ts     | 58 +++--------
 .../components/ui/separator/separator.svelte  | 29 +++---
 .../components/ui/skeleton/skeleton.svelte    | 18 ++--
 6 files changed, 155 insertions(+), 117 deletions(-)

diff --git a/frontend/src/lib/components/ui/badge/badge.svelte b/frontend/src/lib/components/ui/badge/badge.svelte
index 58ec3b0..9c7457a 100644
--- a/frontend/src/lib/components/ui/badge/badge.svelte
+++ b/frontend/src/lib/components/ui/badge/badge.svelte
@@ -1,18 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import { badgeVariants, type Variant } from ".";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	let className: string | undefined | null = undefined;
-	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
 </script>
 
 <svelte:element
 	this={href ? "a" : "span"}
+	bind:this={ref}
 	{href}
 	class={cn(badgeVariants({ variant, className }))}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </svelte:element>
diff --git a/frontend/src/lib/components/ui/badge/index.ts b/frontend/src/lib/components/ui/badge/index.ts
index 2824b56..64e0aa9 100644
--- a/frontend/src/lib/components/ui/badge/index.ts
+++ b/frontend/src/lib/components/ui/badge/index.ts
@@ -1,22 +1,2 @@
-import { tv, type VariantProps } from "tailwind-variants";
 export { default as Badge } from "./badge.svelte";
-
-export const badgeVariants = tv({
-	base: "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-	variants: {
-		variant: {
-			default:
-				"bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
-			secondary:
-				"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
-			destructive:
-				"bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
-			outline: "text-foreground"
-		}
-	},
-	defaultVariants: {
-		variant: "default"
-	}
-});
-
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
diff --git a/frontend/src/lib/components/ui/button/button.svelte b/frontend/src/lib/components/ui/button/button.svelte
index d7267f8..a344974 100644
--- a/frontend/src/lib/components/ui/button/button.svelte
+++ b/frontend/src/lib/components/ui/button/button.svelte
@@ -1,24 +1,81 @@
-<script lang="ts">
-	import { Button as ButtonPrimitive } from 'bits-ui'
-	import { cn } from '$lib/utils'
-	import { buttonVariants, type Props, type Events } from '.'
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui'
+	import type {
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+	} from 'svelte/elements'
+	import { type VariantProps, tv } from 'tailwind-variants'
+
+	export const buttonVariants = tv({
+		base: 'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		variants: {
+			variant: {
+				default:
+					'bg-primary-foreground text-primary hover:bg-primary-foreground/70',
+				brand: 'bg-brand text-brand-foreground hover:bg-brand/80',
+				destructive:
+					'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+				outline:
+					'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-10 px-4 py-2',
+				sm: 'h-9 rounded-md px-3',
+				lg: 'h-11 rounded-md px-8',
+				icon: 'h-10 w-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	})
+
+	export type ButtonVariant = VariantProps<
+		typeof buttonVariants
+	>['variant']
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size']
 
-	type $$Props = Props
-	type $$Events = Events
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant
+			size?: ButtonSize
+		}
+</script>
+
+<script lang="ts">
+	import { cn } from '$lib/utils.js'
 
-	let className: $$Props['class'] = undefined
-	export let variant: $$Props['variant'] = 'default'
-	export let size: $$Props['size'] = 'default'
-	export let builders: $$Props['builders'] = []
-	export { className as class }
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		children,
+		...restProps
+	}: ButtonProps = $props()
 </script>
 
-<ButtonPrimitive.Root
-	{builders}
-	class={cn(buttonVariants({ variant, size, className }))}
-	type="button"
-	{...$$restProps}
-	on:click
-	on:keydown>
-	<slot />
-</ButtonPrimitive.Root>
+{#if href}
+	<a
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, className }))}
+		{href}
+		{...restProps}>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, className }))}
+		{type}
+		{...restProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/frontend/src/lib/components/ui/button/index.ts b/frontend/src/lib/components/ui/button/index.ts
index da58cec..fb585d7 100644
--- a/frontend/src/lib/components/ui/button/index.ts
+++ b/frontend/src/lib/components/ui/button/index.ts
@@ -1,53 +1,17 @@
-import Root from './button.svelte'
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { Button as ButtonPrimitive } from 'bits-ui'
-
-const buttonVariants = tv({
-	base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 flex gap-2',
-	variants: {
-		variant: {
-			default:
-				'bg-primary-foreground text-primary hover:bg-primary-foreground/70',
-			brand: 'bg-brand text-brand-foreground hover:bg-brand/80',
-			destructive:
-				'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-			outline:
-				'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-			secondary:
-				'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-			ghost: 'hover:bg-accent hover:text-accent-foreground',
-			link: 'text-primary underline-offset-4 hover:underline',
-		},
-		size: {
-			default: 'h-10 px-4 py-2',
-			sm: 'h-9 rounded-md px-3',
-			lg: 'h-11 rounded-md px-8',
-			icon: 'h-10 w-10',
-		},
-	},
-	defaultVariants: {
-		variant: 'default',
-		size: 'default',
-	},
-})
-
-type Variant = VariantProps<typeof buttonVariants>['variant']
-type Size = VariantProps<typeof buttonVariants>['size']
-
-type Props = ButtonPrimitive.Props & {
-	variant?: Variant
-	size?: Size
-}
-
-type Events = ButtonPrimitive.Events
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
 
 export {
 	Root,
-	type Props,
-	type Events,
+	type ButtonProps as Props,
 	//
 	Root as Button,
-	type Props as ButtonProps,
-	type Events as ButtonEvents,
 	buttonVariants,
-}
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
diff --git a/frontend/src/lib/components/ui/separator/separator.svelte b/frontend/src/lib/components/ui/separator/separator.svelte
index 4d27138..839494d 100644
--- a/frontend/src/lib/components/ui/separator/separator.svelte
+++ b/frontend/src/lib/components/ui/separator/separator.svelte
@@ -1,23 +1,22 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from 'bits-ui'
-	import { cn } from '$lib/utils.js'
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = SeparatorPrimitive.Props
-
-	let className: $$Props['class'] = undefined
-	export let orientation: $$Props['orientation'] = 'horizontal'
-	export let decorative: $$Props['decorative'] = undefined
-	export { className as class }
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "horizontal",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
 </script>
 
 <SeparatorPrimitive.Root
+	bind:ref
 	class={cn(
-		'bg-border shrink-0',
-		orientation === 'horizontal'
-			? 'h-[1px] w-full'
-			: 'min-h-full w-[1px] self-stretch',
-		className,
+		"bg-border shrink-0",
+		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
+		className
 	)}
 	{orientation}
-	{decorative}
-	{...$$restProps} />
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/skeleton/skeleton.svelte b/frontend/src/lib/components/ui/skeleton/skeleton.svelte
index 09fb7cd..4089b49 100644
--- a/frontend/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/frontend/src/lib/components/ui/skeleton/skeleton.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
 </script>
 
-<div class={cn("animate-pulse rounded-md bg-muted", className)} {...$$restProps} />
+<div
+	bind:this={ref}
+	class={cn("bg-muted animate-pulse rounded-md", className)}
+	{...restProps}
+></div>