@teambit/react.ui.component-highlighter 0.0.0-2240a868c0f88bba4f62719e6d10d31987cae1f9

package/label/component-strip.tsx

@@ -0,0 +1,57 @@
+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 {
+  ComponentMeta,
+  componentMetaField,
+  ComponentMetaHolder,
+} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import styles from './component-strip.module.scss';
+import { calcComponentLink } from './links';
+
+interface ComponentStripProps extends React.HTMLAttributes<HTMLDivElement> {
+  component: ComponentMetaHolder | string;
+}
+export const ComponentStrip = forwardRef(function ComponentStrip(
+  { component, children }: ComponentStripProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const { id, homepage, exported } = extractMetadata(component);
+
+  const parsedId = useMemo(() => ComponentID.tryFromString(id), [id]);
+  const componentLink = homepage || calcComponentLink(parsedId, exported);
+
+  return (
+    <div className={styles.componentStrip} ref={ref}>
+      {!parsedId && <LabelBlock link={homepage}>{id}</LabelBlock>}
+      {parsedId && <LabelBlock link={ScopeUrl.toUrl(parsedId.scope)}>{parsedId.scope}</LabelBlock>}
+      {parsedId && (
+        <LabelBlock link={componentLink} className={styles.nameBlock}>
+          <span>{parsedId.fullName}</span>
+          {parsedId.version && parsedId.version !== 'latest' && (
+            <span className={styles.version}>@{parsedId.version}</span>
+          )}
+        </LabelBlock>
+      )}
+      {children}
+    </div>
+  );
+});
+
+function LabelBlock({ link, children, className }: { link?: string; children: ReactNode; className?: string }) {
+  const Comp = link ? NativeLink : 'span';
+  return (
+    <Comp href={link} external={!!link} className={className}>
+      {children}
+    </Comp>
+  );
+}
+
+function extractMetadata(metadata: string | ComponentMetaHolder): ComponentMeta {
+  if (typeof metadata === 'string') {
+    return { id: metadata, exported: true };
+  }
+
+  return metadata[componentMetaField];
+}

package/label/index.ts

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

package/label/label-container.tsx

@@ -0,0 +1,74 @@
+import React, { useLayoutEffect, useEffect, RefObject } from 'react';
+import classnames from 'classnames';
+import compact from 'lodash.compact';
+import {
+  useFloating,
+  offset as offsetMiddleware,
+  flip as flipMiddleware,
+  shift,
+  autoUpdate,
+  hide,
+} from '@floating-ui/react-dom';
+import type { Placement } from '@floating-ui/react-dom';
+import styles from './label.module.scss';
+
+const HAS_RESIZE_OBSERVER = typeof window !== 'undefined' && !!window.ResizeObserver;
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  targetRef: RefObject<HTMLElement | null>;
+  offset?: [number, number];
+  placement?: Placement;
+  flip?: boolean;
+  /** continually update label position to match moving elements */
+  watchMotion?: boolean;
+}
+
+export type { Placement };
+
+export function LabelContainer({
+  targetRef,
+  offset,
+  placement,
+  flip = true,
+  watchMotion,
+  className,
+  style,
+  ...rest
+}: LabelContainerProps) {
+  const { x, y, strategy, floating, reference, refs, update, middlewareData } = useFloating({
+    placement,
+    middleware: compact([
+      offset && offsetMiddleware({ mainAxis: offset[0], crossAxis: offset[1] }),
+      flip && flipMiddleware(),
+      // enabling 'shift' for 'crossAxis' will make floating-ui push the label _inside_, when it has nowhere to go
+      shift({ rootBoundary: 'document', mainAxis: true, crossAxis: true }),
+      hide({ strategy: 'referenceHidden' }),
+    ]),
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    reference(targetRef.current);
+  }, [targetRef.current, reference]);
+
+  // automatically update on scroll, resize, etc.
+  // `watchMotion` will trigger continuous updates using animation frame
+  useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current || !HAS_RESIZE_OBSERVER) return () => {};
+
+    return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: !!watchMotion });
+  }, [refs.reference.current, refs.floating.current, update, watchMotion]);
+
+  const isReady = !middlewareData.hide?.referenceHidden;
+
+  return (
+    <div
+      {...rest}
+      ref={floating}
+      className={classnames(className, !isReady && styles.hidden)}
+      // starting at pos [0,0] will ensure the label doesn't increase the document size.
+      style={{ ...style, position: strategy, top: y ?? 0, left: x ?? 0 }}
+    />
+  );
+}

