@patternfly/quickstarts 2.2.2 → 2.3.0

package/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Tooltip } from '@patternfly/react-core';
+import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
+import { useEventListener } from '../../hooks';
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
+
+type CopyClipboardProps = {
+  element: HTMLElement;
+  rootSelector: string;
+  docContext: HTMLDocument;
+};
+
+export const CopyClipboard: React.FC<CopyClipboardProps> = ({
+  element,
+  rootSelector,
+  docContext,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const [showSuccessContent, setShowSuccessContent] = React.useState<boolean>(false);
+  const textToCopy = React.useMemo(() => {
+    const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+    return (docContext.querySelector(
+      `${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`,
+    ) as HTMLElement).innerText;
+  }, [element, docContext, rootSelector]);
+
+  useEventListener(
+    element,
+    'click',
+    React.useCallback(() => {
+      navigator.clipboard
+        .writeText(textToCopy)
+        .then(() => {
+          setShowSuccessContent(true);
+        })
+        .catch(() => {});
+    }, [textToCopy]),
+  );
+
+  useEventListener(
+    element,
+    'mouseleave',
+    React.useCallback(() => {
+      setShowSuccessContent(false);
+    }, []),
+  );
+
+  return showSuccessContent ? (
+    <Tooltip
+      key="after-copy"
+      isVisible
+      reference={() => element as HTMLElement}
+      content={getResource('Successfully copied to clipboard!')}
+      className="pfext-quick-start__base"
+    />
+  ) : (
+    <Tooltip
+      key="before-copy"
+      reference={() => element as HTMLElement}
+      content={getResource('Copy to clipboard')}
+      className="pfext-quick-start__base"
+    />
+  );
+};
+
+type MarkdownCopyClipboardProps = {
+  docContext: HTMLDocument;
+  rootSelector: string;
+};
+
+const MarkdownCopyClipboard: React.FC<MarkdownCopyClipboardProps> = ({
+  docContext,
+  rootSelector,
+}) => {
+  const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
+  return elements.length > 0 ? (
+    <>
+      {Array.from(elements).map((elm) => {
+        const attributeValue = elm.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+        return (
+          <CopyClipboard
+            key={attributeValue}
+            element={elm as HTMLElement}
+            rootSelector={rootSelector}
+            docContext={docContext}
+          />
+        );
+      })}
+    </>
+  ) : null;
+};
+
+export default MarkdownCopyClipboard;

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/MarkdownCopyClipboard.spec.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import MarkdownCopyClipboard, { CopyClipboard } from '../MarkdownCopyClipboard';
+import { htmlDocumentForCopyClipboard } from './test-data';
+
+describe('MarkdownCopyClipboard', () => {
+  beforeAll(() => {
+    document.body.innerHTML = htmlDocumentForCopyClipboard;
+  });
+  it('should render null if no element is found', () => {
+    const wrapper = shallow(
+      <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-3" />,
+    );
+    expect(wrapper.isEmptyRender()).toBe(true);
+    expect(wrapper.find(CopyClipboard).exists()).toBe(false);
+  });
+
+  it('should render null if no element is found', () => {
+    const wrapper = shallow(
+      <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-1" />,
+    );
+    expect(wrapper.isEmptyRender()).toBe(false);
+    expect(wrapper.find(CopyClipboard).exists()).toBe(true);
+  });
+});

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/test-data.ts

@@ -0,0 +1,5 @@
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID, MARKDOWN_EXECUTE_BUTTON_ID } from '../const';
+
+export const htmlDocumentForCopyClipboard = `<div id="copy-markdown-1"><div ${MARKDOWN_SNIPPET_ID}="1234">some test data for testing</div><button ${MARKDOWN_COPY_BUTTON_ID}="1234"</button><div ${MARKDOWN_SNIPPET_ID}="12354">some test data for testing</div><button ${MARKDOWN_COPY_BUTTON_ID}="12354"</button></div>`;
+
+export const htmlDocumentForExecuteButton = `<div id="execute-markdown-1"><div ${MARKDOWN_SNIPPET_ID}="1234">some test data for testing</div><button ${MARKDOWN_EXECUTE_BUTTON_ID}="1234"</button><div ${MARKDOWN_SNIPPET_ID}="12354">some test data for testing</div><button ${MARKDOWN_EXECUTE_BUTTON_ID}="12354"</button></div>`;

