WIP : introduce URL builder

src/components/UrlBuilder/Readme.md

@@ -0,0 +1,36 @@
+# URL Builder
+
+```jsx
+const handleChange = (value) => {
+  console.log('URL changed:', value);
+};
+
+<URLBuilder
+  initialValue={{
+    method: 'GET',
+    host: 'http://localhost',
+    listenPath: '/api'
+  }}
+  options={{
+    methods: ["GET", "POST", "PUT", "DELETE", "PATCH"],
+    hosts: [
+    "http://localhost",
+    "https://localhost",
+    "http://api.example.com",
+    "https://api.example.com",
+  ],
+    listenPaths: ["/api", "/v1", "/v2", "/gateway"],
+    endpoints: [
+    "/pets",
+    "/users",
+    "/orders",
+    "/products",
+    "/pet/{id}",
+    "/user/{userId}/posts/{postId}",
+  ],
+    paths: ["1", "2", "3", "new", "edit"]
+  }}
+  onChange={handleChange}
+  disabled={false}
+/>
+```

src/components/UrlBuilder/URLPart.js

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import URLPartActions from './URLPartActions';
+import URLPartDropdown from './URLPartDropdown';
+
+const URLPart = ({
+  type,
+  value,
+  options,
+  isEditing,
+  isFocused,
+  isDisabled,
+  onEdit,
+  onChange,
+  onClear,
+  onPartClick,
+  onStartEditing,
+  onFinishEditing,
+  inputRef,
+  placeholder
+}) => {
+  const [customInput, setCustomInput] = useState('');
+  const isPlaceholder = !value || value === '';
+
+  const getDisplayValue = () => {
+    if (!value) {
+      return placeholder;
+    }
+    if (type === 'path') {
+      return value ? `/${value}` : placeholder;
+    }
+    return value;
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      handleCustomInput();
+    }
+  };
+
+  const handleCustomInput = () => {
+    if (customInput.trim()) {
+      onChange(type, customInput.trim());
+      setCustomInput('');
+    }
+    onFinishEditing();
+  };
+
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setCustomInput(newValue);
+    onEdit(e, type);
+  };
+
+  const handleInputBlur = () => {
+    handleCustomInput();
+  };
+
+  return (
+    <div
+      className={`
+        url-builder__part
+        url-builder__part--${type.toLowerCase()}
+        ${isPlaceholder ? 'url-builder__part--placeholder' : ''}
+        ${isFocused ? 'url-builder__part--focused' : ''}
+        ${isDisabled ? 'url-builder__part--disabled' : ''}
+      `}
+    >
+      {isEditing && type !== 'method' ? (
+        <input
+          ref={inputRef}
+          value={value}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          onBlur={handleInputBlur}
+          placeholder={`${placeholder} or type custom value`}
+          className="url-builder__input"
+          onClick={(e) => e.stopPropagation()}
+          disabled={isDisabled}
+        />
+      ) : (
+        <div
+          className="url-builder__value"
+          onClick={(e) => onPartClick(type, e)}
+          onDoubleClick={(e) => type !== 'method' && onStartEditing(e, type)}
+        >
+          {getDisplayValue()}
+        </div>
+      )}
+
+      <URLPartActions
+        type={type}
+        isEditing={isEditing}
+        isPlaceholder={isPlaceholder}
+        isDisabled={isDisabled}
+        onEdit={onStartEditing}
+        onClear={onClear}
+      />
+
+      <URLPartDropdown
+        type={type}
+        value={value}
+        options={options}
+        isVisible={isFocused && !isDisabled && !isEditing}
+        onChange={onChange}
+        onStartEditing={onStartEditing}
+      />
+    </div>
+  );
+};
+
+URLPart.propTypes = {
+  type: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.string),
+  isEditing: PropTypes.bool,
+  isFocused: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onEdit: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClear: PropTypes.func.isRequired,
+  onPartClick: PropTypes.func.isRequired,
+  onStartEditing: PropTypes.func.isRequired,
+  onFinishEditing: PropTypes.func.isRequired,
+  inputRef: PropTypes.object,
+  placeholder: PropTypes.string.isRequired
+};
+
+export default URLPart;

src/components/UrlBuilder/URLPartActions.js

@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Icon from "../Icon";
+
+const URLPartActions = ({
+  type,
+  isEditing,
+  isPlaceholder,
+  isDisabled,
+  onEdit,
+  onClear,
+}) => {
+  if (isEditing || isPlaceholder || isDisabled || type === "method") {
+    return null;
+  }
+
+  return (
+    <div className="url-builder__actions">
+      <button
+        type="button"
+        className="url-builder__button"
+        onClick={(e) => onEdit(e, type)}
+        aria-label="Edit"
+      >
+        <Icon type="pencil" weight="light" />
+      </button>
+      <button
+        type="button"
+        className="url-builder__button url-builder__button--clear"
+        onClick={(e) => onClear(e, type)}
+        aria-label="Clear"
+      >
+        <Icon type="circle-xmark" weight="light" />
+      </button>
+    </div>
+  );
+};
+
+URLPartActions.propTypes = {
+  type: PropTypes.string.isRequired,
+  isEditing: PropTypes.bool,
+  isPlaceholder: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onEdit: PropTypes.func.isRequired,
+  onClear: PropTypes.func.isRequired,
+};
+
+export default URLPartActions;

src/components/UrlBuilder/URLPartDropdown.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+
+const URLPartDropdown = ({
+  type,
+  value,
+  options,
+  isVisible,
+  onChange,
+  onStartEditing
+}) => {
+  if (!isVisible) {
+    return null;
+  }
+
+  const handleOptionSelect = (option) => {
+    onChange(type, option);
+  };
+
+  return (
+    <div 
+      className={`url-builder__dropdown url-builder__dropdown--${type.toLowerCase()}`}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="url-builder__dropdown-header">
+        {options.length > 0 ? (
+          <>Select {type} or add custom</>
+        ) : (
+          <>Type to customize</>
+        )}
+      </div>
+      {type !== 'method' && (
+        <div
+          className="url-builder__dropdown-custom"
+          onClick={(e) => onStartEditing(e, type)}
+        >
+          <Icon type="pencil" weight="light" className="url-builder__dropdown-icon" />
+          Add custom value
+        </div>
+      )}
+      {options.length > 0 && (
+        <>
+          <div
+            className="url-builder__dropdown-clear"
+            onClick={() => handleOptionSelect('')}
+          >
+            Clear selection
+          </div>
+          {options.map(option => (
+            <div
+              key={option}
+              className={`
+                url-builder__dropdown-item
+                ${value === (type === 'path' ? option.replace(/^\//, '') : option) ? 
+                  'url-builder__dropdown-item--selected' : ''}
+              `}
+              onClick={() => handleOptionSelect(option)}
+            >
+              {option}
+            </div>
+          ))}
+        </>
+      )}
+    </div>
+  );
+};
+
+URLPartDropdown.propTypes = {
+  type: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.string),
+  isVisible: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onStartEditing: PropTypes.func.isRequired
+};
+
+export default URLPartDropdown;