@teambit/component.ui.component-compare.changelog 0.0.4

package/component-compare-changelog.module.scss

@@ -0,0 +1,7 @@
+.changeLogPage {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  overflow-y: auto;
+  box-sizing: border-box;
+}

package/component-compare-changelog.tsx

@@ -0,0 +1,81 @@
+import React, { HTMLAttributes, useMemo, useContext } from 'react';
+import { LegacyComponentLog } from '@teambit/legacy-component-log';
+import { VersionBlock } from '@teambit/component.ui.version-block';
+import { ComponentContext } from '@teambit/component';
+import classNames from 'classnames';
+import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
+import { sortByDateDsc } from '@teambit/component.ui.component-compare.utils.sort-logs';
+
+import styles from './component-compare-changelog.module.scss';
+
+export type ComponentCompareChangelog = {} & HTMLAttributes<HTMLDivElement>;
+
+const orderByDateDsc: (
+  logA?: LegacyComponentLog,
+  logB?: LegacyComponentLog
+) => [LegacyComponentLog | undefined, LegacyComponentLog | undefined] = (logA, logB) => {
+  const { date: dateStrB } = logB || {};
+  const { date: dateStrA } = logA || {};
+
+  const dateA = dateStrA ? new Date(parseInt(dateStrA)) : new Date();
+  const dateB = dateStrB ? new Date(parseInt(dateStrB)) : new Date();
+
+  if (dateA <= dateB) return [logB, logA];
+  return [logA, logB];
+};
+
+const getLogsBetweenVersions: (
+  allLogs: LegacyComponentLog[],
+  baseVersion?: LegacyComponentLog,
+  compareVersion?: LegacyComponentLog
+) => LegacyComponentLog[] = (allLogs, baseVersion, compareVersion) => {
+  const [startingVersion, endingVersion] = orderByDateDsc(baseVersion, compareVersion);
+  const { startingVersionIndex, endingVersionIndex } = allLogs.reduce((accum, next, index) => {
+    if (next.hash === startingVersion?.hash) {
+      accum = { ...accum, startingVersionIndex: index };
+    }
+    if (next.hash === endingVersion?.hash) {
+      accum = { ...accum, endingVersionIndex: index };
+    }
+    return accum;
+  }, {} as { startingVersionIndex: number; endingVersionIndex: number });
+
+  return allLogs.filter((_, index) => index >= startingVersionIndex && index <= endingVersionIndex);
+};
+
+export function ComponentCompareChangelog({ className }: ComponentCompareChangelog) {
+  const component = useContext(ComponentContext);
+  const componentCompareContext = useComponentCompare();
+  const { base, compare, logsByVersion } = componentCompareContext || {};
+
+  const allLogs = useMemo(
+    () => (compare?.model.logs || []).slice().sort(sortByDateDsc),
+    [compare?.model.id.toString()]
+  );
+
+  const baseVersionInfo = base?.model.version ? logsByVersion?.get(base?.model.version) : undefined;
+  const compareVersionInfo = compare?.model.version ? logsByVersion?.get(compare?.model.version) : undefined;
+
+  const logs = useMemo(
+    () => getLogsBetweenVersions(allLogs, baseVersionInfo, compareVersionInfo),
+    [baseVersionInfo?.hash, compareVersionInfo?.hash]
+  );
+
+  return (
+    <div className={classNames(styles.changeLogPage, className)}>
+      {logs.map((snap, index) => {
+        const isLatest = component.latest === snap.tag || component.latest === snap.hash;
+        const isCurrent = component.version === snap.tag || component.version === snap.hash;
+        return (
+          <VersionBlock
+            isCurrent={isCurrent}
+            isLatest={isLatest}
+            key={`comp-compare-changelog-${index}`}
+            componentId={component.id.fullName}
+            snap={snap}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/dist/component-compare-changelog.d.ts

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

package/dist/component-compare-changelog.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.ComponentCompareChangelog = void 0;
+const react_1 = __importStar(require("react"));
+const component_ui_version_block_1 = require("@teambit/component.ui.version-block");
+const component_1 = require("@teambit/component");
+const classnames_1 = __importDefault(require("classnames"));
+const component_ui_component_compare_context_1 = require("@teambit/component.ui.component-compare.context");
+const component_ui_component_compare_utils_sort_logs_1 = require("@teambit/component.ui.component-compare.utils.sort-logs");
+const component_compare_changelog_module_scss_1 = __importDefault(require("./component-compare-changelog.module.scss"));
+const orderByDateDsc = (logA, logB) => {
+    const { date: dateStrB } = logB || {};
+    const { date: dateStrA } = logA || {};
+    const dateA = dateStrA ? new Date(parseInt(dateStrA)) : new Date();
+    const dateB = dateStrB ? new Date(parseInt(dateStrB)) : new Date();
+    if (dateA <= dateB)
+        return [logB, logA];
+    return [logA, logB];
+};
+const getLogsBetweenVersions = (allLogs, baseVersion, compareVersion) => {
+    const [startingVersion, endingVersion] = orderByDateDsc(baseVersion, compareVersion);
+    const { startingVersionIndex, endingVersionIndex } = allLogs.reduce((accum, next, index) => {
+        if (next.hash === (startingVersion === null || startingVersion === void 0 ? void 0 : startingVersion.hash)) {
+            accum = Object.assign(Object.assign({}, accum), { startingVersionIndex: index });
+        }
+        if (next.hash === (endingVersion === null || endingVersion === void 0 ? void 0 : endingVersion.hash)) {
+            accum = Object.assign(Object.assign({}, accum), { endingVersionIndex: index });
+        }
+        return accum;
+    }, {});
+    return allLogs.filter((_, index) => index >= startingVersionIndex && index <= endingVersionIndex);
+};
+function ComponentCompareChangelog({ className }) {
+    const component = (0, react_1.useContext)(component_1.ComponentContext);
+    const componentCompareContext = (0, component_ui_component_compare_context_1.useComponentCompare)();
+    const { base, compare, logsByVersion } = componentCompareContext || {};
+    const allLogs = (0, react_1.useMemo)(() => ((compare === null || compare === void 0 ? void 0 : compare.model.logs) || []).slice().sort(component_ui_component_compare_utils_sort_logs_1.sortByDateDsc), [compare === null || compare === void 0 ? void 0 : compare.model.id.toString()]);
+    const baseVersionInfo = (base === null || base === void 0 ? void 0 : base.model.version) ? logsByVersion === null || logsByVersion === void 0 ? void 0 : logsByVersion.get(base === null || base === void 0 ? void 0 : base.model.version) : undefined;
+    const compareVersionInfo = (compare === null || compare === void 0 ? void 0 : compare.model.version) ? logsByVersion === null || logsByVersion === void 0 ? void 0 : logsByVersion.get(compare === null || compare === void 0 ? void 0 : compare.model.version) : undefined;
+    const logs = (0, react_1.useMemo)(() => getLogsBetweenVersions(allLogs, baseVersionInfo, compareVersionInfo), [baseVersionInfo === null || baseVersionInfo === void 0 ? void 0 : baseVersionInfo.hash, compareVersionInfo === null || compareVersionInfo === void 0 ? void 0 : compareVersionInfo.hash]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(component_compare_changelog_module_scss_1.default.changeLogPage, className) }, logs.map((snap, index) => {
+        const isLatest = component.latest === snap.tag || component.latest === snap.hash;
+        const isCurrent = component.version === snap.tag || component.version === snap.hash;
+        return (react_1.default.createElement(component_ui_version_block_1.VersionBlock, { isCurrent: isCurrent, isLatest: isLatest, key: `comp-compare-changelog-${index}`, componentId: component.id.fullName, snap: snap }));
+    })));
+}
+exports.ComponentCompareChangelog = ComponentCompareChangelog;
+//# sourceMappingURL=component-compare-changelog.js.map

package/dist/component-compare-changelog.js.map

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

package/dist/component-compare-changelog.module.scss

@@ -0,0 +1,7 @@
+.changeLogPage {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  overflow-y: auto;
+  box-sizing: border-box;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { ComponentCompareChangelog } from './component-compare-changelog';

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6EAA0E;AAAjE,wIAAA,yBAAyB,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 { ComponentCompareChangelog } from './component-compare-changelog';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@teambit/component.ui.component-compare.changelog",
+  "version": "0.0.4",
+  "homepage": "https://bit.dev/teambit/component/ui/component-compare/changelog",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/component-compare/changelog",
+    "version": "0.0.4"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "core-js": "^3.0.0",
+    "@teambit/component.ui.component-compare.context": "0.0.4",
+    "@teambit/component.ui.component-compare.utils.sort-logs": "0.0.1",
+    "@teambit/component.ui.version-block": "0.0.703",
+    "@teambit/legacy-component-log": "0.0.399"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@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;
+}