diff --git a/components.json b/components.json
index 7a63543..a0c8a84 100644
--- a/components.json
+++ b/components.json
@@ -11,10 +11,10 @@
"prefix": ""
},
"aliases": {
- "components": "@/components",
- "utils": "@/lib/utils",
- "ui": "@/components/ui",
- "lib": "@/lib",
- "hooks": "@/hooks"
+ "components": "@/app/components",
+ "utils": "@/bootstrap/helpers/lib/ui-utils",
+ "ui": "@/app/components",
+ "lib": "@/bootstrap/helpers/lib",
+ "hooks": "@/bootstrap/helpers/vm/hooks"
}
}
\ No newline at end of file
diff --git a/package.json b/package.json
index 2a11c38..62211ce 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"dependencies": {
"@heroicons/react": "^2.1.5",
"@radix-ui/react-icons": "^1.3.1",
+ "@radix-ui/react-slot": "^1.1.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.454.0",
diff --git a/src/app/components/button/button.tsx b/src/app/components/button/button.tsx
index e1b8a4d..6d0c377 100644
--- a/src/app/components/button/button.tsx
+++ b/src/app/components/button/button.tsx
@@ -2,11 +2,68 @@
import BaseView, { BuildProps } from "@/bootstrap/helpers/view/base-view";
import ButtonVm from "@/app/components/button/button-vm";
import { ReactNode } from "react";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/bootstrap/helpers/lib/ui-utils";
export default class Button extends BaseView<ButtonVm> {
protected Build(props: BuildProps<ButtonVm>): ReactNode {
const {vm} = props
- return <button onClick={vm.onClick} >{vm.props.title}</button>
+ return <ButtonUi onClick={vm.onClick} >{vm.props.title}</ButtonUi>
}
}
+
+
+const buttonVariants = cva(
+ "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-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+ VariantProps<typeof buttonVariants> {
+ asChild?: boolean
+}
+
+const ButtonUi = React.forwardRef<HTMLButtonElement, ButtonProps>(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+ <Comp
+ className={cn(buttonVariants({ variant, size, className }))}
+ ref={ref}
+ {...props}
+ />
+ )
+ }
+)
+ButtonUi.displayName = "Button"
+
+export { Button, buttonVariants }
\ No newline at end of file
diff --git a/src/app/lib/actions.ts b/src/bootstrap/helpers/lib/actions.ts
similarity index 100%
rename from src/app/lib/actions.ts
rename to src/bootstrap/helpers/lib/actions.ts
diff --git a/src/lib/utils.ts b/src/bootstrap/helpers/lib/ui-utils.ts
similarity index 100%
rename from src/lib/utils.ts
rename to src/bootstrap/helpers/lib/ui-utils.ts
diff --git a/src/bootstrap/helpers/view/base-view.tsx b/src/bootstrap/helpers/view/base-view.tsx
index a1eecc7..990cd19 100644
--- a/src/bootstrap/helpers/view/base-view.tsx
+++ b/src/bootstrap/helpers/view/base-view.tsx
@@ -69,13 +69,17 @@ export default abstract class BaseView<
IVM extends IVMParent,
PROPS extends IPropParent = undefined,
> extends Component<BaseProps<IVM, PROPS>> {
- /* -------------------------------- Abstracts ------------------------------- */
protected abstract Build(props: BuildProps<IVM, PROPS>): ReactNode;
- /* -------------------------------- Renderer -------------------------------- */
+ protected get componentName() {
+ return this.constructor.name
+ }
+
render(): ReactNode {
const { vm, restProps, memoizedByVM, children, ...rest } = this.props;
+ VvmConnector.displayName = this.componentName
+
return (
<VvmConnector
View={this.Build}
diff --git a/yarn.lock b/yarn.lock
index 1a06bc5..6d7dde4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -613,11 +613,23 @@
resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+"@radix-ui/react-compose-refs@1.1.0":
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+ integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
"@radix-ui/react-icons@^1.3.1":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.1.tgz#462c85fd726a77854cd5956e29eb19a575aa7ce5"
integrity sha512-QvYompk0X+8Yjlo/Fv4McrzxohDdM5GgLHyQcPpcsPvlOSXCGFjdbuyGL5dzRbg0GpknAjQJJZzdiRK7iWVuFQ==
+"@radix-ui/react-slot@^1.1.0":
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+ integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+ dependencies:
+ "@radix-ui/react-compose-refs" "1.1.0"
+
"@rollup/rollup-android-arm-eabi@4.24.3":
version "4.24.3"
resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.3.tgz#49a2a9808074f2683667992aa94b288e0b54fc82"