@teambit/compositions 1.0.631 → 1.0.632

package/dist/ui/compositions-panel/live-control-input.js

@@ -0,0 +1,268 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInputComponent = getInputComponent;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function () {
+    return data;
+  };
+  return data;
+}
+function _designInputs() {
+  const data = require("@teambit/design.inputs.input-text");
+  _designInputs = function () {
+    return data;
+  };
+  return data;
+}
+function _designInputs2() {
+  const data = require("@teambit/design.inputs.text-area");
+  _designInputs2 = function () {
+    return data;
+  };
+  return data;
+}
+function _designInputs3() {
+  const data = require("@teambit/design.inputs.dropdown");
+  _designInputs3 = function () {
+    return data;
+  };
+  return data;
+}
+function _designInputsSelectors() {
+  const data = require("@teambit/design.inputs.selectors.menu-item");
+  _designInputsSelectors = function () {
+    return data;
+  };
+  return data;
+}
+function _designUiInput() {
+  const data = require("@teambit/design.ui.input.color-picker");
+  _designUiInput = function () {
+    return data;
+  };
+  return data;
+}
+function _designInputs4() {
+  const data = require("@teambit/design.inputs.date-picker");
+  _designInputs4 = function () {
+    return data;
+  };
+  return data;
+}
+function _designInputs5() {
+  const data = require("@teambit/design.inputs.toggle-switch");
+  _designInputs5 = function () {
+    return data;
+  };
+  return data;
+}
+function _liveControlInputModule() {
+  const data = _interopRequireDefault(require("./live-control-input.module.scss"));
+  _liveControlInputModule = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ShortTextInput({
+  id,
+  value,
+  onChange
+}) {
+  const [inputValue, setInputValue] = _react().default.useState(value);
+  const handleChange = e => {
+    const newValue = e.target.value;
+    onChange(newValue);
+    setInputValue(newValue);
+  };
+  return /*#__PURE__*/_react().default.createElement(_designInputs().InputText, {
+    id: id,
+    value: inputValue,
+    onChange: handleChange
+  });
+}
+function LongTextInput({
+  id,
+  value,
+  onChange
+}) {
+  const [inputValue, setInputValue] = _react().default.useState(value);
+  const handleChange = e => {
+    const newValue = e.target.value;
+    onChange(newValue);
+    setInputValue(newValue);
+  };
+  return /*#__PURE__*/_react().default.createElement(_designInputs2().TextArea, {
+    id: id,
+    value: inputValue,
+    onChange: handleChange
+  });
+}
+function SelectInput({
+  id,
+  value,
+  onChange,
+  meta
+}) {
+  const [selectedValue, setSelectedValue] = _react().default.useState(value);
+  const handleChange = newValue => {
+    onChange(newValue);
+    setSelectedValue(newValue);
+  };
+  const placeholderContent = meta.options.find(o => o.value === selectedValue)?.label;
+  return /*#__PURE__*/_react().default.createElement("p", {
+    className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
+  }, /*#__PURE__*/_react().default.createElement(_designInputs3().Dropdown, {
+    id: id,
+    placeholderContent: placeholderContent
+  }, meta.options.map(option => /*#__PURE__*/_react().default.createElement(_designInputsSelectors().MenuItem, {
+    active: option.value === selectedValue,
+    key: option.value,
+    onClick: () => handleChange(option.value)
+  }, option.label))));
+}
+function NumberInput({
+  id,
+  value,
+  onChange
+}) {
+  const [inputValue, setInputValue] = _react().default.useState(value);
+  const handleChange = e => {
+    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 /*#__PURE__*/_react().default.createElement(_designInputs().InputText, {
+    id: id,
+    type: "number",
+    value: inputValue,
+    onChange: handleChange
+  });
+}
+function ColorInput({
+  id,
+  value,
+  onChange
+}) {
+  const [inputValue, setInputValue] = _react().default.useState(value);
+  const handleChange = newValue => {
+    onChange(newValue);
+    setInputValue(newValue);
+  };
+  return /*#__PURE__*/_react().default.createElement("p", {
+    className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
+  }, /*#__PURE__*/_react().default.createElement(_designUiInput().ColorPicker, {
+    id: id,
+    value: inputValue,
+    onColorSelect: handleChange
+  }));
+}
+function DateInput({
+  id,
+  value,
+  onChange
+}) {
+  const [inputValue, setInputValue] = _react().default.useState(new Date(value));
+  const handleChange = newValue => {
+    if (newValue) {
+      onChange(newValue.toISOString().split('T')[0]);
+    }
+    setInputValue(newValue);
+  };
+  return /*#__PURE__*/_react().default.createElement("p", {
+    className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
+  }, /*#__PURE__*/_react().default.createElement(_designInputs4().DatePicker, {
+    id: id,
+    date: inputValue,
+    onChange: handleChange
+  }));
+}
+function ToggleInput({
+  id,
+  value,
+  onChange
+}) {
+  const [isChecked, setIsChecked] = _react().default.useState(value);
+  const handleChange = () => {
+    setIsChecked(!isChecked);
+    onChange(!isChecked);
+  };
+  return /*#__PURE__*/_react().default.createElement("p", {
+    className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
+  }, /*#__PURE__*/_react().default.createElement(_designInputs5().Toggle, {
+    id: id,
+    defaultChecked: isChecked,
+    onChange: handleChange
+  }));
+}
+function JsonInput({
+  id,
+  value,
+  onChange
+}) {
+  const [inputValue, setInputValue] = _react().default.useState(JSON.stringify(value, null, 2));
+  const [message, setMessage] = _react().default.useState('');
+  const handleChange = e => {
+    const newValue = e.target.value;
+    try {
+      const parsedValue = JSON.parse(newValue);
+      onChange(parsedValue);
+      setMessage('');
+    } catch {
+      setMessage('Invalid JSON');
+    }
+    setInputValue(newValue);
+  };
+  return /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(_designInputs2().TextArea, {
+    id: id,
+    value: inputValue,
+    onChange: handleChange
+  }), message && /*#__PURE__*/_react().default.createElement("div", {
+    style: {
+      color: 'red'
+    }
+  }, message));
+}
+function getInputComponent(type) {
+  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;
+  }
+}
+
+//# sourceMappingURL=live-control-input.js.map

package/dist/ui/compositions-panel/live-control-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_designInputs","_designInputs2","_designInputs3","_designInputsSelectors","_designUiInput","_designInputs4","_designInputs5","_liveControlInputModule","e","__esModule","default","ShortTextInput","id","value","onChange","inputValue","setInputValue","React","useState","handleChange","newValue","target","createElement","InputText","LongTextInput","TextArea","SelectInput","meta","selectedValue","setSelectedValue","placeholderContent","options","find","o","label","className","classNames","styles","wrapper","Dropdown","map","option","MenuItem","active","key","onClick","NumberInput","isNaN","Number","console","error","type","ColorInput","ColorPicker","onColorSelect","DateInput","Date","toISOString","split","DatePicker","date","ToggleInput","isChecked","setIsChecked","Toggle","defaultChecked","JsonInput","JSON","stringify","message","setMessage","parsedValue","parse","style","color","getInputComponent","warn"],"sources":["live-control-input.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport { InputText } from '@teambit/design.inputs.input-text';\nimport { TextArea } from '@teambit/design.inputs.text-area';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { MenuItem } from '@teambit/design.inputs.selectors.menu-item';\nimport { ColorPicker } from '@teambit/design.ui.input.color-picker';\nimport { DatePicker } from '@teambit/design.inputs.date-picker';\nimport { Toggle } from '@teambit/design.inputs.toggle-switch';\n\nimport styles from './live-control-input.module.scss';\n\ntype InputComponentProps = {\n  id: string;\n  value: any;\n  onChange: (value: any) => void;\n  meta?: any;\n};\n\ntype InputComponent = React.FC<InputComponentProps>;\n\nfunction ShortTextInput({ id, value, onChange }: InputComponentProps) {\n  const [inputValue, setInputValue] = React.useState(value);\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    onChange(newValue);\n    setInputValue(newValue);\n  };\n  return <InputText id={id} value={inputValue} onChange={handleChange} />;\n}\n\nfunction LongTextInput({ id, value, onChange }: InputComponentProps) {\n  const [inputValue, setInputValue] = React.useState(value);\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = e.target.value;\n    onChange(newValue);\n    setInputValue(newValue);\n  };\n  return <TextArea id={id} value={inputValue} onChange={handleChange} />;\n}\n\nfunction SelectInput({ id, value, onChange, meta }: InputComponentProps) {\n  const [selectedValue, setSelectedValue] = React.useState(value);\n  const handleChange = (newValue: any) => {\n    onChange(newValue);\n    setSelectedValue(newValue);\n  };\n  const placeholderContent = meta.options.find((o: any) => o.value === selectedValue)?.label;\n  return (\n    <p className={classNames(styles.wrapper)}>\n      <Dropdown id={id} placeholderContent={placeholderContent}>\n        {meta.options.map((option: any) => (\n          <MenuItem\n            active={option.value === selectedValue}\n            key={option.value}\n            onClick={() => handleChange(option.value)}\n          >\n            {option.label}\n          </MenuItem>\n        ))}\n      </Dropdown>\n    </p>\n  );\n}\n\nfunction NumberInput({ id, value, onChange }: InputComponentProps) {\n  const [inputValue, setInputValue] = React.useState(value);\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    if (!isNaN(Number(newValue))) {\n      onChange(Number(newValue));\n      setInputValue(Number(newValue));\n    } else {\n      // TODO: render error message\n      // eslint-disable-next-line no-console\n      console.error('Invalid number input', newValue);\n    }\n  };\n  return <InputText id={id} type=\"number\" value={inputValue} onChange={handleChange} />;\n}\n\nfunction ColorInput({ id, value, onChange }: InputComponentProps) {\n  const [inputValue, setInputValue] = React.useState(value);\n  const handleChange = (newValue: string) => {\n    onChange(newValue);\n    setInputValue(newValue);\n  };\n  return (\n    <p className={classNames(styles.wrapper)}>\n      <ColorPicker id={id} value={inputValue} onColorSelect={handleChange} />\n    </p>\n  );\n}\n\nfunction DateInput({ id, value, onChange }: InputComponentProps) {\n  const [inputValue, setInputValue] = React.useState<Date | null>(new Date(value));\n  const handleChange = (newValue: Date | null) => {\n    if (newValue) {\n      onChange(newValue.toISOString().split('T')[0]);\n    }\n    setInputValue(newValue);\n  };\n  return (\n    <p className={classNames(styles.wrapper)}>\n      <DatePicker id={id} date={inputValue} onChange={handleChange} />\n    </p>\n  );\n}\n\nfunction ToggleInput({ id, value, onChange }: InputComponentProps) {\n  const [isChecked, setIsChecked] = React.useState(value);\n  const handleChange = () => {\n    setIsChecked(!isChecked);\n    onChange(!isChecked);\n  };\n  return (\n    <p className={classNames(styles.wrapper)}>\n      <Toggle id={id} defaultChecked={isChecked} onChange={handleChange} />\n    </p>\n  );\n}\n\nfunction JsonInput({ id, value, onChange }: InputComponentProps) {\n  const [inputValue, setInputValue] = React.useState(JSON.stringify(value, null, 2));\n  const [message, setMessage] = React.useState('');\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = e.target.value;\n    try {\n      const parsedValue = JSON.parse(newValue);\n      onChange(parsedValue);\n      setMessage('');\n    } catch {\n      setMessage('Invalid JSON');\n    }\n    setInputValue(newValue);\n  };\n  return (\n    <div>\n      <TextArea id={id} value={inputValue} onChange={handleChange} />\n      {message && <div style={{ color: 'red' }}>{message}</div>}\n    </div>\n  );\n}\n\nexport function getInputComponent(type: string): InputComponent {\n  switch (type) {\n    case 'text':\n      return ShortTextInput;\n    case 'longtext':\n      return LongTextInput;\n    case 'select':\n      return SelectInput;\n    case 'number':\n      return NumberInput;\n    case 'color':\n      return ColorInput;\n    case 'date':\n      return DateInput;\n    case 'boolean':\n      return ToggleInput;\n    case 'json':\n      return JsonInput;\n    default:\n      // eslint-disable-next-line no-console\n      console.warn(`Unknown input type: ${type}`);\n      return ShortTextInput;\n  }\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAI,cAAA;EAAA,MAAAJ,IAAA,GAAAE,OAAA;EAAAE,aAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,eAAA;EAAA,MAAAL,IAAA,GAAAE,OAAA;EAAAG,cAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAM,eAAA;EAAA,MAAAN,IAAA,GAAAE,OAAA;EAAAI,cAAA,YAAAA,CAAA;IAAA,OAAAN,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAO,uBAAA;EAAA,MAAAP,IAAA,GAAAE,OAAA;EAAAK,sBAAA,YAAAA,CAAA;IAAA,OAAAP,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAQ,eAAA;EAAA,MAAAR,IAAA,GAAAE,OAAA;EAAAM,cAAA,YAAAA,CAAA;IAAA,OAAAR,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAS,eAAA;EAAA,MAAAT,IAAA,GAAAE,OAAA;EAAAO,cAAA,YAAAA,CAAA;IAAA,OAAAT,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAU,eAAA;EAAA,MAAAV,IAAA,GAAAE,OAAA;EAAAQ,cAAA,YAAAA,CAAA;IAAA,OAAAV,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAW,wBAAA;EAAA,MAAAX,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAS,uBAAA,YAAAA,CAAA;IAAA,OAAAX,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAsD,SAAAC,uBAAAW,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAWtD,SAASG,cAAcA,CAAC;EAAEC,EAAE;EAAEC,KAAK;EAAEC;AAA8B,CAAC,EAAE;EACpE,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAACL,KAAK,CAAC;EACzD,MAAMM,YAAY,GAAIX,CAAsC,IAAK;IAC/D,MAAMY,QAAQ,GAAGZ,CAAC,CAACa,MAAM,CAACR,KAAK;IAC/BC,QAAQ,CAACM,QAAQ,CAAC;IAClBJ,aAAa,CAACI,QAAQ,CAAC;EACzB,CAAC;EACD,oBAAOzB,MAAA,GAAAe,OAAA,CAAAY,aAAA,CAACtB,aAAA,GAAAuB,SAAS;IAACX,EAAE,EAAEA,EAAG;IAACC,KAAK,EAAEE,UAAW;IAACD,QAAQ,EAAEK;EAAa,CAAE,CAAC;AACzE;AAEA,SAASK,aAAaA,CAAC;EAAEZ,EAAE;EAAEC,KAAK;EAAEC;AAA8B,CAAC,EAAE;EACnE,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAACL,KAAK,CAAC;EACzD,MAAMM,YAAY,GAAIX,CAAyC,IAAK;IAClE,MAAMY,QAAQ,GAAGZ,CAAC,CAACa,MAAM,CAACR,KAAK;IAC/BC,QAAQ,CAACM,QAAQ,CAAC;IAClBJ,aAAa,CAACI,QAAQ,CAAC;EACzB,CAAC;EACD,oBAAOzB,MAAA,GAAAe,OAAA,CAAAY,aAAA,CAACrB,cAAA,GAAAwB,QAAQ;IAACb,EAAE,EAAEA,EAAG;IAACC,KAAK,EAAEE,UAAW;IAACD,QAAQ,EAAEK;EAAa,CAAE,CAAC;AACxE;AAEA,SAASO,WAAWA,CAAC;EAAEd,EAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEa;AAA0B,CAAC,EAAE;EACvE,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGZ,gBAAK,CAACC,QAAQ,CAACL,KAAK,CAAC;EAC/D,MAAMM,YAAY,GAAIC,QAAa,IAAK;IACtCN,QAAQ,CAACM,QAAQ,CAAC;IAClBS,gBAAgB,CAACT,QAAQ,CAAC;EAC5B,CAAC;EACD,MAAMU,kBAAkB,GAAGH,IAAI,CAACI,OAAO,CAACC,IAAI,CAAEC,CAAM,IAAKA,CAAC,CAACpB,KAAK,KAAKe,aAAa,CAAC,EAAEM,KAAK;EAC1F,oBACEvC,MAAA,GAAAe,OAAA,CAAAY,aAAA;IAAGa,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACC,OAAO;EAAE,gBACvC3C,MAAA,GAAAe,OAAA,CAAAY,aAAA,CAACpB,cAAA,GAAAqC,QAAQ;IAAC3B,EAAE,EAAEA,EAAG;IAACkB,kBAAkB,EAAEA;EAAmB,GACtDH,IAAI,CAACI,OAAO,CAACS,GAAG,CAAEC,MAAW,iBAC5B9C,MAAA,GAAAe,OAAA,CAAAY,aAAA,CAACnB,sBAAA,GAAAuC,QAAQ;IACPC,MAAM,EAAEF,MAAM,CAAC5B,KAAK,KAAKe,aAAc;IACvCgB,GAAG,EAAEH,MAAM,CAAC5B,KAAM;IAClBgC,OAAO,EAAEA,CAAA,KAAM1B,YAAY,CAACsB,MAAM,CAAC5B,KAAK;EAAE,GAEzC4B,MAAM,CAACP,KACA,CACX,CACO,CACT,CAAC;AAER;AAEA,SAASY,WAAWA,CAAC;EAAElC,EAAE;EAAEC,KAAK;EAAEC;AAA8B,CAAC,EAAE;EACjE,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAACL,KAAK,CAAC;EACzD,MAAMM,YAAY,GAAIX,CAAsC,IAAK;IAC/D,MAAMY,QAAQ,GAAGZ,CAAC,CAACa,MAAM,CAACR,KAAK;IAC/B,IAAI,CAACkC,KAAK,CAACC,MAAM,CAAC5B,QAAQ,CAAC,CAAC,EAAE;MAC5BN,QAAQ,CAACkC,MAAM,CAAC5B,QAAQ,CAAC,CAAC;MAC1BJ,aAAa,CAACgC,MAAM,CAAC5B,QAAQ,CAAC,CAAC;IACjC,CAAC,MAAM;MACL;MACA;MACA6B,OAAO,CAACC,KAAK,CAAC,sBAAsB,EAAE9B,QAAQ,CAAC;IACjD;EACF,CAAC;EACD,oBAAOzB,MAAA,GAAAe,OAAA,CAAAY,aAAA,CAACtB,aAAA,GAAAuB,SAAS;IAACX,EAAE,EAAEA,EAAG;IAACuC,IAAI,EAAC,QAAQ;IAACtC,KAAK,EAAEE,UAAW;IAACD,QAAQ,EAAEK;EAAa,CAAE,CAAC;AACvF;AAEA,SAASiC,UAAUA,CAAC;EAAExC,EAAE;EAAEC,KAAK;EAAEC;AAA8B,CAAC,EAAE;EAChE,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAACL,KAAK,CAAC;EACzD,MAAMM,YAAY,GAAIC,QAAgB,IAAK;IACzCN,QAAQ,CAACM,QAAQ,CAAC;IAClBJ,aAAa,CAACI,QAAQ,CAAC;EACzB,CAAC;EACD,oBACEzB,MAAA,GAAAe,OAAA,CAAAY,aAAA;IAAGa,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACC,OAAO;EAAE,gBACvC3C,MAAA,GAAAe,OAAA,CAAAY,aAAA,CAAClB,cAAA,GAAAiD,WAAW;IAACzC,EAAE,EAAEA,EAAG;IAACC,KAAK,EAAEE,UAAW;IAACuC,aAAa,EAAEnC;EAAa,CAAE,CACrE,CAAC;AAER;AAEA,SAASoC,SAASA,CAAC;EAAE3C,EAAE;EAAEC,KAAK;EAAEC;AAA8B,CAAC,EAAE;EAC/D,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAAc,IAAIsC,IAAI,CAAC3C,KAAK,CAAC,CAAC;EAChF,MAAMM,YAAY,GAAIC,QAAqB,IAAK;IAC9C,IAAIA,QAAQ,EAAE;MACZN,QAAQ,CAACM,QAAQ,CAACqC,WAAW,CAAC,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD;IACA1C,aAAa,CAACI,QAAQ,CAAC;EACzB,CAAC;EACD,oBACEzB,MAAA,GAAAe,OAAA,CAAAY,aAAA;IAAGa,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACC,OAAO;EAAE,gBACvC3C,MAAA,GAAAe,OAAA,CAAAY,aAAA,CAACjB,cAAA,GAAAsD,UAAU;IAAC/C,EAAE,EAAEA,EAAG;IAACgD,IAAI,EAAE7C,UAAW;IAACD,QAAQ,EAAEK;EAAa,CAAE,CAC9D,CAAC;AAER;AAEA,SAAS0C,WAAWA,CAAC;EAAEjD,EAAE;EAAEC,KAAK;EAAEC;AAA8B,CAAC,EAAE;EACjE,MAAM,CAACgD,SAAS,EAAEC,YAAY,CAAC,GAAG9C,gBAAK,CAACC,QAAQ,CAACL,KAAK,CAAC;EACvD,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACzB4C,YAAY,CAAC,CAACD,SAAS,CAAC;IACxBhD,QAAQ,CAAC,CAACgD,SAAS,CAAC;EACtB,CAAC;EACD,oBACEnE,MAAA,GAAAe,OAAA,CAAAY,aAAA;IAAGa,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACC,OAAO;EAAE,gBACvC3C,MAAA,GAAAe,OAAA,CAAAY,aAAA,CAAChB,cAAA,GAAA0D,MAAM;IAACpD,EAAE,EAAEA,EAAG;IAACqD,cAAc,EAAEH,SAAU;IAAChD,QAAQ,EAAEK;EAAa,CAAE,CACnE,CAAC;AAER;AAEA,SAAS+C,SAASA,CAAC;EAAEtD,EAAE;EAAEC,KAAK;EAAEC;AAA8B,CAAC,EAAE;EAC/D,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,gBAAK,CAACC,QAAQ,CAACiD,IAAI,CAACC,SAAS,CAACvD,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;EAClF,MAAM,CAACwD,OAAO,EAAEC,UAAU,CAAC,GAAGrD,gBAAK,CAACC,QAAQ,CAAC,EAAE,CAAC;EAChD,MAAMC,YAAY,GAAIX,CAAyC,IAAK;IAClE,MAAMY,QAAQ,GAAGZ,CAAC,CAACa,MAAM,CAACR,KAAK;IAC/B,IAAI;MACF,MAAM0D,WAAW,GAAGJ,IAAI,CAACK,KAAK,CAACpD,QAAQ,CAAC;MACxCN,QAAQ,CAACyD,WAAW,CAAC;MACrBD,UAAU,CAAC,EAAE,CAAC;IAChB,CAAC,CAAC,MAAM;MACNA,UAAU,CAAC,cAAc,CAAC;IAC5B;IACAtD,aAAa,CAACI,QAAQ,CAAC;EACzB,CAAC;EACD,oBACEzB,MAAA,GAAAe,OAAA,CAAAY,aAAA,2BACE3B,MAAA,GAAAe,OAAA,CAAAY,aAAA,CAACrB,cAAA,GAAAwB,QAAQ;IAACb,EAAE,EAAEA,EAAG;IAACC,KAAK,EAAEE,UAAW;IAACD,QAAQ,EAAEK;EAAa,CAAE,CAAC,EAC9DkD,OAAO,iBAAI1E,MAAA,GAAAe,OAAA,CAAAY,aAAA;IAAKmD,KAAK,EAAE;MAAEC,KAAK,EAAE;IAAM;EAAE,GAAEL,OAAa,CACrD,CAAC;AAEV;AAEO,SAASM,iBAAiBA,CAACxB,IAAY,EAAkB;EAC9D,QAAQA,IAAI;IACV,KAAK,MAAM;MACT,OAAOxC,cAAc;IACvB,KAAK,UAAU;MACb,OAAOa,aAAa;IACtB,KAAK,QAAQ;MACX,OAAOE,WAAW;IACpB,KAAK,QAAQ;MACX,OAAOoB,WAAW;IACpB,KAAK,OAAO;MACV,OAAOM,UAAU;IACnB,KAAK,MAAM;MACT,OAAOG,SAAS;IAClB,KAAK,SAAS;MACZ,OAAOM,WAAW;IACpB,KAAK,MAAM;MACT,OAAOK,SAAS;IAClB;MACE;MACAjB,OAAO,CAAC2B,IAAI,CAAC,uBAAuBzB,IAAI,EAAE,CAAC;MAC3C,OAAOxC,cAAc;EACzB;AACF","ignoreList":[]}

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

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

package/dist/ui/compositions-panel/live-control-panel.d.ts

@@ -0,0 +1,6 @@
+import { type Control } from '@teambit/compositions.ui.composition-live-controls';
+export declare function LiveControls({ defs, values, onChange, }: {
+    defs: Array<Control>;
+    values: Record<string, any>;
+    onChange: (key: string, value: any) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/compositions-panel/live-control-panel.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LiveControls = LiveControls;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function () {
+    return data;
+  };
+  return data;
+}
+function _liveControlPanelModule() {
+  const data = _interopRequireDefault(require("./live-control-panel.module.scss"));
+  _liveControlPanelModule = function () {
+    return data;
+  };
+  return data;
+}
+function _liveControlInput() {
+  const data = require("./live-control-input");
+  _liveControlInput = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function LiveControls({
+  defs,
+  values,
+  onChange
+}) {
+  return /*#__PURE__*/_react().default.createElement("ul", {
+    className: (0, _classnames().default)(_liveControlPanelModule().default.container)
+  }, defs.map(field => {
+    const key = field.id;
+    const InputComponent = (0, _liveControlInput().getInputComponent)(field.input || 'text');
+    return /*#__PURE__*/_react().default.createElement("li", {
+      key: key,
+      className: (0, _classnames().default)(_liveControlPanelModule().default.item)
+    }, /*#__PURE__*/_react().default.createElement("div", {
+      className: (0, _classnames().default)(_liveControlPanelModule().default.label)
+    }, /*#__PURE__*/_react().default.createElement("label", {
+      htmlFor: `control-${key}`
+    }, field.label || field.id)), /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(InputComponent, {
+      id: `control-${key}`,
+      value: values[key],
+      onChange: v => onChange(key, v),
+      meta: field
+    })));
+  }));
+}
+
+//# sourceMappingURL=live-control-panel.js.map

package/dist/ui/compositions-panel/live-control-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_liveControlPanelModule","_liveControlInput","e","__esModule","default","LiveControls","defs","values","onChange","createElement","className","classNames","styles","container","map","field","key","id","InputComponent","getInputComponent","input","item","label","htmlFor","value","v","meta"],"sources":["live-control-panel.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { type Control } from '@teambit/compositions.ui.composition-live-controls';\n\nimport styles from './live-control-panel.module.scss';\nimport { getInputComponent } from './live-control-input';\n\nexport function LiveControls({\n  defs,\n  values,\n  onChange,\n}: {\n  defs: Array<Control>;\n  values: Record<string, any>;\n  onChange: (key: string, value: any) => void;\n}) {\n  return (\n    <ul className={classNames(styles.container)}>\n      {defs.map((field) => {\n        const key = field.id;\n        const InputComponent = getInputComponent(field.input || 'text');\n        return (\n          <li key={key} className={classNames(styles.item)}>\n            <div className={classNames(styles.label)}>\n              <label htmlFor={`control-${key}`}>{field.label || field.id}</label>\n            </div>\n            <div>\n              <InputComponent\n                id={`control-${key}`}\n                value={values[key]}\n                onChange={(v: any) => onChange(key, v)}\n                meta={field}\n              />\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGA,SAAAI,wBAAA;EAAA,MAAAJ,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAE,uBAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,kBAAA;EAAA,MAAAL,IAAA,GAAAE,OAAA;EAAAG,iBAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyD,SAAAC,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElD,SAASG,YAAYA,CAAC;EAC3BC,IAAI;EACJC,MAAM;EACNC;AAKF,CAAC,EAAE;EACD,oBACEb,MAAA,GAAAS,OAAA,CAAAK,aAAA;IAAIC,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACC,SAAS;EAAE,GACzCP,IAAI,CAACQ,GAAG,CAAEC,KAAK,IAAK;IACnB,MAAMC,GAAG,GAAGD,KAAK,CAACE,EAAE;IACpB,MAAMC,cAAc,GAAG,IAAAC,qCAAiB,EAACJ,KAAK,CAACK,KAAK,IAAI,MAAM,CAAC;IAC/D,oBACEzB,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAIO,GAAG,EAAEA,GAAI;MAACN,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACS,IAAI;IAAE,gBAC/C1B,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAKC,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACU,KAAK;IAAE,gBACvC3B,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAOc,OAAO,EAAE,WAAWP,GAAG;IAAG,GAAED,KAAK,CAACO,KAAK,IAAIP,KAAK,CAACE,EAAU,CAC/D,CAAC,eACNtB,MAAA,GAAAS,OAAA,CAAAK,aAAA,2BACEd,MAAA,GAAAS,OAAA,CAAAK,aAAA,CAACS,cAAc;MACbD,EAAE,EAAE,WAAWD,GAAG,EAAG;MACrBQ,KAAK,EAAEjB,MAAM,CAACS,GAAG,CAAE;MACnBR,QAAQ,EAAGiB,CAAM,IAAKjB,QAAQ,CAACQ,GAAG,EAAES,CAAC,CAAE;MACvCC,IAAI,EAAEX;IAAM,CACb,CACE,CACH,CAAC;EAET,CAAC,CACC,CAAC;AAET","ignoreList":[]}

package/dist/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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.631",
+  "version": "1.0.632",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.631"
+    "version": "1.0.632"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -32,28 +32,37 @@
     "@teambit/mdx.ui.mdx-layout": "1.0.11",
     "@teambit/compositions.ui.composition-compare-section": "0.0.101",
     "@teambit/compositions.ui.composition-compare": "0.0.258",
+    "@teambit/compositions.ui.composition-live-controls": "0.0.2",
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.502",
-    "@teambit/component": "1.0.631",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.518",
+    "@teambit/design.inputs.date-picker": "0.0.2",
+    "@teambit/design.inputs.dropdown": "1.3.1",
+    "@teambit/design.inputs.input-text": "1.1.2",
+    "@teambit/design.inputs.selectors.menu-item": "1.1.0",
+    "@teambit/design.inputs.text-area": "0.0.18",
+    "@teambit/design.inputs.toggle-switch": "0.0.7",
+    "@teambit/design.ui.input.color-picker": "0.0.53",
+    "@teambit/component": "1.0.632",
     "@teambit/compositions.model.composition-id": "0.0.505",
-    "@teambit/graphql": "1.0.631",
-    "@teambit/cli": "0.0.1208",
+    "@teambit/graphql": "1.0.632",
+    "@teambit/cli": "0.0.1209",
     "@teambit/component.sources": "0.0.104",
-    "@teambit/dev-files": "1.0.631",
-    "@teambit/envs": "1.0.631",
+    "@teambit/dev-files": "1.0.632",
+    "@teambit/envs": "1.0.632",
     "@teambit/legacy.consumer-component": "0.0.53",
-    "@teambit/preview": "1.0.631",
-    "@teambit/schema": "1.0.631",
-    "@teambit/scope": "1.0.631",
+    "@teambit/preview": "1.0.632",
+    "@teambit/schema": "1.0.632",
+    "@teambit/scope": "1.0.632",
     "@teambit/toolbox.path.match-patterns": "0.0.19",
-    "@teambit/workspace": "1.0.631",
+    "@teambit/workspace": "1.0.632",
     "@teambit/design.ui.tooltip": "0.0.375",
     "@teambit/docs.ui.queries.get-docs": "0.0.509",
-    "@teambit/panels": "0.0.1210",
+    "@teambit/panels": "0.0.1211",
     "@teambit/preview.ui.component-preview": "1.0.24",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.227",
-    "@teambit/component-compare": "1.0.631",
-    "@teambit/ui": "1.0.631",
+    "@teambit/component-compare": "1.0.632",
+    "@teambit/ui": "1.0.632",
     "@teambit/workspace.ui.use-workspace-mode": "0.0.2"
   },
   "devDependencies": {

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

@@ -1,3 +1,21 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.tab {
+  > div:first-child {
+    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);
+  }
+}
+
 .linkWrapper {
   padding: 0 12px;
   display: flex;
@@ -122,6 +140,10 @@
   }
 }
 
+.noLiveControls {
+  padding: 12px;
+}
+
 .tabs {
   display: flex;
   align-items: center;