@squiz/formatted-text-editor 1.33.1-alpha.2 → 1.33.1-alpha.4

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

@@ -0,0 +1,103 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MatrixAsset } from './MatrixAsset';
+import { mockResourceBrowserContext } from '../../../../tests';
+
+describe('MatrixAsset', () => {
+  it('Renders empty state when no value is provided', () => {
+    render(<MatrixAsset modalTitle="Insert asset" onChange={jest.fn()} />);
+
+    expect(screen.getByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+  });
+
+  it('Renders a selected state when a value is provided', () => {
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [{ id: 'my-resource-id', name: 'My resource' }],
+    });
+
+    render(
+      <MockResourceBrowserContext>
+        <MatrixAsset
+          modalTitle="Insert asset"
+          value={{
+            matrixIdentifier: 'my-source-id',
+            matrixAssetId: 'my-resource-id',
+            addional: 'addditional data',
+          }}
+          onChange={jest.fn()}
+        />
+      </MockResourceBrowserContext>,
+    );
+
+    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 selectResource(screen.getByRole('button', { name: 'Choose asset' }), 'My resource');
+
+    expect(handleChange).toHaveBeenCalledWith({
+      target: {
+        value: {
+          additional: 'additional data',
+          matrixAssetId: 'my-resource-id',
+          matrixIdentifier: 'my-source-id',
+        },
+      },
+    });
+  });
+
+  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>,
+    );
+
+    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,55 @@
+import React from 'react';
+import { HydratedResourceReference, ResourceBrowserInput } from '@squiz/resource-browser';
+import { InputContainer, InputContainerProps } from '../InputContainer/InputContainer';
+
+type MatrixAssetValue = {
+  matrixIdentifier?: string;
+  matrixAssetId?: 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}>
+      <ResourceBrowserInput
+        modalTitle={modalTitle}
+        allowedTypes={allowedTypes}
+        value={
+          value && value.matrixIdentifier && value.matrixAssetId
+            ? {
+                source: value.matrixIdentifier,
+                resource: value.matrixAssetId,
+              }
+            : null
+        }
+        onChange={(reference: HydratedResourceReference | null) => {
+          onChange({
+            target: {
+              value: {
+                ...value,
+                matrixIdentifier: reference?.source?.id,
+                matrixAssetId: reference?.resource?.id,
+              } as T,
+            },
+          });
+        }}
+      />
+    </InputContainer>
+  );
+};

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

@@ -1,5 +1,6 @@
 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';
 
