@teambit/preview.ui.preview-placeholder 0.0.504 → 0.0.506

package/dist/preview-placeholder.d.ts

@@ -1,6 +1,17 @@
-import React from 'react';
+import React, { ComponentType, ReactNode } from 'react';
+import { Composition } from '@teambit/compositions';
 import { ComponentModel } from '@teambit/component';
-export declare function PreviewPlaceholder({ component, shouldShowPreview, }: {
-    component: ComponentModel;
-    shouldShowPreview: boolean;
+import { ComponentDescriptor } from '@teambit/component-descriptor';
+export declare function getCompositions(component: ComponentDescriptor): Composition[];
+export declare function getDisplayName(component: ComponentDescriptor): string;
+export declare function getDescription(component: ComponentDescriptor): any;
+export declare function PreviewPlaceholder({ component, componentDescriptor, Container, shouldShowPreview, }: {
+    component?: ComponentModel;
+    componentDescriptor?: ComponentDescriptor;
+    Container?: ComponentType<{
+        component: any;
+        children: ReactNode;
+        className: string;
+    }>;
+    shouldShowPreview?: boolean;
 }): React.JSX.Element;

package/dist/preview-placeholder.js

@@ -26,12 +26,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewPlaceholder = void 0;
+exports.PreviewPlaceholder = exports.getDescription = exports.getDisplayName = exports.getCompositions = void 0;
 const react_1 = __importStar(require("react"));
-const compositions_1 = require("@teambit/compositions");
+const compositions_1 = __importStar(require("@teambit/compositions"));
+const design_ui_heading_1 = require("@teambit/design.ui.heading");
+const toolbox_string_capitalize_1 = require("@teambit/toolbox.string.capitalize");
 const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const docs_1 = __importDefault(require("@teambit/docs"));
 const preview_placeholder_module_scss_1 = __importDefault(require("./preview-placeholder.module.scss"));
-function PreviewPlaceholder({ component, shouldShowPreview, }) {
+function getCompositions(component) {
+    const entry = component.get(compositions_1.default.id);
+    if (!entry)
+        return [];
+    const compositions = entry.data.compositions;
+    if (!compositions)
+        return [];
+    return compositions_1.Composition.fromArray(compositions);
+}
+exports.getCompositions = getCompositions;
+function getDisplayName(component) {
+    const tokens = component.id.name.split('-').map((token) => (0, toolbox_string_capitalize_1.capitalize)(token));
+    return tokens.join(' ');
+}
+exports.getDisplayName = getDisplayName;
+function getDocsProperty(component, name) {
+    var _a, _b;
+    const docs = ((_a = component.get(docs_1.default.id)) === null || _a === void 0 ? void 0 : _a.data) || {};
+    if (!docs || !((_b = docs === null || docs === void 0 ? void 0 : docs.doc) === null || _b === void 0 ? void 0 : _b.props))
+        return undefined;
+    const docProps = docs.doc.props;
+    return docProps.find((prop) => prop.name === name);
+}
+function getDescription(component) {
+    const descriptionItem = getDocsProperty(component, 'description');
+    if (!descriptionItem)
+        return '';
+    return descriptionItem.value || '';
+}
+exports.getDescription = getDescription;
+function PreviewPlaceholder({ component, componentDescriptor, Container = ({ children, className }) => react_1.default.createElement("div", { className: className }, children), shouldShowPreview = true, }) {
+    var _a;
+    if (!component || !componentDescriptor)
+        return null;
+    const compositions = component.compositions;
+    const description = getDescription(componentDescriptor);
+    const displayName = getDisplayName(componentDescriptor);
+    if (!compositions || !compositions.length || ((_a = component.buildStatus) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== 'succeed') {
+        return (react_1.default.createElement(Container, { className: preview_placeholder_module_scss_1.default.noPreview, component: component },
+            react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.scope },
+                react_1.default.createElement(design_ui_heading_1.H5, { className: preview_placeholder_module_scss_1.default.scopeTitle }, component.id.scope)),
+            react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.component },
+                react_1.default.createElement(design_ui_heading_1.H3, { className: preview_placeholder_module_scss_1.default.componentTitle }, displayName),
+                react_1.default.createElement("span", { className: preview_placeholder_module_scss_1.default.description }, description))));
+    }
     const selectedPreview = (0, react_1.useMemo)(() => {
         if (!shouldShowPreview)
             return undefined;
@@ -42,12 +89,15 @@ function PreviewPlaceholder({ component, shouldShowPreview, }) {
         return (react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.previewPlaceholder, "data-tip": "", "data-for": name },
             react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "Ripple-processing" }),
             react_1.default.createElement("div", null, "Processing preview")));
