@teambit/react.ui.component-highlighter 0.2.1 → 0.2.3

package/teambit_react_ui_component_highlighter-preview.js

@@ -0,0 +1,101 @@
+"use strict";(function(root,factory){typeof exports=="object"&&typeof module=="object"?module.exports=factory():typeof define=="function"&&define.amd?define([],factory):typeof exports=="object"?exports["teambit.react/ui/component-highlighter-preview"]=factory():root["teambit.react/ui/component-highlighter-preview"]=factory()})(self,()=>(self.webpackChunk=self.webpackChunk||[]).push([[215],{5245:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.ChildrenHighlighterWithComponentRule=exports2.ChildrenHighlighterWithRule=exports2.ChildrenHighlighterInsideIgnore=exports2.ChildrenHighlighterWithCustomColors=exports2.ChildrenHighlighterPreview=void 0;const react_1=__importDefault(__webpack_require__(7363)),react_ui_highlighter_component_metadata_bit_component_meta_1=__webpack_require__(2543),ignore_highlighter_1=__webpack_require__(3798),children_highlighter_1=__webpack_require__(651),mock_component_1=__webpack_require__(8423),ChildrenHighlighterPreview=()=>react_1.default.createElement(children_highlighter_1.ChildrenHighlighter,{style:{padding:40,minWidth:200,fontFamily:"sans-serif"}},react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"target #1"),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"target #2"));ChildrenHighlighterPreview.__bit_component=__bit_component,exports2.ChildrenHighlighterPreview=ChildrenHighlighterPreview;const ChildrenHighlighterWithCustomColors=()=>react_1.default.createElement(children_highlighter_1.ChildrenHighlighter,{style:{padding:40,minWidth:200,color:"yellow",fontFamily:"sans-serif"},bgColor:"cornflowerblue",bgColorHover:"blue",bgColorActive:"DarkSlateBlue"},react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"hover here"),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"also here"));ChildrenHighlighterWithCustomColors.__bit_component=__bit_component,exports2.ChildrenHighlighterWithCustomColors=ChildrenHighlighterWithCustomColors;const ChildrenHighlighterInsideIgnore=()=>react_1.default.createElement(ignore_highlighter_1.ExcludeHighlighter,null,react_1.default.createElement(children_highlighter_1.ChildrenHighlighter,{style:{fontFamily:"sans-serif"}},"Multi Highlighter should still work when inside ",react_1.default.createElement("code",null,"<ExcludeHighlighter>"),react_1.default.createElement("br",null),"It should only skip exclusion zones inside of it.",react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"hover here"),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"also here")));ChildrenHighlighterInsideIgnore.__bit_component=__bit_component,exports2.ChildrenHighlighterInsideIgnore=ChildrenHighlighterInsideIgnore;const ChildrenHighlighterWithRule=()=>{const rule="#someSubTree *";return react_1.default.createElement(children_highlighter_1.ChildrenHighlighter,{rule,style:{minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement("div",null,"element filter: ",react_1.default.createElement("code",null,'"',rule,'"')),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"no highlighter"),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("div",{id:"someSubTree"},react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"this will be highlighted")))};ChildrenHighlighterWithRule.__bit_component=__bit_component,exports2.ChildrenHighlighterWithRule=ChildrenHighlighterWithRule;const ChildrenHighlighterWithComponentRule=()=>{const filterTarget="teambit.design/ui/mock-target";return react_1.default.createElement(children_highlighter_1.ChildrenHighlighter,{componentRule:filterTarget,style:{minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement("div",null,"component filter: ",react_1.default.createElement("code",null,'"',filterTarget,'"')),react_1.default.createElement("br",null),react_1.default.createElement(react_ui_highlighter_component_metadata_bit_component_meta_1.MockedComponentWithMeta,null,"no highlighter"),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement("br",null),react_1.default.createElement(mock_component_1.MockTarget,{style:{display:"inline-block",margin:"0 8px"}},"this will be highlighted"))};ChildrenHighlighterWithComponentRule.__bit_component=__bit_component,exports2.ChildrenHighlighterWithComponentRule=ChildrenHighlighterWithComponentRule},5584:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){k2===void 0&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);(!desc||("get"in desc?!m.__esModule:desc.writable||desc.configurable))&&(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){k2===void 0&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(mod!=null)for(var k in mod)k!=="default"&&Object.prototype.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.OffscreenElements=exports2.FullscreenElement=exports2.MovingElement=exports2.Sizes=exports2.Customized=exports2.HighlightedElement=void 0;const react_1=__importStar(__webpack_require__(7363)),element_highlighter_1=__webpack_require__(2654),mock_component_1=__webpack_require__(8423),HighlightedElement=({style,targetStyle,watchMotion,className})=>{const targetRef=(0,react_1.createRef)();return react_1.default.createElement("div",{className,style:{padding:"16px 16px 40px 16px",width:300,fontFamily:"sans-serif"}},react_1.default.createElement("div",{ref:targetRef,style:Object.assign({width:100},targetStyle)},"highlight target"),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef,components:[mock_component_1.MockTarget],style,watchMotion,placement:"bottom"}))};HighlightedElement.__bit_component=__bit_component,exports2.HighlightedElement=HighlightedElement;const Customized=()=>react_1.default.createElement(exports2.HighlightedElement,{style:{"--bit-highlighter-color":"#94deb4","--bit-highlighter-color-hover":"#d0f1de","--bit-highlighter-color-active":"#37b26c"}});Customized.__bit_component=__bit_component,exports2.Customized=Customized;const Sizes=()=>react_1.default.createElement("div",null,react_1.default.createElement(exports2.HighlightedElement,{style:{fontSize:10}}),react_1.default.createElement(exports2.HighlightedElement,{style:{fontSize:14}}),react_1.default.createElement(exports2.HighlightedElement,{style:{fontSize:18}}));Sizes.__bit_component=__bit_component,exports2.Sizes=Sizes;const frameInterval=1e3/30,MovingElement=()=>{const[margin,setMargin]=(0,react_1.useState)(0);return(0,react_1.useEffect)(()=>{const intervalId=setInterval(()=>setMargin(x=>(x+1)%100),frameInterval);return()=>clearInterval(intervalId)},[]),react_1.default.createElement(exports2.HighlightedElement,{targetStyle:{marginLeft:margin},watchMotion:!0})};MovingElement.__bit_component=__bit_component,exports2.MovingElement=MovingElement;const FullscreenElement=()=>{const targetRef=(0,react_1.createRef)();return react_1.default.createElement("div",{style:{fontFamily:"sans-serif"}},react_1.default.createElement("div",{ref:targetRef,style:{height:"100vh",width:"100%",background:"#bceed4"}},"This element will cover the entire document,",react_1.default.createElement("br",null),"pushing the highlighter to the edge of the window.",react_1.default.createElement("br",null),"The highlighter should remain inside and expand no further than the document."),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef,components:[mock_component_1.MockTarget],watchMotion:!0}))};FullscreenElement.__bit_component=__bit_component,exports2.FullscreenElement=FullscreenElement;const edgeStyles={position:"absolute",background:"cyan",padding:30},centerStyles={top:{top:-30,left:"50%",transform:"translate(-50%,0)"},right:{right:-30,top:"50%",transform:"translate(0, -50%)"},bottom:{bottom:-30,left:"50%",transform:"translate(-50%,0)"},left:{left:-30,top:"50%",transform:"translate(0, -50%)"}};function OffscreenElements(){const target01=(0,react_1.createRef)(),target02=(0,react_1.createRef)(),target03=(0,react_1.createRef)(),target04=(0,react_1.createRef)();return react_1.default.createElement("div",{style:{fontFamily:"sans-serif",height:"100%"}},react_1.default.createElement("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"}},react_1.default.createElement("div",{ref:target01,style:Object.assign(Object.assign({},edgeStyles),centerStyles.top)},"top"),react_1.default.createElement("div",{ref:target02,style:Object.assign(Object.assign({},edgeStyles),centerStyles.right)},"right"),react_1.default.createElement("div",{ref:target03,style:Object.assign(Object.assign({},edgeStyles),centerStyles.bottom)},"bottom"),react_1.default.createElement("div",{ref:target04,style:Object.assign(Object.assign({},edgeStyles),centerStyles.left)},"left"),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target01,components:[mock_component_1.MockTarget],watchMotion:!0}),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target02,components:[mock_component_1.MockTarget],watchMotion:!0}),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target03,components:[mock_component_1.MockTarget],watchMotion:!0}),react_1.default.createElement(element_highlighter_1.ElementHighlighter,{targetRef:target04,components:[mock_component_1.MockTarget],watchMotion:!0})))}OffscreenElements.__bit_component=__bit_component,exports2.OffscreenElements=OffscreenElements},6549:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){k2===void 0&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);(!desc||("get"in desc?!m.__esModule:desc.writable||desc.configurable))&&(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){k2===void 0&&(k2=k),o[k2]=m[k]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,v){Object.defineProperty(o,"default",{enumerable:!0,value:v})}:function(o,v){o.default=v}),__importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(mod!=null)for(var k in mod)k!=="default"&&Object.prototype.hasOwnProperty.call(mod,k)&&__createBinding(result,mod,k);return __setModuleDefault(result,mod),result};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.HoverExclusionZones=exports2.UnmountingElement=exports2.ShowWhenHovering=void 0;const react_1=__importStar(__webpack_require__(7363)),hover_highlighter_1=__webpack_require__(8298),mock_component_1=__webpack_require__(8423),ignore_highlighter_1=__webpack_require__(3798),ShowWhenHovering=()=>{const[disabled,setDisabled]=(0,react_1.useState)(!1);return react_1.default.createElement("div",{style:{padding:"16px 50px 32px 16px",minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement(hover_highlighter_1.HoverHighlighter,{style:{padding:16},disabled},react_1.default.createElement("div",null,react_1.default.createElement("br",null),react_1.default.createElement("div",null,react_1.default.createElement(mock_component_1.MockButton,{onClick:()=>setDisabled(x=>!x)},"Hover here")),react_1.default.createElement("div",null,disabled?"X":"\u2713"," highlighter is ",disabled?"disabled":"enabled"))))};ShowWhenHovering.__bit_component=__bit_component,exports2.ShowWhenHovering=ShowWhenHovering;const UnmountingElement=()=>{const[shown,setShown]=(0,react_1.useState)(!0);return(0,react_1.useEffect)(()=>{const tid=setInterval(()=>setShown(x=>!x),1500);return()=>clearInterval(tid)},[]),react_1.default.createElement("div",{style:{padding:"16px 50px 32px 16px",minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement(hover_highlighter_1.HoverHighlighter,null,react_1.default.createElement("div",null,!shown&&"(hidden)"),react_1.default.createElement("div",null,shown&&react_1.default.createElement(mock_component_1.MockButton,null,"Hover here")),react_1.default.createElement("br",null),react_1.default.createElement(mock_component_1.MockTarget,null,react_1.default.createElement("div",null,shown&&react_1.default.createElement(mock_component_1.MockButton,null,"Hover here")),react_1.default.createElement("div",null,"same with a container"))))};UnmountingElement.__bit_component=__bit_component,exports2.UnmountingElement=UnmountingElement;const HoverExclusionZones=()=>react_1.default.createElement("div",{style:{padding:"16px 50px 32px 16px",minWidth:300,fontFamily:"sans-serif"}},react_1.default.createElement(hover_highlighter_1.HoverHighlighter,null,react_1.default.createElement(mock_component_1.MockTarget,null,"container (target-able)",react_1.default.createElement("div",null,react_1.default.createElement(mock_component_1.MockButton,null,"will be highlighted"))),react_1.default.createElement("br",null),react_1.default.createElement(mock_component_1.MockTarget,null,"container (target-able)",react_1.default.createElement("div",Object.assign({},ignore_highlighter_1.excludeHighlighterAtt),react_1.default.createElement(mock_component_1.MockButton,null,"will be ignored")))));HoverExclusionZones.__bit_component=__bit_component,exports2.HoverExclusionZones=HoverExclusionZones},6651:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.ComponentStripPreview=void 0;const react_1=__importDefault(__webpack_require__(7363)),component_strip_1=__webpack_require__(7227),mock_component_1=__webpack_require__(8423),ComponentStripPreview=()=>react_1.default.createElement("div",{style:{fontFamily:"sans-serif",padding:8}},react_1.default.createElement(component_strip_1.ComponentStrip,{component:mock_component_1.MockSnap}),react_1.default.createElement("br",null),react_1.default.createElement(component_strip_1.ComponentStrip,{component:mock_component_1.MockButton}));ComponentStripPreview.__bit_component=__bit_component,exports2.ComponentStripPreview=ComponentStripPreview},8423:function(__unused_webpack_module,exports2,__webpack_require__){var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0},__rest=this&&this.__rest||function(s,e){var t={};for(var p in s)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++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.MockSnap=exports2.MockButton=exports2.MockTarget=void 0;const react_1=__importDefault(__webpack_require__(7363)),react_ui_highlighter_component_metadata_bit_component_meta_1=__webpack_require__(2543);function MockTarget(_a){var{children}=_a,rest=__rest(_a,["children"]);return react_1.default.createElement("div",Object.assign({},rest),children)}MockTarget.__bit_component=__bit_component,exports2.MockTarget=MockTarget,MockTarget[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]={id:"teambit.design/ui/mock-target@1.6.2"};function MockButton(_a){var{children}=_a,rest=__rest(_a,["children"]);return react_1.default.createElement("button",Object.assign({},rest),children)}MockButton.__bit_component=__bit_component,exports2.MockButton=MockButton,MockButton[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]={id:"teambit.design/ui/icon-button@1.6.2"};function MockSnap(_a){var{children}=_a,rest=__rest(_a,["children"]);return react_1.default.createElement("button",Object.assign({},rest),children)}MockSnap.__bit_component=__bit_component,exports2.MockSnap=MockSnap,MockSnap[react_ui_highlighter_component_metadata_bit_component_meta_1.componentMetaField]={id:"teambit.design/ui/icon-button@a21594d5cc63fd24d2b4763fa7d817b131f0edbb"}},2076:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{compositions:()=>compositions,compositions_metadata:()=>compositions_metadata,overview:()=>overview});var component_highlighter_docs_namespaceObject={};__webpack_require__.r(component_highlighter_docs_namespaceObject),__webpack_require__.d(component_highlighter_docs_namespaceObject,{default:()=>MDXContent});var children_highlighter_composition=__webpack_require__(5245),element_highlighter_compositions=__webpack_require__(5584),component_strip_compositions=__webpack_require__(6651),hover_highlighter_compositions=__webpack_require__(6549),external_React_=__webpack_require__(7363);const external_MdxJsReact_namespaceObject=MdxJsReact,external_TeambitMdxUiMdxScopeContext_namespaceObject=TeambitMdxUiMdxScopeContext;var _excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&(!Object.prototype.propertyIsEnumerable.call(source,key)||(target[key]=source[key]))}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}var layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return(0,external_MdxJsReact_namespaceObject.mdx)(MDXLayout,_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,external_MdxJsReact_namespaceObject.mdx)(external_TeambitMdxUiMdxScopeContext_namespaceObject.MDXScopeProvider,{components:{HighlightedElement:element_highlighter_compositions.HighlightedElement},mdxType:"MDXScopeProvider"},(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"The component highlighter allows you to visually inspect bit react components, and provides a link to its documentation page.",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
+`,"It is mostly used for compositions debugging."),(0,external_MdxJsReact_namespaceObject.mdx)(element_highlighter_compositions.HighlightedElement,{mdxType:"HighlightedElement"}),(0,external_MdxJsReact_namespaceObject.mdx)("h2",null,"How to use?"),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"Simplest way to use the component is by wrapping your code with ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"ComponentHighlighter"),".",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
+`,"It will automatically detect components from DOM elements, just by hovering on them."),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`import { ComponentHighlighter } from '@teambit/react.ui.component-highlighter';
+
+function App() {
+  return (
+    <ComponentHighlighter>
+      <Header />
+      <Feed />
+    </ComponentHighlighter>
+  );
+}
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"You can also use it manually, to have more control:"),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`import { ElementHighlighter } from '@teambit/react.ui.component-highlighter';
+
+function ManualHighlight() {
+  const targetRef = createRef<HTMLElement | undefined>(null);
+
+  return (
+    <div>
+      <div ref={targetRef}>highlight target</div>
+      <ElementHighlighter targetRef={targetRef} components={['teambit.design/ui/icon-button']} />
+    </div>
+  );
+}
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("h2",null,"How does it work?"),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"The manual highlighter works by positioning elements (a frame and a label) to a target element. It uses ",(0,external_MdxJsReact_namespaceObject.mdx)("a",{parentName:"p",href:"https://popper.js.org/"},"PopperJS")," to correctly align them to the element."),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"The automatic highlighter then adds an event listener for hover events, which automatically tracks mouse movements and finds the most relevant React component using ",(0,external_MdxJsReact_namespaceObject.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/react/modules/dom-to-react"},"DOM-to-react"),". It bubbles up the DOM until it finds a component with bit metadata."),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"Where does the metadata come from? The highlighter assumes the code has been transpiled by Bit's ",(0,external_MdxJsReact_namespaceObject.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/react/babel/bit-react-transformer"},"custom babel plugin"),". The plugin looks for React components (i.e. functions or classes), and attaches a metadata object to them."),(0,external_MdxJsReact_namespaceObject.mdx)("blockquote",null,(0,external_MdxJsReact_namespaceObject.mdx)("p",{parentName:"blockquote"},"The ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"Bit React Transformer")," babel plugin is already running in the Preview, during ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"bit start"),".",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
+`,"It only effects the browser bundle, and not the dists.")),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"The result looks like this:"),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`var __bit_component = {
+  id: 'teambit.base-ui/button@1.0.0',
+  homepage: 'https://bit.dev/teambit/base-ui/input/button',
+  exported: true,
+};
+
+export function Button() {
+  return <div>click me!</div>;
+}
+
+// attaches metadata:
+Button.__bit_component = __bit_component;
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("h3",null,"Modes"),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"The Component Highlighter comes in a few different modes:"),(0,external_MdxJsReact_namespaceObject.mdx)("ul",null,(0,external_MdxJsReact_namespaceObject.mdx)("li",{parentName:"ul"},(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"li"},"hover")," - this will track your mouse movements, and show the highlighter for the element the user is currently hovering on."),(0,external_MdxJsReact_namespaceObject.mdx)("li",{parentName:"ul"},(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"li"},"allChildren")," - this automatically detects all components nested inside the highlighter, and apply a highlighter to them. Currently, this detection only happens once on initial setup, so it does not detect changes.")),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"In addition to changing the ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"mode")," prop, you can also use convenience exports from the same package:"),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`import { ChildrenHighlighter, HoverHighlighter } from '@teambit/react.ui.component-highlighter';
+
+function example() {
+  return (
+    <div>
+      <HoverHighlighter>
+        <App />
+      </HoverHighlighter>
+
+      <ChildrenHighlighter>
+        <App />
+      </ChildrenHighlighter>
+    </div>
+  );
+}
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("h3",null,"Debounce"),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,`Normally, moving quickly between elements could produce a jitter effect, where the highlighter "jumps" between elements, making interaction difficult.
+A debounce mitigates this by batching re-targets and smooths out the experience.`,(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
+`,"First time selection will always happen immediately, for a snappy experience."),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"You can control the debounce rate with the ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"debounceSelection")," prop. (default - ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"80ms"),")"),(0,external_MdxJsReact_namespaceObject.mdx)("h2",null,"Exclusions Zones"),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"To disabled highlighting in a specific area of the DOM, you can use the ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"<ExcludeHighlighter />")," component:"),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`import { ExcludeHighlighter, excludeHighlighterAtt } from '@teambit/react.ui.component-highlighter';
+
+// ...
+
+return (
+  <div>
+    <ExcludeHighlighter>
+      <Card>this component will not be highlighted</Card>
+    </ExcludeHighlighter>
+
+    {/* you can also add the exclude attribute without making a new div */}
+    <Card {...excludeHighlighterAtt}>this component will also be skipped</Card>
+  </div>
+);
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"Another options would be use use the ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"rule")," prop.",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
+`,"Inspired by Webpack rules, it provides a query selector or function that the highlighter target will have to match.",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
+`,"For example:"),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`<ComponentHighlighter rule="#include *">
+  <Button>will not be highlighted</Button>
+  <div id="include">
+    <Button>this will be highlighted</Button>
+  </div>
+</ComponentHighlighter>
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"You can also filter by component id, using the ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"componentRule")," prop:"),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`<ComponentHighlighter componentRule="teambit.design/ui/icon-button">
+  <Paragraph>will not be highlighted</Paragraph>
+  <Button>this will be highlighted</Button>
+</ComponentHighlighter>
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("h2",null,"Customization"),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"Use these CSS variables to edit the highlighter color"),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-css"},`--bit-highlighter-color: #eebcc9;
+--bit-highlighter-color-hover: #f6dae2;
+--bit-highlighter-color-active: #e79db1;
+--bit-highlighter-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.23));
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"While it is preferred to use the css variables, you can also set them using react props:"),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`<ComponentHighlighter bgColor="#eebcc9" bgColorHover="#f6dae2" bgColorActive="#e79db1">
+  ...
+</ComponentHighlighter>
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"And for complete control, you can pass these classes:"),(0,external_MdxJsReact_namespaceObject.mdx)("pre",null,(0,external_MdxJsReact_namespaceObject.mdx)("code",{parentName:"pre",className:"language-tsx"},`const classes = {
+  /** containing div */
+  container?: string;
+  /** border */
+  frame?: string;
+  /** component id links */
+  label?: string;
+};
+
+<ComponentHighlighter classes={classes}>
+  ...
+</ComponentHighlighter>
+`)),(0,external_MdxJsReact_namespaceObject.mdx)("p",null,"You can control the size using regular ",(0,external_MdxJsReact_namespaceObject.mdx)("inlineCode",{parentName:"p"},"font-size"),".",(0,external_MdxJsReact_namespaceObject.mdx)("br",{parentName:"p"}),`
+`,"Keep in mind that the label can be either two elements (when using component id), and a single element (for other texts)")))}MDXContent.isMDXComponent=!0;var __bit_component={id:"teambit.react/ui/component-highlighter@dcd2eb88a350a7c145e00700f7601cd352c13546",homepage:"https://bit.cloud/teambit/react/ui/component-highlighter",exported:!0};const compositions=[children_highlighter_composition,element_highlighter_compositions,component_strip_compositions,hover_highlighter_compositions],overview=[component_highlighter_docs_namespaceObject],compositions_metadata={compositions:[{displayName:"Children highlighter preview",identifier:"ChildrenHighlighterPreview"},{displayName:"Children highlighter with custom colors",identifier:"ChildrenHighlighterWithCustomColors"},{displayName:"Children highlighter inside ignore",identifier:"ChildrenHighlighterInsideIgnore"},{displayName:"Children highlighter with rule",identifier:"ChildrenHighlighterWithRule"},{displayName:"Children highlighter with component rule",identifier:"ChildrenHighlighterWithComponentRule"},{displayName:"Highlighted element",identifier:"HighlightedElement"},{displayName:"Customized",identifier:"Customized"},{displayName:"Sizes",identifier:"Sizes"},{displayName:"Moving element",identifier:"MovingElement"},{displayName:"Fullscreen element",identifier:"FullscreenElement"},{displayName:"Offscreen elements",identifier:"OffscreenElements"},{displayName:"Component strip preview",identifier:"ComponentStripPreview"},{displayName:"Show when hovering",identifier:"ShowWhenHovering"},{displayName:"Unmounting element",identifier:"UnmountingElement"},{displayName:"Hover exclusion zones",identifier:"HoverExclusionZones"}]}}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId),__webpack_exports__=__webpack_exec__(2076);return __webpack_exports__}]));

package/dist/preview-1671357904502.js

@@ -1,10 +0,0 @@
-import * as compositions_0 from '/Users/oded/Library/Caches/Bit/capsules/d327b0874e033264587c9ef867c8edb13e956f80/teambit.react_ui_component-highlighter@0.2.1/dist/children-highlighter/children-highlighter.composition.js';
-import * as compositions_1 from '/Users/oded/Library/Caches/Bit/capsules/d327b0874e033264587c9ef867c8edb13e956f80/teambit.react_ui_component-highlighter@0.2.1/dist/element-highlighter/element-highlighter.compositions.js';
-import * as compositions_2 from '/Users/oded/Library/Caches/Bit/capsules/d327b0874e033264587c9ef867c8edb13e956f80/teambit.react_ui_component-highlighter@0.2.1/dist/hover-highlighter/hover-highlighter.compositions.js';
-import * as compositions_3 from '/Users/oded/Library/Caches/Bit/capsules/d327b0874e033264587c9ef867c8edb13e956f80/teambit.react_ui_component-highlighter@0.2.1/dist/label/component-strip.compositions.js';
-import * as overview_0 from '/Users/oded/Library/Caches/Bit/capsules/d327b0874e033264587c9ef867c8edb13e956f80/teambit.react_ui_component-highlighter@0.2.1/dist/component-highlighter.docs.md';
-
-export const compositions = [compositions_0, compositions_1, compositions_2, compositions_3];
-export const overview = [overview_0];
-
-export const compositions_metadata = {"compositions":[{"displayName":"Children highlighter preview","identifier":"ChildrenHighlighterPreview"},{"displayName":"Children highlighter with custom colors","identifier":"ChildrenHighlighterWithCustomColors"},{"displayName":"Children highlighter inside ignore","identifier":"ChildrenHighlighterInsideIgnore"},{"displayName":"Children highlighter with rule","identifier":"ChildrenHighlighterWithRule"},{"displayName":"Children highlighter with component rule","identifier":"ChildrenHighlighterWithComponentRule"},{"displayName":"Highlighted element","identifier":"HighlightedElement"},{"displayName":"Customized","identifier":"Customized"},{"displayName":"Sizes","identifier":"Sizes"},{"displayName":"Moving element","identifier":"MovingElement"},{"displayName":"Fullscreen element","identifier":"FullscreenElement"},{"displayName":"Offscreen elements","identifier":"OffscreenElements"},{"displayName":"Show when hovering","identifier":"ShowWhenHovering"},{"displayName":"Unmounting element","identifier":"UnmountingElement"},{"displayName":"Hover exclusion zones","identifier":"HoverExclusionZones"},{"displayName":"Component strip preview","identifier":"ComponentStripPreview"}]};

package/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      "es2019",
-      "DOM",
-      "ES6",
-      "DOM.Iterable"
-    ],
-    "target": "es2015",
-    "module": "CommonJS",
-    "jsx": "react",
-    "allowJs": true,
-    "composite": true,
-    "declaration": true,
-    "sourceMap": true,
-    "skipLibCheck": true,
-    "experimentalDecorators": true,
-    "outDir": "dist",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "rootDir": ".",
-    "resolveJsonModule": true
-  },
-  "exclude": [
-    "dist",
-    "package.json"
-  ],
-  "include": [
-    "**/*",
-    "**/*.json"
-  ]
-}

package/types/asset.d.ts

@@ -1,29 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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;
-}