@ayasofyazilim/ui 0.0.0

package/src/hooks/use-callback-ref.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: never[]) => unknown>(
+  callback: T | undefined
+): T {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)) as T,
+    []
+  );
+}
+
+export { useCallbackRef };

package/src/hooks/use-controllable-state.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import { useCallbackRef } from "./use-callback-ref";
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
+ */
+
+type UseControllableStateParams<T> = {
+  prop?: T | undefined;
+  defaultProp?: T | undefined;
+  onChange?: (state: T) => void;
+};
+
+type SetStateFn<T> = (prevState?: T) => T;
+
+function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange = () => {},
+}: UseControllableStateParams<T>) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+    defaultProp,
+    onChange,
+  });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = useCallbackRef(onChange);
+
+  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> =
+    React.useCallback(
+      (nextValue) => {
+        if (isControlled) {
+          const setter = nextValue as SetStateFn<T>;
+          const value =
+            typeof nextValue === "function" ? setter(prop) : nextValue;
+          if (value !== prop) handleChange(value as T);
+        } else {
+          setUncontrolledProp(nextValue);
+        }
+      },
+      [isControlled, prop, setUncontrolledProp, handleChange]
+    );
+
+  return [value, setValue] as const;
+}
+
+function useUncontrolledState<T>({
+  defaultProp,
+  onChange,
+}: Omit<UseControllableStateParams<T>, "prop">) {
+  const uncontrolledState = React.useState<T | undefined>(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React.useRef(value);
+  const handleChange = useCallbackRef(onChange);
+
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value as T);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+
+  return uncontrolledState;
+}
+
+export { useControllableState };

package/src/hooks/use-debounce.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export function useDebounce<T>(value: T, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/hooks/use-is-visible.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useState } from "react";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useIsVisible(ref: any, threshold = 0.3) {
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry?.isIntersecting || false);
+      },
+      { threshold }
+    );
+
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, threshold]);
+
+  return isIntersecting;
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+
+export function useMediaQuery(query: string) {
+  const [value, setValue] = React.useState(false);
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent) {
+      setValue(event.matches);
+    }
+
+    const result = matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
+
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
+
+  return value;
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/hooks/use-on-window-resize.ts

