From f375de27ec7437bf976c6bec4770e68ec7472781 Mon Sep 17 00:00:00 2001 From: behnam Date: Fri, 1 Nov 2024 18:47:24 +0300 Subject: [PATCH] Add button and update shadcn configs --- components.json | 10 ++-- package.json | 1 + src/app/components/button/button.tsx | 59 ++++++++++++++++++- src/{app => bootstrap/helpers}/lib/actions.ts | 0 .../helpers/lib/ui-utils.ts} | 0 src/bootstrap/helpers/view/base-view.tsx | 8 ++- yarn.lock | 12 ++++ 7 files changed, 82 insertions(+), 8 deletions(-) rename src/{app => bootstrap/helpers}/lib/actions.ts (100%) rename src/{lib/utils.ts => bootstrap/helpers/lib/ui-utils.ts} (100%) 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 { protected Build(props: BuildProps): ReactNode { const {vm} = props - return + return {vm.props.title} } } + + +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, + VariantProps { + asChild?: boolean +} + +const ButtonUi = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +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> { - /* -------------------------------- Abstracts ------------------------------- */ protected abstract Build(props: BuildProps): ReactNode; - /* -------------------------------- Renderer -------------------------------- */ + protected get componentName() { + return this.constructor.name + } + render(): ReactNode { const { vm, restProps, memoizedByVM, children, ...rest } = this.props; + VvmConnector.displayName = this.componentName + return (