@scality/core-ui 0.200.0 → 0.201.0

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

@@ -0,0 +1,295 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { coreUIAvailableThemes } from '../../style/theme';
+import { createEditorTheme, isDarkBackground } from './editorTheme';
+import {
+  Editor,
+  isEditAttempt,
+  createReadOnlyTooltipExtension,
+} from './Editor.component';
+import React from "react";
+
+const mockJsonSchema = jest.fn(() => []);
+
+jest.mock('@uiw/react-codemirror', () => {
+  const MockCodeMirror = (props: {
+    value?: string;
+    readOnly?: boolean;
+    height?: string;
+    width?: string;
+    onChange?: (value: string) => void;
+  }) => (
+    <textarea
+      data-testid="codemirror-editor"
+      value={props.value}
+      readOnly={props.readOnly}
+      style={{ height: props.height, width: props.width }}
+      onChange={(e) => props.onChange?.(e.target.value)}
+    />
+  );
+  MockCodeMirror.displayName = 'MockCodeMirror';
+  return { __esModule: true, default: MockCodeMirror };
+});
+
+jest.mock('codemirror-json-schema', () => ({
+  jsonSchema: (...args: unknown[]) => (mockJsonSchema as (...a: unknown[]) => unknown).apply(null, args),
+}));
+
+const darkTheme = coreUIAvailableThemes.darkRebrand;
+const lightTheme = coreUIAvailableThemes.artescaLight;
+
+const renderWithTheme = (ui: React.ReactElement, theme = darkTheme) =>
+  render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>);
+
+beforeEach(() => {
+  mockJsonSchema.mockClear();
+});
+
+describe('isDarkBackground', () => {
+  it('returns true for dark themes', () => {
+    expect(isDarkBackground(darkTheme)).toBe(true);
+    expect(isDarkBackground(coreUIAvailableThemes.ring9dark)).toBe(true);
+    expect(isDarkBackground(coreUIAvailableThemes['G-Dark'])).toBe(true);
+  });
+
+  it('returns false for light themes', () => {
+    expect(isDarkBackground(lightTheme)).toBe(false);
+  });
+});
+
+describe('Editor', () => {
+  it('renders with dark theme', () => {
+    renderWithTheme(<Editor value='{"key": "value"}' />, darkTheme);
+    expect(screen.getByTestId('codemirror-editor')).toBeInTheDocument();
+  });
+
+  it('renders with light theme', () => {
+    renderWithTheme(<Editor value='{"key": "value"}' />, lightTheme);
+    expect(screen.getByTestId('codemirror-editor')).toBeInTheDocument();
+  });
+
+  it('renders in read-only mode', () => {
+    renderWithTheme(<Editor value='{"key": "value"}' readOnly />);
+    expect(screen.getByTestId('codemirror-editor')).toHaveAttribute('readonly');
+  });
+
+  it('displays the provided value', () => {
+    const json = '{"hello": "world"}';
+    renderWithTheme(<Editor value={json} />);
+    expect(screen.getByTestId('codemirror-editor')).toHaveValue(json);
+  });
+
+  it('renders with custom dimensions', () => {
+    renderWithTheme(<Editor value="" height="200px" width="500px" />);
+    const editor = screen.getByTestId('codemirror-editor');
+    expect(editor).toHaveStyle({ height: '200px', width: '500px' });
+  });
+
+  it('accepts language string shorthand', () => {
+    renderWithTheme(<Editor value='{"key": "value"}' language="json" />);
+    expect(screen.getByTestId('codemirror-editor')).toBeInTheDocument();
+  });
+
+  it('calls jsonSchema extension when schema is provided', () => {
+    const schema = {
+      type: 'object' as const,
+      properties: { name: { type: 'string' as const } },
+    };
+    renderWithTheme(
+      <Editor value='{"name": "test"}' language={{ name: 'json', schema }} />,
+    );
+    expect(mockJsonSchema).toHaveBeenCalledWith(schema);
+  });
+
+  it('does not call jsonSchema extension without schema', () => {
+    renderWithTheme(<Editor value='{}' language="json" />);
+    expect(mockJsonSchema).not.toHaveBeenCalled();
+  });
+
+  it('triggers onChange callback', () => {
+    const handleChange = jest.fn();
+    renderWithTheme(<Editor value='{"a": 1}' onChange={handleChange} />);
+    fireEvent.change(screen.getByTestId('codemirror-editor'), {
+      target: { value: '{"a": 2}' },
+    });
+    expect(handleChange).toHaveBeenCalledWith('{"a": 2}');
+  });
+});
+
+describe('isEditAttempt', () => {
+  const makeEvent = (overrides: Partial<KeyboardEvent> = {}): KeyboardEvent =>
+    ({
+      ctrlKey: false,
+      metaKey: false,
+      altKey: false,
+      ...overrides,
+    }) as unknown as KeyboardEvent;
+
+  it('detects regular character typing', () => {
+    expect(isEditAttempt(makeEvent({ key: 'a' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: '1' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: ' ' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: '{' }))).toBe(true);
+  });
+
+  it('detects edit keys (Backspace, Delete, Enter, Tab)', () => {
+    expect(isEditAttempt(makeEvent({ key: 'Backspace' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'Delete' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'Enter' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'Tab' }))).toBe(true);
+  });
+
+  it('detects cut and paste shortcuts', () => {
+    expect(isEditAttempt(makeEvent({ key: 'x', ctrlKey: true }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'v', ctrlKey: true }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'x', metaKey: true }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'v', metaKey: true }))).toBe(true);
+  });
+
+  it('ignores copy, select-all, and undo shortcuts', () => {
+    expect(isEditAttempt(makeEvent({ key: 'c', ctrlKey: true }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'a', ctrlKey: true }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'z', ctrlKey: true }))).toBe(false);
+  });
+
+  it('ignores navigation and modifier keys', () => {
+    expect(isEditAttempt(makeEvent({ key: 'ArrowLeft' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'ArrowUp' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'Escape' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'Shift' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'Control' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'F1' }))).toBe(false);
+  });
+});
+
+describe('createEditorTheme', () => {
+  it('returns two extensions for dark theme', () => {
+    const result = createEditorTheme(darkTheme);
+    expect(Array.isArray(result)).toBe(true);
+    expect(result).toHaveLength(2);
+  });
+
+  it('returns two extensions for light theme', () => {
+    const result = createEditorTheme(lightTheme);
+    expect(Array.isArray(result)).toBe(true);
+    expect(result).toHaveLength(2);
+  });
+
+  it('handles all available themes without errors', () => {
+    Object.values(coreUIAvailableThemes).forEach((theme) => {
+      expect(() => createEditorTheme(theme)).not.toThrow();
+    });
+  });
+});
+
+describe('createReadOnlyTooltipExtension', () => {
+  let parent: HTMLDivElement;
+
+  beforeEach(() => {
+    parent = document.createElement('div');
+    document.body.appendChild(parent);
+  });
+
+  afterEach(() => {
+    parent.remove();
+  });
+
+  it('shows tooltip with ARIA attributes on edit attempt', () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello',
+        extensions: [createReadOnlyTooltipExtension()],
+      }),
+      parent,
+    });
+
+    jest
+      .spyOn(view, 'coordsAtPos')
+      .mockReturnValue({ top: 10, bottom: 20, left: 30, right: 40 });
+
+    view.dom.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'a', bubbles: true }),
+    );
+
+    const tooltip = parent.querySelector('.cm-readonly-tooltip');
+    expect(tooltip).not.toBeNull();
+    expect(tooltip?.getAttribute('role')).toBe('status');
+    expect(tooltip?.getAttribute('aria-live')).toBe('polite');
+    expect(tooltip?.textContent).toBe('Cannot edit in read-only editor');
+
+    view.destroy();
+  });
+
+  it('dismisses tooltip after 2 seconds', () => {
+    jest.useFakeTimers();
+
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello',
+        extensions: [createReadOnlyTooltipExtension()],
+      }),
+      parent,
+    });
+
+    jest
+      .spyOn(view, 'coordsAtPos')
+      .mockReturnValue({ top: 10, bottom: 20, left: 30, right: 40 });
+
+    view.dom.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'a', bubbles: true }),
+    );
+    expect(parent.querySelector('.cm-readonly-tooltip')).not.toBeNull();
+
+    jest.advanceTimersByTime(2000);
+    expect(parent.querySelector('.cm-readonly-tooltip')).toBeNull();
+
+    view.destroy();
+    jest.useRealTimers();
+  });
+
+  it('cleans up DOM elements on destroy', () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello',
+        extensions: [createReadOnlyTooltipExtension()],
+      }),
+      parent,
+    });
+
+    jest
+      .spyOn(view, 'coordsAtPos')
+      .mockReturnValue({ top: 10, bottom: 20, left: 30, right: 40 });
+
+    view.dom.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'a', bubbles: true }),
+    );
+    expect(parent.querySelector('.cm-readonly-tooltip')).not.toBeNull();
+
+    view.destroy();
+    expect(parent.querySelector('.cm-readonly-tooltip')).toBeNull();
+  });
+
+  it('does not show tooltip for navigation keys', () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello',
+        extensions: [createReadOnlyTooltipExtension()],
+      }),
+      parent,
+    });
+
+    jest
+      .spyOn(view, 'coordsAtPos')
+      .mockReturnValue({ top: 10, bottom: 20, left: 30, right: 40 });
+
+    view.dom.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }),
+    );
+
+    expect(parent.querySelector('.cm-readonly-tooltip')).toBeNull();
+
+    view.destroy();
+  });
+});

