@teambit/changelog 1.0.919 → 1.0.920

package/dist/{preview-1774453679644.js → preview-1774473633801.js}

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

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

@@ -88,6 +88,19 @@ function ChangeLogPage({
     latest,
     id
   } = useComponentLogs?.(component?.id.toString(), host, undefined, !component) || {};
+  const [showAllSnaps, setShowAllSnaps] = (0, _react().useState)(false);
+  const [snapOverrides, setSnapOverrides] = (0, _react().useState)(new Set());
+  const toggleSnap = (0, _react().useCallback)(hash => {
+    setSnapOverrides(prev => {
+      const next = new Set(prev);
+      if (next.has(hash)) {
+        next.delete(hash);
+      } else {
+        next.add(hash);
+      }
+      return next;
+    });
+  }, []);
   if (loading || !componentLogs) return null;
   const {
     logs = []
@@ -106,24 +119,41 @@ function ChangeLogPage({
       className: _changeLogPageModule().default.changeLogCard
     }, /*#__PURE__*/_react().default.createElement(_mdxUi().MDXLayout, null, /*#__PURE__*/_react().default.createElement(_componentInstructions().ExportingComponents, null))));
   }
+  const hasSnaps = logs.some(l => !l.tag);
   return /*#__PURE__*/_react().default.createElement("div", {
     className: (0, _classnames().default)(_changeLogPageModule().default.changeLogPage, className)
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _changeLogPageModule().default.header
   }, /*#__PURE__*/_react().default.createElement(_documenterUi().H1, {
     className: _changeLogPageModule().default.title
-  }, "History"), /*#__PURE__*/_react().default.createElement(_designUi().Separator, {
-    isPresentational: true,
-    className: _changeLogPageModule().default.separator
-  }), /*#__PURE__*/_react().default.createElement("div", {
-    className: _changeLogPageModule().default.logContainer
-  }, logs.map((snap, index) => {
+  }, "History"), hasSnaps && /*#__PURE__*/_react().default.createElement("button", {
+    className: _changeLogPageModule().default.showAllToggle,
+    onClick: () => {
+      setSnapOverrides(new Set());
+      setShowAllSnaps(!showAllSnaps);
+    },
+    type: "button"
+  }, /*#__PURE__*/_react().default.createElement("img", {
+    className: _changeLogPageModule().default.toggleIcon,
+    src: showAllSnaps ? 'https://static.bit.dev/bit-icons/collapse.svg' : 'https://static.bit.dev/bit-icons/expand.svg',
+    alt: ""
+  }), showAllSnaps ? 'Collapse snaps' : 'Show all snaps')), /*#__PURE__*/_react().default.createElement("div", {
+    className: _changeLogPageModule().default.timeline
+  }, logs.map(snap => {
     const isLatest = latest === snap.tag || latest === snap.hash;
     const isCurrent = id?.version === snap.tag || id?.version === snap.hash;
+    const isTag = Boolean(snap.tag);
+    const hasOverride = snapOverrides.has(snap.hash);
+    const isSnapCollapsed = !isTag && (showAllSnaps ? hasOverride : !hasOverride);
     return /*#__PURE__*/_react().default.createElement(_componentUi().VersionBlock, {
-      key: index,
+      key: snap.hash,
       componentId: id?.fullName ?? '',
       isLatest: isLatest,
       snap: snap,
-      isCurrent: isCurrent
+      isCurrent: isCurrent,
+      collapsed: isSnapCollapsed,
+      onToggleCollapse: !isTag ? () => toggleSnap(snap.hash) : undefined,
+      allExpanded: showAllSnaps
     });
   })));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_component","data","require","_documenterUi","_designUi","_componentUi","_classnames","_interopRequireDefault","_mdxUi","_componentInstructions","_designUi2","_react","_interopRequireWildcard","_changeLogPageModule","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChangeLogPage","className","useComponentLogs","defaultUseComponentLogs","host","component","useContext","ComponentContext","loading","componentLogs","latest","id","toString","undefined","logs","length","createElement","classNames","styles","changeLogPage","H1","title","Separator","isPresentational","separatorNoChangeLog","AlertCard","level","changeLogCard","MDXLayout","ExportingComponents","separator","logContainer","map","snap","index","isLatest","tag","hash","isCurrent","version","VersionBlock","key","componentId","fullName"],"sources":["change-log-page.tsx"],"sourcesContent":["import type { ComponentLogsResult, Filters } from '@teambit/component';\nimport { ComponentContext, useComponentLogs as defaultUseComponentLogs } 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 { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { ExportingComponents } from '@teambit/component.instructions.exporting-components';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport type { HTMLAttributes } from 'react';\nimport React, { useContext } from 'react';\n\nimport styles from './change-log-page.module.scss';\n\nexport type ChangeLogPageProps = {\n  host?: string;\n  useComponentLogs?: (id: string, host: string, filters?: Filters, skip?: boolean) => ComponentLogsResult;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport function ChangeLogPage({\n  className,\n  useComponentLogs = defaultUseComponentLogs,\n  host = '',\n}: ChangeLogPageProps) {\n  const component = useContext(ComponentContext);\n  const { loading, componentLogs, latest, id } =\n    useComponentLogs?.(component?.id.toString(), host, undefined, !component) || {};\n\n  if (loading || !componentLogs) return null;\n\n  const { logs = [] } = componentLogs;\n\n  if (logs?.length === 0) {\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  return (\n    <div className={classNames(styles.changeLogPage, className)}>\n      <H1 className={styles.title}>History</H1>\n      <Separator isPresentational className={styles.separator} />\n      <div className={styles.logContainer}>\n        {logs.map((snap, index) => {\n          const isLatest = latest === snap.tag || latest === snap.hash;\n          const isCurrent = id?.version === snap.tag || id?.version === snap.hash;\n          return (\n            <VersionBlock\n              key={index}\n              componentId={id?.fullName ?? ''}\n              isLatest={isLatest}\n              snap={snap}\n              isCurrent={isCurrent}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_component","data","require","_documenterUi","_designUi","_componentUi","_classnames","_interopRequireDefault","_mdxUi","_componentInstructions","_designUi2","_react","_interopRequireWildcard","_changeLogPageModule","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChangeLogPage","className","useComponentLogs","defaultUseComponentLogs","host","component","useContext","ComponentContext","loading","componentLogs","latest","id","toString","undefined","showAllSnaps","setShowAllSnaps","useState","snapOverrides","setSnapOverrides","Set","toggleSnap","useCallback","hash","prev","next","delete","add","logs","length","createElement","classNames","styles","changeLogPage","H1","title","Separator","isPresentational","separatorNoChangeLog","AlertCard","level","changeLogCard","MDXLayout","ExportingComponents","hasSnaps","some","l","tag","header","showAllToggle","onClick","type","toggleIcon","src","alt","timeline","map","snap","isLatest","isCurrent","version","isTag","Boolean","hasOverride","isSnapCollapsed","VersionBlock","key","componentId","fullName","collapsed","onToggleCollapse","allExpanded"],"sources":["change-log-page.tsx"],"sourcesContent":["import type { ComponentLogsResult, Filters } from '@teambit/component';\nimport { ComponentContext, useComponentLogs as defaultUseComponentLogs } 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 { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { ExportingComponents } from '@teambit/component.instructions.exporting-components';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport type { HTMLAttributes } from 'react';\nimport React, { useContext, useState, useCallback } from 'react';\n\nimport styles from './change-log-page.module.scss';\n\nexport type ChangeLogPageProps = {\n  host?: string;\n  useComponentLogs?: (id: string, host: string, filters?: Filters, skip?: boolean) => ComponentLogsResult;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport function ChangeLogPage({\n  className,\n  useComponentLogs = defaultUseComponentLogs,\n  host = '',\n}: ChangeLogPageProps) {\n  const component = useContext(ComponentContext);\n  const { loading, componentLogs, latest, id } =\n    useComponentLogs?.(component?.id.toString(), host, undefined, !component) || {};\n\n  const [showAllSnaps, setShowAllSnaps] = useState(false);\n  const [snapOverrides, setSnapOverrides] = useState<Set<string>>(new Set());\n\n  const toggleSnap = useCallback((hash: string) => {\n    setSnapOverrides((prev) => {\n      const next = new Set(prev);\n      if (next.has(hash)) {\n        next.delete(hash);\n      } else {\n        next.add(hash);\n      }\n      return next;\n    });\n  }, []);\n\n  if (loading || !componentLogs) return null;\n\n  const { logs = [] } = componentLogs;\n\n  if (logs?.length === 0) {\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 hasSnaps = logs.some((l) => !l.tag);\n\n  return (\n    <div className={classNames(styles.changeLogPage, className)}>\n      <div className={styles.header}>\n        <H1 className={styles.title}>History</H1>\n        {hasSnaps && (\n          <button\n            className={styles.showAllToggle}\n            onClick={() => {\n              setSnapOverrides(new Set());\n              setShowAllSnaps(!showAllSnaps);\n            }}\n            type=\"button\"\n          >\n            <img\n              className={styles.toggleIcon}\n              src={\n                showAllSnaps\n                  ? 'https://static.bit.dev/bit-icons/collapse.svg'\n                  : 'https://static.bit.dev/bit-icons/expand.svg'\n              }\n              alt=\"\"\n            />\n            {showAllSnaps ? 'Collapse snaps' : 'Show all snaps'}\n          </button>\n        )}\n      </div>\n      <div className={styles.timeline}>\n        {logs.map((snap) => {\n          const isLatest = latest === snap.tag || latest === snap.hash;\n          const isCurrent = id?.version === snap.tag || id?.version === snap.hash;\n          const isTag = Boolean(snap.tag);\n          const hasOverride = snapOverrides.has(snap.hash);\n          const isSnapCollapsed = !isTag && (showAllSnaps ? hasOverride : !hasOverride);\n\n          return (\n            <VersionBlock\n              key={snap.hash}\n              componentId={id?.fullName ?? ''}\n              isLatest={isLatest}\n              snap={snap}\n              isCurrent={isCurrent}\n              collapsed={isSnapCollapsed}\n              onToggleCollapse={!isTag ? () => toggleSnap(snap.hash) : undefined}\n              allExpanded={showAllSnaps}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,17 +1,73 @@
 .changeLogPage {
-  padding: 50px 40px 100px 40px;
-  max-width: 1440px;
+  padding: 32px 40px 80px 40px;
+  max-width: 1060px;
   margin: 0 auto;
   width: 100%;
   overflow-y: auto;
   box-sizing: border-box;
 
   .title {
-    margin-bottom: 24px;
+    margin-bottom: 4px;
     font-size: var(--bit-h-xs, 26px);
   }
-  .separator {
-    margin-bottom: 0;
+}
+
+.header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.subtitle {
+  display: block;
+  font-size: var(--bit-p-xs, 14px);
+  color: var(--bit-text-color-light, #6c707c);
+}
+
+.snapCount {
+  opacity: 0.7;
+}
+
+.showAllToggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: 1px solid var(--bit-border-color-lightest, #ededed);
+  border-radius: 6px;
+  padding: 6px 12px;
+  font-size: var(--bit-p-xxs, 12px);
+  color: var(--bit-text-color-light, #6c707c);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    border-color: var(--bit-accent-color, #6c5ce7);
+    color: var(--bit-accent-color, #6c5ce7);
+  }
+}
+
+.toggleIcon {
+  width: 16px;
+  height: 16px;
+  opacity: 0.6;
+}
+
+.timeline {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 118px;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--bit-border-color-lightest, #ededed);
   }
 }
 
@@ -23,7 +79,20 @@
   margin-bottom: 8px;
 }
 
-.logContainer {
-  display: flex;
-  flex-direction: column;
+@media screen and (max-width: 768px) {
+  .changeLogPage {
+    padding: 24px 16px 60px 16px;
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .timeline {
+    &::before {
+      left: 82px;
+    }
+  }
 }

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@teambit/changelog",
-  "version": "1.0.919",
+  "version": "1.0.920",
   "homepage": "https://bit.cloud/teambit/component/changelog",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "changelog",
-    "version": "1.0.919"
+    "version": "1.0.920"
   },
   "dependencies": {
     "classnames": "^2.5.1",
     "@teambit/harmony": "0.4.7",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.502",
     "@teambit/component.instructions.exporting-components": "0.0.7",
-    "@teambit/component.ui.version-block": "0.0.939",
     "@teambit/design.ui.separator": "0.0.367",
     "@teambit/documenter.ui.heading": "4.1.8",
     "@teambit/design.ui.alert-card": "0.0.27",
     "@teambit/mdx.ui.mdx-layout": "1.0.12",
-    "@teambit/component": "1.0.919",
-    "@teambit/ui": "1.0.919"
+    "@teambit/component": "1.0.920",
+    "@teambit/ui": "1.0.920",
+    "@teambit/component.ui.version-block": "0.0.940"
   },
   "devDependencies": {
     "@types/classnames": "^2.3.4",

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

@@ -1,17 +1,73 @@
 .changeLogPage {
-  padding: 50px 40px 100px 40px;
-  max-width: 1440px;
+  padding: 32px 40px 80px 40px;
+  max-width: 1060px;
   margin: 0 auto;
   width: 100%;
   overflow-y: auto;
   box-sizing: border-box;
 
   .title {
-    margin-bottom: 24px;
+    margin-bottom: 4px;
     font-size: var(--bit-h-xs, 26px);
   }
-  .separator {
-    margin-bottom: 0;
+}
+
+.header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.subtitle {
+  display: block;
+  font-size: var(--bit-p-xs, 14px);
+  color: var(--bit-text-color-light, #6c707c);
+}
+
+.snapCount {
+  opacity: 0.7;
+}
+
+.showAllToggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: 1px solid var(--bit-border-color-lightest, #ededed);
+  border-radius: 6px;
+  padding: 6px 12px;
+  font-size: var(--bit-p-xxs, 12px);
+  color: var(--bit-text-color-light, #6c707c);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    border-color: var(--bit-accent-color, #6c5ce7);
+    color: var(--bit-accent-color, #6c5ce7);
+  }
+}
+
+.toggleIcon {
+  width: 16px;
+  height: 16px;
+  opacity: 0.6;
+}
+
+.timeline {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 118px;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--bit-border-color-lightest, #ededed);
   }
 }
 
@@ -23,7 +79,20 @@
   margin-bottom: 8px;
 }
 
-.logContainer {
-  display: flex;
-  flex-direction: column;
+@media screen and (max-width: 768px) {
+  .changeLogPage {
+    padding: 24px 16px 60px 16px;
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .timeline {
+    &::before {
+      left: 82px;
+    }
+  }
 }

package/ui/change-log-page.tsx

@@ -8,7 +8,7 @@ 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 type { HTMLAttributes } from 'react';
-import React, { useContext } from 'react';
+import React, { useContext, useState, useCallback } from 'react';
 
 import styles from './change-log-page.module.scss';
 
@@ -26,6 +26,21 @@ export function ChangeLogPage({
   const { loading, componentLogs, latest, id } =
     useComponentLogs?.(component?.id.toString(), host, undefined, !component) || {};
 
+  const [showAllSnaps, setShowAllSnaps] = useState(false);
+  const [snapOverrides, setSnapOverrides] = useState<Set<string>>(new Set());
+
+  const toggleSnap = useCallback((hash: string) => {
+    setSnapOverrides((prev) => {
+      const next = new Set(prev);
+      if (next.has(hash)) {
+        next.delete(hash);
+      } else {
+        next.add(hash);
+      }
+      return next;
+    });
+  }, []);
+
   if (loading || !componentLogs) return null;
 
   const { logs = [] } = componentLogs;
@@ -49,21 +64,52 @@ export function ChangeLogPage({
     );
   }
 
+  const hasSnaps = logs.some((l) => !l.tag);
+
   return (
     <div className={classNames(styles.changeLogPage, className)}>
-      <H1 className={styles.title}>History</H1>
-      <Separator isPresentational className={styles.separator} />
-      <div className={styles.logContainer}>
-        {logs.map((snap, index) => {
+      <div className={styles.header}>
+        <H1 className={styles.title}>History</H1>
+        {hasSnaps && (
+          <button
+            className={styles.showAllToggle}
+            onClick={() => {
+              setSnapOverrides(new Set());
+              setShowAllSnaps(!showAllSnaps);
+            }}
+            type="button"
+          >
+            <img
+              className={styles.toggleIcon}
+              src={
+                showAllSnaps
+                  ? 'https://static.bit.dev/bit-icons/collapse.svg'
+                  : 'https://static.bit.dev/bit-icons/expand.svg'
+              }
+              alt=""
+            />
+            {showAllSnaps ? 'Collapse snaps' : 'Show all snaps'}
+          </button>
+        )}
+      </div>
+      <div className={styles.timeline}>
+        {logs.map((snap) => {
           const isLatest = latest === snap.tag || latest === snap.hash;
           const isCurrent = id?.version === snap.tag || id?.version === snap.hash;
+          const isTag = Boolean(snap.tag);
+          const hasOverride = snapOverrides.has(snap.hash);
+          const isSnapCollapsed = !isTag && (showAllSnaps ? hasOverride : !hasOverride);
+
           return (
             <VersionBlock
-              key={index}
+              key={snap.hash}
               componentId={id?.fullName ?? ''}
               isLatest={isLatest}
               snap={snap}
               isCurrent={isCurrent}
+              collapsed={isSnapCollapsed}
+              onToggleCollapse={!isTag ? () => toggleSnap(snap.hash) : undefined}
+              allExpanded={showAllSnaps}
             />
           );
         })}