@teambit/compositions 1.0.894 → 1.0.895

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

@@ -10,6 +10,8 @@ import { MenuItem } from '@teambit/design.inputs.selectors.menu-item';
 import { ColorPicker, ColorsBox } from '@teambit/design.ui.input.color-picker';
 import { DatePicker } from '@teambit/design.inputs.date-picker';
 import { Toggle } from '@teambit/design.inputs.toggle-switch';
+import type { SelectOption } from '@teambit/compositions.ui.composition-live-controls';
+
 import { useOverlay, BitPortal } from './use-overlay';
 
 import styles from './live-control-input.module.scss';
@@ -24,7 +26,7 @@ type InputComponentProps = {
 
 type InputComponent = React.FC<InputComponentProps>;
 
-function ShortTextInput({ value, onChange }: InputComponentProps) {
+function ShortTextInput({ value, onChange, id }: InputComponentProps) {
   const [inputValue, setInputValue] = React.useState(value || '');
 
   React.useEffect(() => {
@@ -37,10 +39,14 @@ function ShortTextInput({ value, onChange }: InputComponentProps) {
     setInputValue(newValue || '');
   };
 
-  return <InputText value={inputValue} onChange={handleChange} />;
+  return (
+    <div className={styles.wrapper}>
+      <InputText className={styles.inputText} id={id} value={inputValue} onChange={handleChange} />
+    </div>
+  );
 }
 
-function LongTextInput({ value, onChange }: InputComponentProps) {
+function LongTextInput({ value, onChange, id }: InputComponentProps) {
   const [inputValue, setInputValue] = React.useState(value || '');
 
   React.useEffect(() => {
@@ -53,13 +59,18 @@ function LongTextInput({ value, onChange }: InputComponentProps) {
     setInputValue(newValue || '');
   };
 
-  return <TextArea value={inputValue} onChange={handleChange} />;
+  return (
+    <div className={styles.wrapper}>
+      <TextArea id={id} value={inputValue} onChange={handleChange} />
+    </div>
+  );
 }
 
-function SelectInput({ value, onChange, meta }: InputComponentProps) {
+export function SelectInput({ value, onChange, meta }: InputComponentProps) {
+  const triggerRef = React.useRef<HTMLDivElement>(null);
+
   const [selectedValue, setSelectedValue] = React.useState(value || '');
   const [open, setOpen] = React.useState(false);
-  const triggerRef = React.useRef<HTMLParagraphElement>(null);
 
   React.useEffect(() => {
     setSelectedValue(value || '');
@@ -84,14 +95,17 @@ function SelectInput({ value, onChange, meta }: InputComponentProps) {
   };
 
   return (
-    <p ref={triggerRef} className={classNames(styles.wrapper)}>
-      <Dropdown
-        placeholderContent={placeholderContent}
-        open={open}
-        onChange={(_, isOpen) => setOpen(isOpen)}
-        position={position}
-        dropClass={overlayStyles.suppressNativeMenu}
-      />
+    <div ref={triggerRef} className={classNames(styles.wrapper)}>
+      <div className={styles.fullWidthControl}>
+        <Dropdown
+          className={styles.dropdownField}
+          placeholderContent={placeholderContent}
+          open={open}
+          onChange={(_, isOpen) => setOpen(isOpen)}
+          position={position}
+          dropClass={overlayStyles.suppressNativeMenu}
+        />
+      </div>
 
       {open && style && (
         <BitPortal>
@@ -109,11 +123,11 @@ function SelectInput({ value, onChange, meta }: InputComponentProps) {
           </div>
         </BitPortal>
       )}
-    </p>
+    </div>
   );
 }
 
-function NumberInput({ value, onChange }: InputComponentProps) {
+function NumberInput({ value, onChange, id }: InputComponentProps) {
   const [inputValue, setInputValue] = React.useState(value || 0);
 
   React.useEffect(() => {
@@ -132,7 +146,11 @@ function NumberInput({ value, onChange }: InputComponentProps) {
     }
   };
 
-  return <InputText type="number" value={inputValue} onChange={handleChange} />;
+  return (
+    <div className={styles.wrapper}>
+      <InputText id={id} type="number" value={inputValue} onChange={handleChange} />
+    </div>
+  );
 }
 
 function ColorPickerPortal(props: any) {
@@ -185,9 +203,9 @@ function ColorInput({ value, onChange }: InputComponentProps) {
   };
 
   return (
-    <p className={styles.wrapper}>
+    <div className={styles.wrapper}>
       <ColorPickerPortal value={inputValue} onColorSelect={handleChange} allowCustomColor />
-    </p>
+    </div>
   );
 }
 
@@ -206,9 +224,9 @@ function DateInput({ value, onChange }: InputComponentProps) {
   };
 
   return (
-    <p className={classNames(styles.wrapper)}>
+    <div className={classNames(styles.wrapper)}>
       <DatePicker date={inputValue} onChange={handleChange} />
-    </p>
+    </div>
   );
 }
 
@@ -219,19 +237,98 @@ function ToggleInput({ value, onChange }: InputComponentProps) {
     setIsChecked(!!value);
   }, [value]);
 
-  const handleChange = () => {
-    setIsChecked(!isChecked);
-    onChange(!isChecked);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextChecked = event?.target?.checked ?? !isChecked;
+    setIsChecked(nextChecked);
+    onChange(nextChecked);
+  };
+
+  return (
+    <div className={classNames(styles.wrapper, styles.toggleWrapper)}>
+      <div className={styles.toggleControl}>
+        <Toggle checked={isChecked} onInputChanged={handleChange} />
+      </div>
+    </div>
+  );
+}
+
+function RangeInput({ value, onChange, meta, id }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState<number>(typeof value === 'number' ? value : 0);
+
+  React.useEffect(() => {
+    setInputValue(typeof value === 'number' ? value : 0);
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = Number(e.target.value);
+    if (!isNaN(newValue)) {
+      onChange(newValue);
+      setInputValue(newValue);
+    }
+  };
+
+  return (
+    <div className={classNames(styles.wrapper, styles.rangeWrapper)}>
+      <input
+        id={id}
+        className={styles.rangeInput}
+        type="range"
+        value={inputValue}
+        min={meta?.min}
+        max={meta?.max}
+        step={meta?.step}
+        onChange={handleChange}
+      />
+      <div className={styles.rangeValue}>{inputValue}</div>
+    </div>
+  );
+}
+
+function MultiSelectInput({ value, onChange, meta, id }: InputComponentProps) {
+  const [selectedValues, setSelectedValues] = React.useState<string[]>(Array.isArray(value) ? value : []);
+
+  React.useEffect(() => {
+    setSelectedValues(Array.isArray(value) ? value : []);
+  }, [value]);
+
+  const options = React.useMemo<{ label: string; value: string }[]>(() => {
+    if (!meta?.options) return [];
+    return meta.options.map((option: SelectOption) =>
+      typeof option === 'string' ? { label: option, value: option } : option
+    );
+  }, [meta]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const values = Array.from(e.target.selectedOptions).map((opt) => opt.value);
+    onChange(values);
+    setSelectedValues(values);
   };
 
   return (
-    <p className={classNames(styles.wrapper)}>
-      <Toggle defaultChecked={isChecked} onChange={handleChange} />
-    </p>
+    <div className={classNames(styles.wrapper)}>
+      <select id={id} className={styles.multiSelect} multiple value={selectedValues} onChange={handleChange}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
   );
 }
 
-function JsonInput({ value, onChange }: InputComponentProps) {
+function CustomInput({ value, onChange, meta, id }: InputComponentProps) {
+  if (typeof meta?.render === 'function') {
+    return (
+      <div className={classNames(styles.wrapper)}>
+        {meta.render({ value, onChange, id, options: meta.renderOptions })}
+      </div>
+    );
+  }
+  return <ShortTextInput id={id} value={value} onChange={onChange} />;
+}
+
+function JsonInput({ value, onChange, id }: InputComponentProps) {
   const [inputValue, setInputValue] = React.useState(JSON.stringify(value, null, 2));
 
   React.useEffect(() => {
@@ -253,8 +350,8 @@ function JsonInput({ value, onChange }: InputComponentProps) {
   };
 
   return (
-    <div>
-      <TextArea value={inputValue} onChange={handleChange} />
+    <div className={styles.wrapper}>
+      <TextArea id={id} value={inputValue} onChange={handleChange} />
       {message && <div style={{ color: 'red' }}>{message}</div>}
     </div>
   );
@@ -276,8 +373,14 @@ export function getInputComponent(type: string): InputComponent {
       return DateInput;
     case 'boolean':
       return ToggleInput;
+    case 'range':
+      return RangeInput;
+    case 'multiselect':
+      return MultiSelectInput;
     case 'json':
       return JsonInput;
+    case 'custom':
+      return CustomInput;
     default:
       // eslint-disable-next-line no-console
       console.warn(`Unknown input type: ${type}`);

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

@@ -9,20 +9,23 @@ export function LiveControls({
   defs,
   values,
   onChange,
+  renderLabel,
 }: {
   defs: Array<Control>;
   values: Record<string, any>;
   onChange: (key: string, value: any) => void;
+  renderLabel?: (field: Control) => React.ReactNode;
 }) {
   return (
     <ul className={classNames(styles.container)}>
       {defs.map((field) => {
         const key = field.id;
         const InputComponent = getInputComponent(field.input || 'text');
+        const labelContent = renderLabel ? renderLabel(field) : field.label || field.id;
         return (
           <li key={key} className={classNames(styles.item)}>
             <div className={classNames(styles.label)}>
-              <label htmlFor={`control-${key}`}>{field.label || field.id}</label>
+              <label htmlFor={`control-${key}`}>{labelContent}</label>
             </div>
             <div>
               <InputComponent

package/ui/compositions-panel/live-controls-diff-panel.module.scss

@@ -0,0 +1,185 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.columnsLayout {
+  display: flex;
+  gap: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  align-items: stretch;
+}
+
+.column {
+  flex: 1 1 0;
+  min-width: 320px;
+  padding: 0 16px;
+  overflow: visible;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+.columnHeader {
+  font-size: var(--bit-p-xxs, 12px);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  line-height: 1.3;
+  color: var(--on-background-color, #222222);
+  opacity: 0.5;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
+}
+
+.columnDivider {
+  width: 1px;
+  background: var(--border-medium-color, rgba(0, 0, 0, 0.14));
+  flex-shrink: 0;
+  margin: 0 8px;
+}
+
+.controlsList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px 12px;
+  align-items: start;
+}
+
+.controlRow {
+  display: block;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.controlRowWide {
+  grid-column: 1 / -1;
+}
+
+.controlMain {
+  display: grid;
+  grid-template-rows: auto minmax(36px, auto);
+  align-content: start;
+  row-gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.controlInput {
+  min-width: 0;
+}
+
+.controlLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 0;
+  min-height: 20px;
+
+  label {
+    font-size: var(--bit-p-xs, 13px);
+    font-weight: 500;
+    color: var(--on-background-color, #222222);
+  }
+}
+
+.sourceTag {
+  font-size: 10px;
+  line-height: 14px;
+  padding: 0 5px;
+  border-radius: 999px;
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+.tagCommon {
+  background: rgba(106, 87, 253, 0.12);
+  color: var(--primary-color, #6a57fd);
+}
+
+.tagBase {
+  background: rgba(255, 152, 0, 0.12);
+  color: #e65100;
+}
+
+.tagCompare {
+  background: rgba(33, 150, 243, 0.12);
+  color: #1565c0;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  color: var(--skeleton-color, #e0e0e0);
+}
+
+@media (max-width: 1200px) {
+  .column {
+    min-width: 280px;
+  }
+
+  .controlsList {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+}
+
+.emptyState {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border: 1px dashed var(--border-medium-color, rgba(0, 0, 0, 0.12));
+  border-radius: 8px;
+  background: var(--background-color, #ffffff);
+}
+
+.emptyStateIconWrap {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emptyStateIcon {
+  width: 18px;
+  height: 18px;
+  opacity: 0.7;
+}
+
+.emptyStateText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.emptyStateTitle {
+  font-size: var(--bit-p-xs, 13px);
+  font-weight: 600;
+  color: var(--on-background-color, #222222);
+}
+
+.emptyStateSubtitle {
+  font-size: var(--bit-p-xxs, 12px);
+  color: var(--on-background-color, #222222);
+  opacity: 0.7;
+}

package/ui/compositions-panel/live-controls-diff-panel.tsx

@@ -0,0 +1,206 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  DiffControlsModel,
+  useLiveControls,
+  type ControlWithSource,
+} from '@teambit/compositions.ui.composition-live-controls';
+import { LineSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import classNames from 'classnames';
+import { getInputComponent } from './live-control-input';
+
+import styles from './live-controls-diff-panel.module.scss';
+
+type PanelStatus = 'loading' | 'available' | 'empty';
+const WAIT_FOR_CONTROLS_MS = 1200;
+
+export type LiveControlsDiffPanelProps = {
+  resetKey?: string;
+  baseChannel?: string;
+  compareChannel?: string;
+  commonLabel?: string;
+  baseLabel?: string;
+  compareLabel?: string;
+  showEmptyState?: boolean;
+  onStatusChange?: (status: PanelStatus) => void;
+};
+
+export function LiveControlsDiffPanel({
+  resetKey,
+  baseChannel,
+  compareChannel,
+  commonLabel = 'Common',
+  baseLabel = 'Base',
+  compareLabel = 'Compare',
+  showEmptyState = true,
+  onStatusChange,
+}: LiveControlsDiffPanelProps) {
+  const lastResetKeyRef = useRef<string | null>(null);
+  const [isWaitingForFreshData, setIsWaitingForFreshData] = useState(true);
+  const waitTimeoutRef = useRef<number | null>(null);
+  const currentKey = `${baseChannel || ''}-${compareChannel || ''}-${resetKey || ''}`;
+
+  const model = useMemo(() => new DiffControlsModel(baseChannel, compareChannel), [baseChannel, compareChannel]);
+
+  const allChannels = useMemo(() => {
+    const channels = [model.baseChannel, model.compareChannel];
+    if (!channels.includes('default')) channels.push('default');
+    return [...new Set(channels)];
+  }, [model.baseChannel, model.compareChannel]);
+
+  const combined = useLiveControls(allChannels);
+  const { ready: combinedReady, setTimestamp } = combined;
+
+  useEffect(() => {
+    if (lastResetKeyRef.current !== currentKey) {
+      lastResetKeyRef.current = currentKey;
+      setIsWaitingForFreshData(true);
+      setTimestamp(0);
+    }
+  }, [currentKey, setTimestamp]);
+
+  const channelsReady = Boolean(baseChannel && compareChannel);
+  const registryReady = combinedReady || model.isReady;
+  const controls = model.controls;
+  const hasControls = controls.length > 0;
+  const hasSubscribers = model.hasSubscribers;
+
+  const prevRegistryReady = useRef(registryReady);
+  useEffect(() => {
+    if (registryReady && !prevRegistryReady.current && isWaitingForFreshData) {
+      setIsWaitingForFreshData(false);
+    }
+    prevRegistryReady.current = registryReady;
+  }, [registryReady, isWaitingForFreshData]);
+
+  useEffect(() => {
+    if (!channelsReady || registryReady || !isWaitingForFreshData) {
+      if (waitTimeoutRef.current !== null) {
+        window.clearTimeout(waitTimeoutRef.current);
+        waitTimeoutRef.current = null;
+      }
+      return;
+    }
+
+    waitTimeoutRef.current = window.setTimeout(() => {
+      setIsWaitingForFreshData(false);
+      waitTimeoutRef.current = null;
+    }, WAIT_FOR_CONTROLS_MS);
+
+    return () => {
+      if (waitTimeoutRef.current !== null) {
+        window.clearTimeout(waitTimeoutRef.current);
+        waitTimeoutRef.current = null;
+      }
+    };
+  }, [channelsReady, registryReady, isWaitingForFreshData, currentKey]);
+
+  const status: PanelStatus = useMemo(() => {
+    if (!channelsReady) return 'empty';
+    if (isWaitingForFreshData) return 'loading';
+    if (!registryReady && !hasSubscribers) return 'empty';
+    return hasControls ? 'available' : 'empty';
+  }, [channelsReady, isWaitingForFreshData, registryReady, hasSubscribers, hasControls]);
+
+  useEffect(() => {
+    onStatusChange?.(status);
+  }, [status, onStatusChange]);
+
+  const handleChange = useCallback(
+    (control: ControlWithSource, value: any) => {
+      model.updateControl(control.id, value, control.source);
+    },
+    [model]
+  );
+
+  if (status === 'loading') {
+    return (
+      <div className={styles.loader}>
+        <LineSkeleton width="68px" />
+        <LineSkeleton width="52px" />
+        <LineSkeleton width="72px" />
+      </div>
+    );
+  }
+
+  if (status === 'empty') {
+    if (!showEmptyState) return null;
+    return (
+      <div className={styles.emptyState}>
+        <div className={styles.emptyStateIconWrap}>
+          <Icon of="scan-component" className={styles.emptyStateIcon} aria-hidden />
+        </div>
+        <div className={styles.emptyStateText}>
+          <div className={styles.emptyStateTitle}>No live controls</div>
+          <div className={styles.emptyStateSubtitle}>This composition does not expose live controls.</div>
+        </div>
+      </div>
+    );
+  }
+
+  const commonControls = controls.filter((c) => c.source === 'common');
+  const baseControls = controls.filter((c) => c.source === 'base');
+  const compareControls = controls.filter((c) => c.source === 'compare');
+  const hasBaseOrCompare = baseControls.length > 0 || compareControls.length > 0;
+  const hasBaseAndCompare = baseControls.length > 0 && compareControls.length > 0;
+
+  const getControlValue = (control: ControlWithSource) => {
+    return model.getValueForControl(control.id, control.source);
+  };
+
+  const renderControlList = (list: ControlWithSource[]) => (
+    <ul className={styles.controlsList}>
+      {list.map((control) => {
+        const inputType = control.input || 'text';
+        const isWideControl = inputType === 'longtext' || inputType === 'multiselect' || inputType === 'json';
+        const InputComponent = getInputComponent(inputType);
+        const key = `${control.id}-${control.source}`;
+        const value = getControlValue(control);
+        return (
+          <li key={key} className={classNames(styles.controlRow, isWideControl && styles.controlRowWide)}>
+            <div className={styles.controlMain}>
+              <div className={styles.controlLabel}>
+                <label htmlFor={`control-${key}`}>{control.label || control.id}</label>
+              </div>
+              <div className={styles.controlInput}>
+                <InputComponent
+                  id={`control-${key}`}
+                  value={value}
+                  onChange={(val: any) => handleChange(control, val)}
+                  meta={control}
+                />
+              </div>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.columnsLayout}>
+        {commonControls.length > 0 && (
+          <div className={styles.column}>
+            <div className={styles.columnHeader}>{commonLabel}</div>
+            {renderControlList(commonControls)}
+          </div>
+        )}
+        {commonControls.length > 0 && hasBaseOrCompare && <div className={styles.columnDivider} />}
+        {baseControls.length > 0 && (
+          <div className={styles.column}>
+            <div className={styles.columnHeader}>{baseLabel}</div>
+            {renderControlList(baseControls)}
+          </div>
+        )}
+        {hasBaseAndCompare && <div className={styles.columnDivider} />}
+        {compareControls.length > 0 && (
+          <div className={styles.column}>
+            <div className={styles.columnHeader}>{compareLabel}</div>
+            {renderControlList(compareControls)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/compositions-panel/live-controls-renderer.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LiveControls } from './live-control-panel';
+import { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';
+
+export function LiveControlsRenderer() {
+  const { hasLiveControls, ready, defs, values, onChange } = useLiveControls();
+
+  if (!hasLiveControls) return null;
+
+  if (!ready) {
+    return <div style={{ padding: 12, opacity: 0.7 }}>No live controls available.</div>;
+  }
+
+  return <LiveControls defs={defs} values={values} onChange={onChange} />;
+}

package/ui/index.ts

@@ -1 +1,5 @@
 export { ComponentComposition } from './composition-preview';
+export { LiveControls } from './compositions-panel/live-control-panel';
+export { LiveControlsDiffPanel } from './compositions-panel/live-controls-diff-panel';
+export type { LiveControlsDiffPanelProps } from './compositions-panel/live-controls-diff-panel';
+export { LiveControlsRenderer } from './compositions-panel/live-controls-renderer';