scaffold create/edit beer form, scaffold beer page

components/ui/forms/FormError.tsx

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * Component for a styled form error message.
+ *
+ * @example
+ *   <FormError>Something went wrong!</FormError>;
+ */
+const FormError: FunctionComponent<{ children: string | undefined }> = ({ children }) =>
+  children ? (
+    <div
+      className="my-1 h-3 text-xs font-semibold italic text-error-content"
+      role="alert"
+    >
+      {children}
+    </div>
+  ) : null;
+export default FormError;

components/ui/forms/FormInfo.tsx

@@ -0,0 +1,12 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+/** A container for both the form error and form label. */
+interface FormInfoProps {
+  children: Array<ReactNode> | ReactNode;
+}
+
+const FormInfo: FunctionComponent<FormInfoProps> = ({ children }) => (
+  <div className="flex justify-between">{children}</div>
+);
+
+export default FormInfo;

components/ui/forms/FormLabel.tsx

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react';
+
+interface FormLabelProps {
+  htmlFor: string;
+  children: string;
+}
+
+const FormLabel: FunctionComponent<FormLabelProps> = ({ htmlFor, children }) => (
+  <label
+    className="block uppercase tracking-wide text-sm sm:text-xs font-extrabold my-1"
+    htmlFor={htmlFor}
+  >
+    {children}
+  </label>
+);
+
+export default FormLabel;

components/ui/forms/FormSegment.tsx

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+
+/** A container for both the form error and form label. */
+interface FormInfoProps {
+  children: Array<JSX.Element> | JSX.Element;
+}
+
+const FormSegment: FunctionComponent<FormInfoProps> = ({ children }) => (
+  <div className="mb-2">{children}</div>
+);
+
+export default FormSegment;

components/ui/forms/FormSelect.tsx

@@ -0,0 +1,38 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormSelectProps {
+  options: ReadonlyArray<{ value: string; text: string }>;
+  id: string;
+  formRegister: UseFormRegisterReturn<string>;
+  error: boolean;
+  placeholder: string;
+  message: string;
+}
+
+const FormSelect: FunctionComponent<FormSelectProps> = ({
+  options,
+  id,
+  error,
+  formRegister,
+  placeholder,
+  message,
+}) => (
+  <select
+    id={id}
+    className={`select select-bordered block w-full rounded-lg ${
+      error ? 'select-error' : ''
+    }`}
+    placeholder={placeholder}
+    {...formRegister}
+  >
+    <option value="">{message}</option>
+    {options.map(({ value, text }) => (
+      <option key={value} value={value}>
+        {text}
+      </option>
+    ))}
+  </select>
+);
+
+export default FormSelect;

components/ui/forms/FormTextArea.tsx

@@ -0,0 +1,37 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormTextAreaProps {
+  placeholder?: string;
+  formValidationSchema: UseFormRegisterReturn<string>;
+  error: boolean;
+  id: string;
+  rows: number;
+  className?: string;
+}
+
+const FormTextArea: FunctionComponent<FormTextAreaProps> = ({
+  placeholder = '',
+  formValidationSchema,
+  error,
+  id,
+  rows,
+  className,
+}) => (
+  <textarea
+    id={id}
+    placeholder={placeholder}
+    className={`${className} textarea textarea-bordered w-full resize-none  rounded-lg bg-clip-padding border border-solid transition ease-in-out m-0  ${
+      error ? 'textarea-error' : ''
+    }`}
+    {...formValidationSchema}
+    rows={rows}
+  />
+);
+
+FormTextArea.defaultProps = {
+  placeholder: '',
+  className: '',
+};
+
+export default FormTextArea;

components/ui/forms/FormTextInput.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable react/require-default-props */
+import { FunctionComponent } from 'react';
+import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormInputProps {
+  placeholder?: string;
+  formValidationSchema: UseFormRegisterReturn<string>;
+  error: boolean;
+  // eslint-disable-next-line react/require-default-props
+  type: 'email' | 'password' | 'text' | 'date';
+  id: string;
+  height?: string;
+}
+
+const FormTextInput: FunctionComponent<FormInputProps> = ({
+  placeholder = '',
+  formValidationSchema,
+  error,
+  type,
+  id,
+}) => (
+  <input
+    id={id}
+    type={type}
+    placeholder={placeholder}
+    className={`input w-full transition ease-in-out rounded-lg input-bordered ${
+      error ? 'input-error' : ''
+    }`}
+    {...formValidationSchema}
+  />
+);
+
+export default FormTextInput;