@teambit/changelog 0.0.653 → 0.0.654

package/dist/ui/change-log-page.js

@@ -107,6 +107,36 @@ function _react() {
   return data;
 }
 
+function _lanesUi() {
+  const data = require("@teambit/lanes.ui.lanes");
+
+  _lanesUi = 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 _changeLogPageModule() {
   const data = _interopRequireDefault(require("./change-log-page.module.scss"));
 
@@ -127,14 +157,28 @@ function ChangeLogPage({
   var _snaps$, _snaps$2;
 
   const component = (0, _react().useContext)(_component().ComponentContext);
+  const lanesContext = (0, _lanesUi().useLanesContext)();
+  const currentLane = lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.currentLane;
+  const snapResult = (0, _componentUiHooks().useSnaps)(component.id);
   const {
-    snaps,
     loading
-  } = (0, _componentUiHooks().useSnaps)(component.id);
+  } = snapResult;
+  const {
+    snaps
+  } = snapResult;
   if (!snaps) return null;
 
   if (snaps.length === 0 && !loading) {
-    return /*#__PURE__*/_react().default.createElement("div", {
+    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, currentLane && /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement("div", {
+      className: _changeLogPageModule().default.lane
+    }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+      of: "lane"
+    }), /*#__PURE__*/_react().default.createElement(_designUiStyles().Ellipsis, {
+      className: _changeLogPageModule().default.laneName
+    }, currentLane.id)), /*#__PURE__*/_react().default.createElement(_designUi().Separator, {
+      isPresentational: true,
+      className: _changeLogPageModule().default.separator
+    })), /*#__PURE__*/_react().default.createElement("div", {
       className: (0, _classnames().default)(_changeLogPageModule().default.changeLogPage, className)
     }, /*#__PURE__*/_react().default.createElement(_documenterUi().H1, {
       className: _changeLogPageModule().default.title
@@ -145,11 +189,20 @@ function ChangeLogPage({
       level: "info",
       title: "There is no change log as this component has not been exported yet. Learn how to export components:",
       className: _changeLogPageModule().default.changeLogCard
-    }, /*#__PURE__*/_react().default.createElement(_mdxUi().MDXLayout, null, /*#__PURE__*/_react().default.createElement(_componentInstructions().ExportingComponents, null))));
+    }, /*#__PURE__*/_react().default.createElement(_mdxUi().MDXLayout, null, /*#__PURE__*/_react().default.createElement(_componentInstructions().ExportingComponents, null)))));
   }
 
   const latestVersion = ((_snaps$ = snaps[0]) === null || _snaps$ === void 0 ? void 0 : _snaps$.tag) || ((_snaps$2 = snaps[0]) === null || _snaps$2 === void 0 ? void 0 : _snaps$2.hash);
-  return /*#__PURE__*/_react().default.createElement("div", {
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, currentLane && /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement("div", {
+    className: _changeLogPageModule().default.lane
+  }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+    of: "lane"
+  }), /*#__PURE__*/_react().default.createElement(_designUiStyles().Ellipsis, {
+    className: _changeLogPageModule().default.laneName
+  }, currentLane.id)), /*#__PURE__*/_react().default.createElement(_designUi().Separator, {
+    isPresentational: true,
+    className: _changeLogPageModule().default.separator
+  })), /*#__PURE__*/_react().default.createElement("div", {
     className: (0, _classnames().default)(_changeLogPageModule().default.changeLogPage, className)
   }, /*#__PURE__*/_react().default.createElement(_documenterUi().H1, {
     className: _changeLogPageModule().default.title
@@ -164,7 +217,7 @@ function ChangeLogPage({
       isLatest: isLatest,
       snap: snap
     });
-  }));
+  })));
 }
 
 //# sourceMappingURL=change-log-page.js.map

