@teambit/compositions 1.0.893 → 1.0.895

package/dist/use-default-controls-schema-responder.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDefaultControlsSchemaResponder = useDefaultControlsSchemaResponder;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _apiReferenceHooks() {
+  const data = require("@teambit/api-reference.hooks.use-api");
+  _apiReferenceHooks = function () {
+    return data;
+  };
+  return data;
+}
+const DEFAULT_CONTROLS_REQUEST = 'composition-live-controls:request-default-controls';
+const DEFAULT_CONTROLS_RESPONSE = 'composition-live-controls:default-controls';
+function useDefaultControlsSchemaResponder(componentId, enabled = true) {
+  const pendingRequestsRef = (0, _react().useRef)([]);
+  const apiComponentId = enabled && componentId ? componentId : undefined;
+  const {
+    apiModel
+  } = (0, _apiReferenceHooks().useAPI)(apiComponentId, [], {
+    skipInternals: false
+  });
+  const schemaObject = (0, _react().useMemo)(() => apiModel?._api?.toObject(), [apiModel]);
+  const respondWithSchema = (0, _react().useCallback)(request => {
+    if (!schemaObject) return false;
+    try {
+      request.source.postMessage({
+        type: DEFAULT_CONTROLS_RESPONSE,
+        payload: {
+          id: request.id,
+          name: request.name,
+          schema: schemaObject
+        }
+      }, request.origin || '*');
+      return true;
+    } catch {
+      return false;
+    }
+  }, [schemaObject]);
+  const onDefaultControlsRequest = (0, _react().useCallback)(event => {
+    if (!enabled || !componentId) return;
+    const {
+      data
+    } = event;
+    if (!data || data.type !== DEFAULT_CONTROLS_REQUEST) return;
+    const payload = data.payload;
+    if (!payload?.id || !payload?.name) return;
+    if (payload.id !== componentId) return;
+    const source = event.source;
+    if (!source || source === window) return;
+    const request = {
+      id: payload.id,
+      name: payload.name,
+      source,
+      origin: event.origin || '*'
+    };
+    if (!schemaObject) {
+      pendingRequestsRef.current.push(request);
+      return;
+    }
+    respondWithSchema(request);
+  }, [componentId, enabled, respondWithSchema, schemaObject]);
+  (0, _react().useEffect)(() => {
+    if (!enabled || !componentId) {
+      pendingRequestsRef.current = [];
+      return;
+    }
+    window.addEventListener('message', onDefaultControlsRequest);
+    return () => {
+      window.removeEventListener('message', onDefaultControlsRequest);
+    };
+  }, [componentId, enabled, onDefaultControlsRequest]);
+  (0, _react().useEffect)(() => {
+    if (!schemaObject || pendingRequestsRef.current.length === 0) return;
+    const pending = pendingRequestsRef.current;
+    pendingRequestsRef.current = [];
+    pending.forEach(respondWithSchema);
+  }, [schemaObject, respondWithSchema]);
+}
+
+//# sourceMappingURL=use-default-controls-schema-responder.js.map

