@teambit/react.ui.component-highlighter 0.0.0-4d64e75088ad738b699f1df7db0bcd7201d589d0

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,61 @@
+{
+  "name": "@teambit/react.ui.component-highlighter",
+  "version": "0.0.0-4d64e75088ad738b699f1df7db0bcd7201d589d0",
+  "homepage": "https://bit.cloud/teambit/react/ui/component-highlighter",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.react",
+    "name": "ui/component-highlighter",
+    "version": "4d64e75088ad738b699f1df7db0bcd7201d589d0"
+  },
+  "dependencies": {
+    "get-xpath": "^3.0.1",
+    "classnames": "^2.3.1",
+    "@floating-ui/react-dom": "0.7.2",
+    "uuid": "^10.0.0",
+    "use-debounce": "^8.0.1",
+    "lodash.compact": "^3.0.1",
+    "url-join": "^4.0.1",
+    "@tippyjs/react": "4.2.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/uuid": "3.4.9",
+    "@types/react-dom": "^17.0.5",
+    "@types/lodash.compact": "3.0.6",
+    "@types/url-join": "^4.0.0",
+    "@types/mocha": "9.1.0",
+    "@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;
+}