@squiz/resource-browser 2.4.12 → 3.0.1-pre-alpha.0

package/src/index.spec.tsx

@@ -3,7 +3,7 @@ import { waitFor, act } from '@testing-library/react';
 import { ResourceBrowser, ResourceBrowserProps } from './index';
 import { mockSource, mockResource } from './__mocks__/MockModels';
 import { renderWithContext } from './__mocks__/renderWithContext';
-import { ResourceBrowserPlugin } from './types';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserSourceWithPlugin, PluginLaunchModeType } from './types';
 
 import * as RBI from './ResourceBrowserInput/ResourceBrowserInput';
 jest.spyOn(RBI, 'ResourceBrowserInput');
@@ -27,18 +27,29 @@ describe('Resource browser input', () => {
         renderSelectedResource: mockRenderSelectedResource,
         sourceBrowserComponent: mockSourceBrowserComponent,
         useResolveResource: mockUseResolveResource,
+        sourceSearchComponent: jest.fn(),
+        renderResourceLauncher: jest.fn(),
     } as unknown as ResourceBrowserPlugin;
 
-    const renderComponent = (props: Partial<ResourceBrowserProps> = {}) => {
+    const renderComponent = (props: Partial<ResourceBrowserProps> = {}, searchEnabled?: boolean) => {
         return renderWithContext(
             <ResourceBrowser modalTitle="Asset picker" value={null} onChange={mockChange} onClear={mockOnClear} {...props} />,
             {
                 onRequestSources: mockRequestSources,
                 plugins: [mockDamPlugin],
+                searchEnabled: !!searchEnabled,
             },
         );
     };
 
+    // Internally the plugin is attached to the source so handle that for tests expectation
+    const calculateExpectedSource = (source: ResourceBrowserSource): ResourceBrowserSourceWithPlugin => {
+        return {
+            ...source,
+            plugin: mockDamPlugin,
+        };
+    };
+
     it('If only one valid source is provided will default to its Source and Plugin', async () => {
         const source = mockSource({ type: 'dam' });
         mockRequestSources.mockResolvedValueOnce([source]);
@@ -47,7 +58,7 @@ describe('Resource browser input', () => {
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    source,
+                    source: calculateExpectedSource(source),
                     plugin: mockDamPlugin,
                 }),
                 {},
@@ -55,22 +66,6 @@ describe('Resource browser input', () => {
         });
     });
 
-    it('If multiple valid source is provided will not default to its Source', async () => {
-        const sources = [mockSource(), mockSource()];
-        mockRequestSources.mockResolvedValueOnce(sources);
-        renderComponent();
-
-        await waitFor(() => {
-            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    sources,
-                    plugin: null,
-                }),
-                {},
-            );
-        });
-    });
-
     it('If a resource is provided will default to its Source and Plugin to match', async () => {
         const source = mockSource({ type: 'dam' });
         mockRequestSources.mockResolvedValueOnce([source, mockSource({ type: 'matrix' })]);
@@ -80,8 +75,9 @@ describe('Resource browser input', () => {
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    source,
+                    source: calculateExpectedSource(source),
                     plugin: mockDamPlugin,
+                    pluginMode: null,
                 }),
                 {},
             );
@@ -107,15 +103,16 @@ describe('Resource browser input', () => {
     });
 
     it('onSourceSelect will alter source passed to ResourceBrowserInput', async () => {
-        const sources = [mockSource({ type: 'dam' }), mockSource()];
-        mockRequestSources.mockResolvedValueOnce(sources);
+        const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
+        const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
         renderComponent();
 
         // Expect no source or plugin
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    sources,
+                    sources: calculatedSources,
                     source: null,
                     plugin: null,
                 }),
@@ -127,15 +124,54 @@ describe('Resource browser input', () => {
         const { setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
         // Invoke it
         act(() => {
-            setSource(sources[0]);
+            setSource(calculatedSources[0]);
         });
 
         // Expect the source and plugin to be loaded
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    source: sources[0],
+                    source: calculatedSources[0],
                     plugin: mockDamPlugin,
+                    pluginMode: null,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('onSourceSelect will set mode is provided', async () => {
+        const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
+        const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+        renderComponent();
+
+        // Expect no source or plugin
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    sources: calculatedSources,
+                    source: null,
+                    plugin: null,
+                }),
+                {},
+            );
+        });
+
+        // Get the provided callback
+        const { setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        // Invoke it
+        act(() => {
+            setSource(calculatedSources[0], { type: PluginLaunchModeType.Search, args: { query: 'myQuery' } });
+        });
+
+        // Expect the source and plugin to be loaded
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: calculatedSources[0],
+                    plugin: mockDamPlugin,
+                    pluginMode: { type: PluginLaunchModeType.Search, args: { query: 'myQuery' } },
                 }),
                 {},
             );
