@teambit/compositions 1.0.630 → 1.0.632

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

@@ -1,12 +1,20 @@
 import { Icon } from '@teambit/evangelist.elements.icon';
 import classNames from 'classnames';
 import { useSearchParams } from 'react-router-dom';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, 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 { Composition } from '../../composition';
+import {
+  type LiveControlReadyEventData,
+  getReadyListener,
+  broadcastUpdate,
+} from '@teambit/compositions.ui.composition-live-controls';
+
 import styles from './compositions-panel.module.scss';
+import { Composition } from '../../composition';
+import { LiveControls } from './live-control-panel';
 
 export type CompositionsPanelProps = {
   /**
@@ -46,23 +54,47 @@ 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 handleDrawerToggle = (id: string) => {
+    const isDrawerOpen = openDrawerList.includes(id);
+    if (isDrawerOpen) {
+      onToggleDrawer((list) => list.filter((drawer) => drawer !== id));
+      return;
+    }
+    onToggleDrawer((list) => list.concat(id));
+  };
+
+  // setup from props
   const shouldAddNameParam = useNameParam || (isScaling && includesEnvTemplate === false);
 
+  // current composition state
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  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);
     },
     [onSelect]
   );
-
-  const location = useLocation();
-  const [searchParams] = useSearchParams();
-  const versionFromQueryParams = searchParams.get('version');
-  const navigate = useNavigate();
-
   const onCompositionCodeClicked = useCallback(
     (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {
       e.preventDefault();
+      setControlsTimestamp(0);
       const queryParams = new URLSearchParams();
       if (versionFromQueryParams) {
         queryParams.set('version', versionFromQueryParams);
@@ -73,35 +105,99 @@ export function CompositionsPanel({
     [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]
+  );
+
   return (
-    <ul {...rest} className={classNames(className)}>
-      {compositions.map((composition) => {
-        const href = shouldAddNameParam ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;
-        return (
-          <li
-            key={composition.identifier}
-            className={classNames(styles.linkWrapper, composition === active && styles.active)}
-          >
-            <a className={styles.panelLink} onClick={() => handleSelect(composition)}>
-              <span className={styles.box}></span>
-              <span className={styles.name}>{composition.displayName}</span>
-            </a>
-            <div className={styles.right}>
-              <MenuWidgetIcon
-                className={styles.codeLink}
-                icon="Code"
-                tooltipContent="Code"
-                onClick={onCompositionCodeClicked(composition)}
-              />
-              <Tooltip content="Open in new tab" placement="bottom">
-                <a className={styles.panelLink} target="_blank" rel="noopener noreferrer" href={href}>
-                  <Icon className={styles.icon} of="open-tab" />
+    <div className={classNames(styles.container)}>
+      <DrawerUI
+        isOpen={openDrawerList.includes('COMPOSITIONS')}
+        onToggle={() => handleDrawerToggle('COMPOSITIONS')}
+        name="COMPOSITIONS"
+        className={classNames(styles.tab)}
+      >
+        <ul {...rest} className={classNames(className)}>
+          {compositions.map((composition) => {
+            const href = shouldAddNameParam
+              ? `${url}&name=${composition.identifier}`
+              : `${url}&${composition.identifier}`;
+            return (
+              <li
+                key={composition.identifier}
+                className={classNames(styles.linkWrapper, composition === active && styles.active)}
+              >
+                <a className={styles.panelLink} onClick={() => handleSelect(composition)}>
+                  <span className={styles.name}>{composition.displayName}</span>
                 </a>
-              </Tooltip>
-            </div>
-          </li>
-        );
-      })}
-    </ul>
+                <div className={styles.right}>
+                  <MenuWidgetIcon
+                    className={styles.codeLink}
+                    icon="Code"
+                    tooltipContent="Code"
+                    onClick={onCompositionCodeClicked(composition)}
+                  />
+                  <Tooltip content="Open in new tab" placement="bottom">
+                    <a className={styles.iconLink} target="_blank" rel="noopener noreferrer" href={href}>
+                      <Icon className={styles.icon} of="open-tab" />
+                    </a>
+                  </Tooltip>
+                </div>
+              </li>
+            );
+          })}
+        </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
+      }
+    </div>
   );
 }

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

@@ -0,0 +1,3 @@
+.wrapper {
+  padding: 4px 0;
+}

package/ui/compositions-panel/live-control-input.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { InputText } from '@teambit/design.inputs.input-text';
+import { TextArea } from '@teambit/design.inputs.text-area';
+import { Dropdown } from '@teambit/design.inputs.dropdown';
+import { MenuItem } from '@teambit/design.inputs.selectors.menu-item';
+import { ColorPicker } from '@teambit/design.ui.input.color-picker';
+import { DatePicker } from '@teambit/design.inputs.date-picker';
+import { Toggle } from '@teambit/design.inputs.toggle-switch';
+
+import styles from './live-control-input.module.scss';
+
+type InputComponentProps = {
+  id: string;
+  value: any;
+  onChange: (value: any) => void;
+  meta?: any;
+};
+
+type InputComponent = React.FC<InputComponentProps>;
+
+function ShortTextInput({ id, value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue);
+    setInputValue(newValue);
+  };
+  return <InputText id={id} value={inputValue} onChange={handleChange} />;
+}
+
+function LongTextInput({ id, value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value);
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue);
+    setInputValue(newValue);
+  };
+  return <TextArea id={id} value={inputValue} onChange={handleChange} />;
+}
+
+function SelectInput({ id, value, onChange, meta }: InputComponentProps) {
+  const [selectedValue, setSelectedValue] = React.useState(value);
+  const handleChange = (newValue: any) => {
+    onChange(newValue);
+    setSelectedValue(newValue);
+  };
+  const placeholderContent = meta.options.find((o: any) => o.value === selectedValue)?.label;
+  return (
+    <p className={classNames(styles.wrapper)}>
+      <Dropdown id={id} placeholderContent={placeholderContent}>
+        {meta.options.map((option: any) => (
+          <MenuItem
+            active={option.value === selectedValue}
+            key={option.value}
+            onClick={() => handleChange(option.value)}
+          >
+            {option.label}
+          </MenuItem>
+        ))}
+      </Dropdown>
+    </p>
+  );
+}
+
+function NumberInput({ id, value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    if (!isNaN(Number(newValue))) {
+      onChange(Number(newValue));
+      setInputValue(Number(newValue));
+    } else {
+      // TODO: render error message
+      // eslint-disable-next-line no-console
+      console.error('Invalid number input', newValue);
+    }
+  };
+  return <InputText id={id} type="number" value={inputValue} onChange={handleChange} />;
+}
+
+function ColorInput({ id, value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value);
+  const handleChange = (newValue: string) => {
+    onChange(newValue);
+    setInputValue(newValue);
+  };
+  return (
+    <p className={classNames(styles.wrapper)}>
+      <ColorPicker id={id} value={inputValue} onColorSelect={handleChange} />
+    </p>
+  );
+}
+
+function DateInput({ id, value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState<Date | null>(new Date(value));
+  const handleChange = (newValue: Date | null) => {
+    if (newValue) {
+      onChange(newValue.toISOString().split('T')[0]);
+    }
+    setInputValue(newValue);
+  };
+  return (
+    <p className={classNames(styles.wrapper)}>
+      <DatePicker id={id} date={inputValue} onChange={handleChange} />
+    </p>
+  );
+}
+
+function ToggleInput({ id, value, onChange }: InputComponentProps) {
+  const [isChecked, setIsChecked] = React.useState(value);
+  const handleChange = () => {
+    setIsChecked(!isChecked);
+    onChange(!isChecked);
+  };
+  return (
+    <p className={classNames(styles.wrapper)}>
+      <Toggle id={id} defaultChecked={isChecked} onChange={handleChange} />
+    </p>
+  );
+}
+
+function JsonInput({ id, value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(JSON.stringify(value, null, 2));
+  const [message, setMessage] = React.useState('');
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    try {
+      const parsedValue = JSON.parse(newValue);
+      onChange(parsedValue);
+      setMessage('');
+    } catch {
+      setMessage('Invalid JSON');
+    }
+    setInputValue(newValue);
+  };
+  return (
+    <div>
+      <TextArea id={id} value={inputValue} onChange={handleChange} />
+      {message && <div style={{ color: 'red' }}>{message}</div>}
+    </div>
+  );
+}
+
+export function getInputComponent(type: string): InputComponent {
+  switch (type) {
+    case 'text':
+      return ShortTextInput;
+    case 'longtext':
+      return LongTextInput;
+    case 'select':
+      return SelectInput;
+    case 'number':
+      return NumberInput;
+    case 'color':
+      return ColorInput;
+    case 'date':
+      return DateInput;
+    case 'boolean':
+      return ToggleInput;
+    case 'json':
+      return JsonInput;
+    default:
+      // eslint-disable-next-line no-console
+      console.warn(`Unknown input type: ${type}`);
+      return ShortTextInput;
+  }
+}

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

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  padding: 8px 0;
+}
+
+.item {
+  padding: 4px 8px;
+}
+
+.label {
+  font-weight: bold;
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import classNames from 'classnames';
+import { type Control } from '@teambit/compositions.ui.composition-live-controls';
+
+import styles from './live-control-panel.module.scss';
+import { getInputComponent } from './live-control-input';
+
+export function LiveControls({
+  defs,
+  values,
+  onChange,
+}: {
+  defs: Array<Control>;
+  values: Record<string, any>;
+  onChange: (key: string, value: any) => void;
+}) {
+  return (
+    <ul className={classNames(styles.container)}>
+      {defs.map((field) => {
+        const key = field.id;
+        const InputComponent = getInputComponent(field.input || 'text');
+        return (
+          <li key={key} className={classNames(styles.item)}>
+            <div className={classNames(styles.label)}>
+              <label htmlFor={`control-${key}`}>{field.label || field.id}</label>
+            </div>
+            <div>
+              <InputComponent
+                id={`control-${key}`}
+                value={values[key]}
+                onChange={(v: any) => onChange(key, v)}
+                meta={field}
+              />
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}