feat(ui): Schema Form - RSJF Integration (for action parameters)

ui/package.json

@@ -46,13 +46,17 @@
     "@radix-ui/react-label": "2.1.0",
     "@radix-ui/react-navigation-menu": "1.2.0",
     "@radix-ui/react-progress": "1.1.0",
+    "@radix-ui/react-radio-group": "1.2.0",
     "@radix-ui/react-scroll-area": "1.1.0",
     "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-tabs": "1.1.0",
     "@radix-ui/react-toast": "1.2.1",
     "@radix-ui/react-tooltip": "1.1.2",
     "@reearth/core": "0.0.7-beta.2",
+    "@rjsf/core": "5.21.1",
+    "@rjsf/utils": "5.21.1",
+    "@rjsf/validator-ajv8": "5.21.1",
     "@tanstack/react-query": "5.56.2",
     "@tanstack/react-router": "1.58.7",
     "@tanstack/react-table": "8.20.5",

ui/src/components/RadioGroup/index.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta } from "@storybook/react";
+
+import { Label } from "../Label";
+
+import { RadioGroup, RadioGroupItem } from ".";
+
+const meta = {
+  component: RadioGroupItem,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof RadioGroupItem>;
+
+export default meta;
+
+export const Default = () => {
+  return (
+    <RadioGroup defaultValue="comfortable">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  );
+};

ui/src/components/RadioGroup/index.tsx

@@ -0,0 +1,41 @@
+import { CheckIcon } from "@radix-ui/react-icons";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+
+import { cn } from "@flow/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}>
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <CheckIcon className="size-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

ui/src/components/SchemaForm/Templates/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,88 @@
+import {
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
+
+const ArrayFieldItemTemplate = <
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(
+  props: ArrayFieldTemplateItemType<T, S, F>,
+) => {
+  const {
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+    uiSchema,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } =
+    registry.templates.ButtonTemplates;
+  return (
+    <div>
+      <div className="mb-2 flex items-center">
+        <div>{children}</div>
+        <div className="py-4">
+          {hasToolbar && (
+            <div className="flex flex-row">
+              {(hasMoveUp || hasMoveDown) && (
+                <div>
+                  <MoveUpButton
+                    disabled={disabled || readonly || !hasMoveUp}
+                    onClick={onReorderClick(index, index - 1)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </div>
+              )}
+              {(hasMoveUp || hasMoveDown) && (
+                <div>
+                  <MoveDownButton
+                    disabled={disabled || readonly || !hasMoveDown}
+                    onClick={onReorderClick(index, index + 1)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </div>
+              )}
+              {hasCopy && (
+                <div>
+                  <CopyButton
+                    disabled={disabled || readonly}
+                    onClick={onCopyIndexClick(index)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </div>
+              )}
+              {hasRemove && (
+                <div>
+                  <RemoveButton
+                    disabled={disabled || readonly}
+                    onClick={onDropIndexClick(index)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { ArrayFieldItemTemplate };

ui/src/components/SchemaForm/Templates/ArrayFieldTemplate.tsx

@@ -0,0 +1,103 @@
+import {
+  ArrayFieldTemplateItemType,
+  ArrayFieldTemplateProps,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
+
+const ArrayFieldTemplate = <
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(
+  props: ArrayFieldTemplateProps<T, S, F>,
+) => {
+  const {
+    canAdd,
+    disabled,
+    idSchema,
+    uiSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<
+    "ArrayFieldDescriptionTemplate",
+    T,
+    S,
+    F
+  >("ArrayFieldDescriptionTemplate", registry, uiOptions);
+  const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate", T, S, F>(
+    "ArrayFieldItemTemplate",
+    registry,
+    uiOptions,
+  );
+  const ArrayFieldTitleTemplate = getTemplate<
+    "ArrayFieldTitleTemplate",
+    T,
+    S,
+    F
+  >("ArrayFieldTitleTemplate", registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <div>
+      <div>
+        <div>
+          <ArrayFieldTitleTemplate
+            idSchema={idSchema}
+            title={uiOptions.title || title}
+            schema={schema}
+            uiSchema={uiSchema}
+            required={required}
+            registry={registry}
+          />
+          <ArrayFieldDescriptionTemplate
+            idSchema={idSchema}
+            description={uiOptions.description || schema.description}
+            schema={schema}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+          <div key={`array-item-list-${idSchema.$id}`}>
+            {items &&
+              items.map(
+                ({
+                  key,
+                  ...itemProps
+                }: ArrayFieldTemplateItemType<T, S, F>) => (
+                  <ArrayFieldItemTemplate key={key} {...itemProps} />
+                ),
+              )}
+            {canAdd && (
+              <div>
+                <div className="mt-2">
+                  <div className="py-4">
+                    <AddButton
+                      onClick={onAddClick}
+                      disabled={disabled || readonly}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { ArrayFieldTemplate };