package/dist/use-default-controls-schema-responder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","data","require","_apiReferenceHooks","DEFAULT_CONTROLS_REQUEST","DEFAULT_CONTROLS_RESPONSE","useDefaultControlsSchemaResponder","componentId","enabled","pendingRequestsRef","useRef","apiComponentId","undefined","apiModel","useAPI","skipInternals","schemaObject","useMemo","_api","toObject","respondWithSchema","useCallback","request","source","postMessage","type","payload","id","name","schema","origin","onDefaultControlsRequest","event","window","current","push","useEffect","addEventListener","removeEventListener","length","pending","forEach"],"sources":["use-default-controls-schema-responder.ts"],"sourcesContent":["import { useMemo, useRef, useCallback, useEffect } from 'react';\nimport { useAPI } from '@teambit/api-reference.hooks.use-api';\n\nconst DEFAULT_CONTROLS_REQUEST = 'composition-live-controls:request-default-controls';\nconst DEFAULT_CONTROLS_RESPONSE = 'composition-live-controls:default-controls';\n\ntype DefaultControlsRequestPayload = {\n  id: string;\n  name: string;\n};\n\ntype PendingDefaultControlsRequest = {\n  id: string;\n  name: string;\n  source: Window;\n  origin: string;\n};\n\nexport function useDefaultControlsSchemaResponder(componentId: string | undefined, enabled = true) {\n  const pendingRequestsRef = useRef<PendingDefaultControlsRequest[]>([]);\n  const apiComponentId = enabled && componentId ? componentId : undefined;\n\n  const { apiModel } = useAPI(apiComponentId, [], { skipInternals: false });\n  const schemaObject = useMemo(() => apiModel?._api?.toObject(), [apiModel]);\n\n  const respondWithSchema = useCallback(\n    (request: PendingDefaultControlsRequest) => {\n      if (!schemaObject) return false;\n      try {\n        request.source.postMessage(\n          {\n            type: DEFAULT_CONTROLS_RESPONSE,\n            payload: { id: request.id, name: request.name, schema: schemaObject },\n          },\n          request.origin || '*'\n        );\n        return true;\n      } catch {\n        return false;\n      }\n    },\n    [schemaObject]\n  );\n\n  const onDefaultControlsRequest = useCallback(\n    (event: MessageEvent) => {\n      if (!enabled || !componentId) return;\n      const { data } = event;\n      if (!data || data.type !== DEFAULT_CONTROLS_REQUEST) return;\n      const payload = data.payload as DefaultControlsRequestPayload | undefined;\n      if (!payload?.id || !payload?.name) return;\n      if (payload.id !== componentId) return;\n      const source = event.source as Window | null;\n      if (!source || source === window) return;\n\n      const request: PendingDefaultControlsRequest = {\n        id: payload.id,\n        name: payload.name,\n        source,\n        origin: event.origin || '*',\n      };\n\n      if (!schemaObject) {\n        pendingRequestsRef.current.push(request);\n        return;\n      }\n\n      respondWithSchema(request);\n    },\n    [componentId, enabled, respondWithSchema, schemaObject]\n  );\n\n  useEffect(() => {\n    if (!enabled || !componentId) {\n      pendingRequestsRef.current = [];\n      return;\n    }\n    window.addEventListener('message', onDefaultControlsRequest);\n    return () => {\n      window.removeEventListener('message', onDefaultControlsRequest);\n    };\n  }, [componentId, enabled, onDefaultControlsRequest]);\n\n  useEffect(() => {\n    if (!schemaObject || pendingRequestsRef.current.length === 0) return;\n    const pending = pendingRequestsRef.current;\n    pendingRequestsRef.current = [];\n    pending.forEach(respondWithSchema);\n  }, [schemaObject, respondWithSchema]);\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.893",
+  "version": "1.0.895",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.893"
+    "version": "1.0.895"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -16,10 +16,10 @@
     "classnames": "^2.5.1",
     "@teambit/compositions.model.composition-id": "0.0.506",
     "@teambit/harmony": "0.4.7",
-    "@teambit/cli": "0.0.1301",
-    "@teambit/component.sources": "0.0.151",
-    "@teambit/legacy.consumer-component": "0.0.100",
-    "@teambit/toolbox.path.match-patterns": "0.0.26",
+    "@teambit/cli": "0.0.1302",
+    "@teambit/component.sources": "0.0.152",
+    "@teambit/legacy.consumer-component": "0.0.101",
+    "@teambit/toolbox.path.match-patterns": "0.0.27",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
@@ -32,7 +32,7 @@
     "@teambit/documenter.theme.theme-context": "4.0.7",
     "@teambit/documenter.ui.heading": "4.1.8",
     "@teambit/documenter.ui.property-table": "4.1.11",
-    "@teambit/panels": "0.0.1303",
+    "@teambit/panels": "0.0.1304",
     "@teambit/preview.ui.component-preview": "1.0.31",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.233",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.200",
@@ -40,10 +40,9 @@
     "@teambit/design.ui.empty-box": "0.0.364",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.18",
     "@teambit/mdx.ui.mdx-layout": "1.0.12",
-    "@teambit/compositions.ui.composition-compare-section": "0.0.101",
-    "@teambit/compositions.ui.composition-compare": "0.0.258",
+    "@teambit/api-reference.hooks.use-api": "0.0.57",
     "@teambit/workspace.ui.use-workspace-mode": "0.0.2",
-    "@teambit/compositions.ui.composition-live-controls": "0.0.3",
+    "@teambit/compositions.ui.composition-live-controls": "0.0.6",
     "@teambit/evangelist.elements.icon": "1.0.5",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.502",
     "@teambit/ui-foundation.ui.tree.drawer": "1.0.0",
@@ -54,16 +53,19 @@
     "@teambit/design.inputs.input-text": "1.1.4",
     "@teambit/design.inputs.text-area": "0.0.20",
     "@teambit/design.ui.input.color-picker": "0.0.56",
-    "@teambit/component": "1.0.893",
-    "@teambit/graphql": "1.0.893",
-    "@teambit/dev-files": "1.0.893",
-    "@teambit/envs": "1.0.893",
-    "@teambit/preview": "1.0.893",
-    "@teambit/schema": "1.0.893",
-    "@teambit/scope": "1.0.893",
-    "@teambit/workspace": "1.0.893",
-    "@teambit/component-compare": "1.0.893",
-    "@teambit/ui": "1.0.893"
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
+    "@teambit/component": "1.0.895",
+    "@teambit/graphql": "1.0.895",
+    "@teambit/dev-files": "1.0.895",
+    "@teambit/envs": "1.0.895",
+    "@teambit/preview": "1.0.895",
+    "@teambit/schema": "1.0.895",
+    "@teambit/scope": "1.0.895",
+    "@teambit/workspace": "1.0.895",
+    "@teambit/component-compare": "1.0.895",
+    "@teambit/compositions.ui.composition-compare-section": "0.0.103",
+    "@teambit/compositions.ui.composition-compare": "0.0.260",
+    "@teambit/ui": "1.0.895"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/compositions-panel/compositions-panel.module.scss

@@ -13,6 +13,7 @@
     border: none;
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
+
   > div:last-child {
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
@@ -179,3 +180,35 @@
     }
   }
 }
