feat: inline copy feedback for code blocks

Co-Authored-By: cnaples79 <cnaples79@gmail.com>

Author: avivkeller

apps/site/components/Common/CodeBox.tsx

@@ -1,5 +1,9 @@
 'use client';
 
+import {
+  DocumentDuplicateIcon,
+  CodeBracketIcon,
+} from '@heroicons/react/24/outline';
 import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
 import { useTranslations } from 'next-intl';
 
@@ -11,28 +15,30 @@ import type { FC, PropsWithChildren } from 'react';
 type CodeBoxProps = {
   language: string;
   className?: string;
-  showCopyButton?: boolean;
 };
 
 const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = props => {
   const [copied, copyToClipboard] = useCopyToClipboard();
   const t = useTranslations();
 
-  const onCopy = (text: string) => {
-    copyToClipboard(text);
-  };
-
   return (
     <BaseCodeBox
       as={Link}
-      onCopy={onCopy}
-       copied={copied}
+      onCopy={copyToClipboard}
+      buttonContent={
+        copied ? (
+          <>
+            <DocumentDuplicateIcon className="size-4" />
+            {t('components.common.codebox.copied')}
+          </>
+        ) : (
+          <>
+            <CodeBracketIcon className="size-4" />
+            {t('components.common.codebox.copy')}
+          </>
+        )
+      }
       {...props}
-       buttonText={
-         copied
-           ? t('components.common.codebox.copied')
-           : t('components.common.codebox.copy')
-       }
     />
   );
 };

apps/site/components/MDX/CodeBox/index.tsx

@@ -2,24 +2,17 @@ import { getLanguageDisplayName } from '@node-core/rehype-shiki';
 
 import CodeBox from '#site/components/Common/CodeBox';
 
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, HTMLAttributes } from 'react';
 
-type CodeBoxProps = { className?: string; showCopyButton?: string };
-
-const MDXCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
+const MDXCodeBox: FC<HTMLAttributes<HTMLElement>> = ({
   children: code,
   className,
-  showCopyButton,
 }) => {
   const matches = className?.match(/language-(?<language>[a-zA-Z]+)/);
   const language = matches?.groups?.language ?? '';
 
   return (
-    <CodeBox
-      language={getLanguageDisplayName(language)}
-      showCopyButton={showCopyButton ? showCopyButton === 'true' : undefined}
-      className={className}
-    >
+    <CodeBox language={getLanguageDisplayName(language)} className={className}>
       {code}
     </CodeBox>
   );

apps/site/layouts/Base.tsx

@@ -1,19 +1,13 @@
-'use client';
-
-import { NotificationProvider } from '@node-core/ui-components/Providers/NotificationProvider';
-
 import { NavigationStateProvider } from '#site/providers/navigationStateProvider';
 
 import type { FC, PropsWithChildren } from 'react';
 
 import styles from './layouts.module.css';
 
 const BaseLayout: FC<PropsWithChildren> = ({ children }) => (
-  <NotificationProvider>
-    <NavigationStateProvider>
-      <div className={styles.baseLayout}>{children}</div>
-    </NavigationStateProvider>
-  </NotificationProvider>
+  <NavigationStateProvider>
+    <div className={styles.baseLayout}>{children}</div>
+  </NavigationStateProvider>
 );
 
 export default BaseLayout;

apps/site/next.config.mjs

@@ -71,7 +71,6 @@ const nextConfig = {
       '@radix-ui/react-label',
       '@radix-ui/react-select',
       '@radix-ui/react-tabs',
-      '@radix-ui/react-toast',
       '@radix-ui/react-tooltip',
       '@radix-ui/react-avatar',
       '@orama/highlight',

packages/rehype-shiki/src/plugin.mjs

@@ -181,15 +181,6 @@ export default async function rehypeShikiji(options) {
         codeLanguage
       );
 
-      // Adds a Copy Button to the CodeBox if requested as an additional parameter
-      // And avoids setting the property (overriding) if undefined or invalid value
-      if (
-        meta.showCopyButton &&
-        ['true', 'false'].includes(meta.showCopyButton)
-      ) {
-        children[0].properties.showCopyButton = meta.showCopyButton;
-      }
-
       // Replaces the <pre> element with the updated one
       parent.children.splice(index, 1, ...children);
     });

