@teambit/workspace 1.0.482 → 1.0.483

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.482" tests="0" failures="0" errors="0" skipped="0"/>
+  <testsuite name="teambit.workspace/workspace@1.0.483" 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)})}}()},1486:(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},7364:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(1594);t.default=function(e){o.useEffect(e,[])}},7654:(e,t,n)=>{"use strict";var o=n(1594),r=n(1486),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)])}},2818:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(7046),r=n(1594),a=o.__importDefault(n(7542));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]}},7542:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(7046),r=n(1594),a=o.__importDefault(n(7364));t.default=function(e){var t=r.useRef(e);t.current=e,a.default((function(){return function(){return t.current()}}))}},9801:(e,t,n)=>{"use strict";var o=n(7046),r=n(1594),a=o.__importDefault(n(2818)),i=n(1486);t.A=function(e,t){void 0===e&&(e=1/0),void 0===t&&(t=1/0);var n=a.default({width:i.isBrowser?window.innerWidth:e,height:i.isBrowser?window.innerHeight:t}),o=n[0],s=n[1];return r.useEffect((function(){if(i.isBrowser){var e=function(){s({width:window.innerWidth,height:window.innerHeight})};return i.on(window,"resize",e),function(){i.off(window,"resize",e)}}}),[]),o}},8888: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(4749));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},4437: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(8888),t)},6614:(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(7654),l=n(9801),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(4437);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}},1593:(e,t,n)=>{"use strict";Object.defineProperty(t,"Ay",{enumerable:!0,get:function(){return o.default}});var o=r(n(6475));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}},6475:(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(6614),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},232:(e,t,n)=>{"use strict";var o={id:"teambit.workspace/workspace@1.0.482",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},4749:(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(232),r=(n(1594),n(5016)),a=n(5682),i=n(1593),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)})}}()},1486:(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},7364:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(1594);t.default=function(e){o.useEffect(e,[])}},7654:(e,t,n)=>{"use strict";var o=n(1594),r=n(1486),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)])}},2818:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(7046),r=n(1594),a=o.__importDefault(n(7542));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]}},7542:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(7046),r=n(1594),a=o.__importDefault(n(7364));t.default=function(e){var t=r.useRef(e);t.current=e,a.default((function(){return function(){return t.current()}}))}},9801:(e,t,n)=>{"use strict";var o=n(7046),r=n(1594),a=o.__importDefault(n(2818)),i=n(1486);t.A=function(e,t){void 0===e&&(e=1/0),void 0===t&&(t=1/0);var n=a.default({width:i.isBrowser?window.innerWidth:e,height:i.isBrowser?window.innerHeight:t}),o=n[0],s=n[1];return r.useEffect((function(){if(i.isBrowser){var e=function(){s({width:window.innerWidth,height:window.innerHeight})};return i.on(window,"resize",e),function(){i.off(window,"resize",e)}}}),[]),o}},8888: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(4749));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},4437: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(8888),t)},6614:(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(7654),l=n(9801),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(4437);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}},1593:(e,t,n)=>{"use strict";Object.defineProperty(t,"Ay",{enumerable:!0,get:function(){return o.default}});var o=r(n(6475));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}},6475:(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(6614),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},9373:(e,t,n)=>{"use strict";var o={id:"teambit.workspace/workspace@1.0.483",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},4749:(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(9373),r=(n(1594),n(5016)),a=n(5682),i=n(1593),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})()));

package/artifacts/schema.json

@@ -10482,7 +10482,7 @@
                   "_legacy": {
                     "scope": "teambit.workspace",
                     "name": "workspace",
-                    "version": "1.0.482"
+                    "version": "1.0.483"
                   },
                   "_scope": "teambit.workspace"
                 }
@@ -10693,7 +10693,7 @@
                   "_legacy": {
                     "scope": "teambit.workspace",
                     "name": "workspace",
-                    "version": "1.0.482"
+                    "version": "1.0.483"
                   },
                   "_scope": "teambit.workspace"
                 }
@@ -11136,7 +11136,7 @@
                 "_legacy": {
                   "scope": "teambit.workspace",
                   "name": "workspace",
-                  "version": "1.0.482"
+                  "version": "1.0.483"
                 },
                 "_scope": "teambit.workspace"
               }
@@ -11291,7 +11291,7 @@
                 "_legacy": {
                   "scope": "teambit.workspace",
                   "name": "workspace",
-                  "version": "1.0.482"
+                  "version": "1.0.483"
                 },
                 "_scope": "teambit.workspace"
               }
@@ -11426,7 +11426,7 @@
                 "_legacy": {
                   "scope": "teambit.workspace",
                   "name": "workspace",
-                  "version": "1.0.482"
+                  "version": "1.0.483"
                 },
                 "_scope": "teambit.workspace"
               }
@@ -13440,7 +13440,7 @@
                   "_legacy": {
                     "scope": "teambit.workspace",
                     "name": "workspace",
-                    "version": "1.0.482"
+                    "version": "1.0.483"
                   },
                   "_scope": "teambit.workspace"
                 }
@@ -13784,7 +13784,7 @@
                   "_legacy": {
                     "scope": "teambit.workspace",
                     "name": "workspace",
-                    "version": "1.0.482"
+                    "version": "1.0.483"
                   },
                   "_scope": "teambit.workspace"
                 }
@@ -26298,7 +26298,7 @@
                   "_legacy": {
                     "scope": "teambit.workspace",
                     "name": "workspace",
-                    "version": "1.0.482"
+                    "version": "1.0.483"
                   },
                   "_scope": "teambit.workspace"
                 }
@@ -27821,7 +27821,7 @@
                   "_legacy": {
                     "scope": "teambit.workspace",
                     "name": "workspace",
-                    "version": "1.0.482"
+                    "version": "1.0.483"
                   },
                   "_scope": "teambit.workspace"
                 }
@@ -28064,7 +28064,7 @@
                   "_legacy": {
                     "scope": "teambit.workspace",
                     "name": "workspace",
-                    "version": "1.0.482"
+                    "version": "1.0.483"
                   },
                   "_scope": "teambit.workspace"
                 }
@@ -28287,7 +28287,7 @@
                   "_legacy": {
                     "scope": "teambit.workspace",
                     "name": "workspace",
-                    "version": "1.0.482"
+                    "version": "1.0.483"
                   },
                   "_scope": "teambit.workspace"
                 }
@@ -31200,7 +31200,7 @@
                   "_legacy": {
                     "scope": "teambit.workspace",
                     "name": "workspace",
-                    "version": "1.0.482"
+                    "version": "1.0.483"
                   },
                   "_scope": "teambit.workspace"
                 }
@@ -33110,7 +33110,7 @@
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "1.0.482"
+    "version": "1.0.483"
   },
   "taggedModuleExports": []
 }

package/dist/{preview-1733069682179.js → preview-1733196057323.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_workspace@1.0.482/dist/workspace.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_workspace@1.0.482/dist/workspace.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_workspace@1.0.483/dist/workspace.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_workspace@1.0.483/dist/workspace.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/dist/ui/index.d.ts

@@ -1 +1,2 @@
 export { Workspace } from './workspace';
+export { WorkspaceMenu } from './workspace/workspace-menu';

package/dist/ui/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Workspace", {
     return _workspace().Workspace;
   }
 });
