@teambit/docs 0.0.629 → 0.0.633

package/dist/docs.ui.runtime.d.ts

@@ -1,7 +1,20 @@
 import { ComponentUI } from '@teambit/component';
+import type { TitleBadge } from '@teambit/component.ui.component-meta';
+import { TitleBadgeSlot } from './overview';
 export declare class DocsUI {
+    readonly titleBadgeSlot: TitleBadgeSlot;
+    constructor(titleBadgeSlot: TitleBadgeSlot);
+    /**
+     * register a new title badge into the overview section of a component.
+     */
+    registerTitleBadge(...titleBadge: TitleBadge[]): this;
+    /**
+     * list all title badges registered.
+     */
+    listTitleBadges(): TitleBadgeSlot;
     static dependencies: import("@teambit/harmony").Aspect[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
-    static provider([component]: [ComponentUI]): Promise<DocsUI>;
+    static slots: ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<TitleBadge>)[];
+    static provider([component]: [ComponentUI], config: any, [titleBadgeSlot]: [TitleBadgeSlot]): Promise<DocsUI>;
 }
 export default DocsUI;

package/dist/docs.ui.runtime.js

@@ -31,6 +31,16 @@ function _component() {
   return data;
 }
 
+function _harmony() {
+  const data = require("@teambit/harmony");
+
+  _harmony = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _ui() {
   const data = require("@teambit/ui");
 
@@ -62,8 +72,29 @@ function _overview() {
 }
 
 class DocsUI {
-  static async provider([component]) {
-    const docs = new DocsUI();
+  constructor(titleBadgeSlot) {
+    this.titleBadgeSlot = titleBadgeSlot;
+  }
+  /**
+   * register a new title badge into the overview section of a component.
+   */
+
+
+  registerTitleBadge(...titleBadge) {
+    this.titleBadgeSlot.register(titleBadge);
+    return this;
+  }
+  /**
+   * list all title badges registered.
+   */
+
+
+  listTitleBadges() {
+    return this.titleBadgeSlot;
+  }
+
+  static async provider([component], config, [titleBadgeSlot]) {
+    const docs = new DocsUI(titleBadgeSlot);
     const section = new (_overview().OverviewSection)(docs);
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
@@ -75,6 +106,7 @@ class DocsUI {
 exports.DocsUI = DocsUI;
 (0, _defineProperty2().default)(DocsUI, "dependencies", [_component().ComponentAspect]);
 (0, _defineProperty2().default)(DocsUI, "runtime", _ui().UIRuntime);
+(0, _defineProperty2().default)(DocsUI, "slots", [_harmony().Slot.withType()]);
 var _default = DocsUI;
 exports.default = _default;
 

package/dist/docs.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["docs.ui.runtime.tsx"],"names":["DocsUI","provider","component","docs","section","OverviewSection","registerRoute","route","registerNavigation","navigationLink","order","ComponentAspect","UIRuntime","DocsAspect","addRuntime"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,MAAMA,MAAN,CAAa;AAKG,eAARC,QAAQ,CAAC,CAACC,SAAD,CAAD,EAA6B;AAChD,UAAMC,IAAI,GAAG,IAAIH,MAAJ,EAAb;AACA,UAAMI,OAAO,GAAG,KAAIC,2BAAJ,EAAoBF,IAApB,CAAhB;AAEAD,IAAAA,SAAS,CAACI,aAAV,CAAwBF,OAAO,CAACG,KAAhC;AACAL,IAAAA,SAAS,CAACM,kBAAV,CAA6BJ,OAAO,CAACK,cAArC,EAAqDL,OAAO,CAACM,KAA7D;AAEA,WAAOP,IAAP;AACD;;AAbiB;;;gCAAPH,M,kBACW,CAACW,4BAAD,C;gCADXX,M,aAGMY,e;eAaJZ,M;;;AAEfa,mBAAWC,UAAX,CAAsBd,MAAtB","sourcesContent":["import { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { UIRuntime } from '@teambit/ui';\n\nimport { DocsAspect } from './docs.aspect';\nimport { OverviewSection } from './overview.section';\n\nexport class DocsUI {\n  static dependencies = [ComponentAspect];\n\n  static runtime = UIRuntime;\n\n  static async provider([component]: [ComponentUI]) {\n    const docs = new DocsUI();\n    const section = new OverviewSection(docs);\n\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n\n    return docs;\n  }\n}\n\nexport default DocsUI;\n\nDocsAspect.addRuntime(DocsUI);\n"]}
+{"version":3,"sources":["docs.ui.runtime.tsx"],"names":["DocsUI","constructor","titleBadgeSlot","registerTitleBadge","titleBadge","register","listTitleBadges","provider","component","config","docs","section","OverviewSection","registerRoute","route","registerNavigation","navigationLink","order","ComponentAspect","UIRuntime","Slot","withType","DocsAspect","addRuntime"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGO,MAAMA,MAAN,CAAa;AAClBC,EAAAA,WAAW,CAAUC,cAAV,EAA0C;AAAA,SAAhCA,cAAgC,GAAhCA,cAAgC;AAAE;AAEvD;AACF;AACA;;;AACEC,EAAAA,kBAAkB,CAAC,GAAGC,UAAJ,EAA8B;AAC9C,SAAKF,cAAL,CAAoBG,QAApB,CAA6BD,UAA7B;AACA,WAAO,IAAP;AACD;AAED;AACF;AACA;;;AACEE,EAAAA,eAAe,GAAG;AAChB,WAAO,KAAKJ,cAAZ;AACD;;AAQoB,eAARK,QAAQ,CAAC,CAACC,SAAD,CAAD,EAA6BC,MAA7B,EAAqC,CAACP,cAAD,CAArC,EAAyE;AAC5F,UAAMQ,IAAI,GAAG,IAAIV,MAAJ,CAAWE,cAAX,CAAb;AACA,UAAMS,OAAO,GAAG,KAAIC,2BAAJ,EAAoBF,IAApB,CAAhB;AAEAF,IAAAA,SAAS,CAACK,aAAV,CAAwBF,OAAO,CAACG,KAAhC;AACAN,IAAAA,SAAS,CAACO,kBAAV,CAA6BJ,OAAO,CAACK,cAArC,EAAqDL,OAAO,CAACM,KAA7D;AAEA,WAAOP,IAAP;AACD;;AAhCiB;;;gCAAPV,M,kBAkBW,CAACkB,4BAAD,C;gCAlBXlB,M,aAoBMmB,e;gCApBNnB,M,WAsBI,CAACoB,gBAAKC,QAAL,EAAD,C;eAaFrB,M;;;AAEfsB,mBAAWC,UAAX,CAAsBvB,MAAtB","sourcesContent":["import { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { Slot } from '@teambit/harmony';\nimport type { TitleBadge } from '@teambit/component.ui.component-meta';\nimport { UIRuntime } from '@teambit/ui';\n\nimport { DocsAspect } from './docs.aspect';\nimport { OverviewSection } from './overview.section';\nimport { TitleBadgeSlot } from './overview';\n\nexport class DocsUI {\n  constructor(readonly titleBadgeSlot: TitleBadgeSlot) {}\n\n  /**\n   * register a new title badge into the overview section of a component.\n   */\n  registerTitleBadge(...titleBadge: TitleBadge[]) {\n    this.titleBadgeSlot.register(titleBadge);\n    return this;\n  }\n\n  /**\n   * list all title badges registered.\n   */\n  listTitleBadges() {\n    return this.titleBadgeSlot;\n  }\n\n  static dependencies = [ComponentAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [Slot.withType<TitleBadge>()];\n\n  static async provider([component]: [ComponentUI], config, [titleBadgeSlot]: [TitleBadgeSlot]) {\n    const docs = new DocsUI(titleBadgeSlot);\n    const section = new OverviewSection(docs);\n\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n\n    return docs;\n  }\n}\n\nexport default DocsUI;\n\nDocsAspect.addRuntime(DocsUI);\n"]}

package/dist/index.d.ts

@@ -4,5 +4,6 @@ export type { DocsUI } from './docs.ui.runtime';
 export type { DocsPreview } from './docs.preview.runtime';
 export type { DocReader } from './doc-reader';
 export { Doc, DocProp, DocPropList } from './doc';
+export type { TitleBadgeSlot } from './overview';
 export { DocsAspect };
 export default DocsAspect;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["DocsAspect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAMA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;eAEeA,kB","sourcesContent":["import { DocsAspect } from './docs.aspect';\n\nexport type { DocsMain } from './docs.main.runtime';\nexport type { DocsUI } from './docs.ui.runtime';\nexport type { DocsPreview } from './docs.preview.runtime';\nexport type { DocReader } from './doc-reader';\nexport { Doc, DocProp, DocPropList } from './doc';\nexport { DocsAspect };\nexport default DocsAspect;\n"]}
+{"version":3,"sources":["index.ts"],"names":["DocsAspect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAMA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;eAKeA,kB","sourcesContent":["import { DocsAspect } from './docs.aspect';\n\nexport type { DocsMain } from './docs.main.runtime';\nexport type { DocsUI } from './docs.ui.runtime';\nexport type { DocsPreview } from './docs.preview.runtime';\nexport type { DocReader } from './doc-reader';\nexport { Doc, DocProp, DocPropList } from './doc';\n\nexport type { TitleBadgeSlot } from './overview';\n\nexport { DocsAspect };\nexport default DocsAspect;\n"]}

package/dist/overview/index.d.ts

@@ -1 +1,2 @@
 export { Overview } from './overview';
+export type { TitleBadgeSlot } from './overview';

package/dist/overview/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["export { Overview } from './overview';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["export { Overview } from './overview';\nexport type { TitleBadgeSlot } from './overview';\n"]}

package/dist/overview/overview.d.ts

@@ -1,2 +1,8 @@
 /// <reference types="react" />
-export declare function Overview(): JSX.Element;
+import type { SlotRegistry } from '@teambit/harmony';
+import { TitleBadge } from '@teambit/component.ui.component-meta';
+export declare type TitleBadgeSlot = SlotRegistry<TitleBadge[]>;
+export declare type OverviewProps = {
+    titleBadges: TitleBadgeSlot;
+};
+export declare function Overview({ titleBadges }: OverviewProps): JSX.Element;

package/dist/overview/overview.js

@@ -1,5 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.array.iterator.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +21,16 @@ function _react() {
   return data;
 }
 
+function _lodash() {
+  const data = _interopRequireDefault(require("lodash.flatten"));
+
+  _lodash = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _component() {
   const data = require("@teambit/component");
 
@@ -45,12 +61,50 @@ function _designUiSurfaces() {
   return data;
 }
 
+function _componentUi() {
+  const data = require("@teambit/component.ui.component-meta");
+
+  _componentUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentUiHooks() {
+  const data = require("@teambit/component.ui.hooks.use-fetch-docs");
+
+  _componentUiHooks = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _overviewModule() {
+  const data = _interopRequireDefault(require("./overview.module.scss"));
+
+  _overviewModule = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function Overview() {
+function Overview({
+  titleBadges
+}) {
+  var _component$preview;
+
   const component = (0, _react().useContext)(_component().ComponentContext);
+  const {
+    data
+  } = (0, _componentUiHooks().useFetchDocs)(component.id.toString());
+  const fetchComponent = data === null || data === void 0 ? void 0 : data.component;
   if ((component === null || component === void 0 ? void 0 : component.buildStatus) === 'pending' && (component === null || component === void 0 ? void 0 : component.host) === 'teambit.scope/scope') return /*#__PURE__*/_react().default.createElement(_designUiSurfaces().StatusMessageCard, {
     style: {
       margin: 'auto'
@@ -65,6 +119,31 @@ function Overview() {
     status: "FAILURE",
     title: "failed to get component preview "
   });
+
+  if (((_component$preview = component.preview) === null || _component$preview === void 0 ? void 0 : _component$preview.includesEnvTemplate) === false) {
+    const labels = component.labels.length > 0 ? component.labels : fetchComponent === null || fetchComponent === void 0 ? void 0 : fetchComponent.labels;
+    const badges = (0, _lodash().default)(titleBadges.values());
+    return /*#__PURE__*/_react().default.createElement("div", {
+      className: _overviewModule().default.overviewWrapper
+    }, /*#__PURE__*/_react().default.createElement(_componentUi().ComponentOverview, {
+      className: _overviewModule().default.componentOverviewBlock,
+      displayName: component.displayName,
+      version: component.version,
+      abstract: component.description || (fetchComponent === null || fetchComponent === void 0 ? void 0 : fetchComponent.description),
+      labels: labels || [],
+      packageName: component.packageName,
+      titleBadges: badges
+    }), /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, {
+      component: component,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      previewName: "overview",
+      fullContentHeight: true
+    }));
+  }
+
   return /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, {
     component: component,
     style: {

package/dist/overview/overview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["overview.tsx"],"names":["Overview","component","ComponentContext","buildStatus","host","margin","width","height"],"mappings":";;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAEO,SAASA,QAAT,GAAoB;AACzB,QAAMC,SAAS,GAAG,yBAAWC,6BAAX,CAAlB;AACA,MAAI,CAAAD,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEE,WAAX,MAA2B,SAA3B,IAAwC,CAAAF,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEG,IAAX,MAAoB,qBAAhE,EACE,oBACE,+BAAC,qCAAD;AAAmB,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAA1B;AAA8C,IAAA,MAAM,EAAC,YAArD;AAAkE,IAAA,KAAK,EAAC;AAAxE,iCADF;AAKF,MAAI,CAAAJ,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEE,WAAX,MAA2B,QAA3B,IAAuC,CAAAF,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEG,IAAX,MAAoB,qBAA/D,EACE,oBACE,+BAAC,qCAAD;AACE,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV,KADT;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,KAAK,EAAC;AAHR,IADF;AAOF,sBAAO,+BAAC,6BAAD;AAAkB,IAAA,SAAS,EAAEJ,SAA7B;AAAwC,IAAA,KAAK,EAAE;AAAEK,MAAAA,KAAK,EAAE,MAAT;AAAiBC,MAAAA,MAAM,EAAE;AAAzB,KAA/C;AAAkF,IAAA,WAAW,EAAC;AAA9F,IAAP;AACD","sourcesContent":["import React, { useContext } from 'react';\nimport { ComponentContext } from '@teambit/component';\nimport { ComponentPreview } from '@teambit/preview.ui.component-preview';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\n\nexport function Overview() {\n  const component = useContext(ComponentContext);\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard style={{ margin: 'auto' }} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        style={{ margin: 'auto' }}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n  return <ComponentPreview component={component} style={{ width: '100%', height: '100%' }} previewName=\"overview\" />;\n}\n"]}
+{"version":3,"sources":["overview.tsx"],"names":["Overview","titleBadges","component","ComponentContext","data","id","toString","fetchComponent","buildStatus","host","margin","preview","includesEnvTemplate","labels","length","badges","values","styles","overviewWrapper","componentOverviewBlock","displayName","version","description","packageName","width","height"],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\nimport flatten from 'lodash.flatten';\nimport { ComponentContext } from '@teambit/component';\nimport type { SlotRegistry } from '@teambit/harmony';\nimport { ComponentPreview } from '@teambit/preview.ui.component-preview';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { ComponentOverview, TitleBadge } from '@teambit/component.ui.component-meta';\nimport { useFetchDocs } from '@teambit/component.ui.hooks.use-fetch-docs';\nimport styles from './overview.module.scss';\n\nexport type TitleBadgeSlot = SlotRegistry<TitleBadge[]>;\n\nexport type OverviewProps = {\n  titleBadges: TitleBadgeSlot;\n};\n\nexport function Overview({ titleBadges }: OverviewProps) {\n  const component = useContext(ComponentContext);\n  const { data } = useFetchDocs(component.id.toString());\n  const fetchComponent = data?.component;\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard style={{ margin: 'auto' }} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        style={{ margin: 'auto' }}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n\n  if (component.preview?.includesEnvTemplate === false) {\n    const labels = component.labels.length > 0 ? component.labels : fetchComponent?.labels;\n    const badges = flatten(titleBadges.values());\n\n    return (\n      <div className={styles.overviewWrapper}>\n        <ComponentOverview\n          className={styles.componentOverviewBlock}\n          displayName={component.displayName}\n          version={component.version}\n          abstract={component.description || fetchComponent?.description}\n          labels={labels || []}\n          packageName={component.packageName}\n          titleBadges={badges}\n        />\n        <ComponentPreview\n          component={component}\n          style={{ width: '100%', height: '100%' }}\n          previewName=\"overview\"\n          fullContentHeight\n        />\n      </div>\n    );\n  }\n\n  return <ComponentPreview component={component} style={{ width: '100%', height: '100%' }} previewName=\"overview\" />;\n}\n"]}

package/dist/overview/overview.module.scss

@@ -0,0 +1,10 @@
+.overviewWrapper {
+  overflow: auto;
+  --bit-h-lg: 36px;
+}
+
+.componentOverviewBlock {
+  padding: 50px 40px 10px 40px;
+  max-width: 1440px;
+  margin: 0 auto 150px auto;
+}

package/dist/overview.section.js

@@ -52,7 +52,9 @@ class OverviewSection {
     (0, _defineProperty2().default)(this, "route", {
       path: '',
       exact: true,
-      children: /*#__PURE__*/_react().default.createElement(_overview().Overview, null)
+      children: /*#__PURE__*/_react().default.createElement(_overview().Overview, {
+        titleBadges: this.docs.titleBadgeSlot
+      })
     });
     (0, _defineProperty2().default)(this, "order", 10);
   }

package/dist/overview.section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["overview.section.tsx"],"names":["OverviewSection","constructor","docs","href","exact","children","path"],"mappings":";;;;;;;;;;;;;;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,MAAMA,eAAN,CAAyC;AAC9CC,EAAAA,WAAW;AACT;AACJ;AACA;AACYC,EAAAA,IAJC,EAKT;AAAA,SADQA,IACR,GADQA,IACR;AAAA,4DAEe;AACfC,MAAAA,IAAI,EAAE,EADS;AAEfC,MAAAA,KAAK,EAAE,IAFQ;AAGfC,MAAAA,QAAQ,EAAE;AAHK,KAFf;AAAA,mDAQM;AACNC,MAAAA,IAAI,EAAE,EADA;AAENF,MAAAA,KAAK,EAAE,IAFD;AAGNC,MAAAA,QAAQ,eAAE,+BAAC,oBAAD;AAHJ,KARN;AAAA,mDAcM,EAdN;AAAE;;AAN0C","sourcesContent":["import { Section } from '@teambit/component';\nimport React from 'react';\n\nimport { DocsUI } from './docs.ui.runtime';\nimport { Overview } from './overview';\n\nexport class OverviewSection implements Section {\n  constructor(\n    /**\n     * docs ui extension.\n     */\n    private docs: DocsUI\n  ) {}\n\n  navigationLink = {\n    href: '',\n    exact: true,\n    children: 'Overview',\n  };\n\n  route = {\n    path: '',\n    exact: true,\n    children: <Overview />,\n  };\n\n  order = 10;\n}\n"]}
+{"version":3,"sources":["overview.section.tsx"],"names":["OverviewSection","constructor","docs","href","exact","children","path","titleBadgeSlot"],"mappings":";;;;;;;;;;;;;;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,MAAMA,eAAN,CAAyC;AAC9CC,EAAAA,WAAW;AACT;AACJ;AACA;AACYC,EAAAA,IAJC,EAKT;AAAA,SADQA,IACR,GADQA,IACR;AAAA,4DAEe;AACfC,MAAAA,IAAI,EAAE,EADS;AAEfC,MAAAA,KAAK,EAAE,IAFQ;AAGfC,MAAAA,QAAQ,EAAE;AAHK,KAFf;AAAA,mDAQM;AACNC,MAAAA,IAAI,EAAE,EADA;AAENF,MAAAA,KAAK,EAAE,IAFD;AAGNC,MAAAA,QAAQ,eAAE,+BAAC,oBAAD;AAAU,QAAA,WAAW,EAAE,KAAKH,IAAL,CAAUK;AAAjC;AAHJ,KARN;AAAA,mDAcM,EAdN;AAAE;;AAN0C","sourcesContent":["import { Section } from '@teambit/component';\nimport React from 'react';\n\nimport { DocsUI } from './docs.ui.runtime';\nimport { Overview } from './overview';\n\nexport class OverviewSection implements Section {\n  constructor(\n    /**\n     * docs ui extension.\n     */\n    private docs: DocsUI\n  ) {}\n\n  navigationLink = {\n    href: '',\n    exact: true,\n    children: 'Overview',\n  };\n\n  route = {\n    path: '',\n    exact: true,\n    children: <Overview titleBadges={this.docs.titleBadgeSlot} />,\n  };\n\n  order = 10;\n}\n"]}

package/docs.ui.runtime.tsx

@@ -1,16 +1,38 @@
 import { ComponentAspect, ComponentUI } from '@teambit/component';
+import { Slot } from '@teambit/harmony';
+import type { TitleBadge } from '@teambit/component.ui.component-meta';
 import { UIRuntime } from '@teambit/ui';
 
 import { DocsAspect } from './docs.aspect';
 import { OverviewSection } from './overview.section';
+import { TitleBadgeSlot } from './overview';
 
 export class DocsUI {
+  constructor(readonly titleBadgeSlot: TitleBadgeSlot) {}
+
+  /**
+   * register a new title badge into the overview section of a component.
+   */
+  registerTitleBadge(...titleBadge: TitleBadge[]) {
+    this.titleBadgeSlot.register(titleBadge);
+    return this;
+  }
+
+  /**
+   * list all title badges registered.
+   */
+  listTitleBadges() {
+    return this.titleBadgeSlot;
+  }
+
   static dependencies = [ComponentAspect];
 
   static runtime = UIRuntime;
 
-  static async provider([component]: [ComponentUI]) {
-    const docs = new DocsUI();
+  static slots = [Slot.withType<TitleBadge>()];
+
+  static async provider([component]: [ComponentUI], config, [titleBadgeSlot]: [TitleBadgeSlot]) {
+    const docs = new DocsUI(titleBadgeSlot);
     const section = new OverviewSection(docs);
 
     component.registerRoute(section.route);

package/overview/index.ts

@@ -1 +1,2 @@
 export { Overview } from './overview';
+export type { TitleBadgeSlot } from './overview';

package/overview/overview.module.scss

@@ -0,0 +1,10 @@
+.overviewWrapper {
+  overflow: auto;
+  --bit-h-lg: 36px;
+}
+
+.componentOverviewBlock {
+  padding: 50px 40px 10px 40px;
+  max-width: 1440px;
+  margin: 0 auto 150px auto;
+}

package/overview/overview.tsx

@@ -1,10 +1,23 @@
 import React, { useContext } from 'react';
+import flatten from 'lodash.flatten';
 import { ComponentContext } from '@teambit/component';
+import type { SlotRegistry } from '@teambit/harmony';
 import { ComponentPreview } from '@teambit/preview.ui.component-preview';
 import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
+import { ComponentOverview, TitleBadge } from '@teambit/component.ui.component-meta';
+import { useFetchDocs } from '@teambit/component.ui.hooks.use-fetch-docs';
+import styles from './overview.module.scss';
 
-export function Overview() {
+export type TitleBadgeSlot = SlotRegistry<TitleBadge[]>;
+
+export type OverviewProps = {
+  titleBadges: TitleBadgeSlot;
+};
+
+export function Overview({ titleBadges }: OverviewProps) {
   const component = useContext(ComponentContext);
+  const { data } = useFetchDocs(component.id.toString());
+  const fetchComponent = data?.component;
   if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
     return (
       <StatusMessageCard style={{ margin: 'auto' }} status="PROCESSING" title="component preview pending">
@@ -19,5 +32,31 @@ export function Overview() {
         title="failed to get component preview "
       ></StatusMessageCard>
     );
+
+  if (component.preview?.includesEnvTemplate === false) {
+    const labels = component.labels.length > 0 ? component.labels : fetchComponent?.labels;
+    const badges = flatten(titleBadges.values());
+
+    return (
+      <div className={styles.overviewWrapper}>
+        <ComponentOverview
+          className={styles.componentOverviewBlock}
+          displayName={component.displayName}
+          version={component.version}
+          abstract={component.description || fetchComponent?.description}
+          labels={labels || []}
+          packageName={component.packageName}
+          titleBadges={badges}
+        />
+        <ComponentPreview
+          component={component}
+          style={{ width: '100%', height: '100%' }}
+          previewName="overview"
+          fullContentHeight
+        />
+      </div>
+    );
+  }
+
   return <ComponentPreview component={component} style={{ width: '100%', height: '100%' }} previewName="overview" />;
 }

package/overview.section.tsx

@@ -21,7 +21,7 @@ export class OverviewSection implements Section {
   route = {
     path: '',
     exact: true,
-    children: <Overview />,
+    children: <Overview titleBadges={this.docs.titleBadgeSlot} />,
   };
 
   order = 10;

package/package.json

@@ -1,44 +1,48 @@
 {
   "name": "@teambit/docs",
-  "version": "0.0.629",
+  "version": "0.0.633",
   "homepage": "https://bit.dev/teambit/docs/docs",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.docs",
     "name": "docs",
-    "version": "0.0.629"
+    "version": "0.0.633"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
     "graphql-tag": "2.12.1",
+    "lodash.flatten": "4.4.0",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/compiler": "0.0.629",
-    "@teambit/component": "0.0.629",
-    "@teambit/pkg": "0.0.629",
-    "@teambit/workspace": "0.0.629",
-    "@teambit/cli": "0.0.433",
-    "@teambit/dev-files": "0.0.629",
-    "@teambit/envs": "0.0.629",
-    "@teambit/graphql": "0.0.629",
-    "@teambit/logger": "0.0.522",
-    "@teambit/preview": "0.0.629",
-    "@teambit/ui": "0.0.629",
+    "@teambit/compiler": "0.0.633",
+    "@teambit/component": "0.0.633",
+    "@teambit/pkg": "0.0.633",
+    "@teambit/workspace": "0.0.633",
+    "@teambit/cli": "0.0.434",
+    "@teambit/dev-files": "0.0.633",
+    "@teambit/envs": "0.0.633",
+    "@teambit/graphql": "0.0.633",
+    "@teambit/logger": "0.0.524",
+    "@teambit/preview": "0.0.633",
+    "@teambit/component.ui.component-meta": "0.0.1",
+    "@teambit/ui": "0.0.633",
     "@teambit/toolbox.types.serializable": "0.0.482",
-    "@teambit/pubsub": "0.0.629",
+    "@teambit/pubsub": "0.0.633",
+    "@teambit/component.ui.hooks.use-fetch-docs": "0.0.1",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.7",
-    "@teambit/preview.ui.component-preview": "0.0.487"
+    "@teambit/preview.ui.component-preview": "0.0.488"
   },
   "devDependencies": {
     "@types/react-dom": "^17.0.5",
     "@types/react": "^17.0.8",
+    "@types/lodash.flatten": "4.4.6",
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.209",
+    "@teambit/legacy": "1.0.210",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -66,7 +70,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.209",
+        "@teambit/legacy": "1.0.210",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }