From 121fe44e5c948a6921b3abfe47d2520e91695032 Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Thu, 28 Nov 2024 13:46:12 +0530 Subject: [PATCH 01/14] add changes to MetaBar index.modul.css --- apps/site/components/Containers/MetaBar/index.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/components/Containers/MetaBar/index.module.css b/apps/site/components/Containers/MetaBar/index.module.css index 8d867a2b2e0d1..e02a2692c63e3 100644 --- a/apps/site/components/Containers/MetaBar/index.module.css +++ b/apps/site/components/Containers/MetaBar/index.module.css @@ -23,7 +23,7 @@ dt { @apply mb-2 text-sm - font-medium + font-[700] text-neutral-800 dark:text-neutral-200; } @@ -40,7 +40,7 @@ a { @apply max-xs:inline-block max-xs:py-1 - font-semibold + font-[500] text-neutral-900 underline dark:text-white; From ad142255813b3f80028fb28f9fb9f1d37afe1d6c Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Thu, 28 Nov 2024 23:37:54 +0530 Subject: [PATCH 02/14] add href to button --- apps/site/components/Common/CodeBox/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/site/components/Common/CodeBox/index.tsx b/apps/site/components/Common/CodeBox/index.tsx index 0b6d97df48ca1..e493e77fb7aff 100644 --- a/apps/site/components/Common/CodeBox/index.tsx +++ b/apps/site/components/Common/CodeBox/index.tsx @@ -114,7 +114,12 @@ const CodeBox: FC> = ({ {language} {showCopyButton && ( - From 7701f9cb9b95ce6a6cc6c6aa028e357e8fdb9ba5 Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Fri, 29 Nov 2024 13:05:16 +0530 Subject: [PATCH 03/14] remove unrelated changes --- apps/site/components/Containers/MetaBar/index.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/components/Containers/MetaBar/index.module.css b/apps/site/components/Containers/MetaBar/index.module.css index e02a2692c63e3..8d867a2b2e0d1 100644 --- a/apps/site/components/Containers/MetaBar/index.module.css +++ b/apps/site/components/Containers/MetaBar/index.module.css @@ -23,7 +23,7 @@ dt { @apply mb-2 text-sm - font-[700] + font-medium text-neutral-800 dark:text-neutral-200; } @@ -40,7 +40,7 @@ a { @apply max-xs:inline-block max-xs:py-1 - font-[500] + font-semibold text-neutral-900 underline dark:text-white; From e8f2eff0fe602602ac7312baa58e0cfba6c90058 Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Sat, 30 Nov 2024 14:15:18 +0530 Subject: [PATCH 04/14] apply changes to CodeBox file & Button file --- apps/site/components/Common/Button/index.tsx | 42 ++++++++++++++----- apps/site/components/Common/CodeBox/index.tsx | 2 +- 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index cb7f77eed0c89..286d2ba9fe503 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -17,17 +17,37 @@ const Button: FC = ({ href = undefined, children, className, + onClick, ...props -}) => ( - - {children} - -); +}) => { + // Handle keydown events for keyboard accessibility + const handleKeyDown = (e: React.KeyboardEvent) => { + if (disabled) return; + + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + if (onClick) { + onClick(e as unknown as React.MouseEvent); + } + } + }; + + return ( + + {children} + + ); +}; export default Button; diff --git a/apps/site/components/Common/CodeBox/index.tsx b/apps/site/components/Common/CodeBox/index.tsx index e493e77fb7aff..23903e087ca70 100644 --- a/apps/site/components/Common/CodeBox/index.tsx +++ b/apps/site/components/Common/CodeBox/index.tsx @@ -118,7 +118,7 @@ const CodeBox: FC> = ({ kind="neutral" className={styles.action} onClick={onCopy} - href="#" + disabled={!ref.current?.textContent} > {t('components.common.codebox.copy')} From 11057bb7c5216586d5f56a76d0cee7a46f9f4d1e Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Sat, 30 Nov 2024 14:27:31 +0530 Subject: [PATCH 05/14] add change to CodeBox file --- apps/site/components/Common/CodeBox/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/components/Common/CodeBox/index.tsx b/apps/site/components/Common/CodeBox/index.tsx index 23903e087ca70..1dd8a984f108e 100644 --- a/apps/site/components/Common/CodeBox/index.tsx +++ b/apps/site/components/Common/CodeBox/index.tsx @@ -119,6 +119,7 @@ const CodeBox: FC> = ({ className={styles.action} onClick={onCopy} disabled={!ref.current?.textContent} + tabIndex={0} > {t('components.common.codebox.copy')} From 6f9fa79a639776e4fd99f328a7dd5366b65967f2 Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Sat, 30 Nov 2024 21:00:31 +0530 Subject: [PATCH 06/14] add changes to CodeBox & Button component --- apps/site/components/Common/Button/index.tsx | 15 +++++++++------ apps/site/components/Common/CodeBox/index.tsx | 15 ++++++++++++--- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index 286d2ba9fe503..c46edcc9acc81 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -20,6 +20,9 @@ const Button: FC = ({ onClick, ...props }) => { + // Check if the component is being used as a button (no href provided) + const isButton = !href; + // Handle keydown events for keyboard accessibility const handleKeyDown = (e: React.KeyboardEvent) => { if (disabled) return; @@ -34,15 +37,15 @@ const Button: FC = ({ return ( {children} diff --git a/apps/site/components/Common/CodeBox/index.tsx b/apps/site/components/Common/CodeBox/index.tsx index 1dd8a984f108e..42a69d0810867 100644 --- a/apps/site/components/Common/CodeBox/index.tsx +++ b/apps/site/components/Common/CodeBox/index.tsx @@ -7,7 +7,7 @@ import { import classNames from 'classnames'; import { useTranslations } from 'next-intl'; import type { FC, PropsWithChildren, ReactNode } from 'react'; -import { Fragment, isValidElement, useRef } from 'react'; +import { Fragment, isValidElement, useEffect, useRef, useState } from 'react'; import Button from '@/components/Common/Button'; import { useCopyToClipboard, useNotification } from '@/hooks'; @@ -77,11 +77,21 @@ const CodeBox: FC> = ({ className, }) => { const ref = useRef(null); + const [isDisabled, setIsDisabled] = useState(true); const notify = useNotification(); const [, copyToClipboard] = useCopyToClipboard(); const t = useTranslations(); + // Update button disabled state based on content + useEffect(() => { + if (ref.current?.textContent) { + setIsDisabled(false); + } else { + setIsDisabled(true); + } + }, [children]); + const onCopy = async () => { if (ref.current?.textContent) { copyToClipboard(ref.current.textContent); @@ -118,8 +128,7 @@ const CodeBox: FC> = ({ kind="neutral" className={styles.action} onClick={onCopy} - disabled={!ref.current?.textContent} - tabIndex={0} + disabled={isDisabled} // Button disabled based on state > {t('components.common.codebox.copy')} From cf0e8f34de114687de5c0d7dc751635d45b0fe73 Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Wed, 11 Dec 2024 16:13:11 +0530 Subject: [PATCH 07/14] import KeyboardEvent & MouseEvent from react at Button index.file --- apps/site/components/Common/Button/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index c46edcc9acc81..dfddeb55bfce2 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -1,5 +1,6 @@ import classNames from 'classnames'; import type { FC, AnchorHTMLAttributes } from 'react'; +import type { KeyboardEvent, MouseEvent } from 'react'; import Link from '@/components/Link'; @@ -24,13 +25,13 @@ const Button: FC = ({ const isButton = !href; // Handle keydown events for keyboard accessibility - const handleKeyDown = (e: React.KeyboardEvent) => { + const handleKeyDown = (e: KeyboardEvent) => { if (disabled) return; if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (onClick) { - onClick(e as unknown as React.MouseEvent); + onClick(e as unknown as MouseEvent); } } }; From c4348da0dea9a5c22f8b6325b36f0eac90a944c7 Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Wed, 11 Dec 2024 16:25:28 +0530 Subject: [PATCH 08/14] refactor: consolidate React imports into a single line --- apps/site/components/Common/Button/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index dfddeb55bfce2..263c03943f0f1 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -1,6 +1,10 @@ import classNames from 'classnames'; -import type { FC, AnchorHTMLAttributes } from 'react'; -import type { KeyboardEvent, MouseEvent } from 'react'; +import type { + FC, + AnchorHTMLAttributes, + KeyboardEvent, + MouseEvent, +} from 'react'; import Link from '@/components/Link'; From e085abf3b37176f014b4e9225fd322158fd2a592 Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Wed, 11 Dec 2024 20:35:39 +0530 Subject: [PATCH 09/14] refactor: consolidate React imports into a single line --- apps/site/components/Common/Button/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index 263c03943f0f1..c4a636dc90616 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -12,7 +12,7 @@ import styles from './index.module.css'; type ButtonProps = AnchorHTMLAttributes & { kind?: 'neutral' | 'primary' | 'secondary' | 'special'; - // We have an extra `disabled` prop as we simulate a button + // We have an extra `disabled` prop as we simulate a button.. disabled?: boolean; }; From ef1efba7ea9b143ff5aebeb3e053ea88008e2a8c Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Sat, 14 Dec 2024 13:21:09 +0530 Subject: [PATCH 10/14] refactor: Button component & CodeBox compnent --- apps/site/components/Common/Button/index.tsx | 32 +++++++++++-------- apps/site/components/Common/CodeBox/index.tsx | 19 ++--------- 2 files changed, 21 insertions(+), 30 deletions(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index c4a636dc90616..62a6fee7b61cc 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -12,7 +12,7 @@ import styles from './index.module.css'; type ButtonProps = AnchorHTMLAttributes & { kind?: 'neutral' | 'primary' | 'secondary' | 'special'; - // We have an extra `disabled` prop as we simulate a button.. + // We have an extra `disabled` prop as we simulate a button disabled?: boolean; }; @@ -25,10 +25,7 @@ const Button: FC = ({ onClick, ...props }) => { - // Check if the component is being used as a button (no href provided) - const isButton = !href; - - // Handle keydown events for keyboard accessibility + //to handle the keyboard interactions, specifically for Enter and Space keys const handleKeyDown = (e: KeyboardEvent) => { if (disabled) return; @@ -40,17 +37,26 @@ const Button: FC = ({ } }; + // to manage mouse click events for the component, providing behavior consistent with the disabled state + const handleClick = (e: MouseEvent) => { + if (disabled) { + e.preventDefault(); + return; + } + if (onClick) { + onClick(e); + } + }; + return ( {children} diff --git a/apps/site/components/Common/CodeBox/index.tsx b/apps/site/components/Common/CodeBox/index.tsx index 42a69d0810867..0b6d97df48ca1 100644 --- a/apps/site/components/Common/CodeBox/index.tsx +++ b/apps/site/components/Common/CodeBox/index.tsx @@ -7,7 +7,7 @@ import { import classNames from 'classnames'; import { useTranslations } from 'next-intl'; import type { FC, PropsWithChildren, ReactNode } from 'react'; -import { Fragment, isValidElement, useEffect, useRef, useState } from 'react'; +import { Fragment, isValidElement, useRef } from 'react'; import Button from '@/components/Common/Button'; import { useCopyToClipboard, useNotification } from '@/hooks'; @@ -77,21 +77,11 @@ const CodeBox: FC> = ({ className, }) => { const ref = useRef(null); - const [isDisabled, setIsDisabled] = useState(true); const notify = useNotification(); const [, copyToClipboard] = useCopyToClipboard(); const t = useTranslations(); - // Update button disabled state based on content - useEffect(() => { - if (ref.current?.textContent) { - setIsDisabled(false); - } else { - setIsDisabled(true); - } - }, [children]); - const onCopy = async () => { if (ref.current?.textContent) { copyToClipboard(ref.current.textContent); @@ -124,12 +114,7 @@ const CodeBox: FC> = ({ {language} {showCopyButton && ( - From 83b524f2356c5645bf1347b12474cd41e1cb7ecb Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Sat, 14 Dec 2024 17:45:07 +0530 Subject: [PATCH 11/14] Update: Button component modified in case of type-saftey at some part --- apps/site/components/Common/Button/index.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index 62a6fee7b61cc..e7d8702195ac0 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -1,3 +1,5 @@ +'use client'; + import classNames from 'classnames'; import type { FC, @@ -27,18 +29,21 @@ const Button: FC = ({ }) => { //to handle the keyboard interactions, specifically for Enter and Space keys const handleKeyDown = (e: KeyboardEvent) => { - if (disabled) return; + if (disabled) { + e.preventDefault(); + return; + } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); - if (onClick) { + if (typeof onClick === 'function') { onClick(e as unknown as MouseEvent); } } }; // to manage mouse click events for the component, providing behavior consistent with the disabled state - const handleClick = (e: MouseEvent) => { + const onClickHandler = (e: MouseEvent) => { if (disabled) { e.preventDefault(); return; @@ -55,7 +60,7 @@ const Button: FC = ({ aria-disabled={disabled} className={classNames(styles.button, styles[kind], className)} tabIndex={disabled ? -1 : 0} // Ensure focusable if not disabled - onClick={handleClick} + onClick={onClickHandler} onKeyDown={handleKeyDown} {...props} > From eaf25de0871021ffe0d72e1ade978a4f5f1b78f6 Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Sat, 14 Dec 2024 19:47:39 +0530 Subject: [PATCH 12/14] omit unnecessary comment-lines, handle-proper naming --- apps/site/components/Common/Button/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index e7d8702195ac0..384ea2a91547e 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -28,7 +28,7 @@ const Button: FC = ({ ...props }) => { //to handle the keyboard interactions, specifically for Enter and Space keys - const handleKeyDown = (e: KeyboardEvent) => { + const onKeyDownHandler = (e: KeyboardEvent) => { if (disabled) { e.preventDefault(); return; @@ -61,7 +61,7 @@ const Button: FC = ({ className={classNames(styles.button, styles[kind], className)} tabIndex={disabled ? -1 : 0} // Ensure focusable if not disabled onClick={onClickHandler} - onKeyDown={handleKeyDown} + onKeyDown={onKeyDownHandler} {...props} > {children} From be629eba1600cdf2818fab944d594bf25fdff7f2 Mon Sep 17 00:00:00 2001 From: Farid Omar Date: Sat, 14 Dec 2024 19:55:17 +0530 Subject: [PATCH 13/14] omit unnecessary comment-lines, handle-proper naming --- apps/site/components/Common/Button/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index 384ea2a91547e..446f7f6a5184e 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -14,7 +14,6 @@ import styles from './index.module.css'; type ButtonProps = AnchorHTMLAttributes & { kind?: 'neutral' | 'primary' | 'secondary' | 'special'; - // We have an extra `disabled` prop as we simulate a button disabled?: boolean; }; @@ -27,7 +26,6 @@ const Button: FC = ({ onClick, ...props }) => { - //to handle the keyboard interactions, specifically for Enter and Space keys const onKeyDownHandler = (e: KeyboardEvent) => { if (disabled) { e.preventDefault(); @@ -42,7 +40,6 @@ const Button: FC = ({ } }; - // to manage mouse click events for the component, providing behavior consistent with the disabled state const onClickHandler = (e: MouseEvent) => { if (disabled) { e.preventDefault(); From a2b1696bf40ba77baec8ca1922ddf0253c93e68d Mon Sep 17 00:00:00 2001 From: Claudio W Date: Mon, 16 Dec 2024 12:41:27 +0000 Subject: [PATCH 14/14] Update apps/site/components/Common/Button/index.tsx Signed-off-by: Claudio W --- apps/site/components/Common/Button/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/site/components/Common/Button/index.tsx b/apps/site/components/Common/Button/index.tsx index 446f7f6a5184e..804cc296ecf46 100644 --- a/apps/site/components/Common/Button/index.tsx +++ b/apps/site/components/Common/Button/index.tsx @@ -45,7 +45,8 @@ const Button: FC = ({ e.preventDefault(); return; } - if (onClick) { + + if (typeof onClick === 'function') { onClick(e); } };