@teambit/code.ui.code-tab-page 0.0.565 → 0.0.568

package/code-tab-page.tsx

@@ -2,16 +2,21 @@ import { ComponentContext } from '@teambit/component';
 import classNames from 'classnames';
 import React, { useContext, useState, HTMLAttributes, useMemo } from 'react';
 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 { getFileIcon, FileIconMatch } from '@teambit/code.ui.utils.get-file-icon';
 import type { FileIconSlot } from '@teambit/code';
 import { CodeView } from '@teambit/code.ui.code-view';
 import { CodeTabTree } from '@teambit/code.ui.code-tab-tree';
-import { useCodeParams } from '@teambit/code.ui.hooks.use-code-params';
 import { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';
+import { WidgetProps } from '@teambit/ui-foundation.ui.tree.tree-node';
+import { getFileIcon, FileIconMatch } from '@teambit/code.ui.utils.get-file-icon';
+import { useCodeParams } from '@teambit/code.ui.hooks.use-code-params';
+import { TreeNode } from '@teambit/design.ui.tree';
+import { affix } from '@teambit/base-ui.utils.string.affix';
+
 import styles from './code-tab-page.module.scss';
 
 type CodePageProps = {
@@ -19,15 +24,11 @@ type CodePageProps = {
 } & HTMLAttributes<HTMLDivElement>;
 
 export function CodePage({ className, fileIconSlot }: CodePageProps) {
-  const fileName = useCodeParams();
+  const urlParams = useCodeParams();
   const component = useContext(ComponentContext);
   const { mainFile, fileTree = [], dependencies, devFiles } = useCode(component.id);
 
-  const fileFromUrl = useMemo(() => {
-    return fileName.file;
-  }, [fileName]);
-
-  const currentFile = fileFromUrl || mainFile;
+  const currentFile = urlParams.file || mainFile;
   const isMobile = useIsMobile();
   const [isSidebarOpen, setSidebarOpenness] = useState(!isMobile);
   const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;
@@ -54,11 +55,30 @@ export function CodePage({ className, fileIconSlot }: CodePageProps) {
           currentFile={currentFile}
           dependencies={dependencies}
           fileTree={fileTree}
-          devFiles={devFiles}
-          mainFile={mainFile}
-          fileIconMatchers={fileIconMatchers}
+          widgets={useMemo(() => [generateWidget(mainFile, devFiles)], [mainFile, devFiles])}
+          getHref={useMemo(() => (node) => `${node.id}${affix('?version=', urlParams.version)}`, [urlParams.version])}
+          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;
+  };
+}
+
+function generateIcon(fileIconMatchers: FileIconMatch[]) {
+  return function Icon({ id }: TreeNode) {
+    return getFileIcon(fileIconMatchers, id);
+  };
+}

package/dist/code-tab-page.js

@@ -27,24 +27,23 @@ const component_1 = require("@teambit/component");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 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_utils_get_file_icon_1 = require("@teambit/code.ui.utils.get-file-icon");
 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 code_ui_hooks_use_code_params_1 = require("@teambit/code.ui.hooks.use-code-params");
 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 base_ui_utils_string_affix_1 = require("@teambit/base-ui.utils.string.affix");
 const code_tab_page_module_scss_1 = __importDefault(require("./code-tab-page.module.scss"));
 function CodePage({ className, fileIconSlot }) {
-    const fileName = (0, code_ui_hooks_use_code_params_1.useCodeParams)();
+    const urlParams = (0, code_ui_hooks_use_code_params_1.useCodeParams)();
     const component = (0, react_1.useContext)(component_1.ComponentContext);
     const { mainFile, fileTree = [], dependencies, devFiles } = (0, code_ui_queries_get_component_code_1.useCode)(component.id);
-    const fileFromUrl = (0, react_1.useMemo)(() => {
-        return fileName.file;
-    }, [fileName]);
-    const currentFile = fileFromUrl || mainFile;
+    const currentFile = urlParams.file || mainFile;
     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;
@@ -56,7 +55,24 @@ function CodePage({ className, fileIconSlot }) {
         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, { currentFile: currentFile, dependencies: dependencies, fileTree: fileTree, devFiles: devFiles, mainFile: mainFile, fileIconMatchers: fileIconMatchers }))));
+            react_1.default.createElement(code_ui_code_tab_tree_1.CodeTabTree, { currentFile: currentFile, dependencies: dependencies, fileTree: fileTree, widgets: (0, react_1.useMemo)(() => [generateWidget(mainFile, devFiles)], [mainFile, devFiles]), getHref: (0, react_1.useMemo)(() => (node) => `${node.id}${(0, base_ui_utils_string_affix_1.affix)('?version=', urlParams.version)}`, [urlParams.version]), getIcon: (0, react_1.useMemo)(() => generateIcon(fileIconMatchers), fileIconMatchers) }))));
 }
 exports.CodePage = CodePage;