package/src/lib/components/editor/editorTheme.ts

@@ -0,0 +1,126 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import { getLuminance } from 'polished';
+import type { Extension } from '@codemirror/state';
+import type { CoreUITheme } from '../../style/theme';
+import { lineColor5 } from '../../style/theme';
+
+export function isDarkBackground(theme: CoreUITheme): boolean {
+  try {
+    return getLuminance(theme.backgroundLevel1) < 0.5;
+  } catch {
+    return true;
+  }
+}
+
+function getSyntaxColors(theme: CoreUITheme, isDark: boolean) {
+  if (isDark) {
+    return {
+      property: theme.statusHealthy,
+      string: lineColor5,
+      number: lineColor5,
+      boolean: lineColor5,
+      null: theme.textSecondary,
+      bracket: theme.textPrimary,
+      punctuation: theme.textPrimary,
+    };
+  }
+  return {
+    property: '#4078F2',
+    string: '#50A14F',
+    number: '#986801',
+    boolean: '#0184BC',
+    null: '#0184BC',
+    bracket: '#383A42',
+    punctuation: '#383A42',
+  };
+}
+
+export function createEditorTheme(theme: CoreUITheme): Extension {
+  const isDark = isDarkBackground(theme);
+  const syntax = getSyntaxColors(theme, isDark);
+
+  const editorViewTheme = EditorView.theme(
+    {
+      '&': {
+        backgroundColor: theme.backgroundLevel1,
+        color: theme.textPrimary,
+      },
+      '.cm-content': {
+        caretColor: theme.textPrimary,
+        fontFamily: "'Courier New', monospace",
+        fontSize: '12px',
+      },
+      '.cm-cursor, .cm-dropCursor': {
+        borderLeftColor: theme.textPrimary,
+      },
+      '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
+        {
+          backgroundColor: theme.highlight,
+        },
+      '.cm-gutters': {
+        backgroundColor: theme.backgroundLevel1,
+        color: theme.textSecondary,
+        border: 'none',
+        borderRight: `1px solid ${theme.border}`,
+      },
+      '.cm-activeLineGutter': {
+        backgroundColor: theme.backgroundLevel3,
+      },
+      '.cm-activeLine': {
+        backgroundColor: theme.backgroundLevel3,
+      },
+      '.cm-foldPlaceholder': {
+        backgroundColor: 'transparent',
+        border: 'none',
+        color: theme.textSecondary,
+      },
+      '.cm-diagnostic-error': {
+        borderLeftColor: theme.statusCritical,
+      },
+      '.cm-diagnostic-warning': {
+        borderLeftColor: theme.statusWarning,
+      },
+      '.cm-lintRange-error': {
+        backgroundImage: 'none',
+        textDecoration: `underline wavy ${theme.statusCritical}`,
+      },
+      '.cm-lintRange-warning': {
+        backgroundImage: 'none',
+        textDecoration: `underline wavy ${theme.statusWarning}`,
+      },
+      '.cm-tooltip': {
+        backgroundColor: theme.backgroundLevel3,
+        color: theme.textPrimary,
+        border: `1px solid ${theme.border}`,
+      },
+      '.cm-tooltip-lint': {
+        backgroundColor: theme.backgroundLevel3,
+      },
+      '.cm-panels': {
+        backgroundColor: theme.backgroundLevel4,
+        color: theme.textPrimary,
+      },
+      '.cm-readonly-tooltip': {
+        backgroundColor: theme.backgroundLevel3,
+        color: theme.textPrimary,
+        border: `1px solid ${theme.border}`,
+      },
+    },
+    { dark: isDark },
+  );
+
+  const highlightStyle = HighlightStyle.define([
+    { tag: tags.propertyName, color: syntax.property },
+    { tag: tags.string, color: syntax.string },
+    { tag: tags.number, color: syntax.number },
+    { tag: tags.bool, color: syntax.boolean },
+    { tag: tags.null, color: syntax.null },
+    { tag: tags.punctuation, color: syntax.punctuation },
+    { tag: tags.brace, color: syntax.bracket },
+    { tag: tags.squareBracket, color: syntax.bracket },
+  ]);
+
+  return [editorViewTheme, syntaxHighlighting(highlightStyle)];
+}

