@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/src/ui/Fields/Checkbox/Checkbox.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+
+export type CheckboxProps<TChecked, TUnchecked> = {
+  label: string;
+  onChange: (value: TChecked | TUnchecked) => void;
+  defaultChecked?: boolean;
+  unchecked: TUnchecked;
+  checked: TChecked;
+};
+
+export const Checkbox = <TChecked, TUnchecked>({
+  label,
+  onChange,
+  defaultChecked = false,
+  unchecked,
+  checked,
+}: CheckboxProps<TChecked, TUnchecked>) => {
+  const [toggled, setToggled] = useState<boolean>(defaultChecked);
+
+  useEffect(() => {
+    if (toggled) {
+      onChange(checked);
+    } else {
+      onChange(unchecked);
+    }
+  }, [toggled]);
+
+  const toggleCheckbox = () => setToggled(!toggled);
+
+  return (
+    <div className="squiz-fte-checkbox">
+      <button
+        type="button"
+        role="checkbox"
+        aria-label={label}
+        aria-checked={toggled}
+        className="checkbox"
+        onClick={toggleCheckbox}
+      >
+        {toggled && <CheckRoundedIcon />}
+      </button>
+      {/* Checkbox label as a button, acts as a secondary way to toggle */}
+      <button type="button" className="label" onClick={toggleCheckbox} tabIndex={-1}>
+        {label}
+      </button>
+    </div>
+  );
+};

package/src/ui/Fields/Checkbox/_checkbox.scss

@@ -0,0 +1,26 @@
+.squiz-fte-checkbox {
+  @apply text-gray-800;
+  font-size: 14px;
+
+  display: flex;
+  align-items: center;
+  margin-top: 0.75rem;
+  gap: 0.75rem;
+
+  .checkbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 1.25rem;
+    height: 1.25rem;
+    background-color: #fff;
+
+    border: 2px solid #e0e0e0;
+    border-radius: 4px;
+
+    svg {
+      width: 100%;
+    }
+  }
+}

package/src/ui/Fields/Input/Input.spec.tsx

