@teambit/component.ui.version-dropdown 0.0.0-01a8c14a78caf9ebef95a98498b8e3e2a0b8268f

package/version-dropdown-placeholder.tsx

@@ -0,0 +1,109 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import classNames from 'classnames';
+import * as semver from 'semver';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { TimeAgo } from '@teambit/design.ui.time-ago';
+import { UserAvatar } from '@teambit/design.ui.avatar';
+import { WordSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import type { DropdownComponentVersion } from './version-dropdown';
+
+import styles from './version-dropdown-placeholder.module.scss';
+
+export type VersionProps = {
+  currentVersion?: string;
+  isTag?: (version?: string) => boolean;
+  disabled?: boolean;
+  hasMoreVersions?: boolean;
+  showFullVersion?: boolean;
+  loading?: boolean;
+  useCurrentVersionLog?: (props: { skip?: boolean; version?: string }) => DropdownComponentVersion | undefined;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function SimpleVersion({
+  currentVersion,
+  className,
+  disabled,
+  hasMoreVersions,
+  isTag = (version) => semver.valid(version) !== null,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  useCurrentVersionLog,
+  showFullVersion,
+  loading,
+  ...rest
+}: VersionProps) {
+  if (loading) return <WordSkeleton className={styles.loader} length={9} />;
+  const formattedVersion = showFullVersion || isTag(currentVersion) ? currentVersion : currentVersion?.slice(0, 6);
+
+  return (
+    <div {...rest} className={classNames(styles.simple, className, disabled && styles.disabled)}>
+      <Ellipsis className={classNames(styles.versionName)} onClick={rest.onClick}>
+        {formattedVersion}
+      </Ellipsis>
+      {hasMoreVersions && <Icon of="fat-arrow-down" onClick={rest.onClick} />}
+    </div>
+  );
+}
+
+export function DetailedVersion({
+  currentVersion,
+  className,
+  disabled,
+  hasMoreVersions,
+  isTag = (version) => semver.valid(version) !== null,
+  loading,
+  useCurrentVersionLog,
+  showFullVersion,
+  ...rest
+}: VersionProps) {
+  const currentVersionLog = useCurrentVersionLog?.({ skip: loading, version: currentVersion });
+  const { displayName, message, username, email, date: _date, profileImage } = currentVersionLog || {};
+  const author = React.useMemo(() => {
+    return {
+      displayName: displayName ?? '',
+      email,
+      name: username ?? '',
+      profileImage,
+    };
+  }, [displayName, email, username, profileImage]);
+  const formattedVersion = showFullVersion || isTag(currentVersion) ? currentVersion : currentVersion?.slice(0, 6);
+
+  const date = _date ? new Date(+_date) : undefined;
+  const timestamp = React.useMemo(() => (date ? new Date(+date).toString() : new Date().toString()), [date]);
+  if (loading) return <WordSkeleton className={styles.loader} length={9} />;
+
+  return (
+    <div {...rest} className={classNames(styles.detailed, className, disabled && styles.disabled)}>
+      <UserAvatar
+        size={24}
+        account={author ?? {}}
+        className={styles.versionUserAvatar}
+        showTooltip={true}
+        onClick={rest.onClick}
+      />
+      <Ellipsis className={classNames(styles.versionName)} onClick={rest.onClick}>
+        {formattedVersion}
+      </Ellipsis>
+      {commitMessage(message, rest.onClick)}
+      <Ellipsis className={styles.versionTimestamp} onClick={rest.onClick}>
+        <TimeAgo date={timestamp} onClick={rest.onClick} />
+      </Ellipsis>
+      {hasMoreVersions && <Icon of="fat-arrow-down" onClick={rest.onClick} />}
+    </div>
+  );
+}
+
+function commitMessage(message?: string, onClick?: React.MouseEventHandler<HTMLDivElement> | undefined) {
+  if (!message || message === '')
+    return (
+      <Ellipsis className={styles.emptyMessage} onClick={onClick}>
+        No commit message
+      </Ellipsis>
+    );
+  return (
+    <Ellipsis className={styles.commitMessage} onClick={onClick}>
+      {message}
+    </Ellipsis>
+  );
+}

package/version-dropdown.composition.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
+import { VersionDropdown } from './version-dropdown';
+
+const style = { display: 'flex', justifyContent: 'center', alignContent: 'center' };
+
+export const VersionDropdownWithOneVersion = () => {
+  return (
+    <ThemeCompositions style={style}>
+      <VersionDropdown
+        useComponentVersions={() => ({
+          tags: [{ version: '0.1' }],
+        })}
+        currentVersion="0.1"
+      />
+    </ThemeCompositions>
+  );
+};
+
+export const VersionDropdownWithMultipleVersions = () => {
+  const versions = ['0.3', '0.2', '0.1'].map((version) => ({ version }));
+
+  return (
+    <ThemeCompositions style={style}>
+      <MemoryRouter>
+        <VersionDropdown
+          useComponentVersions={() => ({
+            tags: [{ version: '0.1' }],
+          })}
+          currentVersion={versions[0].version}
+        />
+      </MemoryRouter>
+    </ThemeCompositions>
+  );
+};

package/version-dropdown.docs.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Section } from '@teambit/documenter.ui.section';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
+import { Separator } from '@teambit/documenter.ui.separator';
+import { VersionDropdown } from './version-dropdown';
+
+export default function Overview() {
+  return (
+    <ThemeCompositions>
+      <>
+        <Section>
+          The version-dropdown displays the latest version of the viewed component. <br />
+          If previous versions are available, the component will display a list of them, when clicked. <br />
+          This allows the user to navigate to previous versions, and explore them.
+        </Section>
+        <Separator />
+      </>
+    </ThemeCompositions>
+  );
+}
+
+Overview.abstract = 'The version-dropdown lists the latest and previous versions of the viewed component.';
+
+Overview.labels = ['react', 'typescript', 'version', 'dropdown'];
+
+const style = { display: 'flex', justifyContent: 'center', alignContent: 'center' };
+
+Overview.examples = [
+  {
+    scope: {
+      VersionDropdown,
+      style,
+    },
+    title: 'Version Dropdown',
+    description: 'Using the Version Dropdown component with one verion',
+    code: `
+    () => {
+      return (
+        <div style={{...style, minHeight: 150 }}>
+          <VersionDropdown versions={['0.1']} currentVersion="0.1" />
+        </div>
+      );
+    }
+      `,
+  },
+  {
+    scope: {
+      VersionDropdown,
+      style,
+      MemoryRouter,
+    },
+    title: 'Version Dropdown with multiple versions',
+    description: 'Using the Version Dropdown component with more than one version',
+    code: `
+    () => {
+      const versions = ['0.3', '0.2', '0.1'];
+      return (
+        <div style={{...style, minHeight: 400, alignItems: 'end', justifyContent: 'flex-end', margin: 10 }}>
+          <MemoryRouter>
+            <VersionDropdown versions={versions} currentVersion={versions[0]} />
+          </MemoryRouter>
+        </div>
+      );
+    }
+      `,
+  },
+];

package/version-dropdown.module.scss

@@ -0,0 +1,139 @@
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.versionDropdown {
+  .menu {
+    padding: 0;
+    right: 0;
+    font-size: var(--bit-p-xs);
+    border-radius: 8px;
+    z-index: $modal-z-index;
+    border: 1px solid var(--border-medium-color, #ededed);
+  }
+}
+
+.versionContainerRoot {
+  max-height: 240px;
+  overflow-y: scroll;
+  position: relative;
+  padding-bottom: 8px;
+}
+
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+
+  &:hover {
+    background-color: var(--surface-hover-color, #eceaff) !important;
+  }
+
+  &.localVersion {
+    border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+  }
+
+  .versionTimestamp {
+    margin-right: 2px;
+  }
+
+  .versionUserAvatar {
+    padding: 0px 8px;
+  }
+
+  .laneIcon {
+    padding: 0px 4px;
+  }
+
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+  }
+
+  .versionName {
+    padding: 0px 8px;
+    min-width: fit-content;
+    text-transform: capitalize;
+  }
+}
+
+.withVersions {
+  cursor: pointer;
+
+  > div {
+    margin-right: 5px;
+  }
+
+  > span {
+    display: unset;
+  }
+
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+
+  [data-open='true'] & {
+    transition:
+      color 300ms,
+      background-color 300ms ease-in-out;
+    background-color: var(--bit-bg-color, #ffffff);
+    color: var(--bit-accent-color, #6c5ce7);
+
+    &:hover {
+      background-color: var(--bit-bg-color, #ffffff);
+    }
+  }
+}
+
+.tabs {
+  display: flex;
+  padding: 0 24px;
+  line-height: 14px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  overflow-x: auto;
+  margin-top: 8px;
+
+  &.withoutLocal {
+    padding-top: 8px;
+  }
+
+  .tab {
+    font-weight: bold;
+    padding-top: 4px;
+    font-size: 12px;
+  }
+}
+
+.loading {
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.loader {
+  color: var(--bit-bg-dent, #f6f6f6);
+
+  > div {
+    padding: 8px 0px;
+    border-radius: 0px;
+    &:first-child {
+      border-top-left-radius: 7px;
+      border-top-right-radius: 7px;
+    }
+    &:last-child {
+      border-bottom-left-radius: 7px;
+      border-bottom-right-radius: 7px;
+    }
+  }
+}
+
+.versionMenuContainer {
+  display: initial;
+
+  &.hide {
+    display: none;
+  }
+}

package/version-dropdown.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { expect } from 'chai';
+import { VersionDropdownWithOneVersion, VersionDropdownWithMultipleVersions } from './version-dropdown.composition';
+
+describe('version dropdown tests', () => {
+  /**
+   *  https://github.com/jsdom/jsdom/issues/1695
+   *  scrollIntoView is not implemented in jsdom
+   * */
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = jest.fn();
+  });
+  it('should render one version', () => {
+    const { getByText } = render(<VersionDropdownWithOneVersion />);
+    const textVersion = getByText(/^0.1$/);
+    expect(textVersion).to.exist;
+  });
+  it('should not return multiple versions when mounted (lazy loading)', () => {
+    render(<VersionDropdownWithMultipleVersions />);
+    const textVersionOne = screen.queryByText(/^0.1$/);
+    const textVersionTwo = screen.queryByText(/^0.2$/);
+    const textVersionThree = screen.getAllByText(/^0.3$/);
+
+    expect(textVersionOne).to.be.null;
+    expect(textVersionTwo).to.be.null;
+    expect(textVersionThree).to.have.lengthOf.at.least(1);
+  });
+});

package/version-dropdown.tsx

@@ -0,0 +1,325 @@
+import React, { useState, useEffect, useCallback, useMemo, memo, type ComponentType, type HTMLAttributes } from 'react';
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
+import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
+import { Tab } from '@teambit/ui-foundation.ui.use-box.tab';
+import type { LegacyComponentLog } from '@teambit/legacy-component-log';
+import { UserAvatar } from '@teambit/design.ui.avatar';
+import { LineSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import type { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
+import classNames from 'classnames';
+import styles from './version-dropdown.module.scss';
+import { VersionInfo } from './version-info';
+import { LaneInfo } from './lane-info';
+import type { VersionProps } from './version-dropdown-placeholder';
+import { SimpleVersion } from './version-dropdown-placeholder';
+
+export const LOCAL_VERSION = 'workspace';
+
+export type DropdownComponentVersion = Partial<LegacyComponentLog> & { version: string };
+
+export type UseComponentDropdownVersionsResult = {
+  tags?: DropdownComponentVersion[];
+  snaps?: DropdownComponentVersion[];
+  loading?: boolean;
+};
+export type UseComponentDropdownVersionsProps = {
+  skip?: boolean;
+};
+export type UseComponentDropdownVersions = (
+  props?: UseComponentDropdownVersionsProps
+) => UseComponentDropdownVersionsResult;
+export type GetActiveTabIndex = (
+  currentVersion?: string,
+  tabs?: Array<VersionMenuTab>,
+  tags?: DropdownComponentVersion[],
+  snaps?: DropdownComponentVersion[],
+  currentLane?: LaneModel
+) => number;
+export type VersionDropdownProps = {
+  localVersion?: boolean;
+  latestVersion?: string;
+  currentVersion: string;
+  useCurrentVersionLog?: (props?: { skip?: boolean; version?: string }) => DropdownComponentVersion | undefined;
+  hasMoreVersions?: boolean;
+  loading?: boolean;
+  useComponentVersions?: UseComponentDropdownVersions;
+  currentLane?: LaneModel;
+  lanes?: LaneModel[];
+  getActiveTabIndex?: GetActiveTabIndex;
+  overrideVersionHref?: (version: string) => string;
+  placeholderClassName?: string;
+  dropdownClassName?: string;
+  menuClassName?: string;
+  showVersionDetails?: boolean;
+  disabled?: boolean;
+  PlaceholderComponent?: ComponentType<VersionProps>;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const VersionDropdown = memo(_VersionDropdown);
+const VersionMenu = memo(_VersionMenu);
+function _VersionDropdown({
+  currentVersion,
+  latestVersion,
+  localVersion,
+  useCurrentVersionLog,
+  hasMoreVersions,
+  loading,
+  overrideVersionHref,
+  className,
+  placeholderClassName,
+  getActiveTabIndex,
+  dropdownClassName,
+  menuClassName,
+  showVersionDetails = true,
+  disabled,
+  PlaceholderComponent: _PlaceholderComponent,
+  currentLane,
+  useComponentVersions,
+  lanes,
+  ...rest
+}: VersionDropdownProps) {
+  const [key, setKey] = useState(0);
+  const singleVersion = !hasMoreVersions;
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (loading && open) {
+      setOpen(false);
+    }
+  }, [loading]);
+
+  const handlePlaceholderClicked = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (loading) return;
+    if (e.target === e.currentTarget) {
+      setOpen((o) => !o);
+    }
+  };
+
+  const defaultPlaceholder = (
+    <SimpleVersion
+      useCurrentVersionLog={useCurrentVersionLog}
+      disabled={disabled}
+      className={placeholderClassName}
+      currentVersion={currentVersion}
+      onClick={handlePlaceholderClicked}
+      hasMoreVersions={hasMoreVersions}
+      loading={loading}
+      showFullVersion={currentVersion === 'workspace'}
+    />
+  );
+
+  const PlaceholderComponent = _PlaceholderComponent ? (
+    <_PlaceholderComponent
+      useCurrentVersionLog={useCurrentVersionLog}
+      disabled={disabled}
+      className={placeholderClassName}
+      currentVersion={currentVersion}
+      onClick={handlePlaceholderClicked}
+      hasMoreVersions={hasMoreVersions}
+      loading={loading}
+      showFullVersion={currentVersion === 'workspace'}
+    />
+  ) : (
+    defaultPlaceholder
+  );
+
+  if (disabled || (singleVersion && !loading)) {
+    return <div className={classNames(styles.noVersions, className)}>{PlaceholderComponent}</div>;
+  }
+
+  return (
+    <div {...rest} className={classNames(styles.versionDropdown, className)}>
+      <Dropdown
+        className={classNames(styles.dropdown, dropdownClassName)}
+        dropClass={classNames(styles.menu, menuClassName)}
+        open={open}
+        onClick={handlePlaceholderClicked}
+        onClickOutside={() => setOpen(false)}
+        onChange={(_e, _open) => _open && setKey((x) => x + 1)} // to reset menu to initial state when toggling
+        PlaceholderComponent={({ children, ...other }) => (
+          <div {...other} className={placeholderClassName} onClick={handlePlaceholderClicked}>
+            {children}
+          </div>
+        )}
+        placeholder={PlaceholderComponent}
+      >
+        <VersionMenu
+          className={menuClassName}
+          key={key}
+          currentVersion={currentVersion}
+          latestVersion={latestVersion}
+          localVersion={localVersion}
+          overrideVersionHref={overrideVersionHref}
+          showVersionDetails={showVersionDetails}
+          currentLane={currentLane}
+          getActiveTabIndex={getActiveTabIndex}
+          lanes={lanes}
+          useVersions={useComponentVersions}
+          onVersionClicked={() => setOpen(false)}
+          open={open}
+        />
+      </Dropdown>
+    </div>
+  );
+}
+
+type VersionMenuProps = {
+  localVersion?: boolean;
+  currentVersion?: string;
+  latestVersion?: string;
+  useVersions?: UseComponentDropdownVersions;
+  currentLane?: LaneModel;
+  lanes?: LaneModel[];
+  overrideVersionHref?: (version: string) => string;
+  showVersionDetails?: boolean;
+  loading?: boolean;
+  getActiveTabIndex?: GetActiveTabIndex;
+  open?: boolean;
+  onVersionClicked?: () => void;
+} & HTMLAttributes<HTMLDivElement>;
+
+export type VersionMenuTab =
+  | {
+      name: 'SNAP';
+      payload: DropdownComponentVersion[];
+    }
+  | {
+      name: 'LANE';
+      payload: LaneModel[];
+    }
+  | {
+      name: 'TAG';
+      payload: DropdownComponentVersion[];
+    };
+
+const defaultActiveTabIndex: GetActiveTabIndex = (currentVersion, tabs = [], tags, snaps) => {
+  if ((snaps || []).some((snap) => snap.version === currentVersion))
+    return tabs.findIndex((tab) => tab.name === 'SNAP');
+  return 0;
+};
+
+const VERSION_TAB_NAMES = ['TAG', 'SNAP', 'LANE'] as const;
+function _VersionMenu({
+  currentVersion,
+  localVersion,
+  latestVersion,
+  overrideVersionHref,
+  showVersionDetails,
+  useVersions,
+  currentLane,
+  lanes,
+  getActiveTabIndex = defaultActiveTabIndex,
+  loading: loadingFromProps,
+  open,
+  onVersionClicked,
+  ...rest
+}: VersionMenuProps) {
+  const { snaps, tags, loading: loadingVersions } = useVersions?.() || {};
+  const loading = loadingFromProps || loadingVersions;
+
+  const tabs = useMemo(
+    () =>
+      VERSION_TAB_NAMES.map((name) => {
+        switch (name) {
+          case 'SNAP':
+            return { name, payload: snaps || [] };
+          case 'LANE':
+            return { name, payload: lanes || [] };
+          default:
+            return { name, payload: tags || [] };
+        }
+      }).filter((tab) => tab.payload.length > 0),
+    [snaps?.length, tags?.length, lanes?.length, loading]
+  );
+
+  const [activeTabIndex, setActiveTab] = useState<number | undefined>(
+    getActiveTabIndex(currentVersion, tabs, tags, snaps, currentLane)
+  );
+
+  const activeTab = useMemo(
+    () => (activeTabIndex !== undefined ? tabs[activeTabIndex] : undefined),
+    [activeTabIndex, tabs]
+  );
+
+  useEffect(() => {
+    if (!currentLane) return;
+    if (tabs.length === 0) return;
+    const _activeTabIndex = getActiveTabIndex(currentVersion, tabs, tags, snaps, currentLane);
+    if (_activeTabIndex !== activeTabIndex) setActiveTab(_activeTabIndex);
+  }, [currentLane, tabs.length, tags?.length, snaps?.length, currentVersion, loading]);
+
+  const multipleTabs = tabs.length > 1;
+
+  const showTab = activeTabIndex !== undefined && tabs[activeTabIndex]?.payload.length > 0;
+
+  const _rowRenderer = useCallback(
+    function VersionRowRenderer({ index }) {
+      const { name, payload = [] } = activeTab || {};
+      const item = payload[index];
+      if (!item) return null;
+      if (name === 'LANE') {
+        const lane = item as LaneModel;
+        return <LaneInfo key={lane.id.toString()} currentLane={currentLane} {...lane}></LaneInfo>;
+      }
+      const version = item as DropdownComponentVersion;
+      return (
+        <VersionInfo
+          key={version.version}
+          currentVersion={currentVersion}
+          latestVersion={latestVersion}
+          overrideVersionHref={overrideVersionHref}
+          showDetails={showVersionDetails}
+          onVersionClicked={onVersionClicked}
+          {...version}
+        />
+      );
+    },
+    [activeTab, currentVersion, latestVersion, showVersionDetails, currentLane?.id.toString(), showTab]
+  );
+
+  const rowRenderer = useMemo(
+    () => (showTab && activeTab ? _rowRenderer : () => null),
+    [showTab, activeTab, _rowRenderer]
+  );
+
+  const ActiveTab = useMemo(() => {
+    return activeTab?.payload.map((payload, index) => {
+      return rowRenderer({ index });
+    });
+  }, [activeTab]);
+
+  return (
+    <div {...rest} className={classNames(styles.versionMenuContainer, !open && styles.hide)}>
+      {loading && <LineSkeleton count={6} className={styles.loader} />}
+      {!loading && localVersion && (
+        <MenuLinkItem
+          href={'?'}
+          active={currentVersion === LOCAL_VERSION}
+          className={classNames(styles.versionRow, styles.localVersion)}
+          onClick={onVersionClicked}
+        >
+          <div className={styles.version}>
+            <UserAvatar size={24} account={{}} className={styles.versionUserAvatar} />
+            <span className={styles.versionName}>{LOCAL_VERSION}</span>
+          </div>
+        </MenuLinkItem>
+      )}
+      <div className={classNames(multipleTabs && styles.tabs, !localVersion && styles.withoutLocal)}>
+        {multipleTabs &&
+          tabs.map(({ name }, index) => {
+            return (
+              <Tab
+                className={styles.tab}
+                key={name}
+                isActive={activeTabIndex === index}
+                onClick={() => setActiveTab(index)}
+              >
+                {name}
+              </Tab>
+            );
+          })}
+      </div>
+      <div className={styles.versionContainerRoot}>{ActiveTab}</div>
+    </div>
+  );
+}