@orsetra/shared-ui 1.1.38 → 1.1.40

package/components/extends/index.ts

@@ -1,6 +1,6 @@
 // Extended UI Components for Dynamic Forms
-export { default as CamelRouteCode } from './CamelRouteCode'
-export type { ProjectItem, ContentItem } from './CamelRouteCode'
+// CamelRouteCode removed - causes SSR issues with Monaco Editor
+// Use local implementation in project-manager instead
 export { default as CPUNumber } from './CPUNumber'
 export { default as ClassStorageSelect } from './ClassStorageSelect'
 export { default as ClusterSelect } from './ClusterSelect'

package/components/ui/strings-input.tsx

@@ -18,66 +18,77 @@ export function StringsInput({
   disabled = false,
   placeholder = "Enter value",
 }: StringsInputProps) {
-  const [items, setItems] = useState<string[]>(value.length > 0 ? value : [""])
+  const [items, setItems] = useState<string[]>(value.filter(v => v !== ""))
+  const [inputValue, setInputValue] = useState("")
 
   useEffect(() => {
-    if (value && value.length > 0 && JSON.stringify(value) !== JSON.stringify(items)) {
-      setItems(value)
+    const filtered = value.filter(v => v !== "")
+    if (JSON.stringify(filtered) !== JSON.stringify(items)) {
+      setItems(filtered)
     }
   }, [value])
 
-  const handleChange = (index: number, newValue: string) => {
-    const newItems = [...items]
-    newItems[index] = newValue
+  const handleRemove = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index)
     setItems(newItems)
-    onChange?.(newItems.filter(item => item !== ""))
+    onChange?.(newItems)
   }
 
   const handleAdd = () => {
-    const newItems = [...items, ""]
+    const trimmed = inputValue.trim()
+    if (!trimmed) return
+    const newItems = [...items, trimmed]
     setItems(newItems)
+    onChange?.(newItems)
+    setInputValue("")
   }
 
-  const handleRemove = (index: number) => {
-    const newItems = items.filter((_, i) => i !== index)
-    setItems(newItems.length > 0 ? newItems : [""])
-    onChange?.(newItems.filter(item => item !== ""))
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      handleAdd()
+    }
   }
 
   return (
     <div className="space-y-2">
       {items.map((item, index) => (
-        <div key={index} className="flex gap-2">
-          <Input
-            value={item}
-            onChange={(e) => handleChange(index, e.target.value)}
+        <div key={index} className="flex items-center gap-2">
+          <span className="flex-1 text-sm px-3 py-2 border border-ibm-gray-20 bg-ibm-gray-10 text-ibm-gray-100 truncate">
+            {item}
+          </span>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => handleRemove(index)}
             disabled={disabled}
-            placeholder={placeholder}
-            className="rounded-none flex-1"
-          />
-          {items.length > 1 && (
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => handleRemove(index)}
-              disabled={disabled}
-              className="rounded-none h-9 w-9 p-0"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          )}
+            className="rounded-none h-9 w-9 p-0 shrink-0"
+          >
+            <X className="h-4 w-4" />
+          </Button>
         </div>
       ))}
-      <Button
-        type="button"
-        variant="secondary"
-        onClick={handleAdd}
-        disabled={disabled}
-        className="rounded-none"
-      >
-        <Plus className="h-4 w-4 mr-2" />
-        Add Item
-      </Button>
+      <div className="flex gap-2">
+        <Input
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          placeholder={placeholder}
+          className="rounded-none flex-1"
+        />
+        <Button
+          type="button"
+          variant="secondary"
+          leftIcon={<Plus className="h-4 w-4 mr-1" />}
+          onClick={handleAdd}
+          disabled={disabled || !inputValue.trim()}
+          className="rounded-none shrink-0"
+        >
+          
+          Add
+        </Button>
+      </div>
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.1.38",
+  "version": "1.1.40",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",

package/components/DefinitionCode/theme.ts

