@teambit/lanes.ui.models.lanes-model 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { LanesModel } from './lanes-model';
+export type { LaneModel, LaneComponentQueryResult, LaneQueryResult, LanesQueryResult, LanesHost, LanesQuery, } from './lanes-model';

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6CAA2C;AAAlC,yGAAA,UAAU,OAAA"}

package/dist/lanes-model.d.ts

@@ -0,0 +1,110 @@
+import { ComponentModel, ComponentModelProps } from '@teambit/component';
+import { LaneId } from '@teambit/lane-id';
+import { ComponentID, ComponentIdObj } from '@teambit/component-id';
+/**
+ * GQL (lanes/getLanes/components)
+ * Return type of each Component in a Lane
+ */
+export declare type LaneComponentQueryResult = {
+    id: ComponentIdObj;
+    head: string;
+};
+/**
+ * GQL
+ *  lanes/list
+ *  lanes/current
+ * Return type of each Lane in a Scope/Workspace
+ */
+export declare type LaneQueryResult = {
+    id: {
+        name: string;
+        scope: string;
+    };
+    remote?: string;
+    isMerged: boolean;
+    components: Array<{
+        id: ComponentIdObj;
+    }>;
+    readmeComponent?: ComponentModelProps;
+    hash: string;
+};
+/**
+ * GQL
+ * Return type of the lanes query
+ */
+export declare type LanesQueryResult = {
+    list?: LaneQueryResult[];
+    current?: LaneQueryResult;
+};
+/**
+ * GQL (lanes)
+ * Return type of the entire /lanes query.
+ * Represents All Lanes and Current Lane in Scope/Workspace
+ */
+export declare type LanesQuery = {
+    lanes?: LanesQueryResult;
+};
+export declare type LanesHost = 'workspace' | 'scope';
+/**
+ * Represents a single Lane in a Workspace/Scope
+ */
+export declare type LaneModel = {
+    id: LaneId;
+    hash: string;
+    components: ComponentID[];
+    readmeComponent?: ComponentModel;
+};
+/**
+ * Props to instantiate a LanesModel
+ */
+export declare type LanesModelProps = {
+    lanes?: LaneModel[];
+    viewedLane?: LaneModel;
+    currentLane?: LaneModel;
+};
+/**
+ * Represents the entire Lanes State in a Workspace/Scope
+ * Provides helper methods to extract and map Lane information
+ * Keeps track of all the lanes and the currently selected lane from the UI
+ */
+export declare class LanesModel {
+    static lanesPrefix: string;
+    static baseLaneComponentRoute: string;
+    static lanePath: string;
+    static laneUrlParamsKey: string;
+    private static laneFromPathRegex;
+    static getLaneIdFromPathname: (pathname: string, urlSearchParams?: URLSearchParams) => LaneId | undefined;
+    static getLaneUrl: (laneId: LaneId, relative?: boolean) => string;
+    static getLaneComponentUrl: (componentId: ComponentID, laneId: LaneId) => string;
+    static getMainComponentUrl: (componentId: ComponentID, laneId?: LaneId) => string;
+    static mapToLaneModel(laneData: LaneQueryResult, host: string): LaneModel;
+    static groupByScope(laneIds: LaneId[]): Map<string, LaneId[]>;
+    static groupByComponentNameAndId(lanes: LaneModel[]): {
+        byName: Map<string, LaneModel[]>;
+        byId: Map<string, LaneModel[]>;
+    };
+    static from({ data, host, viewedLaneId }: {
+        data: LanesQuery;
+        host: string;
+        viewedLaneId?: LaneId;
+    }): LanesModel;
+    constructor({ lanes, viewedLane, currentLane }: LanesModelProps);
+    readonly laneIdsByScope: Map<string, LaneId[]>;
+    readonly lanesByComponentName: Map<string, LaneModel[]>;
+    readonly lanesByComponentId: Map<string, LaneModel[]>;
+    viewedLane?: LaneModel;
+    currentLane?: LaneModel;
+    readonly lanes: LaneModel[];
+    getLaneComponentUrlByVersion: (componentId: ComponentID, laneId?: LaneId) => string;
+    setViewedLane: (viewedLaneId?: LaneId) => void;
+    resolveComponent: (idStrWithoutVersion: string, laneId?: LaneId) => ComponentID;
+    getDefaultLane: () => LaneModel;
+    getNonMainLanes: () => LaneModel[];
+    isInViewedLane: (componentId: ComponentID, includeVersion?: boolean) => boolean;
+    getLanesByComponentName: (componentId: ComponentID) => LaneModel[];
+    getLanesByComponentId: (componentId: ComponentID) => LaneModel[];
+    isComponentOnMain: (componentId: ComponentID, includeVersion?: boolean) => boolean;
+    isComponentOnMainButNotOnLane: (componentId: ComponentID, includeVersion?: boolean, laneId?: LaneId) => boolean;
+    isComponentOnLaneButNotOnMain: (componentId: ComponentID, includeVersion?: boolean, laneId?: LaneId) => boolean;
+    isComponentOnNonDefaultLanes: (componentId: ComponentID, includeVersion?: boolean, laneId?: LaneId) => boolean;
+}