@@ -8,7 +9,7 @@ describe('FormModal', () => {
     const handleSubmit = jest.fn();
 
     render(
-      <FormModal title="Modal title" onCancel={jest.fn()}>
+      <FormModal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={jest.fn()}>
         <form onSubmit={handleSubmit}></form>
       </FormModal>,
     );

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

@@ -1,5 +1,6 @@
 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';
@@ -11,7 +12,7 @@ describe('Modal', () => {
 
   const ModalComponent = () => {
     return (
-      <Modal title="Modal title" onCancel={mockOnCancel}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel}>
         <div>I am a child in the modal</div>
       </Modal>
     );
@@ -26,6 +27,13 @@ describe('Modal', () => {
     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
@@ -52,7 +60,7 @@ describe('Modal', () => {
 
   it('Renders the submit button if there is a submit function supplied', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <div>I am a child in the modal</div>
       </Modal>,
     );
@@ -63,7 +71,7 @@ describe('Modal', () => {
 
   it('Checks that the submit function fires if you click on the submit button', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <div>I am a child in the modal</div>
       </Modal>,
     );
@@ -77,7 +85,7 @@ describe('Modal', () => {
 
   it('Calls the onSubmit handler when the enter key is pressed', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <div>Modal content</div>
       </Modal>,
     );
@@ -89,7 +97,7 @@ describe('Modal', () => {
 
   it('Calls the onCancel handler when the escape key is pressed', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <div>Modal content</div>
       </Modal>,
     );
@@ -101,7 +109,7 @@ describe('Modal', () => {
 
   it('Auto-focuses on the first non-hidden input on mount', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <>
           <input id="hidden-input" type="hidden" />
           <label htmlFor="my-input">My input</label>
@@ -115,7 +123,7 @@ describe('Modal', () => {
 
   it('Auto-focuses on the first select field on mount', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <>
           <Select label="Dropdown" name="select" options={{}} />
           <Input label="Input" name="input" />

package/src/ui/Modal/Modal.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 
 export type ModalProps = {
   title: string;
+  icon: ReactElement;
   children: ReactElement;
   onCancel: () => void;
   onSubmit?: () => void;
@@ -13,7 +14,7 @@ export type ModalProps = {
 };
 
 const Modal = (
-  { children, title, onCancel, onSubmit, className }: ModalProps,
+  { children, title, icon, onCancel, onSubmit, className }: ModalProps,
   ref: ForwardedRef<HTMLDivElement>,
 ): ReactElement => {
   const content = useRef<HTMLDivElement>(null);
@@ -55,7 +56,8 @@ const Modal = (
         <div ref={ref} className={clsx('squiz-fte-modal-wrapper', className)} tabIndex={-1}>
           <div className="w-modal-sm my-6 mx-auto">
             <div className="squiz-fte-modal">
-              <div className="squiz-fte-modal-header p-6 pb-2">
+              <div className="squiz-fte-modal-header p-6 pb-4">
+                <div className="squiz-fte-modal-header-icon mr-1.5 mt-[-1px]">{icon}</div>
                 <h2 className="font-semibold text-gray-900 text-heading-2">{title}</h2>
                 <button
                   type="button"

package/src/ui/Tabs/Tabs.spec.tsx

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Tabs, TabOptions } from './Tabs';
+import { MarkName } from '../../Extensions/Extensions';
+
+const linkTypeOptions: TabOptions = {
+  [MarkName.AssetLink]: { label: 'From source' },
+  [MarkName.Link]: { label: 'From URL' },
+};
+
+describe('Tabs', () => {
+  const mockOnChange = jest.fn();
+
+  const TabsComponent = () => {
+    return <Tabs value={MarkName.AssetLink} options={linkTypeOptions} onChange={mockOnChange} />;
+  };
+
+  it('renders the Tabs component', () => {
+    render(<TabsComponent />);
+    expect(screen.getByText('From source')).toBeInTheDocument();
+    expect(screen.getByText('From URL')).toBeInTheDocument();
+  });
+
+  it('defaults active to asset link', () => {
+    render(<TabsComponent />);
+    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('From source');
+  });
+
+  it('changes selected state when clicking the other tab', () => {
+    render(<TabsComponent />);
+
+    const assetLink = screen.getByTestId('assetLink');
+    const link = screen.getByTestId('link');
+
+    expect(assetLink).toHaveAttribute('aria-selected', 'true');
+    expect(link).not.toHaveAttribute('aria-selected', 'true');
+
+    fireEvent.click(link);
+
+    expect(assetLink).not.toHaveAttribute('aria-selected', 'true');
+    expect(link).toHaveAttribute('aria-selected', 'true');
+  });
+});

package/src/ui/Tabs/Tabs.tsx

@@ -0,0 +1,41 @@
+import { Tab } from '@headlessui/react';
+import React, { Fragment } from 'react';
+import clsx from 'clsx';
+
+export type TabOptions = Record<string, TabOption>;
+export type TabOption = {
+  label: string;
+};
+
+export type TabsProps = {
+  value: string;
+  options: TabOptions;
+  onChange?: (value: string) => void;
+};
+
+export const Tabs = ({ value, options, onChange }: TabsProps) => (
+  <Tab.Group
+    // Check what index the selected tab is, otherwise default to first tab
+    defaultIndex={Object.keys(options).indexOf(value) || 0}
+    // Check what the selected tab key is and trigger onChange
+    onChange={(index) => {
+      const selectedTab = Object.keys(options)[index];
+      onChange?.(selectedTab);
+    }}
+  >
+    <Tab.List className="grid grid-flow-col h-10 border-b border-gray-300">
+      {Object.entries(options).map(([key, option]) => (
+        <Tab key={key} as={Fragment}>
+          {({ selected }) => (
+            <div className="flex flex-col justify-between" data-testid={key} aria-selected={selected}>
+              <button type="button" className={clsx('mt-[7px] text-gray-800', selected && 'font-bold')}>
+                {option.label}
+              </button>
+              {selected && <span className="h-[3px] bg-gray-800 w-11/12 self-center rounded-t-sm" />}
+            </div>
+          )}
+        </Tab>
+      ))}
+    </Tab.List>
+  </Tab.Group>
+);

package/src/ui/_forms.scss

@@ -6,6 +6,7 @@
     @apply mb-1 text-md font-semibold text-gray-600;
   }
   &-form-control {
+    height: 36px;
     padding: 6px 12px;
     @apply placeholder-slate-300 text-gray-800 relative bg-white rounded text-md border-2 border-gray-300 outline-0 focus:outline-0 focus:border-blue-300 w-full;
     &:focus,
@@ -14,10 +15,11 @@
     }
   }
   &-invalid-form-field {
-    .squiz-fte-form-control {
+    .squiz-fte-form-control,
+    .resource-picker {
       @apply border-red-300 bg-no-repeat pr-8;
       background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+');
-      background-position: top 0.25rem right 0.25rem;
+      background-position: center right 0.25rem;
       background-size: 1.5rem;
     }
   }

package/src/utils/validation.spec.ts

@@ -0,0 +1,22 @@
+import { hasProperties, noEmptySpacesValidation } from './validation';
+
+describe('validation', () => {
+  it.each([
+    ['String with only spaces', '  ', 'Empty space is not allowed'],
+    ['Empty string', '', undefined],
+    ['Non-empty string', 'test value', undefined],
+    ['String with trailing/leading spaces', ' test value ', undefined],
+  ])('noEmptySpacesValidation - %s', (description: string, value: string, expected: string | undefined) => {
+    expect(noEmptySpacesValidation(value)).toBe(expected);
+  });
+
+  it.each([
+    ['Value is null', null, ['prop1'], 'Field is invalid'],
+    ['Value is undefined', undefined, ['prop1'], 'Field is invalid'],
+    ['Value has none of the required props', { prop2: 'Not what we want' }, ['prop1'], 'Field is invalid'],
+    ['Value has all of the required props', { prop1: 'Valid' }, ['prop1'], undefined],
+    ['Value has all of the required props + extra', { prop1: 'Valid', prop2: 'Another prop' }, ['prop1'], undefined],
+  ])('hasProperties - %s', (description: string, value: any, properties: string[], expected: string | undefined) => {
+    expect(hasProperties('Field is invalid', properties)(value)).toBe(expected);
+  });
+});

package/src/utils/validation.ts

@@ -1,8 +1,16 @@
-export const noEmptySpacesValidation = async (value: string | undefined) => {
+export const noEmptySpacesValidation = (value: string | undefined) => {
   if (value && !(value.trim().length > 0)) {
     return 'Empty space is not allowed';
   }
 };
 
+export const hasProperties =
+  <T>(message: string, properties: (keyof T)[]) =>
+  (value: T) => {
+    if (!value || properties.filter((property) => value[property]).length !== properties.length) {
+      return message;
+    }
+  };
+
 export const regexDataURI =
   /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;

package/tests/index.ts

@@ -1,2 +1,4 @@
 export * from './renderWithEditor';
+export * from './renderWithContext';
+export * from './mockResourceBrowserContext';
 export * from './select';

package/tests/mockResourceBrowserContext.tsx

@@ -0,0 +1,63 @@
+import React, { ReactNode } from 'react';
+import { ResourceBrowserContext, Source, Resource, ResourceReference } from '@squiz/resource-browser';
+import { fireEvent, screen } from '@testing-library/react';
+import { DeepPartial } from '../src/types';
+
+export type MockResourceBrowserContextOptions = DeepPartial<{
+  sources: Source[];
+  resources: Resource[];
+}>;
+
+const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
+  ({
+    id: 'default-resource',
+    name: 'Default resource',
+    url: 'https://default-resource/',
+    urls: [],
+    childCount: 0,
+    type: {
+      code: 'unspecified',
+      name: 'Unspecified',
+    },
+    status: {
+      code: 'live',
+      name: 'Live',
+    },
+    ...resource,
+  } as Resource);
+
+const mockSource = (source: DeepPartial<Source>): Source => ({
+  id: 'default-source',
+  name: 'Default source',
+  ...source,
+  nodes: (source.nodes || [mockResource()]).map((resource) => mockResource(resource)),
+});
+
+export const mockResourceBrowserContext = ({ sources, resources }: MockResourceBrowserContextOptions) => {
+  sources = (sources || []).map((source) => mockSource(source));
+  resources = (resources || []).map((resource) => mockResource(resource));
+
+  const onRequestSources = jest.fn().mockResolvedValue(sources);
+  const onRequestChildren = jest.fn().mockResolvedValue(resources);
+  const onRequestResource = jest
+    .fn()
+    .mockImplementation(
+      (reference: ResourceReference) => resources?.find((resource) => resource.id === reference.resource) || null,
+    );
+
+  return {
+    MockResourceBrowserContext: ({ children }: { children: ReactNode }) => (
+      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+        {children}
+      </ResourceBrowserContext.Provider>
+    ),
+    selectResource: async (opener: HTMLElement, resourceName: string) => {
+      const sourceLabel = `Drill down to ${sources?.[0]?.nodes?.[0]?.name} children`;
+
+      fireEvent.click(opener);
+      fireEvent.click(await screen.findByRole('button', { name: sourceLabel }));
+      fireEvent.click(await screen.findByTitle(resourceName));
+      fireEvent.click(await screen.findByRole('button', { name: 'Select' }));
+    },
+  };
+};

package/tests/renderWithContext.tsx

@@ -0,0 +1,18 @@
+import React, { ReactElement } from 'react';
+import { render, RenderOptions, RenderResult } from '@testing-library/react';
+import merge from 'deepmerge';
+import { EditorContext } from '../src';
+import { defaultEditorContext, EditorContextOptions } from '../src/Editor/EditorContext';
+import { DeepPartial } from '../src/types';
+
+export type ContextRenderOptions = RenderOptions & {
+  context?: DeepPartial<{
+    editor: EditorContextOptions;
+  }>;
+};
+
+export const renderWithContext = (ui: ReactElement | null, options?: ContextRenderOptions): RenderResult => {
+  const editorContext = merge(defaultEditorContext, options?.context?.editor || {}) as EditorContextOptions;
+
+  return render(<EditorContext.Provider value={editorContext}>{ui}</EditorContext.Provider>);
+};

package/tests/renderWithEditor.tsx

@@ -1,22 +1,18 @@
 import React, { ReactElement, useContext, useEffect } from 'react';
-import { render, RenderOptions } from '@testing-library/react';
 import { Extension, RemirrorContentType, RemirrorManager } from '@remirror/core';
 import { CorePreset } from '@remirror/preset-core';
 import { BuiltinPreset } from 'remirror';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { RemirrorTestChain } from 'jest-remirror';
-import merge from 'deepmerge';
 import { createExtensions } from '../src/Extensions/Extensions';
-import { EditorContext } from '../src/Editor/EditorContext';
-import { FloatingToolbar } from '../src/EditorToolbar/FloatingToolbar';
-import { defaultEditorContext, EditorContextOptions } from '../src/Editor/EditorContext';
-import { DeepPartial } from '../src/types';
+import { EditorContext } from '../src';
+import { FloatingToolbar } from '../src/EditorToolbar';
+import { renderWithContext, ContextRenderOptions } from './renderWithContext';
 
-export type EditorRenderOptions = RenderOptions & {
+export type EditorRenderOptions = ContextRenderOptions & {
   content?: RemirrorContentType;
   editable?: boolean;
   extensions?: Extension[];
-  context?: DeepPartial<EditorContextOptions>;
 };
 
 type TestEditorProps = EditorRenderOptions & {
@@ -41,6 +37,9 @@ const TestEditor = ({ children, extensions, content, onReady, editable }: TestEd
     content: content,
     selection: 'start',
     stringHandler: 'html',
+    onError: ({ error }) => {
+      throw error;
+    },
   });
 
   useEffect(() => {
@@ -89,7 +88,6 @@ export const renderWithEditor = async (
   ui: ReactElement | null,
   options?: EditorRenderOptions,
 ): Promise<EditorRenderResult> => {
-  const context = merge(defaultEditorContext, options?.context || {}) as EditorContextOptions;
   const result: Partial<EditorRenderResult> = {
     getHtmlContent: () => document.querySelector('.remirror-editor')?.innerHTML,
     getJsonContent: () => result.editor?.state.doc.content.child(0).toJSON(),
@@ -97,18 +95,17 @@ export const renderWithEditor = async (
   };
   let isReady = false;
 
-  const { container } = render(
-    <EditorContext.Provider value={context}>
-      <TestEditor
-        onReady={(manager) => {
-          result.editor = RemirrorTestChain.create(manager);
-          isReady = true;
-        }}
-        {...options}
-      >
-        {ui}
-      </TestEditor>
-    </EditorContext.Provider>,
+  const { container } = renderWithContext(
+    <TestEditor
+      onReady={(manager) => {
+        result.editor = RemirrorTestChain.create(manager);
+        isReady = true;
+      }}
+      {...options}
+    >
+      {ui}
+    </TestEditor>,
+    options,
   );
 
   if (!isReady) {

package/vite.config.ts

@@ -2,10 +2,18 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
+// Dependencies from within the monorepo need to be configured in a special way, relates to:
+// https://github.com/vitejs/vite/issues/5668
 export default defineConfig({
   root: 'demo',
+  optimizeDeps: {
+    include: ['@squiz/resource-browser'],
+  },
   build: {
     outDir: 'build/demo',
+    commonjsOptions: {
+      include: [/node_modules/, /resource-browser/],
+    },
   },
   plugins: [
     react({

package/lib/ui/Fields/Select/Select.d.ts

@@ -1,12 +0,0 @@
-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 declare const Select: ({ name, label, value, onChange, options }: SelectProps) => JSX.Element;