package/label/label.module.scss

@@ -0,0 +1,32 @@
+.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);
+  }
+}
+
+.hidden {
+  // label size is needed for position calculations,
+  // so it can't be removed by `display: none`
+  visibility: hidden;
+  pointer-events: none;
+  user-select: none;
+}

package/label/label.tsx

@@ -0,0 +1,37 @@
+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 } from './component-strip';
+import { OtherComponentsPopper } from './other-components';
+
+export interface LabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  components: (ComponentMetaHolder | string)[];
+}
+
+export function Label({ components, ...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">
+      <ComponentStrip {...props} component={last}>
+        {hasMore && (
+          <span
+            className={classNames(styles.othersTooltip, showMore && styles.active)}
+            onClick={() => setShowMore((x) => !x)}
+          />
+        )}
+      </ComponentStrip>
+    </OtherComponentsPopper>
+  );
+}

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,51 @@
+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 } from './component-strip';
+import styles from './label.module.scss';
+
+export type OtherComponentsProps = {
+  components: (ComponentMetaHolder | string)[];
+  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,
+  placement = 'bottom',
+  interactive = true,
+  ...tippyProps
+}: OtherComponentsProps) {
+  const content = (
+    <>
+      {components
+        .slice(start, end)
+        .reverse()
+        .map((comp, idx) => (
+          <ComponentStrip key={idx} component={comp} />
+        ))}
+    </>
+  );
+
+  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/mock-component.tsx

@@ -0,0 +1,23 @@
+import React, { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { componentMetaField, ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+
+export function MockTarget({ children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div {...rest}>{children}</div>;
+}
+MockTarget[componentMetaField] = {
+  id: 'teambit.design/ui/mock-target@1.6.2',
+} as ComponentMeta;
+
+export function MockButton({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button {...rest}>{children}</button>;
+}
+MockButton[componentMetaField] = {
+  id: 'teambit.design/ui/icon-button@1.6.2',
+} as ComponentMeta;
+
+export function MockSnap({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button {...rest}>{children}</button>;
+}
+MockSnap[componentMetaField] = {
+  id: 'teambit.design/ui/icon-button@a21594d5cc63fd24d2b4763fa7d817b131f0edbb',
+} as ComponentMeta;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@teambit/react.ui.component-highlighter",
+  "version": "0.0.0-2240a868c0f88bba4f62719e6d10d31987cae1f9",
+  "homepage": "https://bit.cloud/teambit/react/ui/component-highlighter",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.react",
+    "name": "ui/component-highlighter",
+    "version": "2240a868c0f88bba4f62719e6d10d31987cae1f9"
+  },
+  "dependencies": {
+    "get-xpath": "^3.0.1",
+    "classnames": "^2.3.1",
+    "use-debounce": "^8.0.1",
+    "@floating-ui/react-dom": "0.7.2",
+    "lodash.compact": "^3.0.1",
+    "url-join": "^4.0.1",
+    "@tippyjs/react": "4.2.0",
+    "uuid": "^10.0.0",
+    "core-js": "^3.0.0",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
+    "@teambit/component-id": "1.2.2",
+    "@teambit/react.modules.dom-to-react": "0.2.0",
+    "@teambit/react.ui.hover-selector": "0.2.0",
+    "@teambit/base-ui.routing.native-link": "1.0.0",
+    "@teambit/component.modules.component-url": "0.0.169"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@testing-library/react": "^12.1.5",
+    "@types/react-dom": "^17.0.5",
+    "@types/lodash.compact": "3.0.6",
+    "@types/url-join": "^4.0.0",
+    "@types/uuid": "3.4.9",
+    "@types/node": "12.20.4",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components"
+  ]
+}

package/rule-matcher.tsx

@@ -0,0 +1,42 @@
+// 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') {
+    return element.matches(rule);
+  }
+
+  if (typeof rule === 'function') {
+    return rule(element);
+  }
+
+  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/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}