@@ -1,271 +0,0 @@
-export default {
-  base: 'vs-dark',
-  inherit: true,
-  rules: [
-    {
-      background: '1B191A',
-      token: '',
-    },
-    {
-      foreground: '555555',
-      token: 'comment',
-    },
-    {
-      foreground: '555555',
-      token: 'comment.block',
-    },
-    {
-      foreground: 'ad9361',
-      token: 'string',
-    },
-    {
-      foreground: 'cccccc',
-      token: 'constant.numeric',
-    },
-    {
-      foreground: 'a1a1ff',
-      token: 'keyword',
-    },
-    {
-      foreground: '2f006e',
-      token: 'meta.preprocessor',
-    },
-    {
-      fontStyle: 'bold',
-      token: 'keyword.control.import',
-    },
-    {
-      foreground: 'a1a1ff',
-      token: 'support.function',
-    },
-    {
-      foreground: '0000ff',
-      token: 'declaration.function function-result',
-    },
-    {
-      fontStyle: 'bold',
-      token: 'declaration.function function-name',
-    },
-    {
-      fontStyle: 'bold',
-      token: 'declaration.function argument-name',
-    },
-    {
-      foreground: '0000ff',
-      token: 'declaration.function function-arg-type',
-    },
-    {
-      fontStyle: 'italic',
-      token: 'declaration.function function-argument',
-    },
-    {
-      fontStyle: 'underline',
-      token: 'declaration.class class-name',
-    },
-    {
-      fontStyle: 'italic underline',
-      token: 'declaration.class class-inheritance',
-    },
-    {
-      foreground: 'fff9f9',
-      background: 'ff0000',
-      fontStyle: 'bold',
-      token: 'invalid',
-    },
-    {
-      background: 'ffd0d0',
-      token: 'invalid.deprecated.trailing-whitespace',
-    },
-    {
-      fontStyle: 'italic',
-      token: 'declaration.section section-name',
-    },
-    {
-      foreground: 'c10006',
-      token: 'string.interpolation',
-    },
-    {
-      foreground: '666666',
-      token: 'string.regexp',
-    },
-    {
-      foreground: 'c1c144',
-      token: 'variable',
-    },
-    {
-      foreground: '6782d3',
-      token: 'constant',
-    },
-    {
-      foreground: 'afa472',
-      token: 'constant.character',
-    },
-    {
-      foreground: 'de8e30',
-      fontStyle: 'bold',
-      token: 'constant.language',
-    },
-    {
-      fontStyle: 'underline',
-      token: 'embedded',
-    },
-    {
-      foreground: '858ef4',
-      token: 'keyword.markup.element-name',
-    },
-    {
-      foreground: '9b456f',
-      token: 'keyword.markup.attribute-name',
-    },
-    {
-      foreground: '9b456f',
-      token: 'meta.attribute-with-value',
-    },
-    {
-      foreground: 'c82255',
-      fontStyle: 'bold',
-      token: 'keyword.exception',
-    },
-    {
-      foreground: '47b8d6',
-      token: 'keyword.operator',
-    },
-    {
-      foreground: '6969fa',
-      fontStyle: 'bold',
-      token: 'keyword.control',
-    },
-    {
-      foreground: '68685b',
-      token: 'meta.tag.preprocessor.xml',
-    },
-    {
-      foreground: '888888',
-      token: 'meta.tag.sgml.doctype',
-    },
-    {
-      fontStyle: 'italic',
-      token: 'string.quoted.docinfo.doctype.DTD',
-    },
-    {
-      foreground: '909090',
-      token: 'comment.other.server-side-include.xhtml',
-    },
-    {
-      foreground: '909090',
-      token: 'comment.other.server-side-include.html',
-    },
-    {
-      foreground: '858ef4',
-      token: 'text.html declaration.tag',
-    },
-    {
-      foreground: '858ef4',
-      token: 'text.html meta.tag',
-    },
-    {
-      foreground: '858ef4',
-      token: 'text.html entity.name.tag.xhtml',
-    },
-    {
-      foreground: '9b456f',
-      token: 'keyword.markup.attribute-name',
-    },
-    {
-      foreground: '777777',
-      token: 'keyword.other.phpdoc.php',
-    },
-    {
-      foreground: 'c82255',
-      token: 'keyword.other.include.php',
-    },
-    {
-      foreground: 'de8e20',
-      fontStyle: 'bold',
-      token: 'support.constant.core.php',
-    },
-    {
-      foreground: 'de8e10',
-      fontStyle: 'bold',
-      token: 'support.constant.std.php',
-    },
-    {
-      foreground: 'b72e1d',
-      token: 'variable.other.global.php',
-    },
-    {
-      foreground: '00ff00',
-      token: 'variable.other.global.safer.php',
-    },
-    {
-      foreground: 'bfa36d',
-      token: 'string.quoted.single.php',
-    },
-    {
-      foreground: '6969fa',
-      token: 'keyword.storage.php',
-    },
-    {
-      foreground: 'ad9361',
-      token: 'string.quoted.double.php',
-    },
-    {
-      foreground: 'ec9e00',
-      token: 'entity.other.attribute-name.id.css',
-    },
-    {
-      foreground: 'b8cd06',
-      fontStyle: 'bold',
-      token: 'entity.name.tag.css',
-    },
-    {
-      foreground: 'edca06',
-      token: 'entity.other.attribute-name.class.css',
-    },
-    {
-      foreground: '2e759c',
-      token: 'entity.other.attribute-name.pseudo-class.css',
-    },
-    {
-      foreground: 'ffffff',
-      background: 'ff0000',
-      token: 'invalid.bad-comma.css',
-    },
-    {
-      foreground: '9b2e4d',
-      token: 'support.constant.property-value.css',
-    },
-    {
-      foreground: 'e1c96b',
-      token: 'support.type.property-name.css',
-    },
-    {
-      foreground: '666633',
-      token: 'constant.other.rgb-value.css',
-    },
-    {
-      foreground: '666633',
-      token: 'support.constant.font-name.css',
-    },
-    {
-      foreground: '7171f3',
-      token: 'support.constant.tm-language-def',
-    },
-    {
-      foreground: '7171f3',
-      token: 'support.constant.name.tm-language-def',
-    },
-    {
-      foreground: '6969fa',
-      token: 'keyword.other.unit.css',
-    },
-  ],
-  colors: {
-    'editor.foreground': '#DADADA',
-    'editor.background': '#1B191A',
-    'editor.selectionBackground': '#73597E80',
-    'editor.lineHighlightBackground': '#353030',
-    'editorCursor.foreground': '#FFFFFF',
-    'editorWhitespace.foreground': '#4F4D4D',
-  },
-};

