@ayasofyazilim/ui 0.0.0

package/src/custom/email-input/email.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Input } from "@repo/ayasofyazilim-ui/components/input";
+import { Label } from "@repo/ayasofyazilim-ui/components/label";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import domains from "./domains.json";
+
+interface EmailInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: string;
+  suggestions?: string[];
+  onValueChange?: (value: string) => void;
+}
+
+const EmailInput = React.forwardRef<HTMLInputElement, EmailInputProps>(
+  (
+    {
+      id,
+      className,
+      label,
+      suggestions = [],
+      onValueChange,
+      disabled,
+      required,
+      ...props
+    },
+    ref
+  ) => {
+    const allSuggestions = React.useMemo(() => {
+      const combined = [...domains, ...suggestions];
+      return combined.filter((item, index) => combined.indexOf(item) === index);
+    }, [suggestions]);
+
+    const [value, setValue] = React.useState(props.value?.toString() || "");
+    const [open, setOpen] = React.useState(false);
+    const [filteredSuggestions, setFilteredSuggestions] = React.useState<
+      string[]
+    >([]);
+    const [selectedIndex, setSelectedIndex] = React.useState(-1);
+
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    React.useImperativeHandle(ref, () => inputRef.current!);
+
+    const updateSuggestions = React.useCallback(
+      (inputValue: string) => {
+        const atIndex = inputValue.lastIndexOf("@");
+
+        if (atIndex === -1) {
+          setOpen(false);
+          setFilteredSuggestions([]);
+          setSelectedIndex(-1);
+          return;
+        }
+
+        const beforeAt = inputValue.substring(0, atIndex + 1);
+        const afterAt = inputValue.substring(atIndex + 1);
+
+        if (afterAt.length === 0) {
+          const topSuggestions = allSuggestions
+            .slice(0, 5)
+            .map((domain) => beforeAt + domain);
+          setFilteredSuggestions(topSuggestions);
+          setOpen(true);
+          setSelectedIndex(-1);
+        } else {
+          const filtered = allSuggestions
+            .filter((domain) =>
+              domain.toLowerCase().startsWith(afterAt.toLowerCase())
+            )
+            .map((domain) => beforeAt + domain);
+
+          if (filtered.length > 0) {
+            setFilteredSuggestions(filtered);
+            setOpen(true);
+            setSelectedIndex(-1);
+          } else {
+            setOpen(false);
+            setFilteredSuggestions([]);
+            setSelectedIndex(-1);
+          }
+        }
+      },
+      [allSuggestions]
+    );
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setValue(newValue);
+      onValueChange?.(newValue);
+      updateSuggestions(newValue);
+    };
+
+    const applySuggestion = (suggestion: string) => {
+      setValue(suggestion);
+      onValueChange?.(suggestion);
+      setOpen(false);
+      setSelectedIndex(-1);
+      inputRef.current?.focus();
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!open || filteredSuggestions.length === 0) {
+        if (e.key === "Escape") {
+          setOpen(false);
+        }
+        return;
+      }
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            prev < filteredSuggestions.length - 1 ? prev + 1 : 0
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            prev > 0 ? prev - 1 : filteredSuggestions.length - 1
+          );
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (
+            selectedIndex >= 0 &&
+            selectedIndex < filteredSuggestions.length
+          ) {
+            applySuggestion(filteredSuggestions?.[selectedIndex] || "");
+          }
+          break;
+        case "Escape":
+          setOpen(false);
+          setSelectedIndex(-1);
+          break;
+        default:
+          setOpen(false);
+          break;
+      }
+    };
+
+    React.useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(event.target as Node)
+        ) {
+          setOpen(false);
+          setSelectedIndex(-1);
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    React.useEffect(() => {
+      if (props.value !== undefined) {
+        setValue(props.value.toString());
+      }
+    }, [props.value]);
+
+    return (
+      <div className="w-full" ref={containerRef}>
+        {label && (
+          <Label
+            className={cn(
+              "mb-2 block",
+              required &&
+                "after:content-['*'] after:ml-0.5 after:text-destructive"
+            )}
+          >
+            {label}
+          </Label>
+        )}
+
+        <div className="relative">
+          <Input
+            type="email"
+            id={id}
+            data-testid={id}
+            className={className}
+            ref={inputRef}
+            value={value}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            disabled={disabled}
+            required={required}
+            {...props}
+          />
+
+          {open && filteredSuggestions.length > 0 && (
+            <div className="absolute top-full left-0 right-0 z-999 mt-1 bg-popover border border-border rounded-md shadow-md">
+              <div className="p-1 flex flex-col">
+                {filteredSuggestions.map((suggestion, index) => (
+                  <Button
+                    variant="ghost"
+                    data-testid={`${id}_suggestion_${index}`}
+                    key={suggestion}
+                    className={cn(
+                      "w-full justify-start text-left px-2 py-1.5 text-sm cursor-pointer rounded-sm transition-colors gap-0",
+                      "hover:bg-accent hover:text-accent-foreground",
+                      index === selectedIndex &&
+                        "bg-accent text-accent-foreground"
+                    )}
+                    onClick={() => applySuggestion(suggestion)}
+                  >
+                    <span>{suggestion.split("@")[0]}</span>
+                    <span className="text-primary font-semibold">
+                      @{suggestion.split("@")[1]}
+                    </span>
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+EmailInput.displayName = "EmailInput";
+
+export { EmailInput };

package/src/custom/email-input/index.tsx

@@ -0,0 +1,4 @@
+export { default as domains } from "./domains.json";
+export { EmailInput } from "./email";
+
+export * from "./types";

package/src/custom/email-input/types.ts

@@ -0,0 +1,104 @@
+import * as React from "react";
+
+export type Maybe<T> = T | null;
+
+export enum Elements {
+  Domain = "domain",
+  Dropdown = "dropdown",
+  Input = "input",
+  Suggestion = "suggestion",
+  Username = "username",
+  Wrapper = "wrapper",
+}
+
+export type ClassNames = Partial<Record<Elements, string>>;
+
+export type OnSelectData = {
+  value: string;
+  keyboard: boolean;
+  position: number;
+};
+
+export type Values = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+export type OnChange =
+  | React.Dispatch<React.SetStateAction<string>>
+  | ((newValue: string) => void | Promise<void>);
+export type OnSelect = (object: OnSelectData) => void | Promise<void>;
+
+export type Props = {
+  /** State or portion of state to hold the email. */
+  value: string | undefined;
+  /** State setter or custom dispatcher to update the email. */
+  onChange: OnChange;
+  /** Domains to suggest while typing the username. */
+  baseList: string[];
+  /** Domains to refine suggestions after typing @. */
+  refineList?: string[];
+  /** Custom callback to invoke on suggestion select. */
+  onSelect?: OnSelect;
+  /** Minimum chars required to display suggestions. */
+  minChars?: Values;
+  /** Maximum number of suggestions to display. */
+  maxResults?: Omit<Values, 1>;
+  /** Class names for each element. */
+  classNames?: ClassNames;
+  /** Class name of the wrapper element. */
+  className?: string;
+  /** Dropdown `aria-label` value */
+  dropdownAriaLabel?: string;
+  /** Value of the `data-` attribute to be set on the focuesed/hovered suggestion. Defaults to `data-active-email`. */
+  activeDataAttr?: `data-${string}`;
+  children?: React.ReactNode;
+  /** Dropdown placement.
+   *
+   * @deprecated Since version 1.0.0 dropdown is always placed below the input.
+   */
+  placement?: "auto" | "bottom";
+  /** Custom prefix for dropdown unique ID.
+   *
+   * @deprecated Since version 1.2.0 it is generated automatically.
+   */
+  customPrefix?: string;
+  /** DOM ID of the wrapper element.
+   *
+   * @deprecated Since version 1.2.0
+   */
+  wrapperId?: string;
+  /** Input field validity state for assistive technologies.
+   *
+   * @deprecated Since version 1.2.0. Use `aria-invalid` instead.
+   */
+  isInvalid?: boolean;
+
+  autoComplete?: string;
+};
+
+export type Events = {
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  onInput?: React.FormEventHandler<HTMLInputElement>;
+};
+
+export type InternalInputProps =
+  | "ref"
+  | "aria-expanded"
+  | "type"
+  | "role"
+  | "autoComplete"
+  | "aria-autocomplete"
+  | "aria-controls";
+
+export type EmailProps = Props &
+  Events &
+  Partial<
+    Omit<
+      React.HTMLProps<HTMLInputElement>,
+      keyof Props | keyof Events | InternalInputProps
+    >
+  >;
+
+export type LocalizedList = {
+  default: string[];
+} & Record<string, string[]>;