package/dist/ui/change-log-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["change-log-page.tsx"],"names":["ChangeLogPage","className","component","ComponentContext","snaps","loading","id","length","styles","changeLogPage","title","separatorNoChangeLog","changeLogCard","latestVersion","tag","hash","separator","map","snap","index","isLatest","fullName"],"mappings":";;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAIO,SAASA,aAAT,CAAuB;AAAEC,EAAAA;AAAF,CAAvB,EAA0D;AAAA;;AAC/D,QAAMC,SAAS,GAAG,yBAAWC,6BAAX,CAAlB;AACA,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAqB,kCAASH,SAAS,CAACI,EAAnB,CAA3B;AAEA,MAAI,CAACF,KAAL,EAAY,OAAO,IAAP;;AAEZ,MAAIA,KAAK,CAACG,MAAN,KAAiB,CAAjB,IAAsB,CAACF,OAA3B,EAAoC;AAClC,wBACE;AAAK,MAAA,SAAS,EAAE,2BAAWG,+BAAOC,aAAlB,EAAiCR,SAAjC;AAAhB,oBACE,+BAAC,kBAAD;AAAI,MAAA,SAAS,EAAEO,+BAAOE;AAAtB,iBADF,eAEE,+BAAC,qBAAD;AAAW,MAAA,gBAAgB,MAA3B;AAA4B,MAAA,SAAS,EAAEF,+BAAOG;AAA9C,MAFF,eAGE,+BAAC,sBAAD;AACE,MAAA,KAAK,EAAC,MADR;AAEE,MAAA,KAAK,EAAC,qGAFR;AAIE,MAAA,SAAS,EAAEH,+BAAOI;AAJpB,oBAME,+BAAC,kBAAD,qBACE,+BAAC,4CAAD,OADF,CANF,CAHF,CADF;AAgBD;;AAED,QAAMC,aAAa,GAAG,YAAAT,KAAK,CAAC,CAAD,CAAL,oDAAUU,GAAV,kBAAiBV,KAAK,CAAC,CAAD,CAAtB,6CAAiB,SAAUW,IAA3B,CAAtB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAE,2BAAWP,+BAAOC,aAAlB,EAAiCR,SAAjC;AAAhB,kBACE,+BAAC,kBAAD;AAAI,IAAA,SAAS,EAAEO,+BAAOE;AAAtB,eADF,eAEE,+BAAC,qBAAD;AAAW,IAAA,gBAAgB,MAA3B;AAA4B,IAAA,SAAS,EAAEF,+BAAOQ;AAA9C,IAFF,EAGGZ,KAAK,CAACa,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,KAAiB;AAC1B,UAAMC,QAAQ,GAAGP,aAAa,KAAKK,IAAI,CAACJ,GAAvB,IAA8BD,aAAa,KAAKK,IAAI,CAACH,IAAtE;AACA,wBAAO,+BAAC,2BAAD;AAAc,MAAA,GAAG,EAAEI,KAAnB;AAA0B,MAAA,WAAW,EAAEjB,SAAS,CAACI,EAAV,CAAae,QAApD;AAA8D,MAAA,QAAQ,EAAED,QAAxE;AAAkF,MAAA,IAAI,EAAEF;AAAxF,MAAP;AACD,GAHA,CAHH,CADF;AAUD","sourcesContent":["import { ComponentContext } from '@teambit/component';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { VersionBlock } from '@teambit/component.ui.version-block';\nimport classNames from 'classnames';\nimport { useSnaps } from '@teambit/component.ui.hooks.use-snaps';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { ExportingComponents } from '@teambit/component.instructions.exporting-components';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport React, { HTMLAttributes, useContext } from 'react';\n\nimport styles from './change-log-page.module.scss';\n\ntype ChangeLogPageProps = {} & HTMLAttributes<HTMLDivElement>;\n\nexport function ChangeLogPage({ className }: ChangeLogPageProps) {\n  const component = useContext(ComponentContext);\n  const { snaps, loading } = useSnaps(component.id);\n\n  if (!snaps) return null;\n\n  if (snaps.length === 0 && !loading) {\n    return (\n      <div className={classNames(styles.changeLogPage, className)}>\n        <H1 className={styles.title}>History</H1>\n        <Separator isPresentational className={styles.separatorNoChangeLog} />\n        <AlertCard\n          level=\"info\"\n          title=\"There is no change log as this component has not been exported yet.\n          Learn how to export components:\"\n          className={styles.changeLogCard}\n        >\n          <MDXLayout>\n            <ExportingComponents />\n          </MDXLayout>\n        </AlertCard>\n      </div>\n    );\n  }\n\n  const latestVersion = snaps[0]?.tag || snaps[0]?.hash;\n\n  return (\n    <div className={classNames(styles.changeLogPage, className)}>\n      <H1 className={styles.title}>History</H1>\n      <Separator isPresentational className={styles.separator} />\n      {snaps.map((snap, index) => {\n        const isLatest = latestVersion === snap.tag || latestVersion === snap.hash;\n        return <VersionBlock key={index} componentId={component.id.fullName} isLatest={isLatest} snap={snap} />;\n      })}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["change-log-page.tsx"],"names":["ChangeLogPage","className","component","ComponentContext","lanesContext","currentLane","snapResult","id","loading","snaps","length","styles","lane","laneName","separator","changeLogPage","title","separatorNoChangeLog","changeLogCard","latestVersion","tag","hash","map","snap","index","isLatest","fullName"],"mappings":"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","sourcesContent":["import { ComponentContext } from '@teambit/component';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { VersionBlock } from '@teambit/component.ui.version-block';\nimport classNames from 'classnames';\nimport { useSnaps } from '@teambit/component.ui.hooks.use-snaps';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { ExportingComponents } from '@teambit/component.instructions.exporting-components';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport React, { HTMLAttributes, useContext } from 'react';\nimport { useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { Icon } from '@teambit/evangelist.elements.icon';\nimport { Ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport styles from './change-log-page.module.scss';\n\ntype ChangeLogPageProps = {} & HTMLAttributes<HTMLDivElement>;\n\nexport function ChangeLogPage({ className }: ChangeLogPageProps) {\n  const component = useContext(ComponentContext);\n  const lanesContext = useLanesContext();\n  const currentLane = lanesContext?.currentLane;\n  const snapResult = useSnaps(component.id);\n  const { loading } = snapResult;\n  const { snaps } = snapResult;\n\n  if (!snaps) return null;\n\n  if (snaps.length === 0 && !loading) {\n    return (\n      <>\n        {currentLane && (\n          <>\n            <div className={styles.lane}>\n              <Icon of=\"lane\"></Icon>\n              <Ellipsis className={styles.laneName}>{currentLane.id}</Ellipsis>\n            </div>\n            <Separator isPresentational className={styles.separator} />\n          </>\n        )}\n        <div className={classNames(styles.changeLogPage, className)}>\n          <H1 className={styles.title}>History</H1>\n          <Separator isPresentational className={styles.separatorNoChangeLog} />\n          <AlertCard\n            level=\"info\"\n            title=\"There is no change log as this component has not been exported yet.\n          Learn how to export components:\"\n            className={styles.changeLogCard}\n          >\n            <MDXLayout>\n              <ExportingComponents />\n            </MDXLayout>\n          </AlertCard>\n        </div>\n      </>\n    );\n  }\n\n  const latestVersion = snaps[0]?.tag || snaps[0]?.hash;\n\n  return (\n    <>\n      {currentLane && (\n        <>\n          <div className={styles.lane}>\n            <Icon of=\"lane\"></Icon>\n            <Ellipsis className={styles.laneName}>{currentLane.id}</Ellipsis>\n          </div>\n          <Separator isPresentational className={styles.separator} />\n        </>\n      )}\n      <div className={classNames(styles.changeLogPage, className)}>\n        <H1 className={styles.title}>History</H1>\n        <Separator isPresentational className={styles.separator} />\n        {snaps.map((snap, index) => {\n          const isLatest = latestVersion === snap.tag || latestVersion === snap.hash;\n          return <VersionBlock key={index} componentId={component.id.fullName} isLatest={isLatest} snap={snap} />;\n        })}\n      </div>\n    </>\n  );\n}\n"]}

package/dist/ui/change-log-page.module.scss

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/changelog",
-  "version": "0.0.653",
+  "version": "0.0.654",
   "homepage": "https://bit.dev/teambit/component/changelog",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "changelog",
-    "version": "0.0.653"
+    "version": "0.0.654"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -15,13 +15,16 @@
     "core-js": "^3.0.0",
     "@teambit/component.instructions.exporting-components": "0.0.6",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/component": "0.0.653",
+    "@teambit/evangelist.elements.icon": "1.0.2",
+    "@teambit/component": "0.0.654",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.488",
-    "@teambit/ui": "0.0.653",
+    "@teambit/ui": "0.0.654",
     "@teambit/component.ui.hooks.use-snaps": "0.0.492",
-    "@teambit/component.ui.version-block": "0.0.503",
+    "@teambit/component.ui.version-block": "0.0.504",
     "@teambit/design.ui.alert-card": "0.0.14",
     "@teambit/design.ui.separator": "0.0.351",
+    "@teambit/design.ui.styles.ellipsis": "0.0.347",
+    "@teambit/lanes.ui.lanes": "0.0.1",
     "@teambit/mdx.ui.mdx-layout": "0.0.494"
   },
   "devDependencies": {
@@ -34,7 +37,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.223",
+    "@teambit/legacy": "1.0.225",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -62,7 +65,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.223",
+        "@teambit/legacy": "1.0.225",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/ui/change-log-page.module.scss

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

package/ui/change-log-page.tsx

@@ -8,46 +8,74 @@ import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
 import { ExportingComponents } from '@teambit/component.instructions.exporting-components';
 import { AlertCard } from '@teambit/design.ui.alert-card';
 import React, { HTMLAttributes, useContext } from 'react';
-
+import { useLanesContext } from '@teambit/lanes.ui.lanes';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
 import styles from './change-log-page.module.scss';
 
 type ChangeLogPageProps = {} & HTMLAttributes<HTMLDivElement>;
 
 export function ChangeLogPage({ className }: ChangeLogPageProps) {
   const component = useContext(ComponentContext);
-  const { snaps, loading } = useSnaps(component.id);
+  const lanesContext = useLanesContext();
+  const currentLane = lanesContext?.currentLane;
+  const snapResult = useSnaps(component.id);
+  const { loading } = snapResult;
+  const { snaps } = snapResult;
 
   if (!snaps) return null;
 
   if (snaps.length === 0 && !loading) {
     return (
-      <div className={classNames(styles.changeLogPage, className)}>
-        <H1 className={styles.title}>History</H1>
-        <Separator isPresentational className={styles.separatorNoChangeLog} />
-        <AlertCard
-          level="info"
-          title="There is no change log as this component has not been exported yet.
+      <>
+        {currentLane && (
+          <>
+            <div className={styles.lane}>
+              <Icon of="lane"></Icon>
+              <Ellipsis className={styles.laneName}>{currentLane.id}</Ellipsis>
+            </div>
+            <Separator isPresentational className={styles.separator} />
+          </>
+        )}
+        <div className={classNames(styles.changeLogPage, className)}>
+          <H1 className={styles.title}>History</H1>
+          <Separator isPresentational className={styles.separatorNoChangeLog} />
+          <AlertCard
+            level="info"
+            title="There is no change log as this component has not been exported yet.
           Learn how to export components:"
-          className={styles.changeLogCard}
-        >
-          <MDXLayout>
-            <ExportingComponents />
-          </MDXLayout>
-        </AlertCard>
-      </div>
+            className={styles.changeLogCard}
+          >
+            <MDXLayout>
+              <ExportingComponents />
+            </MDXLayout>
+          </AlertCard>
+        </div>
+      </>
     );
   }
 
   const latestVersion = snaps[0]?.tag || snaps[0]?.hash;
 
   return (
-    <div className={classNames(styles.changeLogPage, className)}>
-      <H1 className={styles.title}>History</H1>
-      <Separator isPresentational className={styles.separator} />
-      {snaps.map((snap, index) => {
-        const isLatest = latestVersion === snap.tag || latestVersion === snap.hash;
-        return <VersionBlock key={index} componentId={component.id.fullName} isLatest={isLatest} snap={snap} />;
-      })}
-    </div>
+    <>
+      {currentLane && (
+        <>
+          <div className={styles.lane}>
+            <Icon of="lane"></Icon>
+            <Ellipsis className={styles.laneName}>{currentLane.id}</Ellipsis>
+          </div>
+          <Separator isPresentational className={styles.separator} />
+        </>
+      )}
+      <div className={classNames(styles.changeLogPage, className)}>
+        <H1 className={styles.title}>History</H1>
+        <Separator isPresentational className={styles.separator} />
+        {snaps.map((snap, index) => {
+          const isLatest = latestVersion === snap.tag || latestVersion === snap.hash;
+          return <VersionBlock key={index} componentId={component.id.fullName} isLatest={isLatest} snap={snap} />;
+        })}
+      </div>
+    </>
   );
 }