package/components/K8sObjectsCode/index.tsx

@@ -1,156 +0,0 @@
-import { Upload, Button, Message, Field } from '@alifd/next';
-import * as yaml from 'js-yaml';
-import React from 'react';
-import { AiOutlineCloudUpload } from 'react-icons/ai';
-import { v4 as uuid } from 'uuid';
-
-import DefinitionCode from '../../components/DefinitionCode';
-import { If } from '../../components/If';
-import { Translation } from '../../components/Translation';
-
-import type { KubernetesObject } from './objects';
-
-type Props = {
-  value?: any;
-  id: string;
-  onChange: (value: any) => void;
-};
-
-type State = {
-  message: string;
-  containerId: string;
-  showButton: boolean;
-};
-
-class K8sObjectsCode extends React.Component<Props, State> {
-  form: Field;
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      message: '',
-      containerId: uuid(),
-      showButton: false,
-    };
-    this.form = new Field(this, {
-      onChange: () => {
-        const values: { code: string } = this.form.getValues();
-        this.onChange(values.code);
-      },
-    });
-  }
-
-  componentDidMount = () => {
-    const { value } = this.props;
-    this.setValues(value);
-  };
-
-  setValues = (value: KubernetesObject[]) => {
-    if (value) {
-      try {
-        let code = '---\n';
-        if (value instanceof Array) {
-          value.map((res) => {
-            if (res) {
-              code = code + yaml.dump(res) + '---\n';
-            }
-          });
-        } else {
-          code = yaml.dump(value) + '---\n';
-        }
-        this.form.setValues({ code: code });
-      } catch {}
-    }
-  };
-
-  onChange = (v: string) => {
-    const { onChange, value } = this.props;
-    if (onChange) {
-      try {
-        let object: any = yaml.load(v);
-        if (!(object instanceof Array)) {
-          object = [object];
-        }
-        object = object.filter((ob: any) => ob != null);
-        if (yaml.dump(value) != v) {
-          onChange(object);
-        }
-        this.setState({ message: '' });
-      } catch (error: any) {
-        if ((error.message = 'expected a single document in the stream, but found more')) {
-          try {
-            let objects = yaml.loadAll(v);
-            if (yaml.dump(value) != v) {
-              objects = objects.filter((ob: any) => ob != null);
-              onChange(objects);
-            }
-            this.setState({
-              message: '',
-            });
-          } catch (err: any) {
-            this.setState({ message: err.message });
-          }
-        } else {
-          this.setState({ message: error.message });
-        }
-      }
-    }
-  };
-
-  customRequest = (option: any) => {
-    const reader = new FileReader();
-    const fileselect = option.file;
-    reader.readAsText(fileselect);
-    reader.onload = () => {
-      this.form.setValue('code', reader.result?.toString() || '');
-    };
-    return {
-      file: File,
-      abort() {},
-    };
-  };
-
-  onConvert2WebService = () => {};
-
-  render() {
-    const { id } = this.props;
-    const { init } = this.form;
-    const { message, containerId, showButton } = this.state;
-    return (
-      <div id={id}>
-        <If condition={message}>
-          <span style={{ color: 'red' }}>{message}</span>
-        </If>
-
-        <Message type="notice" style={{ marginTop: '16px' }}>
-          <Translation>
-            The input data will be automatically formatted. Ensure that the input data is a valid k8s resource YAML.
-          </Translation>
-        </Message>
-
-        <Upload request={this.customRequest}>
-          <Button text type="normal" className="padding-left-0">
-            <AiOutlineCloudUpload />
-            <Translation>Upload Yaml File</Translation>
-          </Button>
-        </Upload>
-
-        <div id={containerId} className="guide-code">
-          <DefinitionCode containerId={containerId} language={'yaml'} readOnly={false} {...init('code')} />
-        </div>
-
-        <If condition={showButton}>
-          <div style={{ marginTop: '16px' }}>
-            <span style={{ fontSize: '14px', color: '#000', marginRight: '16px' }}>
-              <Translation>Convert the kubernetes resource component to the webservice component?</Translation>
-            </span>
-            <Button type="secondary" onClick={this.onConvert2WebService}>
-              Yes
-            </Button>
-          </div>
-        </If>
-      </div>
-    );
-  }
-}
-
-export default K8sObjectsCode;

package/components/K8sObjectsCode/objects.tsx

@@ -1,27 +0,0 @@
-import type { ResourceObject } from '@velaux/data';
-
-export interface KubernetesObject extends ResourceObject {
-  apiVersion: string;
-  kind: string;
-  spec?: Record<string, any>;
-}
-
-export function isDeployment(object: KubernetesObject): boolean {
-  return object.kind === 'Deployment';
-}
-
-export function isShowConvertButton(objects: KubernetesObject[]): boolean {
-  return objects.filter((ob) => isDeployment(ob)).length > 0;
-}
-
-export function buildWebServiceBaseDeployment(object: KubernetesObject): Record<string, any> {
-  return {
-    image: object.spec?.containers[0].image,
-    ports: [],
-    readinessProbe: {},
-    livenessProbe: {},
-    env: [],
-    memory: '',
-    cpu: '',
-  };
-}