Connected users with Kratos

src/components/Form/Input/Input.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useController } from 'react-hook-form';
+
+/* eslint-disable react/react-in-jsx-scope */
+export const Input = ({ control, name, type = 'text', label, ...props }: InputProps) => {
+  const {
+    field,
+    // fieldState: { invalid, isTouched, isDirty },
+    // formState: { touchedFields, dirtyFields },
+  } = useController({
+    name,
+    control,
+    rules: { required: true },
+    defaultValue: '',
+  });
+
+  return (
+    <>
+      {label && (
+        <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+        </label>
+      )}
+      <input
+        type={type}
+        id={name}
+        onChange={field.onChange} // send value to hook form
+        onBlur={field.onBlur} // notify when input is touched/blur
+        value={field.value ? field.value.toString() : ''} // input value
+        name={name} // send down the input name
+        ref={field.ref} // send input ref, so we can focus on input when error appear
+        autoComplete="given-name"
+        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+        {...props}
+      />
+    </>
+  );
+};
+
+type InputProps = {
+  control: any;
+  name: string;
+  type?: string;
+  label?: string;
+} & React.HTMLProps<HTMLInputElement>;

src/components/Form/Input/index.ts

@@ -0,0 +1 @@
+export { Input } from './Input';

src/components/Form/Select/Select.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useController } from 'react-hook-form';
+
+/* eslint-disable react/react-in-jsx-scope */
+export const Select = ({ control, name, label, options }: SelectProps) => {
+  const {
+    field,
+    // fieldState: { invalid, isTouched, isDirty },
+    // formState: { touchedFields, dirtyFields },
+  } = useController({
+    name,
+    control,
+    rules: { required: true },
+    defaultValue: '',
+  });
+
+  return (
+    <>
+      {label && (
+        <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+        </label>
+      )}
+      <select
+        id={name}
+        onChange={field.onChange} // send value to hook form
+        onBlur={field.onBlur} // notify when input is touched/blur
+        value={field.value ? field.value.toString() : ''} // input value
+        name={name} // send down the input name
+        ref={field.ref} // send input ref, so we can focus on input when error appear
+        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+      >
+        {options?.map((value) => (
+          <option key={value} value={value}>
+            {value}
+          </option>
+        ))}
+      </select>
+    </>
+  );
+};
+
+type SelectProps = {
+  control: any;
+  name: string;
+  label?: string;
+  options?: any[];
+};

src/components/Form/Select/index.ts

@@ -0,0 +1 @@
+export { Select } from './Select';

src/components/Form/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export { Select } from './Select';