@teambit/component.ui.component-compare.version-picker 0.0.4

package/component-compare-version-picker.module.scss

@@ -0,0 +1,60 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.componentCompareVersionPicker {
+  display: flex;
+  flex-direction: row;
+  padding: 8px 0px;
+}
+
+.componentCompareVersionMenu {
+  left: 0;
+  min-width: 400px;
+}
+.showMenuOverNav {
+  z-index: $topBar-zIndex;
+}
+
+.componentCompareVersionPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.componentCompareVersionContainer {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  font-size: 14px;
+
+  &.left {
+    padding-right: 16px;
+  }
+  &.right {
+    padding-left: 16px;
+  }
+}
+
+.componentCompareDropdown {
+  width: 100%;
+}
+.arrowContainer {
+  height: 60%;
+  align-self: center;
+  display: flex;
+  img {
+    display: flex;
+    align-self: center;
+    height: 100%;
+  }
+}
+
+.titleText {
+  display: flex;
+  align-self: center;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.rightPad {
+  padding-right: 8px;
+}

package/component-compare-version-picker.tsx

@@ -0,0 +1,84 @@
+import React, { HTMLAttributes, useContext, useMemo } from 'react';
+import compact from 'lodash.compact';
+import { LegacyComponentLog } from '@teambit/legacy-component-log';
+import { DropdownComponentVersion, VersionDropdown } from '@teambit/component.ui.version-dropdown';
+import { useUpdatedUrlFromQuery } from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
+import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
+import { ComponentContext } from '@teambit/component';
+import classNames from 'classnames';
+
+import styles from './component-compare-version-picker.module.scss';
+
+export type ComponentCompareVersionPickerProps = {} & HTMLAttributes<HTMLDivElement>;
+
+export function ComponentCompareVersionPicker({ className }: ComponentCompareVersionPickerProps) {
+  const component = useContext(ComponentContext);
+  const componentCompare = useComponentCompare();
+
+  const snaps: DropdownComponentVersion[] = useMemo(() => {
+    const logs = component?.logs;
+    return (logs || [])
+      .filter((log) => !log.tag)
+      .map((snap) => ({ ...snap, version: snap.hash }))
+      .reverse();
+  }, [component?.logs]);
+
+  const tags: DropdownComponentVersion[] = useMemo(() => {
+    const tagLookup = new Map<string, LegacyComponentLog>();
+    const logs = component?.logs;
+
+    (logs || [])
+      .filter((log) => log.tag)
+      .forEach((tag) => {
+        tagLookup.set(tag?.tag as string, tag);
+      });
+    return compact(
+      component?.tags
+        ?.toArray()
+        .reverse()
+        .map((tag) => tagLookup.get(tag.version.version))
+    ).map((tag) => ({ ...tag, version: tag.tag as string }));
+  }, [component?.logs]);
+
+  const compareVersion = componentCompare?.compare?.hasLocalChanges
+    ? 'workspace'
+    : componentCompare?.compare?.model.version;
+
+  const baseVersion = componentCompare?.base?.model.version;
+
+  const key = `base-compare-version-dropdown-${componentCompare?.compare?.model.id.toString()}`;
+
+  return (
+    <div className={styles.componentCompareVersionPicker}>
+      <div className={classNames(styles.titleText, styles.rightPad)}>Comparing</div>
+      <VersionDropdown
+        key={key}
+        className={classNames(styles.componentCompareVersionContainer, styles.left, className)}
+        dropdownClassName={styles.componentCompareDropdown}
+        placeholderClassName={styles.componentCompareVersionPlaceholder}
+        menuClassName={classNames(styles.componentCompareVersionMenu, styles.showMenuOverNav)}
+        snaps={snaps}
+        tags={tags}
+        currentVersion={baseVersion as string}
+        loading={componentCompare?.loading}
+        overrideVersionHref={(_baseVersion) => {
+          return useUpdatedUrlFromQuery({ baseVersion: _baseVersion });
+        }}
+        disabled={snaps.concat(tags).length < 2}
+        showVersionDetails={true}
+      />
+      <div className={styles.titleText}>with</div>
+      <VersionDropdown
+        className={classNames(styles.componentCompareVersionContainer, styles.right)}
+        dropdownClassName={styles.componentCompareDropdown}
+        placeholderClassName={styles.componentCompareVersionPlaceholder}
+        menuClassName={styles.componentCompareVersionMenu}
+        snaps={snaps}
+        tags={tags}
+        disabled={true}
+        loading={componentCompare?.loading}
+        currentVersion={compareVersion as string}
+      />
+    </div>
+  );
+}

package/dist/component-compare-version-picker.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export declare type ComponentCompareVersionPickerProps = {} & HTMLAttributes<HTMLDivElement>;
+export declare function ComponentCompareVersionPicker({ className }: ComponentCompareVersionPickerProps): JSX.Element;

package/dist/component-compare-version-picker.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentCompareVersionPicker = void 0;
+const react_1 = __importStar(require("react"));
+const lodash_compact_1 = __importDefault(require("lodash.compact"));
+const component_ui_version_dropdown_1 = require("@teambit/component.ui.version-dropdown");
+const component_ui_component_compare_hooks_use_component_compare_url_1 = require("@teambit/component.ui.component-compare.hooks.use-component-compare-url");
+const component_ui_component_compare_context_1 = require("@teambit/component.ui.component-compare.context");
+const component_1 = require("@teambit/component");
+const classnames_1 = __importDefault(require("classnames"));
+const component_compare_version_picker_module_scss_1 = __importDefault(require("./component-compare-version-picker.module.scss"));
+function ComponentCompareVersionPicker({ className }) {
+    var _a, _b, _c, _d;
+    const component = (0, react_1.useContext)(component_1.ComponentContext);
+    const componentCompare = (0, component_ui_component_compare_context_1.useComponentCompare)();
+    const snaps = (0, react_1.useMemo)(() => {
+        const logs = component === null || component === void 0 ? void 0 : component.logs;
+        return (logs || [])
+            .filter((log) => !log.tag)
+            .map((snap) => (Object.assign(Object.assign({}, snap), { version: snap.hash })))
+            .reverse();
+    }, [component === null || component === void 0 ? void 0 : component.logs]);
+    const tags = (0, react_1.useMemo)(() => {
+        var _a;
+        const tagLookup = new Map();
+        const logs = component === null || component === void 0 ? void 0 : component.logs;
+        (logs || [])
+            .filter((log) => log.tag)
+            .forEach((tag) => {
+            tagLookup.set(tag === null || tag === void 0 ? void 0 : tag.tag, tag);
+        });
+        return (0, lodash_compact_1.default)((_a = component === null || component === void 0 ? void 0 : component.tags) === null || _a === void 0 ? void 0 : _a.toArray().reverse().map((tag) => tagLookup.get(tag.version.version))).map((tag) => (Object.assign(Object.assign({}, tag), { version: tag.tag })));
+    }, [component === null || component === void 0 ? void 0 : component.logs]);
+    const compareVersion = ((_a = componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare) === null || _a === void 0 ? void 0 : _a.hasLocalChanges)
+        ? 'workspace'
+        : (_b = componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare) === null || _b === void 0 ? void 0 : _b.model.version;
+    const baseVersion = (_c = componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.base) === null || _c === void 0 ? void 0 : _c.model.version;
+    const key = `base-compare-version-dropdown-${(_d = componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare) === null || _d === void 0 ? void 0 : _d.model.id.toString()}`;
+    return (react_1.default.createElement("div", { className: component_compare_version_picker_module_scss_1.default.componentCompareVersionPicker },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(component_compare_version_picker_module_scss_1.default.titleText, component_compare_version_picker_module_scss_1.default.rightPad) }, "Comparing"),
+        react_1.default.createElement(component_ui_version_dropdown_1.VersionDropdown, { key: key, className: (0, classnames_1.default)(component_compare_version_picker_module_scss_1.default.componentCompareVersionContainer, component_compare_version_picker_module_scss_1.default.left, className), dropdownClassName: component_compare_version_picker_module_scss_1.default.componentCompareDropdown, placeholderClassName: component_compare_version_picker_module_scss_1.default.componentCompareVersionPlaceholder, menuClassName: (0, classnames_1.default)(component_compare_version_picker_module_scss_1.default.componentCompareVersionMenu, component_compare_version_picker_module_scss_1.default.showMenuOverNav), snaps: snaps, tags: tags, currentVersion: baseVersion, loading: componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.loading, overrideVersionHref: (_baseVersion) => {
+                return (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({ baseVersion: _baseVersion });
+            }, disabled: snaps.concat(tags).length < 2, showVersionDetails: true }),
+        react_1.default.createElement("div", { className: component_compare_version_picker_module_scss_1.default.titleText }, "with"),
+        react_1.default.createElement(component_ui_version_dropdown_1.VersionDropdown, { className: (0, classnames_1.default)(component_compare_version_picker_module_scss_1.default.componentCompareVersionContainer, component_compare_version_picker_module_scss_1.default.right), dropdownClassName: component_compare_version_picker_module_scss_1.default.componentCompareDropdown, placeholderClassName: component_compare_version_picker_module_scss_1.default.componentCompareVersionPlaceholder, menuClassName: component_compare_version_picker_module_scss_1.default.componentCompareVersionMenu, snaps: snaps, tags: tags, disabled: true, loading: componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.loading, currentVersion: compareVersion })));
+}
+exports.ComponentCompareVersionPicker = ComponentCompareVersionPicker;
+//# sourceMappingURL=component-compare-version-picker.js.map

package/dist/component-compare-version-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-compare-version-picker.js","sourceRoot":"","sources":["../component-compare-version-picker.tsx"],"names":[],"mappings":"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"}

package/dist/component-compare-version-picker.module.scss

@@ -0,0 +1,60 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.componentCompareVersionPicker {
+  display: flex;
+  flex-direction: row;
+  padding: 8px 0px;
+}
+
+.componentCompareVersionMenu {
+  left: 0;
+  min-width: 400px;
+}
+.showMenuOverNav {
+  z-index: $topBar-zIndex;
+}
+
+.componentCompareVersionPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.componentCompareVersionContainer {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  font-size: 14px;
+
+  &.left {
+    padding-right: 16px;
+  }
+  &.right {
+    padding-left: 16px;
+  }
+}
+
+.componentCompareDropdown {
+  width: 100%;
+}
+.arrowContainer {
+  height: 60%;
+  align-self: center;
+  display: flex;
+  img {
+    display: flex;
+    align-self: center;
+    height: 100%;
+  }
+}
+
+.titleText {
+  display: flex;
+  align-self: center;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.rightPad {
+  padding-right: 8px;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { ComponentCompareVersionPicker, ComponentCompareVersionPickerProps } from './component-compare-version-picker';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentCompareVersionPicker = void 0;
+var component_compare_version_picker_1 = require("./component-compare-version-picker");
+Object.defineProperty(exports, "ComponentCompareVersionPicker", { enumerable: true, get: function () { return component_compare_version_picker_1.ComponentCompareVersionPicker; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,uFAAuH;AAA9G,iJAAA,6BAA6B,OAAA"}

package/dist/preview-1670470092710.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "es2019",
+            "DOM",
+            "ES6",
+            "DOM.Iterable"
+        ],
+        "target": "es2015",
+        "module": "CommonJS",
+        "jsx": "react",
+        "allowJs": true,
+        "composite": true,
+        "declaration": true,
+        "sourceMap": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "rootDir": ".",
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "dist",
+        "package.json"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

package/index.ts

@@ -0,0 +1 @@
+export { ComponentCompareVersionPicker, ComponentCompareVersionPickerProps } from './component-compare-version-picker';

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@teambit/component.ui.component-compare.version-picker",
+  "version": "0.0.4",
+  "homepage": "https://bit.dev/teambit/component/ui/component-compare/version-picker",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/component-compare/version-picker",
+    "version": "0.0.4"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "lodash.compact": "3.0.1",
+    "core-js": "^3.0.0",
+    "@teambit/component.ui.component-compare.hooks.use-component-compare-url": "0.0.1",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498",
+    "@teambit/component.ui.component-compare.context": "0.0.4",
+    "@teambit/component.ui.version-dropdown": "0.0.686",
+    "@teambit/legacy-component-log": "0.0.399"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/lodash.compact": "3.0.6",
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@babel/runtime": "7.20.0",
+    "@types/jest": "^26.0.0",
+    "@types/react-dom": "^17.0.5",
+    "@types/node": "12.20.4"
+  },
+  "peerDependencies": {
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2019",
+      "DOM",
+      "ES6",
+      "DOM.Iterable"
+    ],
+    "target": "es2015",
+    "module": "CommonJS",
+    "jsx": "react",
+    "allowJs": true,
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": ".",
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
+  ]
+}

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;
+}