@teambit/component.ui.component-compare.context 0.0.125 → 0.0.127

package/component-compare-context.ts

@@ -1,6 +1,7 @@
 import type { ComponentCompareModel } from '@teambit/component.ui.component-compare.models.component-compare-model';
 import type { ComponentCompareState } from '@teambit/component.ui.component-compare.models.component-compare-state';
 import type { ComponentCompareHooks } from '@teambit/component.ui.component-compare.models.component-compare-hooks';
+import type { APIDiffResult } from '@teambit/semantics.ui.api-diff-view';
 import { createContext, useContext } from 'react';
 
 export type StateAndHooks = {
@@ -16,6 +17,8 @@ export type ComponentCompareContextType = ComponentCompareModel &
   StateAndHooks & {
     baseContext?: StateAndHooks;
     compareContext?: StateAndHooks;
+    /** API diff between base and compare — undefined while loading, null when not computable */
+    apiDiffResult?: APIDiffResult | null;
   } & ViewState;
 
 export const ComponentCompareContext: React.Context<ComponentCompareContextType | undefined> = createContext<

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

@@ -1,6 +1,7 @@
 import type { ComponentCompareModel } from '@teambit/component.ui.component-compare.models.component-compare-model';
 import type { ComponentCompareState } from '@teambit/component.ui.component-compare.models.component-compare-state';
 import type { ComponentCompareHooks } from '@teambit/component.ui.component-compare.models.component-compare-hooks';
+import type { APIDiffResult } from '@teambit/semantics.ui.api-diff-view';
 export type StateAndHooks = {
     state?: ComponentCompareState;
     hooks?: ComponentCompareHooks;
@@ -12,6 +13,8 @@ export type ViewState = {
 export type ComponentCompareContextType = ComponentCompareModel & StateAndHooks & {
     baseContext?: StateAndHooks;
     compareContext?: StateAndHooks;
+    /** API diff between base and compare — undefined while loading, null when not computable */
+    apiDiffResult?: APIDiffResult | null;
 } & ViewState;
 export declare const ComponentCompareContext: React.Context<ComponentCompareContextType | undefined>;
 export declare const useComponentCompare: () => ComponentCompareContextType | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"component-compare-context.js","sourceRoot":"","sources":["../component-compare-context.ts"],"names":[],"mappings":";;;AAGA,iCAAkD;AAiBrC,QAAA,uBAAuB,GAA2D,IAAA,qBAAa,EAE1G,SAAS,CAAC,CAAC;AAEN,MAAM,mBAAmB,GAAkD,GAAG,EAAE;IACrF,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,+BAAuB,CAAC,CAAC;IACpE,OAAO,uBAAuB,CAAC;AACjC,CAAC,CAAC;AAHW,QAAA,mBAAmB,uBAG9B"}
+{"version":3,"file":"component-compare-context.js","sourceRoot":"","sources":["../component-compare-context.ts"],"names":[],"mappings":";;;AAIA,iCAAkD;AAmBrC,QAAA,uBAAuB,GAA2D,IAAA,qBAAa,EAE1G,SAAS,CAAC,CAAC;AAEN,MAAM,mBAAmB,GAAkD,GAAG,EAAE;IACrF,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,+BAAuB,CAAC,CAAC;IACpE,OAAO,uBAAuB,CAAC;AACjC,CAAC,CAAC;AAHW,QAAA,mBAAmB,uBAG9B"}

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export { ComponentCompareContext, useComponentCompare } from './component-compare-context';
 export type { StateAndHooks, ComponentCompareContextType } from './component-compare-context';
+export { InlineCompareEmpty } from './inline-compare-empty';
+export type { InlineCompareEmptyProps } from './inline-compare-empty';

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useComponentCompare = exports.ComponentCompareContext = void 0;
+exports.InlineCompareEmpty = exports.useComponentCompare = exports.ComponentCompareContext = void 0;
 var component_compare_context_1 = require("./component-compare-context");
 Object.defineProperty(exports, "ComponentCompareContext", { enumerable: true, get: function () { return component_compare_context_1.ComponentCompareContext; } });
 Object.defineProperty(exports, "useComponentCompare", { enumerable: true, get: function () { return component_compare_context_1.useComponentCompare; } });
+var inline_compare_empty_1 = require("./inline-compare-empty");
+Object.defineProperty(exports, "InlineCompareEmpty", { enumerable: true, get: function () { return inline_compare_empty_1.InlineCompareEmpty; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,yEAA2F;AAAlF,oIAAA,uBAAuB,OAAA;AAAE,gIAAA,mBAAmB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,yEAA2F;AAAlF,oIAAA,uBAAuB,OAAA;AAAE,gIAAA,mBAAmB,OAAA;AAErD,+DAA4D;AAAnD,0HAAA,kBAAkB,OAAA"}

package/dist/inline-compare-empty.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export type InlineCompareEmptyProps = {
+    /** primary message, e.g. "No code changes" / "No changes to compare" */
+    message: string;
+    /** optional secondary line with more context */
+    hint?: string;
+    /**
+     * when both are provided, a base → compare version pill row is rendered. identical versions are
+     * tinted neutral to signal "same version", different ones are color-coded (base neutral, compare accent).
+     */
+    baseVersion?: string;
+    compareVersion?: string;
+};
+/**
+ * Shared blank state for the compare surfaces (inline tabs, the single-component compare page,
+ * and lane-compare). Renders in place of an empty body so a no-change comparison reads as an
+ * intentional "nothing changed" state instead of a blank pane.
+ */
+export declare function InlineCompareEmpty({ message, hint, baseVersion, compareVersion }: InlineCompareEmptyProps): React.JSX.Element;

package/dist/inline-compare-empty.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineCompareEmpty = InlineCompareEmpty;
+const react_1 = __importDefault(require("react"));
+const ACCENT = 'var(--bit-accent-color, #6c5ce7)';
+const MUTED = 'var(--on-background-medium-color, #a0aec0)';
+const SECONDARY = 'var(--on-surface-medium-color, #707279)';
+const PRIMARY = 'var(--on-surface-color, #1a1a2e)';
+const BORDER = 'var(--border-medium-color, #e8ecf0)';
+const SURFACE = 'var(--surface-color, #fff)';
+function VersionPill({ version, tone }) {
+    const accent = tone === 'compare';
+    return (react_1.default.createElement("span", { style: {
+            fontFamily: 'var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, monospace)',
+            fontSize: 13,
+            fontWeight: 600,
+            padding: '4px 10px',
+            borderRadius: 8,
+            border: `1px solid ${accent ? ACCENT : BORDER}`,
+            background: accent ? 'rgba(108, 92, 231, 0.06)' : SURFACE,
+            color: accent ? ACCENT : PRIMARY,
+            whiteSpace: 'nowrap',
+        } }, version));
+}
+/**
+ * Shared blank state for the compare surfaces (inline tabs, the single-component compare page,
+ * and lane-compare). Renders in place of an empty body so a no-change comparison reads as an
+ * intentional "nothing changed" state instead of a blank pane.
+ */
+function InlineCompareEmpty({ message, hint, baseVersion, compareVersion }) {
+    const hasPills = !!baseVersion && !!compareVersion;
+    const identical = hasPills && baseVersion === compareVersion;
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 12,
+            padding: '48px 16px',
+            textAlign: 'center',
+        } },
+        react_1.default.createElement("span", { style: { fontSize: 15, fontWeight: 600, color: PRIMARY } }, message),
+        hasPills && (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 } },
+            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 12 } },
+                react_1.default.createElement(VersionPill, { version: baseVersion, tone: identical ? 'neutral' : 'base' }),
+                react_1.default.createElement("span", { style: { color: MUTED, fontSize: 16 } }, "\u2192"),
+                react_1.default.createElement(VersionPill, { version: compareVersion, tone: identical ? 'neutral' : 'compare' })),
+            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 12, fontSize: 11, color: MUTED } },
+                react_1.default.createElement("span", { style: { minWidth: 64 } }, "base"),
+                react_1.default.createElement("span", { style: { width: 16 } }),
+                react_1.default.createElement("span", { style: { minWidth: 64 } }, "compare")))),
+        hint && react_1.default.createElement("span", { style: { fontSize: 13, color: SECONDARY, maxWidth: 440, lineHeight: 1.5 } }, hint)));
+}
+//# sourceMappingURL=inline-compare-empty.js.map