@@ -0,0 +1,15 @@
+// Tremor Raw useOnWindowResize [v0.0.0]
+
+import * as React from "react";
+
+export const useOnWindowResize = (handler: { (): void }) => {
+  React.useEffect(() => {
+    const handleResize = () => {
+      handler();
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, [handler]);
+};

package/src/hooks/use-scroll.tsx

@@ -0,0 +1,22 @@
+"use client";
+import React from "react";
+
+export function useScroll(threshold: number) {
+  const [scrolled, setScrolled] = React.useState(false);
+
+  const onScroll = React.useCallback(() => {
+    setScrolled(window.scrollY > threshold);
+  }, [threshold]);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [onScroll]);
+
+  // also check on first load
+  React.useEffect(() => {
+    onScroll();
+  }, [onScroll]);
+
+  return scrolled;
+}

package/src/lib/utils.ts

@@ -0,0 +1,61 @@
+import { clsx, type ClassValue } from "clsx";
+import { JSX } from "react";
+import { twMerge } from "tailwind-merge";
+import _ from "lodash";
+export const lodash = _;
+export * from "class-variance-authority";
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatBytes(
+  bytes: number,
+  opts: {
+    decimals?: number;
+    sizeType?: "accurate" | "normal";
+  } = {}
+) {
+  const { decimals = 0, sizeType = "normal" } = opts;
+
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const accurateSizes = ["Bytes", "KiB", "MiB", "GiB", "TiB"];
+  if (bytes === 0) return "0 Byte";
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${
+    sizeType === "accurate" ? accurateSizes[i] ?? "Bytest" : sizes[i] ?? "Bytes"
+  }`;
+}
+
+export function replacePlaceholders(
+  string: string,
+  replacements: { holder: string; replacement: string | React.ReactNode }[]
+): (string | React.ReactNode | JSX.Element)[] {
+  if (!string || !replacements || replacements.length === 0) {
+    return [];
+  }
+
+  let result: (string | React.ReactNode | JSX.Element)[] = [string];
+
+  replacements.forEach(({ holder, replacement }) => {
+    const updatedResult: (string | React.ReactNode)[] = [];
+
+    result.forEach((element) => {
+      if (typeof element === "string") {
+        const parts: string[] = (element as string).split(holder);
+        parts.forEach((part, i) => {
+          if (i !== parts.length - 1) {
+            updatedResult.push(part, replacement);
+          } else {
+            updatedResult.push(part);
+          }
+        });
+      } else {
+        updatedResult.push(element);
+      }
+    });
+
+    result = updatedResult;
+  });
+
+  return result;
+}

package/src/lib/zod.ts

@@ -0,0 +1,2 @@
+export { z } from "zod";
+export { zodResolver } from "@hookform/resolvers/zod";

package/src/styles/core.css

@@ -0,0 +1,57 @@
+* {
+  scroll-behavior: smooth;
+}
+
+.no-visible-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+.no-visible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+body {
+  height: 100%;
+}
+
+*:has(> .form-ready-component) {
+  overflow: hidden;
+}
+.hide-password-toggle::-ms-reveal,
+.hide-password-toggle::-ms-clear {
+  visibility: hidden;
+  pointer-events: none;
+  display: none;
+}
+
+.loading-stroke path {
+  stroke-width: 1;
+  animation: loadingStroke 4s infinite;
+}
+
+@keyframes loadingStroke {
+  0% {
+    stroke-dasharray: 360px, 0px;
+    stroke-dashoffset: 460px;
+  }
+
+  50% {
+    stroke-dasharray: 360px, 100px;
+  }
+
+  100% {
+    stroke-dasharray: 360px, 0px;
+  }
+}
+.loading-text {
+  --ch-size: 1ch;
+  clip-path: inset(0 var(--ch-size) 0 0);
+  animation: l 2s steps(4, jump-none) infinite;
+}
+
+@keyframes l {
+  to {
+    clip-path: inset(0);
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "./core.css";
+@source "../../../../packages/ui/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  :where(button, [role="button"]):not([disabled]) {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,217 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { EmailInput } from "../custom/email-input";
+
+describe("EmailInput", () => {
+  it("renders input field", () => {
+    render(<EmailInput id="email" />);
+    const input = screen.getByTestId("email") as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    expect(input.type).toBe("email");
+  });
+
+  it("renders with label", () => {
+    render(<EmailInput id="email" label="Email Address" />);
+    expect(screen.getByText("Email Address")).toBeInTheDocument();
+  });
+
+  it("shows required asterisk when required", () => {
+    render(<EmailInput id="email" label="Email" required />);
+    const label = screen.getByText("Email");
+    expect(label).toHaveClass("after:content-['*']");
+  });
+
+  it("accepts typed input", async () => {
+    const user = userEvent.setup();
+    render(<EmailInput id="email" />);
+    const input = screen.getByTestId("email") as HTMLInputElement;
+
+    await user.type(input, "test@example.com");
+    expect(input.value).toBe("test@example.com");
+  });
+
+  it("calls onValueChange when typing", async () => {
+    const handleChange = jest.fn();
+    const user = userEvent.setup();
+    render(<EmailInput id="email" onValueChange={handleChange} />);
+    const input = screen.getByTestId("email");
+
+    await user.type(input, "test");
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange).toHaveBeenLastCalledWith("test");
+  });
+
+  it("shows suggestions when typing @ symbol", async () => {
+    const user = userEvent.setup();
+    render(<EmailInput id="email" />);
+    const input = screen.getByTestId("email");
+
+    await user.type(input, "test@");
+
+    await waitFor(() => {
+      expect(screen.getByTestId("email_suggestion_0")).toBeInTheDocument();
+    });
+  });
+
+  it("filters suggestions based on domain input", async () => {
+    const user = userEvent.setup();
+    render(<EmailInput id="email" />);
+    const input = screen.getByTestId("email");
+
+    await user.type(input, "test@gm");
+
+    await waitFor(() => {
+      const suggestion = screen.getByTestId("email_suggestion_0");
+      expect(suggestion.textContent).toContain("gmail");
+    });
+  });
+
+  it("applies suggestion when clicked", async () => {
+    const user = userEvent.setup();
+    render(<EmailInput id="email" />);
+    const input = screen.getByTestId("email") as HTMLInputElement;
+
+    await user.type(input, "test@");
+
+    await waitFor(() => {
+      expect(screen.getByTestId("email_suggestion_0")).toBeInTheDocument();
+    });
+
+    const suggestion = screen.getByTestId("email_suggestion_0");
+    await user.click(suggestion);
+
+    expect(input.value).toContain("@");
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("email_suggestion_0")
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("navigates suggestions with arrow keys", async () => {
+    const user = userEvent.setup();
+    render(<EmailInput id="email" />);
+    const input = screen.getByTestId("email");
+
+    await user.type(input, "test@");
+
+    await waitFor(() => {
+      expect(screen.getByTestId("email_suggestion_0")).toBeInTheDocument();
+    });
+
+    await user.keyboard("{ArrowDown}");
+    const firstSuggestion = screen.getByTestId("email_suggestion_0");
+    expect(firstSuggestion).toHaveClass("bg-accent");
+
+    await user.keyboard("{ArrowDown}");
+    const secondSuggestion = screen.getByTestId("email_suggestion_1");
+    expect(secondSuggestion).toHaveClass("bg-accent");
+  });
+
+  it("applies suggestion with Enter key", async () => {
+    const user = userEvent.setup();
+    render(<EmailInput id="email" />);
+    const input = screen.getByTestId("email") as HTMLInputElement;
+
+    await user.type(input, "test@");
+
+    await waitFor(() => {
+      expect(screen.getByTestId("email_suggestion_0")).toBeInTheDocument();
+    });
+
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    expect(input.value).toContain("@");
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("email_suggestion_0")
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("closes suggestions with Escape key", async () => {
+    const user = userEvent.setup();
+    render(<EmailInput id="email" />);
+    const input = screen.getByTestId("email");
+
+    await user.type(input, "test@");
+
+    await waitFor(() => {
+      expect(screen.getByTestId("email_suggestion_0")).toBeInTheDocument();
+    });
+
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("email_suggestion_0")
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it("accepts custom suggestions", async () => {
+    const user = userEvent.setup();
+    const customDomains = ["custom.com", "example.org"];
+    render(<EmailInput id="email" suggestions={customDomains} />);
+    const input = screen.getByTestId("email");
+
+    await user.type(input, "test@custom");
+
+    await waitFor(() => {
+      const suggestion = screen.getByTestId("email_suggestion_0");
+      expect(suggestion.textContent).toContain("custom.com");
+    });
+  });
+
+  it("forwards ref correctly", () => {
+    const ref = React.createRef<HTMLInputElement>();
+    render(<EmailInput id="email" ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it("disables input when disabled prop is true", () => {
+    render(<EmailInput id="email" disabled />);
+    const input = screen.getByTestId("email");
+    expect(input).toBeDisabled();
+  });
+
+  it("updates value when controlled", () => {
+    const { rerender } = render(
+      <EmailInput id="email" value="test@example.com" onChange={() => {}} />
+    );
+    const input = screen.getByTestId("email") as HTMLInputElement;
+    expect(input.value).toBe("test@example.com");
+
+    rerender(
+      <EmailInput id="email" value="new@example.com" onChange={() => {}} />
+    );
+    expect(input.value).toBe("new@example.com");
+  });
+
+  it("hides suggestions when clicking outside", async () => {
+    const user = userEvent.setup();
+    render(
+      <div>
+        <EmailInput id="email" />
+        <button>Outside</button>
+      </div>
+    );
+    const input = screen.getByTestId("email");
+
+    await user.type(input, "test@");
+
+    await waitFor(() => {
+      expect(screen.getByTestId("email_suggestion_0")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("Outside"));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("email_suggestion_0")
+      ).not.toBeInTheDocument();
+    });
+  });
+});