@teambit/docs 0.0.1136 → 0.0.1138

package/dist/overview/overview.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 import type { SlotRegistry } from '@teambit/harmony';
+import { ComponentPreviewProps } from '@teambit/preview.ui.component-preview';
 export declare enum BadgePosition {
     Title = 0,
     SubTitle = 1,
@@ -19,5 +20,6 @@ export declare type OverviewOptionsSlot = SlotRegistry<OverviewOptions>;
 export declare type OverviewProps = {
     titleBadges: TitleBadgeSlot;
     overviewOptions: OverviewOptionsSlot;
+    previewProps?: Partial<ComponentPreviewProps>;
 };
-export declare function Overview({ titleBadges, overviewOptions }: OverviewProps): JSX.Element;
+export declare function Overview({ titleBadges, overviewOptions, previewProps }: OverviewProps): JSX.Element;

package/dist/overview/overview.js

@@ -8,6 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BadgePosition = void 0;
 exports.Overview = Overview;
+function _extends2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+  _extends2 = function () {
+    return data;
+  };
+  return data;
+}
+function _objectWithoutProperties2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+  _objectWithoutProperties2 = function () {
+    return data;
+  };
+  return data;
+}
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function () {
@@ -93,7 +107,8 @@ let BadgePosition = /*#__PURE__*/function (BadgePosition) {
 exports.BadgePosition = BadgePosition;
 function Overview({
   titleBadges,
-  overviewOptions
+  overviewOptions,
+  previewProps
 }) {
   var _component$preview, _component$preview2, _component$preview3, _component$preview4, _component$preview5;
   const component = (0, _react().useContext)(_component().ComponentContext);
@@ -118,6 +133,18 @@ function Overview({
   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'}`;
   const overviewPropsValues = overviewProps && overviewProps();
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const _ref = previewProps || {},
+    {
+      onLoad,
+      style
+    } = _ref,
+    rest = (0, _objectWithoutProperties2().default)(_ref, ["onLoad", "style"]);
+  const onPreviewLoad = _react().default.useCallback((e, props) => {
+    setLoading(false);
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad(e, props);
+  }, [onLoad]);
   return /*#__PURE__*/_react().default.createElement("div", {
     className: _overviewModule().default.overviewWrapper
   }, showHeader && /*#__PURE__*/_react().default.createElement(_componentUi().ComponentOverview, {
@@ -132,21 +159,22 @@ function Overview({
     component: component
   }), /*#__PURE__*/_react().default.createElement("div", {
     className: _overviewModule().default.readme
-  }, /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, {
-    onLoad: () => setLoading(false),
-    component: component,
-    style: {
-      width: '100%',
-      height: '100%',
-      minHeight: !isScaling ? 500 : undefined
-    },
+  }, /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, (0, _extends2().default)({
+    onLoad: onPreviewLoad,
     previewName: "overview",
     pubsub: true,
     queryParams: [iframeQueryParams, (overviewPropsValues === null || overviewPropsValues === void 0 ? void 0 : overviewPropsValues.queryParams) || ''],
     viewport: null,
     fullContentHeight: true,
     disableScroll: true
-  }), ((_component$preview4 = component.preview) === null || _component$preview4 === void 0 ? void 0 : _component$preview4.skipIncludes) && /*#__PURE__*/_react().default.createElement(_compositionsPanels().CompositionGallery, {
+  }, rest, {
+    component: component,
+    style: {
+      width: '100%',
+      height: '100%',
+      minHeight: !isScaling ? 500 : undefined
+    }
+  })), ((_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, {

package/dist/overview/overview.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_lodash","_reactUiDocs","_component","_previewUi","_designUiSurfaces","_componentUi","_compositionsPanels","_overviewModule","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","BadgePosition","exports","Overview","titleBadges","overviewOptions","_component$preview","_component$preview2","_component$preview3","_component$preview4","_component$preview5","component","useContext","ComponentContext","componentDescriptor","useComponentDescriptor","overviewProps","flatten","values","showHeader","preview","legacyHeader","isLoading","setLoading","useState","buildStatus","host","createElement","StatusMessageCard","style","margin","status","title","isScaling","iframeQueryParams","skipIncludes","overviewPropsValues","className","styles","overviewWrapper","ComponentOverview","classNames","componentOverviewBlock","legacyPreview","displayName","version","abstract","description","labels","packageName","readme","ComponentPreview","onLoad","width","height","minHeight","undefined","previewName","pubsub","queryParams","viewport","fullContentHeight","disableScroll","CompositionGallery","PropertiesTable","overviewPropsTable","componentId","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 OverviewOptions = () => { queryParams?: string };\n\nexport type OverviewOptionsSlot = SlotRegistry<OverviewOptions>;\n\nexport type OverviewProps = {\n  titleBadges: TitleBadgeSlot;\n  overviewOptions: OverviewOptionsSlot;\n};\n\nexport function Overview({ titleBadges, overviewOptions }: OverviewProps) {\n  const component = useContext(ComponentContext);\n  const componentDescriptor = useComponentDescriptor();\n  const overviewProps = flatten(overviewOptions.values())[0];\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  const overviewPropsValues = overviewProps && overviewProps();\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%', minHeight: !isScaling ? 500 : undefined }}\n          previewName=\"overview\"\n          pubsub={true}\n          queryParams={[iframeQueryParams, overviewPropsValues?.queryParams || '']}\n          viewport={null}\n          fullContentHeight\n          disableScroll={true}\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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"}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_lodash","_reactUiDocs","_component","_previewUi","_designUiSurfaces","_componentUi","_compositionsPanels","_overviewModule","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","BadgePosition","exports","Overview","titleBadges","overviewOptions","previewProps","_component$preview","_component$preview2","_component$preview3","_component$preview4","_component$preview5","component","useContext","ComponentContext","componentDescriptor","useComponentDescriptor","overviewProps","flatten","values","showHeader","preview","legacyHeader","isLoading","setLoading","useState","buildStatus","host","createElement","StatusMessageCard","style","margin","status","title","isScaling","iframeQueryParams","skipIncludes","overviewPropsValues","_ref","onLoad","rest","_objectWithoutProperties2","onPreviewLoad","React","useCallback","e","props","className","styles","overviewWrapper","ComponentOverview","classNames","componentOverviewBlock","legacyPreview","displayName","version","abstract","description","labels","packageName","readme","ComponentPreview","_extends2","previewName","pubsub","queryParams","viewport","fullContentHeight","disableScroll","width","height","minHeight","undefined","CompositionGallery","PropertiesTable","overviewPropsTable","componentId","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, ComponentPreviewProps } 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 OverviewOptions = () => { queryParams?: string };\n\nexport type OverviewOptionsSlot = SlotRegistry<OverviewOptions>;\n\nexport type OverviewProps = {\n  titleBadges: TitleBadgeSlot;\n  overviewOptions: OverviewOptionsSlot;\n  previewProps?: Partial<ComponentPreviewProps>;\n};\n\nexport function Overview({ titleBadges, overviewOptions, previewProps }: OverviewProps) {\n  const component = useContext(ComponentContext);\n  const componentDescriptor = useComponentDescriptor();\n  const overviewProps = flatten(overviewOptions.values())[0];\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  const overviewPropsValues = overviewProps && overviewProps();\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { onLoad, style, ...rest } = previewProps || {};\n\n  const onPreviewLoad = React.useCallback(\n    (e, props) => {\n      setLoading(false);\n      onLoad?.(e, props);\n    },\n    [onLoad]\n  );\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={onPreviewLoad}\n          previewName=\"overview\"\n          pubsub={true}\n          queryParams={[iframeQueryParams, overviewPropsValues?.queryParams || '']}\n          viewport={null}\n          fullContentHeight\n          disableScroll={true}\n          {...rest}\n          component={component}\n          style={{ width: '100%', height: '100%', minHeight: !isScaling ? 500 : undefined }}\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/{preview-1692415056433.js → preview-1692781025298.js}

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

package/overview/overview.tsx

@@ -6,7 +6,7 @@ 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 { ComponentPreview, ComponentPreviewProps } 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';
@@ -35,9 +35,10 @@ export type OverviewOptionsSlot = SlotRegistry<OverviewOptions>;
 export type OverviewProps = {
   titleBadges: TitleBadgeSlot;
   overviewOptions: OverviewOptionsSlot;
+  previewProps?: Partial<ComponentPreviewProps>;
 };
 
-export function Overview({ titleBadges, overviewOptions }: OverviewProps) {
+export function Overview({ titleBadges, overviewOptions, previewProps }: OverviewProps) {
   const component = useContext(ComponentContext);
   const componentDescriptor = useComponentDescriptor();
   const overviewProps = flatten(overviewOptions.values())[0];
@@ -60,6 +61,17 @@ export function Overview({ titleBadges, overviewOptions }: OverviewProps) {
 
   const overviewPropsValues = overviewProps && overviewProps();
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { onLoad, style, ...rest } = previewProps || {};
+
+  const onPreviewLoad = React.useCallback(
+    (e, props) => {
+      setLoading(false);
+      onLoad?.(e, props);
+    },
+    [onLoad]
+  );
+
   return (
     <div className={styles.overviewWrapper}>
       {showHeader && (
@@ -84,15 +96,16 @@ export function Overview({ titleBadges, overviewOptions }: OverviewProps) {
       <div className={styles.readme}>
         {/* {isLoading && <ReadmeSkeleton />} */}
         <ComponentPreview
-          onLoad={() => setLoading(false)}
-          component={component}
-          style={{ width: '100%', height: '100%', minHeight: !isScaling ? 500 : undefined }}
+          onLoad={onPreviewLoad}
           previewName="overview"
           pubsub={true}
           queryParams={[iframeQueryParams, overviewPropsValues?.queryParams || '']}
           viewport={null}
           fullContentHeight
           disableScroll={true}
+          {...rest}
+          component={component}
+          style={{ width: '100%', height: '100%', minHeight: !isScaling ? 500 : undefined }}
         />
         {component.preview?.skipIncludes && <CompositionGallery isLoading={isLoading} component={component} />}
         {component.preview?.skipIncludes && (

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/docs",
-  "version": "0.0.1136",
+  "version": "0.0.1138",
   "homepage": "https://bit.cloud/teambit/docs/docs",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.docs",
     "name": "docs",
-    "version": "0.0.1136"
+    "version": "0.0.1138"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -19,23 +19,23 @@
     "@teambit/component-id": "0.0.427",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.17",
     "@teambit/base-ui.loaders.skeleton": "1.0.1",
-    "@teambit/compiler": "0.0.1136",
-    "@teambit/component": "0.0.1136",
-    "@teambit/pkg": "0.0.1136",
-    "@teambit/workspace": "0.0.1136",
-    "@teambit/cli": "0.0.761",
-    "@teambit/dev-files": "0.0.1136",
-    "@teambit/envs": "0.0.1136",
-    "@teambit/graphql": "0.0.1136",
-    "@teambit/logger": "0.0.854",
-    "@teambit/preview": "0.0.1136",
-    "@teambit/component-compare": "0.0.384",
-    "@teambit/docs.ui.overview-compare-section": "0.0.68",
-    "@teambit/docs.ui.overview-compare": "0.0.281",
-    "@teambit/ui": "0.0.1136",
-    "@teambit/pubsub": "0.0.1136",
-    "@teambit/component.ui.component-meta": "0.0.326",
-    "@teambit/compositions.panels.composition-gallery": "0.0.121",
+    "@teambit/compiler": "0.0.1138",
+    "@teambit/component": "0.0.1138",
+    "@teambit/pkg": "0.0.1138",
+    "@teambit/workspace": "0.0.1138",
+    "@teambit/cli": "0.0.762",
+    "@teambit/dev-files": "0.0.1138",
+    "@teambit/envs": "0.0.1138",
+    "@teambit/graphql": "0.0.1138",
+    "@teambit/logger": "0.0.855",
+    "@teambit/preview": "0.0.1138",
+    "@teambit/component-compare": "0.0.386",
+    "@teambit/docs.ui.overview-compare-section": "0.0.69",
+    "@teambit/docs.ui.overview-compare": "0.0.282",
+    "@teambit/ui": "0.0.1138",
+    "@teambit/pubsub": "0.0.1138",
+    "@teambit/component.ui.component-meta": "0.0.327",
+    "@teambit/compositions.panels.composition-gallery": "0.0.122",
     "@teambit/preview.ui.component-preview": "0.0.519",
     "@teambit/react.ui.docs.properties-table": "0.0.13"
   },
@@ -51,7 +51,7 @@
     "@teambit/docs.content.docs-overview": "1.95.9"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.545",
+    "@teambit/legacy": "1.0.546",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },