@teambit/code 0.0.567 → 0.0.571

package/code.section.tsx

@@ -0,0 +1,17 @@
+import { Section } from '@teambit/component';
+import React from 'react';
+import { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';
+import type { CodeUI } from './code.ui.runtime';
+
+export class CodeSection implements Section {
+  constructor(private codeUI: CodeUI) {}
+  route = {
+    path: '~code/:file*',
+    children: this.codeUI.getCodePage(),
+  };
+  navigationLink = {
+    href: '~code',
+    children: <MenuWidgetIcon icon="Code" tooltipContent="Code" />,
+  };
+  order = 30;
+}

package/code.ui.runtime.tsx

@@ -0,0 +1,53 @@
+import { ComponentAspect, ComponentUI } from '@teambit/component';
+import { UIRuntime } from '@teambit/ui';
+import React from 'react';
+import { SlotRegistry, Slot } from '@teambit/harmony';
+import type { FileIconMatch } from '@teambit/code.ui.utils.get-file-icon';
+import { staticStorageUrl } from '@teambit/base-ui.constants.storage';
+import { CodePage } from '@teambit/code.ui.code-tab-page';
+import { CodeAspect } from './code.aspect';
+import { CodeSection } from './code.section';
+
+const isTsx = /\.tsx$/;
+
+export type FileIconSlot = SlotRegistry<FileIconMatch[]>;
+
+/**
+ * Component code tab aspect. Presents the code tab page and allows to control the code tab and register specific icons for each file type.
+ *  @example CodeUI.registerEnvFileIcon([(fileName) => (/your-regexp/.test(fileName) ? 'your.icon.url' : undefined)])
+ */
+export class CodeUI {
+  constructor(
+    /**
+     * register an icon for a specific file type. pass icon and a match method/regexp
+     */
+    private fileIconSlot?: FileIconSlot
+  ) {}
+  getCodePage = () => {
+    return <CodePage fileIconSlot={this.fileIconSlot} />;
+  };
+  registerEnvFileIcon(icons: FileIconMatch[]) {
+    this.fileIconSlot?.register(icons);
+    return this;
+  }
+  static dependencies = [ComponentAspect];
+
+  static runtime = UIRuntime;
+
+  static slots = [Slot.withType<string>()];
+
+  static async provider([component]: [ComponentUI], config, [fileIconSlot]: [FileIconSlot]) {
+    const ui = new CodeUI(fileIconSlot);
+    const section = new CodeSection(ui);
+
+    // overrides the default tsx react icon with the typescript icon
+    ui.registerEnvFileIcon([
+      (fileName) => (isTsx.test(fileName) ? `${staticStorageUrl}/file-icons/file_type_typescript.svg` : undefined),
+    ]);
+    component.registerRoute(section.route);
+    component.registerWidget(section.navigationLink, section.order);
+    return ui;
+  }
+}
+
+CodeAspect.addRuntime(CodeUI);

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@teambit/code",
-  "version": "0.0.567",
+  "version": "0.0.571",
   "homepage": "https://bit.dev/teambit/component/code",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "code",
-    "version": "0.0.567"
+    "version": "0.0.571"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/base-ui.constants.storage": "1.0.0",
-    "@teambit/component": "0.0.567",
-    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.472",
-    "@teambit/code.ui.code-tab-page": "0.0.483",
-    "@teambit/code.ui.utils.get-file-icon": "0.0.470",
-    "@teambit/ui": "0.0.567"
+    "@teambit/component": "0.0.571",
+    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.474",
+    "@teambit/code.ui.code-tab-page": "0.0.485",
+    "@teambit/code.ui.utils.get-file-icon": "0.0.472",
+    "@teambit/ui": "0.0.571"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -28,7 +28,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.179",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -56,27 +56,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.179",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

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