chore(ui): simplify CodeBox-like UI components (#7793)

* chore(ui): simplify CodeBox-like UI components

* Apply suggestions from code review

Co-authored-by: Claudio W. <[email protected]>
Signed-off-by: Aviv Keller <[email protected]>

---------

Signed-off-by: Aviv Keller <[email protected]>
Co-authored-by: Claudio W. <[email protected]>

Author: avivkeller

apps/site/components/Common/CodeBox.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { CodeBracketIcon } from '@heroicons/react/24/outline';
 import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
+import styles from '@node-core/ui-components/Common/BaseCodeBox/index.module.css';
 import { useTranslations } from 'next-intl';
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
 import Link from '#site/components/Link';
 import { useCopyToClipboard, useNotification } from '#site/hooks';
@@ -18,17 +20,26 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = props => {
   const notify = useNotification();
   const t = useTranslations();
 
-  const onCopy = (text: string, message: ReactNode) => {
+  const onCopy = (text: string) => {
     copyToClipboard(text);
-    notify({ duration: 300, message });
+
+    notify({
+      duration: 300,
+      message: (
+        <div className="flex items-center gap-3">
+          <CodeBracketIcon className={styles.icon} />
+          {t('components.common.codebox.copied')}
+        </div>
+      ),
+    });
   };
+
   return (
     <BaseCodeBox
       as={Link}
       onCopy={onCopy}
       {...props}
-      copyText={t('components.common.codebox.copy')}
-      copiedText={t('components.common.codebox.copied')}
+      buttonText={t('components.common.codebox.copy')}
     />
   );
 };

apps/site/next.mdx.use.client.mjs

@@ -1,6 +1,7 @@
 'use strict';
 
 import Blockquote from '@node-core/ui-components/Common/Blockquote';
+import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs';
 
 import Button from './components/Common/Button';
 import DownloadButton from './components/Downloads/DownloadButton';
@@ -18,7 +19,6 @@ import ReleaseVersionDropdown from './components/Downloads/Release/VersionDropdo
 import Link from './components/Link';
 import LinkWithArrow from './components/LinkWithArrow';
 import MDXCodeBox from './components/MDX/CodeBox';
-import MDXCodeTabs from './components/MDX/CodeTabs';
 import MDXImage from './components/MDX/Image';
 import { ReleaseProvider } from './providers/releaseProvider';
 

packages/ui-components/Common/BaseCodeBox/index.module.css

@@ -73,12 +73,6 @@
   }
 }
 
-.notification {
-  @apply flex
-    items-center
-    gap-3;
-}
-
 .icon {
   @apply size-4;
 }

packages/ui-components/Common/BaseCodeBox/index.tsx

@@ -1,11 +1,8 @@
 'use client';
 
-import {
-  DocumentDuplicateIcon,
-  CodeBracketIcon,
-} from '@heroicons/react/24/outline';
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
-import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import { Fragment, isValidElement, useRef } from 'react';
 
 import BaseButton from '#ui/Common/BaseButton';
@@ -69,10 +66,9 @@ const transformCode = <T extends ReactElement<PropsWithChildren>>(
 interface CodeBoxProps {
   language: string;
   className?: string;
-  onCopy: (text: string, message: ReactNode) => void;
+  onCopy: (text: string) => void;
   as?: LinkLike;
-  copyText: string;
-  copiedText: string;
+  buttonText: string;
   showCopyButton?: boolean;
 }
 
@@ -81,8 +77,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   language,
   className,
   onCopy,
-  copiedText,
-  copyText,
+  buttonText,
   as = 'a',
   showCopyButton = true,
 }: PropsWithChildren<CodeBoxProps>) => {
@@ -91,13 +86,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   const handleCopy = (): void => {
     const text = containerRef.current?.textContent;
     if (text) {
-      onCopy(
-        text,
-        <div className={styles.notification}>
-          <CodeBracketIcon className={styles.icon} />
-          {copiedText}
-        </div>
-      );
+      onCopy(text);
     }
   };
 
@@ -121,7 +110,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
               onClick={handleCopy}
             >
               <DocumentDuplicateIcon className={styles.icon} />
-              {copyText}
+              {buttonText}
             </BaseButton>
           )}
         </div>

packages/ui-components/Common/CodeTabs/index.stories.tsx

@@ -40,8 +40,7 @@ server.listen(port, hostname, () => {
 
 const boxProps = {
   onCopy: console.log,
-  copyText: '[Copy Text]',
-  copiedText: '[Copied Text]',
+  buttonText: '[Button Text]',
 };
 
 const TabsContent: FC = () => (

…s/site/components/MDX/CodeTabs/index.tsx packages/ui-components/MDX/CodeTabs.tsxapps/site/components/MDX/CodeTabs/index.tsx renamed to packages/ui-components/MDX/CodeTabs.tsx apps/site/components/MDX/CodeTabs/index.tsx renamed to packages/ui-components/MDX/CodeTabs.tsx

@@ -1,7 +1,8 @@
-import CodeTabs from '@node-core/ui-components/Common/CodeTabs';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import type { FC, ReactElement } from 'react';
 
+import CodeTabs from '#ui/Common/CodeTabs';
+
 type MDXCodeTabsProps = {
   children: Array<ReactElement<unknown>>;
   languages: string;

packages/ui-components/package.json

@@ -38,7 +38,7 @@
     "@radix-ui/react-label": "~2.1.2",
     "@radix-ui/react-select": "~2.2.2",
     "@radix-ui/react-separator": "~1.1.3",
-    "@radix-ui/react-tabs": "~1.1.3",
+    "@radix-ui/react-tabs": "~1.1.9",
     "@radix-ui/react-toast": "~1.2.6",
     "@radix-ui/react-tooltip": "~1.2.4",
     "@tailwindcss/postcss": "~4.1.5",