feat:Add RadioGroup custom component

react/human-task-material-renderers/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.3.0.cjs

react/human-task-material-renderers/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@io-orkes/human-task-material-renderers-react",
   "version": "v0.0.0",
-  "private": false,
   "license": "Apache-2.0",
   "homepage": "https://orkes.io",
   "repository": {
@@ -86,5 +85,6 @@
   ],
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "packageManager": "[email protected]"
 }

react/human-task-material-renderers/src/components/custom/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2024 Conductor Authors.
+ * <p>
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * <p>
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * <p>
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import React from "react";
+import {
+  FormControlLabel,
+  RadioGroup as RadioGroupMUI,
+  Radio,
+} from "@mui/material";
+
+export interface RadioGroupProps {
+  id?: string;
+  label?: string;
+  value?: string;
+  default?: string;
+  required?: boolean;
+  readonly?: boolean;
+  path: string;
+  options: string[];
+  handleChange?: (path: string, value: string) => void;
+}
+
+const RadioGroup: React.FC<RadioGroupProps> = ({
+  id,
+  value,
+  label,
+  default: defaultValue,
+  required,
+  readonly,
+  path,
+  options,
+  handleChange,
+}) => {
+  return (
+    <FormControlLabel
+      id={id}
+      labelPlacement="top"
+      required={required}
+      control={
+        <RadioGroupMUI
+          row
+          aria-labelledby="human-radio-group"
+          name="activeRadioGroup"
+          value={value ? value : defaultValue}
+          onChange={(e) => handleChange?.(path, e.target.value)}
+        >
+          {options.map((item, index) => (
+            <FormControlLabel
+              key={index}
+              value={item}
+              control={<Radio />}
+              label={item}
+              disabled={readonly}
+            />
+          ))}
+        </RadioGroupMUI>
+      }
+      label={label}
+      sx={{
+        alignItems: "baseline",
+        marginLeft: 0,
+        "& .MuiFormControlLabel-label": {
+          color: "rgba(0, 0, 0, 0.6)",
+          fontWeight: 400,
+          fontSize: "1rem",
+        },
+        "& .MuiFormControlLabel-root .MuiFormControlLabel-label": {
+          fontWeight: 400,
+          fontSize: "1rem",
+          color: "#1A1E23",
+        },
+      }}
+    />
+  );
+};
+
+export default RadioGroup;

react/human-task-material-renderers/src/components/custom/RadioGroup/RadioGroupControl.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2024 Conductor Authors.
+ * <p>
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * <p>
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * <p>
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { ControlProps } from "@jsonforms/core";
+import { withJsonFormsControlProps } from "@jsonforms/react";
+import RadioGroup, { RadioGroupProps } from "./RadioGroup";
+import _omit from "lodash/omit";
+
+type RadioGroupOptions = RadioGroupProps & {
+  assignDefaultRadioValue: boolean;
+};
+
+const RadioGroupControl = ({
+  data,
+  id,
+  label,
+  handleChange,
+  path,
+  uischema,
+  enabled,
+  ...rest
+}: ControlProps) => {
+  const restProps: Partial<RadioGroupProps> = _omit(
+    uischema?.options as RadioGroupOptions,
+    ["assignDefaultRadioValue"]
+  );
+  const options = rest?.schema?.enum ?? [];
+  return (
+    <RadioGroup
+      value={data}
+      id={id}
+      label={label}
+      path={path}
+      handleChange={handleChange}
+      readonly={!enabled}
+      options={options}
+      {...restProps}
+    />
+  );
+};
+
+export default withJsonFormsControlProps(RadioGroupControl);

react/human-task-material-renderers/src/components/custom/RadioGroup/RadioGroupTester.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 Conductor Authors.
+ * <p>
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * <p>
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * <p>
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { rankWith, optionIs } from "@jsonforms/core";
+
+export default rankWith(21, optionIs("format", "radio"));

react/human-task-material-renderers/src/components/custom/index.ts