package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { removeTemplateWhitespace } from './utils';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Alert } from '@patternfly/react-core';
+import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
+import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
+import './showdown-extension.scss';
+
+enum AdmonitionType {
+  TIP = 'TIP',
+  NOTE = 'NOTE',
+  IMPORTANT = 'IMPORTANT',
+  WARNING = 'WARNING',
+  CAUTION = 'CAUTION',
+}
+
+const admonitionToAlertVariantMap = {
+  [AdmonitionType.NOTE]: { variant: 'info' },
+  [AdmonitionType.TIP]: { variant: 'default', customIcon: <LightbulbIcon /> },
+  [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+  [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: <FireIcon /> },
+  [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+
+const useAdmonitionShowdownExtension = () => {
+  // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
+      replace: (
+        text: string,
+        content: string,
+        admonitionLabel: string,
+        admonitionType: string,
+        groupId: string,
+      ): string => {
+        if (!content || !admonitionLabel || !admonitionType || !groupId) {
+          return text;
+        }
+        admonitionType = admonitionType.toUpperCase();
+
+        const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
+        const style =
+          admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
+
+        const pfAlert = (
+          <Alert
+            variant={variant}
+            customIcon={customIcon && customIcon}
+            isInline
+            title={admonitionType}
+            className="pfext-markdown-admonition"
+            style={style}
+          >
+            {content}
+          </Alert>
+        );
+        return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
+      },
+    }),
+    [],
+  );
+};
+
+export default useAdmonitionShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { removeTemplateWhitespace } from './utils';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { CodeBlock } from '@patternfly/react-core';
+import './showdown-extension.scss';
+
+const useCodeShowdownExtension = () => {
+  return React.useMemo(
+    () => ({
+      type: 'output',
+      regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+      replace: (text: string, content: string): string => {
+        if (!content) {
+          return text;
+        }
+        const pfCodeBlock = <CodeBlock>{content}</CodeBlock>;
+
+        return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
+      },
+    }),
+    [],
+  );
+};
+
+export default useCodeShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/const.ts

@@ -0,0 +1,3 @@
+export const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
+export const MARKDOWN_EXECUTE_BUTTON_ID = 'data-execute-for';
+export const MARKDOWN_SNIPPET_ID = 'data-snippet-id';

package/src/ConsoleShared/src/components/markdown-extensions/index.ts

@@ -0,0 +1,5 @@
+export { default as MarkdownCopyClipboard } from './MarkdownCopyClipboard';
+export { default as useInlineCopyClipboardShowdownExtension } from './inline-clipboard-extension';
+export { default as useMultilineCopyClipboardShowdownExtension } from './multiline-clipboard-extension';
+export { default as useAdmonitionShowdownExtension } from './admonition-extension';
+export { default as useCodeShowdownExtension } from './code-extension';

package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
+import { removeTemplateWhitespace } from './utils';
+import { renderToStaticMarkup } from 'react-dom/server';
+import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+import './showdown-extension.scss';
+
+const useInlineCopyClipboardShowdownExtension = () => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
+      replace: (
+        text: string,
+        group: string,
+        subGroup: string,
+        groupType: string,
+        groupId: string,
+      ): string => {
+        if (!group || !subGroup || !groupType || !groupId) {
+          return text;
+        }
+        return removeTemplateWhitespace(
+          `<span class="pf-c-clipboard-copy pf-m-inline">
+              <span class="pf-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</span>
+              <span class="pf-c-clipboard-copy__actions">
+                <span class="pf-c-clipboard-copy__actions-item">
+                  <button class="pf-c-button pf-m-plain" aria-label="${getResource(
+                    'Copy to clipboard',
+                  )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                    ${renderToStaticMarkup(<CopyIcon />)}
+                  </button>
+                </span>
+              </span>
+            </span>`,
+        );
+      },
+    }),
+    [getResource],
+  );
+};
+
+export default useInlineCopyClipboardShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
+import { renderToStaticMarkup } from 'react-dom/server';
+import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+
+import './showdown-extension.scss';
+
+const useMultilineCopyClipboardShowdownExtension = () => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /```[\n]((.*?\n)+)```{{copy}}/g,
+      replace: (
+        text: string,
+        group: string,
+        subgroup: string,
+        groupType: string,
+        groupId: string,
+      ): string => {
+        if (!group || !subgroup || !groupType || !groupId) {
+          return text;
+        }
+        return `<div class="pf-c-code-block">
+              <div class="pf-c-code-block__header">
+                <div class="pf-c-code-block__actions">
+                  <div class="pf-c-code-block__actions-item">
+                    <button class="pf-c-button pf-m-plain" type="button" aria-label="${getResource(
+                      'Copy to clipboard',
+                    )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                      ${renderToStaticMarkup(<CopyIcon />)}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="pf-c-code-block__content">
+                <pre class="pf-c-code-block__pre pfext-code-block__pre">
+                  <code class="pf-c-code-block__code" 
+                    ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</code>
+                </pre>
+              </div>
+            </div>`;
+      },
+    }),
+    [getResource],
+  );
+};
+
+export default useMultilineCopyClipboardShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/showdown-extension.scss

