@ttoss/forms 0.5.10 → 0.5.11

package/dist/esm/index.js

@@ -84,11 +84,107 @@ var FormFieldInput = ({
   });
 };
 
+// src/FormFieldRadio.tsx
+import { Box as Box3, Label as Label2, Radio } from "@ttoss/ui";
+import { useController as useController2 } from "react-hook-form";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var FormFieldRadio = ({
+  label,
+  name,
+  options
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = useController2({
+    name,
+    defaultValue: ""
+  });
+  return /* @__PURE__ */ jsxs2(Box3, {
+    children: [
+      label && /* @__PURE__ */ jsx4(Label2, {
+        children: label
+      }),
+      /* @__PURE__ */ jsx4(Box3, {
+        variant: "form.radios",
+        children: options.map((option) => {
+          const id = `form-field-radio-${name}-${option.value}`;
+          return /* @__PURE__ */ jsxs2(Label2, {
+            htmlFor: id,
+            children: [
+              /* @__PURE__ */ jsx4(Radio, {
+                ref,
+                onChange,
+                onBlur,
+                value: option.value,
+                defaultChecked: value === option.value,
+                name,
+                id
+              }),
+              option.label
+            ]
+          }, id);
+        })
+      }),
+      /* @__PURE__ */ jsx4(ErrorMessage, {
+        name
+      })
+    ]
+  });
+};
+
+// src/FormFieldSelect.tsx
+import { Box as Box4, Label as Label3, Select } from "@ttoss/ui";
+import { useController as useController3 } from "react-hook-form";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var FormFieldSelect = ({
+  label,
+  name,
+  options,
+  arrow
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = useController3({
+    name,
+    defaultValue: ""
+  });
+  const id = `form-field-select-${name}`;
+  return /* @__PURE__ */ jsxs3(Box4, {
+    children: [
+      label && /* @__PURE__ */ jsx5(Label3, {
+        htmlFor: id,
+        children: label
+      }),
+      /* @__PURE__ */ jsx5(Select, {
+        ref,
+        name,
+        onChange,
+        onBlur,
+        value,
+        arrow,
+        variant: "form.select",
+        children: options.map((option) => {
+          return /* @__PURE__ */ jsx5("option", {
+            value: option.value,
+            id,
+            children: option.label
+          }, id);
+        })
+      }),
+      /* @__PURE__ */ jsx5(ErrorMessage, {
+        name
+      })
+    ]
+  });
+};
+
 // src/FormField.tsx
 var FormField = () => {
   return null;
 };
 FormField.Input = FormFieldInput;
+FormField.Radio = FormFieldRadio;
+FormField.Select = FormFieldSelect;
 export {
   Form,
   FormField

package/dist/index.d.ts

@@ -17,6 +17,23 @@ declare const FormField: {
         label?: string | undefined;
         name: react_hook_form.Path<TFieldValues>;
     }) => JSX.Element;
+    Radio: <TFieldValues_1 extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, options, }: {
+        label?: string | undefined;
+        name: react_hook_form.Path<TFieldValues_1>;
+        options: {
+            value: string | number;
+            label: string;
+        }[];
+    }) => JSX.Element;
+    Select: <TFieldValues_2 extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, options, arrow, }: {
+        label?: string | undefined;
+        name: react_hook_form.Path<TFieldValues_2>;
+        options: {
+            value: string | number;
+            label: string;
+        }[];
+        arrow?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    }) => JSX.Element;
 };
 
 export { Form, FormField };

package/dist/index.js

@@ -116,11 +116,107 @@ var FormFieldInput = ({
   });
 };
 
