@teambit/preview.ui.preview-placeholder 0.0.0-15b225c92dfe050f2ec6529de40de2792d15e893

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { PreviewPlaceholder } from './preview-placeholder';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewPlaceholder = void 0;
+var preview_placeholder_1 = require("./preview-placeholder");
+Object.defineProperty(exports, "PreviewPlaceholder", { enumerable: true, get: function () { return preview_placeholder_1.PreviewPlaceholder; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA"}

package/dist/preview-1752762490382.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/preview-placeholder.d.ts

@@ -0,0 +1,17 @@
+import React, { ComponentType, ReactNode } from 'react';
+import { Composition } from '@teambit/compositions';
+import { ComponentModel } from '@teambit/component';
+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

@@ -0,0 +1,111 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompositions = getCompositions;
+exports.getDisplayName = getDisplayName;
+exports.getDescription = getDescription;
+exports.PreviewPlaceholder = PreviewPlaceholder;
+const react_1 = __importStar(require("react"));
+const compositions_1 = require("@teambit/compositions");
+const design_ui_heading_1 = require("@teambit/design.ui.heading");
+const toolbox_string_capitalize_1 = require("@teambit/toolbox.string.capitalize");
+const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
+const docs_1 = require("@teambit/docs");
+const preview_placeholder_module_scss_1 = __importDefault(require("./preview-placeholder.module.scss"));
+function getCompositions(component) {
+    const entry = component.get(compositions_1.CompositionsAspect.id);
+    if (!entry)
+        return [];
+    const compositions = entry.data.compositions;
+    if (!compositions)
+        return [];
+    return compositions_1.Composition.fromArray(compositions);
+}
+function getDisplayName(component) {
+    const tokens = component.id.name.split('-').map((token) => (0, toolbox_string_capitalize_1.capitalize)(token));
+    return tokens.join(' ');
+}
+function getDocsProperty(component, name) {
+    var _a, _b;
+    const docs = ((_a = component.get(docs_1.DocsAspect.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 || '';
+}
+function PreviewPlaceholder(_a) {
+    var _b, _c;
+    var { component, componentDescriptor, Container = ({ children, className }) => react_1.default.createElement("div", { className: className }, children), shouldShowPreview = ((_b = component === null || component === void 0 ? void 0 : component.compositions.length) !== null && _b !== void 0 ? _b : 0) > 0 && (component === null || component === void 0 ? void 0 : component.buildStatus) !== 'pending', } = _a;
+    const compositions = component === null || component === void 0 ? void 0 : component.compositions;
+    const description = componentDescriptor && getDescription(componentDescriptor);
+    const displayName = componentDescriptor && getDisplayName(componentDescriptor);
+    const serverUrl = (_c = component === null || component === void 0 ? void 0 : component.server) === null || _c === void 0 ? void 0 : _c.url;
+    const prevServerUrlRef = (0, react_1.useRef)(serverUrl);
+    const [forceRender, setForceRender] = react_1.default.useState(0);
+    (0, react_1.useEffect)(() => {
+        if (prevServerUrlRef.current !== serverUrl && shouldShowPreview) {
+            prevServerUrlRef.current = serverUrl;
+            setForceRender((prev) => prev + 1);
+        }
+    }, [serverUrl, shouldShowPreview]);
+    const selectedPreview = (0, react_1.useMemo)(() => {
+        if (!shouldShowPreview || !component)
+            return undefined;
+        return selectDefaultComposition(component);
+    }, [component, shouldShowPreview, forceRender]);
+    if (!component || !componentDescriptor)
+        return null;
+    if (!shouldShowPreview || !compositions || !compositions.length) {
+        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 name = component.id.toString();
+    if (!serverUrl || (!shouldShowPreview && component.buildStatus === 'pending'))
+        return (react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.previewPlaceholder, "data-tip": "", "data-for": name },
+            react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.skeletonContainer },
+                react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { lines: 12, className: preview_placeholder_module_scss_1.default.skeletonBlock }))));
+    return (react_1.default.createElement("div", { key: `${name}-${serverUrl}-${forceRender}` },
+        react_1.default.createElement(compositions_1.ComponentComposition, { component: component, composition: selectedPreview, pubsub: false, includeEnv: true, loading: 'lazy', viewport: 1280, queryParams: 'disableCta=true' }),
+        react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.previewOverlay })));
+}
+const PREVIEW_COMPOSITION_SUFFIX = 'Preview';
+function selectDefaultComposition(component) {
+    const { compositions } = component;
+    return compositions.find((x) => x.identifier.endsWith(PREVIEW_COMPOSITION_SUFFIX));
+}
+//# sourceMappingURL=preview-placeholder.js.map

package/dist/preview-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-placeholder.js","sourceRoot":"","sources":["../preview-placeholder.tsx"],"names":[],"mappings":"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"}