@@ -0,0 +1,52 @@
+.pfext-markdown-view {
+  .pfext-code-block__pre {
+    /* override the styles applied by showdown while parsing <pre /> */
+    display: flex;
+    border: none;
+    border-radius: none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .pfext-markdown-execute-snippet {
+  
+    &__button {
+      & > i.fa-check {
+        display: none;
+      }
+  
+      & > i.fa-play {
+        display: inline;
+      }
+  
+      &[data-executed] {
+        & > i.fa-check {
+          display: inline;
+        }
+  
+        & > i.fa-play {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .pfext-markdown-admonition {
+    &.pf-c-alert {
+      // add margins to match design
+      margin: var(--pf-global--spacer--md) 0;
+      .pf-c-alert__title {
+        // remove margins from markdown css
+        margin-top: 0;
+        margin-bottom: 0;
+        // lift PF style specificity to override markdown css
+        font-weight: var(--pf-c-alert__title--FontWeight);
+        font-family: inherit;
+        line-height: inherit;
+        color: var(--pf-c-alert__title--Color);
+        word-break: break-word;
+      }
+    }
+  }
+}

package/src/ConsoleShared/src/components/markdown-extensions/utils.ts

@@ -0,0 +1,3 @@
+export const removeTemplateWhitespace = (template: string): string => {
+  return template.replace(/>(?:\s|\n)+</g, '><');
+};

package/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Spotlight } from '../spotlight';
+
+type MarkdownHighlightExtensionProps = {
+  docContext: HTMLDocument;
+  rootSelector: string;
+};
+const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
+  docContext,
+  rootSelector,
+}) => {
+  const [selector, setSelector] = React.useState<string>(null);
+  React.useEffect(() => {
+    const elements = docContext.querySelectorAll(`${rootSelector} [data-highlight]`);
+    let timeoutId: NodeJS.Timeout;
+    function startHighlight(e) {
+      const highlightId = e.target.getAttribute('data-highlight');
+      if (!highlightId) {
+        return;
+      }
+      setSelector(null);
+      timeoutId = setTimeout(() => {
+        setSelector(`[data-quickstart-id="${highlightId}"]`);
+      }, 0);
+    }
+    elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
+    return () => {
+      clearTimeout(timeoutId);
+      elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
+    };
+  }, [docContext, rootSelector]);
+  React.useEffect(() => {
+    const elements = docContext.querySelectorAll(`${rootSelector} [class^=data-highlight__]`);
+    let timeoutId: NodeJS.Timeout;
+    function startHighlight(e) {
+      e.preventDefault();
+      const classes = e.target.getAttribute('class').split(' ');
+      let highlightId;
+      for (let i = 0; i < classes.length; i++) {
+        if (classes[0].startsWith('data-highlight__')) {
+          highlightId = classes[0].split('__')[1];
+          break;
+        }
+      }
+      if (!highlightId) {
+        return;
+      }
+      setSelector(null);
+      timeoutId = setTimeout(() => {
+        setSelector(`[data-quickstart-id="${highlightId}"]`);
+      }, 0);
+    }
+    elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
+    return () => {
+      clearTimeout(timeoutId);
+      elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
+    };
+  }, [docContext, rootSelector]);
+  if (!selector) {
+    return null;
+  }
+  return <Spotlight selector={selector} interactive />;
+};
+export default MarkdownHighlightExtension;

package/src/ConsoleShared/src/components/markdown-highlight-extension/highlight-consts.ts

@@ -0,0 +1,9 @@
+export const LINK_LABEL = '[\\d\\w\\s-()$!]+';
+export const HIGHLIGHT_ACTIONS = ['highlight'];
+export const SELECTOR_ID = `[\\w-]+`;
+
+// [linkLabel]{{action id}}
+export const HIGHLIGHT_REGEXP = new RegExp(
+  `\\[(${LINK_LABEL})]{{(${HIGHLIGHT_ACTIONS.join('|')}) (${SELECTOR_ID})}}`,
+  'g',
+);

package/src/ConsoleShared/src/components/markdown-highlight-extension/index.ts

@@ -0,0 +1 @@
+export { default as MarkdownHighlightExtension } from './MarkdownHighlightExtension';

package/src/ConsoleShared/src/components/modal/Modal.scss

@@ -0,0 +1,3 @@
+.pfext-modal {
+  position: absolute !important;
+}

package/src/ConsoleShared/src/components/modal/Modal.tsx

@@ -0,0 +1,19 @@
+import './Modal.scss';
+import * as React from 'react';
+import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+
+type ModalProps = {
+  isFullScreen?: boolean;
+  ref?: React.LegacyRef<PfModal>;
+} & PfModalProps;
+
+const Modal: React.FC<ModalProps> = ({ isFullScreen = false, className, ...props }) => (
+  <PfModal
+    {...props}
+    className={css('pfext-modal', className)}
+    appendTo={() => (isFullScreen ? document.body : document.querySelector('#modal-container'))}
+  />
+);
+
+export default Modal;

package/src/ConsoleShared/src/components/modal/index.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal';

package/src/ConsoleShared/src/components/popper/Portal.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+type GetContainer = Element | null | undefined | (() => Element);
+
+type PortalProps = {
+  container?: GetContainer;
+};
+
+const getContainer = (container: GetContainer): Element | null | undefined =>
+  typeof container === 'function' ? container() : container;
+
+const Portal: React.FC<PortalProps> = ({ children, container }) => {
+  const [containerNode, setContainerNode] = React.useState<Element>();
+
+  React.useLayoutEffect(() => {
+    setContainerNode(getContainer(container) || document.body);
+  }, [container]);
+
+  return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
+};
+
+export default Portal;

package/src/ConsoleShared/src/components/popper/SimplePopper.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import Portal from './Portal';
+
+const SimplePopper: React.FC = ({ children }) => {
+  const openProp = true;
+  const nodeRef = React.useRef<Element>();
+  const popperRef = React.useRef(null);
+  const [isOpen, setOpenState] = React.useState(openProp);
+
+  const setOpen = React.useCallback((newOpen: boolean) => {
+    setOpenState(newOpen);
+  }, []);
+
+  React.useEffect(() => {
+    setOpen(openProp);
+  }, [openProp, setOpen]);
+
+  const onKeyDown = React.useCallback(
+    (e: KeyboardEvent) => {
+      if (e.keyCode === 27) {
+        setOpen(false);
+      }
+    },
+    [setOpen],
+  );
+
+  const onClickOutside = React.useCallback(
+    (e: MouseEvent) => {
+      if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
+        setOpen(false);
+      }
+    },
+    [setOpen],
+  );
+
+  const destroy = React.useCallback(() => {
+    if (popperRef.current) {
+      popperRef.current.destroy();
+      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener('mousedown', onClickOutside, true);
+      document.removeEventListener('touchstart', onClickOutside, true);
+    }
+  }, [onClickOutside, onKeyDown]);
+
+  const initialize = React.useCallback(() => {
+    if (!nodeRef.current || !isOpen) {
+      return;
+    }
+
+    destroy();
+  }, [isOpen, destroy]);
+
+  const nodeRefCallback = React.useCallback(
+    (node) => {
+      nodeRef.current = node;
+      initialize();
+    },
+    [initialize],
+  );
+
+  React.useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  React.useEffect(() => {
+    return () => {
+      destroy();
+    };
+  }, [destroy]);
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      destroy();
+    }
+  }, [destroy, isOpen]);
+
+  return isOpen ? (
+    <Portal>
+      <div
+        ref={nodeRefCallback}
+        style={{ zIndex: 9999, position: 'absolute', top: 0, left: 0 }}
+        className="pfext-quick-start__base"
+      >
+        {children}
+      </div>
+    </Portal>
+  ) : null;
+};
+
+export default SimplePopper;