-    if (shouldShowPreview) {
-        return react_1.default.createElement(compositions_1.ComponentComposition, { component: component, composition: selectedPreview, pubsub: false });
-    }
-    return (react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.previewPlaceholder, "data-tip": "", "data-for": name },
-        react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "img" }),
-        react_1.default.createElement("div", null, "No preview available")));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(compositions_1.ComponentComposition, { component: component, composition: selectedPreview, pubsub: false }),
+        react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.previewOverlay })));
+    // return (
+    //   <div className={styles.previewPlaceholder} data-tip="" data-for={name}>
+    //     <Icon of="img" />
+    //     <div>No preview available</div>
+    //   </div>
+    // );
 }
 exports.PreviewPlaceholder = PreviewPlaceholder;
 const PREVIEW_COMPOSITION_SUFFIX = 'Preview';

package/dist/preview-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview-placeholder.js","sourceRoot":"","sources":["../preview-placeholder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,wDAA6D;AAC7D,gFAAyD;AAEzD,wGAAuD;AAEvD,SAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,iBAAiB,GAIlB;IACC,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACnC,IAAI,CAAC,iBAAiB;YAAE,OAAO,SAAS,CAAC;QACzC,OAAO,wBAAwB,CAAC,SAAS,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEnC,MAAM,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;IACrC,IAAI,SAAS,CAAC,WAAW,KAAK,SAAS;QACrC,OAAO,CACL,uCAAK,SAAS,EAAE,yCAAM,CAAC,kBAAkB,cAAW,EAAE,cAAW,IAAI;YACnE,8BAAC,+BAAI,IAAC,EAAE,EAAC,mBAAmB,GAAG;YAC/B,gEAA6B,CACzB,CACP,CAAC;IAEJ,IAAI,iBAAiB,EAAE;QACrB,OAAO,8BAAC,mCAAoB,IAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,GAAI,CAAC;KACpG;IAED,OAAO,CACL,uCAAK,SAAS,EAAE,yCAAM,CAAC,kBAAkB,cAAW,EAAE,cAAW,IAAI;QACnE,8BAAC,+BAAI,IAAC,EAAE,EAAC,KAAK,GAAG;QACjB,kEAA+B,CAC3B,CACP,CAAC;AACJ,CAAC;AA/BD,gDA+BC;AAED,MAAM,0BAA0B,GAAG,SAAS,CAAC;AAE7C,SAAS,wBAAwB,CAAC,SAAyB;IACzD,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IAEnC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CAAC,CAAC;AACrF,CAAC"}
+{"version":3,"file":"preview-placeholder.js","sourceRoot":"","sources":["../preview-placeholder.tsx"],"names":[],"mappings":"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"}

package/dist/preview-placeholder.module.scss

@@ -19,3 +19,59 @@
   max-width: 155px;
   text-align: center;
 }
+
+.previewIframe {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: none;
+}
+
+.preview {
+  overflow: hidden;
+}
+
+.description {
+  margin-top: 10px;
+  font-weight: 400;
+  font-size: 12px;
+}
+
+.noPreview {
+  background-color: var(--surface-color);
+  width: 100%;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  // justify-content: space-evenly;
+  margin: 0;
+  position: absolute;
+  height: 100%;
+}
+
+.component {
+  width: 90%;
+}
+
+.scopeTitle {
+  margin: 0;
+  padding-bottom: 25px;
+  font-weight: 400;
+}
+
+.componentTitle {
+  font-size: 28px !important;
+  margin: 0;
+  margin-bottom: 20px;
+}
+
+.previewOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  cursor: pointer;
+}

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@teambit/preview.ui.preview-placeholder",
-  "version": "0.0.504",
+  "version": "0.0.506",
   "homepage": "https://bit.cloud/teambit/preview/ui/preview-placeholder",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.preview",
     "name": "ui/preview-placeholder",
-    "version": "0.0.504"
+    "version": "0.0.506"
   },
   "dependencies": {
     "core-js": "^3.0.0",
-    "@teambit/evangelist.elements.icon": "1.0.2"
+    "@teambit/design.ui.heading": "1.0.16",
+    "@teambit/evangelist.elements.icon": "1.0.2",
+    "@teambit/component-descriptor": "0.0.411",
+    "@teambit/toolbox.string.capitalize": "0.0.495"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -26,6 +29,8 @@
     "react-dom": "^16.8.0 || ^17.0.0"
   },
   "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/preview-placeholder.module.scss

@@ -19,3 +19,59 @@
   max-width: 155px;
   text-align: center;
 }
