feat(form): radio input (#1217)

* feat: add radioInput component

* feat: add radioInput component

* feat: update form in demo app

* feat: change name value

* feat: change options

* refactor: remove unused pages

* style: fix the position of style for radio input in css file

* fix: update the styles

* fix: update the styles

* refactor: iterate through option in ui rather than in form component

Author: bishalshrestha013

apps/demo/src/Views/Form/components/FormInput/FormInput.tsx

@@ -42,6 +42,7 @@ export const FormInputDemo = () => {
       .nonempty({ message: t("formInput.message.required") }),
     typeahead: zod.string().min(1, t("formInput.message.required")),
     date: zod.string().date(),
+    radioInput: zod.string(),
   });
 
   const handleSubmit = (_formData: any) => {

apps/demo/src/Views/Form/components/FormInput/FormInputFields.tsx

@@ -3,6 +3,7 @@ import {
   FormActions,
   TextInput,
   Password,
+  RadioInput,
   Input,
   useFormContext,
   NumberInput,
@@ -154,6 +155,15 @@ export const FormInputFields = ({ checkFilledState }: Properties) => {
         showValidState={valid}
         showInvalidState={invalid}
       />
+      <RadioInput
+        label={t("formInput.label.radioInput")}
+        name="radioInput"
+        options={[
+          { label: "One", value: "value 1" },
+          { label: "Two", value: "value 2" },
+          { label: "Three", value: "value 3" },
+        ]}
+      />
       <FormActions
         actions={[
           {

apps/demo/src/Views/Ui/components/GridContainerDemo.tsx

@@ -1,10 +1,9 @@
 import { useTranslation } from "@dzangolab/react-i18n";
 import { Page, GridContainer } from "@dzangolab/react-ui";
-import React from "react";
 
 import { Package } from "../../Home/components/Package";
 
-const GridContainerDemo: React.FC = () => {
+export const GridContainerDemo = () => {
   const { t } = useTranslation("ui");
 
   const packages = [
@@ -48,5 +47,3 @@ const GridContainerDemo: React.FC = () => {
     </Page>
   );
 };
-
-export default GridContainerDemo;

apps/demo/src/Views/Ui/pages.tsx

@@ -20,6 +20,7 @@ import {
   TextareaDemo,
   TypeaheadDemo,
 } from "./components/FormWidgets";
+import { GridContainerDemo } from "./components/GridContainerDemo";
 import { LoadingDemo } from "./components/Loading";
 import { MessageDemo } from "./components/Message";
 import { ModalDemo } from "./components/ModalDemo";
@@ -34,7 +35,6 @@ import { TagDemo } from "./components/Tag/Tag";
 import { TooltipDemo } from "./components/Tooltip";
 import { YoutubeFacadeDemo } from "./components/YoutubeFacade";
 import { Demo } from "../../components/Demo";
-import GridContainerDemo from "./components/GridContainerDemo";
 
 export const UI_ROUTES = {
   BUTTON: "/ui/button",

apps/demo/src/locales/en/form.json

@@ -46,6 +46,7 @@
       "invalid": "Show invalid state",
       "number": "Number",
       "password": "Password",
+      "radioInput": "Radio input",
       "readOnly": "ReadOnly input",
       "select": "Select",
       "text": "Text input",

apps/demo/src/locales/fr/form.json

@@ -46,6 +46,7 @@
       "invalid": "Show invalid state (fr)",
       "number": "Number (fr)",
       "password": "Password (fr)",
+      "radioInput": "Radio input (fr)",
       "readOnly": "ReadOnly input (fr)",
       "select": "Select (fr)",
       "text": "Text input (fr)",

packages/form/src/components/RadioInput.tsx

@@ -0,0 +1,55 @@
+import {
+  RadioInput as BasicRadioInput,
+  IRadioInputProperties,
+} from "@dzangolab/react-ui";
+import React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+
+interface IRadioInput extends IRadioInputProperties {
+  disabled?: boolean;
+  name: string;
+  showInvalidState?: boolean;
+  showValidState?: boolean;
+  submitCount?: number;
+}
+
+export const RadioInput: React.FC<IRadioInput> = ({
+  className,
+  disabled,
+  label,
+  name,
+  options,
+  showInvalidState = true,
+  showValidState = true,
+  submitCount = 0,
+  ...others
+}) => {
+  const { control, getFieldState } = useFormContext();
+
+  const { error, invalid } = getFieldState(name);
+
+  const checkInvalidState = () => {
+    if (showInvalidState && invalid) return true;
+    if (showValidState && !invalid) return false;
+  };
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <BasicRadioInput
+          name={field.name}
+          label={label}
+          value={field.value}
+          disabled={disabled}
+          errorMessage={error?.message}
+          onChange={field.onChange}
+          options={options}
+          hasError={submitCount > 0 ? checkInvalidState() : undefined}
+          {...others}
+        />
+      )}
+    />
+  );
+};

packages/form/src/components/index.ts

@@ -10,6 +10,7 @@ export * from "./FormProvider";
 export * from "./Input";
 export * from "./NumberInput";
 export * from "./Password";
+export * from "./RadioInput";
 export * from "./Select";
 export * from "./Textarea";
 export * from "./TextInput";

packages/ui/src/FormWidgets/RadioInput/index.tsx

@@ -0,0 +1,54 @@
+import { InputHTMLAttributes } from "react";
+
+interface IOption {
+  label: string;
+  value: string;
+}
+export interface IRadioInputProperties
+  extends InputHTMLAttributes<HTMLInputElement> {
+  disabled?: boolean;
+  errorMessage?: string;
+  hasError?: boolean;
+  helperText?: string;
+  label?: string | React.ReactNode;
+  name?: string;
+  options: IOption[];
+}
+
+export const RadioInput: React.FC<IRadioInputProperties> = ({
+  className = "",
+  disabled,
+  errorMessage,
+  hasError,
+  helperText,
+  label = "",
+  name,
+  onChange,
+  options,
+  value,
+  ...others
+}) => {
+  return (
+    <div className={`field ${className}`.trim()}>
+      {label}
+      {options?.map(({ label: optionLabel, value: optionValue }) => (
+        <div className="radio-button-wrapper" key={optionValue}>
+          <input
+            aria-invalid={hasError}
+            checked={optionValue === value}
+            disabled={disabled}
+            id={optionValue}
+            name={name}
+            onChange={onChange}
+            type="radio"
+            value={optionValue}
+            {...others}
+          ></input>
+          {optionLabel && <label htmlFor={optionValue}>{optionLabel}</label>}
+        </div>
+      ))}
+      {helperText && <span className="helper-text">{helperText}</span>}
+      {errorMessage && <span className="error-message">{errorMessage}</span>}
+    </div>
+  );
+};

packages/ui/src/FormWidgets/index.tsx

@@ -1,6 +1,7 @@
 export * from "./Checkbox";
 export * from "./DebouncedInput";
 export * from "./Input";
+export * from "./RadioInput";
 export * from "./Select";
 export * from "./SwitchInput";
 export * from "./TextArea";