@teambit/compositions 1.0.634 → 1.0.636

package/dist/{preview-1750303247971.js → preview-1750476014510.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.634/dist/compositions.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.634/dist/compositions.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.636/dist/compositions.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.636/dist/compositions.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

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

@@ -171,7 +171,8 @@ function ColorInput({
   }, /*#__PURE__*/_react().default.createElement(_designUiInput().ColorPicker, {
     id: id,
     value: inputValue,
-    onColorSelect: handleChange
+    onColorSelect: handleChange,
+    allowCustomColor: true
   }));
 }
 function DateInput({

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

@@ -1 +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":"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","ignoreList":[]}
+{"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","allowCustomColor","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} allowCustomColor />\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":"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","ignoreList":[]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.634",
+  "version": "1.0.636",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.634"
+    "version": "1.0.636"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -42,27 +42,27 @@
     "@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.634",
+    "@teambit/design.ui.input.color-picker": "0.0.55",
+    "@teambit/component": "1.0.636",
     "@teambit/compositions.model.composition-id": "0.0.505",
-    "@teambit/graphql": "1.0.634",
-    "@teambit/cli": "0.0.1211",
+    "@teambit/graphql": "1.0.636",
+    "@teambit/cli": "0.0.1213",
     "@teambit/component.sources": "0.0.104",
-    "@teambit/dev-files": "1.0.634",
-    "@teambit/envs": "1.0.634",
+    "@teambit/dev-files": "1.0.636",
+    "@teambit/envs": "1.0.636",
     "@teambit/legacy.consumer-component": "0.0.53",
-    "@teambit/preview": "1.0.634",
-    "@teambit/schema": "1.0.634",
-    "@teambit/scope": "1.0.634",
+    "@teambit/preview": "1.0.636",
+    "@teambit/schema": "1.0.636",
+    "@teambit/scope": "1.0.636",
     "@teambit/toolbox.path.match-patterns": "0.0.19",
-    "@teambit/workspace": "1.0.634",
+    "@teambit/workspace": "1.0.636",
     "@teambit/design.ui.tooltip": "0.0.375",
     "@teambit/docs.ui.queries.get-docs": "0.0.509",
-    "@teambit/panels": "0.0.1213",
+    "@teambit/panels": "0.0.1215",
     "@teambit/preview.ui.component-preview": "1.0.24",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.227",
-    "@teambit/component-compare": "1.0.634",
-    "@teambit/ui": "1.0.634",
+    "@teambit/component-compare": "1.0.636",
+    "@teambit/ui": "1.0.636",
     "@teambit/workspace.ui.use-workspace-mode": "0.0.2"
   },
   "devDependencies": {

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

@@ -88,7 +88,7 @@ function ColorInput({ id, value, onChange }: InputComponentProps) {
   };
   return (
     <p className={classNames(styles.wrapper)}>
-      <ColorPicker id={id} value={inputValue} onColorSelect={handleChange} />
+      <ColorPicker id={id} value={inputValue} onColorSelect={handleChange} allowCustomColor />
     </p>
   );
 }