@@ -152,7 +188,7 @@ describe('Resource browser input', () => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
                     value: resource,
-                    source,
+                    source: calculateExpectedSource(source),
                     plugin: mockDamPlugin,
                 }),
                 {},
@@ -160,20 +196,21 @@ describe('Resource browser input', () => {
         });
 
         await waitFor(() => {
-            expect(mockUseResolveResource).toHaveBeenCalledWith(resource.resourceId, source);
+            expect(mockUseResolveResource).toHaveBeenCalledWith(resource.resourceId, calculateExpectedSource(source));
         });
     });
 
     it('onModalStateChange called with false will reset the Source and Plugin', async () => {
-        const sources = [mockSource({ type: 'dam' }), mockSource()];
-        mockRequestSources.mockResolvedValueOnce(sources);
+        const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
+        const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
         renderComponent();
 
         // Expect no source or plugin
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    sources,
+                    sources: calculatedSources,
                     source: null,
                     plugin: null,
                 }),
@@ -185,14 +222,14 @@ describe('Resource browser input', () => {
         const { setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
         // Invoke it
         act(() => {
-            setSource(sources[0]);
+            setSource(calculatedSources[0]);
         });
 
         // Expect the source and plugin to be loaded
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    source: sources[0],
+                    source: calculatedSources[0],
                     plugin: mockDamPlugin,
                 }),
                 {},
@@ -207,9 +244,10 @@ describe('Resource browser input', () => {
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    sources,
+                    sources: calculatedSources,
                     source: null,
                     plugin: null,
+                    pluginMode: null,
                 }),
                 {},
             );
@@ -225,7 +263,7 @@ describe('Resource browser input', () => {
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    source: sources[0],
+                    source: calculateExpectedSource(sources[0]),
                     plugin: mockDamPlugin,
                 }),
                 {},
@@ -241,7 +279,7 @@ describe('Resource browser input', () => {
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    source: sources[0],
+                    source: calculateExpectedSource(sources[0]),
                     plugin: mockDamPlugin,
                 }),
                 {},
@@ -249,16 +287,72 @@ describe('Resource browser input', () => {
         });
     });
 
+    it('onModalStateChange called with false will reset Source and Plugin if only one source exists AND search is enabled', async () => {
+        const sourcesInput = [mockSource({ type: 'dam' })];
+        const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+        renderComponent({}, true);
+
+        // Expect no source or plugin
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    sources: calculatedSources,
+                    source: null,
+                    plugin: null,
+                }),
+                {},
+            );
+        });
+
+        // Get the provided callback
+        const { setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        // Invoke it
+        act(() => {
+            setSource(calculatedSources[0]);
+        });
+
+        // Expect the source and plugin to be loaded
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: calculatedSources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+
+        // Invoke modal close callback
+        const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        onModalStateChange(false);
+
+        // Expect no source or plugin
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    sources: calculatedSources,
+                    source: null,
+                    plugin: null,
+                    pluginMode: null,
+                }),
+                {},
+            );
+        });
+    });
+
     it('onModalStateChange called with false will not reset the Source and Plugin if a value exists', async () => {
-        const sources = [mockSource({ type: 'dam' }), mockSource()];
-        mockRequestSources.mockResolvedValueOnce(sources);
-        renderComponent({ value: { sourceId: sources[0].id, resourceId: '123456' } });
+        const sourcesInput = [mockSource({ type: 'dam' }), mockSource()];
+        const calculatedSources = sourcesInput.map((source) => calculateExpectedSource(source));
+        mockRequestSources.mockResolvedValueOnce(sourcesInput);
+
+        renderComponent({ value: { sourceId: sourcesInput[0].id, resourceId: '123456' } });
 
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    sources,
-                    source: sources[0],
+                    sources: calculatedSources,
+                    source: calculatedSources[0],
                     plugin: mockDamPlugin,
                 }),
                 {},
