@teambit/workspace 1.0.505 → 1.0.507

package/artifacts/__bit_junit.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <testsuites tests="0" failures="0" errors="0" skipped="0">
-  <testsuite name="teambit.workspace/workspace@1.0.505" tests="0" failures="0" errors="0" skipped="0"/>
+  <testsuite name="teambit.workspace/workspace@1.0.507" tests="0" failures="0" errors="0" skipped="0"/>
 </testsuites>

package/artifacts/preview/teambit_workspace_workspace-preview.js

@@ -1,2 +1,2 @@
 /*! For license information please see teambit_workspace_workspace-preview.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["teambit.workspace/workspace-preview"]=t():e["teambit.workspace/workspace-preview"]=t()}(self,(()=>(()=>{var e={8443:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var a=typeof n;if("string"===a||"number"===a)e.push(n);else if(Array.isArray(n)&&n.length){var i=r.apply(null,n);i&&e.push(i)}else if("object"===a)for(var s in n)o.call(n,s)&&n[s]&&e.push(s)}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},9685:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var a=typeof n;if("string"===a||"number"===a)e.push(n);else if(Array.isArray(n)){if(n.length){var i=r.apply(null,n);i&&e.push(i)}}else if("object"===a)if(n.toString===Object.prototype.toString)for(var s in n)o.call(n,s)&&n[s]&&e.push(s);else e.push(n.toString())}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},8552:()=>{!function(){if("undefined"!=typeof window&&"undefined"!=typeof document&&"undefined"!=typeof HTMLElement){var e=!1;try{var t=document.createElement("div");t.addEventListener("focus",(function(e){e.preventDefault(),e.stopPropagation()}),!0),t.focus(Object.defineProperty({},"preventScroll",{get:function(){e=!0}}))}catch(e){}void 0!==HTMLElement.prototype.nativeFocus||e||(HTMLElement.prototype.nativeFocus=HTMLElement.prototype.focus,HTMLElement.prototype.focus=function(e){var t=window.scrollY||window.pageYOffset;this.nativeFocus(),e&&e.preventScroll&&setTimeout((function(){window.scroll(window.scrollX||window.pageXOffset,t)}),0)})}}()},456:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isNavigator=t.isBrowser=t.off=t.on=t.noop=void 0,t.noop=function(){},t.on=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];e&&e.addEventListener&&e.addEventListener.apply(e,t)},t.off=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];e&&e.removeEventListener&&e.removeEventListener.apply(e,t)},t.isBrowser="undefined"!=typeof window,t.isNavigator="undefined"!=typeof navigator},4286:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(1594);t.default=function(e){o.useEffect(e,[])}},1084:(e,t,n)=>{"use strict";var o=n(1594),r=n(456),a=r.isBrowser?window:null,i=function(e){return!!e.addEventListener},s=function(e){return!!e.on};t.A=function(e,t,n,c){void 0===n&&(n=a),o.useEffect((function(){if(t&&n)return i(n)?r.on(n,e,t,c):s(n)&&n.on(e,t,c),function(){i(n)?r.off(n,e,t,c):s(n)&&n.off(e,t,c)}}),[e,t,n,JSON.stringify(c)])}},9768:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(7046),r=n(1594),a=o.__importDefault(n(2896));t.default=function(e){var t=r.useRef(0),n=r.useState(e),o=n[0],i=n[1],s=r.useCallback((function(e){cancelAnimationFrame(t.current),t.current=requestAnimationFrame((function(){i(e)}))}),[]);return a.default((function(){cancelAnimationFrame(t.current)})),[o,s]}},2896:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(7046),r=n(1594),a=o.__importDefault(n(4286));t.default=function(e){var t=r.useRef(e);t.current=e,a.default((function(){return function(){return t.current()}}))}},4843:(e,t,n)=>{"use strict";var o=n(7046),r=n(1594),a=o.__importDefault(n(9768)),i=n(456);t.A=function(e){var t=void 0===e?{}:e,n=t.initialWidth,o=void 0===n?1/0:n,s=t.initialHeight,c=void 0===s?1/0:s,l=t.onChange,p=a.default({width:i.isBrowser?window.innerWidth:o,height:i.isBrowser?window.innerHeight:c}),u=p[0],d=p[1];return r.useEffect((function(){if(i.isBrowser){var e=function(){var e=window.innerWidth,t=window.innerHeight;d({width:e,height:t}),l&&l(e,t)};return i.on(window,"resize",e),function(){i.off(window,"resize",e)}}}),[]),u}},3947:function(e,t,n){"use strict";var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n},r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.BaseImage=void 0;const a=r(n(1594)),i=r(n(8443)),s=r(n(2627));function c(e){var{alt:t,className:n,fullWidth:r}=e,c=o(e,["alt","className","fullWidth"]);return a.default.createElement("img",Object.assign({"data-bit-id":"teambit.base-ui/elements/image",alt:t},c,{className:i.default(s.default.image,r&&s.default.fullWidth,n)}))}c.__bit_component={id:"teambit.base-ui/elements/image@1.0.0",homepage:"https://bit.dev/teambit/base-ui/elements/image",exported:!0},t.BaseImage=c},7014:function(e,t,n){"use strict";var o=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),r=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||o(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),r(n(3947),t)},3911:(e,t,n)=>{"use strict";n.r(t),n.d(t,{Image:()=>y});var o=n(1594),r=n.n(o),a=n(9685),i=n.n(a);n(8552);const s=ReactDom;var c=n(1084),l=n(4843),p=n(7046),u=function(e){return e+"ms"},d={getBoundingClientRect:function(){return{height:0,left:0,top:0,width:0}},style:{transform:null}},m=(0,o.memo)((function(e){var t=e.children,n=e.closeText,a=void 0===n?"Unzoom Image":n,i=e.onUnload,m=e.onLoad,f=e.overlayBgColorEnd,h=void 0===f?"rgba(255, 255, 255, 0.95)":f,y=e.overlayBgColorStart,v=void 0===y?"rgba(255, 255, 255, 0)":y,g=e.parentRef,w=e.portalEl,b=void 0===w?document.body:w,_=e.scrollableEl,x=void 0===_?window:_,O=e.transitionDuration,k=void 0===O?300:O,j=e.zoomMargin,N=void 0===j?0:j,P=e.zoomZindex,S=void 0===P?2147483647:P,E=(0,o.useRef)(null),C=(0,o.useState)(0)[1],T=(0,o.useState)(!1),I=T[0],M=T[1],D=(0,o.useState)(!1),z=D[0],B=D[1],A=(0,l.A)(),R=A.width,L=A.height,W=(0,o.useCallback)((function(e){e.preventDefault(),B(!0)}),[]),F=(0,o.useCallback)((function(e){"Escape"!==e.key&&27!==e.keyCode||(e.stopPropagation(),B(!0))}),[]),H=(0,o.useCallback)((function(){C((function(e){return e+1})),z||B(!0)}),[z]);(0,c.A)("keydown",F,document),(0,c.A)("scroll",H,x),(0,o.useEffect)((function(){M(!0),m(),E.current&&E.current.focus({preventScroll:!0})}),[m]),(0,o.useEffect)((function(){var e=z?setTimeout(i,k):null;return function(){e&&clearTimeout(e)}}),[z,i,k]);var U=g.current||d,X=U.getBoundingClientRect(),Y=X.height,G=X.left,Z=X.top,$=X.width,q=function(e){var t=e.isLoaded,n=e.isUnloading,o=e.overlayBgColorEnd,r=e.zoomZindex,a={backgroundColor:e.overlayBgColorStart,transitionDuration:u(e.transitionDuration),zIndex:r};return t&&!n&&(a.backgroundColor=o),a}({isLoaded:I,isUnloading:z,overlayBgColorEnd:h,overlayBgColorStart:v,transitionDuration:k,zoomZindex:S}),K=function(e){var t=e.height,n=e.innerHeight,o=e.innerWidth,r=e.isLoaded,a=e.isUnloading,i=e.left,s=e.originalTransform,c=e.top,l=e.transitionDuration,d=e.width,m=e.zoomMargin,f=u(l);if(!r||a){var h=(0,p.__spreadArrays)(["scale(1)","translate(0, 0)"],s?[s]:[]).join(" ");return{height:t,left:i,top:c,transform:h,WebkitTransform:h,transitionDuration:f,width:d}}var y=function(e){var t=e.zoomMargin,n=e.innerWidth/(e.width+t),o=e.innerHeight/(e.height+t);return Math.min(n,o)}({height:t,innerWidth:o,innerHeight:n,width:d,zoomMargin:m}),v=(o/2-(i+d/2))/y,g=(n/2-(c+t/2))/y,w=(0,p.__spreadArrays)(["scale("+y+")","translate("+v+"px, "+g+"px)"],s?[s]:[]).join(" ");return{height:t,left:i,top:c,transform:w,WebkitTransform:w,transitionDuration:f,width:d}}({height:Y,isLoaded:I,innerHeight:L,innerWidth:R,isUnloading:z,left:G,originalTransform:U.style.transform,top:Z,transitionDuration:k,width:$,zoomMargin:N});return(0,s.createPortal)(r().createElement("div",{"aria-modal":!0,"data-rmiz-overlay":!0,role:"dialog",style:q},r().createElement("div",{"data-rmiz-modal-content":!0,style:K},t),r().createElement("button",{"aria-label":a,"data-rmiz-btn-close":!0,onClick:W,ref:E})),b)}));const f=(0,o.memo)((function(e){var t=e.children,n=e.closeText,a=void 0===n?"Unzoom image":n,i=e.overlayBgColorEnd,s=void 0===i?"rgba(255, 255, 255, 0.95)":i,c=e.overlayBgColorStart,l=void 0===c?"rgba(255, 255, 255, 0)":c,p=e.portalEl,u=e.openText,d=void 0===u?"Zoom image":u,f=e.scrollableEl,h=e.transitionDuration,y=void 0===h?300:h,v=e.wrapElement,g=void 0===v?"div":v,w=e.wrapStyle,b=e.zoomMargin,_=void 0===b?0:b,x=e.zoomZindex,O=void 0===x?2147483647:x,k=(0,o.useState)(!1),j=k[0],N=k[1],P=(0,o.useState)(!1),S=P[0],E=P[1],C=(0,o.useRef)(null),T=(0,o.useRef)(null),I=(0,o.useCallback)((function(e){j||(e.preventDefault(),N(!0))}),[j]),M=(0,o.useCallback)((function(){E(!0)}),[]),D=(0,o.useCallback)((function(){N(!1),E(!1),T.current&&T.current.focus({preventScroll:!0})}),[]),z=j&&S?"hidden":"visible";return r().createElement(o.StrictMode,null,r().createElement(g,{"data-rmiz-wrap":z,ref:C,style:w},t,r().createElement("button",{"aria-label":d,"data-rmiz-btn-open":!0,onClick:I,ref:T}),"undefined"!=typeof window&&j&&r().createElement(m,{closeText:a,onLoad:M,onUnload:D,overlayBgColorEnd:s,overlayBgColorStart:l,parentRef:C,portalEl:p,scrollableEl:f,transitionDuration:y,zoomMargin:_,zoomZindex:O},t)))}));var h=n(7014);const y=e=>{var{center:t=!0,width:n,alt:o,src:a,className:s}=e,c=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}(e,["center","width","alt","src","className"]);return r().createElement("div",{style:{width:n||"100%"},className:i()(t&&"image_center__6-xCb",s)},r().createElement(f,null,r().createElement(h.BaseImage,Object.assign({fullWidth:!0,alt:o,src:a},c))))};y.__bit_component={id:"teambit.docs/ui/zoomable-image@1.95.0",homepage:"https://bit.dev/teambit/docs/ui/zoomable-image",exported:!0}},1612:(e,t,n)=>{"use strict";Object.defineProperty(t,"Ay",{enumerable:!0,get:function(){return o.default}});var o=r(n(7532));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.workspace/content/workspace-overview@1.95.0",homepage:"https://bit.dev/teambit/workspace/content/workspace-overview",exported:!0}},7532:(e,t,n)=>{"use strict";var o={id:"teambit.workspace/content/workspace-overview@1.95.0",homepage:"https://bit.dev/teambit/workspace/content/workspace-overview",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=v,u(n(1594));var r=n(5016),a=n(5682),i=n(3911),s=u(n(8800)),c=u(n(176)),l=u(n(6903)),p=["components"];function u(e){return e&&e.__esModule?e:{default:e}}function d(){return d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},d.apply(this,arguments)}function m(e,t){if(null==e)return{};var n,o,r=f(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function f(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}u.__bit_component=o,d.__bit_component=o,m.__bit_component=o,f.__bit_component=o;var h={},y="wrapper";function v(e){var t=e.components,n=m(e,p);return(0,r.mdx)(y,d({},h,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(a.MDXScopeProvider,{components:{Image:i.Image,wsScreenshot:s.default,looseComponents:c.default,multiRepo:l.default},mdxType:"MDXScopeProvider"},(0,r.mdx)("h1",null,"Workspace Overview"),(0,r.mdx)("p",null,"You can use the Bit workspace to either create, use or import components, make changes to them, and export these changes back.\nWorkspaces are tech-agnonstic and allow development of components of all kinds. They can be used by a single developer maintaining few components, exist on top of\nexisting repositories or shared as a Workspace component."),(0,r.mdx)(i.Image,{src:c.default,width:"85%",mdxType:"Image"}),(0,r.mdx)("p",null,"Get started and generate a demo workspace:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"bit new react demo\n")),(0,r.mdx)("h2",null,"Component development server"),(0,r.mdx)("p",null,"All components in your workspace are rendered and presented on a local development server. To start it, run the following command:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-sh"},"bit start\n")),(0,r.mdx)(i.Image,{src:s.default,width:"80%",mdxType:"Image"}),(0,r.mdx)("h2",null,"Simple, scalable dev experience"),(0,r.mdx)("p",null,"Keeping a similar dev-experience across workspaces allows you to jump in and out from codebases. When you don't need to deal with a per-project setup or learn the workflow commands/scripts you simply focus on the code."),(0,r.mdx)("p",null,"Simple dev experience means you can ",(0,r.mdx)("strong",{parentName:"p"},"easily onboard")," yourself to a workspace, thanks to:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("strong",{parentName:"li"},"Use the same commands")," - Regardless of the tooling and configs used in a workspace, you use the same commands (",(0,r.mdx)("inlineCode",{parentName:"li"},"compile"),", ",(0,r.mdx)("inlineCode",{parentName:"li"},"test"),", etc) and get similarly structured outputs."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("strong",{parentName:"li"},"Minimal configuration")," - Most of the configuration and setup is automated. No need to define per-component dependencies and no additional files needed to change a component's build pipeline."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("strong",{parentName:"li"},"Templates and standards")," - Create new components with templates and apply your formatting, linting, compilation and testing standards with a single policy."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("strong",{parentName:"li"},"Components are directories")," - Each ",(0,r.mdx)("a",{parentName:"li",href:"docs/workspace/component-directory"},"component in your workspace is a directory")," so relevant files, assets and tests available in a single place.")),(0,r.mdx)("p",null,"This makes it easy to scale the amount of components in a workspace, scale the amount of workspaces and even scale the amount of developers!"),(0,r.mdx)("h2",null,"Composition of components"),(0,r.mdx)("p",null,'The workspace is a container for the components. You get a monolithic-like developer experience and ability to refactor many components in a single place. In this "container" a component manages its own implementation, history and config (',(0,r.mdx)("a",{parentName:"p",href:"/docs/components/component-overview"},"read more"),").",(0,r.mdx)("br",{parentName:"p"}),"\n","This allows you to be flexible with how you structure a workspace and its contents. For example, you can ",(0,r.mdx)("a",{parentName:"p",href:"/docs/components/importing-components"},"import a component"),":"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"bit import teambit.community/ui/graph/bubble-graph\n")),(0,r.mdx)("p",null,"Bit adds the new component to the list of components in the workspace, pulls down the complete revision history, configs and dependencies. Now you can do local modifications, see the component when running ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit start"),", and maintain it as if you implemented it in your own workspace."),(0,r.mdx)("p",null,"In the same sense you can ",(0,r.mdx)("inlineCode",{parentName:"p"},"export")," and even ",(0,r.mdx)("inlineCode",{parentName:"p"},"eject")," any of your components from a workspace, and more it to another one. So if you started with building all components in the same place, you are not locked to that decision."),(0,r.mdx)(i.Image,{src:l.default,width:"85%",mdxType:"Image"}),(0,r.mdx)("h3",null,"Personalize your workspace"),(0,r.mdx)("p",null,"With composability in mind you can personalize your workspace on a per-feature basis or on the work you are currently focus on. You can start your flow by using ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit import")," and fetch all required components, starting to modify and work on them as needed.",(0,r.mdx)("br",{parentName:"p"}),"\n","When done, you can version and eject unneeded components. Instead of you working in the boundaries of your workspace, have the workspace fit to your current work."),(0,r.mdx)("h2",null,"Configuration-less"),(0,r.mdx)("p",null,"Regardless of the amount of components you have in your workspace, and how different they may be in their configuration, it only requires two files to manage components."),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"workspace.jsonc")," - Contains the configuration policy for all components in the workspace."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},".bitmap")," - Maps Bit components to their corresponding location (dir) in the workspace.")),(0,r.mdx)("p",null,"With both these files you track where each component is located and can apply configuration from a centralized location according to various ",(0,r.mdx)("a",{parentName:"p",href:"/docs/workspace/variants"},(0,r.mdx)("inlineCode",{parentName:"a"},"variant"))," rules. The workspace then calculates the configuration to apply on a per-component basis."),(0,r.mdx)("p",null,"The end result is a clean workspace where you have a minimal amount of configuration files, no matter how many components you have and their variants."),(0,r.mdx)("h2",null,"Any dev environment, any framework"),(0,r.mdx)("p",null,"Angular modules, React components, Node modules or any other type of components you might need are rendered with the same ",(0,r.mdx)("a",{parentName:"p",href:"docs/workspace/workspace-ui"},"workspace UI"),", compiled by the same ",(0,r.mdx)("inlineCode",{parentName:"p"},"compile")," command, etc.",(0,r.mdx)("br",{parentName:"p"}),"\n","You can maintain components of different types and frameworks in a Bit workspace, as each component has it's own configured ",(0,r.mdx)("a",{parentName:"p",href:"/docs/envs/envs-overview"},"Component Development Environment"),", which the workspace use to run various workflows."),(0,r.mdx)("h2",null,"Components in the workspace"),(0,r.mdx)("p",null,"A Bit Workspace manages many components. It aims to create symmetry between component naming and the directory structure."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-sh"},"├── cart\n│   ├── purchase-summary\n│   └── shopping-cart\n└── design\n    ├── ui\n    │   ├── button\n    │   └── card   // for example, the corresponding component ID: my-org.design/ui/button\n    └── theme\n        ├── color-pallet\n        └── theme-context\n")),(0,r.mdx)("div",{className:"admonition admonition-tip alert alert--success"},(0,r.mdx)("div",{parentName:"div",className:"admonition-heading"},(0,r.mdx)("h5",{parentName:"div"},(0,r.mdx)("span",{parentName:"h5",className:"admonition-icon"},(0,r.mdx)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,r.mdx)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"The structure is not rigid. You can sort components however you see fit.")),(0,r.mdx)("div",{parentName:"div",className:"admonition-content"})),(0,r.mdx)("p",null,"For each component Bit generates a link in the root ",(0,r.mdx)("inlineCode",{parentName:"p"},"node_modules")," directory according to the component ID. It contains the compiled output of a component."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"└── node_modules\n    └── @my-org\n        └── my-scope.ui.card\n")),(0,r.mdx)("p",null,"Use these modules when consuming one component in another, even in the same workspace."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import { Card } from '@my-org/my-scope.ui.card';\n")),(0,r.mdx)("div",{className:"admonition admonition-info alert alert--info"},(0,r.mdx)("div",{parentName:"div",className:"admonition-heading"},(0,r.mdx)("h5",{parentName:"div"},(0,r.mdx)("span",{parentName:"h5",className:"admonition-icon"},(0,r.mdx)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,r.mdx)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Absolute import statements decouple a component from the project's file structure.")),(0,r.mdx)("div",{parentName:"div",className:"admonition-content"})),(0,r.mdx)("h2",null,"Dependency Policy"),(0,r.mdx)("p",null,"The workspace dependency policy defines how external dependencies are installed and in which version. You may apply complex setups to have multiple versions of a dependency installed to fit different components. It allows you to determine where you want to adopt to a new version and which components should still use past versions."),(0,r.mdx)("p",null,"In your workspace you also have a ",(0,r.mdx)("a",{parentName:"p",href:"/docs/dependencies/dependencies-overview"},"dependency resolver")," that uses the policy to determine the type of dependency on a per-component basis.",(0,r.mdx)("br",{parentName:"p"}),"\n","Types of dependencies, like ",(0,r.mdx)("inlineCode",{parentName:"p"},"dependency")," and ",(0,r.mdx)("inlineCode",{parentName:"p"},"devDependency")," are contextual for each component. Meaning that according to where a component ",(0,r.mdx)("inlineCode",{parentName:"p"},"import"),"s a dependency, it will be set with the corresponding type. For example, a dependency only used in a test file will set as a ",(0,r.mdx)("inlineCode",{parentName:"p"},"devDependency")," for that specific component."),(0,r.mdx)("h2",null,"Performance"),(0,r.mdx)("p",null,"Bit workspace is optimized for quick and snappy feedback loop on code changes. It leaves the tough work of ensuring de-coupling and isolation to a more robust CI flow."),(0,r.mdx)("p",null,"To optimize performance even further any time you change a component Bit find which components are affected by the change. Bit then build your modified components and their affected dependents."),(0,r.mdx)("h2",null,"Integrate to existing codebases"),(0,r.mdx)("p",null,"Bit is a build tool that allows you to manage independent components. You may create a Bit workspace in a fresh directory or initialize one as part of an existing repository.",(0,r.mdx)("br",{parentName:"p"}),"\n","You can get started working on independent components alongside projects built with ",(0,r.mdx)("a",{parentName:"p",href:"https://angular.io/tutorial/toh-pt0"},"Angular"),", ",(0,r.mdx)("a",{parentName:"p",href:"https://create-react-app.dev"},"CRA")," and even ",(0,r.mdx)("a",{parentName:"p",href:"https://lerna.js.org"},"Lerna"),"."),(0,r.mdx)("p",null,(0,r.mdx)("inlineCode",{parentName:"p"},"cd")," to a pre-existing repository and run:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"bit init\n")),(0,r.mdx)("p",null,"From here you may use any Bit command and flow to build independent components and integrate them into your application.")))}v.__bit_component=o,v.isMDXComponent=!0},3537:(e,t,n)=>{"use strict";var o={id:"teambit.workspace/workspace@1.0.505",homepage:"https://bit.cloud/teambit/workspace/workspace",exported:!0};function r(){const e=a(n(1594));return r=function(){return e},e}function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,r.__bit_component=o,a.__bit_component=o;const i=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/workspace.svg"}));i.__bit_component=o,t.Logo=i},2627:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});const o={fullWidth:"image_fullWidth__sELLz"}},176:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/b40d450de296e275550f.png"},6903:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/2f046646df38433e90d7.png"},8800:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/cb67fb802479e2710016.png"},5016:e=>{"use strict";e.exports=MdxJsReact},1594:e=>{"use strict";e.exports=React},5682:e=>{"use strict";e.exports=TeambitMdxUiMdxScopeContext},7046:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__addDisposableResource:()=>z,__assign:()=>a,__asyncDelegator:()=>j,__asyncGenerator:()=>k,__asyncValues:()=>N,__await:()=>O,__awaiter:()=>f,__classPrivateFieldGet:()=>I,__classPrivateFieldIn:()=>D,__classPrivateFieldSet:()=>M,__createBinding:()=>y,__decorate:()=>s,__disposeResources:()=>A,__esDecorate:()=>l,__exportStar:()=>v,__extends:()=>r,__generator:()=>h,__importDefault:()=>T,__importStar:()=>C,__makeTemplateObject:()=>P,__metadata:()=>m,__param:()=>c,__propKey:()=>u,__read:()=>w,__rest:()=>i,__rewriteRelativeImportExtension:()=>R,__runInitializers:()=>p,__setFunctionName:()=>d,__spread:()=>b,__spreadArray:()=>x,__spreadArrays:()=>_,__values:()=>g,default:()=>L});var o=function(e,t){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},o(e,t)};function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var a=function(){return a=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},a.apply(this,arguments)};function i(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}function s(e,t,n,o){var r,a=arguments.length,i=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(i=(a<3?r(i):a>3?r(t,n,i):r(t,n))||i);return a>3&&i&&Object.defineProperty(t,n,i),i}function c(e,t){return function(n,o){t(n,o,e)}}function l(e,t,n,o,r,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,c=o.kind,l="getter"===c?"get":"setter"===c?"set":"value",p=!t&&e?o.static?e:e.prototype:null,u=t||(p?Object.getOwnPropertyDescriptor(p,o.name):{}),d=!1,m=n.length-1;m>=0;m--){var f={};for(var h in o)f[h]="access"===h?{}:o[h];for(var h in o.access)f.access[h]=o.access[h];f.addInitializer=function(e){if(d)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var y=(0,n[m])("accessor"===c?{get:u.get,set:u.set}:u[l],f);if("accessor"===c){if(void 0===y)continue;if(null===y||"object"!=typeof y)throw new TypeError("Object expected");(s=i(y.get))&&(u.get=s),(s=i(y.set))&&(u.set=s),(s=i(y.init))&&r.unshift(s)}else(s=i(y))&&("field"===c?r.unshift(s):u[l]=s)}p&&Object.defineProperty(p,o.name,u),d=!0}function p(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0}function u(e){return"symbol"==typeof e?e:"".concat(e)}function d(e,t,n){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:n?"".concat(n," ",t):t})}function m(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function f(e,t,n,o){return new(n||(n=Promise))((function(r,a){function i(e){try{c(o.next(e))}catch(e){a(e)}}function s(e){try{c(o.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,s)}c((o=o.apply(e,t||[])).next())}))}function h(e,t){var n,o,r,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=s(0),i.throw=s(1),i.return=s(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(s){return function(c){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,s[0]&&(a=0)),a;)try{if(n=1,o&&(r=2&s[0]?o.return:s[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,s[1])).done)return r;switch(o=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!((r=(r=a.trys).length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){a.label=s[1];break}if(6===s[0]&&a.label<r[1]){a.label=r[1],r=s;break}if(r&&a.label<r[2]){a.label=r[2],a.ops.push(s);break}r[2]&&a.ops.pop(),a.trys.pop();continue}s=t.call(e,a)}catch(e){s=[6,e],o=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}}var y=Object.create?function(e,t,n,o){void 0===o&&(o=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,o,r)}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]};function v(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||y(t,e,n)}function g(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],o=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function w(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,a=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(o=a.next()).done;)i.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=a.return)&&n.call(a)}finally{if(r)throw r.error}}return i}function b(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(w(arguments[t]));return e}function _(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var o=Array(e),r=0;for(t=0;t<n;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,r++)o[r]=a[i];return o}function x(e,t,n){if(n||2===arguments.length)for(var o,r=0,a=t.length;r<a;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}function O(e){return this instanceof O?(this.v=e,this):new O(e)}function k(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var o,r=n.apply(e,t||[]),a=[];return o=Object.create(("function"==typeof AsyncIterator?AsyncIterator:Object).prototype),i("next"),i("throw"),i("return",(function(e){return function(t){return Promise.resolve(t).then(e,l)}})),o[Symbol.asyncIterator]=function(){return this},o;function i(e,t){r[e]&&(o[e]=function(t){return new Promise((function(n,o){a.push([e,t,n,o])>1||s(e,t)}))},t&&(o[e]=t(o[e])))}function s(e,t){try{(n=r[e](t)).value instanceof O?Promise.resolve(n.value.v).then(c,l):p(a[0][2],n)}catch(e){p(a[0][3],e)}var n}function c(e){s("next",e)}function l(e){s("throw",e)}function p(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function j(e){var t,n;return t={},o("next"),o("throw",(function(e){throw e})),o("return"),t[Symbol.iterator]=function(){return this},t;function o(o,r){t[o]=e[o]?function(t){return(n=!n)?{value:O(e[o](t)),done:!1}:r?r(t):t}:r}}function N(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=g(e),t={},o("next"),o("throw"),o("return"),t[Symbol.asyncIterator]=function(){return this},t);function o(n){t[n]=e[n]&&function(t){return new Promise((function(o,r){!function(e,t,n,o){Promise.resolve(o).then((function(t){e({value:t,done:n})}),t)}(o,r,(t=e[n](t)).done,t.value)}))}}}function P(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var S=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},E=function(e){return E=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n);return t},E(e)};function C(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n=E(e),o=0;o<n.length;o++)"default"!==n[o]&&y(t,e,n[o]);return S(t,e),t}function T(e){return e&&e.__esModule?e:{default:e}}function I(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function M(e,t,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?r.call(e,n):r?r.value=n:t.set(e,n),n}function D(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function z(e,t,n){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var o,r;if(n){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");o=t[Symbol.asyncDispose]}if(void 0===o){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");o=t[Symbol.dispose],n&&(r=o)}if("function"!=typeof o)throw new TypeError("Object not disposable.");r&&(o=function(){try{r.call(this)}catch(e){return Promise.reject(e)}}),e.stack.push({value:t,dispose:o,async:n})}else n&&e.stack.push({async:!0});return t}var B="function"==typeof SuppressedError?SuppressedError:function(e,t,n){var o=new Error(n);return o.name="SuppressedError",o.error=e,o.suppressed=t,o};function A(e){function t(t){e.error=e.hasError?new B(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}var n,o=0;return function r(){for(;n=e.stack.pop();)try{if(!n.async&&1===o)return o=0,e.stack.push(n),Promise.resolve().then(r);if(n.dispose){var a=n.dispose.call(n.value);if(n.async)return o|=2,Promise.resolve(a).then(r,(function(e){return t(e),r()}))}else o|=1}catch(e){t(e)}if(1===o)return e.hasError?Promise.reject(e.error):Promise.resolve();if(e.hasError)throw e.error}()}function R(e,t){return"string"==typeof e&&/^\.\.?\//.test(e)?e.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i,(function(e,n,o,r,a){return n?t?".jsx":".js":!o||r&&a?o+r+"."+a.toLowerCase()+"js":e})):e}const L={__extends:r,__assign:a,__rest:i,__decorate:s,__param:c,__esDecorate:l,__runInitializers:p,__propKey:u,__setFunctionName:d,__metadata:m,__awaiter:f,__generator:h,__createBinding:y,__exportStar:v,__values:g,__read:w,__spread:b,__spreadArrays:_,__spreadArray:x,__await:O,__asyncGenerator:k,__asyncDelegator:j,__asyncValues:N,__makeTemplateObject:P,__importStar:C,__importDefault:T,__classPrivateFieldGet:I,__classPrivateFieldSet:M,__classPrivateFieldIn:D,__addDisposableResource:z,__disposeResources:A,__rewriteRelativeImportExtension:R}}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var a=t[o]={exports:{}};return e[o].call(a.exports,a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var o=t.getElementsByTagName("script");if(o.length)for(var r=o.length-1;r>-1&&(!e||!/^http(s?):/.test(e));)e=o[r--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})();var o={};return(()=>{"use strict";n.r(o),n.d(o,{compositions:()=>d,compositions_metadata:()=>f,overview:()=>m});var e={};n.r(e),n.d(e,{default:()=>u});var t=n(3537),r=(n(1594),n(5016)),a=n(5682),i=n(1612),s=["components"];function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},c.apply(null,arguments)}var l={},p="wrapper";function u(e){var t=e.components,n=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n={};for(var o in e)if({}.hasOwnProperty.call(e,o)){if(t.includes(o))continue;n[o]=e[o]}return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(e,s);return(0,r.mdx)(p,c({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(a.MDXScopeProvider,{components:{WorkspaceOverview:i.Ay},mdxType:"MDXScopeProvider"},(0,r.mdx)(i.Ay,{mdxType:"WorkspaceOverview"})))}u.isMDXComponent=!0;const d=[t],m=[e],f={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),o})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["teambit.workspace/workspace-preview"]=t():e["teambit.workspace/workspace-preview"]=t()}(self,(()=>(()=>{var e={8443:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var a=typeof n;if("string"===a||"number"===a)e.push(n);else if(Array.isArray(n)&&n.length){var i=r.apply(null,n);i&&e.push(i)}else if("object"===a)for(var s in n)o.call(n,s)&&n[s]&&e.push(s)}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},9685:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var a=typeof n;if("string"===a||"number"===a)e.push(n);else if(Array.isArray(n)){if(n.length){var i=r.apply(null,n);i&&e.push(i)}}else if("object"===a)if(n.toString===Object.prototype.toString)for(var s in n)o.call(n,s)&&n[s]&&e.push(s);else e.push(n.toString())}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},8552:()=>{!function(){if("undefined"!=typeof window&&"undefined"!=typeof document&&"undefined"!=typeof HTMLElement){var e=!1;try{var t=document.createElement("div");t.addEventListener("focus",(function(e){e.preventDefault(),e.stopPropagation()}),!0),t.focus(Object.defineProperty({},"preventScroll",{get:function(){e=!0}}))}catch(e){}void 0!==HTMLElement.prototype.nativeFocus||e||(HTMLElement.prototype.nativeFocus=HTMLElement.prototype.focus,HTMLElement.prototype.focus=function(e){var t=window.scrollY||window.pageYOffset;this.nativeFocus(),e&&e.preventScroll&&setTimeout((function(){window.scroll(window.scrollX||window.pageXOffset,t)}),0)})}}()},456:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isNavigator=t.isBrowser=t.off=t.on=t.noop=void 0,t.noop=function(){},t.on=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];e&&e.addEventListener&&e.addEventListener.apply(e,t)},t.off=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];e&&e.removeEventListener&&e.removeEventListener.apply(e,t)},t.isBrowser="undefined"!=typeof window,t.isNavigator="undefined"!=typeof navigator},4286:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(1594);t.default=function(e){o.useEffect(e,[])}},1084:(e,t,n)=>{"use strict";var o=n(1594),r=n(456),a=r.isBrowser?window:null,i=function(e){return!!e.addEventListener},s=function(e){return!!e.on};t.A=function(e,t,n,c){void 0===n&&(n=a),o.useEffect((function(){if(t&&n)return i(n)?r.on(n,e,t,c):s(n)&&n.on(e,t,c),function(){i(n)?r.off(n,e,t,c):s(n)&&n.off(e,t,c)}}),[e,t,n,JSON.stringify(c)])}},9768:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(7046),r=n(1594),a=o.__importDefault(n(2896));t.default=function(e){var t=r.useRef(0),n=r.useState(e),o=n[0],i=n[1],s=r.useCallback((function(e){cancelAnimationFrame(t.current),t.current=requestAnimationFrame((function(){i(e)}))}),[]);return a.default((function(){cancelAnimationFrame(t.current)})),[o,s]}},2896:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(7046),r=n(1594),a=o.__importDefault(n(4286));t.default=function(e){var t=r.useRef(e);t.current=e,a.default((function(){return function(){return t.current()}}))}},4843:(e,t,n)=>{"use strict";var o=n(7046),r=n(1594),a=o.__importDefault(n(9768)),i=n(456);t.A=function(e){var t=void 0===e?{}:e,n=t.initialWidth,o=void 0===n?1/0:n,s=t.initialHeight,c=void 0===s?1/0:s,l=t.onChange,p=a.default({width:i.isBrowser?window.innerWidth:o,height:i.isBrowser?window.innerHeight:c}),u=p[0],d=p[1];return r.useEffect((function(){if(i.isBrowser){var e=function(){var e=window.innerWidth,t=window.innerHeight;d({width:e,height:t}),l&&l(e,t)};return i.on(window,"resize",e),function(){i.off(window,"resize",e)}}}),[]),u}},3947:function(e,t,n){"use strict";var o=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n},r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.BaseImage=void 0;const a=r(n(1594)),i=r(n(8443)),s=r(n(2627));function c(e){var{alt:t,className:n,fullWidth:r}=e,c=o(e,["alt","className","fullWidth"]);return a.default.createElement("img",Object.assign({"data-bit-id":"teambit.base-ui/elements/image",alt:t},c,{className:i.default(s.default.image,r&&s.default.fullWidth,n)}))}c.__bit_component={id:"teambit.base-ui/elements/image@1.0.0",homepage:"https://bit.dev/teambit/base-ui/elements/image",exported:!0},t.BaseImage=c},7014:function(e,t,n){"use strict";var o=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),r=this&&this.__exportStar||function(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||o(t,e,n)};Object.defineProperty(t,"__esModule",{value:!0}),r(n(3947),t)},3911:(e,t,n)=>{"use strict";n.r(t),n.d(t,{Image:()=>y});var o=n(1594),r=n.n(o),a=n(9685),i=n.n(a);n(8552);const s=ReactDom;var c=n(1084),l=n(4843),p=n(7046),u=function(e){return e+"ms"},d={getBoundingClientRect:function(){return{height:0,left:0,top:0,width:0}},style:{transform:null}},m=(0,o.memo)((function(e){var t=e.children,n=e.closeText,a=void 0===n?"Unzoom Image":n,i=e.onUnload,m=e.onLoad,f=e.overlayBgColorEnd,h=void 0===f?"rgba(255, 255, 255, 0.95)":f,y=e.overlayBgColorStart,v=void 0===y?"rgba(255, 255, 255, 0)":y,g=e.parentRef,w=e.portalEl,b=void 0===w?document.body:w,_=e.scrollableEl,x=void 0===_?window:_,O=e.transitionDuration,k=void 0===O?300:O,j=e.zoomMargin,N=void 0===j?0:j,P=e.zoomZindex,S=void 0===P?2147483647:P,E=(0,o.useRef)(null),C=(0,o.useState)(0)[1],T=(0,o.useState)(!1),I=T[0],M=T[1],D=(0,o.useState)(!1),z=D[0],B=D[1],A=(0,l.A)(),R=A.width,L=A.height,W=(0,o.useCallback)((function(e){e.preventDefault(),B(!0)}),[]),F=(0,o.useCallback)((function(e){"Escape"!==e.key&&27!==e.keyCode||(e.stopPropagation(),B(!0))}),[]),H=(0,o.useCallback)((function(){C((function(e){return e+1})),z||B(!0)}),[z]);(0,c.A)("keydown",F,document),(0,c.A)("scroll",H,x),(0,o.useEffect)((function(){M(!0),m(),E.current&&E.current.focus({preventScroll:!0})}),[m]),(0,o.useEffect)((function(){var e=z?setTimeout(i,k):null;return function(){e&&clearTimeout(e)}}),[z,i,k]);var U=g.current||d,X=U.getBoundingClientRect(),Y=X.height,G=X.left,Z=X.top,$=X.width,q=function(e){var t=e.isLoaded,n=e.isUnloading,o=e.overlayBgColorEnd,r=e.zoomZindex,a={backgroundColor:e.overlayBgColorStart,transitionDuration:u(e.transitionDuration),zIndex:r};return t&&!n&&(a.backgroundColor=o),a}({isLoaded:I,isUnloading:z,overlayBgColorEnd:h,overlayBgColorStart:v,transitionDuration:k,zoomZindex:S}),K=function(e){var t=e.height,n=e.innerHeight,o=e.innerWidth,r=e.isLoaded,a=e.isUnloading,i=e.left,s=e.originalTransform,c=e.top,l=e.transitionDuration,d=e.width,m=e.zoomMargin,f=u(l);if(!r||a){var h=(0,p.__spreadArrays)(["scale(1)","translate(0, 0)"],s?[s]:[]).join(" ");return{height:t,left:i,top:c,transform:h,WebkitTransform:h,transitionDuration:f,width:d}}var y=function(e){var t=e.zoomMargin,n=e.innerWidth/(e.width+t),o=e.innerHeight/(e.height+t);return Math.min(n,o)}({height:t,innerWidth:o,innerHeight:n,width:d,zoomMargin:m}),v=(o/2-(i+d/2))/y,g=(n/2-(c+t/2))/y,w=(0,p.__spreadArrays)(["scale("+y+")","translate("+v+"px, "+g+"px)"],s?[s]:[]).join(" ");return{height:t,left:i,top:c,transform:w,WebkitTransform:w,transitionDuration:f,width:d}}({height:Y,isLoaded:I,innerHeight:L,innerWidth:R,isUnloading:z,left:G,originalTransform:U.style.transform,top:Z,transitionDuration:k,width:$,zoomMargin:N});return(0,s.createPortal)(r().createElement("div",{"aria-modal":!0,"data-rmiz-overlay":!0,role:"dialog",style:q},r().createElement("div",{"data-rmiz-modal-content":!0,style:K},t),r().createElement("button",{"aria-label":a,"data-rmiz-btn-close":!0,onClick:W,ref:E})),b)}));const f=(0,o.memo)((function(e){var t=e.children,n=e.closeText,a=void 0===n?"Unzoom image":n,i=e.overlayBgColorEnd,s=void 0===i?"rgba(255, 255, 255, 0.95)":i,c=e.overlayBgColorStart,l=void 0===c?"rgba(255, 255, 255, 0)":c,p=e.portalEl,u=e.openText,d=void 0===u?"Zoom image":u,f=e.scrollableEl,h=e.transitionDuration,y=void 0===h?300:h,v=e.wrapElement,g=void 0===v?"div":v,w=e.wrapStyle,b=e.zoomMargin,_=void 0===b?0:b,x=e.zoomZindex,O=void 0===x?2147483647:x,k=(0,o.useState)(!1),j=k[0],N=k[1],P=(0,o.useState)(!1),S=P[0],E=P[1],C=(0,o.useRef)(null),T=(0,o.useRef)(null),I=(0,o.useCallback)((function(e){j||(e.preventDefault(),N(!0))}),[j]),M=(0,o.useCallback)((function(){E(!0)}),[]),D=(0,o.useCallback)((function(){N(!1),E(!1),T.current&&T.current.focus({preventScroll:!0})}),[]),z=j&&S?"hidden":"visible";return r().createElement(o.StrictMode,null,r().createElement(g,{"data-rmiz-wrap":z,ref:C,style:w},t,r().createElement("button",{"aria-label":d,"data-rmiz-btn-open":!0,onClick:I,ref:T}),"undefined"!=typeof window&&j&&r().createElement(m,{closeText:a,onLoad:M,onUnload:D,overlayBgColorEnd:s,overlayBgColorStart:l,parentRef:C,portalEl:p,scrollableEl:f,transitionDuration:y,zoomMargin:_,zoomZindex:O},t)))}));var h=n(7014);const y=e=>{var{center:t=!0,width:n,alt:o,src:a,className:s}=e,c=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}(e,["center","width","alt","src","className"]);return r().createElement("div",{style:{width:n||"100%"},className:i()(t&&"image_center__6-xCb",s)},r().createElement(f,null,r().createElement(h.BaseImage,Object.assign({fullWidth:!0,alt:o,src:a},c))))};y.__bit_component={id:"teambit.docs/ui/zoomable-image@1.95.0",homepage:"https://bit.dev/teambit/docs/ui/zoomable-image",exported:!0}},1612:(e,t,n)=>{"use strict";Object.defineProperty(t,"Ay",{enumerable:!0,get:function(){return o.default}});var o=r(n(7532));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.workspace/content/workspace-overview@1.95.0",homepage:"https://bit.dev/teambit/workspace/content/workspace-overview",exported:!0}},7532:(e,t,n)=>{"use strict";var o={id:"teambit.workspace/content/workspace-overview@1.95.0",homepage:"https://bit.dev/teambit/workspace/content/workspace-overview",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=v,u(n(1594));var r=n(5016),a=n(5682),i=n(3911),s=u(n(8800)),c=u(n(176)),l=u(n(6903)),p=["components"];function u(e){return e&&e.__esModule?e:{default:e}}function d(){return d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},d.apply(this,arguments)}function m(e,t){if(null==e)return{};var n,o,r=f(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function f(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}u.__bit_component=o,d.__bit_component=o,m.__bit_component=o,f.__bit_component=o;var h={},y="wrapper";function v(e){var t=e.components,n=m(e,p);return(0,r.mdx)(y,d({},h,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(a.MDXScopeProvider,{components:{Image:i.Image,wsScreenshot:s.default,looseComponents:c.default,multiRepo:l.default},mdxType:"MDXScopeProvider"},(0,r.mdx)("h1",null,"Workspace Overview"),(0,r.mdx)("p",null,"You can use the Bit workspace to either create, use or import components, make changes to them, and export these changes back.\nWorkspaces are tech-agnonstic and allow development of components of all kinds. They can be used by a single developer maintaining few components, exist on top of\nexisting repositories or shared as a Workspace component."),(0,r.mdx)(i.Image,{src:c.default,width:"85%",mdxType:"Image"}),(0,r.mdx)("p",null,"Get started and generate a demo workspace:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"bit new react demo\n")),(0,r.mdx)("h2",null,"Component development server"),(0,r.mdx)("p",null,"All components in your workspace are rendered and presented on a local development server. To start it, run the following command:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-sh"},"bit start\n")),(0,r.mdx)(i.Image,{src:s.default,width:"80%",mdxType:"Image"}),(0,r.mdx)("h2",null,"Simple, scalable dev experience"),(0,r.mdx)("p",null,"Keeping a similar dev-experience across workspaces allows you to jump in and out from codebases. When you don't need to deal with a per-project setup or learn the workflow commands/scripts you simply focus on the code."),(0,r.mdx)("p",null,"Simple dev experience means you can ",(0,r.mdx)("strong",{parentName:"p"},"easily onboard")," yourself to a workspace, thanks to:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("strong",{parentName:"li"},"Use the same commands")," - Regardless of the tooling and configs used in a workspace, you use the same commands (",(0,r.mdx)("inlineCode",{parentName:"li"},"compile"),", ",(0,r.mdx)("inlineCode",{parentName:"li"},"test"),", etc) and get similarly structured outputs."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("strong",{parentName:"li"},"Minimal configuration")," - Most of the configuration and setup is automated. No need to define per-component dependencies and no additional files needed to change a component's build pipeline."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("strong",{parentName:"li"},"Templates and standards")," - Create new components with templates and apply your formatting, linting, compilation and testing standards with a single policy."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("strong",{parentName:"li"},"Components are directories")," - Each ",(0,r.mdx)("a",{parentName:"li",href:"docs/workspace/component-directory"},"component in your workspace is a directory")," so relevant files, assets and tests available in a single place.")),(0,r.mdx)("p",null,"This makes it easy to scale the amount of components in a workspace, scale the amount of workspaces and even scale the amount of developers!"),(0,r.mdx)("h2",null,"Composition of components"),(0,r.mdx)("p",null,'The workspace is a container for the components. You get a monolithic-like developer experience and ability to refactor many components in a single place. In this "container" a component manages its own implementation, history and config (',(0,r.mdx)("a",{parentName:"p",href:"/docs/components/component-overview"},"read more"),").",(0,r.mdx)("br",{parentName:"p"}),"\n","This allows you to be flexible with how you structure a workspace and its contents. For example, you can ",(0,r.mdx)("a",{parentName:"p",href:"/docs/components/importing-components"},"import a component"),":"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"bit import teambit.community/ui/graph/bubble-graph\n")),(0,r.mdx)("p",null,"Bit adds the new component to the list of components in the workspace, pulls down the complete revision history, configs and dependencies. Now you can do local modifications, see the component when running ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit start"),", and maintain it as if you implemented it in your own workspace."),(0,r.mdx)("p",null,"In the same sense you can ",(0,r.mdx)("inlineCode",{parentName:"p"},"export")," and even ",(0,r.mdx)("inlineCode",{parentName:"p"},"eject")," any of your components from a workspace, and more it to another one. So if you started with building all components in the same place, you are not locked to that decision."),(0,r.mdx)(i.Image,{src:l.default,width:"85%",mdxType:"Image"}),(0,r.mdx)("h3",null,"Personalize your workspace"),(0,r.mdx)("p",null,"With composability in mind you can personalize your workspace on a per-feature basis or on the work you are currently focus on. You can start your flow by using ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit import")," and fetch all required components, starting to modify and work on them as needed.",(0,r.mdx)("br",{parentName:"p"}),"\n","When done, you can version and eject unneeded components. Instead of you working in the boundaries of your workspace, have the workspace fit to your current work."),(0,r.mdx)("h2",null,"Configuration-less"),(0,r.mdx)("p",null,"Regardless of the amount of components you have in your workspace, and how different they may be in their configuration, it only requires two files to manage components."),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"workspace.jsonc")," - Contains the configuration policy for all components in the workspace."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},".bitmap")," - Maps Bit components to their corresponding location (dir) in the workspace.")),(0,r.mdx)("p",null,"With both these files you track where each component is located and can apply configuration from a centralized location according to various ",(0,r.mdx)("a",{parentName:"p",href:"/docs/workspace/variants"},(0,r.mdx)("inlineCode",{parentName:"a"},"variant"))," rules. The workspace then calculates the configuration to apply on a per-component basis."),(0,r.mdx)("p",null,"The end result is a clean workspace where you have a minimal amount of configuration files, no matter how many components you have and their variants."),(0,r.mdx)("h2",null,"Any dev environment, any framework"),(0,r.mdx)("p",null,"Angular modules, React components, Node modules or any other type of components you might need are rendered with the same ",(0,r.mdx)("a",{parentName:"p",href:"docs/workspace/workspace-ui"},"workspace UI"),", compiled by the same ",(0,r.mdx)("inlineCode",{parentName:"p"},"compile")," command, etc.",(0,r.mdx)("br",{parentName:"p"}),"\n","You can maintain components of different types and frameworks in a Bit workspace, as each component has it's own configured ",(0,r.mdx)("a",{parentName:"p",href:"/docs/envs/envs-overview"},"Component Development Environment"),", which the workspace use to run various workflows."),(0,r.mdx)("h2",null,"Components in the workspace"),(0,r.mdx)("p",null,"A Bit Workspace manages many components. It aims to create symmetry between component naming and the directory structure."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-sh"},"├── cart\n│   ├── purchase-summary\n│   └── shopping-cart\n└── design\n    ├── ui\n    │   ├── button\n    │   └── card   // for example, the corresponding component ID: my-org.design/ui/button\n    └── theme\n        ├── color-pallet\n        └── theme-context\n")),(0,r.mdx)("div",{className:"admonition admonition-tip alert alert--success"},(0,r.mdx)("div",{parentName:"div",className:"admonition-heading"},(0,r.mdx)("h5",{parentName:"div"},(0,r.mdx)("span",{parentName:"h5",className:"admonition-icon"},(0,r.mdx)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,r.mdx)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"The structure is not rigid. You can sort components however you see fit.")),(0,r.mdx)("div",{parentName:"div",className:"admonition-content"})),(0,r.mdx)("p",null,"For each component Bit generates a link in the root ",(0,r.mdx)("inlineCode",{parentName:"p"},"node_modules")," directory according to the component ID. It contains the compiled output of a component."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"└── node_modules\n    └── @my-org\n        └── my-scope.ui.card\n")),(0,r.mdx)("p",null,"Use these modules when consuming one component in another, even in the same workspace."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import { Card } from '@my-org/my-scope.ui.card';\n")),(0,r.mdx)("div",{className:"admonition admonition-info alert alert--info"},(0,r.mdx)("div",{parentName:"div",className:"admonition-heading"},(0,r.mdx)("h5",{parentName:"div"},(0,r.mdx)("span",{parentName:"h5",className:"admonition-icon"},(0,r.mdx)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,r.mdx)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Absolute import statements decouple a component from the project's file structure.")),(0,r.mdx)("div",{parentName:"div",className:"admonition-content"})),(0,r.mdx)("h2",null,"Dependency Policy"),(0,r.mdx)("p",null,"The workspace dependency policy defines how external dependencies are installed and in which version. You may apply complex setups to have multiple versions of a dependency installed to fit different components. It allows you to determine where you want to adopt to a new version and which components should still use past versions."),(0,r.mdx)("p",null,"In your workspace you also have a ",(0,r.mdx)("a",{parentName:"p",href:"/docs/dependencies/dependencies-overview"},"dependency resolver")," that uses the policy to determine the type of dependency on a per-component basis.",(0,r.mdx)("br",{parentName:"p"}),"\n","Types of dependencies, like ",(0,r.mdx)("inlineCode",{parentName:"p"},"dependency")," and ",(0,r.mdx)("inlineCode",{parentName:"p"},"devDependency")," are contextual for each component. Meaning that according to where a component ",(0,r.mdx)("inlineCode",{parentName:"p"},"import"),"s a dependency, it will be set with the corresponding type. For example, a dependency only used in a test file will set as a ",(0,r.mdx)("inlineCode",{parentName:"p"},"devDependency")," for that specific component."),(0,r.mdx)("h2",null,"Performance"),(0,r.mdx)("p",null,"Bit workspace is optimized for quick and snappy feedback loop on code changes. It leaves the tough work of ensuring de-coupling and isolation to a more robust CI flow."),(0,r.mdx)("p",null,"To optimize performance even further any time you change a component Bit find which components are affected by the change. Bit then build your modified components and their affected dependents."),(0,r.mdx)("h2",null,"Integrate to existing codebases"),(0,r.mdx)("p",null,"Bit is a build tool that allows you to manage independent components. You may create a Bit workspace in a fresh directory or initialize one as part of an existing repository.",(0,r.mdx)("br",{parentName:"p"}),"\n","You can get started working on independent components alongside projects built with ",(0,r.mdx)("a",{parentName:"p",href:"https://angular.io/tutorial/toh-pt0"},"Angular"),", ",(0,r.mdx)("a",{parentName:"p",href:"https://create-react-app.dev"},"CRA")," and even ",(0,r.mdx)("a",{parentName:"p",href:"https://lerna.js.org"},"Lerna"),"."),(0,r.mdx)("p",null,(0,r.mdx)("inlineCode",{parentName:"p"},"cd")," to a pre-existing repository and run:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-bash"},"bit init\n")),(0,r.mdx)("p",null,"From here you may use any Bit command and flow to build independent components and integrate them into your application.")))}v.__bit_component=o,v.isMDXComponent=!0},3111:(e,t,n)=>{"use strict";var o={id:"teambit.workspace/workspace@1.0.507",homepage:"https://bit.cloud/teambit/workspace/workspace",exported:!0};function r(){const e=a(n(1594));return r=function(){return e},e}function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,r.__bit_component=o,a.__bit_component=o;const i=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/workspace.svg"}));i.__bit_component=o,t.Logo=i},2627:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});const o={fullWidth:"image_fullWidth__sELLz"}},176:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/b40d450de296e275550f.png"},6903:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/2f046646df38433e90d7.png"},8800:(e,t,n)=>{"use strict";e.exports=n.p+"static/images/cb67fb802479e2710016.png"},5016:e=>{"use strict";e.exports=MdxJsReact},1594:e=>{"use strict";e.exports=React},5682:e=>{"use strict";e.exports=TeambitMdxUiMdxScopeContext},7046:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__addDisposableResource:()=>z,__assign:()=>a,__asyncDelegator:()=>j,__asyncGenerator:()=>k,__asyncValues:()=>N,__await:()=>O,__awaiter:()=>f,__classPrivateFieldGet:()=>I,__classPrivateFieldIn:()=>D,__classPrivateFieldSet:()=>M,__createBinding:()=>y,__decorate:()=>s,__disposeResources:()=>A,__esDecorate:()=>l,__exportStar:()=>v,__extends:()=>r,__generator:()=>h,__importDefault:()=>T,__importStar:()=>C,__makeTemplateObject:()=>P,__metadata:()=>m,__param:()=>c,__propKey:()=>u,__read:()=>w,__rest:()=>i,__rewriteRelativeImportExtension:()=>R,__runInitializers:()=>p,__setFunctionName:()=>d,__spread:()=>b,__spreadArray:()=>x,__spreadArrays:()=>_,__values:()=>g,default:()=>L});var o=function(e,t){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},o(e,t)};function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var a=function(){return a=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},a.apply(this,arguments)};function i(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}function s(e,t,n,o){var r,a=arguments.length,i=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(i=(a<3?r(i):a>3?r(t,n,i):r(t,n))||i);return a>3&&i&&Object.defineProperty(t,n,i),i}function c(e,t){return function(n,o){t(n,o,e)}}function l(e,t,n,o,r,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,c=o.kind,l="getter"===c?"get":"setter"===c?"set":"value",p=!t&&e?o.static?e:e.prototype:null,u=t||(p?Object.getOwnPropertyDescriptor(p,o.name):{}),d=!1,m=n.length-1;m>=0;m--){var f={};for(var h in o)f[h]="access"===h?{}:o[h];for(var h in o.access)f.access[h]=o.access[h];f.addInitializer=function(e){if(d)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var y=(0,n[m])("accessor"===c?{get:u.get,set:u.set}:u[l],f);if("accessor"===c){if(void 0===y)continue;if(null===y||"object"!=typeof y)throw new TypeError("Object expected");(s=i(y.get))&&(u.get=s),(s=i(y.set))&&(u.set=s),(s=i(y.init))&&r.unshift(s)}else(s=i(y))&&("field"===c?r.unshift(s):u[l]=s)}p&&Object.defineProperty(p,o.name,u),d=!0}function p(e,t,n){for(var o=arguments.length>2,r=0;r<t.length;r++)n=o?t[r].call(e,n):t[r].call(e);return o?n:void 0}function u(e){return"symbol"==typeof e?e:"".concat(e)}function d(e,t,n){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:n?"".concat(n," ",t):t})}function m(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function f(e,t,n,o){return new(n||(n=Promise))((function(r,a){function i(e){try{c(o.next(e))}catch(e){a(e)}}function s(e){try{c(o.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,s)}c((o=o.apply(e,t||[])).next())}))}function h(e,t){var n,o,r,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=s(0),i.throw=s(1),i.return=s(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(s){return function(c){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,s[0]&&(a=0)),a;)try{if(n=1,o&&(r=2&s[0]?o.return:s[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,s[1])).done)return r;switch(o=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!((r=(r=a.trys).length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){a.label=s[1];break}if(6===s[0]&&a.label<r[1]){a.label=r[1],r=s;break}if(r&&a.label<r[2]){a.label=r[2],a.ops.push(s);break}r[2]&&a.ops.pop(),a.trys.pop();continue}s=t.call(e,a)}catch(e){s=[6,e],o=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}}var y=Object.create?function(e,t,n,o){void 0===o&&(o=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,o,r)}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]};function v(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||y(t,e,n)}function g(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],o=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function w(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,a=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(o=a.next()).done;)i.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=a.return)&&n.call(a)}finally{if(r)throw r.error}}return i}function b(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(w(arguments[t]));return e}function _(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var o=Array(e),r=0;for(t=0;t<n;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,r++)o[r]=a[i];return o}function x(e,t,n){if(n||2===arguments.length)for(var o,r=0,a=t.length;r<a;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}function O(e){return this instanceof O?(this.v=e,this):new O(e)}function k(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var o,r=n.apply(e,t||[]),a=[];return o=Object.create(("function"==typeof AsyncIterator?AsyncIterator:Object).prototype),i("next"),i("throw"),i("return",(function(e){return function(t){return Promise.resolve(t).then(e,l)}})),o[Symbol.asyncIterator]=function(){return this},o;function i(e,t){r[e]&&(o[e]=function(t){return new Promise((function(n,o){a.push([e,t,n,o])>1||s(e,t)}))},t&&(o[e]=t(o[e])))}function s(e,t){try{(n=r[e](t)).value instanceof O?Promise.resolve(n.value.v).then(c,l):p(a[0][2],n)}catch(e){p(a[0][3],e)}var n}function c(e){s("next",e)}function l(e){s("throw",e)}function p(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function j(e){var t,n;return t={},o("next"),o("throw",(function(e){throw e})),o("return"),t[Symbol.iterator]=function(){return this},t;function o(o,r){t[o]=e[o]?function(t){return(n=!n)?{value:O(e[o](t)),done:!1}:r?r(t):t}:r}}function N(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=g(e),t={},o("next"),o("throw"),o("return"),t[Symbol.asyncIterator]=function(){return this},t);function o(n){t[n]=e[n]&&function(t){return new Promise((function(o,r){!function(e,t,n,o){Promise.resolve(o).then((function(t){e({value:t,done:n})}),t)}(o,r,(t=e[n](t)).done,t.value)}))}}}function P(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var S=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},E=function(e){return E=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n);return t},E(e)};function C(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n=E(e),o=0;o<n.length;o++)"default"!==n[o]&&y(t,e,n[o]);return S(t,e),t}function T(e){return e&&e.__esModule?e:{default:e}}function I(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function M(e,t,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?r.call(e,n):r?r.value=n:t.set(e,n),n}function D(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function z(e,t,n){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var o,r;if(n){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");o=t[Symbol.asyncDispose]}if(void 0===o){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");o=t[Symbol.dispose],n&&(r=o)}if("function"!=typeof o)throw new TypeError("Object not disposable.");r&&(o=function(){try{r.call(this)}catch(e){return Promise.reject(e)}}),e.stack.push({value:t,dispose:o,async:n})}else n&&e.stack.push({async:!0});return t}var B="function"==typeof SuppressedError?SuppressedError:function(e,t,n){var o=new Error(n);return o.name="SuppressedError",o.error=e,o.suppressed=t,o};function A(e){function t(t){e.error=e.hasError?new B(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}var n,o=0;return function r(){for(;n=e.stack.pop();)try{if(!n.async&&1===o)return o=0,e.stack.push(n),Promise.resolve().then(r);if(n.dispose){var a=n.dispose.call(n.value);if(n.async)return o|=2,Promise.resolve(a).then(r,(function(e){return t(e),r()}))}else o|=1}catch(e){t(e)}if(1===o)return e.hasError?Promise.reject(e.error):Promise.resolve();if(e.hasError)throw e.error}()}function R(e,t){return"string"==typeof e&&/^\.\.?\//.test(e)?e.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i,(function(e,n,o,r,a){return n?t?".jsx":".js":!o||r&&a?o+r+"."+a.toLowerCase()+"js":e})):e}const L={__extends:r,__assign:a,__rest:i,__decorate:s,__param:c,__esDecorate:l,__runInitializers:p,__propKey:u,__setFunctionName:d,__metadata:m,__awaiter:f,__generator:h,__createBinding:y,__exportStar:v,__values:g,__read:w,__spread:b,__spreadArrays:_,__spreadArray:x,__await:O,__asyncGenerator:k,__asyncDelegator:j,__asyncValues:N,__makeTemplateObject:P,__importStar:C,__importDefault:T,__classPrivateFieldGet:I,__classPrivateFieldSet:M,__classPrivateFieldIn:D,__addDisposableResource:z,__disposeResources:A,__rewriteRelativeImportExtension:R}}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var a=t[o]={exports:{}};return e[o].call(a.exports,a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var o=t.getElementsByTagName("script");if(o.length)for(var r=o.length-1;r>-1&&(!e||!/^http(s?):/.test(e));)e=o[r--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})();var o={};return(()=>{"use strict";n.r(o),n.d(o,{compositions:()=>d,compositions_metadata:()=>f,overview:()=>m});var e={};n.r(e),n.d(e,{default:()=>u});var t=n(3111),r=(n(1594),n(5016)),a=n(5682),i=n(1612),s=["components"];function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},c.apply(null,arguments)}var l={},p="wrapper";function u(e){var t=e.components,n=function(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n={};for(var o in e)if({}.hasOwnProperty.call(e,o)){if(t.includes(o))continue;n[o]=e[o]}return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(e,s);return(0,r.mdx)(p,c({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(a.MDXScopeProvider,{components:{WorkspaceOverview:i.Ay},mdxType:"MDXScopeProvider"},(0,r.mdx)(i.Ay,{mdxType:"WorkspaceOverview"})))}u.isMDXComponent=!0;const d=[t],m=[e],f={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),o})()));