package/dist/inline-compare-empty.js.map

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

package/index.ts

@@ -1,2 +1,4 @@
 export { ComponentCompareContext, useComponentCompare } from './component-compare-context';
 export type { StateAndHooks, ComponentCompareContextType } from './component-compare-context';
+export { InlineCompareEmpty } from './inline-compare-empty';
+export type { InlineCompareEmptyProps } from './inline-compare-empty';

package/inline-compare-empty.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+export type InlineCompareEmptyProps = {
+  /** primary message, e.g. "No code changes" / "No changes to compare" */
+  message: string;
+  /** optional secondary line with more context */
+  hint?: string;
+  /**
+   * when both are provided, a base → compare version pill row is rendered. identical versions are
+   * tinted neutral to signal "same version", different ones are color-coded (base neutral, compare accent).
+   */
+  baseVersion?: string;
+  compareVersion?: string;
+};
+
+const ACCENT = 'var(--bit-accent-color, #6c5ce7)';
+const MUTED = 'var(--on-background-medium-color, #a0aec0)';
+const SECONDARY = 'var(--on-surface-medium-color, #707279)';
+const PRIMARY = 'var(--on-surface-color, #1a1a2e)';
+const BORDER = 'var(--border-medium-color, #e8ecf0)';
+const SURFACE = 'var(--surface-color, #fff)';
+
+function VersionPill({ version, tone }: { version: string; tone: 'neutral' | 'base' | 'compare' }) {
+  const accent = tone === 'compare';
+  return (
+    <span
+      style={{
+        fontFamily: 'var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, monospace)',
+        fontSize: 13,
+        fontWeight: 600,
+        padding: '4px 10px',
+        borderRadius: 8,
+        border: `1px solid ${accent ? ACCENT : BORDER}`,
+        background: accent ? 'rgba(108, 92, 231, 0.06)' : SURFACE,
+        color: accent ? ACCENT : PRIMARY,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {version}
+    </span>
+  );
+}
+
+/**
+ * Shared blank state for the compare surfaces (inline tabs, the single-component compare page,
+ * and lane-compare). Renders in place of an empty body so a no-change comparison reads as an
+ * intentional "nothing changed" state instead of a blank pane.
+ */
+export function InlineCompareEmpty({ message, hint, baseVersion, compareVersion }: InlineCompareEmptyProps) {
+  const hasPills = !!baseVersion && !!compareVersion;
+  const identical = hasPills && baseVersion === compareVersion;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 12,
+        padding: '48px 16px',
+        textAlign: 'center',
+      }}
+    >
+      <span style={{ fontSize: 15, fontWeight: 600, color: PRIMARY }}>{message}</span>
+
+      {hasPills && (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <VersionPill version={baseVersion as string} tone={identical ? 'neutral' : 'base'} />
+            <span style={{ color: MUTED, fontSize: 16 }}>→</span>
+            <VersionPill version={compareVersion as string} tone={identical ? 'neutral' : 'compare'} />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 11, color: MUTED }}>
+            <span style={{ minWidth: 64 }}>base</span>
+            <span style={{ width: 16 }} />
+            <span style={{ minWidth: 64 }}>compare</span>
+          </div>
+        </div>
+      )}
+
+      {hint && <span style={{ fontSize: 13, color: SECONDARY, maxWidth: 440, lineHeight: 1.5 }}>{hint}</span>}
+    </div>
+  );
+}

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@teambit/component.ui.component-compare.context",
-  "version": "0.0.125",
+  "version": "0.0.127",
   "homepage": "https://bit.cloud/teambit/component/ui/component-compare/context",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/component-compare/context",
-    "version": "0.0.125"
+    "version": "0.0.127"
   },
   "dependencies": {
     "core-js": "^3.0.0",
     "@teambit/component.ui.component-compare.models.component-compare-hooks": "0.0.11",
     "@teambit/component.ui.component-compare.models.component-compare-model": "0.0.112",
-    "@teambit/component.ui.component-compare.models.component-compare-state": "0.0.7"
+    "@teambit/component.ui.component-compare.models.component-compare-state": "0.0.7",
+    "@teambit/semantics.ui.api-diff-view": "0.0.2"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",