@@ -274,7 +368,7 @@ describe('Resource browser input', () => {
         await waitFor(() => {
             expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    source: sources[0],
+                    source: calculatedSources[0],
                     plugin: mockDamPlugin,
                 }),
                 {},

package/src/index.stories.tsx

@@ -37,7 +37,11 @@ const Template: StoryFn<typeof ResourceBrowser> = (props) => {
     return (
         <div className="w-[400px] m-3">
             <ResourceBrowserContextProvider
-                value={{ onRequestSources: onRequestSources as () => Promise<ResourceBrowserSource[]>, plugins }}
+                value={{
+                    onRequestSources: onRequestSources as () => Promise<ResourceBrowserSource[]>,
+                    plugins,
+                    searchEnabled: props.searchEnabled,
+                }}
             >
                 <ResourceBrowser {...props} value={resource} onChange={onChange} onClear={undefined} />
             </ResourceBrowserContextProvider>
@@ -55,6 +59,7 @@ Primary.args = {
     callbackWait: 0,
     singleSource: false,
     headerPortal: false,
+    searchEnabled: false,
 };
 
 export const Selected = Template.bind({});
@@ -77,3 +82,9 @@ SingleSource.args = {
     ...Primary.args,
     singleSource: true,
 };
+
+export const SearchEnabled = Template.bind({});
+SearchEnabled.args = {
+    ...Primary.args,
+    searchEnabled: true,
+};

package/src/index.tsx

@@ -1,12 +1,31 @@
 import React, { useState, useContext, useEffect, useCallback } from 'react';
 
 import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
-import { ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource, ResourceBrowserPlugin } from './types';
+import {
+    PluginLaunchMode,
+    ResourceBrowserUnresolvedResource,
+    ResourceBrowserResource,
+    ResourceBrowserPlugin,
+    ResourceBrowserSourceWithPlugin,
+} from './types';
 import { useSources } from './Hooks/useSources';
 import { PluginRender } from './Plugin/Plugin';
 import { AuthProvider, useAuthContext, AuthContext } from './ResourceBrowserContext/AuthProvider';
 
-export { ResourceBrowserContext, ResourceBrowserContextProvider, useAuthContext, AuthProvider, AuthContext };
+import BrowseToSource from './BrowseToSource/BrowseToSource';
+import SourceDropdown from './SourceDropdown/SourceDropdown';
+import SourceDropdownContainer from './SourceDropdownContainer/SourceDropdownContainer';
+
+export {
+    ResourceBrowserContext,
+    ResourceBrowserContextProvider,
+    useAuthContext,
+    AuthProvider,
+    AuthContext,
+    BrowseToSource,
+    SourceDropdown,
+    SourceDropdownContainer,
+};
 export * from './types';
 
 export type ResourceBrowserProps = {
@@ -21,24 +40,26 @@ export type ResourceBrowserProps = {
 export const ResourceBrowser = (props: ResourceBrowserProps) => {
     const { value } = props;
     const [error, setError] = useState<Error | null>(null);
-    const { onRequestSources, plugins } = useContext(ResourceBrowserContext);
+    const { onRequestSources, searchEnabled, plugins } = useContext(ResourceBrowserContext);
 
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-    const [source, setSource] = useState<ResourceBrowserSource | null>(null);
+    const [source, setSource] = useState<ResourceBrowserSourceWithPlugin | null>(null);
+    const [mode, setMode] = useState<PluginLaunchMode | null>(null);
     const { data: sources, isLoading, error: sourcesError } = useSources({ onRequestSources, plugins });
     const [plugin, setPlugin] = useState<ResourceBrowserPlugin | null>(null);
 
     // MainContainer will render a list of sources of one is not provided to it, callback to allow it to set the source once a user selects
     const handleSourceSelect = useCallback(
-        (source: ResourceBrowserSource | null) => {
+        (source: ResourceBrowserSourceWithPlugin, mode?: PluginLaunchMode) => {
             setSource(source);
+            setMode(mode || null);
         },
-        [setSource],
+        [setSource, setMode],
     );
 
-    // Try to auto set the source
+    // If an existing resource is passed in auto select its source
     useEffect(() => {
-        let source: ResourceBrowserSource | null = null;
+        let source: ResourceBrowserSourceWithPlugin | null = null;
         setError(null);
 
         // If there is a provided value try to use its source
@@ -50,34 +71,38 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                 // Set an error as the passed in value's source wasnt returned by onRequestSources
                 setError(new Error('Unable to find resource source.'));
             }
-        } else if (sources?.length === 1) {
-            // If only one source is passed in select it automatically
+        } else if (sources?.length === 1 && !searchEnabled) {
+            // If only one source is passed and search is not enabled select it automatically
             source = sources[0];
         }
 
         setSource(source);
+        setMode(null); // Passed in resource will always use the default mode
     }, [value, isLoading, sources, setSource, setError]);
 
+    // When a source is selected update our plugin reference to match (legacy support)
+    // the plugin is now attached to the source directly when fetched from the context so use that instead when possible
     useEffect(() => {
-        if (source) {
-            const plugin = plugins.find((plugin) => {
-                return plugin.type === source.type;
-            });
-            setPlugin(plugin || null);
+        if (source?.plugin) {
+            setPlugin(source.plugin);
         } else {
             setPlugin(null);
         }
     }, [plugins, source]);
 
+    // The modal has some control over it own open/closed state (for WCAG reasons) so keep this in sync with our state
     const handleModalStateChange = useCallback(
         (isOpen: boolean) => {
             setIsModalOpen(isOpen);
         },
         [setIsModalOpen],
     );
+
+    // If the modal closes and we dont have a value clear the source state so it goes back to the launcher on re-open
     useEffect(() => {
-        if (!isModalOpen && !value && sources?.length > 1) {
+        if (!isModalOpen && !value && (sources?.length > 1 || searchEnabled)) {
             setSource(null);
+            setMode(null);
         }
     }, [sources, isModalOpen]);
 
@@ -94,6 +119,8 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                 isLoading={isLoading}
                 error={sourcesError || error}
                 plugin={plugin}
+                pluginMode={mode}
+                searchEnabled={searchEnabled}
                 useResource={() => {
                     return {
                         data: null,
@@ -116,6 +143,8 @@ export const ResourceBrowser = (props: ResourceBrowserProps) => {
                         isLoading={isLoading}
                         error={error}
                         plugin={plugin}
+                        pluginMode={mode}
+                        searchEnabled={searchEnabled}
                         useResource={thisPlugin.useResolveResource}
                         isModalOpen={isModalOpen}
                         onModalStateChange={handleModalStateChange}

package/src/types.ts

@@ -20,10 +20,25 @@ export interface ResourceBrowserSource {
     type: ResourceBrowserPluginType;
 }
 
+export interface ResourceBrowserSourceWithPlugin extends ResourceBrowserSource {
+    // Sources plugin for quick reference
+    plugin: ResourceBrowserPlugin;
+}
+
 export interface ResourceBrowserSourceWithConfig extends ResourceBrowserSource {
     configuration?: AuthenticationConfiguration;
 }
 
+export enum PluginLaunchModeType {
+    'Browse' = 'browse',
+    'Search' = 'search',
+}
+
+export type PluginLaunchMode = {
+    type: PluginLaunchModeType;
+    args?: ResourceBrowserSearchUIArgs | ResourceBrowserUIArgs;
+};
+
 export type ResourceBrowserUnresolvedResource = {
     sourceId: string;
     resourceId: string;
@@ -48,12 +63,31 @@ export type ResourceBrowserSelectedState = {
     description: Array<ReactElement>;
 };
 
-export type ResourceBrowserUIProps = {
+type ResourceBrowserProps = {
     source: ResourceBrowserSource;
+    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
+    sources: ResourceBrowserSourceWithPlugin[];
     allowedTypes?: string[];
     headerPortal?: Element;
-    preselectedResource?: ResourceBrowserResource;
     onSelected: (resource: ResourceBrowserResource) => void;
+    searchEnabled: boolean;
+};
+
+export type ResourceBrowserUIArgs = {
+    preselectedResource?: ResourceBrowserResource;
+    browseTo?: ResourceBrowserUnresolvedResource;
+};
+export type ResourceBrowserUIProps = ResourceBrowserProps & ResourceBrowserUIArgs;
+
+export type ResourceBrowserSearchUIArgs = {
+    query?: string;
+};
+export type ResourceBrowserSearchUIProps = ResourceBrowserProps & ResourceBrowserSearchUIArgs;
+
+export type ResourceBrowserLauncherProps = {
+    source: ResourceBrowserSource;
+    onSearch: (query: string) => void;
+    onBrowse: (browseTo?: ResourceBrowserUnresolvedResource) => void;
 };
 
 export type useResolveResourceResponse = {
@@ -72,9 +106,15 @@ export interface ResourceBrowserPlugin {
     // Setting to create a header portal
     createHeaderPortal?: boolean;
 
-    /** React Functional Component to provde the UI to render to allow a user to select a resource to use */
+    /** React Functional Component to provde the UI to render to allow a user to browse for resource to use */
     sourceBrowserComponent: () => React.FunctionComponent<ResourceBrowserUIProps>;
 
+    /** React Functional Component to provde the UI to render to allow a user to search for resource to use */
+    sourceSearchComponent: () => React.FunctionComponent<ResourceBrowserSearchUIProps>;
+
+    /** React Functional Component to provde the sources launcher view */
+    renderResourceLauncher: () => React.FunctionComponent<ResourceBrowserLauncherProps>;
+
     /** Function to provde the the summary information to show what resource is currently selected */
     renderSelectedResource: (resource: ResourceBrowserResource) => Promise<ResourceBrowserSelectedState>;
 

package/.eslintrc

@@ -1,40 +0,0 @@
-{
-    "extends": ["@squiz"],
-    "plugins": ["import", "prettier"],
-    "rules": {
-        "prettier/prettier": "error",
-    },
-    "settings": {
-        "import/parsers": {
-            "@typescript-eslint/parser": [".ts", ".tsx"],
-        },
-        "import/resolver": {
-            "typescript": {
-                "alwaysTryTypes": true,
-            }
-        }
-    },
-    "ignorePatterns": ["**/lib/"],
-    "overrides": [
-        {
-            "files": ["*.spec.ts", "*.spec.tsx"],
-            "rules": {
-                "no-var": 0,
-                "import/no-extraneous-dependencies": 0,
-            }
-        },
-        {
-            "files": ["*.config.ts", "*.config.js", "build.js"],
-            "rules": {
-                "import/no-extraneous-dependencies": 0,
-            }
-        },
-        {
-            "files": ["*.stories.ts", "*.stories.tsx"],
-            "rules": {
-                "import/no-extraneous-dependencies": 0,
-                "no-console": "off"
-            }
-        }
-    ]
-}

package/.storybook/main.ts

@@ -1,23 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    {
-      name: '@storybook/addon-styling',
-      options: {
-        postCss: true,
-      },
-    },
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-};
-export default config;

package/.storybook/preview-body.html

@@ -1 +0,0 @@
-<body class="squiz-rb-scope"></body>

package/.storybook/preview-head.html

@@ -1,12 +0,0 @@
-<script>
-    window.global = window;
-</script>
-
-<style>
-    .sb-show-main.sb-main-padded {
-        padding: 0;
-    }
-    body {
-        font-family: 'Open Sans';
-    }
-</style>

package/.storybook/preview.ts

@@ -1,16 +0,0 @@
-import type { Preview } from '@storybook/react';
-import '../src/index.scss';
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-};
-
-export default preview;