From 733a28f4ee495930ed56beb7f5a067a0e0e927fc Mon Sep 17 00:00:00 2001 From: saiful7778 Date: Tue, 24 Dec 2024 23:02:07 +0600 Subject: [PATCH 1/7] Added: Drag and Reject effect on upload component. --- app/src/components/Upload/Body.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/src/components/Upload/Body.tsx b/app/src/components/Upload/Body.tsx index e9aee759..aa8b055d 100644 --- a/app/src/components/Upload/Body.tsx +++ b/app/src/components/Upload/Body.tsx @@ -7,16 +7,17 @@ import { useUploadContext } from './UploadContext' const UploadBody = forwardRef>( ({ children, className, ...props }, ref: Ref) => { const { options, horizontal } = useUploadContext() - const { getRootProps, getInputProps } = useDropzone(options) + const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone(options) return (
From 79191601ea160251806cb8cb4d680112bc24ff1d Mon Sep 17 00:00:00 2001 From: saiful7778 Date: Tue, 31 Dec 2024 20:19:57 +0600 Subject: [PATCH 2/7] Added: Modal close component. --- app/src/components/Modal/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/src/components/Modal/index.tsx b/app/src/components/Modal/index.tsx index 0104da69..1c2ec495 100644 --- a/app/src/components/Modal/index.tsx +++ b/app/src/components/Modal/index.tsx @@ -1,5 +1,5 @@ 'use client' -import { Portal, Trigger } from '@radix-ui/react-dialog' +import { Close, Portal, Trigger } from '@radix-ui/react-dialog' import type { ModalProps } from './Modal' import { Modal } from './Modal' import { ModalContent } from './ModalContent' @@ -11,9 +11,11 @@ import { ModalTitle } from './ModalTitle' const ModalAction = Trigger const ModalPortal = Portal +const ModalClose = Close export { Modal, + ModalClose, ModalAction, ModalContent, ModalDescription, From aaedb2734f83888b49079de4f77dfa7d0d46c2e8 Mon Sep 17 00:00:00 2001 From: saiful7778 Date: Tue, 31 Dec 2024 20:20:22 +0600 Subject: [PATCH 3/7] Added: use modal close component. --- app/docs/components/modal/variant/DefaultModal.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/docs/components/modal/variant/DefaultModal.tsx b/app/docs/components/modal/variant/DefaultModal.tsx index 32c36919..e594c1a7 100644 --- a/app/docs/components/modal/variant/DefaultModal.tsx +++ b/app/docs/components/modal/variant/DefaultModal.tsx @@ -4,6 +4,7 @@ import { Button, Modal, ModalAction, + ModalClose, ModalContent, ModalDescription, ModalFooter, @@ -31,7 +32,9 @@ const DefaultModal = () => {
- + + + From 8a0036f797b0dfdc5f2d75a98f10f72ff1045dfc Mon Sep 17 00:00:00 2001 From: saiful7778 Date: Tue, 31 Dec 2024 20:36:13 +0600 Subject: [PATCH 4/7] Added: Radix slot in button component. --- app/src/components/Button/Button.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/src/components/Button/Button.tsx b/app/src/components/Button/Button.tsx index c56f37a7..3364301e 100644 --- a/app/src/components/Button/Button.tsx +++ b/app/src/components/Button/Button.tsx @@ -1,5 +1,6 @@ 'use client' import { ButtonHTMLAttributes, Ref, forwardRef } from 'react' +import { Slot } from '@radix-ui/react-slot' import { cn } from '../../utils/cn' import { ButtonColorVariant, ButtonSizeVariant, buttonVariants } from './theme' @@ -9,6 +10,7 @@ export interface ButtonProps extends ButtonHTMLAttributes { variant?: 'link' | 'outline' | 'softBg' | 'default' shape?: 'circle' | 'icon' position?: 'start' | 'end' | 'center' + asChild?: boolean radius?: 'default' | 'full' } @@ -22,18 +24,20 @@ const Button = forwardRef( variant = 'default', radius = 'default', shape, + asChild, position, ...props }, ref: Ref, ) => { + const Comp = asChild ? Slot : 'button' return ( - + ) }, ) From 2464f2a0a331a0b18a67fc73874e49aa0700c459 Mon Sep 17 00:00:00 2001 From: saiful7778 Date: Tue, 31 Dec 2024 20:53:05 +0600 Subject: [PATCH 5/7] Added: Radix slot and asChild prop. --- app/src/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/components/Button/Button.tsx b/app/src/components/Button/Button.tsx index 3364301e..1a7dcd9b 100644 --- a/app/src/components/Button/Button.tsx +++ b/app/src/components/Button/Button.tsx @@ -24,7 +24,7 @@ const Button = forwardRef( variant = 'default', radius = 'default', shape, - asChild, + asChild = false, position, ...props }, From ead432dd4cf25bf430f1cb06515b66bfa55a4444 Mon Sep 17 00:00:00 2001 From: saiful7778 Date: Tue, 31 Dec 2024 20:53:31 +0600 Subject: [PATCH 6/7] Added: new button with link component. --- .../button/variant/KeepButtonLink.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 app/docs/components/button/variant/KeepButtonLink.tsx diff --git a/app/docs/components/button/variant/KeepButtonLink.tsx b/app/docs/components/button/variant/KeepButtonLink.tsx new file mode 100644 index 00000000..2a0b9b6b --- /dev/null +++ b/app/docs/components/button/variant/KeepButtonLink.tsx @@ -0,0 +1,29 @@ +'use client' +import Link from 'next/link' +import { Button } from '../../../../src' + +const KeepButtonLink = () => { + return ( +
+ +
+ ) +} + +const KeepButtonLinkCode = { + 'ButtonComponent.tsx': ` +import { Button } from 'keep-react' + +export const ButtonComponent = () => { + return ( + + ) +} +`, +} + +export { KeepButtonLink, KeepButtonLinkCode } From a1975dfd1913542343f7e06c8933a5b984fcdcbf Mon Sep 17 00:00:00 2001 From: saiful7778 Date: Tue, 31 Dec 2024 20:54:10 +0600 Subject: [PATCH 7/7] Added: button link component documentation. --- app/docs/components/button/button.mdx | 9 +++++++++ app/docs/components/button/buttonApi.ts | 7 +++++++ 2 files changed, 16 insertions(+) diff --git a/app/docs/components/button/button.mdx b/app/docs/components/button/button.mdx index 89a03d11..258988ce 100644 --- a/app/docs/components/button/button.mdx +++ b/app/docs/components/button/button.mdx @@ -1,6 +1,7 @@ import { KeepButtonTypeCode, KeepButtonType } from './variant/KeepButtonType' import { KeepButtonColor, KeepButtonColorCode } from './variant/KeepButtonColor' import { KeepButtonSize, KeepButtonSizeCode } from './variant/KeepButtonSize' +import { KeepButtonLink, KeepButtonLinkCode } from './variant/KeepButtonLink' import { KeepButtonShape, KeepButtonShapeCode } from './variant/KeepButtonShape' import { KeepButtonIcon, KeepButtonIconCode } from './variant/KeepButtonIcon' import { DefaultButton, DefaultButtonCode } from './variant/DefaultButton' @@ -29,6 +30,14 @@ You can customize your buttons with different color schemes to match your design +## Button with link + +You can add a link to a button component by passing asChild props. + + + + + ## Button Variant Type Choose from different button types depending on your use case. The available types include: `default` `softBg` `outline` and `link`. diff --git a/app/docs/components/button/buttonApi.ts b/app/docs/components/button/buttonApi.ts index 7fb86369..354c05fa 100644 --- a/app/docs/components/button/buttonApi.ts +++ b/app/docs/components/button/buttonApi.ts @@ -41,4 +41,11 @@ export const buttonApiData = [ propsDescription: 'Size variant of the button.', default: 'md', }, + { + id: 7, + propsName: 'asChild', + propsType: ['true', 'false'], + propsDescription: 'Set button styles and functionality to her child component.', + default: 'false', + }, ]