@@ -1,16 +1,15 @@
 /*
-* Copyright 2024 Conductor Authors.
-* <p>
-* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
-* the License. You may obtain a copy of the License at
-* <p>
-* http://www.apache.org/licenses/LICENSE-2.0
-* <p>
-* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
-* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
-* specific language governing permissions and limitations under the License.
-*/
-
+ * Copyright 2024 Conductor Authors.
+ * <p>
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * <p>
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * <p>
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
 
 import DescriptionTextControl from "./DescriptionTextControl";
 import DescriptionTextTester from "./DescriptionTextTester";
@@ -24,6 +23,8 @@ import MarkdownTextControl from "./MarkdownText/MarkdownTextControl";
 import MarkdownTextTester from "./MarkdownText/MarkdownTextTester";
 import FileUploadControl from "./FileUploadControl";
 import FileUploadTester from "./FileUploadTester";
+import RadioGroupTester from "./RadioGroup/RadioGroupTester";
+import RadioGroupControl from "./RadioGroup/RadioGroupControl";
 
 import {
   materialCells,
@@ -37,6 +38,7 @@ export {
   BooleanControl,
   MarkdownTextControl,
   FileUploadControl,
+  RadioGroupControl,
 };
 export {
   DescriptionTextTester,
@@ -45,6 +47,7 @@ export {
   BooleanTester,
   MarkdownTextTester,
   FileUploadTester,
+  RadioGroupTester,
 };
 
 export const humanTaskCells = materialCells;
@@ -57,4 +60,5 @@ export const humanTaskRenderers = [
   { tester: BooleanTester, renderer: BooleanControl },
   { tester: MarkdownTextTester, renderer: MarkdownTextControl },
   { tester: FileUploadTester, renderer: FileUploadControl },
+  { tester: RadioGroupTester, renderer: RadioGroupControl },
 ];

react/human-task-material-renderers/src/stories/components/RadioGroup.stories.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Conductor Authors.
+ * <p>
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * <p>
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * <p>
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import RadioGroupComponent, {
+  RadioGroupProps,
+} from "components/custom/RadioGroup/RadioGroup";
+
+export default {
+  title: "RadioGroup",
+  component: RadioGroupComponent,
+  tags: ["autodocs"],
+  args: {},
+  argTypes: {},
+} as Meta<RadioGroupProps>;
+
+type Story = StoryObj<typeof RadioGroupComponent>;
+
+export const Primary: Story = {
+  args: {
+    label: "Radio control",
+    default: "",
+    value: "radio1",
+    options: ["radio1", "radio2"],
+  },
+};

react/human-task-material-renderers/src/stories/components/RadioGroupControl.stories.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2024 Conductor Authors.
+ * <p>
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * <p>
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * <p>
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import type { Meta } from "@storybook/react";
+import { ControlProps } from "@jsonforms/core";
+import { JsonForms } from "@jsonforms/react";
+import {
+  materialCells,
+  materialRenderers,
+} from "@jsonforms/material-renderers";
+
+import { RadioGroupControl, RadioGroupTester } from "components/custom";
+
+const renderers = [
+  ...materialRenderers,
+  { tester: RadioGroupTester, renderer: RadioGroupControl },
+];
+
+const schema = {
+  properties: {
+    radio_control: {
+      type: "string",
+      enum: ["option1", "option2"],
+    },
+  },
+};
+
+const uiSchema = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/radio_control",
+      options: {
+        format: "radio",
+      },
+    },
+  ],
+};
+
+export const Control = (args: ControlProps) => {
+  return (
+    <JsonForms
+      schema={schema}
+      uischema={uiSchema}
+      renderers={renderers}
+      cells={materialCells}
+      data={args.data}
+      readonly={false}
+    />
+  );
+};
+
+export default {
+  title: "RadioGroup JSON form control",
+  component: Control,
+  tags: ["autodocs"],
+  args: {
+    data: {},
+  },
+  argTypes: {},
+} as Meta<ControlProps>;