@teambit/docs 0.0.653 → 0.0.656

package/dist/overview/overview.js

@@ -81,6 +81,46 @@ function _componentUiHooks() {
   return data;
 }
 
+function _lanesUi() {
+  const data = require("@teambit/lanes.ui.lanes");
+
+  _lanesUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _designUi() {
+  const data = require("@teambit/design.ui.separator");
+
+  _designUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _evangelistElements() {
+  const data = require("@teambit/evangelist.elements.icon");
+
+  _evangelistElements = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _designUiStyles() {
+  const data = require("@teambit/design.ui.styles.ellipsis");
+
+  _designUiStyles = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _overviewModule() {
   const data = _interopRequireDefault(require("./overview.module.scss"));
 
@@ -98,9 +138,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function Overview({
   titleBadges
 }) {
-  var _component$preview;
+  var _lanesModel$currentLa, _component$preview;
 
   const component = (0, _react().useContext)(_component().ComponentContext);
+  const componentDescriptor = (0, _react().useContext)(_component().ComponentDescriptorContext);
+  const lanesModel = (0, _lanesUi().useLanesContext)();
+  const laneId = lanesModel === null || lanesModel === void 0 ? void 0 : (_lanesModel$currentLa = lanesModel.currentLane) === null || _lanesModel$currentLa === void 0 ? void 0 : _lanesModel$currentLa.id;
   const {
     data
   } = (0, _componentUiHooks().useFetchDocs)(component.id.toString());
@@ -125,14 +168,19 @@ function Overview({
     const badges = (0, _lodash().default)(titleBadges.values());
     return /*#__PURE__*/_react().default.createElement("div", {
       className: _overviewModule().default.overviewWrapper
-    }, /*#__PURE__*/_react().default.createElement(_componentUi().ComponentOverview, {
+    }, laneId && /*#__PURE__*/_react().default.createElement(LaneOverview, {
+      laneId: laneId
+    }), /*#__PURE__*/_react().default.createElement(_designUi().Separator, {
+      isPresentational: true
+    }), /*#__PURE__*/_react().default.createElement(_componentUi().ComponentOverview, {
       className: _overviewModule().default.componentOverviewBlock,
       displayName: component.displayName,
       version: component.version,
       abstract: component.description || (fetchComponent === null || fetchComponent === void 0 ? void 0 : fetchComponent.description),
       labels: labels || [],
       packageName: component.packageName,
-      titleBadges: badges
+      titleBadges: badges,
+      componentDescriptor: componentDescriptor
     }), /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, {
       component: component,
       style: {
@@ -145,14 +193,42 @@ function Overview({
     }));
   }
 
-  return /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, {
+  return laneId ? /*#__PURE__*/_react().default.createElement("div", {
+    className: _overviewModule().default.overviewWrapper
+  }, /*#__PURE__*/_react().default.createElement(LaneOverview, {
+    laneId: laneId
+  }), /*#__PURE__*/_react().default.createElement(_designUi().Separator, {
+    isPresentational: true
+  }), /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, {
     component: component,
     style: {
       width: '100%',
       height: '100%'
     },
-    previewName: "overview"
+    previewName: "overview",
+    fullContentHeight: true,
+    scrolling: "no"
+  })) : /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, {
+    component: component,
+    style: {
+      width: '100%',
+      height: '100%'
+    },
+    previewName: "overview",
+    fullContentHeight: true
   });
 }
 
+function LaneOverview({
+  laneId
+}) {
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: _overviewModule().default.lane
+  }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+    of: "lane"
+  }), /*#__PURE__*/_react().default.createElement(_designUiStyles().Ellipsis, {
+    className: _overviewModule().default.laneName
+  }, laneId));
+}
+
 //# sourceMappingURL=overview.js.map

package/dist/overview/overview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["overview.tsx"],"names":["Overview","titleBadges","component","ComponentContext","data","id","toString","fetchComponent","buildStatus","host","margin","preview","includesEnvTemplate","labels","length","badges","values","styles","overviewWrapper","componentOverviewBlock","displayName","version","description","packageName","width","height"],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\nimport flatten from 'lodash.flatten';\nimport { ComponentContext } from '@teambit/component';\nimport type { SlotRegistry } from '@teambit/harmony';\nimport { ComponentPreview } from '@teambit/preview.ui.component-preview';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { ComponentOverview, TitleBadge } from '@teambit/component.ui.component-meta';\nimport { useFetchDocs } from '@teambit/component.ui.hooks.use-fetch-docs';\nimport styles from './overview.module.scss';\n\nexport type TitleBadgeSlot = SlotRegistry<TitleBadge[]>;\n\nexport type OverviewProps = {\n  titleBadges: TitleBadgeSlot;\n};\n\nexport function Overview({ titleBadges }: OverviewProps) {\n  const component = useContext(ComponentContext);\n  const { data } = useFetchDocs(component.id.toString());\n  const fetchComponent = data?.component;\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard style={{ margin: 'auto' }} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        style={{ margin: 'auto' }}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n\n  if (component.preview?.includesEnvTemplate === false) {\n    const labels = component.labels.length > 0 ? component.labels : fetchComponent?.labels;\n    const badges = flatten(titleBadges.values());\n\n    return (\n      <div className={styles.overviewWrapper}>\n        <ComponentOverview\n          className={styles.componentOverviewBlock}\n          displayName={component.displayName}\n          version={component.version}\n          abstract={component.description || fetchComponent?.description}\n          labels={labels || []}\n          packageName={component.packageName}\n          titleBadges={badges}\n        />\n        <ComponentPreview\n          component={component}\n          style={{ width: '100%', height: '100%' }}\n          previewName=\"overview\"\n          fullContentHeight\n          scrolling=\"no\"\n        />\n      </div>\n    );\n  }\n\n  return <ComponentPreview component={component} style={{ width: '100%', height: '100%' }} previewName=\"overview\" />;\n}\n"]}
+{"version":3,"sources":["overview.tsx"],"names":["Overview","titleBadges","component","ComponentContext","componentDescriptor","ComponentDescriptorContext","lanesModel","laneId","currentLane","id","data","toString","fetchComponent","buildStatus","host","margin","preview","includesEnvTemplate","labels","length","badges","values","styles","overviewWrapper","componentOverviewBlock","displayName","version","description","packageName","width","height","LaneOverview","lane","laneName"],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\nimport flatten from 'lodash.flatten';\nimport { ComponentContext, ComponentDescriptorContext } from '@teambit/component';\nimport type { SlotRegistry } from '@teambit/harmony';\nimport { ComponentPreview } from '@teambit/preview.ui.component-preview';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { ComponentOverview, TitleBadge } from '@teambit/component.ui.component-meta';\nimport { useFetchDocs } from '@teambit/component.ui.hooks.use-fetch-docs';\nimport { useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { Icon } from '@teambit/evangelist.elements.icon';\nimport { Ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport styles from './overview.module.scss';\n\nexport type TitleBadgeSlot = SlotRegistry<TitleBadge[]>;\n\nexport type OverviewProps = {\n  titleBadges: TitleBadgeSlot;\n};\n\nexport function Overview({ titleBadges }: OverviewProps) {\n  const component = useContext(ComponentContext);\n  const componentDescriptor = useContext(ComponentDescriptorContext);\n  const lanesModel = useLanesContext();\n  const laneId = lanesModel?.currentLane?.id;\n  const { data } = useFetchDocs(component.id.toString());\n  const fetchComponent = data?.component;\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard style={{ margin: 'auto' }} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        style={{ margin: 'auto' }}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n\n  if (component.preview?.includesEnvTemplate === false) {\n    const labels = component.labels.length > 0 ? component.labels : fetchComponent?.labels;\n    const badges = flatten(titleBadges.values());\n\n    return (\n      <div className={styles.overviewWrapper}>\n        {laneId && <LaneOverview laneId={laneId} />}\n        <Separator isPresentational />\n        <ComponentOverview\n          className={styles.componentOverviewBlock}\n          displayName={component.displayName}\n          version={component.version}\n          abstract={component.description || fetchComponent?.description}\n          labels={labels || []}\n          packageName={component.packageName}\n          titleBadges={badges}\n          componentDescriptor={componentDescriptor}\n        />\n        <ComponentPreview\n          component={component}\n          style={{ width: '100%', height: '100%' }}\n          previewName=\"overview\"\n          fullContentHeight\n          scrolling=\"no\"\n        />\n      </div>\n    );\n  }\n\n  return laneId ? (\n    <div className={styles.overviewWrapper}>\n      <LaneOverview laneId={laneId} />\n      <Separator isPresentational />\n      <ComponentPreview\n        component={component}\n        style={{ width: '100%', height: '100%' }}\n        previewName=\"overview\"\n        fullContentHeight\n        scrolling=\"no\"\n      />\n    </div>\n  ) : (\n    <ComponentPreview\n      component={component}\n      style={{ width: '100%', height: '100%' }}\n      previewName=\"overview\"\n      fullContentHeight\n    />\n  );\n}\n\nfunction LaneOverview({ laneId }: { laneId: string }): JSX.Element {\n  return (\n    <div className={styles.lane}>\n      <Icon of=\"lane\"></Icon>\n      <Ellipsis className={styles.laneName}>{laneId}</Ellipsis>\n    </div>\n  );\n}\n"]}

package/dist/overview/overview.module.scss

@@ -7,4 +7,17 @@
     margin: 0 auto;
     margin-bottom: 0;
   }
+  .lane {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    padding: 24px 0px 16px 32px;
+    .laneName {
+      overflow: hidden;
+      white-space: nowrap;
+      font-size: large;
+      padding: 0px 8px;
+    }
+  }
 }

package/overview/overview.module.scss

@@ -7,4 +7,17 @@
     margin: 0 auto;
     margin-bottom: 0;
   }
+  .lane {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    padding: 24px 0px 16px 32px;
+    .laneName {
+      overflow: hidden;
+      white-space: nowrap;
+      font-size: large;
+      padding: 0px 8px;
+    }
+  }
 }

package/overview/overview.tsx

@@ -1,11 +1,15 @@
 import React, { useContext } from 'react';
 import flatten from 'lodash.flatten';
-import { ComponentContext } from '@teambit/component';
+import { ComponentContext, ComponentDescriptorContext } from '@teambit/component';
 import type { SlotRegistry } from '@teambit/harmony';
 import { ComponentPreview } from '@teambit/preview.ui.component-preview';
 import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
 import { ComponentOverview, TitleBadge } from '@teambit/component.ui.component-meta';
 import { useFetchDocs } from '@teambit/component.ui.hooks.use-fetch-docs';
+import { useLanesContext } from '@teambit/lanes.ui.lanes';
+import { Separator } from '@teambit/design.ui.separator';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
 import styles from './overview.module.scss';
 
 export type TitleBadgeSlot = SlotRegistry<TitleBadge[]>;
@@ -16,6 +20,9 @@ export type OverviewProps = {
 
 export function Overview({ titleBadges }: OverviewProps) {
   const component = useContext(ComponentContext);
+  const componentDescriptor = useContext(ComponentDescriptorContext);
+  const lanesModel = useLanesContext();
+  const laneId = lanesModel?.currentLane?.id;
   const { data } = useFetchDocs(component.id.toString());
   const fetchComponent = data?.component;
   if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
@@ -39,6 +46,8 @@ export function Overview({ titleBadges }: OverviewProps) {
 
     return (
       <div className={styles.overviewWrapper}>
+        {laneId && <LaneOverview laneId={laneId} />}
+        <Separator isPresentational />
         <ComponentOverview
           className={styles.componentOverviewBlock}
           displayName={component.displayName}
@@ -47,6 +56,7 @@ export function Overview({ titleBadges }: OverviewProps) {
           labels={labels || []}
           packageName={component.packageName}
           titleBadges={badges}
+          componentDescriptor={componentDescriptor}
         />
         <ComponentPreview
           component={component}
@@ -59,5 +69,33 @@ export function Overview({ titleBadges }: OverviewProps) {
     );
   }
 
-  return <ComponentPreview component={component} style={{ width: '100%', height: '100%' }} previewName="overview" />;
+  return laneId ? (
+    <div className={styles.overviewWrapper}>
+      <LaneOverview laneId={laneId} />
+      <Separator isPresentational />
+      <ComponentPreview
+        component={component}
+        style={{ width: '100%', height: '100%' }}
+        previewName="overview"
+        fullContentHeight
+        scrolling="no"
+      />
+    </div>
+  ) : (
+    <ComponentPreview
+      component={component}
+      style={{ width: '100%', height: '100%' }}
+      previewName="overview"
+      fullContentHeight
+    />
+  );
+}
+
+function LaneOverview({ laneId }: { laneId: string }): JSX.Element {
+  return (
+    <div className={styles.lane}>
+      <Icon of="lane"></Icon>
+      <Ellipsis className={styles.laneName}>{laneId}</Ellipsis>
+    </div>
+  );
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/docs",
-  "version": "0.0.653",
+  "version": "0.0.656",
   "homepage": "https://bit.dev/teambit/docs/docs",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.docs",
     "name": "docs",
-    "version": "0.0.653"
+    "version": "0.0.656"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -14,22 +14,26 @@
     "lodash.flatten": "4.4.0",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/compiler": "0.0.653",
-    "@teambit/component": "0.0.653",
-    "@teambit/pkg": "0.0.653",
-    "@teambit/workspace": "0.0.653",
-    "@teambit/cli": "0.0.445",
-    "@teambit/dev-files": "0.0.653",
-    "@teambit/envs": "0.0.653",
-    "@teambit/graphql": "0.0.653",
-    "@teambit/logger": "0.0.535",
-    "@teambit/preview": "0.0.653",
-    "@teambit/component.ui.component-meta": "0.0.2",
-    "@teambit/ui": "0.0.653",
+    "@teambit/evangelist.elements.icon": "1.0.2",
+    "@teambit/compiler": "0.0.656",
+    "@teambit/component": "0.0.656",
+    "@teambit/pkg": "0.0.656",
+    "@teambit/workspace": "0.0.656",
+    "@teambit/cli": "0.0.447",
+    "@teambit/dev-files": "0.0.656",
+    "@teambit/envs": "0.0.656",
+    "@teambit/graphql": "0.0.656",
+    "@teambit/logger": "0.0.537",
+    "@teambit/preview": "0.0.656",
+    "@teambit/component.ui.component-meta": "0.0.4",
+    "@teambit/ui": "0.0.656",
     "@teambit/toolbox.types.serializable": "0.0.483",
-    "@teambit/pubsub": "0.0.653",
+    "@teambit/pubsub": "0.0.656",
     "@teambit/component.ui.hooks.use-fetch-docs": "0.0.3",
+    "@teambit/design.ui.separator": "0.0.351",
+    "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.7",
+    "@teambit/lanes.ui.lanes": "0.0.2",
     "@teambit/preview.ui.component-preview": "0.0.490"
   },
   "devDependencies": {
@@ -42,7 +46,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.223",
+    "@teambit/legacy": "1.0.226",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -70,7 +74,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.223",
+        "@teambit/legacy": "1.0.226",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }