@teambit/react.ui.component-highlighter 0.0.447 → 0.0.451

package/component-highlighter/component-highlighter.docs.md

@@ -1,23 +0,0 @@
----
-description: Highlights Bit Components and links to their Bit scope
-labels: ['component', 'highlight', 'react']
----
-
-import {ComponentHighlighter} from './component-highlighter'
-import {useEffect} from 'react';
-
-Highlights React components in web pages and add links to their Bit scope and component page.
-
-<img style={{border: '1px solid rgb(212, 212, 212', borderRadius: 6, maxWidth: 800}} src="https://storage.googleapis.com/docs-images/component_highlighter.png"></img>
-
-## How to use?
-
-Invoke the `ComponentHighlighter()` to start highlighting components.
-
-```ts
-import { ComponentHighlighter } from '@teambit/react.ui.component-highlighter';
-
-// 'options' are optional.
-ComponentHighlighter({ borderColor: 'red' });
-ReactDOM.render(App);
-```

package/component-highlighter/component-highlighter.tsx

@@ -1,109 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import classnames from 'classnames';
-import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
-import { HoverSelector } from '@teambit/react.ui.hover-selector';
-import { useDebouncedCallback } from 'use-debounce';
-import { Frame } from '../frame';
-import { Label, LabelContainer } from '../label';
-import { hasComponentMeta } from './bit-react-component';
-
-import styles from './component-highlighter.module.scss';
-
-type HighlightTarget = {
-  id?: string;
-  element: HTMLElement;
-  /** e.g. 'https://bit.dev/teambit/base-ui/elements/dots-loader', */
-  link?: string;
-  /** e.g. 'https://bit.dev/teambit/base-ui' */
-  scopeLink?: string;
-  /** use full production url, or local workspace url */
-  local?: boolean;
-};
-
-export interface ComponentHighlightProps extends React.HTMLAttributes<HTMLDivElement> {
-  disabled?: boolean;
-}
-
-export function ComponentHighlighter({ children, disabled, ...rest }: ComponentHighlightProps) {
-  const [target, setTarget] = useState<HighlightTarget | undefined>();
-
-  const _handleElement = useCallback((element: HTMLElement | null) => {
-    if (!element || element?.hasAttribute('data-nullify-component-highlight')) {
-      setTarget(undefined);
-      return;
-    }
-
-    const result = bubbleToBitComponent(element, (elem) => !elem.hasAttribute('data-ignore-component-highlight'));
-    if (!result) return;
-
-    setTarget({
-      element: result.element,
-      id: result.meta.id,
-      scopeLink: undefined,
-      link: result.meta.homepage,
-      local: result.meta.exported === false,
-    });
-  }, []);
-
-  const handleElement = useDebouncedCallback(_handleElement, target ? 80 : 0);
-
-  useEffect(() => {
-    if (disabled) {
-      setTarget(undefined);
-    }
-  }, [disabled]);
-
-  return (
-    <HoverSelector
-      {...rest}
-      className={classnames(styles.highlighter, !disabled && styles.active)}
-      onElementChange={handleElement}
-      disabled={disabled}
-      data-nullify-component-highlight
-    >
-      {children}
-      {target && (
-        <>
-          <Frame targetRef={target.element} data-ignore-component-highlight />
-          {target.id && (
-            <LabelContainer
-              className={styles.label}
-              targetRef={target.element}
-              placement="top"
-              data-ignore-component-highlight
-            >
-              <Label
-                componentId={target.id}
-                link={target.link}
-                scopeLink={target.scopeLink}
-                local={target.local}
-                data-ignore-component-highlight
-              />
-            </LabelContainer>
-          )}
-        </>
-      )}
-    </HoverSelector>
-  );
-}
-
-function bubbleToBitComponent(element: HTMLElement | null, filter?: (elem: Element) => boolean) {
-  for (let current = element; current; current = current.parentElement) {
-    current = toRootElement(current);
-    if (!current || filter?.(current) === false) return undefined;
-
-    const component = domToReact(current);
-
-    if (hasComponentMeta(component)) {
-      const meta = component.__bit_component;
-
-      return {
-        element: current,
-        component,
-        meta,
-      };
-    }
-  }
-
-  return undefined;
-}

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export interface ComponentHighlightProps extends React.HTMLAttributes<HTMLDivElement> {
-    disabled?: boolean;
-}
-export declare function ComponentHighlighter({ children, disabled, ...rest }: ComponentHighlightProps): JSX.Element;

package/dist/component-highlighter/component-highlighter.docs.md

@@ -1,23 +0,0 @@
----
-description: Highlights Bit Components and links to their Bit scope
-labels: ['component', 'highlight', 'react']
----
-
-import {ComponentHighlighter} from './component-highlighter'
-import {useEffect} from 'react';
-
-Highlights React components in web pages and add links to their Bit scope and component page.
-
-<img style={{border: '1px solid rgb(212, 212, 212', borderRadius: 6, maxWidth: 800}} src="https://storage.googleapis.com/docs-images/component_highlighter.png"></img>
-
-## How to use?
-
-Invoke the `ComponentHighlighter()` to start highlighting components.
-
-```ts
-import { ComponentHighlighter } from '@teambit/react.ui.component-highlighter';
-
-// 'options' are optional.
-ComponentHighlighter({ borderColor: 'red' });
-ReactDOM.render(App);
-```

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

@@ -1 +0,0 @@
-{"version":3,"file":"component-highlighter.js","sourceRoot":"","sources":["../../component-highlighter/component-highlighter.tsx"],"names":[],"mappings":"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"}

package/dist/label/label.module.scss

@@ -1,3 +0,0 @@
-.label {
-  font-size: 12px;
-}

package/label/label.module.scss

@@ -1,3 +0,0 @@
-.label {
-  font-size: 12px;
-}