+
+.liveControlsSkeleton {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  opacity: 1;
+  transition:
+    opacity 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.liveControlsSkeleton--hidden {
+  opacity: 0;
+  transform: translateY(2px);
+}
+
+.liveControlsContent {
+  opacity: 1;
+  transition:
+    opacity 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.liveControlsContent--hidden {
+  opacity: 0;
+  transform: translateY(2px);
+}
+
+.loader {
+  color: var(--skeleton-color, #e0e0e0);
+}

package/ui/compositions-panel/compositions-panel.tsx

@@ -1,17 +1,12 @@
 import { Icon } from '@teambit/evangelist.elements.icon';
 import classNames from 'classnames';
 import { useSearchParams } from 'react-router-dom';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';
 import { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';
 import { Tooltip } from '@teambit/design.ui.tooltip';
 import { useNavigate, useLocation } from '@teambit/base-react.navigation.link';
-import {
-  type LiveControlReadyEventData,
-  getReadyListener,
-  broadcastUpdate,
-} from '@teambit/compositions.ui.composition-live-controls';
-
+import { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';
 import styles from './compositions-panel.module.scss';
 import type { Composition } from '../../composition';
 import { LiveControls } from './live-control-panel';
@@ -54,10 +49,8 @@ export function CompositionsPanel({
   className,
   ...rest
 }: CompositionsPanelProps) {
-  // setup drawer state
-  // TODO: only for alpha versions of live controls. remove when stable.
-  const [hasLiveControls, setHasLiveControls] = useState(false);
   const [openDrawerList, onToggleDrawer] = useState(['COMPOSITIONS', 'LIVE_CONTROLS']);
+  const { hasLiveControls, ready, defs, values, onChange, setTimestamp } = useLiveControls();
   const handleDrawerToggle = (id: string) => {
     const isDrawerOpen = openDrawerList.includes(id);
     if (isDrawerOpen) {
@@ -76,25 +69,19 @@ export function CompositionsPanel({
   const versionFromQueryParams = searchParams.get('version');
   const navigate = useNavigate();
 
-  // live control state
-  const [controlsTimestamp, setControlsTimestamp] = useState(0);
-  const [controlsDefs, setControlsDefs] = useState<any>(null);
-  const [controlsValues, setControlsValues] = useState<any>({});
-  const [mounter, setMounter] = useState<Window>();
-
   // composition navigation action
   const handleSelect = useCallback(
     (selected: Composition) => {
       onSelect && onSelect(selected);
       if (selected === active) return;
-      setControlsTimestamp(0);
+      setTimestamp(0);
     },
-    [onSelect]
+    [onSelect, active, setTimestamp]
   );
   const onCompositionCodeClicked = useCallback(
     (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {
       e.preventDefault();
-      setControlsTimestamp(0);
+      setTimestamp(0);
       const queryParams = new URLSearchParams();
       if (versionFromQueryParams) {
         queryParams.set('version', versionFromQueryParams);
@@ -102,45 +89,7 @@ export function CompositionsPanel({
       const basePath = location?.pathname.split('/~compositions')[0];
       navigate(`${basePath}/~code/${composition.filepath}?${queryParams.toString()}#search=${composition.identifier}`);
     },
-    [location?.pathname, versionFromQueryParams]
-  );
-
-  // listen to the mounter for live control updates
-  useEffect(() => {
-    // TODO: remove when stable.
-    window.addEventListener('message', (e: MessageEvent) => {
-      if (e.data.type === 'composition-live-controls:activate') {
-        setHasLiveControls(true);
-      }
-    });
-
-    function onLiveControlsSetup(e: MessageEvent<LiveControlReadyEventData>) {
-      getReadyListener(e, ({ controls, values, timestamp }) => {
-        const iframeWindow = e.source;
-        setMounter(iframeWindow as Window);
-        setControlsDefs(controls);
-        setControlsValues(values);
-        setControlsTimestamp(timestamp);
-      });
-    }
-    window.addEventListener('message', onLiveControlsSetup);
-    return () => {
-      window.removeEventListener('message', onLiveControlsSetup);
-    };
-  }, []);
-
-  // sync live control updates back to the mounter
-  const onLiveControlsUpdate = useCallback(
-    (key: string, value: any) => {
-      if (mounter) {
-        broadcastUpdate(mounter, controlsTimestamp, {
-          key,
-          value,
-        });
-      }
-      setControlsValues((prev: any) => ({ ...prev, [key]: value }));
-    },
-    [mounter, controlsValues, controlsTimestamp]
+    [location?.pathname, navigate, setTimestamp, versionFromQueryParams]
   );
 
   return (
@@ -182,22 +131,20 @@ export function CompositionsPanel({
           })}
         </ul>
       </DrawerUI>
-      {
-        /* TODO: remove when stable */ hasLiveControls ? (
-          <DrawerUI
-            isOpen={openDrawerList.includes('LIVE_CONTROLS')}
-            onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}
-            className={classNames(styles.tab)}
-            name="LIVE CONTROLS"
-          >
-            {controlsTimestamp ? (
-              <LiveControls defs={controlsDefs} values={controlsValues} onChange={onLiveControlsUpdate} />
-            ) : (
-              <div className={styles.noLiveControls}>No live controls available for this composition</div>
-            )}
-          </DrawerUI>
-        ) : null
-      }
+      {hasLiveControls ? (
+        <DrawerUI
+          name="LIVE CONTROLS"
+          className={classNames(styles.tab, className)}
+          isOpen={openDrawerList.includes('LIVE_CONTROLS')}
+          onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}
+        >
+          {ready ? (
+            <LiveControls defs={defs} values={values} onChange={onChange} />
+          ) : (
+            <div className={styles.noLiveControls}>No live controls available for this composition</div>
+          )}
+        </DrawerUI>
+      ) : null}
     </div>
   );
 }

package/ui/compositions-panel/live-control-input.module.scss

@@ -1,7 +1,96 @@
 @import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
 
 .wrapper {
-  padding: 4px 0;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.wrapper > * {
+  width: 100%;
+  min-width: 0;
+}
+
+.fullWidthControl {
+  width: 100%;
+}
+
+.dropdownField {
+  display: block;
+  width: 100%;
+}
+
+.dropdownField :global([class*='dropdownPlaceholder']) {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.wrapper :global(textarea) {
+  min-height: 78px;
+  resize: vertical;
+}
+
+.toggleWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 36px;
+}
+
+.toggleControl {
+  width: 42px;
+  max-width: 42px;
+  min-width: 42px;
+}
+
+.toggleControl > * {
+  width: 100%;
+}
+
+.rangeWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 4px;
+}
+
+.rangeInput {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--primary-color, #6a57fd);
+}
+
+.rangeValue {
+  font-size: var(--bit-p-xs, 13px);
+  line-height: 1.2;
+  color: var(--on-background-color, #222222);
+  opacity: 0.85;
+}
+
+.multiSelect {
+  width: 100%;
+  min-height: 112px;
+  padding: 6px 8px;
+  border: 1px solid var(--border-medium-color, rgba(0, 0, 0, 0.16));
+  border-radius: 8px;
+  background: var(--surface-neutral-color, #ffffff);
+  color: var(--on-background-color, #222222);
+  font: inherit;
+  line-height: 1.35;
+  box-sizing: border-box;
+  scrollbar-gutter: stable;
+}
+
+.multiSelect:focus {
+  outline: none;
+  border-color: var(--primary-color, #6a57fd);
+  box-shadow: 0 0 0 2px rgba(106, 87, 253, 0.18);
+}
+
+.multiSelect option {
+  padding: 4px 6px;
 }
 
 .portalMenu {
@@ -19,3 +108,7 @@
   cursor: pointer;
   font-family: 'CircularPro', 'Gill Sans', 'Gill Sans MT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
+.inputText {
+  padding-top: 0px !important;
+}