feat(Code): Navigate imported components and packages

.bitmap

@@ -1549,6 +1549,13 @@
         "mainFile": "index.ts",
         "rootDir": "components/ui/code-tab-page"
     },
+    "ui/code-view": {
+        "name": "ui/code-view",
+        "scope": "teambit.code",
+        "version": "0.0.519",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/code-view"
+    },
     "ui/compare/lane-compare": {
         "name": "ui/compare/lane-compare",
         "scope": "teambit.lanes",
@@ -1759,6 +1766,20 @@
         "mainFile": "index.ts",
         "rootDir": "components/ui/hooks/scope-context"
     },
+    "ui/hooks/use-core-aspects": {
+        "name": "ui/hooks/use-core-aspects",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.harmony",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/hooks/use-core-aspects",
+        "config": {
+            "teambit.react/v17/[email protected]": {},
+            "teambit.envs/envs": {
+                "env": "teambit.react/v17/react-env"
+            }
+        }
+    },
     "ui/inputs/lane-selector": {
         "name": "ui/inputs/lane-selector",
         "scope": "teambit.lanes",

components/ui/code-tab-page/code-tab-page.tsx

@@ -40,13 +40,60 @@ export function CodePage({ className, fileIconSlot, host, codeViewClassName }: C
   const [searchParams] = useSearchParams();
   const scopeFromQueryParams = searchParams.get('scope');
   const component = useContext(ComponentContext);
-  const { mainFile, fileTree = [], dependencies, devFiles } = useCode(component.id);
+  const [fileParam, setFileParam] = useState<{
+    current?: string;
+    prev?: string;
+  }>({ current: urlParams.file });
+
+  React.useEffect(() => {
+    if (urlParams.file !== fileParam.current) {
+      setFileParam((prev) => ({ current: urlParams.file, prev: prev.current }));
+    }
+  }, [urlParams.file, fileParam.current]);
+
+  const { mainFile, fileTree = [], dependencies, devFiles, loading: loadingCode } = useCode(component.id);
   const { data: artifacts = [] } = useComponentArtifacts(host, component.id.toString());
+  const currentFile = loadingCode
+    ? undefined
+    : (() => {
+        if (urlParams.file && fileTree.includes(urlParams.file)) {
+          return urlParams.file;
+        }
+        if (!urlParams.file) return mainFile;
+
+        const extractNameAndExtension = (filename) => {
+          const match = filename.match(/^(.*?)(\.[^.]+)?$/);
+          return [match[1], match[2]];
+        };
+
+        const [currentBase] = extractNameAndExtension(fileParam.current || '');
+        const mainFileExt = extractNameAndExtension(mainFile)[1];
+        const [, prevExt] = fileParam.prev ? extractNameAndExtension(fileParam.prev) : [null, null];
+
+        const matchingFiles = fileTree.filter((file) => {
+          const [fileBase] = extractNameAndExtension(file);
+          return fileBase === currentBase || fileBase === fileParam.current;
+        });
+
+        if (matchingFiles.length === 1) {
+          return matchingFiles[0];
+        }
+
+        const preferredExt = prevExt || mainFileExt;
+        if (preferredExt) {
+          const exactExtensionMatch = matchingFiles.find((file) => {
+            const [, fileExt] = extractNameAndExtension(file);
+            return fileExt === preferredExt;
+          });
+          if (exactExtensionMatch) return exactExtensionMatch;
+        }
+
+        return matchingFiles[0] || mainFile;
+      })();
 
-  const currentFile = urlParams.file || mainFile;
   const currentArtifact = getArtifactFileDetailsFromUrl(artifacts, currentFile);
   const currentArtifactFile = currentArtifact?.artifactFile;
-  const { data: currentArtifactFileData, loading } = useComponentArtifactFileContent(
+  const { data: currentArtifactFileData, loading: loadingArtifact } = useComponentArtifactFileContent(
     host,
     {
       componentId: component.id.toString(),
@@ -64,7 +111,8 @@ export function CodePage({ className, fileIconSlot, host, codeViewClassName }: C
   const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;
   const fileIconMatchers: FileIconMatch[] = useMemo(() => flatten(fileIconSlot?.values()), [fileIconSlot]);
   const icon = getFileIcon(fileIconMatchers, currentFile);
-  const loadingArtifactFileContent = loading !== undefined ? loading : !!currentFile && !currentArtifact;
+  const loadingArtifactFileContent =
+    loadingArtifact !== undefined ? loadingArtifact : !!currentFile && !currentArtifact;
   const getHref = React.useCallback(
     (node) => {
       const queryParams = new URLSearchParams();
@@ -90,8 +138,9 @@ export function CodePage({ className, fileIconSlot, host, codeViewClassName }: C
           currentFile={currentFile}
           icon={icon}
           currentFileContent={currentArtifactFileContent}
-          loading={loadingArtifactFileContent}
+          loading={loadingArtifactFileContent || loadingCode}
           codeSnippetClassName={codeViewClassName}
+          dependencies={dependencies}
         />
       </Pane>
       <HoverSplitter className={styles.splitter}>

components/ui/code-view/code-view.module.scss

@@ -0,0 +1,66 @@
+.codeView {
+  padding: 24px 40px;
+  width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  .codeSnippetWrapper {
+    width: 100%;
+    max-width: 100%;
+    .codeSnippet {
+      display: block;
+      overflow: auto;
+      height: calc(100vh - 200px);
+      > code {
+        > code {
+          // this is to design the line numbers culumn
+          border-right: 1px solid #323232;
+          padding-right: 16px !important;
+          margin-right: 16px;
+        }
+      }
+    }
+    // TODO - fix this in code snippet component. it breaks when the component renders in different places
+    > span {
+      top: 13px !important;
+    }
+  }
+}
+
+.codeView ::selection {
+  background-color: rgba(200, 200, 200, 0.25);
+}
+
+.img {
+  width: 20px;
+  margin-right: 10px;
+}
+
+.fileName {
+  display: flex;
+  align-items: baseline;
+}
+
+.emptyCodeView {
+  margin: auto;
+  text-align: center;
+  font-size: 24px;
+}
+
+.highlightedRow,
+.highlightedRow * {
+  background-color: rgb(97, 82, 207, 0.2) !important; // Ensure that this color is applied to all children as well
+}
+
+:global {
+  // after we set the line number to be inline we need to override the styles to make it look like it used to
+  .linenumber {
+    color: rgb(212, 212, 212) !important;
+    border-right: 1px solid #323232;
+    text-align: center !important;
+    padding-right: 0 !important;
+    margin-right: 1em !important;
+    user-select: none;
+    cursor: pointer;
+  }
+}