package/dist/preview-placeholder.module.scss

@@ -0,0 +1,94 @@
+.previewPlaceholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  color: #c7c7c7;
+  pointer-events: auto;
+  > span:first-child {
+    font-size: 30px;
+    margin-bottom: 14px;
+  }
+  > div {
+    font-size: 13px;
+  }
+}
+
+.tooltip {
+  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 {
+  position: relative;
+  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;
+}
+
+.skeletonContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: var(--skeleton-color, #e0e0e0);
+  opacity: 0.7;
+}
+
+.skeletonBlock {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  display: block;
+}

package/index.ts

@@ -0,0 +1 @@
+export { PreviewPlaceholder } from './preview-placeholder';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@teambit/preview.ui.preview-placeholder",
+  "version": "0.0.0-15b225c92dfe050f2ec6529de40de2792d15e893",
+  "homepage": "https://bit.cloud/teambit/preview/ui/preview-placeholder",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.preview",
+    "name": "ui/preview-placeholder",
+    "version": "15b225c92dfe050f2ec6529de40de2792d15e893"
+  },
+  "dependencies": {
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
+    "@teambit/design.ui.heading": "1.0.16",
+    "@teambit/component-descriptor": "0.0.0-a9e48408a1e6bef7d2675bad59ed815ea6b304b9",
+    "@teambit/toolbox.string.capitalize": "0.0.500"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components"
+  ]
+}

package/preview-placeholder.module.scss

@@ -0,0 +1,94 @@
+.previewPlaceholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  color: #c7c7c7;
+  pointer-events: auto;
+  > span:first-child {
+    font-size: 30px;
+    margin-bottom: 14px;
+  }
+  > div {
+    font-size: 13px;
+  }
+}
+
+.tooltip {
+  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 {
+  position: relative;
+  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;
+}
+
+.skeletonContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: var(--skeleton-color, #e0e0e0);
+  opacity: 0.7;
+}
+
+.skeletonBlock {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  display: block;
+}

package/preview-placeholder.tsx

@@ -0,0 +1,116 @@
+import React, { useMemo, useEffect, useRef, 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 { ComponentModel } from '@teambit/component';
+import { ComponentDescriptor } from '@teambit/component-descriptor';
+import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
+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,
+  componentDescriptor,
+  Container = ({ children, className }) => <div className={className}>{children}</div>,
+  shouldShowPreview = (component?.compositions.length ?? 0) > 0 && component?.buildStatus !== 'pending',
+}: {
+  component?: ComponentModel;
+  componentDescriptor?: ComponentDescriptor;
+  Container?: ComponentType<{ component: any; children: ReactNode; className: string }>;
+  shouldShowPreview?: boolean;
+}) {
+  const compositions = component?.compositions;
+  const description = componentDescriptor && getDescription(componentDescriptor);
+  const displayName = componentDescriptor && getDisplayName(componentDescriptor);
+  const serverUrl = component?.server?.url;
+
+  const prevServerUrlRef = useRef(serverUrl);
+  const [forceRender, setForceRender] = React.useState(0);
+
+  useEffect(() => {
+    if (prevServerUrlRef.current !== serverUrl && shouldShowPreview) {
+      prevServerUrlRef.current = serverUrl;
+      setForceRender((prev) => prev + 1);
+    }
+  }, [serverUrl, shouldShowPreview]);
+
+  const selectedPreview = useMemo(() => {
+    if (!shouldShowPreview || !component) return undefined;
+    return selectDefaultComposition(component);
+  }, [component, shouldShowPreview, forceRender]);
+
+  if (!component || !componentDescriptor) return null;
+
+  if (!shouldShowPreview || !compositions || !compositions.length) {
+    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 name = component.id.toString();
+
+  if (!serverUrl || (!shouldShowPreview && component.buildStatus === 'pending'))
+    return (
+      <div className={styles.previewPlaceholder} data-tip="" data-for={name}>
+        <div className={styles.skeletonContainer}>
+          <BlockSkeleton lines={12} className={styles.skeletonBlock} />
+        </div>
+      </div>
+    );
+
+  return (
+    <div key={`${name}-${serverUrl}-${forceRender}`}>
+      <ComponentComposition
+        component={component}
+        composition={selectedPreview}
+        pubsub={false}
+        includeEnv={true}
+        loading={'lazy'}
+        viewport={1280}
+        queryParams={'disableCta=true'}
+      />
+      <div className={styles.previewOverlay} />
+    </div>
+  );
+}
+
+const PREVIEW_COMPOSITION_SUFFIX = 'Preview';
+
+function selectDefaultComposition(component: ComponentModel) {
+  const { compositions } = component;
+  return compositions.find((x) => x.identifier.endsWith(PREVIEW_COMPOSITION_SUFFIX));
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}