@teambit/component.ui.version-dropdown 0.0.0-0aa660598a05d04f2b124cb0ae8b4a1c05b66d78

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/version-dropdown-placeholder.module.scss

@@ -0,0 +1,50 @@
+.simple,
+.detailed {
+  cursor: pointer;
+  border: 1px solid var(--bit-border-color, #babec9);
+  border-radius: 6px;
+  transition: background-color 300ms ease-in-out;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  user-select: none;
+  flex-wrap: nowrap;
+  gap: 8px;
+  padding: 8px;
+  line-height: 1.2em;
+
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+
+  &.disabled {
+    cursor: default;
+    background-color: var(--border-medium-color, #ededed);
+    color: var(--on-background-medium-color, #707279);
+    > span {
+      display: none;
+    }
+  }
+}
+.versionName {
+  flex-grow: 1;
+  min-width: fit-content;
+}
+
+.commitMessage {
+  flex-grow: 1;
+  max-width: 200px;
+}
+
+.versionUserAvatar {
+  flex: none;
+  margin-right: 5px;
+}
+
+.loader {
+  color: var(--bit-bg-dent, #f6f6f6);
+  > span {
+    padding: 4px;
+  }
+}

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,128 @@
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.versionDropdown {
+  height: 100%;
+
+  > div {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .menu {
+    padding: 0;
+    right: 0;
+    // top: 43px;
+    font-size: var(--bit-p-xs);
+    border-radius: 6px;
+    z-index: $modal-z-index;
+  }
+}
+
+.title {
+  padding: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.titleContainer {
+  margin-bottom: 2px;
+}
+
+.versionContainerRoot {
+  max-height: 240px;
+  overflow-y: scroll;
+  padding-bottom: 8px;
+  position: relative;
+}
+
+.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);
+  }
+  .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;
+  }
+}
+
+.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;
+
+  .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;
+  }
+}
+
+.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);
+  });
+});