package/dist/lanes-model.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanesModel = void 0;
+const component_1 = require("@teambit/component");
+const lane_id_1 = require("@teambit/lane-id");
+const component_id_1 = require("@teambit/component-id");
+const base_ui_utils_string_affix_1 = require("@teambit/base-ui.utils.string.affix");
+const path_to_regexp_1 = require("path-to-regexp");
+/**
+ * Represents the entire Lanes State in a Workspace/Scope
+ * Provides helper methods to extract and map Lane information
+ * Keeps track of all the lanes and the currently selected lane from the UI
+ */
+class LanesModel {
+    constructor({ lanes, viewedLane, currentLane }) {
+        this.getLaneComponentUrlByVersion = (componentId, laneId) => {
+            var _a;
+            // if there is no version, the component is new and is on main
+            const defaultLane = this.getDefaultLane();
+            if (!componentId.version || !laneId || !defaultLane)
+                return LanesModel.getMainComponentUrl(componentId);
+            const lane = (_a = this.getLanesByComponentId(componentId)) === null || _a === void 0 ? void 0 : _a.find((l) => l.id.isEqual(laneId));
+            if (!lane) {
+                // return url from main if it exits
+                return defaultLane.components.find((c) => c.isEqual(componentId))
+                    ? LanesModel.getMainComponentUrl(componentId, laneId)
+                    : undefined;
+            }
+            if (lane.id.isDefault())
+                return LanesModel.getMainComponentUrl(componentId);
+            return LanesModel.getLaneComponentUrl(componentId, lane.id);
+        };
+        this.setViewedLane = (viewedLaneId) => {
+            this.viewedLane = viewedLaneId ? this.lanes.find((lane) => lane.id.isEqual(viewedLaneId)) : undefined;
+        };
+        this.resolveComponent = (idStrWithoutVersion, laneId) => {
+            var _a;
+            return (_a = ((laneId && this.lanes.find((lane) => lane.id.isEqual(laneId))) || this.viewedLane)) === null || _a === void 0 ? void 0 : _a.components.find((component) => component.toStringWithoutVersion() === idStrWithoutVersion);
+        };
+        this.getDefaultLane = () => this.lanes.find((lane) => lane.id.isDefault());
+        this.getNonMainLanes = () => this.lanes.filter((lane) => !lane.id.isDefault());
+        this.isInViewedLane = (componentId, includeVersion) => {
+            var _a, _b;
+            if (includeVersion) {
+                return (_a = this.viewedLane) === null || _a === void 0 ? void 0 : _a.components.some((comp) => includeVersion && comp.isEqual(componentId));
+            }
+            return (_b = this.viewedLane) === null || _b === void 0 ? void 0 : _b.components.some((comp) => includeVersion && comp.isEqual(componentId, { ignoreVersion: true }));
+        };
+        this.getLanesByComponentName = (componentId) => this.lanesByComponentName.get(componentId.fullName);
+        this.getLanesByComponentId = (componentId) => this.lanesByComponentId.get(componentId.toString());
+        this.isComponentOnMain = (componentId, includeVersion) => {
+            var _a, _b;
+            if (includeVersion) {
+                return !!((_a = this.getLanesByComponentId(componentId)) === null || _a === void 0 ? void 0 : _a.some((lane) => lane.id.isDefault()));
+            }
+            return !!((_b = this.getLanesByComponentName(componentId)) === null || _b === void 0 ? void 0 : _b.some((lane) => lane.id.isDefault()));
+        };
+        this.isComponentOnMainButNotOnLane = (componentId, includeVersion, laneId) => {
+            return (this.isComponentOnMain(componentId, includeVersion) &&
+                !this.isComponentOnNonDefaultLanes(componentId, includeVersion, laneId));
+        };
+        this.isComponentOnLaneButNotOnMain = (componentId, includeVersion, laneId) => {
+            return (!this.isComponentOnMain(componentId, includeVersion) &&
+                this.isComponentOnNonDefaultLanes(componentId, includeVersion, laneId));
+        };
+        this.isComponentOnNonDefaultLanes = (componentId, includeVersion, laneId) => {
+            var _a, _b;
+            if (includeVersion) {
+                return !!((_a = this.getLanesByComponentId(componentId)) === null || _a === void 0 ? void 0 : _a.some((lane) => !lane.id.isDefault() && (!laneId || lane.id.isEqual(laneId))));
+            }
+            return !!((_b = this.getLanesByComponentName(componentId)) === null || _b === void 0 ? void 0 : _b.some((lane) => !lane.id.isDefault() && (!laneId || lane.id.isEqual(laneId))));
+        };
+        this.viewedLane = viewedLane;
+        this.currentLane = currentLane;
+        this.lanes = lanes || [];
+        this.laneIdsByScope = LanesModel.groupByScope(this.lanes.map((lane) => lane.id));
+        const { byId, byName } = LanesModel.groupByComponentNameAndId(this.lanes);
+        this.lanesByComponentId = byId;
+        this.lanesByComponentName = byName;
+    }
+    static mapToLaneModel(laneData, host) {
+        const { id, components, readmeComponent, hash } = laneData;
+        const componentIds = (components === null || components === void 0 ? void 0 : components.map((component) => {
+            const componentModel = component_id_1.ComponentID.fromObject(component.id);
+            return componentModel;
+        })) || [];
+        const readmeComponentModel = readmeComponent && component_1.ComponentModel.from(Object.assign(Object.assign({}, readmeComponent), { host }));
+        return {
+            id: lane_id_1.LaneId.from(id.name, id.scope),
+            components: componentIds,
+            readmeComponent: readmeComponentModel,
+            hash,
+        };
+    }
+    static groupByScope(laneIds) {
+        const grouped = new Map();
+        laneIds.forEach((laneId) => {
+            const { scope } = laneId;
+            if (!grouped.has(scope)) {
+                grouped.set(scope, [laneId]);
+            }
+            else {
+                const existing = grouped.get(scope);
+                grouped.set(scope, [...existing, laneId]);
+            }
+        });
+        return grouped;
+    }
+    static groupByComponentNameAndId(lanes) {
+        const byName = new Map();
+        const byId = new Map();
+        lanes.forEach((lane) => {
+            const { components } = lane;
+            components.forEach((component) => {
+                const name = component.fullName;
+                const id = component.toString();
+                const existingByName = byName.get(name) || [];
+                const existingById = byId.get(id) || [];
+                existingByName.push(lane);
+                existingById.push(lane);
+                byName.set(name, existingByName);
+                byId.set(id, existingById);
+            });
+        });
+        return { byName, byId };
+    }
+    static from({ data, host, viewedLaneId }) {
+        var _a, _b, _c, _d;
+        const lanes = ((_b = (_a = data === null || data === void 0 ? void 0 : data.lanes) === null || _a === void 0 ? void 0 : _a.list) === null || _b === void 0 ? void 0 : _b.map((lane) => LanesModel.mapToLaneModel(lane, host))) || [];
+        const currentLane = ((_d = (_c = data.lanes) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.id)
+            ? lanes.find((lane) => { var _a, _b; return lane.id.isEqual((_b = (_a = data.lanes) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.id); })
+            : undefined;
+        const lanesModel = new LanesModel({ lanes, currentLane });
+        lanesModel.setViewedLane(viewedLaneId);
+        return lanesModel;
+    }
+}
+exports.LanesModel = LanesModel;
+LanesModel.lanesPrefix = '~lane';
+LanesModel.baseLaneComponentRoute = '/~component';
+LanesModel.lanePath = ':scopeId/:laneId';
+LanesModel.laneUrlParamsKey = 'lane';
+LanesModel.laneFromPathRegex = (0, path_to_regexp_1.pathToRegexp)(`${LanesModel.lanesPrefix}/${LanesModel.lanePath}`, undefined, {
+    end: false,
+    start: false,
+});
+LanesModel.getLaneIdFromPathname = (pathname, urlSearchParams) => {
+    const matches = LanesModel.laneFromPathRegex.exec(pathname);
+    if (matches) {
+        const [, scopeId, laneId] = matches;
+        return lane_id_1.LaneId.from(laneId, scopeId);
+    }
+    if (urlSearchParams) {
+        const laneIdQueryParam = urlSearchParams.get(LanesModel.laneUrlParamsKey);
+        return laneIdQueryParam ? lane_id_1.LaneId.parse(laneIdQueryParam) : undefined;
+    }
+    return undefined;
+};
+LanesModel.getLaneUrl = (laneId, relative) => `${relative ? '' : '/'}${LanesModel.lanesPrefix}/${laneId.toString()}`;
+LanesModel.getLaneComponentUrl = (componentId, laneId) => {
+    const isExternalComponent = componentId.scope !== laneId.scope;
+    const laneUrl = LanesModel.getLaneUrl(laneId);
+    const urlSearch = (0, base_ui_utils_string_affix_1.affix)('?version=', componentId.version);
+    if (!isExternalComponent) {
+        return `${laneUrl}${LanesModel.baseLaneComponentRoute}/${componentId.fullName}${urlSearch}`;
+    }
+    return `${laneUrl}${LanesModel.baseLaneComponentRoute}/${componentId.toStringWithoutVersion()}${urlSearch}`;
+};
+LanesModel.getMainComponentUrl = (componentId, laneId) => {
+    const componentUrl = componentId.fullName;
+    const urlSearch = (0, base_ui_utils_string_affix_1.affix)(`?${LanesModel.laneUrlParamsKey}=`, laneId === null || laneId === void 0 ? void 0 : laneId.toString());
+    return `${componentUrl}${urlSearch}`;
+};
+//# sourceMappingURL=lanes-model.js.map

package/dist/lanes-model.js.map

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

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,9 @@
+export { LanesModel } from './lanes-model';
+export type {
+  LaneModel,
+  LaneComponentQueryResult,
+  LaneQueryResult,
+  LanesQueryResult,
+  LanesHost,
+  LanesQuery,
+} from './lanes-model';

package/lanes-model.ts

@@ -0,0 +1,270 @@
+import { ComponentModel, ComponentModelProps } from '@teambit/component';
+import { LaneId } from '@teambit/lane-id';
+import { ComponentID, ComponentIdObj } from '@teambit/component-id';
+import { affix } from '@teambit/base-ui.utils.string.affix';
+import { pathToRegexp } from 'path-to-regexp';
+/**
+ * GQL (lanes/getLanes/components)
+ * Return type of each Component in a Lane
+ */
+export type LaneComponentQueryResult = {
+  id: ComponentIdObj;
+  head: string;
+};
+/**
+ * GQL
+ *  lanes/list
+ *  lanes/current
+ * Return type of each Lane in a Scope/Workspace
+ */
+export type LaneQueryResult = {
+  id: { name: string; scope: string };
+  remote?: string;
+  isMerged: boolean;
+  components: Array<{ id: ComponentIdObj }>;
+  readmeComponent?: ComponentModelProps;
+  hash: string;
+};
+/**
+ * GQL
+ * Return type of the lanes query
+ */
+export type LanesQueryResult = {
+  list?: LaneQueryResult[];
+  current?: LaneQueryResult;
+};
+/**
+ * GQL (lanes)
+ * Return type of the entire /lanes query.
+ * Represents All Lanes and Current Lane in Scope/Workspace
+ */
+export type LanesQuery = {
+  lanes?: LanesQueryResult;
+};
+
+export type LanesHost = 'workspace' | 'scope';
+// export type LaneComponentModel = { model: ComponentModel; url: string };
+/**
+ * Represents a single Lane in a Workspace/Scope
+ */
+export type LaneModel = {
+  id: LaneId;
+  hash: string;
+  components: ComponentID[];
+  readmeComponent?: ComponentModel;
+};
+/**
+ * Props to instantiate a LanesModel
+ */
+export type LanesModelProps = {
+  lanes?: LaneModel[];
+  viewedLane?: LaneModel;
+  currentLane?: LaneModel;
+};
+
+/**
+ * Represents the entire Lanes State in a Workspace/Scope
+ * Provides helper methods to extract and map Lane information
+ * Keeps track of all the lanes and the currently selected lane from the UI
+ */
+export class LanesModel {
+  static lanesPrefix = '~lane';
+  static baseLaneComponentRoute = '/~component';
+  static lanePath = ':scopeId/:laneId';
+  static laneUrlParamsKey = 'lane';
+
+  private static laneFromPathRegex = pathToRegexp(`${LanesModel.lanesPrefix}/${LanesModel.lanePath}`, undefined, {
+    end: false,
+    start: false,
+  });
+
+  static getLaneIdFromPathname = (pathname: string, urlSearchParams?: URLSearchParams): LaneId | undefined => {
+    const matches = LanesModel.laneFromPathRegex.exec(pathname);
+    if (matches) {
+      const [, scopeId, laneId] = matches;
+      return LaneId.from(laneId, scopeId);
+    }
+    if (urlSearchParams) {
+      const laneIdQueryParam = urlSearchParams.get(LanesModel.laneUrlParamsKey);
+      return laneIdQueryParam ? LaneId.parse(laneIdQueryParam) : undefined;
+    }
+
+    return undefined;
+  };
+
+  static getLaneUrl = (laneId: LaneId, relative?: boolean) =>
+    `${relative ? '' : '/'}${LanesModel.lanesPrefix}/${laneId.toString()}`;
+
+  static getLaneComponentUrl = (componentId: ComponentID, laneId: LaneId) => {
+    const isExternalComponent = componentId.scope !== laneId.scope;
+
+    const laneUrl = LanesModel.getLaneUrl(laneId);
+    const urlSearch = affix('?version=', componentId.version);
+
+    if (!isExternalComponent) {
+      return `${laneUrl}${LanesModel.baseLaneComponentRoute}/${componentId.fullName}${urlSearch}`;
+    }
+
+    return `${laneUrl}${LanesModel.baseLaneComponentRoute}/${componentId.toStringWithoutVersion()}${urlSearch}`;
+  };
+
+  static getMainComponentUrl = (componentId: ComponentID, laneId?: LaneId) => {
+    const componentUrl = componentId.fullName;
+    const urlSearch = affix(`?${LanesModel.laneUrlParamsKey}=`, laneId?.toString());
+    return `${componentUrl}${urlSearch}`;
+  };
+
+  static mapToLaneModel(laneData: LaneQueryResult, host: string): LaneModel {
+    const { id, components, readmeComponent, hash } = laneData;
+
+    const componentIds =
+      components?.map((component) => {
+        const componentModel = ComponentID.fromObject(component.id);
+        return componentModel;
+      }) || [];
+
+    const readmeComponentModel = readmeComponent && ComponentModel.from({ ...readmeComponent, host });
+
+    return {
+      id: LaneId.from(id.name, id.scope),
+      components: componentIds,
+      readmeComponent: readmeComponentModel,
+      hash,
+    };
+  }
+
+  static groupByScope(laneIds: LaneId[]): Map<string, LaneId[]> {
+    const grouped = new Map<string, LaneId[]>();
+    laneIds.forEach((laneId) => {
+      const { scope } = laneId;
+      if (!grouped.has(scope)) {
+        grouped.set(scope, [laneId]);
+      } else {
+        const existing = grouped.get(scope) as LaneId[];
+        grouped.set(scope, [...existing, laneId]);
+      }
+    });
+    return grouped;
+  }
+
+  static groupByComponentNameAndId(lanes: LaneModel[]): {
+    byName: Map<string, LaneModel[]>;
+    byId: Map<string, LaneModel[]>;
+  } {
+    const byName = new Map<string, LaneModel[]>();
+    const byId = new Map<string, LaneModel[]>();
+
+    lanes.forEach((lane) => {
+      const { components } = lane;
+      components.forEach((component) => {
+        const name = component.fullName;
+        const id = component.toString();
+        const existingByName = byName.get(name) || [];
+        const existingById = byId.get(id) || [];
+        existingByName.push(lane);
+        existingById.push(lane);
+        byName.set(name, existingByName);
+        byId.set(id, existingById);
+      });
+    });
+    return { byName, byId };
+  }
+
+  static from({ data, host, viewedLaneId }: { data: LanesQuery; host: string; viewedLaneId?: LaneId }): LanesModel {
+    const lanes = data?.lanes?.list?.map((lane) => LanesModel.mapToLaneModel(lane, host)) || [];
+    const currentLane = data.lanes?.current?.id
+      ? lanes.find((lane) => lane.id.isEqual(data.lanes?.current?.id as LaneId))
+      : undefined;
+    const lanesModel = new LanesModel({ lanes, currentLane });
+    lanesModel.setViewedLane(viewedLaneId);
+    return lanesModel;
+  }
+
+  constructor({ lanes, viewedLane, currentLane }: LanesModelProps) {
+    this.viewedLane = viewedLane;
+    this.currentLane = currentLane;
+    this.lanes = lanes || [];
+    this.laneIdsByScope = LanesModel.groupByScope(this.lanes.map((lane) => lane.id));
+    const { byId, byName } = LanesModel.groupByComponentNameAndId(this.lanes);
+    this.lanesByComponentId = byId;
+    this.lanesByComponentName = byName;
+  }
+
+  readonly laneIdsByScope: Map<string, LaneId[]>;
+  readonly lanesByComponentName: Map<string, LaneModel[]>;
+  readonly lanesByComponentId: Map<string, LaneModel[]>;
+
+  viewedLane?: LaneModel;
+  currentLane?: LaneModel;
+  readonly lanes: LaneModel[];
+
+  getLaneComponentUrlByVersion = (componentId: ComponentID, laneId?: LaneId) => {
+    // if there is no version, the component is new and is on main
+    const defaultLane = this.getDefaultLane();
+    if (!componentId.version || !laneId || !defaultLane) return LanesModel.getMainComponentUrl(componentId);
+    const lane = this.getLanesByComponentId(componentId)?.find((l) => l.id.isEqual(laneId));
+    if (!lane) {
+      // return url from main if it exits
+      return defaultLane.components.find((c) => c.isEqual(componentId))
+        ? LanesModel.getMainComponentUrl(componentId, laneId)
+        : undefined;
+    }
+    if (lane.id.isDefault()) return LanesModel.getMainComponentUrl(componentId);
+    return LanesModel.getLaneComponentUrl(componentId, lane.id);
+  };
+
+  setViewedLane = (viewedLaneId?: LaneId) => {
+    this.viewedLane = viewedLaneId ? this.lanes.find((lane) => lane.id.isEqual(viewedLaneId)) : undefined;
+  };
+
+  resolveComponent = (idStrWithoutVersion: string, laneId?: LaneId) =>
+    ((laneId && this.lanes.find((lane) => lane.id.isEqual(laneId))) || this.viewedLane)?.components.find(
+      (component) => component.toStringWithoutVersion() === idStrWithoutVersion
+    );
+
+  getDefaultLane = () => this.lanes.find((lane) => lane.id.isDefault());
+  getNonMainLanes = () => this.lanes.filter((lane) => !lane.id.isDefault());
+
+  isInViewedLane = (componentId: ComponentID, includeVersion?: boolean) => {
+    if (includeVersion) {
+      return this.viewedLane?.components.some((comp) => includeVersion && comp.isEqual(componentId));
+    }
+    return this.viewedLane?.components.some(
+      (comp) => includeVersion && comp.isEqual(componentId, { ignoreVersion: true })
+    );
+  };
+
+  getLanesByComponentName = (componentId: ComponentID) => this.lanesByComponentName.get(componentId.fullName);
+  getLanesByComponentId = (componentId: ComponentID) => this.lanesByComponentId.get(componentId.toString());
+
+  isComponentOnMain = (componentId: ComponentID, includeVersion?: boolean) => {
+    if (includeVersion) {
+      return !!this.getLanesByComponentId(componentId)?.some((lane) => lane.id.isDefault());
+    }
+
+    return !!this.getLanesByComponentName(componentId)?.some((lane) => lane.id.isDefault());
+  };
+
+  isComponentOnMainButNotOnLane = (componentId: ComponentID, includeVersion?: boolean, laneId?: LaneId) => {
+    return (
+      this.isComponentOnMain(componentId, includeVersion) &&
+      !this.isComponentOnNonDefaultLanes(componentId, includeVersion, laneId)
+    );
+  };
+  isComponentOnLaneButNotOnMain = (componentId: ComponentID, includeVersion?: boolean, laneId?: LaneId) => {
+    return (
+      !this.isComponentOnMain(componentId, includeVersion) &&
+      this.isComponentOnNonDefaultLanes(componentId, includeVersion, laneId)
+    );
+  };
+  isComponentOnNonDefaultLanes = (componentId: ComponentID, includeVersion?: boolean, laneId?: LaneId) => {
+    if (includeVersion) {
+      return !!this.getLanesByComponentId(componentId)?.some(
+        (lane) => !lane.id.isDefault() && (!laneId || lane.id.isEqual(laneId))
+      );
+    }
+    return !!this.getLanesByComponentName(componentId)?.some(
+      (lane) => !lane.id.isDefault() && (!laneId || lane.id.isEqual(laneId))
+    );
+  };
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@teambit/lanes.ui.models.lanes-model",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.lanes",
+    "name": "ui/models/lanes-model",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "path-to-regexp": "6.2.0",
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.utils.string.affix": "1.0.0",
+    "@teambit/component-id": "0.0.417",
+    "@teambit/lane-id": "0.0.97"
+  },
+  "devDependencies": {
+    "@types/mocha": "9.1.0",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@babel/runtime": "7.12.18",
+    "@types/jest": "^26.0.0",
+    "@types/react-dom": "^17.0.5",
+    "@types/react": "^17.0.8",
+    "@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/preview-1664735485436.js

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

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