@teambit/code.ui.code-tab-page 0.0.0-0a5b3ead38a0a82fc1b225c3a112b013e7fc4be5

package/code-tab-page.module.scss

@@ -0,0 +1,45 @@
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+$panelBg: #fafafa;
+
+.codePage {
+  height: calc(100vh - 56px);
+  width: 100%;
+}
+
+.left {
+  min-width: 200px;
+
+  //cannot assign max-width directly to right side
+  max-width: calc(100% - 200px);
+
+  display: flex;
+}
+
+.right {
+  position: relative;
+  // background: $panelBg;
+  overflow-y: auto;
+  // this is to fix the right panel when it gets too big or too small
+  min-width: 200px;
+  max-width: calc(100% - 200px);
+}
+
+.splitter {
+  position: relative;
+
+  > :first-child {
+    z-index: $pane-splitter-zIndex;
+    position: absolute;
+  }
+}
+
+.collapser {
+  right: 1px;
+}
+
+.depNode {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 8px;
+}

package/code-tab-page.tsx

@@ -0,0 +1,251 @@
+import { ComponentContext, ComponentID } from '@teambit/component';
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+import React, { useContext, useState, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { flatten } from 'lodash';
+import { Label } from '@teambit/documenter.ui.label';
+import { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';
+import { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';
+import { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';
+import { useCode } from '@teambit/code.ui.queries.get-component-code';
+import type { FileIconSlot } from '@teambit/code';
+import { CodeView } from '@teambit/code.ui.code-view';
+import { CodeTabTree } from '@teambit/code.ui.code-tab-tree';
+import { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';
+import type { WidgetProps } from '@teambit/ui-foundation.ui.tree.tree-node';
+import type { FileIconMatch } from '@teambit/code.ui.utils.get-file-icon';
+import { getFileIcon } from '@teambit/code.ui.utils.get-file-icon';
+import { useCodeParams } from '@teambit/code.ui.hooks.use-code-params';
+import path from 'path-browserify';
+import type { TreeNode } from '@teambit/design.ui.tree';
+import {
+  useComponentArtifactFileContent,
+  useComponentArtifacts,
+} from '@teambit/component.ui.artifacts.queries.use-component-artifacts';
+import type { ArtifactFile } from '@teambit/component.ui.artifacts.models.component-artifacts-model';
+import { getArtifactFileDetailsFromUrl } from '@teambit/component.ui.artifacts.models.component-artifacts-model';
+import isBinaryPath from 'is-binary-path';
+import { FILE_SIZE_THRESHOLD } from '@teambit/component.ui.artifacts.artifacts-tree';
+import { useViewedLaneFromUrl } from '@teambit/lanes.hooks.use-viewed-lane-from-url';
+
+import styles from './code-tab-page.module.scss';
+
+export type CodePageProps = {
+  fileIconSlot?: FileIconSlot;
+  host: string;
+  codeViewClassName?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Resolves a requested file path against a file tree, handling extension mappings,
+ * parent directory traversal, and index files.
+ *
+ * @param requestedPath The path to resolve (can include ./, ../, etc)
+ * @param fileTree Array of available files
+ * @param mainFile Default file to return if no match is found
+ * @param loadingCode Whether code is currently loading
+ * @returns Resolved file path or undefined if loading
+ */
+export function resolveFilePath(
+  requestedPath: string | undefined,
+  fileTree: string[],
+  mainFile: string,
+  loadingCode: boolean
+): string | undefined {
+  if (loadingCode) return undefined;
+  if (!requestedPath) return mainFile;
+
+  const normalized = path.resolve(requestedPath);
+
+  if (fileTree.includes(normalized)) return normalized;
+
+  const extension = path.extname(normalized);
+  const requestedExt = ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs'].includes(extension) ? extension : '';
+  const basePathWithoutExt = requestedExt ? normalized.slice(0, -requestedExt.length) : normalized;
+
+  const getTypeScriptVariants = (ext: string): string[] => {
+    switch (ext) {
+      case '.js':
+        return ['.ts', '.tsx'];
+      case '.jsx':
+        return ['.tsx'];
+      case '.mjs':
+        return ['.mts'];
+      case '.cjs':
+        return ['.cts'];
+      default:
+        return [];
+    }
+  };
+
+  const possibleExtensions = requestedExt
+    ? [requestedExt, ...getTypeScriptVariants(requestedExt)]
+    : ['.ts', '.tsx', '.js'];
+
+  const possiblePaths = [
+    normalized,
+    ...possibleExtensions.map((ext) => `${basePathWithoutExt}${ext}`),
+    ...possibleExtensions.map((ext) => path.join(normalized, `index${ext}`)),
+    ...possibleExtensions.map((ext) => path.join(basePathWithoutExt, `index${ext}`)),
+  ].map((p) => path.resolve(p));
+
+  const matchingFiles = fileTree.filter((file) => possiblePaths.includes(path.resolve(file)));
+
+  if (matchingFiles.length > 0) {
+    if (matchingFiles.includes(normalized)) {
+      return normalized;
+    }
+
+    const ordered = matchingFiles.sort((a, b) => {
+      const extA = path.extname(a);
+      const extB = path.extname(b);
+
+      if (extA === requestedExt && extB !== requestedExt) return -1;
+      if (extB === requestedExt && extA !== requestedExt) return 1;
+
+      const isTypeScriptA = ['.ts', '.tsx'].includes(extA);
+      const isTypeScriptB = ['.ts', '.tsx'].includes(extB);
+      if (isTypeScriptA && !isTypeScriptB) return -1;
+      if (isTypeScriptB && !isTypeScriptA) return 1;
+
+      if (extA === '.ts' && extB === '.tsx') return -1;
+      if (extA === '.tsx' && extB === '.ts') return 1;
+
+      return a.length - b.length;
+    });
+
+    return ordered[0];
+  }
+
+  return mainFile;
+}
+
+export function CodePage({ className, fileIconSlot, host: hostFromProps, codeViewClassName }: CodePageProps) {
+  const urlParams = useCodeParams();
+  const laneFromUrl = useViewedLaneFromUrl();
+  const [searchParams] = useSearchParams();
+  const scopeFromQueryParams = searchParams.get('scope');
+  const component = useContext(ComponentContext);
+  const host = useMemo(
+    () => (urlParams.version ? 'teambit.scope/scope' : hostFromProps),
+    [urlParams.version, hostFromProps]
+  );
+
+  const { mainFile, fileTree = [], dependencies, devFiles, loading: loadingCode } = useCode(component.id, host);
+  const { data: artifacts = [] } = useComponentArtifacts(host, component.id.toString());
+
+  const currentFile = resolveFilePath(urlParams.file, fileTree, mainFile, loadingCode);
+
+  const currentArtifact = getArtifactFileDetailsFromUrl(artifacts, currentFile);
+  const currentArtifactFile = currentArtifact?.artifactFile;
+  const { data: currentArtifactFileData, loading: loadingArtifact } = useComponentArtifactFileContent(
+    host,
+    {
+      componentId: component.id.toString(),
+      taskId: currentArtifact?.taskId,
+      filePath: currentArtifactFile?.path,
+    },
+    !currentArtifact
+  );
+
+  const currentArtifactFileContent = getArtifactFileContent(
+    (currentArtifactFileData && currentArtifactFileData[0]?.files?.[0]) || undefined
+  );
+  const isMobile = useIsMobile();
+  const [isSidebarOpen, setSidebarOpenness] = useState(!isMobile);
+  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;
+  const fileIconMatchers: FileIconMatch[] = useMemo(() => flatten(fileIconSlot?.values()), [fileIconSlot]);
+  const icon = getFileIcon(fileIconMatchers, currentFile);
+  const loadingArtifactFileContent =
+    loadingArtifact !== undefined ? loadingArtifact : !!currentFile && !currentArtifact;
+  const getHref = React.useCallback(
+    (node) => {
+      const queryParams = new URLSearchParams();
+
+      if (urlParams.version) {
+        queryParams.set('version', urlParams.version);
+      }
+
+      if (scopeFromQueryParams) {
+        queryParams.set('scope', scopeFromQueryParams);
+      }
+
+      return `${node.id}?${queryParams.toString()}`;
+    },
+    [urlParams.version, scopeFromQueryParams]
+  );
+
+  const sortedDeps = useMemo(() => {
+    // need to create a new instance of dependencies because we cant mutate the original array
+    return [...(dependencies ?? [])].sort((a, b) => {
+      return (a.packageName || a.id).localeCompare(b.packageName || b.id);
+    });
+  }, [dependencies?.length]);
+
+  const componentId =
+    laneFromUrl || urlParams.version ? component.id : ComponentID.fromString(component.id.toStringWithoutVersion());
+
+  return (
+    <SplitPane layout={sidebarOpenness} size="85%" className={classNames(styles.codePage, className)}>
+      <Pane className={styles.left}>
+        <CodeView
+          componentId={componentId}
+          currentFile={currentFile}
+          icon={icon}
+          currentFileContent={currentArtifactFileContent}
+          loading={loadingArtifactFileContent || loadingCode}
+          codeSnippetClassName={codeViewClassName}
+          dependencies={dependencies}
+          host={host}
+        />
+      </Pane>
+      <HoverSplitter className={styles.splitter}>
+        <Collapser
+          placement="left"
+          isOpen={isSidebarOpen}
+          onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag
+          onClick={() => setSidebarOpenness((x) => !x)}
+          tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} file tree`}
+          className={styles.collapser}
+        />
+      </HoverSplitter>
+      <Pane className={styles.right}>
+        <CodeTabTree
+          host={host}
+          currentFile={currentFile}
+          dependencies={sortedDeps}
+          fileTree={fileTree}
+          widgets={useMemo(() => [generateWidget(mainFile, devFiles)], [mainFile, devFiles])}
+          getHref={getHref}
+          getIcon={useMemo(() => generateIcon(fileIconMatchers), fileIconMatchers)}
+        />
+      </Pane>
+    </SplitPane>
+  );
+}
+
+function generateWidget(mainFile?: string, devFiles?: string[]) {
+  return function Widget({ node }: WidgetProps<any>) {
+    const fileName = node?.id;
+    if (fileName === mainFile) {
+      return <Label className={styles.label}>main</Label>;
+    }
+    if (devFiles?.includes(fileName)) {
+      return <Label className={styles.label}>dev</Label>;
+    }
+    return null;
+  };
+}
+
+export function generateIcon(fileIconMatchers: FileIconMatch[]) {
+  return function Icon({ id }: TreeNode) {
+    return getFileIcon(fileIconMatchers, id);
+  };
+}
+
+function getArtifactFileContent(file?: ArtifactFile | undefined): string | undefined {
+  if (!file) return undefined;
+  if (isBinaryPath(file.path) || (file.size ?? 0) > FILE_SIZE_THRESHOLD) return undefined;
+  return file.content;
+}

package/dist/code-tab-page.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { FileIconSlot } from '@teambit/code';
+import type { FileIconMatch } from '@teambit/code.ui.utils.get-file-icon';
+import type { TreeNode } from '@teambit/design.ui.tree';
+export type CodePageProps = {
+    fileIconSlot?: FileIconSlot;
+    host: string;
+    codeViewClassName?: string;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Resolves a requested file path against a file tree, handling extension mappings,
+ * parent directory traversal, and index files.
+ *
+ * @param requestedPath The path to resolve (can include ./, ../, etc)
+ * @param fileTree Array of available files
+ * @param mainFile Default file to return if no match is found
+ * @param loadingCode Whether code is currently loading
+ * @returns Resolved file path or undefined if loading
+ */
+export declare function resolveFilePath(requestedPath: string | undefined, fileTree: string[], mainFile: string, loadingCode: boolean): string | undefined;
+export declare function CodePage({ className, fileIconSlot, host: hostFromProps, codeViewClassName }: CodePageProps): React.JSX.Element;
+export declare function generateIcon(fileIconMatchers: FileIconMatch[]): ({ id }: TreeNode) => string;

package/dist/code-tab-page.js

@@ -0,0 +1,201 @@
+"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.resolveFilePath = resolveFilePath;
+exports.CodePage = CodePage;
+exports.generateIcon = generateIcon;
+const component_1 = require("@teambit/component");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const lodash_1 = require("lodash");
+const documenter_ui_label_1 = require("@teambit/documenter.ui.label");
+const base_ui_surfaces_split_pane_split_pane_1 = require("@teambit/base-ui.surfaces.split-pane.split-pane");
+const base_ui_surfaces_split_pane_hover_splitter_1 = require("@teambit/base-ui.surfaces.split-pane.hover-splitter");
+const ui_foundation_ui_buttons_collapser_1 = require("@teambit/ui-foundation.ui.buttons.collapser");
+const code_ui_queries_get_component_code_1 = require("@teambit/code.ui.queries.get-component-code");
+const code_ui_code_view_1 = require("@teambit/code.ui.code-view");
+const code_ui_code_tab_tree_1 = require("@teambit/code.ui.code-tab-tree");
+const ui_foundation_ui_hooks_use_is_mobile_1 = require("@teambit/ui-foundation.ui.hooks.use-is-mobile");
+const code_ui_utils_get_file_icon_1 = require("@teambit/code.ui.utils.get-file-icon");
+const code_ui_hooks_use_code_params_1 = require("@teambit/code.ui.hooks.use-code-params");
+const path_browserify_1 = __importDefault(require("path-browserify"));
+const component_ui_artifacts_queries_use_component_artifacts_1 = require("@teambit/component.ui.artifacts.queries.use-component-artifacts");
+const component_ui_artifacts_models_component_artifacts_model_1 = require("@teambit/component.ui.artifacts.models.component-artifacts-model");
+const is_binary_path_1 = __importDefault(require("is-binary-path"));
+const component_ui_artifacts_artifacts_tree_1 = require("@teambit/component.ui.artifacts.artifacts-tree");
+const lanes_hooks_use_viewed_lane_from_url_1 = require("@teambit/lanes.hooks.use-viewed-lane-from-url");
+const code_tab_page_module_scss_1 = __importDefault(require("./code-tab-page.module.scss"));
+/**
+ * Resolves a requested file path against a file tree, handling extension mappings,
+ * parent directory traversal, and index files.
+ *
+ * @param requestedPath The path to resolve (can include ./, ../, etc)
+ * @param fileTree Array of available files
+ * @param mainFile Default file to return if no match is found
+ * @param loadingCode Whether code is currently loading
+ * @returns Resolved file path or undefined if loading
+ */
+function resolveFilePath(requestedPath, fileTree, mainFile, loadingCode) {
+    if (loadingCode)
+        return undefined;
+    if (!requestedPath)
+        return mainFile;
+    const normalized = path_browserify_1.default.resolve(requestedPath);
+    if (fileTree.includes(normalized))
+        return normalized;
+    const extension = path_browserify_1.default.extname(normalized);
+    const requestedExt = ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs'].includes(extension) ? extension : '';
+    const basePathWithoutExt = requestedExt ? normalized.slice(0, -requestedExt.length) : normalized;
+    const getTypeScriptVariants = (ext) => {
+        switch (ext) {
+            case '.js':
+                return ['.ts', '.tsx'];
+            case '.jsx':
+                return ['.tsx'];
+            case '.mjs':
+                return ['.mts'];
+            case '.cjs':
+                return ['.cts'];
+            default:
+                return [];
+        }
+    };
+    const possibleExtensions = requestedExt
+        ? [requestedExt, ...getTypeScriptVariants(requestedExt)]
+        : ['.ts', '.tsx', '.js'];
+    const possiblePaths = [
+        normalized,
+        ...possibleExtensions.map((ext) => `${basePathWithoutExt}${ext}`),
+        ...possibleExtensions.map((ext) => path_browserify_1.default.join(normalized, `index${ext}`)),
+        ...possibleExtensions.map((ext) => path_browserify_1.default.join(basePathWithoutExt, `index${ext}`)),
+    ].map((p) => path_browserify_1.default.resolve(p));
+    const matchingFiles = fileTree.filter((file) => possiblePaths.includes(path_browserify_1.default.resolve(file)));
+    if (matchingFiles.length > 0) {
+        if (matchingFiles.includes(normalized)) {
+            return normalized;
+        }
+        const ordered = matchingFiles.sort((a, b) => {
+            const extA = path_browserify_1.default.extname(a);
+            const extB = path_browserify_1.default.extname(b);
+            if (extA === requestedExt && extB !== requestedExt)
+                return -1;
+            if (extB === requestedExt && extA !== requestedExt)
+                return 1;
+            const isTypeScriptA = ['.ts', '.tsx'].includes(extA);
+            const isTypeScriptB = ['.ts', '.tsx'].includes(extB);
+            if (isTypeScriptA && !isTypeScriptB)
+                return -1;
+            if (isTypeScriptB && !isTypeScriptA)
+                return 1;
+            if (extA === '.ts' && extB === '.tsx')
+                return -1;
+            if (extA === '.tsx' && extB === '.ts')
+                return 1;
+            return a.length - b.length;
+        });
+        return ordered[0];
+    }
+    return mainFile;
+}
+function CodePage({ className, fileIconSlot, host: hostFromProps, codeViewClassName }) {
+    var _a, _b;
+    const urlParams = (0, code_ui_hooks_use_code_params_1.useCodeParams)();
+    const laneFromUrl = (0, lanes_hooks_use_viewed_lane_from_url_1.useViewedLaneFromUrl)();
+    const [searchParams] = (0, react_router_dom_1.useSearchParams)();
+    const scopeFromQueryParams = searchParams.get('scope');
+    const component = (0, react_1.useContext)(component_1.ComponentContext);
+    const host = (0, react_1.useMemo)(() => (urlParams.version ? 'teambit.scope/scope' : hostFromProps), [urlParams.version, hostFromProps]);
+    const { mainFile, fileTree = [], dependencies, devFiles, loading: loadingCode } = (0, code_ui_queries_get_component_code_1.useCode)(component.id, host);
+    const { data: artifacts = [] } = (0, component_ui_artifacts_queries_use_component_artifacts_1.useComponentArtifacts)(host, component.id.toString());
+    const currentFile = resolveFilePath(urlParams.file, fileTree, mainFile, loadingCode);
+    const currentArtifact = (0, component_ui_artifacts_models_component_artifacts_model_1.getArtifactFileDetailsFromUrl)(artifacts, currentFile);
+    const currentArtifactFile = currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.artifactFile;
+    const { data: currentArtifactFileData, loading: loadingArtifact } = (0, component_ui_artifacts_queries_use_component_artifacts_1.useComponentArtifactFileContent)(host, {
+        componentId: component.id.toString(),
+        taskId: currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.taskId,
+        filePath: currentArtifactFile === null || currentArtifactFile === void 0 ? void 0 : currentArtifactFile.path,
+    }, !currentArtifact);
+    const currentArtifactFileContent = getArtifactFileContent((currentArtifactFileData && ((_b = (_a = currentArtifactFileData[0]) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0])) || undefined);
+    const isMobile = (0, ui_foundation_ui_hooks_use_is_mobile_1.useIsMobile)();
+    const [isSidebarOpen, setSidebarOpenness] = (0, react_1.useState)(!isMobile);
+    const sidebarOpenness = isSidebarOpen ? base_ui_surfaces_split_pane_split_pane_1.Layout.row : base_ui_surfaces_split_pane_split_pane_1.Layout.left;
+    const fileIconMatchers = (0, react_1.useMemo)(() => (0, lodash_1.flatten)(fileIconSlot === null || fileIconSlot === void 0 ? void 0 : fileIconSlot.values()), [fileIconSlot]);
+    const icon = (0, code_ui_utils_get_file_icon_1.getFileIcon)(fileIconMatchers, currentFile);
+    const loadingArtifactFileContent = loadingArtifact !== undefined ? loadingArtifact : !!currentFile && !currentArtifact;
+    const getHref = react_1.default.useCallback((node) => {
+        const queryParams = new URLSearchParams();
+        if (urlParams.version) {
+            queryParams.set('version', urlParams.version);
+        }
+        if (scopeFromQueryParams) {
+            queryParams.set('scope', scopeFromQueryParams);
+        }
+        return `${node.id}?${queryParams.toString()}`;
+    }, [urlParams.version, scopeFromQueryParams]);
+    const sortedDeps = (0, react_1.useMemo)(() => {
+        // need to create a new instance of dependencies because we cant mutate the original array
+        return [...(dependencies !== null && dependencies !== void 0 ? dependencies : [])].sort((a, b) => {
+            return (a.packageName || a.id).localeCompare(b.packageName || b.id);
+        });
+    }, [dependencies === null || dependencies === void 0 ? void 0 : dependencies.length]);
+    const componentId = laneFromUrl || urlParams.version ? component.id : component_1.ComponentID.fromString(component.id.toStringWithoutVersion());
+    return (react_1.default.createElement(base_ui_surfaces_split_pane_split_pane_1.SplitPane, { layout: sidebarOpenness, size: "85%", className: (0, classnames_1.default)(code_tab_page_module_scss_1.default.codePage, className) },
+        react_1.default.createElement(base_ui_surfaces_split_pane_split_pane_1.Pane, { className: code_tab_page_module_scss_1.default.left },
+            react_1.default.createElement(code_ui_code_view_1.CodeView, { componentId: componentId, currentFile: currentFile, icon: icon, currentFileContent: currentArtifactFileContent, loading: loadingArtifactFileContent || loadingCode, codeSnippetClassName: codeViewClassName, dependencies: dependencies, host: host })),
+        react_1.default.createElement(base_ui_surfaces_split_pane_hover_splitter_1.HoverSplitter, { className: code_tab_page_module_scss_1.default.splitter },
+            react_1.default.createElement(ui_foundation_ui_buttons_collapser_1.Collapser, { placement: "left", isOpen: isSidebarOpen, onMouseDown: (e) => e.stopPropagation(), onClick: () => setSidebarOpenness((x) => !x), tooltipContent: `${isSidebarOpen ? 'Hide' : 'Show'} file tree`, className: code_tab_page_module_scss_1.default.collapser })),
+        react_1.default.createElement(base_ui_surfaces_split_pane_split_pane_1.Pane, { className: code_tab_page_module_scss_1.default.right },
+            react_1.default.createElement(code_ui_code_tab_tree_1.CodeTabTree, { host: host, currentFile: currentFile, dependencies: sortedDeps, fileTree: fileTree, widgets: (0, react_1.useMemo)(() => [generateWidget(mainFile, devFiles)], [mainFile, devFiles]), getHref: getHref, getIcon: (0, react_1.useMemo)(() => generateIcon(fileIconMatchers), fileIconMatchers) }))));
+}
+function generateWidget(mainFile, devFiles) {
+    return function Widget({ node }) {
+        const fileName = node === null || node === void 0 ? void 0 : node.id;
+        if (fileName === mainFile) {
+            return react_1.default.createElement(documenter_ui_label_1.Label, { className: code_tab_page_module_scss_1.default.label }, "main");
+        }
+        if (devFiles === null || devFiles === void 0 ? void 0 : devFiles.includes(fileName)) {
+            return react_1.default.createElement(documenter_ui_label_1.Label, { className: code_tab_page_module_scss_1.default.label }, "dev");
+        }
+        return null;
+    };
+}
+function generateIcon(fileIconMatchers) {
+    return function Icon({ id }) {
+        return (0, code_ui_utils_get_file_icon_1.getFileIcon)(fileIconMatchers, id);
+    };
+}
+function getArtifactFileContent(file) {
+    var _a;
+    if (!file)
+        return undefined;
+    if ((0, is_binary_path_1.default)(file.path) || ((_a = file.size) !== null && _a !== void 0 ? _a : 0) > component_ui_artifacts_artifacts_tree_1.FILE_SIZE_THRESHOLD)
+        return undefined;
+    return file.content;
+}
+//# sourceMappingURL=code-tab-page.js.map

package/dist/code-tab-page.js.map

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

package/dist/code-tab-page.module.scss

@@ -0,0 +1,45 @@
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+$panelBg: #fafafa;
+
+.codePage {
+  height: calc(100vh - 56px);
+  width: 100%;
+}
+
+.left {
+  min-width: 200px;
+
+  //cannot assign max-width directly to right side
+  max-width: calc(100% - 200px);
+
+  display: flex;
+}
+
+.right {
+  position: relative;
+  // background: $panelBg;
+  overflow-y: auto;
+  // this is to fix the right panel when it gets too big or too small
+  min-width: 200px;
+  max-width: calc(100% - 200px);
+}
+
+.splitter {
+  position: relative;
+
+  > :first-child {
+    z-index: $pane-splitter-zIndex;
+    position: absolute;
+  }
+}
+
+.collapser {
+  right: 1px;
+}
+
+.depNode {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 8px;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { CodePage, generateIcon } from './code-tab-page';
+export type { CodePageProps } from './code-tab-page';

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateIcon = exports.CodePage = void 0;
+var code_tab_page_1 = require("./code-tab-page");
+Object.defineProperty(exports, "CodePage", { enumerable: true, get: function () { return code_tab_page_1.CodePage; } });
+Object.defineProperty(exports, "generateIcon", { enumerable: true, get: function () { return code_tab_page_1.generateIcon; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iDAAyD;AAAhD,yGAAA,QAAQ,OAAA;AAAE,6GAAA,YAAY,OAAA"}

package/dist/preview-1753881650385.js

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

package/index.ts

@@ -0,0 +1,2 @@
+export { CodePage, generateIcon } from './code-tab-page';
+export type { CodePageProps } from './code-tab-page';

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@teambit/code.ui.code-tab-page",
+  "version": "0.0.0-0a5b3ead38a0a82fc1b225c3a112b013e7fc4be5",
+  "homepage": "https://bit.cloud/teambit/code/ui/code-tab-page",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.code",
+    "name": "ui/code-tab-page",
+    "version": "0a5b3ead38a0a82fc1b225c3a112b013e7fc4be5"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "is-binary-path": "2.1.0",
+    "lodash": "4.17.21",
+    "path-browserify": "^1.0.1",
+    "core-js": "^3.0.0",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
+    "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
+    "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
+    "@teambit/code.ui.utils.get-file-icon": "0.0.496",
+    "@teambit/component.ui.artifacts.models.component-artifacts-model": "0.0.12",
+    "@teambit/documenter.ui.label": "4.0.3",
+    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.199",
+    "@teambit/code.ui.code-tab-tree": "0.0.618",
+    "@teambit/code.ui.hooks.use-code-params": "0.0.497",
+    "@teambit/code.ui.queries.get-component-code": "0.0.503",
+    "@teambit/component.ui.artifacts.artifacts-tree": "0.0.28",
+    "@teambit/component.ui.artifacts.queries.use-component-artifacts": "0.0.14",
+    "@teambit/design.ui.tree": "0.0.16",
+    "@teambit/ui-foundation.ui.tree.tree-node": "0.0.517",
+    "@teambit/code.ui.code-view": "0.0.0-c535972a20146918fa970d0fdeeba1d8358f8384",
+    "@teambit/lanes.hooks.use-viewed-lane-from-url": "0.0.0-e66a753bf147ef03aea5ce8b7e69b286fde48737",
+    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.0-3a2857def44d9dbe2a378aa370c6147bc5f8002e"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/lodash": "4.14.165",
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "react-router-dom": "^6.22.3",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "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/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;
+}