feat: Add TextField component with ReactNode label support

packages/plugins-sdk/package.json

@@ -51,6 +51,11 @@
     "@types/multer": "^1.4.12",
     "form-data": "^4.0.2"
   },
+  "peerDependencies": {
+    "@medusajs/ui": "^4.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "@types/react": "^18.0.0"
+  },
   "engines": {
     "node": ">=20"
   }

packages/plugins-sdk/src/components/TextField.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Input, Label } from '@medusajs/ui';
+
+export interface TextFieldProps extends Omit<React.ComponentProps<typeof Input>, 'id'> {
+  /**
+   * The label for the text field. Can be a string or a React node for more complex labels.
+   */
+  label?: string | React.ReactNode;
+  /**
+   * Optional ID for the input. If not provided, a random ID will be generated.
+   */
+  id?: string;
+  /**
+   * Whether the field is required. Adds a red asterisk to the label.
+   */
+  required?: boolean;
+  /**
+   * Error message to display below the input.
+   */
+  error?: string;
+  /**
+   * Help text to display below the input.
+   */
+  helperText?: string;
+  /**
+   * Additional CSS classes for the container.
+   */
+  containerClassName?: string;
+  /**
+   * Additional CSS classes for the label.
+   */
+  labelClassName?: string;
+}
+
+/**
+ * TextField component that combines Input and Label from @medusajs/ui.
+ * Supports both string and ReactNode labels for maximum flexibility.
+ */
+export const TextField: React.FC<TextFieldProps> = ({
+  label,
+  id,
+  required = false,
+  error,
+  helperText,
+  containerClassName = '',
+  labelClassName = '',
+  className = '',
+  ...inputProps
+}) => {
+  // Generate a unique ID if none provided
+  const inputId = id || React.useMemo(() => `textfield-${Math.random().toString(36).substr(2, 9)}`, []);
+
+  return (
+    <div className={`flex flex-col gap-y-2 ${containerClassName}`}>
+      {label && (
+        <Label htmlFor={inputId} className={`text-ui-fg-subtle ${labelClassName}`}>
+          {label}
+          {required && <span className="text-ui-fg-error ml-1">*</span>}
+        </Label>
+      )}
+      <Input
+        id={inputId}
+        className={`${error ? 'border-ui-border-error' : ''} ${className}`}
+        {...inputProps}
+      />
+      {error && (
+        <span className="text-ui-fg-error text-sm">{error}</span>
+      )}
+      {helperText && !error && (
+        <span className="text-ui-fg-muted text-sm">{helperText}</span>
+      )}
+    </div>
+  );
+};
+
+export default TextField;
+

packages/plugins-sdk/src/components/index.ts

@@ -0,0 +1,2 @@
+export { TextField, type TextFieldProps } from './TextField';
+

packages/plugins-sdk/src/index.ts

@@ -1,2 +1,3 @@
 export * from './sdk'
 export * from './types'
+export * from './components'

plugins/webhooks/src/admin/modals/webhook-modal.tsx

@@ -10,6 +10,7 @@ import {
   Heading,
   Label,
 } from "@medusajs/ui";
+import { TextField } from "@lambdacurry/medusa-plugins-sdk";
 
 import {
   useAdminCreateWebhook,
@@ -55,7 +56,7 @@ export const WebhookModal: React.FC<WebhookModalProps> = ({
     mode: "onChange",
   });
 
-  const { register, handleSubmit, control, formState } = form;
+  const { register, handleSubmit, control, formState, formState: { errors } } = form;
 
   const [openTestModal, setTestModalState] = useState<boolean>(false);
 
@@ -172,24 +173,21 @@ export const WebhookModal: React.FC<WebhookModalProps> = ({
                         />
                       </div>
 
-                      <div className="flex flex-col gap-y-3">
-                        <Label className="text-gray-400">
-                          Target URL<span className="text-rose-500">*</span>
-                        </Label>
-                        <Input
-                          placeholder="https://example.com/webhook"
-                          type="url"
-                          required
-                          {...register("target_url", {
-                            required: "Please enter the target url.",
-                            pattern: {
-                              value:
-                                /^https?:\/\/(?:localhost|([a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}))(?::(\d+))?(\/[\w .-]*)*\/?(\?[=&\w.-]*)?$/,
-                              message: "Please enter a valid URL.",
-                            },
-                          })}
-                        />
-                      </div>
+                      <TextField
+                        label="Target URL"
+                        placeholder="https://example.com/webhook"
+                        type="url"
+                        required
+                        error={errors.target_url?.message}
+                        {...register("target_url", {
+                          required: "Please enter the target url.",
+                          pattern: {
+                            value:
+                              /^https?:\/\/(?:localhost|([a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}))(?::(\d+))?(\/[\w .-]*)*\/?(\?[=&\w.-]*)?$/,
+                            message: "Please enter a valid URL.",
+                          },
+                        })}
+                      />
                     </div>
 
                     <div>