package/src/lib/components/editor/index.ts

@@ -0,0 +1,2 @@
+export { Editor } from './Editor.component';
+export type { EditorProps } from './Editor.component';

package/src/lib/components/iconhelper/IconHelper.tsx

@@ -23,7 +23,6 @@ const HelpButton = styled.button`
   border: none;
   padding: 0;
   margin: 0;
-  cursor: pointer;
   color: inherit;
   font: inherit;              /* Inherit font sizing */
   vertical-align: text-bottom;     /* Align with text */

package/src/lib/next.ts

@@ -17,6 +17,8 @@ export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThem
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
+export { Editor } from './components/editor';
+export type { EditorProps } from './components/editor';
 
 // Export all chart components from the consolidated charts folder
 export {

package/stories/editor.stories.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { Editor, EditorProps } from '../src/lib/next';
+
+const sampleJson = JSON.stringify(
+  {
+    Version: '2012-10-17',
+    Statement: [
+      {
+        Sid: 'ExampleStatement',
+        Effect: 'Allow',
+        Principal: '*',
+        Action: 's3:GetObject',
+        Resource: 'arn:aws:s3:::my-bucket/*',
+      },
+    ],
+  },
+  null,
+  2,
+);
+
+const invalidJson = JSON.stringify(
+  {
+    Version: 'invalid-version',
+    Statement: [
+      {
+        Sid: 'Test',
+        Effect: 'InvalidEffect',
+        Principal: '*',
+        Action: 's3:GetObject',
+        Resource: 'arn:aws:s3:::my-bucket/*',
+      },
+    ],
+  },
+  null,
+  2,
+);
+
+const policySchema = {
+  type: 'object' as const,
+  required: ['Version', 'Statement'],
+  properties: {
+    Version: {
+      type: 'string' as const,
+      enum: ['2012-10-17', '2008-10-17'],
+    },
+    Statement: {
+      type: 'array' as const,
+      minItems: 1,
+      items: {
+        type: 'object' as const,
+        required: ['Effect', 'Principal', 'Action', 'Resource'],
+        properties: {
+          Sid: { type: 'string' as const },
+          Effect: { type: 'string' as const, enum: ['Allow', 'Deny'] },
+          Principal: { type: 'string' as const },
+          Action: { type: 'string' as const },
+          Resource: { type: 'string' as const },
+        },
+        additionalProperties: false,
+      },
+    },
+  },
+};
+
+export default {
+  title: 'Components/Inputs/Editor',
+  component: Editor,
+  argTypes: {
+    readOnly: { control: 'boolean' },
+    height: { control: 'text' },
+    width: { control: 'text' },
+  },
+};
+
+const EditorWithState = (args: EditorProps) => {
+  const [value, setValue] = useState(args.value || sampleJson);
+  return <Editor {...args} value={value} onChange={setValue} />;
+};
+
+export const Default = {
+  render: (args: EditorProps) => <EditorWithState {...args} />,
+  args: {
+    value: sampleJson,
+    height: '400px',
+    width: '100%',
+  },
+};
+
+export const ReadOnly = {
+  render: (args: EditorProps) => <EditorWithState {...args} />,
+  args: {
+    value: sampleJson,
+    readOnly: true,
+    height: '400px',
+  },
+};
+
+/**
+ * Pass `language` as an object with a `schema` to enable
+ * validation, autocompletion, and hover tooltips from the schema.
+ *
+ * Hover over the red-underlined values to see error messages.
+ */
+export const WithSchemaValidation = {
+  render: (args: EditorProps) => <EditorWithState {...args} />,
+  args: {
+    value: invalidJson,
+    language: { name: 'json', schema: policySchema },
+    height: '400px',
+  },
+};
+
+/**
+ * Valid JSON with schema — no errors shown, but autocompletion is active.
+ */
+export const ValidWithSchema = {
+  render: (args: EditorProps) => <EditorWithState {...args} />,
+  args: {
+    value: sampleJson,
+    language: { name: 'json', schema: policySchema },
+    height: '400px',
+  },
+};
+
+export const CustomDimensions = {
+  render: (args: EditorProps) => <EditorWithState {...args} />,
+  args: {
+    value: '{\n  "compact": true\n}',
+    height: '200px',
+    width: '400px',
+  },
+};