Move next js project to archive (#207)

archive/next-js-web-app/src/components/ui/forms/Button.tsx

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'react';
+
+interface FormButtonProps {
+  children: string;
+  type: 'button' | 'submit' | 'reset';
+  isSubmitting?: boolean;
+}
+
+const Button: FunctionComponent<FormButtonProps> = ({
+  children,
+  type,
+  isSubmitting = false,
+}) => (
+  // eslint-disable-next-line react/button-has-type
+  <button
+    type={type}
+    className={`btn btn-primary w-full rounded-xl`}
+    disabled={isSubmitting}
+  >
+    {children}
+  </button>
+);
+
+export default Button;

archive/next-js-web-app/src/components/ui/forms/FormError.tsx

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+
+/**
+ * @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;

archive/next-js-web-app/src/components/ui/forms/FormInfo.tsx

@@ -0,0 +1,18 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+interface FormInfoProps {
+  children: [ReactNode, ReactNode];
+}
+
+/**
+ * @example
+ *   <FormInfo>
+ *     <FormLabel htmlFor="name">Name</FormLabel>
+ *     <FormError>{errors.name?.message}</FormError>
+ *   </FormInfo>;
+ */
+const FormInfo: FunctionComponent<FormInfoProps> = ({ children }) => (
+  <div className="flex justify-between">{children}</div>
+);
+
+export default FormInfo;

archive/next-js-web-app/src/components/ui/forms/FormLabel.tsx

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

archive/next-js-web-app/src/components/ui/forms/FormPageLayout.tsx

@@ -0,0 +1,39 @@
+import { ReactNode, FC } from 'react';
+import Link from 'next/link';
+import { IconType } from 'react-icons';
+import { BiArrowBack } from 'react-icons/bi';
+
+interface FormPageLayoutProps {
+  children: ReactNode;
+  headingText: string;
+  headingIcon: IconType;
+  backLink: string;
+  backLinkText: string;
+}
+
+const FormPageLayout: FC<FormPageLayoutProps> = ({
+  children: FormComponent,
+  headingIcon,
+  headingText,
+  backLink,
+  backLinkText,
+}) => {
+  return (
+    <div className="my-20 flex flex-col items-center justify-center">
+      <div className="w-11/12 lg:w-9/12 2xl:w-7/12">
+        <div className="tooltip tooltip-right" data-tip={backLinkText}>
+          <Link href={backLink} className="btn btn-ghost btn-sm p-0">
+            <BiArrowBack className="text-xl" />
+          </Link>
+        </div>
+        <div className="flex flex-col items-center space-y-1">
+          {headingIcon({ className: 'text-4xl' })}{' '}
+          <h1 className="text-center text-3xl font-bold">{headingText}</h1>
+        </div>
+        <div className="mt-3">{FormComponent}</div>
+      </div>
+    </div>
+  );
+};
+
+export default FormPageLayout;

archive/next-js-web-app/src/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;

archive/next-js-web-app/src/components/ui/forms/FormSelect.tsx

@@ -0,0 +1,64 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormSelectProps {
+  options: readonly { value: string; text: string }[];
+  id: string;
+  formRegister: UseFormRegisterReturn<string>;
+  error: boolean;
+  placeholder: string;
+  message: string;
+  disabled?: boolean;
+}
+
+/**
+ * @example
+ *   <FormSelect
+ *     options={[
+ *       { value: '1', text: 'One' },
+ *       { value: '2', text: 'Two' },
+ *       { value: '3', text: 'Three' },
+ *     ]}
+ *     id="test"
+ *     formRegister={register('test')}
+ *     error={true}
+ *     placeholder="Test"
+ *     message="Select an option"
+ *   />;
+ *
+ * @param props
+ * @param props.options The options to display in the select.
+ * @param props.id The id of the select.
+ * @param props.formRegister The form register hook from react-hook-form.
+ * @param props.error Whether or not the select has an error.
+ * @param props.placeholder The placeholder text for the select.
+ * @param props.message The message to display when no option is selected.
+ */
+const FormSelect: FunctionComponent<FormSelectProps> = ({
+  options,
+  id,
+  error,
+  formRegister,
+  placeholder,
+  message,
+  disabled = false,
+}) => (
+  <select
+    id={id}
+    className={`select select-bordered block w-full rounded-lg ${
+      error ? 'select-error' : ''
+    }`}
+    placeholder={placeholder}
+    disabled={disabled}
+    {...formRegister}
+  >
+    <option value="">{message}</option>
+    {options.map(({ value, text }) => (
+      <option key={value} value={value}>
+        {text}
+      </option>
+    ))}
+  </select>
+);
+
+export default FormSelect;

archive/next-js-web-app/src/components/ui/forms/FormTextArea.tsx

@@ -0,0 +1,52 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormTextAreaProps {
+  placeholder?: string;
+  formValidationSchema: UseFormRegisterReturn<string>;
+  error: boolean;
+  id: string;
+  rows: number;
+  disabled?: boolean;
+}
+
+/**
+ * @example
+ *   <FormTextArea
+ *     id="test"
+ *     formValidationSchema={register('test')}
+ *     error={true}
+ *     placeholder="Test"
+ *     rows={5}
+ *     disabled
+ *   />;
+ *
+ * @param props
+ * @param props.placeholder The placeholder text for the textarea.
+ * @param props.formValidationSchema The form register hook from react-hook-form.
+ * @param props.error Whether or not the textarea has an error.
+ * @param props.id The id of the textarea.
+ * @param props.rows The number of rows to display in the textarea.
+ * @param props.disabled Whether or not the textarea is disabled.
+ */
+const FormTextArea: FunctionComponent<FormTextAreaProps> = ({
+  placeholder = '',
+  formValidationSchema,
+  error,
+  id,
+  rows,
+  disabled = false,
+}) => (
+  <textarea
+    id={id}
+    placeholder={placeholder}
+    className={`text-md textarea textarea-bordered m-0 w-full resize-none rounded-lg border border-solid transition ease-in-out  ${
+      error ? 'textarea-error' : ''
+    }`}
+    {...formValidationSchema}
+    rows={rows}
+    disabled={disabled}
+  />
+);
+
+export default FormTextArea;

archive/next-js-web-app/src/components/ui/forms/FormTextInput.tsx

@@ -0,0 +1,59 @@
+/* eslint-disable react/require-default-props */
+import { FunctionComponent } from 'react';
+import { 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;
+  disabled?: boolean;
+  autoComplete?: string;
+}
+
+/**
+ * @example
+ *   <FormTextInput
+ *     placeholder="Lorem Ipsum Lager"
+ *     formValidationSchema={register('name')}
+ *     error={!!errors.name}
+ *     type="text"
+ *     id="name"
+ *     disabled
+ *   />;
+ *
+ * @param param0 The props for the FormTextInput component
+ * @param param0.placeholder The placeholder text for the input
+ * @param param0.formValidationSchema The validation schema for the input, provided by
+ *   react-hook-form.
+ * @param param0.error Whether or not the input has an error.
+ * @param param0.type The input type (email, password, text, date).
+ * @param param0.id The id of the input.
+ * @param param0.height The height of the input.
+ * @param param0.disabled Whether or not the input is disabled.
+ * @param param0.autoComplete The autocomplete value for the input.
+ */
+const FormTextInput: FunctionComponent<FormInputProps> = ({
+  placeholder = '',
+  formValidationSchema,
+  error,
+  type,
+  id,
+  disabled = false,
+}) => (
+  <input
+    id={id}
+    type={type}
+    placeholder={placeholder}
+    className={`input input-bordered w-full appearance-none rounded-lg transition ease-in-out ${
+      error ? 'input-error' : ''
+    }`}
+    {...formValidationSchema}
+    disabled={disabled}
+  />
+);
+
+export default FormTextInput;