@teambit/react.ui.component-highlighter 0.0.489 → 0.0.493

package/hybrid-highligher/hybrid-highlighter.tsx

@@ -3,9 +3,15 @@ import classnames from 'classnames';
 import { v4 } from 'uuid';
 
 import { useHoverHighlighter } from '../hover-highlighter';
-import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../element-highlighter';
+import {
+  ElementHighlighter,
+  HighlightTarget,
+  Placement,
+  HighlightClasses,
+  HighlighterSize,
+} from '../element-highlighter';
 import { useMultiHighlighter } from '../multi-highlighter/use-multi-highlighter';
-import type { MatchRule } from '../rule-matcher';
+import type { MatchRule, ComponentMatchRule } from '../rule-matcher';
 
 export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
   /** stop all highlighting and drop listeners */
@@ -27,6 +33,8 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
 
   /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
   rule?: MatchRule;
+  /** filter components to match this rule. Can be id, array of ids, or a function */
+  componentRule?: ComponentMatchRule;
 
   /** set the behavior of the highlighter.
    * `disabled` - stops highlighting.
@@ -37,6 +45,7 @@ export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElem
   bgColor?: string;
   bgColorHover?: string;
   bgColorActive?: string;
+  size?: HighlighterSize;
 }
 
 /** automatically highlight components on hover */