+
+.previewIframe {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: none;
+}
+
+.preview {
+  overflow: hidden;
+}
+
+.description {
+  margin-top: 10px;
+  font-weight: 400;
+  font-size: 12px;
+}
+
+.noPreview {
+  background-color: var(--surface-color);
+  width: 100%;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  // justify-content: space-evenly;
+  margin: 0;
+  position: absolute;
+  height: 100%;
+}
+
+.component {
+  width: 90%;
+}
+
+.scopeTitle {
+  margin: 0;
+  padding-bottom: 25px;
+  font-weight: 400;
+}
+
+.componentTitle {
+  font-size: 28px !important;
+  margin: 0;
+  margin-bottom: 20px;
+}
+
+.previewOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  cursor: pointer;
+}

package/preview-placeholder.tsx

@@ -1,16 +1,71 @@
-import React, { useMemo } from 'react';
-import { ComponentComposition } from '@teambit/compositions';
+import React, { useMemo, ComponentType, ReactNode } from 'react';
+import CompositionsAspect, { ComponentComposition, Composition } from '@teambit/compositions';
+import { H3, H5 } from '@teambit/design.ui.heading';
+import { capitalize } from '@teambit/toolbox.string.capitalize';
 import { Icon } from '@teambit/evangelist.elements.icon';
 import { ComponentModel } from '@teambit/component';
+import { ComponentDescriptor } from '@teambit/component-descriptor';
+import DocsAspect from '@teambit/docs';
 import styles from './preview-placeholder.module.scss';
 
+export function getCompositions(component: ComponentDescriptor) {
+  const entry: any = component.get(CompositionsAspect.id);
+  if (!entry) return [];
+  const compositions = entry.data.compositions;
+  if (!compositions) return [];
+
+  return Composition.fromArray(compositions);
+}
+
+export function getDisplayName(component: ComponentDescriptor) {
+  const tokens = component.id.name.split('-').map((token) => capitalize(token));
+  return tokens.join(' ');
+}
+
+function getDocsProperty(component: ComponentDescriptor, name: string) {
+  const docs = component.get<any>(DocsAspect.id)?.data || {};
+  if (!docs || !docs?.doc?.props) return undefined;
+  const docProps = docs.doc.props;
+  return docProps.find((prop) => prop.name === name);
+}
+
+export function getDescription(component: ComponentDescriptor) {
+  const descriptionItem = getDocsProperty(component, 'description');
+  if (!descriptionItem) return '';
+  return descriptionItem.value || '';
+}
+
 export function PreviewPlaceholder({
   component,
-  shouldShowPreview,
+  componentDescriptor,
+  Container = ({ children, className }) => <div className={className}>{children}</div>,
+  shouldShowPreview = true,
 }: {
-  component: ComponentModel;
-  shouldShowPreview: boolean;
+  component?: ComponentModel;
+  componentDescriptor?: ComponentDescriptor;
+  Container?: ComponentType<{ component: any; children: ReactNode; className: string }>;
+  shouldShowPreview?: boolean;
 }) {
+  if (!component || !componentDescriptor) return null;
+
+  const compositions = component.compositions;
+  const description = getDescription(componentDescriptor);
+  const displayName = getDisplayName(componentDescriptor);
+
+  if (!compositions || !compositions.length || component.buildStatus?.toLowerCase() !== 'succeed') {
+    return (
+      <Container className={styles.noPreview} component={component}>
+        <div className={styles.scope}>
+          <H5 className={styles.scopeTitle}>{component.id.scope}</H5>
+        </div>
+        <div className={styles.component}>
+          <H3 className={styles.componentTitle}>{displayName}</H3>
+          <span className={styles.description}>{description}</span>
+        </div>
+      </Container>
+    );
+  }
+
   const selectedPreview = useMemo(() => {
     if (!shouldShowPreview) return undefined;
     return selectDefaultComposition(component);
@@ -25,16 +80,19 @@ export function PreviewPlaceholder({
       </div>
     );
 
-  if (shouldShowPreview) {
-    return <ComponentComposition component={component} composition={selectedPreview} pubsub={false} />;
-  }
-
   return (
-    <div className={styles.previewPlaceholder} data-tip="" data-for={name}>
-      <Icon of="img" />
-      <div>No preview available</div>
-    </div>
+    <>
+      <ComponentComposition component={component} composition={selectedPreview} pubsub={false} />
+      <div className={styles.previewOverlay} />
+    </>
   );
+
+  // return (
+  //   <div className={styles.previewPlaceholder} data-tip="" data-for={name}>
+  //     <Icon of="img" />
+  //     <div>No preview available</div>
+  //   </div>
+  // );
 }
 
 const PREVIEW_COMPOSITION_SUFFIX = 'Preview';