packages/ui-components/.storybook/preview.tsx

@@ -1,7 +1,5 @@
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
-import { NotificationProvider } from '#ui/Providers/NotificationProvider';
-
 import type { Preview, ReactRenderer } from '@storybook/react-webpack5';
 
 import { STORYBOOK_MODES, STORYBOOK_SIZES } from './constants';
@@ -17,11 +15,6 @@ const preview: Preview = {
   },
 
   decorators: [
-    Story => (
-      <NotificationProvider>
-        <Story />
-      </NotificationProvider>
-    ),
     withThemeByDataAttribute<ReactRenderer>({
       themes: { light: '', dark: 'dark' },
       defaultTheme: 'light',

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "type": "module",
   "exports": {
     "./*": [
@@ -44,7 +44,6 @@
     "@radix-ui/react-select": "~2.2.6",
     "@radix-ui/react-separator": "~1.1.8",
     "@radix-ui/react-tabs": "~1.1.13",
-    "@radix-ui/react-toast": "~1.2.15",
     "@radix-ui/react-tooltip": "~1.2.8",
     "@tailwindcss/postcss": "~4.1.17",
     "@vcarl/remark-headings": "~0.1.0",

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

@@ -78,7 +78,3 @@
     }
   }
 }
-
-.icon {
-  @apply size-4;
-}

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

@@ -20,19 +20,10 @@ server.listen(port, hostname, () => {
   console.log(\`Server running at http://\${hostname}:\${port}/\`);
 });`;
 
-const args = {
-  language: 'JavaScript (CJS)',
-  children: <code>{content}</code>,
-};
-
 export const Default: Story = {
-  args,
-};
-
-export const WithCopyButton: Story = {
   args: {
-    ...args,
-    showCopyButton: true,
+    language: 'JavaScript (CJS)',
+    children: <code>{content}</code>,
   },
 };
 

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

@@ -1,14 +1,12 @@
 'use client';
 
-import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import { Fragment, isValidElement, useRef } from 'react';
-import { CheckIcon } from '@heroicons/react/24/outline';
 
 import BaseButton from '#ui/Common/BaseButton';
 
 import type { LinkLike } from '#ui/types';
-import type { FC, PropsWithChildren, ReactElement } from 'react';
+import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
 
 import styles from './index.module.css';
 
@@ -70,8 +68,7 @@ type CodeBoxProps = {
   className?: string;
   onCopy: (text: string) => void;
   as?: LinkLike;
-  buttonText: string;
-  showCopyButton?: boolean;
+  buttonContent: ReactNode;
   copied?: boolean;
 };
 
@@ -80,10 +77,8 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   language,
   className,
   onCopy,
-  buttonText,
+  buttonContent,
   as = 'a',
-  showCopyButton = true,
-  copied = false,
 }: PropsWithChildren<CodeBoxProps>) => {
   const containerRef = useRef<HTMLPreElement>(null);
 
@@ -106,21 +101,14 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
       {language && (
         <div className={styles.footer}>
           <span className={styles.language}>{language}</span>
-          {showCopyButton && (
-            <BaseButton
-              as={as}
-              className={styles.action}
-              kind="neutral"
-              onClick={handleCopy}
-            >
-              {copied ? (
-                <CheckIcon className={styles.icon} />
-              ) : (
-                <DocumentDuplicateIcon className={styles.icon} />
-              )}
-              {buttonText}
-            </BaseButton>
-          )}
+          <BaseButton
+            as={as}
+            className={styles.action}
+            kind="neutral"
+            onClick={handleCopy}
+          >
+            {buttonContent}
+          </BaseButton>
         </div>
       )}
     </div>