+Object.defineProperty(exports, "WorkspaceMenu", {
+  enumerable: true,
+  get: function () {
+    return _workspaceMenu().WorkspaceMenu;
+  }
+});
 function _workspace() {
   const data = require("./workspace");
   _workspace = function () {
@@ -16,5 +22,12 @@ function _workspace() {
   };
   return data;
 }
+function _workspaceMenu() {
+  const data = require("./workspace/workspace-menu");
+  _workspaceMenu = function () {
+    return data;
+  };
+  return data;
+}
 
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_workspace","data","require"],"sources":["index.ts"],"sourcesContent":["export { Workspace } from './workspace';\n"],"mappings":";;;;;;;;;;;AAAA,SAAAA,WAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,UAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["_workspace","data","require","_workspaceMenu"],"sources":["index.ts"],"sourcesContent":["export { Workspace } from './workspace';\nexport { WorkspaceMenu } from './workspace/workspace-menu';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAAA,WAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,UAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,eAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,cAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA","ignoreList":[]}

package/dist/ui/workspace/workspace-menu.d.ts

@@ -0,0 +1,2 @@
+import { MenuProps } from '@teambit/ui-foundation.ui.menu';
+export declare const WorkspaceMenu: ({ menuSlot, widgetSlot, menuItemSlot, className }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/workspace/workspace-menu.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WorkspaceMenu = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _uiFoundationUi() {
+  const data = require("@teambit/ui-foundation.ui.menu");
+  _uiFoundationUi = function () {
+    return data;
+  };
+  return data;
+}
+function _workspaceUi() {
+  const data = require("@teambit/workspace.ui.use-workspace-mode");
+  _workspaceUi = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const WorkspaceMenu = ({
+  menuSlot,
+  widgetSlot,
+  menuItemSlot,
+  className
+}) => {
+  const {
+    isMinimal
+  } = (0, _workspaceUi().useWorkspaceMode)();
+  return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().Menu, {
+    menuSlot: menuSlot,
+    widgetSlot: widgetSlot,
+    menuItemSlot: isMinimal ? undefined : menuItemSlot,
+    className: className
+  });
+};
+exports.WorkspaceMenu = WorkspaceMenu;
+
+//# sourceMappingURL=workspace-menu.js.map

package/dist/ui/workspace/workspace-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_uiFoundationUi","_workspaceUi","e","__esModule","default","WorkspaceMenu","menuSlot","widgetSlot","menuItemSlot","className","isMinimal","useWorkspaceMode","createElement","Menu","undefined","exports"],"sources":["workspace-menu.tsx"],"sourcesContent":["import React from 'react';\nimport { Menu, MenuProps } from '@teambit/ui-foundation.ui.menu';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\n\nexport const WorkspaceMenu = ({ menuSlot, widgetSlot, menuItemSlot, className }: MenuProps) => {\n  const { isMinimal } = useWorkspaceMode();\n\n  return (\n    <Menu\n      menuSlot={menuSlot}\n      widgetSlot={widgetSlot}\n      menuItemSlot={isMinimal ? undefined : menuItemSlot}\n      className={className}\n    />\n  );\n};\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,gBAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,eAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,aAAA;EAAA,MAAAJ,IAAA,GAAAE,OAAA;EAAAE,YAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA4E,SAAAC,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAErE,MAAMG,aAAa,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC,YAAY;EAAEC;AAAqB,CAAC,KAAK;EAC7F,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,+BAAgB,EAAC,CAAC;EAExC,oBACEf,MAAA,GAAAQ,OAAA,CAAAQ,aAAA,CAACZ,eAAA,GAAAa,IAAI;IACHP,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA,UAAW;IACvBC,YAAY,EAAEE,SAAS,GAAGI,SAAS,GAAGN,YAAa;IACnDC,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAACM,OAAA,CAAAV,aAAA,GAAAA,aAAA","ignoreList":[]}

package/dist/ui/workspace/workspace-overview/workspace-overview.d.ts

@@ -1,6 +1,7 @@
 import { ComponentModel } from '@teambit/component';
 import type { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
 export declare function WorkspaceOverview(): import("react/jsx-runtime").JSX.Element;
-export declare function useCardPlugins({ compModelsById, }: {
+export declare function useCardPlugins({ compModelsById, showPreview, }: {
     compModelsById: Map<string, ComponentModel>;
+    showPreview?: boolean;
 }): ComponentCardPluginType<PluginProps>[];

package/dist/ui/workspace/workspace-overview/workspace-overview.js

@@ -75,6 +75,13 @@ function _workspaceUi2() {
   };
   return data;
 }
+function _workspaceUi3() {
+  const data = require("@teambit/workspace.ui.use-workspace-mode");
+  _workspaceUi3 = function () {
+    return data;
+  };
+  return data;
+}
 function _workspaceContext() {
   const data = require("../workspace-context");
   _workspaceContext = function () {
@@ -101,6 +108,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function WorkspaceOverview() {
   const workspace = (0, _react().useContext)(_workspaceContext().WorkspaceContext);
+  const {
+    isMinimal
+  } = (0, _workspaceUi3().useWorkspaceMode)();
   const compModelsById = new Map(workspace.components.map(comp => [comp.id.toString(), comp]));
   const {
     components,
@@ -113,7 +123,8 @@ function WorkspaceOverview() {
   } = (0, _cloudHooks().useCloudScopes)(uniqueScopesArr);
   const cloudScopesById = new Map(cloudScopes.map(scope => [scope.id.toString(), scope]));
   const plugins = useCardPlugins({
-    compModelsById
+    compModelsById,
+    showPreview: isMinimal
   });
   if (!components || components.length === 0) return /*#__PURE__*/_react().default.createElement(_workspaceUi().EmptyWorkspace, {
     name: workspace.name
@@ -147,12 +158,14 @@ function WorkspaceOverview() {
       componentDescriptor: componentDescriptor,
       component: component,
       plugins: plugins,
-      scope: scope
+      scope: scope,
+      shouldShowPreviewState: isMinimal
     });
   })));
 }
 function useCardPlugins({
-  compModelsById
+  compModelsById,
+  showPreview
 }) {
   const plugins = _react().default.useMemo(() => [{
     preview: function Preview({
@@ -164,7 +177,7 @@ function useCardPlugins({
       return /*#__PURE__*/_react().default.createElement(_previewUi().PreviewPlaceholder, {
         componentDescriptor: component,
         component: compModel,
-        shouldShowPreview: shouldShowPreview
+        shouldShowPreview: showPreview || shouldShowPreview
       });
     }
   }, {

package/dist/ui/workspace/workspace-overview/workspace-overview.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_explorerUiGallery","_workspaceUi","_previewUi","_designUi","_componentId","_cloudHooks","_scopes","_lodash","_workspaceUi2","_workspaceContext","_workspaceOverviewModule","_interopRequireDefault","_linkPlugin","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","WorkspaceOverview","workspace","useContext","WorkspaceContext","compModelsById","Map","components","map","comp","id","toString","componentDescriptors","uniqueScopes","Set","c","scope","uniqueScopesArr","Array","from","cloudScopes","useCloudScopes","cloudScopesById","plugins","useCardPlugins","length","createElement","EmptyWorkspace","name","compDescriptorById","componentsWithDescriptorAndScope","compact","component","deprecation","isDeprecate","componentDescriptor","cloudScope","ScopeID","isValid","fromString","undefined","className","styles","container","ComponentGrid","cardGrid","WorkspaceComponentCard","key","React","useMemo","preview","Preview","shouldShowPreview","compModel","PreviewPlaceholder","previewBottomRight","PreviewBottomRight","env","envComponentId","ComponentID","rightPreviewPlugins","badge","Tooltip","delay","content","src","icon","envIcon","LinkPlugin","size"],"sources":["workspace-overview.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';\nimport { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';\nimport { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { ComponentID } from '@teambit/component-id';\nimport { ComponentModel } from '@teambit/component';\nimport { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';\nimport { ScopeID } from '@teambit/scopes.scope-id';\nimport { compact } from 'lodash';\nimport { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';\nimport type { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';\nimport { WorkspaceContext } from '../workspace-context';\nimport styles from './workspace-overview.module.scss';\nimport { LinkPlugin } from './link-plugin';\n\nexport function WorkspaceOverview() {\n  const workspace = useContext(WorkspaceContext);\n  const compModelsById = new Map(workspace.components.map((comp) => [comp.id.toString(), comp]));\n  const { components, componentDescriptors } = workspace;\n  const uniqueScopes = new Set(components.map((c) => c.id.scope));\n  const uniqueScopesArr = Array.from(uniqueScopes);\n  const { cloudScopes = [] } = useCloudScopes(uniqueScopesArr);\n  const cloudScopesById = new Map(cloudScopes.map((scope) => [scope.id.toString(), scope]));\n\n  const plugins = useCardPlugins({ compModelsById });\n\n  if (!components || components.length === 0) return <EmptyWorkspace name={workspace.name} />;\n\n  const compDescriptorById = new Map(componentDescriptors.map((comp) => [comp.id.toString(), comp]));\n  const componentsWithDescriptorAndScope = compact(\n    components.map((component) => {\n      if (component.deprecation?.isDeprecate) return null;\n      const componentDescriptor = compDescriptorById.get(component.id.toString());\n      if (!componentDescriptor) return null;\n      const cloudScope = cloudScopesById.get(component.id.scope);\n      const scope =\n        cloudScope ||\n        (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||\n        undefined;\n\n      return { component, componentDescriptor, scope };\n    })\n  );\n\n  return (\n    <div className={styles.container}>\n      <ComponentGrid className={styles.cardGrid}>\n        {componentsWithDescriptorAndScope.map(({ component, componentDescriptor, scope }) => {\n          return (\n            <WorkspaceComponentCard\n              key={component.id.toString()}\n              componentDescriptor={componentDescriptor}\n              component={component}\n              plugins={plugins}\n              scope={scope}\n            />\n          );\n        })}\n      </ComponentGrid>\n    </div>\n  );\n}\n\nexport function useCardPlugins({\n  compModelsById,\n}: {\n  compModelsById: Map<string, ComponentModel>;\n}): ComponentCardPluginType<PluginProps>[] {\n  const plugins = React.useMemo(\n    () => [\n      {\n        preview: function Preview({ component, shouldShowPreview }) {\n          const compModel = compModelsById.get(component.id.toString());\n          if (!compModel) return null;\n          return (\n            <PreviewPlaceholder\n              componentDescriptor={component}\n              component={compModel}\n              shouldShowPreview={shouldShowPreview}\n            />\n          );\n        },\n      },\n      {\n        previewBottomRight: function PreviewBottomRight({ component }) {\n          const env = component.get('teambit.envs/envs');\n          const envComponentId = env?.id ? ComponentID.fromString(env?.id) : undefined;\n\n          return (\n            <div className={styles.rightPreviewPlugins}>\n              <div className={styles.badge}>\n                <Tooltip delay={300} content={envComponentId?.name}>\n                  <img src={env?.icon} className={styles.envIcon} />\n                </Tooltip>\n              </div>\n            </div>\n          );\n        },\n      },\n      new LinkPlugin(),\n    ],\n    [compModelsById.size]\n  );\n\n  return plugins;\n}\n"],"mappings":";;;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,uBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,mBAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,kBAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,aAAA;EAAA,MAAAJ,IAAA,GAAAE,OAAA;EAAAE,YAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,WAAA;EAAA,MAAAL,IAAA,GAAAE,OAAA;EAAAG,UAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAM,UAAA;EAAA,MAAAN,IAAA,GAAAE,OAAA;EAAAI,SAAA,YAAAA,CAAA;IAAA,OAAAN,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAO,aAAA;EAAA,MAAAP,IAAA,GAAAE,OAAA;EAAAK,YAAA,YAAAA,CAAA;IAAA,OAAAP,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAQ,YAAA;EAAA,MAAAR,IAAA,GAAAE,OAAA;EAAAM,WAAA,YAAAA,CAAA;IAAA,OAAAR,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAS,QAAA;EAAA,MAAAT,IAAA,GAAAE,OAAA;EAAAO,OAAA,YAAAA,CAAA;IAAA,OAAAT,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAU,QAAA;EAAA,MAAAV,IAAA,GAAAE,OAAA;EAAAQ,OAAA,YAAAA,CAAA;IAAA,OAAAV,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAW,cAAA;EAAA,MAAAX,IAAA,GAAAE,OAAA;EAAAS,aAAA,YAAAA,CAAA;IAAA,OAAAX,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAY,kBAAA;EAAA,MAAAZ,IAAA,GAAAE,OAAA;EAAAU,iBAAA,YAAAA,CAAA;IAAA,OAAAZ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAa,yBAAA;EAAA,MAAAb,IAAA,GAAAc,sBAAA,CAAAZ,OAAA;EAAAW,wBAAA,YAAAA,CAAA;IAAA,OAAAb,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAe,YAAA;EAAA,MAAAf,IAAA,GAAAE,OAAA;EAAAa,WAAA,YAAAA,CAAA;IAAA,OAAAf,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA2C,SAAAc,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAEpC,SAASW,iBAAiBA,CAAA,EAAG;EAClC,MAAMC,SAAS,GAAG,IAAAC,mBAAU,EAACC,oCAAgB,CAAC;EAC9C,MAAMC,cAAc,GAAG,IAAIC,GAAG,CAACJ,SAAS,CAACK,UAAU,CAACC,GAAG,CAAEC,IAAI,IAAK,CAACA,IAAI,CAACC,EAAE,CAACC,QAAQ,CAAC,CAAC,EAAEF,IAAI,CAAC,CAAC,CAAC;EAC9F,MAAM;IAAEF,UAAU;IAAEK;EAAqB,CAAC,GAAGV,SAAS;EACtD,MAAMW,YAAY,GAAG,IAAIC,GAAG,CAACP,UAAU,CAACC,GAAG,CAAEO,CAAC,IAAKA,CAAC,CAACL,EAAE,CAACM,KAAK,CAAC,CAAC;EAC/D,MAAMC,eAAe,GAAGC,KAAK,CAACC,IAAI,CAACN,YAAY,CAAC;EAChD,MAAM;IAAEO,WAAW,GAAG;EAAG,CAAC,GAAG,IAAAC,4BAAc,EAACJ,eAAe,CAAC;EAC5D,MAAMK,eAAe,GAAG,IAAIhB,GAAG,CAACc,WAAW,CAACZ,GAAG,CAAEQ,KAAK,IAAK,CAACA,KAAK,CAACN,EAAE,CAACC,QAAQ,CAAC,CAAC,EAAEK,KAAK,CAAC,CAAC,CAAC;EAEzF,MAAMO,OAAO,GAAGC,cAAc,CAAC;IAAEnB;EAAe,CAAC,CAAC;EAElD,IAAI,CAACE,UAAU,IAAIA,UAAU,CAACkB,MAAM,KAAK,CAAC,EAAE,oBAAO7D,MAAA,GAAAmB,OAAA,CAAA2C,aAAA,CAACzD,YAAA,GAAA0D,cAAc;IAACC,IAAI,EAAE1B,SAAS,CAAC0B;EAAK,CAAE,CAAC;EAE3F,MAAMC,kBAAkB,GAAG,IAAIvB,GAAG,CAACM,oBAAoB,CAACJ,GAAG,CAAEC,IAAI,IAAK,CAACA,IAAI,CAACC,EAAE,CAACC,QAAQ,CAAC,CAAC,EAAEF,IAAI,CAAC,CAAC,CAAC;EAClG,MAAMqB,gCAAgC,GAAG,IAAAC,iBAAO,EAC9CxB,UAAU,CAACC,GAAG,CAAEwB,SAAS,IAAK;IAC5B,IAAIA,SAAS,CAACC,WAAW,EAAEC,WAAW,EAAE,OAAO,IAAI;IACnD,MAAMC,mBAAmB,GAAGN,kBAAkB,CAACxC,GAAG,CAAC2C,SAAS,CAACtB,EAAE,CAACC,QAAQ,CAAC,CAAC,CAAC;IAC3E,IAAI,CAACwB,mBAAmB,EAAE,OAAO,IAAI;IACrC,MAAMC,UAAU,GAAGd,eAAe,CAACjC,GAAG,CAAC2C,SAAS,CAACtB,EAAE,CAACM,KAAK,CAAC;IAC1D,MAAMA,KAAK,GACToB,UAAU,IACTC,iBAAO,CAACC,OAAO,CAACN,SAAS,CAACtB,EAAE,CAACM,KAAK,CAAC,IAAI;MAAEN,EAAE,EAAE2B,iBAAO,CAACE,UAAU,CAACP,SAAS,CAACtB,EAAE,CAACM,KAAK;IAAE,CAAE,IACvFwB,SAAS;IAEX,OAAO;MAAER,SAAS;MAAEG,mBAAmB;MAAEnB;IAAM,CAAC;EAClD,CAAC,CACH,CAAC;EAED,oBACEpD,MAAA,GAAAmB,OAAA,CAAA2C,aAAA;IAAKe,SAAS,EAAEC,kCAAM,CAACC;EAAU,gBAC/B/E,MAAA,GAAAmB,OAAA,CAAA2C,aAAA,CAAC1D,kBAAA,GAAA4E,aAAa;IAACH,SAAS,EAAEC,kCAAM,CAACG;EAAS,GACvCf,gCAAgC,CAACtB,GAAG,CAAC,CAAC;IAAEwB,SAAS;IAAEG,mBAAmB;IAAEnB;EAAM,CAAC,KAAK;IACnF,oBACEpD,MAAA,GAAAmB,OAAA,CAAA2C,aAAA,CAAClD,aAAA,GAAAsE,sBAAsB;MACrBC,GAAG,EAAEf,SAAS,CAACtB,EAAE,CAACC,QAAQ,CAAC,CAAE;MAC7BwB,mBAAmB,EAAEA,mBAAoB;MACzCH,SAAS,EAAEA,SAAU;MACrBT,OAAO,EAAEA,OAAQ;MACjBP,KAAK,EAAEA;IAAM,CACd,CAAC;EAEN,CAAC,CACY,CACZ,CAAC;AAEV;AAEO,SAASQ,cAAcA,CAAC;EAC7BnB;AAGF,CAAC,EAA0C;EACzC,MAAMkB,OAAO,GAAGyB,gBAAK,CAACC,OAAO,CAC3B,MAAM,CACJ;IACEC,OAAO,EAAE,SAASC,OAAOA,CAAC;MAAEnB,SAAS;MAAEoB;IAAkB,CAAC,EAAE;MAC1D,MAAMC,SAAS,GAAGhD,cAAc,CAAChB,GAAG,CAAC2C,SAAS,CAACtB,EAAE,CAACC,QAAQ,CAAC,CAAC,CAAC;MAC7D,IAAI,CAAC0C,SAAS,EAAE,OAAO,IAAI;MAC3B,oBACEzF,MAAA,GAAAmB,OAAA,CAAA2C,aAAA,CAACxD,UAAA,GAAAoF,kBAAkB;QACjBnB,mBAAmB,EAAEH,SAAU;QAC/BA,SAAS,EAAEqB,SAAU;QACrBD,iBAAiB,EAAEA;MAAkB,CACtC,CAAC;IAEN;EACF,CAAC,EACD;IACEG,kBAAkB,EAAE,SAASC,kBAAkBA,CAAC;MAAExB;IAAU,CAAC,EAAE;MAC7D,MAAMyB,GAAG,GAAGzB,SAAS,CAAC3C,GAAG,CAAC,mBAAmB,CAAC;MAC9C,MAAMqE,cAAc,GAAGD,GAAG,EAAE/C,EAAE,GAAGiD,0BAAW,CAACpB,UAAU,CAACkB,GAAG,EAAE/C,EAAE,CAAC,GAAG8B,SAAS;MAE5E,oBACE5E,MAAA,GAAAmB,OAAA,CAAA2C,aAAA;QAAKe,SAAS,EAAEC,kCAAM,CAACkB;MAAoB,gBACzChG,MAAA,GAAAmB,OAAA,CAAA2C,aAAA;QAAKe,SAAS,EAAEC,kCAAM,CAACmB;MAAM,gBAC3BjG,MAAA,GAAAmB,OAAA,CAAA2C,aAAA,CAACvD,SAAA,GAAA2F,OAAO;QAACC,KAAK,EAAE,GAAI;QAACC,OAAO,EAAEN,cAAc,EAAE9B;MAAK,gBACjDhE,MAAA,GAAAmB,OAAA,CAAA2C,aAAA;QAAKuC,GAAG,EAAER,GAAG,EAAES,IAAK;QAACzB,SAAS,EAAEC,kCAAM,CAACyB;MAAQ,CAAE,CAC1C,CACN,CACF,CAAC;IAEV;EACF,CAAC,EACD,KAAIC,wBAAU,EAAC,CAAC,CACjB,EACD,CAAC/D,cAAc,CAACgE,IAAI,CACtB,CAAC;EAED,OAAO9C,OAAO;AAChB","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_explorerUiGallery","_workspaceUi","_previewUi","_designUi","_componentId","_cloudHooks","_scopes","_lodash","_workspaceUi2","_workspaceUi3","_workspaceContext","_workspaceOverviewModule","_interopRequireDefault","_linkPlugin","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","WorkspaceOverview","workspace","useContext","WorkspaceContext","isMinimal","useWorkspaceMode","compModelsById","Map","components","map","comp","id","toString","componentDescriptors","uniqueScopes","Set","c","scope","uniqueScopesArr","Array","from","cloudScopes","useCloudScopes","cloudScopesById","plugins","useCardPlugins","showPreview","length","createElement","EmptyWorkspace","name","compDescriptorById","componentsWithDescriptorAndScope","compact","component","deprecation","isDeprecate","componentDescriptor","cloudScope","ScopeID","isValid","fromString","undefined","className","styles","container","ComponentGrid","cardGrid","WorkspaceComponentCard","key","shouldShowPreviewState","React","useMemo","preview","Preview","shouldShowPreview","compModel","PreviewPlaceholder","previewBottomRight","PreviewBottomRight","env","envComponentId","ComponentID","rightPreviewPlugins","badge","Tooltip","delay","content","src","icon","envIcon","LinkPlugin","size"],"sources":["workspace-overview.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';\nimport { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';\nimport { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { ComponentID } from '@teambit/component-id';\nimport { ComponentModel } from '@teambit/component';\nimport { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';\nimport { ScopeID } from '@teambit/scopes.scope-id';\nimport { compact } from 'lodash';\nimport { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';\nimport type { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\nimport { WorkspaceContext } from '../workspace-context';\nimport styles from './workspace-overview.module.scss';\nimport { LinkPlugin } from './link-plugin';\n\nexport function WorkspaceOverview() {\n  const workspace = useContext(WorkspaceContext);\n  const { isMinimal } = useWorkspaceMode();\n  const compModelsById = new Map(workspace.components.map((comp) => [comp.id.toString(), comp]));\n  const { components, componentDescriptors } = workspace;\n  const uniqueScopes = new Set(components.map((c) => c.id.scope));\n  const uniqueScopesArr = Array.from(uniqueScopes);\n  const { cloudScopes = [] } = useCloudScopes(uniqueScopesArr);\n  const cloudScopesById = new Map(cloudScopes.map((scope) => [scope.id.toString(), scope]));\n\n  const plugins = useCardPlugins({ compModelsById, showPreview: isMinimal });\n\n  if (!components || components.length === 0) return <EmptyWorkspace name={workspace.name} />;\n\n  const compDescriptorById = new Map(componentDescriptors.map((comp) => [comp.id.toString(), comp]));\n  const componentsWithDescriptorAndScope = compact(\n    components.map((component) => {\n      if (component.deprecation?.isDeprecate) return null;\n      const componentDescriptor = compDescriptorById.get(component.id.toString());\n      if (!componentDescriptor) return null;\n      const cloudScope = cloudScopesById.get(component.id.scope);\n      const scope =\n        cloudScope ||\n        (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||\n        undefined;\n\n      return { component, componentDescriptor, scope };\n    })\n  );\n\n  return (\n    <div className={styles.container}>\n      <ComponentGrid className={styles.cardGrid}>\n        {componentsWithDescriptorAndScope.map(({ component, componentDescriptor, scope }) => {\n          return (\n            <WorkspaceComponentCard\n              key={component.id.toString()}\n              componentDescriptor={componentDescriptor}\n              component={component}\n              plugins={plugins}\n              scope={scope}\n              shouldShowPreviewState={isMinimal}\n            />\n          );\n        })}\n      </ComponentGrid>\n    </div>\n  );\n}\n\nexport function useCardPlugins({\n  compModelsById,\n  showPreview,\n}: {\n  compModelsById: Map<string, ComponentModel>;\n  showPreview?: boolean;\n}): ComponentCardPluginType<PluginProps>[] {\n  const plugins = React.useMemo(\n    () => [\n      {\n        preview: function Preview({ component, shouldShowPreview }) {\n          const compModel = compModelsById.get(component.id.toString());\n          if (!compModel) return null;\n          return (\n            <PreviewPlaceholder\n              componentDescriptor={component}\n              component={compModel}\n              shouldShowPreview={showPreview || shouldShowPreview}\n            />\n          );\n        },\n      },\n      {\n        previewBottomRight: function PreviewBottomRight({ component }) {\n          const env = component.get('teambit.envs/envs');\n          const envComponentId = env?.id ? ComponentID.fromString(env?.id) : undefined;\n\n          return (\n            <div className={styles.rightPreviewPlugins}>\n              <div className={styles.badge}>\n                <Tooltip delay={300} content={envComponentId?.name}>\n                  <img src={env?.icon} className={styles.envIcon} />\n                </Tooltip>\n              </div>\n            </div>\n          );\n        },\n      },\n      new LinkPlugin(),\n    ],\n    [compModelsById.size]\n  );\n\n  return plugins;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/workspace/workspace.js

@@ -82,6 +82,13 @@ function _uiFoundationUi2() {
   };
   return data;
 }
+function _workspaceUi() {
+  const data = require("@teambit/workspace.ui.preserve-workspace-mode");
+  _workspaceUi = function () {
+    return data;
+  };
+  return data;
+}
 function _classnames() {
   const data = _interopRequireDefault(require("classnames"));
   _classnames = function () {
@@ -89,6 +96,13 @@ function _classnames() {
   };
   return data;
 }
+function _workspaceUi2() {
+  const data = require("@teambit/workspace.ui.use-workspace-mode");
+  _workspaceUi2 = function () {
+    return data;
+  };
+  return data;
+}
 function _useWorkspace() {
   const data = require("./use-workspace");
   _useWorkspace = function () {
@@ -130,6 +144,9 @@ function Workspace({
   workspaceUI,
   onSidebarTogglerChange
 }) {
+  const {
+    isMinimal
+  } = (0, _workspaceUi2().useWorkspaceMode)();
   const reactions = useComponentNotifications();
   const {
     workspace
@@ -154,12 +171,12 @@ function Workspace({
   workspaceUI.setComponents(workspace.components);
   return /*#__PURE__*/_react().default.createElement(_workspaceProvider().WorkspaceProvider, {
     workspace: workspace
-  }, /*#__PURE__*/_react().default.createElement("div", {
+  }, /*#__PURE__*/_react().default.createElement(_workspaceUi().PreserveWorkspaceMode, null, /*#__PURE__*/_react().default.createElement("div", {
     className: _workspaceModule().default.workspaceWrapper
   }, /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().TopBar, {
     className: (0, _classnames().default)(_workspaceModule().default.topbar, _workspaceModule().default[themeName]),
     Corner: () => /*#__PURE__*/_react().default.createElement(_uiFoundationUi().Corner, {
-      className: (0, _classnames().default)(_workspaceModule().default.corner, _workspaceModule().default[themeName]),
+      className: (0, _classnames().default)(isMinimal && _workspaceModule().default.minimalCorner || _workspaceModule().default.corner, _workspaceModule().default[themeName]),
       name: workspace.name,
       icon: workspace.icon
     }),
@@ -183,7 +200,7 @@ function Workspace({
   }, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
     index: true,
     element: /*#__PURE__*/_react().default.createElement(_workspaceOverview().WorkspaceOverview, null)
-  }))))));
+  })))))));
 }
 function useComponentNotifications() {
   const notifications = (0, _uiFoundationUiNotifications().useNotifications)();

package/dist/ui/workspace/workspace.js.map

@@ -1 +1 @@
-{"version":3,"names":["require","_pluralize","data","_interopRequireDefault","_react","_interopRequireWildcard","_reactRouterDom","_uiFoundationUiNotifications","_uiFoundationUiReactRouter","_uiFoundationUi","_uiFoundationUiButtons","_baseUiSurfacesSplitPane","_baseReactThemes","_baseUiSurfacesSplitPane2","_uiFoundationUi2","_classnames","_useWorkspace","_workspaceOverview","_workspaceProvider","_workspaceModule","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Workspace","routeSlot","menuSlot","sidebar","workspaceUI","onSidebarTogglerChange","reactions","useComponentNotifications","workspace","useWorkspace","theme","useThemePicker","currentTheme","current","isSidebarOpen","handleSidebarToggle","useReducer","x","sidebarOpenness","Layout","row","right","themeName","useEffect","window","innerWidth","createElement","className","styles","emptyContainer","setComponents","components","WorkspaceProvider","workspaceWrapper","TopBar","classNames","topbar","Corner","corner","name","icon","menu","SplitPane","main","size","layout","Pane","closed","HoverSplitter","splitter","Collapser","isOpen","onMouseDown","stopPropagation","onClick","tooltipContent","SlotRouter","slot","Route","index","element","WorkspaceOverview","notifications","useNotifications","useMemo","onComponentAdded","comps","notificationId","log","pluralize","length","map","comp","id","toString","join","setTimeout","dismiss","onComponentRemoved","ids"],"sources":["workspace.tsx"],"sourcesContent":["import 'reset-css';\nimport pluralize from 'pluralize';\nimport React, { useReducer, useMemo, useEffect } from 'react';\nimport { Route } from 'react-router-dom';\nimport type { ComponentModel } from '@teambit/component';\nimport type { ComponentID } from '@teambit/component-id';\nimport { useNotifications } from '@teambit/ui-foundation.ui.notifications.notification-context';\nimport { SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Corner } from '@teambit/ui-foundation.ui.corner';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { useThemePicker } from '@teambit/base-react.themes.theme-switcher';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { TopBar } from '@teambit/ui-foundation.ui.top-bar';\nimport classNames from 'classnames';\n\nimport { useWorkspace } from './use-workspace';\nimport { WorkspaceOverview } from './workspace-overview';\nimport { WorkspaceProvider } from './workspace-provider';\nimport styles from './workspace.module.scss';\nimport { WorkspaceUI } from '../../workspace.ui.runtime';\n\nexport type WorkspaceProps = {\n  routeSlot: RouteSlot;\n  menuSlot: RouteSlot;\n  sidebar: JSX.Element;\n  workspaceUI: WorkspaceUI;\n  onSidebarTogglerChange: (callback: () => void) => void;\n};\n\n/**\n * main workspace component.\n */\nexport function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebarTogglerChange }: WorkspaceProps) {\n  const reactions = useComponentNotifications();\n  const { workspace } = useWorkspace(reactions);\n  const theme = useThemePicker();\n  const currentTheme = theme?.current;\n  const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, true);\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;\n  const themeName = currentTheme?.themeName || 'light';\n  onSidebarTogglerChange(handleSidebarToggle);\n\n  useEffect(() => {\n    if (!window) return;\n    if (window.innerWidth <= 1024) {\n      handleSidebarToggle();\n    }\n  }, []);\n\n  if (!workspace) {\n    return <div className={styles.emptyContainer}></div>;\n  }\n\n  workspaceUI.setComponents(workspace.components);\n\n  return (\n    <WorkspaceProvider workspace={workspace}>\n      <div className={styles.workspaceWrapper}>\n        <TopBar\n          className={classNames(styles.topbar, styles[themeName])}\n          Corner={() => (\n            <Corner\n              className={classNames(styles.corner, styles[themeName])}\n              name={workspace.name}\n              icon={workspace.icon}\n            />\n          )}\n          menu={menuSlot}\n        />\n\n        <SplitPane className={styles.main} size={246} layout={sidebarOpenness}>\n          <Pane className={classNames(styles.sidebar, styles[themeName], !isSidebarOpen && styles.closed)}>\n            {sidebar}\n          </Pane>\n          <HoverSplitter className={styles.splitter}>\n            <Collapser\n              isOpen={isSidebarOpen}\n              onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n              onClick={handleSidebarToggle}\n              tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}\n            />\n          </HoverSplitter>\n          <Pane>\n            <SlotRouter slot={routeSlot}>\n              <Route index element={<WorkspaceOverview />} />\n            </SlotRouter>\n          </Pane>\n        </SplitPane>\n      </div>\n    </WorkspaceProvider>\n  );\n}\nfunction useComponentNotifications() {\n  const notifications = useNotifications();\n\n  // memo not really needed, but for peace of mind\n  return useMemo(\n    () => ({\n      onComponentAdded: (comps: ComponentModel[]) => {\n        const notificationId = notifications.log(\n          `added ${pluralize('component', comps.length)}: ${comps.map((comp) => comp.id.toString()).join(', ')}`\n        );\n        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);\n      },\n\n      onComponentRemoved: (ids: ComponentID[]) => {\n        const notificationId = notifications.log(\n          `removed ${pluralize('component', ids.length)} ${ids.map((id) => id.toString()).join(', ')}`\n        );\n        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);\n      },\n    }),\n    [notifications]\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["require","_pluralize","data","_interopRequireDefault","_react","_interopRequireWildcard","_reactRouterDom","_uiFoundationUiNotifications","_uiFoundationUiReactRouter","_uiFoundationUi","_uiFoundationUiButtons","_baseUiSurfacesSplitPane","_baseReactThemes","_baseUiSurfacesSplitPane2","_uiFoundationUi2","_workspaceUi","_classnames","_workspaceUi2","_useWorkspace","_workspaceOverview","_workspaceProvider","_workspaceModule","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Workspace","routeSlot","menuSlot","sidebar","workspaceUI","onSidebarTogglerChange","isMinimal","useWorkspaceMode","reactions","useComponentNotifications","workspace","useWorkspace","theme","useThemePicker","currentTheme","current","isSidebarOpen","handleSidebarToggle","useReducer","x","sidebarOpenness","Layout","row","right","themeName","useEffect","window","innerWidth","createElement","className","styles","emptyContainer","setComponents","components","WorkspaceProvider","PreserveWorkspaceMode","workspaceWrapper","TopBar","classNames","topbar","Corner","minimalCorner","corner","name","icon","menu","SplitPane","main","size","layout","Pane","closed","HoverSplitter","splitter","Collapser","isOpen","onMouseDown","stopPropagation","onClick","tooltipContent","SlotRouter","slot","Route","index","element","WorkspaceOverview","notifications","useNotifications","useMemo","onComponentAdded","comps","notificationId","log","pluralize","length","map","comp","id","toString","join","setTimeout","dismiss","onComponentRemoved","ids"],"sources":["workspace.tsx"],"sourcesContent":["import 'reset-css';\nimport pluralize from 'pluralize';\nimport React, { useReducer, useMemo, useEffect } from 'react';\nimport { Route } from 'react-router-dom';\nimport type { ComponentModel } from '@teambit/component';\nimport type { ComponentID } from '@teambit/component-id';\nimport { useNotifications } from '@teambit/ui-foundation.ui.notifications.notification-context';\nimport { SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Corner } from '@teambit/ui-foundation.ui.corner';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { useThemePicker } from '@teambit/base-react.themes.theme-switcher';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { TopBar } from '@teambit/ui-foundation.ui.top-bar';\nimport { PreserveWorkspaceMode } from '@teambit/workspace.ui.preserve-workspace-mode';\nimport classNames from 'classnames';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\n\nimport { useWorkspace } from './use-workspace';\nimport { WorkspaceOverview } from './workspace-overview';\nimport { WorkspaceProvider } from './workspace-provider';\nimport styles from './workspace.module.scss';\nimport { WorkspaceUI } from '../../workspace.ui.runtime';\n\nexport type WorkspaceProps = {\n  routeSlot: RouteSlot;\n  menuSlot: RouteSlot;\n  sidebar: JSX.Element;\n  workspaceUI: WorkspaceUI;\n  onSidebarTogglerChange: (callback: () => void) => void;\n};\n\n/**\n * main workspace component.\n */\nexport function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebarTogglerChange }: WorkspaceProps) {\n  const { isMinimal } = useWorkspaceMode();\n  const reactions = useComponentNotifications();\n  const { workspace } = useWorkspace(reactions);\n  const theme = useThemePicker();\n  const currentTheme = theme?.current;\n  const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, true);\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;\n  const themeName = currentTheme?.themeName || 'light';\n  onSidebarTogglerChange(handleSidebarToggle);\n\n  useEffect(() => {\n    if (!window) return;\n    if (window.innerWidth <= 1024) {\n      handleSidebarToggle();\n    }\n  }, []);\n\n  if (!workspace) {\n    return <div className={styles.emptyContainer}></div>;\n  }\n\n  workspaceUI.setComponents(workspace.components);\n\n  return (\n    <WorkspaceProvider workspace={workspace}>\n      <PreserveWorkspaceMode>\n        <div className={styles.workspaceWrapper}>\n          {\n            <TopBar\n              className={classNames(styles.topbar, styles[themeName])}\n              Corner={() => (\n                <Corner\n                  className={classNames((isMinimal && styles.minimalCorner) || styles.corner, styles[themeName])}\n                  name={workspace.name}\n                  icon={workspace.icon}\n                />\n              )}\n              menu={menuSlot}\n            />\n          }\n          <SplitPane className={styles.main} size={246} layout={sidebarOpenness}>\n            <Pane className={classNames(styles.sidebar, styles[themeName], !isSidebarOpen && styles.closed)}>\n              {sidebar}\n            </Pane>\n            <HoverSplitter className={styles.splitter}>\n              <Collapser\n                isOpen={isSidebarOpen}\n                onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n                onClick={handleSidebarToggle}\n                tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}\n              />\n            </HoverSplitter>\n            <Pane>\n              <SlotRouter slot={routeSlot}>\n                <Route index element={<WorkspaceOverview />} />\n              </SlotRouter>\n            </Pane>\n          </SplitPane>\n        </div>\n      </PreserveWorkspaceMode>\n    </WorkspaceProvider>\n  );\n}\nfunction useComponentNotifications() {\n  const notifications = useNotifications();\n\n  // memo not really needed, but for peace of mind\n  return useMemo(\n    () => ({\n      onComponentAdded: (comps: ComponentModel[]) => {\n        const notificationId = notifications.log(\n          `added ${pluralize('component', comps.length)}: ${comps.map((comp) => comp.id.toString()).join(', ')}`\n        );\n        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);\n      },\n\n      onComponentRemoved: (ids: ComponentID[]) => {\n        const notificationId = notifications.log(\n          `removed ${pluralize('component', ids.length)} ${ids.map((id) => id.toString()).join(', ')}`\n        );\n        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);\n      },\n    }),\n    [notifications]\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/workspace/workspace.module.scss

@@ -12,6 +12,14 @@
   }
 }
 
+.minimalCorner {
+  width: 130px;
+  &.dark {
+    --bit-border-color-lightest: #333333;
+    --bit-text-color-heavy: white;
+  }
+}
+
 .workspaceWrapper {
   display: flex;
   flex-direction: column;

package/dist/workspace.ui.runtime.js

@@ -32,13 +32,6 @@ function _harmony() {
   };
   return data;
 }
-function _uiFoundationUi() {
-  const data = require("@teambit/ui-foundation.ui.menu");
-  _uiFoundationUi = function () {
-    return data;
-  };
-  return data;
-}
 function _sidebar() {
   const data = require("@teambit/sidebar");
   _sidebar = function () {
@@ -282,7 +275,7 @@ class WorkspaceUI {
     });
     workspaceUI.registerMenuRoutes([{
       path: '/',
-      element: /*#__PURE__*/_react().default.createElement(_uiFoundationUi().Menu, {
+      element: /*#__PURE__*/_react().default.createElement(_ui2().WorkspaceMenu, {
         menuItemSlot: workspaceUI.menuItemSlot,
         widgetSlot: workspaceUI.menuWidgetSlot
       })

package/dist/workspace.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["_component","data","require","_lodash","_componentTree","_harmony","_uiFoundationUi","_sidebar","_ui","_graph","_react","_interopRequireDefault","_commandBar","_designUiSurfacesMenu","_componentUiComponentFilters","_componentUiComponentFilters2","_componentUiComponentFilters3","_componentUi","_componentTree2","_ui2","_workspace","_workspaceUi","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","WorkspaceUI","constructor","routeSlot","componentUi","menuSlot","menuItemSlot","sidebar","sidebarSlot","sidebarItemSlot","drawerWidgetSlot","drawerComponentsFiltersSlot","commandBarUI","menuWidgetSlot","menuItems","register","menuWidgets","routes","components","updateComponents","links","filters","widgets","category","title","keyChar","handler","run","registerRoutes","registerDrawers","drawers","registerDrawer","registerSidebarWidget","componentTreeNode","uiRoot","workspaceDrawer","treeWidgets","filtersSlot","setKeyBindHandler","addCommand","id","action","displayName","keybinding","path","element","createElement","Workspace","render","items","listSidebarItems","workspaceUI","onSidebarTogglerChange","flatten","values","compact","map","item","component","provider","ui","componentTree","graphUI","config","registerTreeNode","ComponentTreeWidget","registerComponentWidget","widget","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","ShowMainFilter","registerDrawerWidgets","FilterWidget","key","TreeToggleWidget","registerRoot","bind","registerMenuItem","registerSidebarLink","Gallery","MenuLinkItem","exact","href","icon","registerMenuRoutes","Menu","widgetSlot","routePath","getMenu","WorkspaceAspect","getComponentUI","registerMenuWidget","CommandBarButton","exports","UIAspect","ComponentAspect","SidebarAspect","ComponentTreeAspect","CommandBarAspect","GraphAspect","UIRuntime","Slot","withType","_default","addRuntime"],"sources":["workspace.ui.runtime.tsx"],"sourcesContent":["import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';\nimport { compact, flatten } from 'lodash';\nimport { ComponentTreeAspect, ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Menu, MenuWidgetSlot, MenuWidget } from '@teambit/ui-foundation.ui.menu';\nimport { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport { GraphAspect, GraphUI } from '@teambit/graph';\nimport React, { ReactNode } from 'react';\nimport { RouteProps } from 'react-router-dom';\nimport { CommandBarAspect, CommandBarUI, CommandHandler } from '@teambit/command-bar';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { ComponentFilters } from '@teambit/component.ui.component-filters.component-filter-context';\nimport { DeprecateFilter } from '@teambit/component.ui.component-filters.deprecate-filter';\nimport { EnvsFilter } from '@teambit/component.ui.component-filters.env-filter';\nimport { ShowMainFilter } from '@teambit/component.ui.component-filters.show-main-filter';\nimport {\n  DrawerWidgetSlot,\n  FilterWidget,\n  TreeToggleWidget,\n  ComponentFiltersSlot,\n} from '@teambit/component.ui.component-drawer';\nimport { ComponentTreeWidget } from './component-tree.widget';\nimport { Workspace } from './ui';\nimport { WorkspaceAspect } from './workspace.aspect';\nimport { workspaceDrawer } from './workspace.ui.drawer';\n\nexport type SidebarWidgetSlot = SlotRegistry<ComponentTreeNode>;\n\nexport class WorkspaceUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    private drawerWidgetSlot: DrawerWidgetSlot,\n\n    private drawerComponentsFiltersSlot: ComponentFiltersSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    private menuWidgetSlot: MenuWidgetSlot\n  ) {}\n\n  private setKeyBindHandler: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a route to the workspace.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerDrawers(...drawers: DrawerType[]) {\n    this.sidebar.registerDrawer(...drawers);\n    return this;\n  }\n\n  registerSidebarWidget(componentTreeNode: ComponentTreeNode) {\n    this.sidebarSlot.register(componentTreeNode);\n    return this;\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerMenuWidget = (menuWidgets: MenuWidget[]) => {\n    this.menuWidgetSlot.register(menuWidgets);\n  };\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  setComponents = (components: ComponentModel[]) => {\n    this.componentUi.updateComponents(components);\n  };\n\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  /**\n   * register component filters\n   */\n  registerDrawerComponentFilters = (filters: ComponentFilters) => {\n    this.drawerComponentsFiltersSlot.register(filters);\n  };\n\n  registerDrawerWidgets = (widgets: ReactNode[]) => {\n    this.drawerWidgetSlot.register(widgets);\n  };\n\n  uiRoot(): UIRoot {\n    this.registerDrawers(\n      workspaceDrawer({\n        treeWidgets: this.sidebarSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n      })\n    );\n\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      action: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setKeyBindHandler = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/*',\n          element: (\n            <Workspace\n              menuSlot={this.menuSlot}\n              routeSlot={this.routeSlot}\n              sidebar={<this.sidebar.render items={this.listSidebarItems()} />}\n              workspaceUI={this}\n              onSidebarTogglerChange={this.setKeyBindHandler}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  listSidebarItems() {\n    const items = flatten(this.sidebarItemSlot.values());\n    return compact(\n      items.map((item) => {\n        return item.component;\n      })\n    );\n  }\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, ComponentTreeAspect, CommandBarAspect, GraphAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<DrawerWidgetSlot>(),\n    Slot.withType<ComponentFiltersSlot>(),\n    Slot.withType<MenuWidgetSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, componentTree, commandBarUI, graphUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      ComponentTreeUI,\n      CommandBarUI,\n      GraphUI,\n    ],\n    config,\n    [\n      routeSlot,\n      menuSlot,\n      menuItemSlot,\n      sidebarSlot,\n      sidebarItemSlot,\n      drawerWidgetSlot,\n      drawerComponentsFiltersSlot,\n      menuWidgetSlot,\n    ]: [\n      RouteSlot,\n      RouteSlot,\n      MenuItemSlot,\n      SidebarWidgetSlot,\n      SidebarItemSlot,\n      DrawerWidgetSlot,\n      ComponentFiltersSlot,\n      MenuWidgetSlot,\n    ]\n  ) {\n    componentTree.registerTreeNode(new ComponentTreeWidget());\n    sidebarSlot.register(new ComponentTreeWidget());\n    graphUI.registerComponentWidget(new ComponentTreeWidget().widget);\n\n    const workspaceUI = new WorkspaceUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      menuItemSlot,\n      sidebar,\n      sidebarSlot,\n      sidebarItemSlot,\n      drawerWidgetSlot,\n      drawerComponentsFiltersSlot,\n      commandBarUI,\n      menuWidgetSlot\n    );\n\n    workspaceUI.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter, ShowMainFilter(true)]);\n    workspaceUI.registerDrawerWidgets([\n      <FilterWidget key={'workspace-filter-widget'} />,\n      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,\n    ]);\n    ui.registerRoot(workspaceUI.uiRoot.bind(workspaceUI));\n    workspaceUI.registerMenuItem(workspaceUI.menuItems);\n\n    workspaceUI.registerSidebarLink({\n      component: function Gallery() {\n        return (\n          <MenuLinkItem exact href=\"/\" icon=\"comps\">\n            Workspace overview\n          </MenuLinkItem>\n        );\n      },\n    });\n\n    workspaceUI.registerMenuRoutes([\n      {\n        path: '/',\n        element: <Menu menuItemSlot={workspaceUI.menuItemSlot} widgetSlot={workspaceUI.menuWidgetSlot} />,\n      },\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getMenu(WorkspaceAspect.id),\n      },\n    ]);\n\n    workspaceUI.registerRoutes([\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getComponentUI(WorkspaceAspect.id),\n      },\n    ]);\n\n    workspaceUI.registerMenuWidget([commandBarUI.CommandBarButton]);\n\n    return workspaceUI;\n  }\n}\n\nexport default WorkspaceUI;\n\nWorkspaceAspect.addRuntime(WorkspaceUI);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_component","data","require","_lodash","_componentTree","_harmony","_sidebar","_ui","_graph","_react","_interopRequireDefault","_commandBar","_designUiSurfacesMenu","_componentUiComponentFilters","_componentUiComponentFilters2","_componentUiComponentFilters3","_componentUi","_componentTree2","_ui2","_workspace","_workspaceUi","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","WorkspaceUI","constructor","routeSlot","componentUi","menuSlot","menuItemSlot","sidebar","sidebarSlot","sidebarItemSlot","drawerWidgetSlot","drawerComponentsFiltersSlot","commandBarUI","menuWidgetSlot","menuItems","register","menuWidgets","routes","components","updateComponents","links","filters","widgets","category","title","keyChar","handler","run","registerRoutes","registerDrawers","drawers","registerDrawer","registerSidebarWidget","componentTreeNode","uiRoot","workspaceDrawer","treeWidgets","filtersSlot","setKeyBindHandler","addCommand","id","action","displayName","keybinding","path","element","createElement","Workspace","render","items","listSidebarItems","workspaceUI","onSidebarTogglerChange","flatten","values","compact","map","item","component","provider","ui","componentTree","graphUI","config","registerTreeNode","ComponentTreeWidget","registerComponentWidget","widget","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","ShowMainFilter","registerDrawerWidgets","FilterWidget","key","TreeToggleWidget","registerRoot","bind","registerMenuItem","registerSidebarLink","Gallery","MenuLinkItem","exact","href","icon","registerMenuRoutes","WorkspaceMenu","widgetSlot","routePath","getMenu","WorkspaceAspect","getComponentUI","registerMenuWidget","CommandBarButton","exports","UIAspect","ComponentAspect","SidebarAspect","ComponentTreeAspect","CommandBarAspect","GraphAspect","UIRuntime","Slot","withType","_default","addRuntime"],"sources":["workspace.ui.runtime.tsx"],"sourcesContent":["import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';\nimport { compact, flatten } from 'lodash';\nimport { ComponentTreeAspect, ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { MenuWidgetSlot, MenuWidget } from '@teambit/ui-foundation.ui.menu';\nimport { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport { GraphAspect, GraphUI } from '@teambit/graph';\nimport React, { ReactNode } from 'react';\nimport { RouteProps } from 'react-router-dom';\nimport { CommandBarAspect, CommandBarUI, CommandHandler } from '@teambit/command-bar';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { ComponentFilters } from '@teambit/component.ui.component-filters.component-filter-context';\nimport { DeprecateFilter } from '@teambit/component.ui.component-filters.deprecate-filter';\nimport { EnvsFilter } from '@teambit/component.ui.component-filters.env-filter';\nimport { ShowMainFilter } from '@teambit/component.ui.component-filters.show-main-filter';\nimport {\n  DrawerWidgetSlot,\n  FilterWidget,\n  TreeToggleWidget,\n  ComponentFiltersSlot,\n} from '@teambit/component.ui.component-drawer';\nimport { ComponentTreeWidget } from './component-tree.widget';\nimport { Workspace, WorkspaceMenu } from './ui';\nimport { WorkspaceAspect } from './workspace.aspect';\nimport { workspaceDrawer } from './workspace.ui.drawer';\n\nexport type SidebarWidgetSlot = SlotRegistry<ComponentTreeNode>;\n\nexport class WorkspaceUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    private drawerWidgetSlot: DrawerWidgetSlot,\n\n    private drawerComponentsFiltersSlot: ComponentFiltersSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    private menuWidgetSlot: MenuWidgetSlot\n  ) {}\n\n  private setKeyBindHandler: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a route to the workspace.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerDrawers(...drawers: DrawerType[]) {\n    this.sidebar.registerDrawer(...drawers);\n    return this;\n  }\n\n  registerSidebarWidget(componentTreeNode: ComponentTreeNode) {\n    this.sidebarSlot.register(componentTreeNode);\n    return this;\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerMenuWidget = (menuWidgets: MenuWidget[]) => {\n    this.menuWidgetSlot.register(menuWidgets);\n  };\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  setComponents = (components: ComponentModel[]) => {\n    this.componentUi.updateComponents(components);\n  };\n\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  /**\n   * register component filters\n   */\n  registerDrawerComponentFilters = (filters: ComponentFilters) => {\n    this.drawerComponentsFiltersSlot.register(filters);\n  };\n\n  registerDrawerWidgets = (widgets: ReactNode[]) => {\n    this.drawerWidgetSlot.register(widgets);\n  };\n\n  uiRoot(): UIRoot {\n    this.registerDrawers(\n      workspaceDrawer({\n        treeWidgets: this.sidebarSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n      })\n    );\n\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      action: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setKeyBindHandler = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/*',\n          element: (\n            <Workspace\n              menuSlot={this.menuSlot}\n              routeSlot={this.routeSlot}\n              sidebar={<this.sidebar.render items={this.listSidebarItems()} />}\n              workspaceUI={this}\n              onSidebarTogglerChange={this.setKeyBindHandler}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  listSidebarItems() {\n    const items = flatten(this.sidebarItemSlot.values());\n    return compact(\n      items.map((item) => {\n        return item.component;\n      })\n    );\n  }\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, ComponentTreeAspect, CommandBarAspect, GraphAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<DrawerWidgetSlot>(),\n    Slot.withType<ComponentFiltersSlot>(),\n    Slot.withType<MenuWidgetSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, componentTree, commandBarUI, graphUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      ComponentTreeUI,\n      CommandBarUI,\n      GraphUI,\n    ],\n    config,\n    [\n      routeSlot,\n      menuSlot,\n      menuItemSlot,\n      sidebarSlot,\n      sidebarItemSlot,\n      drawerWidgetSlot,\n      drawerComponentsFiltersSlot,\n      menuWidgetSlot,\n    ]: [\n      RouteSlot,\n      RouteSlot,\n      MenuItemSlot,\n      SidebarWidgetSlot,\n      SidebarItemSlot,\n      DrawerWidgetSlot,\n      ComponentFiltersSlot,\n      MenuWidgetSlot,\n    ]\n  ) {\n    componentTree.registerTreeNode(new ComponentTreeWidget());\n    sidebarSlot.register(new ComponentTreeWidget());\n    graphUI.registerComponentWidget(new ComponentTreeWidget().widget);\n\n    const workspaceUI = new WorkspaceUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      menuItemSlot,\n      sidebar,\n      sidebarSlot,\n      sidebarItemSlot,\n      drawerWidgetSlot,\n      drawerComponentsFiltersSlot,\n      commandBarUI,\n      menuWidgetSlot\n    );\n\n    workspaceUI.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter, ShowMainFilter(true)]);\n    workspaceUI.registerDrawerWidgets([\n      <FilterWidget key={'workspace-filter-widget'} />,\n      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,\n    ]);\n    ui.registerRoot(workspaceUI.uiRoot.bind(workspaceUI));\n    workspaceUI.registerMenuItem(workspaceUI.menuItems);\n\n    workspaceUI.registerSidebarLink({\n      component: function Gallery() {\n        return (\n          <MenuLinkItem exact href=\"/\" icon=\"comps\">\n            Workspace overview\n          </MenuLinkItem>\n        );\n      },\n    });\n\n    workspaceUI.registerMenuRoutes([\n      {\n        path: '/',\n        element: <WorkspaceMenu menuItemSlot={workspaceUI.menuItemSlot} widgetSlot={workspaceUI.menuWidgetSlot} />,\n      },\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getMenu(WorkspaceAspect.id),\n      },\n    ]);\n\n    workspaceUI.registerRoutes([\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getComponentUI(WorkspaceAspect.id),\n      },\n    ]);\n\n    workspaceUI.registerMenuWidget([commandBarUI.CommandBarButton]);\n\n    return workspaceUI;\n  }\n}\n\nexport default WorkspaceUI;\n\nWorkspaceAspect.addRuntime(WorkspaceUI);\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "1.0.482",
+  "version": "1.0.483",
   "homepage": "https://bit.cloud/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "1.0.482"
+    "version": "1.0.483"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -51,59 +51,61 @@
     "@teambit/explorer.ui.gallery.component-grid": "0.0.496",
     "@teambit/scopes.scope-id": "0.0.7",
     "@teambit/workspace.ui.empty-workspace": "0.0.508",
-    "@teambit/component": "1.0.482",
-    "@teambit/dependency-resolver": "1.0.482",
-    "@teambit/envs": "1.0.482",
+    "@teambit/component": "1.0.483",
+    "@teambit/dependency-resolver": "1.0.483",
+    "@teambit/envs": "1.0.483",
     "@teambit/legacy.bit-map": "0.0.55",
     "@teambit/toolbox.fs.last-modified": "0.0.1",
     "@teambit/toolbox.path.path": "0.0.4",
-    "@teambit/logger": "0.0.1152",
-    "@teambit/scope": "1.0.482",
-    "@teambit/graph": "1.0.482",
-    "@teambit/cli": "0.0.1059",
-    "@teambit/isolator": "1.0.482",
-    "@teambit/component-tree": "1.0.482",
+    "@teambit/logger": "0.0.1153",
+    "@teambit/scope": "1.0.483",
+    "@teambit/graph": "1.0.483",
+    "@teambit/cli": "0.0.1060",
+    "@teambit/isolator": "1.0.483",
+    "@teambit/component-tree": "1.0.483",
     "@teambit/harmony.modules.resolved-component": "0.0.498",
     "@teambit/legacy.utils": "0.0.7",
-    "@teambit/watcher": "1.0.482",
-    "@teambit/aspect-loader": "1.0.482",
-    "@teambit/config": "0.0.1233",
-    "@teambit/global-config": "0.0.1062",
+    "@teambit/watcher": "1.0.483",
+    "@teambit/aspect-loader": "1.0.483",
+    "@teambit/config": "0.0.1234",
+    "@teambit/global-config": "0.0.1063",
     "@teambit/harmony.modules.requireable-component": "0.0.498",
     "@teambit/toolbox.modules.module-resolver": "0.0.7",
     "@teambit/workspace.modules.node-modules-linker": "0.0.226",
-    "@teambit/graphql": "1.0.482",
-    "@teambit/bundler": "1.0.482",
-    "@teambit/pubsub": "1.0.482",
-    "@teambit/ui": "1.0.482",
-    "@teambit/variants": "0.0.1326",
+    "@teambit/graphql": "1.0.483",
+    "@teambit/bundler": "1.0.483",
+    "@teambit/pubsub": "1.0.483",
+    "@teambit/ui": "1.0.483",
+    "@teambit/variants": "0.0.1327",
     "@teambit/component-issues": "0.0.151",
     "@teambit/component.sources": "0.0.50",
     "@teambit/harmony.modules.in-memory-cache": "0.0.2",
     "@teambit/legacy.component-list": "0.0.52",
-    "@teambit/legacy.scope-api": "0.0.52",
+    "@teambit/legacy.scope-api": "0.0.53",
     "@teambit/toolbox.path.is-path-inside": "0.0.496",
     "@teambit/workspace.modules.match-pattern": "0.0.505",
-    "@teambit/component.ui.component-drawer": "0.0.420",
+    "@teambit/component.ui.component-drawer": "0.0.421",
     "@teambit/lanes.hooks.use-lane-components": "0.0.271",
     "@teambit/lanes.hooks.use-lanes": "0.0.274",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.888",
-    "@teambit/command-bar": "1.0.482",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.889",
+    "@teambit/command-bar": "1.0.483",
     "@teambit/component.ui.component-filters.component-filter-context": "0.0.230",
     "@teambit/component.ui.component-filters.deprecate-filter": "0.0.228",
     "@teambit/component.ui.component-filters.env-filter": "0.0.241",
     "@teambit/component.ui.component-filters.show-main-filter": "0.0.221",
-    "@teambit/sidebar": "1.0.482",
+    "@teambit/sidebar": "1.0.483",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.512",
     "@teambit/harmony.modules.concurrency": "0.0.1",
     "@teambit/toolbox.promise.map-pool": "0.0.1",
+    "@teambit/workspace.ui.use-workspace-mode": "0.0.1",
     "@teambit/component-descriptor": "0.0.428",
-    "@teambit/deprecation": "1.0.482",
+    "@teambit/deprecation": "1.0.483",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.224",
+    "@teambit/workspace.ui.preserve-workspace-mode": "0.0.1",
     "@teambit/cloud.hooks.use-cloud-scopes": "0.0.3",
     "@teambit/design.ui.tooltip": "0.0.371",
     "@teambit/preview.ui.preview-placeholder": "0.0.528",
-    "@teambit/workspace.ui.workspace-component-card": "0.0.535"
+    "@teambit/workspace.ui.workspace-component-card": "0.0.536"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/index.ts

@@ -1 +1,2 @@
 export { Workspace } from './workspace';
+export { WorkspaceMenu } from './workspace/workspace-menu';

package/ui/workspace/workspace-menu.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Menu, MenuProps } from '@teambit/ui-foundation.ui.menu';
+import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
+
+export const WorkspaceMenu = ({ menuSlot, widgetSlot, menuItemSlot, className }: MenuProps) => {
+  const { isMinimal } = useWorkspaceMode();
+
+  return (
+    <Menu
+      menuSlot={menuSlot}
+      widgetSlot={widgetSlot}
+      menuItemSlot={isMinimal ? undefined : menuItemSlot}
+      className={className}
+    />
+  );
+};

package/ui/workspace/workspace-overview/workspace-overview.tsx

@@ -10,12 +10,14 @@ import { ScopeID } from '@teambit/scopes.scope-id';
 import { compact } from 'lodash';
 import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
 import type { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
+import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
 import { WorkspaceContext } from '../workspace-context';
 import styles from './workspace-overview.module.scss';
 import { LinkPlugin } from './link-plugin';
 
 export function WorkspaceOverview() {
   const workspace = useContext(WorkspaceContext);
+  const { isMinimal } = useWorkspaceMode();
   const compModelsById = new Map(workspace.components.map((comp) => [comp.id.toString(), comp]));
   const { components, componentDescriptors } = workspace;
   const uniqueScopes = new Set(components.map((c) => c.id.scope));
@@ -23,7 +25,7 @@ export function WorkspaceOverview() {
   const { cloudScopes = [] } = useCloudScopes(uniqueScopesArr);
   const cloudScopesById = new Map(cloudScopes.map((scope) => [scope.id.toString(), scope]));
 
-  const plugins = useCardPlugins({ compModelsById });
+  const plugins = useCardPlugins({ compModelsById, showPreview: isMinimal });
 
   if (!components || components.length === 0) return <EmptyWorkspace name={workspace.name} />;
 
@@ -54,6 +56,7 @@ export function WorkspaceOverview() {
               component={component}
               plugins={plugins}
               scope={scope}
+              shouldShowPreviewState={isMinimal}
             />
           );
         })}
@@ -64,8 +67,10 @@ export function WorkspaceOverview() {
 
 export function useCardPlugins({
   compModelsById,
+  showPreview,
 }: {
   compModelsById: Map<string, ComponentModel>;
+  showPreview?: boolean;
 }): ComponentCardPluginType<PluginProps>[] {
   const plugins = React.useMemo(
     () => [
@@ -77,7 +82,7 @@ export function useCardPlugins({
             <PreviewPlaceholder
               componentDescriptor={component}
               component={compModel}
-              shouldShowPreview={shouldShowPreview}
+              shouldShowPreview={showPreview || shouldShowPreview}
             />
           );
         },

package/ui/workspace/workspace.module.scss

@@ -12,6 +12,14 @@
   }
 }
 
+.minimalCorner {
+  width: 130px;
+  &.dark {
+    --bit-border-color-lightest: #333333;
+    --bit-text-color-heavy: white;
+  }
+}
+
 .workspaceWrapper {
   display: flex;
   flex-direction: column;

package/ui/workspace/workspace.tsx

@@ -13,7 +13,9 @@ import { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.sp
 import { useThemePicker } from '@teambit/base-react.themes.theme-switcher';
 import { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';
 import { TopBar } from '@teambit/ui-foundation.ui.top-bar';
+import { PreserveWorkspaceMode } from '@teambit/workspace.ui.preserve-workspace-mode';
 import classNames from 'classnames';
+import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
 
 import { useWorkspace } from './use-workspace';
 import { WorkspaceOverview } from './workspace-overview';
@@ -33,6 +35,7 @@ export type WorkspaceProps = {
  * main workspace component.
  */
 export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebarTogglerChange }: WorkspaceProps) {
+  const { isMinimal } = useWorkspaceMode();
   const reactions = useComponentNotifications();
   const { workspace } = useWorkspace(reactions);
   const theme = useThemePicker();
@@ -57,38 +60,41 @@ export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebar
 
   return (
     <WorkspaceProvider workspace={workspace}>
-      <div className={styles.workspaceWrapper}>
-        <TopBar
-          className={classNames(styles.topbar, styles[themeName])}
-          Corner={() => (
-            <Corner
-              className={classNames(styles.corner, styles[themeName])}
-              name={workspace.name}
-              icon={workspace.icon}
+      <PreserveWorkspaceMode>
+        <div className={styles.workspaceWrapper}>
+          {
+            <TopBar
+              className={classNames(styles.topbar, styles[themeName])}
+              Corner={() => (
+                <Corner
+                  className={classNames((isMinimal && styles.minimalCorner) || styles.corner, styles[themeName])}
+                  name={workspace.name}
+                  icon={workspace.icon}
+                />
+              )}
+              menu={menuSlot}
             />
-          )}
-          menu={menuSlot}
-        />
-
-        <SplitPane className={styles.main} size={246} layout={sidebarOpenness}>
-          <Pane className={classNames(styles.sidebar, styles[themeName], !isSidebarOpen && styles.closed)}>
-            {sidebar}
-          </Pane>
-          <HoverSplitter className={styles.splitter}>
-            <Collapser
-              isOpen={isSidebarOpen}
-              onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag
-              onClick={handleSidebarToggle}
-              tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}
-            />
-          </HoverSplitter>
-          <Pane>
-            <SlotRouter slot={routeSlot}>
-              <Route index element={<WorkspaceOverview />} />
-            </SlotRouter>
-          </Pane>
-        </SplitPane>
-      </div>
+          }
+          <SplitPane className={styles.main} size={246} layout={sidebarOpenness}>
+            <Pane className={classNames(styles.sidebar, styles[themeName], !isSidebarOpen && styles.closed)}>
+              {sidebar}
+            </Pane>
+            <HoverSplitter className={styles.splitter}>
+              <Collapser
+                isOpen={isSidebarOpen}
+                onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag
+                onClick={handleSidebarToggle}
+                tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}
+              />
+            </HoverSplitter>
+            <Pane>
+              <SlotRouter slot={routeSlot}>
+                <Route index element={<WorkspaceOverview />} />
+              </SlotRouter>
+            </Pane>
+          </SplitPane>
+        </div>
+      </PreserveWorkspaceMode>
     </WorkspaceProvider>
   );
 }

package/workspace.ui.runtime.tsx

@@ -3,7 +3,7 @@ import { compact, flatten } from 'lodash';
 import { ComponentTreeAspect, ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';
 import { Slot, SlotRegistry } from '@teambit/harmony';
 import type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
-import { Menu, MenuWidgetSlot, MenuWidget } from '@teambit/ui-foundation.ui.menu';
+import { MenuWidgetSlot, MenuWidget } from '@teambit/ui-foundation.ui.menu';
 import { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';
 import { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';
 import { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';
@@ -24,7 +24,7 @@ import {
   ComponentFiltersSlot,
 } from '@teambit/component.ui.component-drawer';
 import { ComponentTreeWidget } from './component-tree.widget';
-import { Workspace } from './ui';
+import { Workspace, WorkspaceMenu } from './ui';
 import { WorkspaceAspect } from './workspace.aspect';
 import { workspaceDrawer } from './workspace.ui.drawer';
 
@@ -262,7 +262,7 @@ export class WorkspaceUI {
     workspaceUI.registerMenuRoutes([
       {
         path: '/',
-        element: <Menu menuItemSlot={workspaceUI.menuItemSlot} widgetSlot={workspaceUI.menuWidgetSlot} />,
+        element: <WorkspaceMenu menuItemSlot={workspaceUI.menuItemSlot} widgetSlot={workspaceUI.menuWidgetSlot} />,
       },
       {
         path: workspaceUI.componentUi.routePath,