@teambit/react.ui.component-highlighter 0.0.479 → 0.0.483

package/label/label.tsx

@@ -2,24 +2,34 @@ import React, { useMemo, useState } from 'react';
 import { usePopper } from 'react-popper';
 import { ComponentID } from '@teambit/component-id';
 import type { CardProps } from '@teambit/base-ui.surfaces.card';
-import useAnimationFrame from 'use-animation-frame';
 import type { Placement, Modifier } from '@popperjs/core';
 import '@popperjs/core';
 
 import { DefaultLabel } from './default-label';
 import { ComponentLabel } from './component-label';
+import { useAnimationFrame } from '../use-animation-frame';
 
 export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   targetRef: HTMLElement | null;
   offset?: [number, number];
   placement?: Placement;
   flip?: boolean;
+  /** continually update label position to match moving elements */
+  watchMotion?: boolean;
 }
 
 export type { Placement };
 
 // TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
-export function LabelContainer({ targetRef, offset, placement, flip = true, className, ...rest }: LabelContainerProps) {
+export function LabelContainer({
+  targetRef,
+  offset,
+  placement,
+  flip = true,
+  watchMotion,
+  className,
+  ...rest
+}: LabelContainerProps) {
   const [sourceRef, setSourceRef] = useState<HTMLDivElement | null>(null);
 
   const modifiers = useMemo<Partial<Modifier<any, any>>[]>(
@@ -32,19 +42,11 @@ export function LabelContainer({ targetRef, offset, placement, flip = true, clas
     placement,
   });
 
-  useAnimationFrame(() => update?.(), [update]);
+  useAnimationFrame(!!watchMotion && update);
 
   if (!targetRef) return null;
 
-  return (
-    <div
-      {...rest}
-      ref={setSourceRef}
-      className={className}
-      style={styles.popper}
-      {...attributes.popper}
-    />
-  );
+  return <div {...rest} ref={setSourceRef} className={className} style={styles.popper} {...attributes.popper} />;
 }
 
 export interface LabelProps extends CardProps {

package/multi-highlighter/index.ts

@@ -0,0 +1,2 @@
+export { MultiHighlighter } from './multi-highlighter';
+export type { MultiHighlighterProps } from './multi-highlighter';

package/multi-highlighter/multi-highlighter.composition.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+// import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
+import { MockedComponentWithMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { MultiHighlighter } from './multi-highlighter';
+
+export const MultiHighlighterPreview = () => {
+  return (
+    <MultiHighlighter style={{ padding: 40 }}>
+      <MockedComponentWithMeta>hover here</MockedComponentWithMeta>
+      <br />
+      <br />
+      <br />
+      <MockedComponentWithMeta>also here</MockedComponentWithMeta>
+    </MultiHighlighter>
+  );
+};
+
+export const MultiHighlighterWithCustomColors = () => {
+  return (
+    <MultiHighlighter
+      style={{ padding: 40, color: 'yellow' }}
+      bgColor="cornflowerblue"
+      bgColorHover="blue"
+      bgColorActive="DarkSlateBlue"
+    >
+      <MockedComponentWithMeta>hover here</MockedComponentWithMeta>
+      <br />
+      <br />
+      <br />
+      <MockedComponentWithMeta>also here</MockedComponentWithMeta>
+    </MultiHighlighter>
+  );
+};
+
+// export const HighlightingAllElementsInTheEnterprisePage = () => {
+//   return (
+//     <MultiHighlighter>
+//       <EnterpriseOffering style={{ height: 300 }} />
+//     </MultiHighlighter>
+//   );
+// };

package/multi-highlighter/multi-highlighter.spec.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MultiHighlighterPreview } from './multi-highlighter.composition';
+
+it('should not throw when rendering the multi-highlighter', () => {
+  const { getByText } = render(<MultiHighlighterPreview />);
+
+  const rendered = getByText('hover here');
+
+  expect(rendered).toBeInstanceOf(HTMLElement);
+});
+
+// .querySelectorAll() is not working as expected during the test, ignoring for now :(
+// it('should render highlighter for all children components', async () => {
+//   const { queryAllByText } = render(<Preview />);
+
+//   // allow useEffect to run
+//   await new Promise((res) => setTimeout(res, 200));
+
+//   const rendered = queryAllByText('input/button');
+//   expect(rendered).toHaveLength(2);
+// });

package/multi-highlighter/multi-highlighter.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState, createRef } from 'react';
+import getXPath from 'get-xpath';
+import { ElementHighlighter, ElementHighlighterProps, HighlightTarget } from '@teambit/react.ui.component-highlighter';
+import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
+import { hasComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { excludeHighlighterSelector } from '../ignore-highlighter';
+
+// TODO - reuse selector from @teambit/react.ui.component-highlighter
+const allExceptHighlighterQuery = `:not(${excludeHighlighterSelector}, ${excludeHighlighterSelector} *)`;
+
+export interface MultiHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
+  disabled?: boolean;
+  // /** automatically update when children update. Use with caution, might be slow */
+  // watchDom?: boolean;
+  /**
+   * continually update highlighter position to match dom elements as they move. Use with caution, might be slow
+   * @default false
+   */
+  watchMotion?: boolean;
+
+  bgColor?: string;
+  bgColorHover?: string;
+  bgColorActive?: string;
+  highlighterOptions?: ElementHighlighterProps;
+}
+
+export function MultiHighlighter({
+  children,
+  disabled,
+  watchMotion = false,
+  style,
+  bgColor,
+  bgColorActive,
+  bgColorHover,
+  highlighterOptions,
+  ...rest
+}: MultiHighlighterProps) {
+  const ref = createRef<HTMLDivElement>();
+  const [targets, setTargets] = useState<Record<string, HighlightTarget>>({});
+
+  useEffect(() => {
+    if (disabled) {
+      setTargets({});
+      return;
+    }
+
+    const { current } = ref;
+    if (!current) return;
+
+    // select all non-highlighter elements
+    const allElements = Array.from(current.querySelectorAll<HTMLElement>(allExceptHighlighterQuery));
+
+    // converge on the root element of components
+    const rootElements = allElements.map(toRootElement).filter((x) => !!x);
+    // deduplicate
+    const uniqueRoots = new Set(rootElements);
+
+    const nextTargets: Record<string, HighlightTarget> = {};
+    uniqueRoots.forEach((element) => {
+      const comp = domToReact(element);
+      if (!element || !hasComponentMeta(comp)) return;
+
+      const key = getXPath(element);
+      // eslint-disable-next-line no-underscore-dangle
+      nextTargets[key] = { element, id: comp.__bit_component.id };
+    });
+
+    setTargets(nextTargets);
+  }, [disabled]);
+
+  const colors = {
+    '--bit-highlighter-color': bgColor,
+    '--bit-highlighter-color-hover': bgColorHover,
+    '--bit-highlighter-color-active': bgColorActive,
+  };
+
+  return (
+    <div ref={ref} {...rest} style={{ ...colors, ...style }}>
+      {children}
+      {Object.entries(targets).map(([key, target]) => (
+        <ElementHighlighter key={key} target={target} watchMotion={watchMotion} {...highlighterOptions} />
+      ))}
+    </div>
+  );
+}

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.479",
+  "version": "0.0.483",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.479"
+    "version": "0.0.483"
   },
   "dependencies": {
-    "@popperjs/core": "2.6.0",
     "classnames": "2.2.6",
+    "@popperjs/core": "2.6.0",
     "react-popper": "2.2.4",
-    "use-animation-frame": "0.1.0",
+    "get-xpath": "3.0.1",
     "use-debounce": "6.0.1",
     "url-join": "4.0.1",
     "core-js": "^3.0.0",
@@ -20,11 +20,12 @@
     "@teambit/base-ui.utils.popper-js.resize-to-match-reference": "1.0.0",
     "@teambit/base-ui.surfaces.card": "1.0.1",
     "@teambit/base-ui.routing.native-link": "1.0.0",
-    "@teambit/react.babel.bit-react-transformer": "0.0.474",
-    "@teambit/component-id": "0.0.380",
-    "@teambit/react.modules.dom-to-react": "0.0.466",
-    "@teambit/react.ui.hover-selector": "0.0.145",
-    "@teambit/component.modules.component-url": "0.0.101"
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.471",
+    "@teambit/component-id": "0.0.383",
+    "@teambit/react.modules.dom-to-react": "0.0.470",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.4",
+    "@teambit/react.ui.hover-selector": "0.0.148",
+    "@teambit/component.modules.component-url": "0.0.104"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -40,7 +41,7 @@
     "@teambit/design.ui.icon-button": "1.0.10"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.176",
+    "@teambit/legacy": "1.0.179",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -68,7 +69,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.176",
+        "@teambit/legacy": "1.0.179",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/use-animation-frame.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+// TODO - extract to its own component
+
+export function useAnimationFrame(cb?: false | null | (() => any), deps: [] = []) {
+  useEffect(() => {
+    if (!cb) return () => {};
+
+    let animationFrameId = -1;
+    const animate = () => {
+      cb();
+      animationFrameId = window.requestAnimationFrame(animate);
+    };
+    animate();
+
+    return () => {
+      if (animationFrameId > -1) window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [cb, ...deps]);
+}

package/component-highlighter/bit-react-component.ts

@@ -1,5 +0,0 @@
-import type { ComponentMetaHolder } from '@teambit/react.babel.bit-react-transformer';
-
-export function hasComponentMeta(component: any): component is ComponentMetaHolder {
-  return component && typeof component.__bit_component === 'object' && typeof component.__bit_component.id === 'string';
-}

package/dist/component-highlighter/bit-react-component.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentMetaHolder } from '@teambit/react.babel.bit-react-transformer';
-export declare function hasComponentMeta(component: any): component is ComponentMetaHolder;

package/dist/component-highlighter/bit-react-component.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasComponentMeta = void 0;
-function hasComponentMeta(component) {
-    return component && typeof component.__bit_component === 'object' && typeof component.__bit_component.id === 'string';
-}
-exports.hasComponentMeta = hasComponentMeta;
-//# sourceMappingURL=bit-react-component.js.map

package/dist/component-highlighter/bit-react-component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bit-react-component.js","sourceRoot":"","sources":["../../component-highlighter/bit-react-component.ts"],"names":[],"mappings":";;;AAEA,SAAgB,gBAAgB,CAAC,SAAc;IAC7C,OAAO,SAAS,IAAI,OAAO,SAAS,CAAC,eAAe,KAAK,QAAQ,IAAI,OAAO,SAAS,CAAC,eAAe,CAAC,EAAE,KAAK,QAAQ,CAAC;AACxH,CAAC;AAFD,4CAEC"}