Add copy button as a separate component

.vscode/settings.json

@@ -16,5 +16,5 @@
   },
   "editor.formatOnSave": true,
   "editor.formatOnPaste": true,
-  "editor.formatOnType": true,
+  "editor.formatOnType": true
 }

package.json

@@ -22,7 +22,7 @@
     "preview": "vite preview",
     "prettier": "prettier --write 'src/**/**/*.{js,ts,tsx,mdx}'",
     "prettier:check": "prettier --check 'src/**/**/*.{js,ts,tsx,mdx}'",
-    "lint": "eslint src/**/**/*.{js,ts,tsx,mdx}",
+    "lint": "eslint --ext .js,.ts,.tsx,.mdx src/",
     "tsc": "tsc --noEmit",
     "storybook": "storybook dev -s ./src/assets -p 6006 --no-open",
     "build-storybook": "storybook build",

src/components/codefield/CodeField.tsx

@@ -1,21 +1,23 @@
-import { ForwardRefRenderFunction, HTMLAttributes, forwardRef, useMemo } from "react";
+import { ForwardRefRenderFunction, HTMLAttributes, forwardRef, memo, useMemo } from "react";
 import CodeMirror, { ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { getCodeMirrorTheme } from "./codeMirrorTheme";
 import { useStyletron } from "styletron-react";
 import { styles as s } from "./styles";
 import { getCodeMirrorBasicSetup } from "./codeMirrorBasicSetup";
 import { CreateThemeOptions } from "@uiw/codemirror-themes";
 import { prefixLineNumberExtension } from "./prefixLineNumberExtension";
-import { MemoizedCopyButton } from "./CopyButton";
-import { useCopyToClipboard } from "./useCopyToClipboard";
 import { createDefaultStylesOverridesExtension } from "./defaultStylesOverridesExtension";
+import { CopyButton } from "../copy-button";
+import { BUTTON_KIND, BUTTON_SIZE } from "../button";
+
+const MemoizedCopyButton = memo(CopyButton);
 
 export type CodeFieldProps = {
   code: string;
   extensions?: ReactCodeMirrorProps["extensions"];
   themeOverrides?: Partial<CreateThemeOptions>;
   displayCopy?: boolean;
-  onCopy?: (code: string, isCopied: boolean) => void;
+  onCopy?: (code: string) => void;
   transformOnCopy?: (code: string) => string;
   showLineNumbers?: boolean;
   className?: string;
@@ -42,7 +44,6 @@ const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFiel
   ref
 ) => {
   const [css] = useStyletron();
-  const copyHandler = useCopyToClipboard(code, onCopy, transformOnCopy);
   const styleOverridesExtention = useMemo(
     () => createDefaultStylesOverridesExtension(showLineNumbers),
     [showLineNumbers]
@@ -66,7 +67,15 @@ const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFiel
         basicSetup={getCodeMirrorBasicSetup(showLineNumbers, editable)}
         className={css(s.codemirrorStyles)}
       />
-      {displayCopy && <MemoizedCopyButton copyHandler={copyHandler} />}
+      {displayCopy && (
+        <MemoizedCopyButton
+          onCopy={onCopy}
+          textToCopy={code}
+          transformOnCopy={transformOnCopy}
+          size={BUTTON_SIZE.default}
+          kind={BUTTON_KIND.text}
+        />
+      )}
     </div>
   );
 };

src/components/copy-button/CopyButton.stories.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story, ArgsTable, Source } from "@storybook/blocks";
+import CopyButton from "./CopyButton";
+import { BUTTON_SIZE } from "../button";
+
+<Meta title="Form/CopyButton" component={CopyButton} />
+
+export const Template = ({ ...args }) => {
+  return <CopyButton {...args} />;
+};
+
+# CopyButton
+
+<Canvas isColumn>
+  <Story name="Default" args={{ textToCopy: "text to copy" }}>
+    {Template}
+  </Story>
+  <Story
+    name="With size"
+    args={{
+      textToCopy: "text to copy",
+      size: BUTTON_SIZE.compact,
+    }}
+  >
+    {Template}
+  </Story>
+</Canvas>
+
+<ArgsTable of={CopyButton} />
+
+### Usage:
+
+To use, import the component `CopyButton` from `@nilfoundation/ui-kit`.
+
+<Source
+  language="tsx"
+  dark
+  format={true}
+  code={`
+        import {CopyButton} from "@nilfoundation/ui-kit";
+        ...
+         <CopyButton textToCopy="text to copy" onCopy={() => alert("Copied!")} />
+  `}
+/>

src/components/copy-button/CopyButton.test.tsx

@@ -0,0 +1,19 @@
+import { screen } from "@testing-library/react";
+import CopyButton from "./CopyButton";
+import { render } from "../../test-utils/render";
+import { createComponentSSRTest } from "../../test-utils/createComponentSSRTest";
+
+describe("CopyButton", () => {
+  it("renders without crashing", () => {
+    render(<CopyButton textToCopy="Text" data-testid="Button" />);
+
+    const el = screen.getByTestId("Button");
+    expect(el).toBeInTheDocument();
+  });
+
+  it("renders ssr without crashing", () => {
+    createComponentSSRTest(<CopyButton textToCopy="Text" />);
+  });
+
+  // Add more tests as needed
+});

src/components/copy-button/CopyButton.tsx