@@ -0,0 +1,49 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { Input } from './Input';
+
+describe('Input', () => {
+  const mockOnChange = jest.fn();
+
+  const InputComponent = () => {
+    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} required />;
+  };
+
+  it('Renders the label', () => {
+    render(<InputComponent />);
+    // Check that the supplied label renders
+    const inputLabel = screen.getByLabelText('Text input');
+    expect(inputLabel).toBeInTheDocument();
+  });
+
+  it('Renders the default value', () => {
+    render(<InputComponent />);
+    // Check that default value supplied renders
+    expect(screen.getByDisplayValue('Water')).toBeInTheDocument();
+  });
+
+  it('Changes the value when new value entered', () => {
+    render(<InputComponent />);
+    const input = screen.getByLabelText('Text input') as HTMLInputElement;
+    // Check that default value supplied renders
+    expect(input.value).toBe('Water');
+    fireEvent.change(input, { target: { value: 'Wine' } });
+    expect(input.value).toBe('Wine');
+  });
+
+  it('Fires the change function when new value entered', () => {
+    render(<InputComponent />);
+    const input = screen.getByLabelText('Text input') as HTMLInputElement;
+    // Check that default value supplied renders
+    expect(input.value).toBe('Water');
+    fireEvent.change(input, { target: { value: 'Wine' } });
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+
+  it('If the field is declared required, it is marked as such', () => {
+    render(<InputComponent />);
+    const requiredMarker = screen.getByLabelText('Required field');
+    expect(requiredMarker).toBeInTheDocument();
+  });
+});

package/src/ui/Fields/Input/Input.tsx

@@ -0,0 +1,25 @@
+import React, { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
+import { InputContainer, InputContainerProps } from '../InputContainer/InputContainer';
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & Omit<InputContainerProps, 'children'>;
+
+const InputInternal = (
+  { name, label, type = 'text', error, required, ...rest }: InputProps,
+  ref: ForwardedRef<HTMLInputElement>,
+) => {
+  return (
+    <InputContainer name={name} label={label} error={error} required={required}>
+      <input
+        ref={ref}
+        id={name}
+        name={name}
+        type={type}
+        aria-invalid={!!error}
+        className="squiz-fte-form-control"
+        {...rest}
+      />
+    </InputContainer>
+  );
+};
+
+export const Input = forwardRef(InputInternal);

package/src/ui/Fields/InputContainer/InputContainer.spec.tsx

@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { InputContainer } from './InputContainer';
+
+describe('InputContainer', () => {
+  it('Renders with expected content', () => {
+    render(
+      <InputContainer name="my-input" label="My input" error="Input is invalid" required={true}>
+        input element
+      </InputContainer>,
+    );
+
+    expect(screen.getByText('My input')).toHaveClass('squiz-fte-form-label');
+    expect(screen.getByText('input element')).toBeInTheDocument();
+    expect(screen.getByText('Input is invalid')).toHaveClass('squiz-fte-form-error');
+  });
+});

package/src/ui/Fields/InputContainer/InputContainer.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import clsx from 'clsx';
+
+export type InputContainerProps = {
+  name?: string;
+  label?: string;
+  error?: string;
+  required?: boolean;
+  children: ReactNode;
+};
+
+export const InputContainer = ({ name, label, error, required, children }: InputContainerProps) => {
+  return (
+    <div className={clsx(error && 'squiz-fte-invalid-form-field')}>
+      {label && (
+        <label htmlFor={name} className="squiz-fte-form-label">
+          {label}
+        </label>
+      )}
+      {label && required && (
+        <span className="text-gray-600" aria-label="Required field">
+          *
+        </span>
+      )}
+      {children}
+      {error && <div className="squiz-fte-form-error">{error}</div>}
+    </div>
+  );
+};

package/src/ui/Fields/MatrixAsset/MatrixAsset.spec.tsx

@@ -0,0 +1,121 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MatrixAsset } from './MatrixAsset';
+import { mockResourceBrowserContext } from '../../../../tests';
+
+describe('MatrixAsset', () => {
+  it('Renders empty state when no value is provided', async () => {
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [],
+      resources: [],
+    });
+    render(
+      <MockResourceBrowserContext>
+        <MatrixAsset modalTitle="Insert asset" onChange={jest.fn()} />
+      </MockResourceBrowserContext>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+    });
+  });
+
+  it('Renders a selected state when a value is provided', async () => {
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [{ id: 'my-resource-id', name: 'My resource' }],
+    });
+
+    render(
+      <MockResourceBrowserContext>
+        <MatrixAsset
+          modalTitle="Insert asset"
+          value={{
+            matrixIdentifier: 'matrix-api-identifier',
+            matrixAssetId: 'my-resource-id',
+            addional: 'addditional data',
+          }}
+          onChange={jest.fn()}
+        />
+      </MockResourceBrowserContext>,
+    );
+    await waitFor(() => {
+      expect(screen.getByText('My resource')).toBeInTheDocument();
+    });
+  });
+
+  it('Calls onChange with expected value when resources is selected', async () => {
+    const handleChange = jest.fn();
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [{ id: 'my-resource-id', name: 'My resource' }],
+    });
+
+    render(
+      <MockResourceBrowserContext>
+        <MatrixAsset
+          modalTitle="Insert asset"
+          value={{ matrixIdentifier: undefined, matrixAssetId: undefined, additional: 'additional data' }}
+          onChange={handleChange}
+        />
+      </MockResourceBrowserContext>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+    });
+    await selectResource(screen.getByRole('button', { name: 'Choose asset' }), 'My resource');
+
+    expect(handleChange).toHaveBeenCalledWith({
+      target: {
+        value: {
+          additional: 'additional data',
+          matrixAssetId: 'my-resource-id',
+          matrixIdentifier: 'matrix-api-identifier',
+          url: 'https://default-resource/',
+        },
+      },
+    });
+  });
+
+  it('Calls onChange with expected value when resources is cleared', async () => {
+    const handleChange = jest.fn();
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [
+        { id: 'my-resource-id', name: 'My resource' },
+        { id: 'updated-resource-id', name: 'Updated resource' },
+      ],
+    });
+
+    render(
+      <MockResourceBrowserContext>
+        <MatrixAsset
+          modalTitle="Insert asset"
+          value={{
+            matrixIdentifier: 'my-source-id',
+            matrixAssetId: 'my-resource-id',
+            additional: 'additional data',
+          }}
+          onChange={handleChange}
+        />
+      </MockResourceBrowserContext>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Remove selection' })).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Remove selection' }));
+
+    expect(handleChange).toHaveBeenCalledWith({
+      target: {
+        value: {
+          additional: 'additional data',
+          matrixAssetId: undefined,
+          matrixIdentifier: undefined,
+        },
+      },
+    });
+  });
+});