package/src/ConsoleShared/src/components/popper/index.ts

@@ -0,0 +1,2 @@
+export { default as SimplePopper } from './SimplePopper';
+export { default as Portal } from './Portal';

package/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx

@@ -0,0 +1,58 @@
+import './spotlight.scss';
+import * as React from 'react';
+import { Portal, SimplePopper } from '../popper';
+
+type InteractiveSpotlightProps = {
+  element: Element;
+};
+
+const isInViewport = (elementToCheck: Element) => {
+  const rect = elementToCheck.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+};
+
+const InteractiveSpotlight: React.FC<InteractiveSpotlightProps> = ({ element }) => {
+  const { top, bottom, left, right, height, width } = element.getBoundingClientRect();
+  const style: React.CSSProperties = {
+    height,
+    width,
+    top,
+    left,
+    bottom,
+    right,
+  };
+  const [clicked, setClicked] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!clicked) {
+      if (!isInViewport(element)) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+      }
+      const handleClick = () => setClicked(true);
+      document.addEventListener('click', handleClick);
+      return () => {
+        document.removeEventListener('click', handleClick);
+      };
+    }
+    return () => {};
+  }, [element, clicked]);
+
+  if (clicked) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <SimplePopper>
+        <div className="pfext-spotlight pfext-spotlight__element-highlight-animate" style={style} />
+      </SimplePopper>
+    </Portal>
+  );
+};
+
+export default InteractiveSpotlight;