@@ -0,0 +1,49 @@
+import { FC, ForwardRefRenderFunction, forwardRef } from "react";
+import { CopyButtonProps } from "./types";
+import { CopyToClipboardComponent } from "../../shared/ui/copy-to-clipboard-component";
+import { ButtonIcon } from "../button-icon";
+import { CopyIcon } from "../icons";
+import { BUTTON_KIND, BUTTON_SIZE } from "../button";
+
+const CopyButtonRenderFunction: ForwardRefRenderFunction<HTMLButtonElement, CopyButtonProps> = (
+  {
+    size = BUTTON_SIZE.compact,
+    onCopy,
+    transformOnCopy,
+    textToCopy,
+    copyTooltipText,
+    copiedTooltipText,
+    onClick: onClickProp,
+    kind = BUTTON_KIND.text,
+    ...buttonProps
+  },
+  ref
+) => {
+  return (
+    <CopyToClipboardComponent
+      onCopy={onCopy}
+      transformOnCopy={transformOnCopy}
+      textToCopy={textToCopy}
+      copyTooltipText={copyTooltipText}
+      copiedTooltipText={copiedTooltipText}
+      render={({ onClick }) => (
+        <ButtonIcon
+          ref={ref}
+          icon={<CopyIcon />}
+          size={size}
+          kind={kind}
+          {...buttonProps}
+          onClick={(e) => {
+            onClickProp && onClickProp(e);
+            onClick();
+          }}
+        />
+      )}
+    />
+  );
+};
+
+const CopyButton: FC<CopyButtonProps> = forwardRef(CopyButtonRenderFunction);
+CopyButton.displayName = "CopyButton";
+
+export default CopyButton;

src/components/copy-button/index.ts

@@ -0,0 +1,3 @@
+export { default as CopyButton } from "./CopyButton";
+export type { CopyButtonProps } from "./types";
+export type { CopyToClipboardComponentProps } from "../../shared/ui/copy-to-clipboard-component";

src/components/copy-button/types.ts

@@ -0,0 +1,4 @@
+import { CopyToClipboardComponentProps } from "../../shared/ui/copy-to-clipboard-component";
+import { ButtonIconProps } from "../button-icon";
+
+export type CopyButtonProps = Omit<CopyToClipboardComponentProps, "render"> & Omit<ButtonIconProps, "icon">;

src/components/index.ts

@@ -31,3 +31,4 @@ export * from "./codefield";
 export * from "./toggleGroup";
 export * from "./toggle";
 export * from "./button-icon";
+export * from "./copy-button";

src/shared/ui/copy-to-clipboard-component/CopyToClipboardComponent.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { StatefulTooltip, TOOLTIP_KIND } from "../../../components";
+import { ACCESSIBILITY_TYPE, PLACEMENT } from "baseui/popover";
+import { useCopyToClipboard } from "./useCopyToClipboard";
+import { CopyToClipboardComponentProps } from "./types";
+
+const CopyToClipboardComponent = ({
+  textToCopy,
+  transformOnCopy,
+  onCopy,
+  render,
+  copyTooltipText = "Copy",
+  copiedTooltipText = "Copied",
+}: CopyToClipboardComponentProps) => {
+  const copyHandler = useCopyToClipboard(textToCopy, onCopy, transformOnCopy);
+  const [copied, setCopied] = useState(false);
+  const onClick = () => {
+    const isCopied = copyHandler();
+    setCopied(isCopied);
+  };
+
+  return (
+    <StatefulTooltip
+      content={copied ? copiedTooltipText : copyTooltipText}
+      accessibilityType={ACCESSIBILITY_TYPE.tooltip}
+      placement={PLACEMENT.bottom}
+      onMouseLeave={() => setCopied(false)}
+      onBlur={() => setCopied(false)}
+      kind={copied ? TOOLTIP_KIND.SUCCESS : TOOLTIP_KIND.DEFAULT}
+    >
+      {render({ onClick, copied })}
+    </StatefulTooltip>
+  );
+};
+
+export default CopyToClipboardComponent;

src/shared/ui/copy-to-clipboard-component/index.ts

@@ -0,0 +1,2 @@
+export { default as CopyToClipboardComponent } from "./CopyToClipboardComponent";
+export type { CopyToClipboardComponentProps } from "./types";

src/shared/ui/copy-to-clipboard-component/types.ts

@@ -0,0 +1,8 @@
+export type CopyToClipboardComponentProps = {
+  textToCopy: string;
+  render: (props: { onClick: () => void; copied: boolean }) => JSX.Element;
+  transformOnCopy?: (code: string) => string;
+  onCopy?: (textToCopy: string) => void;
+  copyTooltipText?: string;
+  copiedTooltipText?: string;
+};

src/components/codefield/useCopyToClipboard.ts → src/shared/ui/copy-to-clipboard-component/useCopyToClipboard.ts

@@ -1,18 +1,17 @@
 import { useCallback } from "react";
-import { CodeFieldProps } from "./CodeField";
 import copy from "copy-to-clipboard";
 
 export const useCopyToClipboard = (
   code: string,
-  onCopy?: CodeFieldProps["onCopy"],
-  transformOnCopy?: CodeFieldProps["transformOnCopy"]
+  onCopy?: (code: string) => void,
+  transformOnCopy?: (code: string) => string
 ) => {
   const onClick = useCallback(() => {
     const codeToCopy = transformOnCopy ? transformOnCopy(code) : code;
     const result = copy(codeToCopy);
 
-    if (onCopy) {
-      onCopy(codeToCopy, result);
+    if (onCopy && result) {
+      onCopy(codeToCopy);
     }
 
     return result;