@teambit/docs 0.0.951 → 0.0.952

package/dist/docs.ui.runtime.js

@@ -115,10 +115,7 @@ class DocsUI {
     const compareSection = new (_docsUi2().OverviewCompareSection)(docs);
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
-    componentCompare.registerNavigation({
-      props: compareSection.navigationLink,
-      order: compareSection.navigationLink.order
-    });
+    componentCompare.registerNavigation(compareSection);
     componentCompare.registerRoutes([compareSection.route]);
     return docs;
   }

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

@@ -1 +1 @@
-{"version":3,"names":["DocsUI","constructor","titleBadgeSlot","registerTitleBadge","titleBadges","badges","Array","isArray","register","listTitleBadges","flatten","values","getDocsCompare","provider","component","componentCompare","config","docs","section","OverviewSection","compareSection","OverviewCompareSection","registerRoute","route","registerNavigation","navigationLink","order","props","registerRoutes","ComponentAspect","ComponentCompareAspect","UIRuntime","Slot","withType","DocsAspect","addRuntime"],"sources":["docs.ui.runtime.tsx"],"sourcesContent":["import React from 'react';\nimport { flatten } from 'lodash';\nimport { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { Slot } from '@teambit/harmony';\nimport { UIRuntime } from '@teambit/ui';\nimport ComponentCompareAspect, { ComponentCompareUI } from '@teambit/component-compare';\nimport { OverviewCompare } from '@teambit/docs.ui.overview-compare';\nimport { OverviewCompareSection } from '@teambit/docs.ui.overview-compare-section';\nimport { DocsAspect } from './docs.aspect';\nimport { OverviewSection } from './overview.section';\nimport type { TitleBadgeSlot, TitleBadge } 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(titleBadges: TitleBadge | TitleBadge[]) {\n    const badges = Array.isArray(titleBadges) ? titleBadges : [titleBadges];\n    this.titleBadgeSlot.register(badges);\n    return this;\n  }\n\n  /**\n   * list all title badges registered.\n   */\n  listTitleBadges() {\n    return flatten(this.titleBadgeSlot.values());\n  }\n\n  getDocsCompare() {\n    return <OverviewCompare titleBadges={this.titleBadgeSlot} />;\n  }\n\n  static dependencies = [ComponentAspect, ComponentCompareAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [Slot.withType<TitleBadge>()];\n\n  static async provider(\n    [component, componentCompare]: [ComponentUI, ComponentCompareUI],\n    config,\n    [titleBadgeSlot]: [TitleBadgeSlot]\n  ) {\n    const docs = new DocsUI(titleBadgeSlot);\n    const section = new OverviewSection(titleBadgeSlot);\n    const compareSection = new OverviewCompareSection(docs);\n\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n    componentCompare.registerNavigation({\n      props: compareSection.navigationLink,\n      order: compareSection.navigationLink.order,\n    });\n    componentCompare.registerRoutes([compareSection.route]);\n    return docs;\n  }\n}\n\nexport default DocsUI;\n\nDocsAspect.addRuntime(DocsUI);\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGO,MAAMA,MAAM,CAAC;EAClBC,WAAW,CAAUC,cAA8B,EAAE;IAAA,KAAhCA,cAA8B,GAA9BA,cAA8B;EAAG;;EAEtD;AACF;AACA;EACEC,kBAAkB,CAACC,WAAsC,EAAE;IACzD,MAAMC,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACH,WAAW,CAAC,GAAGA,WAAW,GAAG,CAACA,WAAW,CAAC;IACvE,IAAI,CAACF,cAAc,CAACM,QAAQ,CAACH,MAAM,CAAC;IACpC,OAAO,IAAI;EACb;;EAEA;AACF;AACA;EACEI,eAAe,GAAG;IAChB,OAAO,IAAAC,iBAAO,EAAC,IAAI,CAACR,cAAc,CAACS,MAAM,EAAE,CAAC;EAC9C;EAEAC,cAAc,GAAG;IACf,oBAAO,+BAAC,yBAAe;MAAC,WAAW,EAAE,IAAI,CAACV;IAAe,EAAG;EAC9D;EAQA,aAAaW,QAAQ,CACnB,CAACC,SAAS,EAAEC,gBAAgB,CAAoC,EAChEC,MAAM,EACN,CAACd,cAAc,CAAmB,EAClC;IACA,MAAMe,IAAI,GAAG,IAAIjB,MAAM,CAACE,cAAc,CAAC;IACvC,MAAMgB,OAAO,GAAG,KAAIC,2BAAe,EAACjB,cAAc,CAAC;IACnD,MAAMkB,cAAc,GAAG,KAAIC,iCAAsB,EAACJ,IAAI,CAAC;IAEvDH,SAAS,CAACQ,aAAa,CAACJ,OAAO,CAACK,KAAK,CAAC;IACtCT,SAAS,CAACU,kBAAkB,CAACN,OAAO,CAACO,cAAc,EAAEP,OAAO,CAACQ,KAAK,CAAC;IACnEX,gBAAgB,CAACS,kBAAkB,CAAC;MAClCG,KAAK,EAAEP,cAAc,CAACK,cAAc;MACpCC,KAAK,EAAEN,cAAc,CAACK,cAAc,CAACC;IACvC,CAAC,CAAC;IACFX,gBAAgB,CAACa,cAAc,CAAC,CAACR,cAAc,CAACG,KAAK,CAAC,CAAC;IACvD,OAAON,IAAI;EACb;AACF;AAAC;AAAA,gCA/CYjB,MAAM,kBAuBK,CAAC6B,4BAAe,EAAEC,2BAAsB,CAAC;AAAA,gCAvBpD9B,MAAM,aAyBA+B,eAAS;AAAA,gCAzBf/B,MAAM,WA2BF,CAACgC,eAAI,CAACC,QAAQ,EAAc,CAAC;AAAA,eAsB/BjC,MAAM;AAAA;AAErBkC,kBAAU,CAACC,UAAU,CAACnC,MAAM,CAAC"}
+{"version":3,"names":["DocsUI","constructor","titleBadgeSlot","registerTitleBadge","titleBadges","badges","Array","isArray","register","listTitleBadges","flatten","values","getDocsCompare","provider","component","componentCompare","config","docs","section","OverviewSection","compareSection","OverviewCompareSection","registerRoute","route","registerNavigation","navigationLink","order","registerRoutes","ComponentAspect","ComponentCompareAspect","UIRuntime","Slot","withType","DocsAspect","addRuntime"],"sources":["docs.ui.runtime.tsx"],"sourcesContent":["import React from 'react';\nimport { flatten } from 'lodash';\nimport { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { Slot } from '@teambit/harmony';\nimport { UIRuntime } from '@teambit/ui';\nimport ComponentCompareAspect, { ComponentCompareUI } from '@teambit/component-compare';\nimport { OverviewCompare } from '@teambit/docs.ui.overview-compare';\nimport { OverviewCompareSection } from '@teambit/docs.ui.overview-compare-section';\nimport { DocsAspect } from './docs.aspect';\nimport { OverviewSection } from './overview.section';\nimport type { TitleBadgeSlot, TitleBadge } 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(titleBadges: TitleBadge | TitleBadge[]) {\n    const badges = Array.isArray(titleBadges) ? titleBadges : [titleBadges];\n    this.titleBadgeSlot.register(badges);\n    return this;\n  }\n\n  /**\n   * list all title badges registered.\n   */\n  listTitleBadges() {\n    return flatten(this.titleBadgeSlot.values());\n  }\n\n  getDocsCompare() {\n    return <OverviewCompare titleBadges={this.titleBadgeSlot} />;\n  }\n\n  static dependencies = [ComponentAspect, ComponentCompareAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [Slot.withType<TitleBadge>()];\n\n  static async provider(\n    [component, componentCompare]: [ComponentUI, ComponentCompareUI],\n    config,\n    [titleBadgeSlot]: [TitleBadgeSlot]\n  ) {\n    const docs = new DocsUI(titleBadgeSlot);\n    const section = new OverviewSection(titleBadgeSlot);\n    const compareSection = new OverviewCompareSection(docs);\n\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n    componentCompare.registerNavigation(compareSection);\n    componentCompare.registerRoutes([compareSection.route]);\n    return docs;\n  }\n}\n\nexport default DocsUI;\n\nDocsAspect.addRuntime(DocsUI);\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGO,MAAMA,MAAM,CAAC;EAClBC,WAAW,CAAUC,cAA8B,EAAE;IAAA,KAAhCA,cAA8B,GAA9BA,cAA8B;EAAG;;EAEtD;AACF;AACA;EACEC,kBAAkB,CAACC,WAAsC,EAAE;IACzD,MAAMC,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACH,WAAW,CAAC,GAAGA,WAAW,GAAG,CAACA,WAAW,CAAC;IACvE,IAAI,CAACF,cAAc,CAACM,QAAQ,CAACH,MAAM,CAAC;IACpC,OAAO,IAAI;EACb;;EAEA;AACF;AACA;EACEI,eAAe,GAAG;IAChB,OAAO,IAAAC,iBAAO,EAAC,IAAI,CAACR,cAAc,CAACS,MAAM,EAAE,CAAC;EAC9C;EAEAC,cAAc,GAAG;IACf,oBAAO,+BAAC,yBAAe;MAAC,WAAW,EAAE,IAAI,CAACV;IAAe,EAAG;EAC9D;EAQA,aAAaW,QAAQ,CACnB,CAACC,SAAS,EAAEC,gBAAgB,CAAoC,EAChEC,MAAM,EACN,CAACd,cAAc,CAAmB,EAClC;IACA,MAAMe,IAAI,GAAG,IAAIjB,MAAM,CAACE,cAAc,CAAC;IACvC,MAAMgB,OAAO,GAAG,KAAIC,2BAAe,EAACjB,cAAc,CAAC;IACnD,MAAMkB,cAAc,GAAG,KAAIC,iCAAsB,EAACJ,IAAI,CAAC;IAEvDH,SAAS,CAACQ,aAAa,CAACJ,OAAO,CAACK,KAAK,CAAC;IACtCT,SAAS,CAACU,kBAAkB,CAACN,OAAO,CAACO,cAAc,EAAEP,OAAO,CAACQ,KAAK,CAAC;IACnEX,gBAAgB,CAACS,kBAAkB,CAACJ,cAAc,CAAC;IACnDL,gBAAgB,CAACY,cAAc,CAAC,CAACP,cAAc,CAACG,KAAK,CAAC,CAAC;IACvD,OAAON,IAAI;EACb;AACF;AAAC;AAAA,gCA5CYjB,MAAM,kBAuBK,CAAC4B,4BAAe,EAAEC,2BAAsB,CAAC;AAAA,gCAvBpD7B,MAAM,aAyBA8B,eAAS;AAAA,gCAzBf9B,MAAM,WA2BF,CAAC+B,eAAI,CAACC,QAAQ,EAAc,CAAC;AAAA,eAmB/BhC,MAAM;AAAA;AAErBiC,kBAAU,CAACC,UAAU,CAAClC,MAAM,CAAC"}

package/dist/overview/overview.js

@@ -29,6 +29,13 @@ function _lodash() {
   };
   return data;
 }
+function _reactUiDocs() {
+  const data = require("@teambit/react.ui.docs.properties-table");
+  _reactUiDocs = function () {
+    return data;
+  };
+  return data;
+}
 function _component() {
   const data = require("@teambit/component");
   _component = function () {
@@ -57,6 +64,13 @@ function _componentUi() {
   };
   return data;
 }
+function _compositionsPanels() {
+  const data = require("@teambit/compositions.panels.composition-gallery");
+  _compositionsPanels = function () {
+    return data;
+  };
+  return data;
+}
 function _overviewModule() {
   const data = _interopRequireDefault(require("./overview.module.scss"));
   _overviewModule = function () {
@@ -66,6 +80,9 @@ function _overviewModule() {
 }
 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; }
+// import { Icon } from '@teambit/design.elements.icon';
+// import { LinkedHeading } from '@teambit/documenter.ui.linked-heading';
+// import { ReadmeSkeleton } from './readme-skeleton';
 let BadgePosition;
 exports.BadgePosition = BadgePosition;
 (function (BadgePosition) {
@@ -77,10 +94,11 @@ exports.BadgePosition = BadgePosition;
 function Overview({
   titleBadges
 }) {
-  var _component$preview, _component$preview2;
+  var _component$preview, _component$preview2, _component$preview3, _component$preview4, _component$preview5;
   const component = (0, _react().useContext)(_component().ComponentContext);
   const componentDescriptor = (0, _component().useComponentDescriptor)();
   const showHeader = !((_component$preview = component.preview) !== null && _component$preview !== void 0 && _component$preview.legacyHeader);
+  const [isLoading, setLoading] = (0, _react().useState)(true);
   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'
@@ -96,6 +114,7 @@ function Overview({
     title: "failed to get component preview "
   });
   const isScaling = (_component$preview2 = component.preview) === null || _component$preview2 === void 0 ? void 0 : _component$preview2.isScaling;
+  const iframeQueryParams = `skipIncludes=${((_component$preview3 = component.preview) === null || _component$preview3 === void 0 ? void 0 : _component$preview3.skipIncludes) || 'false'}`;
   return /*#__PURE__*/_react().default.createElement("div", {
     className: _overviewModule().default.overviewWrapper
   }, showHeader && /*#__PURE__*/_react().default.createElement(_componentUi().ComponentOverview, {
@@ -108,7 +127,10 @@ function Overview({
     titleBadges: (0, _lodash().flatten)(titleBadges.values()),
     componentDescriptor: componentDescriptor,
     component: component
-  }), /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, {
+  }), /*#__PURE__*/_react().default.createElement("div", {
+    className: _overviewModule().default.readme
+  }, /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, {
+    onLoad: () => setLoading(false),
     component: component,
     style: {
       width: '100%',
@@ -116,10 +138,17 @@ function Overview({
     },
     previewName: "overview",
     pubsub: true,
+    queryParams: [iframeQueryParams],
     viewport: null,
     fullContentHeight: true,
     scrolling: "no"
-  }));
+  }), ((_component$preview4 = component.preview) === null || _component$preview4 === void 0 ? void 0 : _component$preview4.skipIncludes) && /*#__PURE__*/_react().default.createElement(_compositionsPanels().CompositionGallery, {
+    isLoading: isLoading,
+    component: component
+  }), ((_component$preview5 = component.preview) === null || _component$preview5 === void 0 ? void 0 : _component$preview5.skipIncludes) && /*#__PURE__*/_react().default.createElement(_reactUiDocs().PropertiesTable, {
+    className: _overviewModule().default.overviewPropsTable,
+    componentId: component.id.toString()
+  })));
 }
 
 //# sourceMappingURL=overview.js.map

package/dist/overview/overview.js.map

@@ -1 +1 @@
-{"version":3,"names":["BadgePosition","Overview","titleBadges","component","useContext","ComponentContext","componentDescriptor","useComponentDescriptor","showHeader","preview","legacyHeader","buildStatus","host","margin","isScaling","styles","overviewWrapper","classNames","componentOverviewBlock","legacyPreview","displayName","version","description","labels","packageName","flatten","values","width","height"],"sources":["overview.tsx"],"sourcesContent":["import React, { useContext, ComponentType } from 'react';\nimport classNames from 'classnames';\nimport { flatten } from 'lodash';\nimport { ComponentContext, useComponentDescriptor } 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 } from '@teambit/component.ui.component-meta';\n\nimport styles from './overview.module.scss';\n\nexport enum BadgePosition {\n  Title,\n  SubTitle,\n  Labels,\n  Package,\n}\n\nexport type TitleBadge = {\n  component: ComponentType<any>;\n  weight?: number;\n  position?: BadgePosition;\n};\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 componentDescriptor = useComponentDescriptor();\n\n  const showHeader = !component.preview?.legacyHeader;\n\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\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return <StatusMessageCard style={{ margin: 'auto' }} status=\"FAILURE\" title=\"failed to get component preview \" />;\n\n  const isScaling = component.preview?.isScaling;\n\n  return (\n    <div className={styles.overviewWrapper}>\n      {showHeader && (\n        <ComponentOverview\n          className={classNames(styles.componentOverviewBlock, !isScaling && styles.legacyPreview)}\n          displayName={component.displayName}\n          version={component.version}\n          abstract={component.description}\n          labels={component.labels}\n          packageName={component.packageName}\n          titleBadges={flatten(titleBadges.values())}\n          componentDescriptor={componentDescriptor}\n          component={component}\n        />\n      )}\n      <ComponentPreview\n        component={component}\n        style={{ width: '100%', height: '100%' }}\n        previewName=\"overview\"\n        pubsub={true}\n        viewport={null}\n        fullContentHeight\n        scrolling=\"no\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAA4C;AAAA;AAAA,IAEhCA,aAAa;AAAA;AAAA,WAAbA,aAAa;EAAbA,aAAa,CAAbA,aAAa;EAAbA,aAAa,CAAbA,aAAa;EAAbA,aAAa,CAAbA,aAAa;EAAbA,aAAa,CAAbA,aAAa;AAAA,GAAbA,aAAa,6BAAbA,aAAa;AAmBlB,SAASC,QAAQ,CAAC;EAAEC;AAA2B,CAAC,EAAE;EAAA;EACvD,MAAMC,SAAS,GAAG,IAAAC,mBAAU,EAACC,6BAAgB,CAAC;EAC9C,MAAMC,mBAAmB,GAAG,IAAAC,mCAAsB,GAAE;EAEpD,MAAMC,UAAU,GAAG,wBAACL,SAAS,CAACM,OAAO,+CAAjB,mBAAmBC,YAAY;EAEnD,IAAI,CAAAP,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEQ,WAAW,MAAK,SAAS,IAAI,CAAAR,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAES,IAAI,MAAK,qBAAqB,EACnF,oBACE,+BAAC,qCAAiB;IAAC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAO,CAAE;IAAC,MAAM,EAAC,YAAY;IAAC,KAAK,EAAC;EAA2B,+BAE/E;EAGxB,IAAI,CAAAV,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEQ,WAAW,MAAK,QAAQ,IAAI,CAAAR,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAES,IAAI,MAAK,qBAAqB,EAClF,oBAAO,+BAAC,qCAAiB;IAAC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAO,CAAE;IAAC,MAAM,EAAC,SAAS;IAAC,KAAK,EAAC;EAAkC,EAAG;EAEnH,MAAMC,SAAS,0BAAGX,SAAS,CAACM,OAAO,wDAAjB,oBAAmBK,SAAS;EAE9C,oBACE;IAAK,SAAS,EAAEC,yBAAM,CAACC;EAAgB,GACpCR,UAAU,iBACT,+BAAC,gCAAiB;IAChB,SAAS,EAAE,IAAAS,qBAAU,EAACF,yBAAM,CAACG,sBAAsB,EAAE,CAACJ,SAAS,IAAIC,yBAAM,CAACI,aAAa,CAAE;IACzF,WAAW,EAAEhB,SAAS,CAACiB,WAAY;IACnC,OAAO,EAAEjB,SAAS,CAACkB,OAAQ;IAC3B,QAAQ,EAAElB,SAAS,CAACmB,WAAY;IAChC,MAAM,EAAEnB,SAAS,CAACoB,MAAO;IACzB,WAAW,EAAEpB,SAAS,CAACqB,WAAY;IACnC,WAAW,EAAE,IAAAC,iBAAO,EAACvB,WAAW,CAACwB,MAAM,EAAE,CAAE;IAC3C,mBAAmB,EAAEpB,mBAAoB;IACzC,SAAS,EAAEH;EAAU,EAExB,eACD,+BAAC,6BAAgB;IACf,SAAS,EAAEA,SAAU;IACrB,KAAK,EAAE;MAAEwB,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE;IAAO,CAAE;IACzC,WAAW,EAAC,UAAU;IACtB,MAAM,EAAE,IAAK;IACb,QAAQ,EAAE,IAAK;IACf,iBAAiB;IACjB,SAAS,EAAC;EAAI,EACd,CACE;AAEV"}
+{"version":3,"names":["BadgePosition","Overview","titleBadges","component","useContext","ComponentContext","componentDescriptor","useComponentDescriptor","showHeader","preview","legacyHeader","isLoading","setLoading","useState","buildStatus","host","margin","isScaling","iframeQueryParams","skipIncludes","styles","overviewWrapper","classNames","componentOverviewBlock","legacyPreview","displayName","version","description","labels","packageName","flatten","values","readme","width","height","overviewPropsTable","id","toString"],"sources":["overview.tsx"],"sourcesContent":["import React, { useContext, ComponentType, useState } from 'react';\nimport classNames from 'classnames';\nimport { flatten } from 'lodash';\n// import { Icon } from '@teambit/design.elements.icon';\nimport { PropertiesTable } from '@teambit/react.ui.docs.properties-table';\n// import { LinkedHeading } from '@teambit/documenter.ui.linked-heading';\nimport { ComponentContext, useComponentDescriptor } 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 } from '@teambit/component.ui.component-meta';\nimport { CompositionGallery } from '@teambit/compositions.panels.composition-gallery';\n// import { ReadmeSkeleton } from './readme-skeleton';\nimport styles from './overview.module.scss';\n\nexport enum BadgePosition {\n  Title,\n  SubTitle,\n  Labels,\n  Package,\n}\n\nexport type TitleBadge = {\n  component: ComponentType<any>;\n  weight?: number;\n  position?: BadgePosition;\n};\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 componentDescriptor = useComponentDescriptor();\n\n  const showHeader = !component.preview?.legacyHeader;\n  const [isLoading, setLoading] = useState(true);\n\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\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return <StatusMessageCard style={{ margin: 'auto' }} status=\"FAILURE\" title=\"failed to get component preview \" />;\n\n  const isScaling = component.preview?.isScaling;\n\n  const iframeQueryParams = `skipIncludes=${component.preview?.skipIncludes || 'false'}`;\n\n  return (\n    <div className={styles.overviewWrapper}>\n      {showHeader && (\n        <ComponentOverview\n          className={classNames(styles.componentOverviewBlock, !isScaling && styles.legacyPreview)}\n          displayName={component.displayName}\n          version={component.version}\n          abstract={component.description}\n          labels={component.labels}\n          packageName={component.packageName}\n          titleBadges={flatten(titleBadges.values())}\n          componentDescriptor={componentDescriptor}\n          component={component}\n        />\n      )}\n\n      {/* TODO - @oded replace with new panel card same for compositions. */}\n\n      {/* <LinkedHeading size=\"xs\" className={styles.title}>\n        <Icon of=\"text\" /> <span>README</span>\n      </LinkedHeading> */}\n      <div className={styles.readme}>\n        {/* {isLoading && <ReadmeSkeleton />} */}\n        <ComponentPreview\n          onLoad={() => setLoading(false)}\n          component={component}\n          style={{ width: '100%', height: '100%' }}\n          previewName=\"overview\"\n          pubsub={true}\n          queryParams={[iframeQueryParams]}\n          viewport={null}\n          fullContentHeight\n          scrolling=\"no\"\n        />\n        {component.preview?.skipIncludes && <CompositionGallery isLoading={isLoading} component={component} />}\n        {component.preview?.skipIncludes && (\n          <PropertiesTable className={styles.overviewPropsTable} componentId={component.id.toString()} />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/overview/overview.module.scss

@@ -8,8 +8,57 @@
     margin-bottom: 0;
     // TODO: talk with oded.
   }
+
+  .title {
+    position: relative;
+    z-index: 1;
+    padding-top: 24px;
+    margin-bottom: 0;
+    padding-left: 40px;
+    > h3 {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
 }
 
 .legacyPreview {
   margin: 0 auto;
 }
+
+.compositions {
+  padding-left: 40px;
+  margin-top: 10px;
+}
+
+// readme skeleton styles
+.readme {
+  position: relative;
+}
+
+.readmeSkeleton {
+  position: absolute;
+  background-color: var(--background-color, #FFFFFF);
+  padding: 20px 40px 10px 40px;
+  max-width: 1440px;
+  width: 100%;
+  box-sizing: border-box;
+  // covers the content so that it doesnt flicker before the skeleton is removed
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: var(--border-medium-color, #ededed);
+  > * {
+    margin-bottom: 8px;
+  }
+}
+.block {
+  width: 300px;
+}
+
+.overviewPropsTable {
+  padding: 20px 40px 10px 40px;
+
+}

package/dist/overview/readme-skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ReadmeSkeleton(): JSX.Element;

package/dist/overview/readme-skeleton.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReadmeSkeleton = ReadmeSkeleton;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _baseUiLoaders() {
+  const data = require("@teambit/base-ui.loaders.skeleton");
+  _baseUiLoaders = function () {
+    return data;
+  };
+  return data;
+}
+function _overviewModule() {
+  const data = _interopRequireDefault(require("./overview.module.scss"));
+  _overviewModule = function () {
+    return data;
+  };
+  return data;
+}
+function ReadmeSkeleton() {
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: _overviewModule().default.readmeSkeleton
+  }, /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+    width: "80%"
+  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+    width: "70%"
+  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+    width: "40%",
+    style: {
+      marginBottom: 40
+    }
+  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+    width: "30%",
+    style: {
+      marginBottom: 16
+    }
+  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().BlockSkeleton, {
+    lines: 10,
+    style: {
+      width: '100%',
+      marginBottom: 40
+    }
+  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+    width: "80%"
+  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+    width: "40%"
+  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+    width: "25%"
+  }));
+}
+
+//# sourceMappingURL=readme-skeleton.js.map

package/dist/overview/readme-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ReadmeSkeleton","styles","readmeSkeleton","marginBottom","width"],"sources":["readme-skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { LineSkeleton, BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';\nimport styles from './overview.module.scss';\n\nexport function ReadmeSkeleton() {\n  return (\n    <div className={styles.readmeSkeleton}>\n      <LineSkeleton width=\"80%\" />\n      <LineSkeleton width=\"70%\" />\n      <LineSkeleton width=\"40%\" style={{marginBottom: 40}} />\n\n      <LineSkeleton width=\"30%\" style={{marginBottom: 16}} />\n      <BlockSkeleton lines={10} style={{width: '100%', marginBottom: 40}} />\n      <LineSkeleton width=\"80%\" />\n      <LineSkeleton width=\"40%\" />\n      <LineSkeleton width=\"25%\" />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,SAASA,cAAc,GAAG;EAC/B,oBACE;IAAK,SAAS,EAAEC,yBAAM,CAACC;EAAe,gBACpC,+BAAC,6BAAY;IAAC,KAAK,EAAC;EAAK,EAAG,eAC5B,+BAAC,6BAAY;IAAC,KAAK,EAAC;EAAK,EAAG,eAC5B,+BAAC,6BAAY;IAAC,KAAK,EAAC,KAAK;IAAC,KAAK,EAAE;MAACC,YAAY,EAAE;IAAE;EAAE,EAAG,eAEvD,+BAAC,6BAAY;IAAC,KAAK,EAAC,KAAK;IAAC,KAAK,EAAE;MAACA,YAAY,EAAE;IAAE;EAAE,EAAG,eACvD,+BAAC,8BAAa;IAAC,KAAK,EAAE,EAAG;IAAC,KAAK,EAAE;MAACC,KAAK,EAAE,MAAM;MAAED,YAAY,EAAE;IAAE;EAAE,EAAG,eACtE,+BAAC,6BAAY;IAAC,KAAK,EAAC;EAAK,EAAG,eAC5B,+BAAC,6BAAY;IAAC,KAAK,EAAC;EAAK,EAAG,eAC5B,+BAAC,6BAAY;IAAC,KAAK,EAAC;EAAK,EAAG,CACxB;AAEV"}

package/dist/{preview-1672802758290.js → preview-1672889151191.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@0.0.951/dist/docs.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@0.0.951/dist/docs.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@0.0.952/dist/docs.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@0.0.952/dist/docs.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/docs.ui.runtime.tsx

@@ -50,10 +50,7 @@ export class DocsUI {
 
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
-    componentCompare.registerNavigation({
-      props: compareSection.navigationLink,
-      order: compareSection.navigationLink.order,
-    });
+    componentCompare.registerNavigation(compareSection);
     componentCompare.registerRoutes([compareSection.route]);
     return docs;
   }

package/overview/overview.module.scss

@@ -8,8 +8,57 @@
     margin-bottom: 0;
     // TODO: talk with oded.
   }
+
+  .title {
+    position: relative;
+    z-index: 1;
+    padding-top: 24px;
+    margin-bottom: 0;
+    padding-left: 40px;
+    > h3 {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
 }
 
 .legacyPreview {
   margin: 0 auto;
 }
+
+.compositions {
+  padding-left: 40px;
+  margin-top: 10px;
+}
+
+// readme skeleton styles
+.readme {
+  position: relative;
+}
+
+.readmeSkeleton {
+  position: absolute;
+  background-color: var(--background-color, #FFFFFF);
+  padding: 20px 40px 10px 40px;
+  max-width: 1440px;
+  width: 100%;
+  box-sizing: border-box;
+  // covers the content so that it doesnt flicker before the skeleton is removed
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: var(--border-medium-color, #ededed);
+  > * {
+    margin-bottom: 8px;
+  }
+}
+.block {
+  width: 300px;
+}
+
+.overviewPropsTable {
+  padding: 20px 40px 10px 40px;
+
+}

package/overview/overview.tsx

@@ -1,12 +1,16 @@
-import React, { useContext, ComponentType } from 'react';
+import React, { useContext, ComponentType, useState } from 'react';
 import classNames from 'classnames';
 import { flatten } from 'lodash';
+// import { Icon } from '@teambit/design.elements.icon';
+import { PropertiesTable } from '@teambit/react.ui.docs.properties-table';
+// import { LinkedHeading } from '@teambit/documenter.ui.linked-heading';
 import { ComponentContext, useComponentDescriptor } 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 } from '@teambit/component.ui.component-meta';
-
+import { CompositionGallery } from '@teambit/compositions.panels.composition-gallery';
+// import { ReadmeSkeleton } from './readme-skeleton';
 import styles from './overview.module.scss';
 
 export enum BadgePosition {
@@ -33,6 +37,7 @@ export function Overview({ titleBadges }: OverviewProps) {
   const componentDescriptor = useComponentDescriptor();
 
   const showHeader = !component.preview?.legacyHeader;
+  const [isLoading, setLoading] = useState(true);
 
   if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
     return (
@@ -46,6 +51,8 @@ export function Overview({ titleBadges }: OverviewProps) {
 
   const isScaling = component.preview?.isScaling;
 
+  const iframeQueryParams = `skipIncludes=${component.preview?.skipIncludes || 'false'}`;
+
   return (
     <div className={styles.overviewWrapper}>
       {showHeader && (
@@ -61,15 +68,30 @@ export function Overview({ titleBadges }: OverviewProps) {
           component={component}
         />
       )}
-      <ComponentPreview
-        component={component}
-        style={{ width: '100%', height: '100%' }}
-        previewName="overview"
-        pubsub={true}
-        viewport={null}
-        fullContentHeight
-        scrolling="no"
-      />
+
+      {/* TODO - @oded replace with new panel card same for compositions. */}
+
+      {/* <LinkedHeading size="xs" className={styles.title}>
+        <Icon of="text" /> <span>README</span>
+      </LinkedHeading> */}
+      <div className={styles.readme}>
+        {/* {isLoading && <ReadmeSkeleton />} */}
+        <ComponentPreview
+          onLoad={() => setLoading(false)}
+          component={component}
+          style={{ width: '100%', height: '100%' }}
+          previewName="overview"
+          pubsub={true}
+          queryParams={[iframeQueryParams]}
+          viewport={null}
+          fullContentHeight
+          scrolling="no"
+        />
+        {component.preview?.skipIncludes && <CompositionGallery isLoading={isLoading} component={component} />}
+        {component.preview?.skipIncludes && (
+          <PropertiesTable className={styles.overviewPropsTable} componentId={component.id.toString()} />
+        )}
+      </div>
     </div>
   );
 }

package/overview/readme-skeleton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LineSkeleton, BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import styles from './overview.module.scss';
+
+export function ReadmeSkeleton() {
+  return (
+    <div className={styles.readmeSkeleton}>
+      <LineSkeleton width="80%" />
+      <LineSkeleton width="70%" />
+      <LineSkeleton width="40%" style={{marginBottom: 40}} />
+
+      <LineSkeleton width="30%" style={{marginBottom: 16}} />
+      <BlockSkeleton lines={10} style={{width: '100%', marginBottom: 40}} />
+      <LineSkeleton width="80%" />
+      <LineSkeleton width="40%" />
+      <LineSkeleton width="25%" />
+    </div>
+  );
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/docs",
-  "version": "0.0.951",
+  "version": "0.0.952",
   "homepage": "https://bit.dev/teambit/docs/docs",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.docs",
     "name": "docs",
-    "version": "0.0.951"
+    "version": "0.0.952"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -15,26 +15,29 @@
     "core-js": "^3.0.0",
     "@babel/runtime": "7.20.0",
     "@teambit/harmony": "0.4.6",
-    "@teambit/compiler": "0.0.951",
-    "@teambit/component": "0.0.951",
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
+    "@teambit/compiler": "0.0.952",
+    "@teambit/component": "0.0.952",
     "@teambit/docs.entities.doc": "0.0.12",
-    "@teambit/pkg": "0.0.951",
-    "@teambit/workspace": "0.0.951",
-    "@teambit/cli": "0.0.637",
-    "@teambit/dev-files": "0.0.951",
-    "@teambit/envs": "0.0.951",
-    "@teambit/graphql": "0.0.951",
-    "@teambit/logger": "0.0.730",
-    "@teambit/preview": "0.0.951",
+    "@teambit/pkg": "0.0.952",
+    "@teambit/workspace": "0.0.952",
+    "@teambit/cli": "0.0.638",
+    "@teambit/dev-files": "0.0.952",
+    "@teambit/envs": "0.0.952",
+    "@teambit/graphql": "0.0.952",
+    "@teambit/logger": "0.0.731",
+    "@teambit/preview": "0.0.952",
     "@teambit/component-id": "0.0.425",
-    "@teambit/component-compare": "0.0.199",
-    "@teambit/docs.ui.overview-compare-section": "0.0.1",
-    "@teambit/docs.ui.overview-compare": "0.0.156",
-    "@teambit/ui": "0.0.951",
-    "@teambit/pubsub": "0.0.951",
-    "@teambit/component.ui.component-meta": "0.0.205",
+    "@teambit/component-compare": "0.0.200",
+    "@teambit/docs.ui.overview-compare-section": "0.0.2",
+    "@teambit/docs.ui.overview-compare": "0.0.157",
+    "@teambit/ui": "0.0.952",
+    "@teambit/pubsub": "0.0.952",
+    "@teambit/component.ui.component-meta": "0.0.206",
+    "@teambit/compositions.panels.composition-gallery": "0.0.1",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.17",
-    "@teambit/preview.ui.component-preview": "0.0.509"
+    "@teambit/preview.ui.component-preview": "0.0.510",
+    "@teambit/react.ui.docs.properties-table": "0.0.12"
   },
   "devDependencies": {
     "@types/react-dom": "^17.0.5",
@@ -48,7 +51,7 @@
     "@teambit/docs.content.docs-overview": "1.95.9"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.418",
+    "@teambit/legacy": "1.0.419",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },