@scality/core-ui 0.199.0 → 0.201.0

package/src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -2,6 +2,7 @@ import type { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
+import { getContrastText } from '../../utils';
 import { Loader } from '../loader/Loader.component';
 import { Tooltip, Props as TooltipProps } from '../tooltip/Tooltip.component';
 
@@ -71,29 +72,31 @@ export const ButtonStyled = styled.button<ButtonStyledProps>`
     const brand = props.theme;
 
     switch (props.variant) {
-      case 'primary':
+      case 'primary': {
+        const primaryTextColor = getContrastText(brand.buttonPrimary, brand.textPrimary, brand.textReverse) ?? brand.textPrimary;
         return css`
           background: ${brand.buttonPrimary};
           background-clip: padding-box, border-box;
           border: ${spacing.r1} solid transparent;
           border-color: ${brand.buttonPrimary};
-          color: ${brand.textPrimary};
+          color: ${primaryTextColor};
           &:hover:enabled {
             cursor: pointer;
             border: ${spacing.r1} solid ${brand.infoPrimary};
-            color: ${brand.textPrimary};
+            color: ${primaryTextColor};
           }
           // :focus-visible is the keyboard-only version of :focus
           &:focus-visible:enabled {
             ${FocusVisibleStyle}
-            color: ${brand.textPrimary};
+            color: ${primaryTextColor};
           }
           &:active:enabled {
             cursor: pointer;
-            color: ${brand.textPrimary};
+            color: ${primaryTextColor};
             border: ${spacing.r1} solid ${brand.infoSecondary};
           }
         `;
+      }
 
       case 'secondary':
         return css`

package/src/lib/components/buttonv2/CopyButton.component.test.tsx

@@ -0,0 +1,252 @@
+import "@testing-library/jest-dom";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { getWrapper } from "../../testUtils";
+import { CopyButton } from "./CopyButton.component";
+
+describe("CopyButton", () => {
+	const { Wrapper } = getWrapper();
+	const originalClipboard = navigator.clipboard;
+
+	beforeEach(() => {
+		Object.assign(navigator, {
+			clipboard: {
+				writeText: jest.fn(),
+				write: jest.fn(),
+			},
+		});
+		// JSDOM doesn't define ClipboardItem; needed for copyAsHtml path. Stub only — full interface not needed for tests.
+		if (typeof globalThis.ClipboardItem === "undefined") {
+			// @ts-expect-error — intentional stub for JSDOM; global ClipboardItem type expects full interface (getType, types, etc.)
+			globalThis.ClipboardItem = class {};
+		}
+	});
+
+	afterEach(() => {
+		Object.assign(navigator, { clipboard: originalClipboard });
+		jest.restoreAllMocks();
+	});
+
+	it("when writeText returns a rejected Promise, should enter the unsupported state", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockRejectedValueOnce(new Error("Clipboard denied"));
+
+		render(<CopyButton textToCopy="test" />, { wrapper: Wrapper });
+
+		const button = screen.getByRole("button", { name: "Copy" });
+		await act(() => userEvent.click(button));
+
+		await waitFor(() => {
+			expect(writeTextMock).toHaveBeenCalledWith("test");
+		});
+
+		// Unsupported state: button should not show success, and not be aria-disabled
+		expect(
+			screen.queryByRole("button", { name: "Copied !" }),
+		).not.toBeInTheDocument();
+		const buttonAfterReject = screen.getByRole("button", { name: "Copy" });
+		expect(buttonAfterReject).not.toHaveAttribute("aria-disabled", "true");
+	});
+
+	it("during success state click does nothing; after 2s resets to idle and click works again", async () => {
+		jest.useFakeTimers();
+		try {
+			const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+			writeTextMock.mockResolvedValue(undefined);
+
+			render(<CopyButton textToCopy="test" />, { wrapper: Wrapper });
+
+			await act(() =>
+				userEvent.click(screen.getByRole("button", { name: "Copy" })),
+			);
+
+			await waitFor(() => {
+				expect(
+					screen.getByRole("button", { name: "Copied !" }),
+				).toBeInTheDocument();
+			});
+
+			expect(writeTextMock).toHaveBeenCalledTimes(1);
+			const inSuccess = screen.getByRole("button", { name: "Copied !" });
+			expect(inSuccess).toHaveAttribute("aria-disabled", "true");
+
+			await act(() => userEvent.click(inSuccess));
+			expect(writeTextMock).toHaveBeenCalledTimes(1);
+
+			act(() => {
+				jest.advanceTimersByTime(2000);
+			});
+
+			await waitFor(() => {
+				expect(
+					screen.getByRole("button", { name: "Copy" }),
+				).toBeInTheDocument();
+				expect(
+					screen.getByRole("button", { name: "Copy" }),
+				).not.toHaveAttribute("aria-disabled", "true");
+			});
+
+			await act(() =>
+				userEvent.click(screen.getByRole("button", { name: "Copy" })),
+			);
+
+			await waitFor(() => {
+				expect(writeTextMock).toHaveBeenCalledTimes(2);
+			});
+		} finally {
+			jest.useRealTimers();
+		}
+	});
+
+	it("standard copy (writeText): on success shows Copied ! tooltip and aria-disabled", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="hello" />, { wrapper: Wrapper });
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(writeTextMock).toHaveBeenCalledWith("hello");
+			const button = screen.getByRole("button", { name: "Copied !" });
+			expect(button).toHaveAttribute("aria-disabled", "true");
+		});
+	});
+
+	it("copyAsHtml: calls clipboard.write and on success shows Copied ! and aria-disabled", async () => {
+		const writeMock = navigator.clipboard.write as jest.Mock;
+		writeMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="<b>hi</b>" copyAsHtml />, {
+			wrapper: Wrapper,
+		});
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(writeMock).toHaveBeenCalledTimes(1);
+			expect(writeMock.mock.calls[0][0]).toHaveLength(1);
+			expect(
+				screen.getByRole("button", { name: "Copied !" }),
+			).toBeInTheDocument();
+			expect(screen.getByRole("button", { name: "Copied !" })).toHaveAttribute(
+				"aria-disabled",
+				"true",
+			);
+		});
+	});
+
+	it("copyAsHtml: when write rejects, enters unsupported state", async () => {
+		const writeMock = navigator.clipboard.write as jest.Mock;
+		writeMock.mockRejectedValueOnce(new Error("Denied"));
+
+		render(<CopyButton textToCopy="<b>hi</b>" copyAsHtml />, {
+			wrapper: Wrapper,
+		});
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(writeMock).toHaveBeenCalled();
+		});
+
+		expect(
+			screen.queryByRole("button", { name: "Copied !" }),
+		).not.toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Copy" })).not.toHaveAttribute(
+			"aria-disabled",
+			"true",
+		);
+	});
+
+	it("ghost variant without label: tooltip is Copy then Copied ! on success", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="x" />, { wrapper: Wrapper });
+
+		expect(screen.getByRole("button", { name: "Copy" })).toBeInTheDocument();
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole("button", { name: "Copied !" }),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("ghost variant with label: tooltip is Copy {label} then Copied ! on success", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="x" label="key" />, { wrapper: Wrapper });
+
+		expect(
+			screen.getByRole("button", { name: "Copy key" }),
+		).toBeInTheDocument();
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy key" })),
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole("button", { name: "Copied !" }),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("outline variant without label: tooltip is Copy then Copied! on success", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton textToCopy="x" variant="outline" />, {
+			wrapper: Wrapper,
+		});
+
+		expect(screen.getByRole("button", { name: "Copy" })).toBeInTheDocument();
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy" })),
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole("button", { name: "Copied!" }),
+			).toBeInTheDocument();
+		});
+	});
+
+	it("outline variant with label: tooltip is Copy {label} then Copied {label}! on success", async () => {
+		const writeTextMock = navigator.clipboard.writeText as jest.Mock;
+		writeTextMock.mockResolvedValueOnce(undefined);
+
+		render(<CopyButton variant="outline" textToCopy="x" label="key" />, {
+			wrapper: Wrapper,
+		});
+
+		expect(
+			screen.getByRole("button", { name: "Copy key" }),
+		).toBeInTheDocument();
+
+		await act(() =>
+			userEvent.click(screen.getByRole("button", { name: "Copy key" })),
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole("button", { name: "Copied key!" }),
+			).toBeInTheDocument();
+		});
+	});
+});

package/src/lib/components/buttonv2/CopyButton.component.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Icon } from '../icon/Icon.component';
-import { Button, Props } from './Buttonv2.component';
+import { Button, type Props } from './Buttonv2.component';
 
 export const COPY_STATE_IDLE = 'idle';
 export const COPY_STATE_SUCCESS = 'success';
@@ -8,6 +8,7 @@ export const COPY_STATE_UNSUPPORTED = 'unsupported';
 export const useClipboard = () => {
   const [copyStatus, setCopyStatus] = useState(COPY_STATE_IDLE);
   useEffect(() => {
+    if (copyStatus === COPY_STATE_IDLE) return;
     const timer = setTimeout(() => {
       setCopyStatus(COPY_STATE_IDLE);
     }, 2000);
@@ -41,8 +42,14 @@ export const useClipboard = () => {
         });
     } else {
       // Copy as plain text only
-      navigator.clipboard.writeText(text);
-      setCopyStatus(COPY_STATE_SUCCESS);
+      navigator.clipboard
+        .writeText(text)
+        .then(() => {
+          setCopyStatus(COPY_STATE_SUCCESS);
+        })
+        .catch(() => {
+          setCopyStatus(COPY_STATE_UNSUPPORTED);
+        });
     }
   };
 
@@ -65,45 +72,45 @@ export const CopyButton = ({
   variant?: 'outline' | 'ghost';
 } & Omit<Props, 'tooltip' | 'label'>) => {
   const { copy, copyStatus } = useClipboard();
+  const isSuccess = copyStatus === COPY_STATE_SUCCESS;
   return (
     <Button
       {...props}
       variant={variant === 'outline' ? 'outline' : undefined}
       style={{
+        ...props.style,
+        ...(isSuccess && { cursor: 'not-allowed', opacity: 0.5 }),
         minWidth:
-          //Just to make sure the width of the button stays the same when copied!
           variant === 'outline'
-            ? (label ? label.length / 2 : 0) + 7 + 'rem'
+            ? `${(label ? label.length / 2 : 0) + 7}rem`
             : undefined,
       }}
       label={
         variant === 'outline'
-          ? copyStatus === COPY_STATE_SUCCESS
-            ? `Copied${label ? ' ' + label + '' : ''}!`
-            : `Copy${label ? ' ' + label : ''}`
+          ? isSuccess
+            ? `Copied${label ? ` ${label}` : ''}!`
+            : `Copy${label ? ` ${label}` : ''}`
           : undefined
       }
       icon={
         <Icon
-          name={copyStatus === COPY_STATE_SUCCESS ? 'Check' : 'Copy'}
-          color={
-            copyStatus === COPY_STATE_SUCCESS ? 'statusHealthy' : undefined
-          }
+          name={isSuccess ? 'Check' : 'Copy'}
+          color={isSuccess ? 'statusHealthy' : undefined}
         />
       }
-      disabled={copyStatus === COPY_STATE_SUCCESS || props.disabled}
-      onClick={() => copy(textToCopy, copyAsHtml)}
+      disabled={props.disabled}
+      aria-disabled={isSuccess || props.disabled}
+      onClick={() => {
+        if (!isSuccess) copy(textToCopy, copyAsHtml);
+      }}
       type="button"
       tooltip={
         variant !== 'outline'
           ? {
-              overlay:
-                copyStatus === COPY_STATE_SUCCESS
-                  ? 'Copied !'
-                  : `Copy${label ? ' ' + label : ''}`,
-              overlayStyle: {
-                maxWidth: '20rem',
-              },
+              overlay: isSuccess
+                ? 'Copied !'
+                : `Copy${label ? ` ${label}` : ''}`,
+              overlayStyle: { maxWidth: '20rem' },
               placement: 'top',
             }
           : undefined

package/src/lib/components/editor/Editor.component.tsx

@@ -0,0 +1,163 @@
+import { json } from '@codemirror/lang-json';
+import type { Extension } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+import CodeMirror from '@uiw/react-codemirror';
+import { jsonSchema as jsonSchemaExtension } from 'codemirror-json-schema';
+import type { JSONSchema7 } from 'json-schema';
+import { useMemo, useRef } from 'react';
+import { useTheme } from 'styled-components';
+import type { CoreUITheme } from '../../style/theme';
+import { createEditorTheme } from './editorTheme';
+
+const EDIT_KEYS = new Set(['Backspace', 'Delete', 'Enter', 'Tab']);
+
+export function isEditAttempt(e: KeyboardEvent): boolean {
+  const isTyping = !e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1;
+  const isCutPaste = (e.ctrlKey || e.metaKey) && (e.key === 'x' || e.key === 'v');
+  return isTyping || EDIT_KEYS.has(e.key) || isCutPaste;
+}
+
+export function createReadOnlyTooltipExtension(): Extension {
+  return ViewPlugin.define((view) => {
+    let tooltip: HTMLDivElement | null = null;
+    let hideTimer: ReturnType<typeof setTimeout> | null = null;
+    let wrapper: HTMLDivElement | null = null;
+
+    const dismiss = () => {
+      tooltip?.remove();
+      tooltip = null;
+      if (hideTimer) clearTimeout(hideTimer);
+      hideTimer = null;
+    };
+
+    const show = () => {
+      if (hideTimer) clearTimeout(hideTimer);
+
+      const head = view.state.selection.main.head;
+      const coords = view.coordsAtPos(head);
+      if (!coords) return;
+
+      if (!wrapper) {
+        wrapper = document.createElement('div');
+        Object.assign(wrapper.style, {
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+          overflow: 'visible',
+          zIndex: '100',
+        });
+        view.dom.parentElement?.appendChild(wrapper);
+      }
+
+      const parentRect =
+        wrapper.offsetParent?.getBoundingClientRect() ??
+        view.dom.getBoundingClientRect();
+
+      if (!tooltip) {
+        tooltip = document.createElement('div');
+        tooltip.className = 'cm-readonly-tooltip';
+        tooltip.textContent = 'Cannot edit in read-only editor';
+        tooltip.setAttribute('role', 'status');
+        tooltip.setAttribute('aria-live', 'polite');
+        Object.assign(tooltip.style, {
+          position: 'absolute',
+          padding: '4px 12px',
+          borderRadius: '4px',
+          fontSize: '12px',
+          pointerEvents: 'none',
+          whiteSpace: 'nowrap',
+        });
+        wrapper.appendChild(tooltip);
+      }
+
+      tooltip.style.left = `${coords.left - parentRect.left}px`;
+      tooltip.style.top = `${coords.bottom - parentRect.top + 4}px`;
+
+      hideTimer = setTimeout(dismiss, 2000);
+    };
+
+    const handler = (e: KeyboardEvent) => {
+      if (isEditAttempt(e)) show();
+    };
+
+    view.dom.addEventListener('keydown', handler, true);
+
+    return {
+      destroy() {
+        view.dom.removeEventListener('keydown', handler, true);
+        dismiss();
+        wrapper?.remove();
+      },
+    };
+  });
+}
+
+export interface EditorProps {
+  value: string;
+  onChange?: (value: string) => void;
+  readOnly?: boolean;
+  language?: 'json' | { name: 'json'; schema?: JSONSchema7 };
+  height?: string;
+  width?: string;
+}
+
+export const Editor = ({
+  value,
+  onChange,
+  readOnly = false,
+  language = 'json',
+  height = '400px',
+  width = '100%',
+}: EditorProps) => {
+  const theme = useTheme() as CoreUITheme;
+
+  const editorTheme = useMemo(() => createEditorTheme(theme), [theme]);
+
+  const langName = typeof language === 'string' ? language : language.name;
+  const schema = typeof language === 'object' ? language.schema : undefined;
+
+  const readOnlyTooltipExt = useRef<Extension | null>(null);
+  if (!readOnlyTooltipExt.current) {
+    readOnlyTooltipExt.current = createReadOnlyTooltipExtension();
+  }
+
+  const extensions = useMemo(() => {
+    const exts: Extension[] = [];
+    if (langName === 'json') {
+      if (schema) {
+        exts.push(...jsonSchemaExtension(schema));
+      } else {
+        exts.push(json());
+      }
+    }
+    if (readOnly) {
+      exts.push(readOnlyTooltipExt.current!);
+    }
+    return exts;
+  }, [langName, schema, readOnly]);
+
+  return (
+    <CodeMirror
+      value={value}
+      height={height}
+      width={width}
+      extensions={extensions}
+      onChange={onChange}
+      readOnly={readOnly}
+      theme={editorTheme}
+      basicSetup={{
+        lineNumbers: true,
+        foldGutter: true,
+        autocompletion: true,
+        highlightActiveLine: true,
+        highlightActiveLineGutter: true,
+        indentOnInput: true,
+        bracketMatching: true,
+        closeBrackets: true,
+      }}
+    />
+  );
+};