package/src/ui/Fields/MatrixAsset/MatrixAsset.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ResourceBrowserResource, ResourceBrowser } from '@squiz/resource-browser';
+import { InputContainer, InputContainerProps } from '../InputContainer/InputContainer';
+
+type MatrixAssetValue = {
+  matrixIdentifier?: string;
+  matrixAssetId?: string;
+  url?: string;
+};
+
+export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
+  modalTitle: string;
+  allowedTypes?: string[];
+  value?: T | null;
+  // LinkForm contains a "target" property.
+  // react-hook-form treats the presence of this property as an "Event" object being passed through, see:
+  // https://github.com/react-hook-form/react-hook-form/blob/master/src/logic/getEventValue.ts
+  // Nest the value under a "target" object to work around the behaviour.
+  onChange: (value: { target: { value: T } }) => void;
+};
+
+export const MatrixAsset = <T extends MatrixAssetValue>({
+  modalTitle,
+  allowedTypes,
+  value,
+  onChange,
+  ...props
+}: MatrixAssetProps<T>) => {
+  return (
+    <InputContainer {...props}>
+      <ResourceBrowser
+        modalTitle={modalTitle}
+        allowedTypes={allowedTypes}
+        value={
+          value && value.matrixIdentifier && value.matrixAssetId
+            ? {
+                sourceId: value.matrixIdentifier,
+                resourceId: value.matrixAssetId,
+              }
+            : null
+        }
+        onChange={(resource: ResourceBrowserResource | null) => {
+          onChange({
+            target: {
+              value: {
+                ...value,
+                matrixIdentifier: resource?.source?.id,
+                matrixAssetId: resource?.id,
+                url: resource?.url,
+              } as T,
+            },
+          });
+        }}
+      />
+    </InputContainer>
+  );
+};

package/src/ui/Fields/Select/Select.spec.tsx

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Select } from './Select';
+
+describe('Select field', () => {
+  const selectOptions = {
+    chicken: { label: 'chicken' },
+    egg: { label: 'Egg' },
+  };
+
+  it('Renders the label', () => {
+    render(<Select name="select-field" label="Which came first?" value="Chicken" options={selectOptions} />);
+    // Check that the supplied label renders
+    const inputLabel = screen.getByLabelText('Which came first?');
+    expect(inputLabel).toBeInTheDocument();
+  });
+
+  it('Renders the default value', () => {
+    render(<Select name="select-field" label="Which came first?" value="Chicken" options={selectOptions} />);
+    // Check that default value supplied renders
+    expect(screen.getByDisplayValue('Chicken')).toBeInTheDocument();
+  });
+
+  it('Renders an empty state when no value is provided', () => {
+    render(<Select name="select-field" label="Which came first?" options={selectOptions} />);
+    // nbsp should be rendered so input maintains a consistent size when nothing is selected.
+    expect(screen.getByLabelText('Which came first?')).toContainHTML('&nbsp;');
+  });
+});

package/src/ui/Fields/Select/Select.tsx

