@teambit/docs 1.0.43 → 1.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/overview/overview.js +15 -11
  2. package/dist/overview/overview.js.map +1 -1
  3. package/dist/overview/readme-skeleton.d.ts +3 -1
  4. package/dist/overview/readme-skeleton.js +4 -8
  5. package/dist/overview/readme-skeleton.js.map +1 -1
  6. package/dist/{preview-1699369416537.js → preview-1699388670063.js} +2 -2
  7. package/overview/overview.tsx +12 -17
  8. package/overview/readme-skeleton.tsx +2 -5
  9. package/package.json +20 -20
package/dist/overview/overview.js CHANGED
@@ -68,6 +68,13 @@ function _overviewModule() {
68
68
  };
69
69
  return data;
70
70
  }
71
+ function _readmeSkeleton() {
72
+ const data = require("./readme-skeleton");
73
+ _readmeSkeleton = function () {
74
+ return data;
75
+ };
76
+ return data;
77
+ }
71
78
  const _excluded = ["onLoad", "style"]; // import { Icon } from '@teambit/design.elements.icon';
72
79
  // import { LinkedHeading } from '@teambit/documenter.ui.linked-heading';
73
80
  // import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
@@ -98,16 +105,6 @@ function Overview({
98
105
  const showHeader = !((_component$preview = component.preview) !== null && _component$preview !== void 0 && _component$preview.legacyHeader);
99
106
  const [isLoading, setLoading] = (0, _react().useState)(true);
100
107
  const EmptyState = getEmptyState && getEmptyState();
101
-
102
- // if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
103
- // return (
104
- // <StatusMessageCard style={{ margin: 'auto' }} status="PROCESSING" title="component preview pending">
105
- // this might take some time
106
- // </StatusMessageCard>
107
- // );
108
-
109
- // if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')
110
- // return <StatusMessageCard style={{ margin: 'auto' }} status="FAILURE" title="failed to get component preview " />;
111
108
  const buildFailed = ((_component$buildStatu = component.buildStatus) === null || _component$buildStatu === void 0 ? void 0 : _component$buildStatu.toLowerCase()) !== 'succeed' && (component === null || component === void 0 ? void 0 : component.host) === 'teambit.scope/scope';
112
109
  const isScaling = (_component$preview2 = component.preview) === null || _component$preview2 === void 0 ? void 0 : _component$preview2.isScaling;
113
110
  const iframeQueryParams = `skipIncludes=${((_component$preview3 = component.preview) === null || _component$preview3 === void 0 ? void 0 : _component$preview3.skipIncludes) || 'false'}`;
@@ -124,6 +121,11 @@ function Overview({
124
121
  setLoading(false);
125
122
  onLoad === null || onLoad === void 0 || onLoad(e, props);
126
123
  }, [onLoad]);
124
+
125
+ // reset the loading flag when components are switched
126
+ _react().default.useEffect(() => {
127
+ if (!isLoading) setLoading(true);
128
+ }, [component.id.toString()]);
127
129
  return /*#__PURE__*/_react().default.createElement("div", {
128
130
  className: _overviewModule().default.overviewWrapper,
129
131
  key: `${component.id.toString()}`
@@ -139,7 +141,9 @@ function Overview({
139
141
  component: component
140
142
  }), !buildFailed && /*#__PURE__*/_react().default.createElement("div", {
141
143
  className: _overviewModule().default.readme
142
- }, /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, _extends({
144
+ }, isLoading && /*#__PURE__*/_react().default.createElement(_readmeSkeleton().ReadmeSkeleton, null, /*#__PURE__*/_react().default.createElement(_compositionsPanels().CompositionGallerySkeleton, {
145
+ compositionsLength: component.compositions.length
146
+ })), /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, _extends({
143
147
  onLoad: onPreviewLoad,
144
148
  previewName: "overview",
145
149
  pubsub: true,
package/dist/overview/overview.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_lodash","_reactUiDocs","_component","_previewUi","_componentUi","_compositionsPanels","_overviewModule","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","BadgePosition","exports","Overview","titleBadges","overviewOptions","previewProps","getEmptyState","_component$preview","_component$buildStatu","_component$preview2","_component$preview3","_component$preview4","_component$preview5","component","useContext","ComponentContext","componentDescriptor","useComponentDescriptor","overviewProps","flatten","values","showHeader","preview","legacyHeader","isLoading","setLoading","useState","EmptyState","buildFailed","buildStatus","toLowerCase","host","isScaling","iframeQueryParams","skipIncludes","overviewPropsValues","_ref","onLoad","style","rest","onPreviewLoad","React","useCallback","props","createElement","className","styles","overviewWrapper","id","toString","ComponentOverview","classNames","componentOverviewBlock","legacyPreview","displayName","version","abstract","description","labels","packageName","readme","ComponentPreview","previewName","pubsub","queryParams","viewport","fullContentHeight","disableScroll","width","height","minHeight","undefined","CompositionGallery","PropertiesTable","overviewPropsTable","componentId"],"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';\n// import { 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 getEmptyState?: () => ComponentType | undefined;\n};\n\nexport function Overview({ titleBadges, overviewOptions, previewProps, getEmptyState }: 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 const EmptyState = getEmptyState && getEmptyState();\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 const buildFailed = component.buildStatus?.toLowerCase() !== 'succeed' && component?.host === 'teambit.scope/scope';\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} key={`${component.id.toString()}`}>\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 {!buildFailed && (\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 )}\n {buildFailed && EmptyState && <EmptyState />}\n </div>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_lodash","_reactUiDocs","_component","_previewUi","_componentUi","_compositionsPanels","_overviewModule","_readmeSkeleton","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","BadgePosition","exports","Overview","titleBadges","overviewOptions","previewProps","getEmptyState","_component$preview","_component$buildStatu","_component$preview2","_component$preview3","_component$preview4","_component$preview5","component","useContext","ComponentContext","componentDescriptor","useComponentDescriptor","overviewProps","flatten","values","showHeader","preview","legacyHeader","isLoading","setLoading","useState","EmptyState","buildFailed","buildStatus","toLowerCase","host","isScaling","iframeQueryParams","skipIncludes","overviewPropsValues","_ref","onLoad","style","rest","onPreviewLoad","React","useCallback","props","useEffect","id","toString","createElement","className","styles","overviewWrapper","ComponentOverview","classNames","componentOverviewBlock","legacyPreview","displayName","version","abstract","description","labels","packageName","readme","ReadmeSkeleton","CompositionGallerySkeleton","compositionsLength","compositions","ComponentPreview","previewName","pubsub","queryParams","viewport","fullContentHeight","disableScroll","width","height","minHeight","undefined","CompositionGallery","PropertiesTable","overviewPropsTable","componentId"],"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';\n// import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { ComponentOverview } from '@teambit/component.ui.component-meta';\nimport { CompositionGallery, CompositionGallerySkeleton } from '@teambit/compositions.panels.composition-gallery';\n// import { ReadmeSkeleton } from './readme-skeleton';\nimport styles from './overview.module.scss';\nimport { ReadmeSkeleton } from './readme-skeleton';\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 getEmptyState?: () => ComponentType | undefined;\n};\n\nexport function Overview({ titleBadges, overviewOptions, previewProps, getEmptyState }: 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 const EmptyState = getEmptyState && getEmptyState();\n\n const buildFailed = component.buildStatus?.toLowerCase() !== 'succeed' && component?.host === 'teambit.scope/scope';\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 // reset the loading flag when components are switched\n React.useEffect(() => {\n if (!isLoading) setLoading(true);\n }, [component.id.toString()]);\n\n return (\n <div className={styles.overviewWrapper} key={`${component.id.toString()}`}>\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 {!buildFailed && (\n <div className={styles.readme}>\n {isLoading && (\n <ReadmeSkeleton>\n <CompositionGallerySkeleton compositionsLength={component.compositions.length} />\n </ReadmeSkeleton>\n )}\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 )}\n {buildFailed && EmptyState && <EmptyState />}\n </div>\n );\n}\n"],"mappings":"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"}
package/dist/overview/readme-skeleton.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import React from 'react';
2
- export declare function ReadmeSkeleton(): React.JSX.Element;
2
+ export declare function ReadmeSkeleton({ children }: {
3
+ children?: React.ReactNode;
4
+ }): React.JSX.Element;
package/dist/overview/readme-skeleton.js CHANGED
@@ -26,7 +26,9 @@ function _overviewModule() {
26
26
  return data;
27
27
  }
28
28
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
- function ReadmeSkeleton() {
29
+ function ReadmeSkeleton({
30
+ children
31
+ }) {
30
32
  return /*#__PURE__*/_react().default.createElement("div", {
31
33
  className: _overviewModule().default.readmeSkeleton
32
34
  }, /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
@@ -49,13 +51,7 @@ function ReadmeSkeleton() {
49
51
  width: '100%',
50
52
  marginBottom: 40
51
53
  }
52
- }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
53
- width: "80%"
54
- }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
55
- width: "40%"
56
- }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
57
- width: "25%"
58
- }));
54
+ }), children);
59
55
  }
60
56
 
61
57
  //# sourceMappingURL=readme-skeleton.js.map
package/dist/overview/readme-skeleton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_react","data","_interopRequireDefault","require","_baseUiLoaders","_overviewModule","obj","__esModule","default","ReadmeSkeleton","createElement","className","styles","readmeSkeleton","LineSkeleton","width","style","marginBottom","BlockSkeleton","lines"],"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,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,eAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,cAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,gBAAA;EAAA,MAAAJ,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAE,eAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA4C,SAAAC,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAErC,SAASG,cAAcA,CAAA,EAAG;EAC/B,oBACET,MAAA,GAAAQ,OAAA,CAAAE,aAAA;IAAKC,SAAS,EAAEC,yBAAM,CAACC;EAAe,gBACpCb,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5Bf,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5Bf,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC,KAAK;IAACC,KAAK,EAAE;MAAEC,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eAEzDjB,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC,KAAK;IAACC,KAAK,EAAE;MAAEC,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eACzDjB,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAc,aAAa;IAACC,KAAK,EAAE,EAAG;IAACH,KAAK,EAAE;MAAED,KAAK,EAAE,MAAM;MAAEE,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eACxEjB,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5Bf,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5Bf,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CACxB,CAAC;AAEV"}
1
+ {"version":3,"names":["_react","data","_interopRequireDefault","require","_baseUiLoaders","_overviewModule","obj","__esModule","default","ReadmeSkeleton","children","createElement","className","styles","readmeSkeleton","LineSkeleton","width","style","marginBottom","BlockSkeleton","lines"],"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({ children }: { children?: React.ReactNode }) {\n return (\n <div className={styles.readmeSkeleton}>\n <LineSkeleton width=\"80%\" />\n <LineSkeleton width=\"70%\" />\n <LineSkeleton width=\"40%\" style={{ marginBottom: 40 }} />\n <LineSkeleton width=\"30%\" style={{ marginBottom: 16 }} />\n <BlockSkeleton lines={10} style={{ width: '100%', marginBottom: 40 }} />\n {children}\n </div>\n );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,eAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,cAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,gBAAA;EAAA,MAAAJ,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAE,eAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA4C,SAAAC,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAErC,SAASG,cAAcA,CAAC;EAAEC;AAAyC,CAAC,EAAE;EAC3E,oBACEV,MAAA,GAAAQ,OAAA,CAAAG,aAAA;IAAKC,SAAS,EAAEC,yBAAM,CAACC;EAAe,gBACpCd,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAW,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5BhB,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAW,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5BhB,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAW,YAAY;IAACC,KAAK,EAAC,KAAK;IAACC,KAAK,EAAE;MAAEC,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eACzDlB,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAW,YAAY;IAACC,KAAK,EAAC,KAAK;IAACC,KAAK,EAAE;MAAEC,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eACzDlB,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAe,aAAa;IAACC,KAAK,EAAE,EAAG;IAACH,KAAK,EAAE;MAAED,KAAK,EAAE,MAAM;MAAEE,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,EACvER,QACE,CAAC;AAEV"}
package/dist/{preview-1699369416537.js → preview-1699388670063.js} RENAMED
@@ -1,5 +1,5 @@
1
- import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@1.0.43/dist/docs.composition.js';
2
- import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@1.0.43/dist/docs.docs.mdx';
1
+ import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@1.0.45/dist/docs.composition.js';
2
+ import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@1.0.45/dist/docs.docs.mdx';
3
3
 
4
4
  export const compositions = [compositions_0];
5
5
  export const overview = [overview_0];
package/overview/overview.tsx CHANGED
@@ -9,9 +9,10 @@ import type { SlotRegistry } from '@teambit/harmony';
9
9
  import { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';
10
10
  // import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
11
11
  import { ComponentOverview } from '@teambit/component.ui.component-meta';
12
- import { CompositionGallery } from '@teambit/compositions.panels.composition-gallery';
12
+ import { CompositionGallery, CompositionGallerySkeleton } from '@teambit/compositions.panels.composition-gallery';
13
13
  // import { ReadmeSkeleton } from './readme-skeleton';
14
14
  import styles from './overview.module.scss';
15
+ import { ReadmeSkeleton } from './readme-skeleton';
15
16
 
16
17
  export enum BadgePosition {
17
18
  Title,
@@ -47,15 +48,6 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
47
48
  const [isLoading, setLoading] = useState(true);
48
49
  const EmptyState = getEmptyState && getEmptyState();
49
50
 
50
- // if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
51
- // return (
52
- // <StatusMessageCard style={{ margin: 'auto' }} status="PROCESSING" title="component preview pending">
53
- // this might take some time
54
- // </StatusMessageCard>
55
- // );
56
-
57
- // if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')
58
- // return <StatusMessageCard style={{ margin: 'auto' }} status="FAILURE" title="failed to get component preview " />;
59
51
  const buildFailed = component.buildStatus?.toLowerCase() !== 'succeed' && component?.host === 'teambit.scope/scope';
60
52
 
61
53
  const isScaling = component.preview?.isScaling;
@@ -75,6 +67,11 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
75
67
  [onLoad]
76
68
  );
77
69
 
70
+ // reset the loading flag when components are switched
71
+ React.useEffect(() => {
72
+ if (!isLoading) setLoading(true);
73
+ }, [component.id.toString()]);
74
+
78
75
  return (
79
76
  <div className={styles.overviewWrapper} key={`${component.id.toString()}`}>
80
77
  {showHeader && (
@@ -90,15 +87,13 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
90
87
  component={component}
91
88
  />
92
89
  )}
93
-
94
- {/* TODO - @oded replace with new panel card same for compositions. */}
95
-
96
- {/* <LinkedHeading size="xs" className={styles.title}>
97
- <Icon of="text" /> <span>README</span>
98
- </LinkedHeading> */}
99
90
  {!buildFailed && (
100
91
  <div className={styles.readme}>
101
- {/* {isLoading && <ReadmeSkeleton />} */}
92
+ {isLoading && (
93
+ <ReadmeSkeleton>
94
+ <CompositionGallerySkeleton compositionsLength={component.compositions.length} />
95
+ </ReadmeSkeleton>
96
+ )}
102
97
  <ComponentPreview
103
98
  onLoad={onPreviewLoad}
104
99
  previewName="overview"
package/overview/readme-skeleton.tsx CHANGED
@@ -2,18 +2,15 @@ import React from 'react';
2
2
  import { LineSkeleton, BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
3
3
  import styles from './overview.module.scss';
4
4
 
5
- export function ReadmeSkeleton() {
5
+ export function ReadmeSkeleton({ children }: { children?: React.ReactNode }) {
6
6
  return (
7
7
  <div className={styles.readmeSkeleton}>
8
8
  <LineSkeleton width="80%" />
9
9
  <LineSkeleton width="70%" />
10
10
  <LineSkeleton width="40%" style={{ marginBottom: 40 }} />
11
-
12
11
  <LineSkeleton width="30%" style={{ marginBottom: 16 }} />
13
12
  <BlockSkeleton lines={10} style={{ width: '100%', marginBottom: 40 }} />
14
- <LineSkeleton width="80%" />
15
- <LineSkeleton width="40%" />
16
- <LineSkeleton width="25%" />
13
+ {children}
17
14
  </div>
18
15
  );
19
16
  }
package/package.json CHANGED
@@ -1,19 +1,19 @@
1
1
  {
2
2
  "name": "@teambit/docs",
3
- "version": "1.0.43",
3
+ "version": "1.0.45",
4
4
  "homepage": "https://bit.cloud/teambit/docs/docs",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.docs",
8
8
  "name": "docs",
9
- "version": "1.0.43"
9
+ "version": "1.0.45"
10
10
  },
11
11
  "dependencies": {
12
12
  "graphql-tag": "2.12.1",
13
13
  "lodash": "4.17.21",
14
14
  "classnames": "2.2.6",
15
15
  "core-js": "^3.0.0",
16
- "@babel/runtime": "7.23.2",
16
+ "@babel/runtime": "7.20.0",
17
17
  "@teambit/docs.entities.doc": "0.0.12",
18
18
  "@teambit/harmony": "0.4.6",
19
19
  "@teambit/component-id": "1.1.1",
@@ -21,22 +21,22 @@
21
21
  "@teambit/docs.ui.overview-compare": "1.0.10",
22
22
  "@teambit/component.ui.component-meta": "0.0.357",
23
23
  "@teambit/base-ui.loaders.skeleton": "1.0.1",
24
- "@teambit/compiler": "1.0.43",
25
- "@teambit/component": "1.0.43",
26
- "@teambit/pkg": "1.0.43",
27
- "@teambit/workspace": "1.0.43",
28
- "@teambit/cli": "0.0.808",
29
- "@teambit/dev-files": "1.0.43",
30
- "@teambit/envs": "1.0.43",
31
- "@teambit/graphql": "1.0.43",
32
- "@teambit/logger": "0.0.901",
33
- "@teambit/preview": "1.0.43",
34
- "@teambit/component-compare": "1.0.43",
35
- "@teambit/ui": "1.0.43",
36
- "@teambit/pubsub": "1.0.43",
37
- "@teambit/compositions.panels.composition-gallery": "0.0.168",
38
- "@teambit/preview.ui.component-preview": "1.0.2",
39
- "@teambit/react.ui.docs.properties-table": "0.0.20"
24
+ "@teambit/compiler": "1.0.45",
25
+ "@teambit/component": "1.0.45",
26
+ "@teambit/pkg": "1.0.45",
27
+ "@teambit/workspace": "1.0.45",
28
+ "@teambit/cli": "0.0.809",
29
+ "@teambit/dev-files": "1.0.45",
30
+ "@teambit/envs": "1.0.45",
31
+ "@teambit/graphql": "1.0.45",
32
+ "@teambit/logger": "0.0.902",
33
+ "@teambit/preview": "1.0.45",
34
+ "@teambit/component-compare": "1.0.45",
35
+ "@teambit/ui": "1.0.45",
36
+ "@teambit/pubsub": "1.0.45",
37
+ "@teambit/compositions.panels.composition-gallery": "0.0.170",
38
+ "@teambit/preview.ui.component-preview": "1.0.3",
39
+ "@teambit/react.ui.docs.properties-table": "0.0.21"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@types/react-dom": "^17.0.5",
@@ -50,7 +50,7 @@
50
50
  "@teambit/docs.content.docs-overview": "1.95.9"
51
51
  },
52
52
  "peerDependencies": {
53
- "@teambit/legacy": "1.0.590",
53
+ "@teambit/legacy": "1.0.591",
54
54
  "react": "^16.8.0 || ^17.0.0",
55
55
  "react-dom": "^16.8.0 || ^17.0.0"
56
56
  },