@@ -47,6 +56,7 @@ export function HybridHighlighter({
   watchMotion = true,
   placement,
   rule,
+  componentRule,
 
   classes,
   highlightStyle,
@@ -55,6 +65,7 @@ export function HybridHighlighter({
   bgColor,
   bgColorHover,
   bgColorActive,
+  size,
   children,
   ...rest
 }: HybridHighlighterProps) {
@@ -76,6 +87,7 @@ export function HybridHighlighter({
       scopeClass,
       disabled: disabled || mode !== 'hover',
       rule,
+      componentRule,
     }
   );
 
@@ -85,6 +97,7 @@ export function HybridHighlighter({
     scopeClass,
     disabled: disabled || mode !== 'allChildren',
     rule,
+    componentRule,
   });
 
   const _styles = useMemo(
@@ -119,6 +132,7 @@ export function HybridHighlighter({
           style={highlightStyle}
           placement={placement}
           watchMotion={watchMotion}
+          size={size}
         />
       ))}
     </div>

package/label/component-strip.module.scss

@@ -0,0 +1,64 @@
+$borderRadius: 8px;
+$gap: 2px;
+
+.componentStrip {
+  display: flex;
+
+  font-size: 14px;
+  line-height: 16px;
+  border-radius: $borderRadius;
+  box-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.23);
+
+  &[data-size='s'] {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &[data-size='m'] {
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  &[data-size='l'] {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  > * {
+    padding: 4px 8px;
+
+    transition: filter 300ms, background-color 300ms;
+    transform: translateZ(0); //fix blurriness in Safari
+
+    background: var(--bit-highlighter-color, #eebcc9);
+
+    &:link,
+    &:visited {
+      text-decoration: inherit; // reset browser defaults
+      color: inherit; // reset browser defaults
+
+      &:hover {
+        background: var(--bit-highlighter-color-hover, #f6dae2);
+      }
+
+      &:active {
+        background: var(--bit-highlighter-color-active, #e79db1);
+        color: inherit;
+      }
+    }
+
+    &:first-child {
+      border-top-left-radius: $borderRadius;
+      border-bottom-left-radius: $borderRadius;
+    }
+
+    margin-right: $gap;
+
+    &:last-child {
+      border-top-right-radius: $borderRadius;
+      border-bottom-right-radius: $borderRadius;
+
+      margin-right: unset;
+    }
+  }
+}

package/label/component-strip.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo, ReactNode, forwardRef, ForwardedRef } from 'react';
+import { NativeLink } from '@teambit/base-ui.routing.native-link';
+import { ComponentID } from '@teambit/component-id';
+import { ScopeUrl } from '@teambit/component.modules.component-url';
+import {
+  componentMetaField,
+  ComponentMetaHolder,
+} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import styles from './component-strip.module.scss';
+import { calcComponentLink } from './links';
+
+export type ComponentStripSize = 's' | 'm' | 'l';
+
+interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
+  component: ComponentMetaHolder;
+  size?: ComponentStripSize;
+}
+export const ComponentStrip = forwardRef(function ComponentStrip(
+  { component, size = 'm', children }: ComponentStripProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const { id, homepage, exported } = component[componentMetaField];
+
+  const parsedId = useMemo(() => ComponentID.tryFromString(id), [id]);
+  const componentLink = homepage || calcComponentLink(parsedId, exported);
+
+  return (
+    <div className={styles.componentStrip} ref={ref} data-size={size}>
+      {!parsedId && <LabelBlock link={homepage}>{id}</LabelBlock>}
+      {parsedId && <LabelBlock link={ScopeUrl.toUrl(parsedId.scope)}>{parsedId.scope}</LabelBlock>}
+      {parsedId && (
+        <LabelBlock link={componentLink}>
+          {parsedId.fullName}
+          {parsedId.version && parsedId.version !== 'latest' && `@${parsedId.version}`}
+        </LabelBlock>
+      )}
+      {children}
+    </div>
+  );
+});
+
+function LabelBlock({ link, children }: { link?: string; children: ReactNode }) {
+  const Comp = link ? NativeLink : 'span';
+  return (
+    <Comp href={link} external={!!link}>
+      {children}
+    </Comp>
+  );
+}

package/label/index.ts

@@ -1,2 +1,5 @@
-export { LabelContainer, Label } from './label';
-export type { LabelContainerProps, LabelProps, Placement } from './label';
+export { Label } from './label';
+export type { LabelProps, LabelSize } from './label';
+
+export { LabelContainer } from './label-container';
+export type { LabelContainerProps, Placement } from './label-container';

package/label/label-container.tsx

@@ -0,0 +1,46 @@
+import React, { useMemo, useState } from 'react';
+import { usePopper } from 'react-popper';
+import type { Placement, Modifier } from '@popperjs/core';
+import '@popperjs/core';
+
+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,
+  watchMotion,
+  className,
+  ...rest
+}: LabelContainerProps) {
+  const [sourceRef, setSourceRef] = useState<HTMLDivElement | null>(null);
+
+  const modifiers = useMemo<Partial<Modifier<any, any>>[]>(
+    () => [{ name: 'offset', options: { offset } }],
+    [flip, offset]
+  );
+
+  const { styles, attributes, update } = usePopper(targetRef, sourceRef, {
+    modifiers,
+    placement,
+  });
+
+  useAnimationFrame(!!watchMotion && update);
+
+  if (!targetRef) return null;
+
+  return <div {...rest} ref={setSourceRef} className={className} style={styles.popper} {...attributes.popper} />;
+}

package/label/label.module.scss

@@ -0,0 +1,24 @@
+.othersContainer {
+  > * {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: unset;
+    }
+  }
+}
+
+.othersTooltip {
+  user-select: none;
+  cursor: pointer;
+
+  &::before {
+    display: inline-block;
+    transition: transform 300ms;
+    content: '▾';
+  }
+
+  &.active::before {
+    transform: rotate(-180deg);
+  }
+}

package/label/label.tsx

@@ -1,70 +1,39 @@
-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 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;
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
+import styles from './label.module.scss';
+import { ComponentStrip, ComponentStripSize } from './component-strip';
+import { OtherComponentsPopper } from './other-components';
+
+export type LabelSize = ComponentStripSize;
+export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  components: ComponentMetaHolder[];
+  size?: LabelSize;
 }
 
-export type { Placement };
-
-// TODO - replace this with TippyJS, when it supports a `targetElement={targetRef.current}` prop
-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>>[]>(
-    () => [{ name: 'offset', options: { offset } }],
-    [flip, offset]
+export function Label({ components, size, ...props }: LabelProps) {
+  const [showMore, setShowMore] = useState(false);
+  const last = components.slice(-1).pop();
+  if (!last) return null;
+
+  const hasMore = components.length > 1;
+
+  // reset when switching targets
+  useEffect(() => {
+    setShowMore(false);
+  }, [components]);
+
+  return (
+    <OtherComponentsPopper components={components} visible={showMore} placement="bottom-start" size={size}>
+      <ComponentStrip {...props} component={last} size={size}>
+        {hasMore && (
+          <span
+            className={classNames(styles.othersTooltip, showMore && styles.active)}
+            onClick={() => setShowMore((x) => !x)}
+          />
+        )}
+      </ComponentStrip>
+    </OtherComponentsPopper>
   );
-
-  const { styles, attributes, update } = usePopper(targetRef, sourceRef, {
-    modifiers,
-    placement,
-  });
-
-  useAnimationFrame(!!watchMotion && update);
-
-  if (!targetRef) return null;
-
-  return <div {...rest} ref={setSourceRef} className={className} style={styles.popper} {...attributes.popper} />;
-}
-
-export interface LabelProps extends CardProps {
-  componentId: string;
-  link?: string;
-  scopeLink?: string;
-  local?: boolean;
-}
-
-export function Label({ componentId, link, scopeLink, local, ...rest }: LabelProps) {
-  const parsedId = useMemo(() => ComponentID.tryFromString(componentId), [componentId]);
-
-  if (!parsedId)
-    return (
-      <DefaultLabel {...rest} href={link}>
-        {componentId}
-      </DefaultLabel>
-    );
-
-  return <ComponentLabel {...rest} local={local} componentId={parsedId} link={link} scopeLink={scopeLink} />;
 }

package/label/links.tsx

@@ -0,0 +1,9 @@
+import urlJoin from 'url-join';
+import type { ComponentID } from '@teambit/component-id';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
+
+export function calcComponentLink(id: ComponentID | undefined, exported: boolean | undefined) {
+  if (!id) return undefined;
+  if (exported) return ComponentUrl.toUrl(id);
+  return urlJoin('/', id.fullName);
+}

package/label/other-components.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Tippy, { TippyProps } from '@tippyjs/react/headless';
+import { ComponentMetaHolder } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
+import { ComponentStrip, ComponentStripSize } from './component-strip';
+import styles from './label.module.scss';
+
+export type OtherComponentsProps = {
+  components: ComponentMetaHolder[];
+  size?: ComponentStripSize;
+  start?: number;
+  end?: number;
+} & TippyProps;
+
+// a popper ("tooltip") that shows the additional React Components related to this dom element
+export function OtherComponentsPopper({
+  components,
+  children,
+  start,
+  end = -1,
+  size,
+  placement = 'bottom',
+  interactive = true,
+  ...tippyProps
+}: OtherComponentsProps) {
+  const content = (
+    <>
+      {components
+        .slice(start, end)
+        .reverse()
+        .map((comp, idx) => (
+          <ComponentStrip key={idx} component={comp} size={size} />
+        ))}
+    </>
+  );
+
+  return (
+    <Tippy
+      placement={placement}
+      interactive={interactive}
+      {...tippyProps}
+      // second parameter "content" is always undefined, use content inline
+      // https://github.com/atomiks/tippyjs-react/issues/341
+      render={(attrs) => (
+        <div {...attrs} className={styles.othersContainer}>
+          {content}
+        </div>
+      )}
+    >
+      {children}
+    </Tippy>
+  );
+}

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

@@ -1,6 +1,7 @@
 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 { IconButton } from '@teambit/design.ui.icon-button';
 import { ExcludeHighlighter } from '../ignore-highlighter';
 import { MultiHighlighter } from './multi-highlighter';
 
@@ -11,7 +12,7 @@ export const MultiHighlighterPreview = () => {
       <br />
       <br />
       <br />
-      <MockedComponentWithMeta>also here</MockedComponentWithMeta>
+      <IconButton>this will be highlighted with dropdown</IconButton>
     </MultiHighlighter>
   );
 };
@@ -55,9 +56,10 @@ export const MultiHighlighterInsideIgnore = () => {
 
 export const MultiHighlighterWithRule = () => {
   return (
-    <MultiHighlighter rule="#someSubTree *">
-      <br />
-      <br />
+    <MultiHighlighter rule="#someSubTree *" style={{ minWidth: 300 }}>
+      <div>
+        element filter: <code>"#someSubTree *"</code>
+      </div>
       <br />
       <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
       <br />
@@ -70,6 +72,22 @@ export const MultiHighlighterWithRule = () => {
   );
 };
 
+export const MultiHighlighterWithComponentRule = () => {
+  return (
+    <MultiHighlighter componentRule="teambit.design/ui/icon-button" style={{ minWidth: 300 }}>
+      <div>
+        component filter: <code>"teambit.design/ui/icon-button"</code>
+      </div>
+      <br />
+      <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
+      <br />
+      <br />
+      <br />
+      <IconButton>this will be highlighted</IconButton>
+    </MultiHighlighter>
+  );
+};
+
 // export const HighlightingAllElementsInTheEnterprisePage = () => {
 //   return (
 //     <MultiHighlighter>

package/multi-highlighter/use-multi-highlighter.tsx

@@ -1,14 +1,14 @@
 import { useEffect, RefObject } from 'react';
 import getXPath from 'get-xpath';
-import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
+import { domToReacts, toRootElement } from '@teambit/react.modules.dom-to-react';
 import {
-  hasComponentMeta,
   componentMetaField,
-  componentMetaProperties,
+  hasComponentMeta,
+  ReactComponentMetaHolder,
 } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 import { HighlightTarget } from '../element-highlighter';
 import { excludeHighlighterSelector } from '../ignore-highlighter';
-import { ruleMatcher, MatchRule } from '../rule-matcher';
+import { ruleMatcher, MatchRule, ComponentMatchRule, componentRuleMatcher } from '../rule-matcher';
 
 type useMultiHighlighterProps = {
   onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
@@ -17,6 +17,7 @@ type useMultiHighlighterProps = {
   scopeClass?: string;
   /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
   rule?: MatchRule;
+  componentRule?: ComponentMatchRule;
 
   // /** automatically update when children update. Use with caution, might be slow */
   // watchDom?: boolean;
@@ -28,6 +29,7 @@ export function useMultiHighlighter({
   scopeRef,
   scopeClass: scopeSelector = '',
   rule,
+  componentRule,
 }: useMultiHighlighterProps) {
   useEffect(() => {
     const nextTargets: Record<string, HighlightTarget> = {};
@@ -44,15 +46,17 @@ export function useMultiHighlighter({
     const uniqueRoots = new Set(rootElements);
 
     uniqueRoots.forEach((element) => {
-      const comp = domToReact(element);
-      if (!element || !hasComponentMeta(comp)) return;
+      if (!element) return;
+      const comps = domToReacts(element);
+      const componentsWithMeta = comps.filter(
+        (x) => hasComponentMeta(x) && componentRuleMatcher({ meta: x[componentMetaField] }, componentRule)
+      ) as ReactComponentMetaHolder[];
+
+      if (componentsWithMeta.length < 1) return;
 
       const key = getXPath(element);
-      const meta = comp[componentMetaField];
-      const compId = meta[componentMetaProperties.componentId];
-      const link = meta[componentMetaProperties.homepageUrl];
-      const local = meta[componentMetaProperties.isExported] === false;
-      nextTargets[key] = { element, id: compId, link, local };
+
+      nextTargets[key] = { element, components: componentsWithMeta };
     });
 
     onChange(nextTargets);

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.489",
+  "version": "0.0.493",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.489"
+    "version": "0.0.493"
   },
   "dependencies": {
-    "@popperjs/core": "2.6.0",
     "classnames": "2.2.6",
+    "@popperjs/core": "2.6.0",
     "react-popper": "2.2.4",
     "use-debounce": "6.0.1",
     "uuid": "3.4.0",
-    "get-xpath": "3.0.1",
     "url-join": "4.0.1",
+    "@tippyjs/react": "4.2.0",
+    "get-xpath": "3.0.1",
     "core-js": "^3.0.0",
     "@teambit/base-ui.utils.popper-js.ignore-popper-size": "1.0.0",
     "@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.modules.dom-to-react": "0.0.476",
-    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.9",
-    "@teambit/react.ui.hover-selector": "0.0.154",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.476",
-    "@teambit/component-id": "0.0.388",
-    "@teambit/component.modules.component-url": "0.0.109"
+    "@teambit/component-id": "0.0.389",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.11",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.477",
+    "@teambit/react.modules.dom-to-react": "0.0.477",
+    "@teambit/react.ui.hover-selector": "0.0.155",
+    "@teambit/component.modules.component-url": "0.0.110"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -43,7 +43,7 @@
     "@teambit/design.ui.icon-button": "1.0.10"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.184",
+    "@teambit/legacy": "1.0.185",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -71,7 +71,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.184",
+        "@teambit/legacy": "1.0.185",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/rule-matcher.tsx

@@ -1,6 +1,9 @@
 // in the future, we will add more options here, like include / exclude objects.
+import { ComponentID } from '@teambit/component-id';
+import { ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 
 export type MatchRule = undefined | string | ((element: HTMLElement) => boolean);
+export type ComponentMatchRule = undefined | string | string[] | ((target: ComponentMatchTarget) => boolean);
 
 export function ruleMatcher(element: HTMLElement, rule: MatchRule) {
   if (typeof rule === 'string') {
@@ -13,3 +16,27 @@ export function ruleMatcher(element: HTMLElement, rule: MatchRule) {
 
   return true;
 }
+
+export type ComponentMatchTarget = { meta: ComponentMeta };
+
+export function componentRuleMatcher(target: ComponentMatchTarget, rule: ComponentMatchRule): boolean {
+  if (typeof rule === 'string') {
+    const targetCmpId = ComponentID.tryFromString(target.meta.id);
+    const ruleCmpId = ComponentID.tryFromString(rule);
+
+    return ComponentID.isEqual(ruleCmpId, targetCmpId, { ignoreVersion: true });
+  }
+
+  if (Array.isArray(rule)) {
+    const targetCmpId = ComponentID.tryFromString(target.meta.id);
+    const ruleCmpIds = rule.map((x) => ComponentID.tryFromString(x));
+
+    return ruleCmpIds.some((cmdId) => ComponentID.isEqual(targetCmpId, cmdId, { ignoreVersion: true }));
+  }
+
+  if (typeof rule === 'function') {
+    return rule(target);
+  }
+
+  return true;
+}

package/use-animation-frame.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 // TODO - extract to its own component
 
-export function useAnimationFrame(cb?: false | null | (() => any), deps: [] = []) {
+export function useAnimationFrame(cb?: false | null | (() => any), deps: any[] = []) {
   useEffect(() => {
     if (!cb) return () => {};