feat: Profile Header & User Form (#4987)

Co-authored-by: Lee Hansel Solevilla <[email protected]>
Co-authored-by: Lee Hansel Solevilla <[email protected]>

Author: AmarTrebinjac

packages/shared/src/components/fields/Autocomplete.tsx

@@ -0,0 +1,108 @@
+import { Popover, PopoverAnchor } from '@radix-ui/react-popover';
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
+import type { TextFieldProps } from './TextField';
+import { TextField } from './TextField';
+import { PopoverContent } from '../popover/Popover';
+import { Typography } from '../typography/Typography';
+import { GenericLoaderSpinner } from '../utilities/loaders';
+import { IconSize } from '../Icon';
+
+interface AutocompleteProps
+  extends Omit<TextFieldProps, 'inputId' | 'onChange' | 'onSelect'> {
+  name: string;
+  onChange: (value: string) => void;
+  onSelect: (value: string) => void;
+  selectedValue?: string;
+  options: Array<{ value: string; label: string }>;
+  isLoading?: boolean;
+}
+
+const Autocomplete = ({
+  name,
+  isLoading,
+  options,
+  onChange,
+  onSelect,
+  selectedValue,
+  defaultValue,
+  ...restProps
+}: AutocompleteProps) => {
+  const [input, setInput] = useState(defaultValue || '');
+  const [isOpen, setIsOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const handleChange = (val: string) => {
+    setInput(val);
+    onChange(val);
+  };
+  const handleSelect = (opt: { value: string; label: string }) => {
+    setInput(opt.label);
+    onSelect(opt.value);
+    setIsOpen(false);
+    inputRef.current?.focus();
+  };
+  const handleBlur = () => {
+    setIsOpen(false);
+    setInput(options.find((opt) => opt.value === selectedValue)?.label || '');
+  };
+
+  return (
+    <Popover open={isOpen}>
+      <PopoverAnchor asChild>
+        <TextField
+          inputRef={(ref) => {
+            inputRef.current = ref;
+          }}
+          inputId={name}
+          {...restProps}
+          onChange={(e) => {
+            handleChange(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => setIsOpen(true)}
+          onBlur={handleBlur}
+          value={input}
+          autoComplete="off"
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        className="rounded-16 border border-border-subtlest-tertiary bg-background-popover p-4 data-[side=bottom]:mt-1 data-[side=top]:mb-1"
+        side="bottom"
+        align="start"
+        avoidCollisions
+        sameWidthAsAnchor
+        onOpenAutoFocus={(e) => e.preventDefault()} // keep focus in input
+        onCloseAutoFocus={(e) => e.preventDefault()} // avoid refocus jumps
+      >
+        {!isLoading ? (
+          <div className="flex w-full flex-col">
+            {options?.length > 0 ? (
+              options.map((opt) => (
+                <button
+                  type="button"
+                  className={classNames(
+                    'text-left',
+                    selectedValue === opt.value && 'font-bold',
+                  )}
+                  key={opt.value}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    handleSelect(opt);
+                  }}
+                >
+                  {opt.label}
+                </button>
+              ))
+            ) : (
+              <Typography>No results</Typography>
+            )}
+          </div>
+        ) : (
+          <GenericLoaderSpinner className="mx-auto" size={IconSize.Small} />
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default Autocomplete;

packages/shared/src/components/fields/ControlledTextField.tsx

@@ -0,0 +1,34 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import React from 'react';
+import type { TextFieldProps } from './TextField';
+import { TextField } from './TextField';
+
+type ControlledTextFieldProps = Pick<
+  TextFieldProps,
+  'name' | 'label' | 'leftIcon' | 'placeholder' | 'hint'
+>;
+
+const ControlledTextField = ({
+  name,
+  hint,
+  ...restProps
+}: ControlledTextFieldProps) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <TextField
+          inputId={field.name}
+          {...restProps}
+          {...field}
+          valid={!fieldState.error}
+          hint={fieldState.error ? fieldState.error.message : hint}
+        />
+      )}
+    />
+  );
+};
+export default ControlledTextField;

packages/shared/src/components/fields/ControlledTextarea.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import Textarea from './Textarea';
+import type { BaseFieldProps } from './BaseFieldContainer';
+
+const ControlledTextarea = ({
+  name,
+  ...restProps
+}: Pick<BaseFieldProps<HTMLTextAreaElement>, 'name' | 'label'>) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <Textarea
+          inputId={field.name}
+          {...restProps}
+          {...field}
+          valid={!fieldState.error}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlledTextarea;

packages/shared/src/components/fields/MarkdownInput/ControlledMarkdownInput.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import MarkdownInput from '.';
+
+const ControlledMarkdownInput = ({
+  name,
+  rules,
+  ...props
+}: {
+  name: string;
+  rules?: Record<string, unknown>;
+} & React.ComponentProps<typeof MarkdownInput>) => {
+  const { control, setValue } = useFormContext();
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field }) => (
+        <MarkdownInput
+          {...props}
+          {...field}
+          initialContent={field.value}
+          onValueUpdate={(value) => setValue(name, value)}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlledMarkdownInput;

packages/shared/src/components/fields/Select.tsx

@@ -0,0 +1,71 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import React from 'react';
+import { ArrowIcon } from '../icons';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuOptions,
+  DropdownMenuTrigger,
+} from '../dropdown/DropdownMenu';
+import type { ButtonProps, IconType } from '../buttons/Button';
+import { Button, ButtonVariant } from '../buttons/Button';
+import type { MenuItemProps } from '../dropdown/common';
+
+type SelectProps = {
+  name: string;
+  options: { value: string; label: string }[];
+  placeholder?: string;
+  icon?: IconType;
+  buttonProps?: ButtonProps<'button'>;
+};
+
+const Select = ({
+  name,
+  options,
+  placeholder,
+  icon,
+  buttonProps,
+}: SelectProps) => {
+  const { control, setValue } = useFormContext();
+
+  const menuItems: MenuItemProps[] = options.map((opt) => {
+    return {
+      label: opt.label,
+      action: () => setValue(name, opt.value),
+    };
+  });
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <>
+          <input type="hidden" {...field} />
+          <DropdownMenu>
+            <DropdownMenuTrigger className="w-full" asChild>
+              <Button
+                icon={icon}
+                variant={ButtonVariant.Float}
+                {...buttonProps}
+              >
+                {options.find((opt) => opt.value === field.value)?.label ||
+                  placeholder}
+                <ArrowIcon className="ml-auto rotate-180" secondary />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="start"
+              sideOffset={10}
+              className="flex w-[var(--radix-popper-anchor-width)] flex-col gap-1 overflow-y-auto overflow-x-hidden !p-0"
+            >
+              <DropdownMenuOptions options={menuItems} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
+      )}
+    />
+  );
+};
+
+export default Select;