@@ -0,0 +1,66 @@
+import { Listbox } from '@headlessui/react';
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
+
+export type SelectOptions = Record<string, SelectOption>;
+export type SelectOption = {
+  label: string;
+};
+
+export type SelectProps = {
+  name: string;
+  label?: string;
+  value?: string;
+  options: SelectOptions;
+  onChange?: (value: string) => void;
+};
+
+export const Select = ({ name, label, value, onChange, options }: SelectProps) => {
+  const [selectedOption, setSelectedOptions] = useState(value ? options[value] : null);
+  const handleChange = (value: string): void => {
+    setSelectedOptions(options[value]);
+    onChange?.(value);
+  };
+
+  return (
+    <Listbox value={value} name={name} aria-labelledby={name} onChange={handleChange}>
+      {({ open }) => (
+        <>
+          {label && <Listbox.Label className="squiz-fte-form-label">{label}</Listbox.Label>}
+          <div className="relative text-md text-gray-800">
+            <Listbox.Button className="w-full cursor-default rounded border-2 border-gray-300 bg-white py-2 pl-3 pr-10 focus:border-blue-300 focus:outline-none">
+              <span className="flex items-center">
+                <span className="block truncate">{selectedOption?.label}&nbsp;</span>
+              </span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+                {!open ? (
+                  <ExpandMoreRoundedIcon className="text-gray-500" aria-hidden="true" />
+                ) : (
+                  <ExpandLessRoundedIcon className="text-gray-500" aria-hidden="true" />
+                )}
+              </span>
+            </Listbox.Button>
+            <Listbox.Options className="absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white">
+              {Object.entries(options).map(([key, option]) => (
+                <Listbox.Option
+                  key={key}
+                  value={key}
+                  className={({ active }) =>
+                    clsx(
+                      active ? 'bg-gray-100' : 'bg-white',
+                      'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3',
+                    )
+                  }
+                >
+                  <span className="block truncate">{option.label}</span>
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </>
+      )}
+    </Listbox>
+  );
+};

package/src/ui/Modal/FormModal.spec.tsx

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+import React from 'react';
+import FormModal from './FormModal';
+
+describe('FormModal', () => {
+  it('Triggers form submit handler when modal is submitted', () => {
+    const handleSubmit = jest.fn();
+
+    render(
+      <FormModal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={jest.fn()}>
+        <form onSubmit={handleSubmit}></form>
+      </FormModal>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(handleSubmit).toHaveBeenCalled();
+  });
+});

package/src/ui/Modal/FormModal.tsx

@@ -0,0 +1,17 @@
+import React, { createRef, ReactElement } from 'react';
+import Modal, { ModalProps } from './Modal';
+
+type FormModalProps = Omit<ModalProps, 'onSubmit'>;
+
+const FormModal = (props: FormModalProps): ReactElement => {
+  const ref = createRef<HTMLDivElement>();
+  const handleSubmit = () => {
+    const form = ref.current?.querySelector('form');
+
+    form?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+  };
+
+  return <Modal ref={ref} {...props} onSubmit={handleSubmit} />;
+};
+
+export default FormModal;

package/src/ui/Modal/Modal.spec.tsx

@@ -0,0 +1,136 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+import React from 'react';
+import Modal from './Modal';
+import { Select } from '../Fields/Select/Select';
+import { Input } from '../Fields/Input/Input';
+
+describe('Modal', () => {
+  const mockOnCancel = jest.fn();
+  const mockOnSubmit = jest.fn();
+
+  const ModalComponent = () => {
+    return (
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel}>
+        <div>I am a child in the modal</div>
+      </Modal>
+    );
+  };
+
+  it('Renders the modal title', () => {
+    render(<ModalComponent />);
+    // Check that the modal heading displays
+    const modalHeading = screen.getByRole('heading', {
+      name: /Modal title/i,
+    });
+    expect(modalHeading).toBeInTheDocument();
+  });
+
+  it('Renders the modal image', () => {
+    render(<ModalComponent />);
+    // Check that the modal image displays
+    const modalImage = screen.getByTestId('InsertLinkRoundedIcon');
+    expect(modalImage).toBeInTheDocument();
+  });
+
+  it('Renders the child', () => {
+    render(<ModalComponent />);
+    // Check that the modal heading displays
+    const modalChild = screen.getByText(/I am a child in the modal/i);
+    expect(modalChild).toBeInTheDocument();
+  });
+
+  it('Renders the cancel button', () => {
+    render(<ModalComponent />);
+    // Check that the cancel button renders
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    expect(cancelButton).toBeInTheDocument();
+    // check that firing the cancel button fires the cancel function
+    fireEvent.click(cancelButton);
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+
+  it('Does not render the submit button if there is no submit function supplied', () => {
+    render(<ModalComponent />);
+    // Check that the submit button does not render
+    const submitButton = screen.queryByRole('button', { name: 'Apply' });
+    expect(submitButton).not.toBeInTheDocument();
+  });
+
+  it('Renders the submit button if there is a submit function supplied', () => {
+    render(
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>I am a child in the modal</div>
+      </Modal>,
+    );
+    // Check that the submit button renders
+    const submitButton = screen.getByRole('button', { name: 'Apply' });
+    expect(submitButton).toBeInTheDocument();
+  });
+
+  it('Checks that the submit function fires if you click on the submit button', () => {
+    render(
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>I am a child in the modal</div>
+      </Modal>,
+    );
+    // Check that the submit button renders
+    const submitButton = screen.getByRole('button', { name: 'Apply' });
+    expect(submitButton).toBeInTheDocument();
+    // check that firing the submit button fires the submit function
+    fireEvent.click(submitButton);
+    expect(mockOnSubmit).toHaveBeenCalled();
+  });
+
+  it('Calls the onSubmit handler when the enter key is pressed', () => {
+    render(
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    fireEvent.keyDown(screen.getByText('Modal content'), { key: 'Enter' });
+
+    expect(mockOnSubmit).toHaveBeenCalled();
+  });
+
+  it('Calls the onCancel handler when the escape key is pressed', () => {
+    render(
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    fireEvent.keyDown(screen.getByText('Modal content'), { key: 'Escape' });
+
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+
+  it('Auto-focuses on the first non-hidden input on mount', () => {
+    render(
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <>
+          <input id="hidden-input" type="hidden" />
+          <label htmlFor="my-input">My input</label>
+          <input id="my-input" type="text" />
+        </>
+      </Modal>,
+    );
+
+    expect(screen.getByLabelText('My input')).toHaveFocus();
+  });
+
+  it('Auto-focuses on the first select field on mount', () => {
+    render(
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <>
+          <Select label="Dropdown" name="select" options={{}} />
+          <Input label="Input" name="input" />
+        </>
+      </Modal>,
+    );
+
+    expect(screen.getByLabelText('Dropdown')).toHaveFocus();
+  });
+});