+// src/FormFieldRadio.tsx
+var import_ui4 = require("@ttoss/ui");
+var import_react_hook_form4 = require("react-hook-form");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FormFieldRadio = ({
+  label,
+  name,
+  options
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = (0, import_react_hook_form4.useController)({
+    name,
+    defaultValue: ""
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Box, {
+    children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Label, {
+        children: label
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Box, {
+        variant: "form.radios",
+        children: options.map((option) => {
+          const id = `form-field-radio-${name}-${option.value}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Label, {
+            htmlFor: id,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Radio, {
+                ref,
+                onChange,
+                onBlur,
+                value: option.value,
+                defaultChecked: value === option.value,
+                name,
+                id
+              }),
+              option.label
+            ]
+          }, id);
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, {
+        name
+      })
+    ]
+  });
+};
+
+// src/FormFieldSelect.tsx
+var import_ui5 = require("@ttoss/ui");
+var import_react_hook_form5 = require("react-hook-form");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var FormFieldSelect = ({
+  label,
+  name,
+  options,
+  arrow
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = (0, import_react_hook_form5.useController)({
+    name,
+    defaultValue: ""
+  });
+  const id = `form-field-select-${name}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, {
+    children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Label, {
+        htmlFor: id,
+        children: label
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Select, {
+        ref,
+        name,
+        onChange,
+        onBlur,
+        value,
+        arrow,
+        variant: "form.select",
+        children: options.map((option) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", {
+            value: option.value,
+            id,
+            children: option.label
+          }, id);
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, {
+        name
+      })
+    ]
+  });
+};
+
 // src/FormField.tsx
 var FormField = () => {
   return null;
 };
 FormField.Input = FormFieldInput;
+FormField.Radio = FormFieldRadio;
+FormField.Select = FormFieldSelect;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Form,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e2b509ee8717f07f7365191b651dcbb5f080e05a"
+  "gitHead": "84c4bd0244196f787a338ebdbcc869caac61a0ff"
 }

package/src/FormField.tsx

@@ -1,4 +1,6 @@
 import { FormFieldInput } from './FormFieldInput';
+import { FormFieldRadio } from './FormFieldRadio';
+import { FormFieldSelect } from './FormFieldSelect';
 
 const FormField = () => {
   // to be implemented
@@ -6,5 +8,7 @@ const FormField = () => {
 };
 
 FormField.Input = FormFieldInput;
+FormField.Radio = FormFieldRadio;
+FormField.Select = FormFieldSelect;
 
 export { FormField };

package/src/FormFieldRadio.spec.tsx

@@ -0,0 +1,69 @@
+import * as yup from 'yup';
+import { Button } from '@ttoss/ui';
+import { Form } from './Form';
+import { FormFieldRadio } from './FormFieldRadio';
+import { render, screen, userEvent } from '@ttoss/test-utils';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+const RADIO_OPTIONS = [
+  { value: 'Ferrari', label: 'Ferrari' },
+  { value: 'Mercedes', label: 'Mercedes' },
+  { value: 'BMW', label: 'BMW' },
+];
+
+test('call onSubmit with correct data', async () => {
+  const user = userEvent.setup({ delay: null });
+
+  const onSubmit = jest.fn();
+
+  const RenderForm = () => {
+    const formMethods = useForm();
+
+    return (
+      <Form {...formMethods} onSubmit={onSubmit}>
+        <FormFieldRadio name="car" label="Cars" options={RADIO_OPTIONS} />
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+  };
+
+  render(<RenderForm />);
+
+  await user.click(screen.getByLabelText('BMW'));
+
+  await user.click(screen.getByText('Submit'));
+
+  expect(onSubmit).toHaveBeenCalledWith({ car: 'BMW' });
+});
+
+test('should display error messages', async () => {
+  const user = userEvent.setup({ delay: null });
+
+  const onSubmit = jest.fn();
+
+  const schema = yup.object({
+    car: yup.string().required('Car is required'),
+  });
+
+  const RenderForm = () => {
+    const formMethods = useForm({
+      mode: 'all',
+      resolver: yupResolver(schema),
+    });
+
+    return (
+      <Form {...formMethods} onSubmit={onSubmit}>
+        <FormFieldRadio name="car" label="Cars" options={RADIO_OPTIONS} />
+
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+  };
+
+  render(<RenderForm />);
+
+  await user.click(screen.getByText('Submit'));
+
+  expect(await screen.findByText('Car is required')).toBeInTheDocument();
+});

package/src/FormFieldRadio.tsx

@@ -0,0 +1,53 @@
+import { Box, Label, Radio } from '@ttoss/ui';
+import { ErrorMessage } from './ErrorMessage';
+import { FieldValues, Path, useController } from 'react-hook-form';
+
+type FormRadioOption = {
+  value: string | number;
+  label: string;
+};
+
+export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
+  label,
+  name,
+  options,
+}: {
+  label?: string;
+  name: Path<TFieldValues>;
+  options: FormRadioOption[];
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref },
+  } = useController<any>({
+    name,
+    defaultValue: '',
+  });
+
+  return (
+    <Box>
+      {label && <Label>{label}</Label>}
+      <Box variant="form.radios">
+        {options.map((option) => {
+          const id = `form-field-radio-${name}-${option.value}`;
+
+          return (
+            <Label key={id} htmlFor={id}>
+              <Radio
+                ref={ref}
+                onChange={onChange}
+                onBlur={onBlur}
+                value={option.value}
+                defaultChecked={value === option.value}
+                name={name}
+                id={id}
+              />
+              {option.label}
+            </Label>
+          );
+        })}
+      </Box>
+
+      <ErrorMessage name={name} />
+    </Box>
+  );
+};

package/src/FormFieldSelect.spec.tsx

@@ -0,0 +1,73 @@
+import * as yup from 'yup';
+import { Button } from '@ttoss/ui';
+import { Form } from './Form';
+import { FormFieldSelect } from './FormFieldSelect';
+import { render, screen, userEvent } from '@ttoss/test-utils';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+const RADIO_OPTIONS = [
+  { value: '', label: 'Select a car' },
+  { value: 'Ferrari', label: 'Ferrari' },
+  { value: 'Mercedes', label: 'Mercedes' },
+  { value: 'BMW', label: 'BMW' },
+];
+
+test('call onSubmit with correct data', async () => {
+  const user = userEvent.setup({ delay: null });
+
+  const onSubmit = jest.fn();
+
+  const RenderForm = () => {
+    const formMethods = useForm();
+
+    return (
+      <Form {...formMethods} onSubmit={onSubmit}>
+        <FormFieldSelect name="car" label="Cars" options={RADIO_OPTIONS} />
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+  };
+
+  render(<RenderForm />);
+
+  await user.selectOptions(
+    screen.getByRole('combobox'),
+    screen.getByText('BMW')
+  );
+
+  await user.click(screen.getByText('Submit'));
+
+  expect(onSubmit).toHaveBeenCalledWith({ car: 'BMW' });
+});
+
+test('should display error messages', async () => {
+  const user = userEvent.setup({ delay: null });
+
+  const onSubmit = jest.fn();
+
+  const schema = yup.object({
+    car: yup.string().required('Car is required'),
+  });
+
+  const RenderForm = () => {
+    const formMethods = useForm({
+      mode: 'all',
+      resolver: yupResolver(schema),
+    });
+
+    return (
+      <Form {...formMethods} onSubmit={onSubmit}>
+        <FormFieldSelect name="car" label="Cars" options={RADIO_OPTIONS} />
+
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+  };
+
+  render(<RenderForm />);
+
+  await user.click(screen.getByText('Submit'));
+
+  expect(await screen.findByText('Car is required')).toBeInTheDocument();
+});

package/src/FormFieldSelect.tsx

@@ -0,0 +1,56 @@
+import { Box, Label, Select, type SelectProps } from '@ttoss/ui';
+import { ErrorMessage } from './ErrorMessage';
+import { FieldValues, Path, useController } from 'react-hook-form';
+
+type FormRadioOption = {
+  value: string | number;
+  label: string;
+};
+
+export const FormFieldSelect = <
+  TFieldValues extends FieldValues = FieldValues
+>({
+  label,
+  name,
+  options,
+  arrow,
+}: {
+  label?: string;
+  name: Path<TFieldValues>;
+  options: FormRadioOption[];
+  arrow?: SelectProps['arrow'];
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref },
+  } = useController<any>({
+    name,
+    defaultValue: '',
+  });
+
+  const id = `form-field-select-${name}`;
+
+  return (
+    <Box>
+      {label && <Label htmlFor={id}>{label}</Label>}
+      <Select
+        ref={ref}
+        name={name}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        arrow={arrow}
+        variant="form.select"
+      >
+        {options.map((option) => {
+          return (
+            <option key={id} value={option.value} id={id}>
+              {option.label}
+            </option>
+          );
+        })}
+      </Select>
+
+      <ErrorMessage name={name} />
+    </Box>
+  );
+};