+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);
+    };
+}
 //# sourceMappingURL=code-tab-page.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"code-tab-page.js","sourceRoot":"","sources":["../code-tab-page.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAsD;AACtD,4DAAoC;AACpC,+CAA6E;AAC7E,mCAAiC;AACjC,4GAA0F;AAC1F,oHAAoF;AACpF,oGAAwE;AACxE,oGAAsE;AACtE,sFAAkF;AAElF,kEAAsD;AACtD,0EAA6D;AAC7D,0FAAuE;AACvE,wGAA4E;AAC5E,4FAAiD;AAMjD,SAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAiB;IACjE,MAAM,QAAQ,GAAG,IAAA,6CAAa,GAAE,CAAC;IACjC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,4BAAgB,CAAC,CAAC;IAC/C,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAA,4CAAO,EAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAElF,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,OAAO,QAAQ,CAAC,IAAI,CAAC;IACvB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,WAAW,IAAI,QAAQ,CAAC;IAC5C,MAAM,QAAQ,GAAG,IAAA,kDAAW,GAAE,CAAC;IAC/B,MAAM,CAAC,aAAa,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,aAAa,CAAC,CAAC,CAAC,+CAAM,CAAC,GAAG,CAAC,CAAC,CAAC,+CAAM,CAAC,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAoB,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,gBAAO,EAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACzG,MAAM,IAAI,GAAG,IAAA,yCAAW,EAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IAExD,OAAO,CACL,8BAAC,kDAAS,IAAC,MAAM,EAAE,eAAe,EAAE,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAM,CAAC,QAAQ,EAAE,SAAS,CAAC;QAC9F,8BAAC,6CAAI,IAAC,SAAS,EAAE,mCAAM,CAAC,IAAI;YAC1B,8BAAC,4BAAQ,IAAC,WAAW,EAAE,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,CACxE;QACP,8BAAC,0DAAa,IAAC,SAAS,EAAE,mCAAM,CAAC,QAAQ;YACvC,8BAAC,8CAAS,IACR,SAAS,EAAC,MAAM,EAChB,MAAM,EAAE,aAAa,EACrB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAC5C,cAAc,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,YAAY,EAC9D,SAAS,EAAE,mCAAM,CAAC,SAAS,GAC3B,CACY;QAChB,8BAAC,6CAAI,IAAC,SAAS,EAAE,mCAAM,CAAC,KAAK;YAC3B,8BAAC,mCAAW,IACV,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,GAClC,CACG,CACG,CACb,CAAC;AACJ,CAAC;AA3CD,4BA2CC"}
+{"version":3,"file":"code-tab-page.js","sourceRoot":"","sources":["../code-tab-page.tsx"],"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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/code.ui.code-tab-page",
-  "version": "0.0.565",
+  "version": "0.0.568",
   "homepage": "https://bit.dev/teambit/code/ui/code-tab-page",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.code",
     "name": "ui/code-tab-page",
-    "version": "0.0.565"
+    "version": "0.0.568"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -14,14 +14,18 @@
     "core-js": "^3.0.0",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
+    "@teambit/base-ui.utils.string.affix": "1.0.0",
+    "@teambit/documenter.ui.label": "4.0.3",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
-    "@teambit/code.ui.code-tab-tree": "0.0.560",
-    "@teambit/code.ui.code-view": "0.0.489",
-    "@teambit/code.ui.hooks.use-code-params": "0.0.486",
-    "@teambit/code.ui.queries.get-component-code": "0.0.487",
+    "@teambit/code.ui.code-tab-tree": "0.0.563",
+    "@teambit/code.ui.code-view": "0.0.490",
+    "@teambit/code.ui.hooks.use-code-params": "0.0.487",
+    "@teambit/code.ui.queries.get-component-code": "0.0.488",
     "@teambit/code.ui.utils.get-file-icon": "0.0.486",
+    "@teambit/design.ui.tree": "0.0.5",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.194",
-    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.179"
+    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.179",
+    "@teambit/ui-foundation.ui.tree.tree-node": "0.0.492"
   },
   "devDependencies": {
     "@types/classnames": "2.2.11",

package/tsconfig.json

@@ -22,6 +22,11 @@
     "resolveJsonModule": true
   },
   "exclude": [
-    "dist"
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
   ]
 }