@teambit/react.ui.component-highlighter 0.0.492 → 0.0.496

package/label/component-strip.module.scss

@@ -0,0 +1,49 @@
+$borderRadius: 0.5em;
+$gap: 0.125em;
+
+.componentStrip {
+  display: flex;
+  width: fit-content; // for correct shadow size
+
+  border-radius: $borderRadius;
+  box-shadow: var(--bit-highlighter-shadow);
+
+  > * {
+    padding: 0 0.5em;
+    line-height: 1.5; //use line height to get rounder values than 0.25em padding
+
+    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/package.json

@@ -1,39 +1,39 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.492",
+  "version": "0.0.496",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.492"
+    "version": "0.0.496"
   },
   "dependencies": {
+    "get-xpath": "3.0.1",
     "classnames": "2.2.6",
     "@popperjs/core": "2.6.0",
     "react-popper": "2.2.4",
-    "uuid": "3.4.0",
     "use-debounce": "6.0.1",
-    "get-xpath": "3.0.1",
+    "uuid": "3.4.0",
     "url-join": "4.0.1",
+    "@tippyjs/react": "4.2.0",
     "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/ui-foundation.ui.constants.z-indexes": "0.0.477",
-    "@teambit/react.modules.dom-to-react": "0.0.477",
-    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.10",
-    "@teambit/react.ui.hover-selector": "0.0.155",
-    "@teambit/component-id": "0.0.389",
-    "@teambit/component.modules.component-url": "0.0.110"
+    "@teambit/component-id": "0.0.391",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.13",
+    "@teambit/react.modules.dom-to-react": "0.0.479",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.479",
+    "@teambit/react.ui.hover-selector": "0.0.157",
+    "@teambit/component.modules.component-url": "0.0.112"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
-    "@types/classnames": "2.2.11",
-    "@types/uuid": "3.4.9",
     "@testing-library/react": "11.2.6",
+    "@types/classnames": "2.2.11",
     "@types/react-dom": "^17.0.5",
+    "@types/uuid": "3.4.9",
     "@types/url-join": "4.0.0",
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
@@ -43,7 +43,7 @@
     "@teambit/design.ui.icon-button": "1.0.10"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.185",
+    "@teambit/legacy": "1.0.187",
     "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.185",
+        "@teambit/legacy": "1.0.187",
         "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/tsconfig.json

@@ -17,7 +17,8 @@
     "outDir": "dist",
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "rootDir": "."
+    "rootDir": ".",
+    "resolveJsonModule": true
   },
   "exclude": [
     "dist"

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 () => {};
 

package/bubble/bubble.module.scss

@@ -1,24 +0,0 @@
-.bubble {
-  padding: 0.23em 1em;
-
-  transition: filter 300ms, background-color 300ms;
-  transform: translateZ(0); //fix blurriness in Safari
-
-  // override styles from <a>
-  &:link,
-  &:visited {
-    text-decoration: inherit;
-    color: inherit;
-
-    background: var(--bit-highlighter-color, #eebcc9);
-
-    &:hover {
-      background: var(--bit-highlighter-color-hover, #f6dae2);
-    }
-
-    &:active {
-      background: var(--bit-highlighter-color-active, #e79db1);
-      color: inherit;
-    }
-  }
-}

package/bubble/index.ts

@@ -1,3 +0,0 @@
-import styles from './bubble.module.scss';
-
-export const bubble = styles.bubble;

package/dist/bubble/bubble.module.scss

@@ -1,24 +0,0 @@
-.bubble {
-  padding: 0.23em 1em;
-
-  transition: filter 300ms, background-color 300ms;
-  transform: translateZ(0); //fix blurriness in Safari
-
-  // override styles from <a>
-  &:link,
-  &:visited {
-    text-decoration: inherit;
-    color: inherit;
-
-    background: var(--bit-highlighter-color, #eebcc9);
-
-    &:hover {
-      background: var(--bit-highlighter-color-hover, #f6dae2);
-    }
-
-    &:active {
-      background: var(--bit-highlighter-color-active, #e79db1);
-      color: inherit;
-    }
-  }
-}

package/dist/bubble/index.d.ts

@@ -1 +0,0 @@
-export declare const bubble: string;

package/dist/bubble/index.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.bubble = void 0;
-const bubble_module_scss_1 = __importDefault(require("./bubble.module.scss"));
-exports.bubble = bubble_module_scss_1.default.bubble;
-//# sourceMappingURL=index.js.map

package/dist/bubble/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../bubble/index.ts"],"names":[],"mappings":";;;;;;AAAA,8EAA0C;AAE7B,QAAA,MAAM,GAAG,4BAAM,CAAC,MAAM,CAAC"}

package/dist/hybrid-highligher/hybrid-highlighter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hybrid-highlighter.js","sourceRoot":"","sources":["../../hybrid-highligher/hybrid-highlighter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8F;AAC9F,4DAAoC;AACpC,+BAA0B;AAE1B,4DAA2D;AAC3D,gEAA0G;AAC1G,sFAAiF;AAmCjF,kDAAkD;AAClD,SAAgB,iBAAiB,CAAC,EAiBT;QAjBS,EAChC,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,iBAAiB,GAAG,EAAE,EACtB,WAAW,GAAG,IAAI,EAClB,SAAS,EACT,IAAI,EAEJ,OAAO,EACP,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,QAAQ,OAEe,EADpB,IAAI,cAhByB,wLAiBjC,CADQ;IAEP,MAAM,GAAG,GAAG,IAAA,iBAAS,GAAkB,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAkC,EAAE,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,YAAY,IAAA,SAAE,GAAE,EAAE,CAAC,CAAC,OAAO,CAAC;IACtD,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtD,8BAA8B;IAC9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,SAAS,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,QAAQ,GAAG,IAAA,uCAAmB,EAClC,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,IAAI,EACJ;QACE,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACpD,UAAU;QACV,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,OAAO;QACtC,IAAI;KACL,CACF,CAAC;IAEF,IAAA,2CAAmB,EAAC;QAClB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,GAAG;QACb,UAAU;QACV,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,aAAa;QAC5C,IAAI;KACL,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CAAC,iBACJ,yBAAyB,EAAE,OAAO,EAClC,+BAA+B,EAAE,YAAY,EAC7C,gCAAgC,EAAE,aAAa,IAC5C,KAAK,EACR,EACF,CAAC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,CAAC,CAC9C,CAAC;IAEF,OAAO,CACL,qDACE,GAAG,EAAE,GAAG,IACJ,IAAI,EACJ,QAAQ,IACZ,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,UAAU,CAAC;QAG3C,QAAQ;QAKR,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC9C,8BAAC,wCAAkB,IACjB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAnFD,8CAmFC"}

package/dist/hybrid-highligher/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../hybrid-highligher/index.ts"],"names":[],"mappings":";;;AAAA,2DAAyD;AAAhD,uHAAA,iBAAiB,OAAA"}

package/dist/label/component-label/component-bubble.d.ts

@@ -1,7 +0,0 @@
-import { ComponentID } from '@teambit/component-id';
-import { LinkProps } from '@teambit/base-ui.routing.native-link';
-export interface ComponentBubbleProps extends LinkProps {
-    componentId: ComponentID;
-    local?: boolean;
-}
-export declare function ComponentBubble({ componentId, className, href, local, ...rest }: ComponentBubbleProps): JSX.Element;

package/dist/label/component-label/component-bubble.js

@@ -1,35 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBubble = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const base_ui_routing_native_link_1 = require("@teambit/base-ui.routing.native-link");
-const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
-const url_join_1 = __importDefault(require("url-join"));
-const duo_component_bubble_module_scss_1 = __importDefault(require("./duo-component-bubble.module.scss"));
-function ComponentBubble(_a) {
-    var { componentId, className, href, local = false } = _a, rest = __rest(_a, ["componentId", "className", "href", "local"]);
-    const { version, fullName } = componentId;
-    const componentHref = href || (local ? (0, url_join_1.default)('/', fullName) : component_modules_component_url_1.ComponentUrl.toUrl(componentId));
-    return (react_1.default.createElement(base_ui_routing_native_link_1.NativeLink, Object.assign({ external: true, href: componentHref, className: (0, classnames_1.default)(duo_component_bubble_module_scss_1.default.componentName, className) }, rest),
-        react_1.default.createElement("div", { className: duo_component_bubble_module_scss_1.default.fullName }, fullName),
-        version && version !== 'latest' && (react_1.default.createElement("div", { className: duo_component_bubble_module_scss_1.default.version },
-            react_1.default.createElement("span", { className: duo_component_bubble_module_scss_1.default.versionPrefix }, "@"),
-            version))));
-}
-exports.ComponentBubble = ComponentBubble;
-//# sourceMappingURL=component-bubble.js.map

package/dist/label/component-label/component-bubble.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-bubble.js","sourceRoot":"","sources":["../../../label/component-label/component-bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,sFAA6E;AAC7E,8FAAwE;AACxE,wDAA+B;AAC/B,0GAAwD;AAOxD,SAAgB,eAAe,CAAC,EAA8E;QAA9E,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,OAAiC,EAA5B,IAAI,cAAtD,6CAAwD,CAAF;IACpF,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;IAC1C,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAA,kBAAO,EAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,8CAAY,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjG,OAAO,CACL,8BAAC,wCAAU,kBAAC,QAAQ,QAAC,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,0CAAM,CAAC,aAAa,EAAE,SAAS,CAAC,IAAM,IAAI;QACxG,uCAAK,SAAS,EAAE,0CAAM,CAAC,QAAQ,IAAG,QAAQ,CAAO;QAEhD,OAAO,IAAI,OAAO,KAAK,QAAQ,IAAI,CAClC,uCAAK,SAAS,EAAE,0CAAM,CAAC,OAAO;YAC5B,wCAAM,SAAS,EAAE,0CAAM,CAAC,aAAa,QAAU;YAC9C,OAAO,CACJ,CACP,CACU,CACd,CAAC;AACJ,CAAC;AAhBD,0CAgBC"}

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

@@ -1,9 +0,0 @@
-import { CardProps } from '@teambit/base-ui.surfaces.card';
-import type { ComponentID } from '@teambit/component-id';
-export interface ComponentLabelProps extends CardProps {
-    componentId: ComponentID;
-    link?: string;
-    scopeLink?: string;
-    local?: boolean;
-}
-export declare function ComponentLabel({ componentId, className, link, scopeLink, local, ...rest }: ComponentLabelProps): JSX.Element;