packages/shared/src/components/profile/ControlledAvatarUpload.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { CameraIcon, ClearIcon } from '../icons';
+import { IconSize } from '../Icon';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { fallbackImages } from '../../lib/config';
+import { useControlledImageUpload } from '../../hooks/useControlledImageUpload';
+
+interface ControlledAvatarUploadProps {
+  name: string;
+  currentImageName: string;
+  fileSizeLimitMB?: number;
+}
+
+const ControlledAvatarUpload = ({
+  name,
+  currentImageName,
+  fileSizeLimitMB = 1,
+}: ControlledAvatarUploadProps) => {
+  const {
+    displayImage,
+    inputRef,
+    onFileChange,
+    onDragOver,
+    onDrop,
+    onUploadClick,
+    onRemove,
+    acceptedTypes,
+  } = useControlledImageUpload({
+    name,
+    fileSizeLimitMB,
+    currentImageName,
+    fallbackImage: fallbackImages.avatar,
+  });
+
+  return (
+    <div
+      className="group relative size-[120px]"
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+    >
+      <div className="relative size-full overflow-hidden rounded-26">
+        <img
+          src={displayImage}
+          alt="Profile avatar"
+          className="size-full object-cover"
+          data-testid="image_avatar_file"
+        />
+      </div>
+      <div className="cursor:pointer absolute top-0 flex h-full w-full items-center justify-center gap-2 rounded-26">
+        <Button
+          type="button"
+          className="bg-shadow-shadow3"
+          variant={ButtonVariant.Float}
+          size={ButtonSize.Small}
+          icon={<CameraIcon size={IconSize.Medium} />}
+          onClick={onUploadClick}
+        />
+        <Button
+          type="button"
+          className="bg-shadow-shadow3"
+          variant={ButtonVariant.Float}
+          size={ButtonSize.Small}
+          icon={<ClearIcon size={IconSize.Medium} />}
+          onClick={onRemove}
+        />
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={acceptedTypes}
+        className="hidden"
+        onChange={onFileChange}
+      />
+    </div>
+  );
+};
+
+export default ControlledAvatarUpload;