@startsimpli/ui 0.4.59 → 0.4.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.59",
+  "version": "0.4.60",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -42,8 +42,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "0.4.30",
-    "@startsimpli/api": "0.5.44"
+    "@startsimpli/api": "0.5.44",
+    "@startsimpli/auth": "0.4.30"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/workflows/NodeInspector.tsx

@@ -24,18 +24,42 @@ function fieldId(nodeId: string, key: string): string {
   return `nodeparam-${nodeId}-${key}`;
 }
 
+/** Field label with a required-marker asterisk when the param is required. */
+function FieldLabel({
+  id,
+  label,
+  required,
+}: {
+  id: string;
+  label: string;
+  required?: boolean;
+}) {
+  return (
+    <label htmlFor={id} className="text-xs font-medium text-foreground">
+      {label}
+      {required && (
+        <span className="ml-0.5 text-destructive" aria-hidden="true">
+          *
+        </span>
+      )}
+    </label>
+  );
+}
+
 function SchemaField({
   nodeId,
   name,
   schema,
   value,
   onChange,
+  required,
 }: {
   nodeId: string;
   name: string;
   schema: JsonSchema;
   value: unknown;
   onChange: (next: unknown) => void;
+  required?: boolean;
 }) {
   const id = fieldId(nodeId, name);
   const label = schema.title ?? name;
@@ -43,11 +67,10 @@ function SchemaField({
   if (schema.enum && schema.enum.length > 0) {
     return (
       <div className="flex flex-col gap-1">
-        <label htmlFor={id} className="text-xs font-medium text-foreground">
-          {label}
-        </label>
+        <FieldLabel id={id} label={label} required={required} />
         <select
           id={id}
+          aria-required={required || undefined}
           value={String(value ?? '')}
           onChange={(e) => onChange(e.target.value)}
           className="rounded-md border border-border bg-background px-2 py-1.5 text-sm outline-none focus:ring-2 focus:ring-primary"
@@ -67,14 +90,13 @@ function SchemaField({
       <div className="flex items-center gap-2">
         <input
           id={id}
+          aria-required={required || undefined}
           type="checkbox"
           checked={Boolean(value)}
           onChange={(e) => onChange(e.target.checked)}
           className="h-4 w-4 rounded border-border"
         />
-        <label htmlFor={id} className="text-xs font-medium text-foreground">
-          {label}
-        </label>
+        <FieldLabel id={id} label={label} required={required} />
       </div>
     );
   }
@@ -82,11 +104,10 @@ function SchemaField({
   if (schema.type === 'number' || schema.type === 'integer') {
     return (
       <div className="flex flex-col gap-1">
-        <label htmlFor={id} className="text-xs font-medium text-foreground">
-          {label}
-        </label>
+        <FieldLabel id={id} label={label} required={required} />
         <input
           id={id}
+          aria-required={required || undefined}
           type="number"
           value={value === undefined || value === null ? '' : Number(value)}
           onChange={(e) =>
@@ -101,11 +122,10 @@ function SchemaField({
   // default: string
   return (
     <div className="flex flex-col gap-1">
-      <label htmlFor={id} className="text-xs font-medium text-foreground">
-        {label}
-      </label>
+      <FieldLabel id={id} label={label} required={required} />
       <input
         id={id}
+        aria-required={required || undefined}
         type="text"
         value={value === undefined || value === null ? '' : String(value)}
         onChange={(e) => onChange(e.target.value)}
@@ -142,6 +162,7 @@ function ParamForm({
   const params = (node.parameters ?? {}) as Record<string, unknown>;
   const properties = schema?.properties ?? {};
   const keys = Object.keys(properties);
+  const requiredKeys = new Set(schema?.required ?? []);
 
   const handleChange = (key: string, next: unknown) => {
     const updated = { ...params, [key]: next };
@@ -165,6 +186,7 @@ function ParamForm({
           name={key}
           schema={properties[key]}
           value={params[key]}
+          required={requiredKeys.has(key)}
           onChange={(next) => handleChange(key, next)}
         />
       ))}

package/src/components/workflows/__tests__/NodeInspector.test.tsx

@@ -71,4 +71,30 @@ describe('NodeInspector', () => {
     await user.click(screen.getByRole('tab', { name: /output/i }));
     expect(screen.getByText(/"foo": "out"/)).toBeInTheDocument();
   });
+
+  it('marks required fields (schema.required[]) with an indicator', () => {
+    const requiredType: typeof nodeType = {
+      ...nodeType,
+      parameterSchema: {
+        type: 'object',
+        required: ['to'],
+        properties: {
+          to: { type: 'string', title: 'Recipient' },
+          retries: { type: 'number', title: 'Retries' },
+        },
+      },
+    };
+    render(<NodeInspector node={node} nodeType={requiredType} />);
+    // required field exposes aria-required + a visible "*" marker
+    expect(screen.getByLabelText(/Recipient/)).toHaveAttribute(
+      'aria-required',
+      'true'
+    );
+    // non-required field is not marked
+    expect(screen.getByLabelText('Retries')).not.toHaveAttribute(
+      'aria-required',
+      'true'
+    );
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
 });