@ayasofyazilim/ui 0.0.0

package/src/custom/password-input.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { InputProps } from "@repo/ayasofyazilim-ui/components/input";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { EyeIcon, EyeOffIcon, RotateCcwKey } from "lucide-react";
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "../components/input-group";
+
+interface PasswordInputProps extends InputProps {
+  passwordLength?: number;
+  showGenerator?: boolean;
+}
+
+const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    { className, showGenerator = false, passwordLength = 10, ...props },
+    ref
+  ) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const internalRef = useRef<HTMLInputElement>(null);
+    const { disabled } = props;
+
+    useImperativeHandle(ref, () => internalRef.current!, []);
+
+    // Memoize character sets to avoid recreation on every render
+    const characterSets = useMemo(() => {
+      const sets = {
+        lowercase: "abcdefghijklmnopqrstuvwxyz",
+        uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+        numbers: "0123456789",
+        symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?",
+      };
+
+      return {
+        ...sets,
+        all: sets.lowercase + sets.uppercase + sets.numbers + sets.symbols,
+      };
+    }, []);
+    // Memoize class names to prevent unnecessary re-renders
+    const inputClassName = useMemo(
+      () =>
+        cn(
+          "hide-password-toggle",
+          showGenerator ? "pr-20" : "pr-10",
+          className
+        ),
+      [showGenerator, className]
+    );
+
+    // Use crypto.getRandomValues for better randomness when available
+    const getRandomInt = useCallback((max: number): number => {
+      if (typeof window !== "undefined" && window.crypto?.getRandomValues) {
+        const array = new Uint32Array(1);
+        window.crypto.getRandomValues(array);
+        return (array[0] ?? 0) % max;
+      }
+      return Math.floor(Math.random() * max);
+    }, []);
+
+    // Fisher-Yates shuffle algorithm for better randomization
+    const shuffleArray = useCallback(
+      (array: string[]): string[] => {
+        const shuffled = [...array];
+        for (let i = shuffled.length - 1; i > 0; i--) {
+          const j = getRandomInt(i + 1);
+          const elemI = shuffled[i];
+          const elemJ = shuffled[j];
+          if (elemI !== undefined && elemJ !== undefined) {
+            [shuffled[i], shuffled[j]] = [elemJ, elemI];
+          }
+        }
+        return shuffled;
+      },
+      [getRandomInt]
+    );
+
+    const generatePassword = useCallback(
+      (length: number = passwordLength): string => {
+        const { lowercase, uppercase, numbers, symbols, all } = characterSets;
+
+        // Ensure minimum requirements
+        const requiredChars = [
+          lowercase[getRandomInt(lowercase.length)],
+          uppercase[getRandomInt(uppercase.length)],
+          numbers[getRandomInt(numbers.length)],
+          symbols[getRandomInt(symbols.length)],
+        ];
+
+        // Fill remaining positions
+        const remainingLength = Math.max(0, length - requiredChars.length);
+        const additionalChars = Array.from(
+          { length: remainingLength },
+          () => all[getRandomInt(all.length)]
+        );
+
+        // Combine and shuffle
+        const allChars = [...requiredChars, ...additionalChars] as string[];
+        return shuffleArray(allChars).join("");
+      },
+      [passwordLength, characterSets, getRandomInt, shuffleArray]
+    );
+
+    // Optimized event dispatching
+    const dispatchInputEvents = useCallback(
+      (input: HTMLInputElement, value: string) => {
+        const _input = input;
+        // Use React's internal event system when possible
+        const descriptor = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value"
+        );
+        if (descriptor?.set) {
+          descriptor.set.call(_input, value);
+        } else {
+          _input.value = value;
+        }
+
+        // Dispatch events in the correct order
+        const inputEvent = new Event("input", { bubbles: true });
+        const changeEvent = new Event("change", { bubbles: true });
+
+        _input.dispatchEvent(inputEvent);
+        _input.dispatchEvent(changeEvent);
+      },
+      []
+    );
+
+    const handleGeneratePassword = useCallback(() => {
+      if (disabled || !internalRef.current) return;
+
+      const newPassword = generatePassword(passwordLength);
+      dispatchInputEvents(internalRef.current, newPassword);
+    }, [disabled, generatePassword, passwordLength, dispatchInputEvents]);
+
+    const togglePasswordVisibility = useCallback(() => {
+      setShowPassword((prev) => !prev);
+    }, []);
+
+    return (
+      <InputGroup>
+        <InputGroupInput
+          placeholder={props.placeholder}
+          className={inputClassName}
+          ref={internalRef}
+          {...props}
+          type={showPassword ? "text" : "password"}
+        />
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            id="toggle-password-visibility-button"
+            variant="ghost"
+            aria-label={showPassword ? "Hide password" : "Show password"}
+            size="icon-xs"
+            onClick={togglePasswordVisibility}
+            disabled={disabled}
+          >
+            {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+          </InputGroupButton>
+        </InputGroupAddon>
+        {showGenerator && (
+          <InputGroupAddon align="inline-start">
+            <InputGroupButton
+              id="generate-password-button"
+              variant="ghost"
+              size="icon-xs"
+              onClick={handleGeneratePassword}
+              disabled={disabled}
+            >
+              <RotateCcwKey />
+              <span className="sr-only">Generate password</span>
+            </InputGroupButton>
+          </InputGroupAddon>
+        )}
+      </InputGroup>
+    );
+  }
+);
+
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };
+export type { PasswordInputProps };

package/src/custom/phone-input.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { ChevronDownIcon, PhoneIcon } from "lucide-react";
+import React, { useState } from "react";
+import PhoneInputWithCountrySelect, {
+  Country,
+  FlagProps,
+  getCountryCallingCode,
+  parsePhoneNumber,
+} from "react-phone-number-input";
+import flags from "react-phone-number-input/flags";
+
+import { Input } from "@repo/ayasofyazilim-ui/components/input";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/select";
+// import { FieldErrorTemplate } from "./schema-form/fields";
+export type PhoneInputValues = {
+  value: string | undefined;
+  parsed: ReturnType<typeof parsePhoneNumber>;
+};
+export type PhoneInputProps = {
+  id: string;
+  name?: string;
+  placeholder?: string;
+  defaultValue?: string | undefined;
+  value?: string;
+  onChange?: (values: PhoneInputValues) => void;
+  disabled?: boolean;
+  className?: string;
+  required?: boolean;
+  defaultCountry?: string;
+};
+export function PhoneInput({
+  id,
+  name,
+  placeholder,
+  defaultValue,
+  value: initialValue,
+  onChange,
+  disabled,
+  required,
+  className,
+  defaultCountry = "US",
+}: PhoneInputProps) {
+  const [value, setValue] = useState(initialValue || defaultValue || "");
+  return (
+    <>
+      <PhoneInputWithCountrySelect
+        className={cn("flex rounded-r-md shadow-xs", className)}
+        international
+        flagComponent={FlagComponent}
+        defaultCountry={defaultCountry as Country}
+        countrySelectComponent={(props) => CountrySelect({ ...props, id })}
+        inputComponent={_PhoneInput}
+        id={id}
+        required={required}
+        data-testid={id}
+        disabled={disabled}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue ?? "");
+          if (onChange) {
+            onChange({
+              value: newValue ?? undefined,
+              parsed: parsePhoneNumber(newValue || ""),
+            });
+          }
+        }}
+      />
+    </>
+  );
+}
+
+// Use forwardRef to support refs from react-phone-number-input
+const _PhoneInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<"input">
+>(({ className, ...props }, ref) => (
+  <Input
+    data-testid={`${props.id}_input`}
+    data-slot="phone-input"
+    className={cn(
+      "-ms-px rounded-s-none rounded-l-none! shadow-none focus-visible:z-10",
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+
+_PhoneInput.displayName = "_PhoneInput";
+
+type CountrySelectProps = {
+  id: string;
+  disabled?: boolean;
+  value: Country;
+  onChange?: (value: Country) => void;
+  options: { label: string; value: Country | undefined }[];
+};
+
+const CountrySelect = ({
+  id,
+  disabled,
+  value,
+  onChange,
+  options,
+}: CountrySelectProps) => {
+  const handleSelect = (value: Country) => {
+    if (!onChange) return;
+    onChange(value);
+  };
+  return (
+    <div className="border-input bg-background text-muted-foreground focus-within:border-ring focus-within:ring-ring/50 hover:bg-accent hover:text-foreground has-aria-invalid:border-destructive/60 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 relative inline-flex items-center self-stretch rounded-s-md border py-2 ps-3 pe-2 transition-[color,box-shadow] outline-none focus-within:z-10 focus-within:ring-[3px] has-disabled:pointer-events-none has-disabled:opacity-50">
+      <div className="inline-flex items-center gap-1" aria-hidden="true">
+        <FlagComponent country={value} countryName={value} aria-hidden="true" />
+        <span className="text-muted-foreground/80">
+          <ChevronDownIcon size={16} aria-hidden="true" />
+        </span>
+      </div>
+      <Select
+        disabled={disabled}
+        value={value}
+        data-testid={`${id}_select`}
+        onValueChange={handleSelect}
+        aria-label="Select country"
+      >
+        <SelectTrigger className="absolute inset-0 text-sm opacity-0">
+          <SelectValue placeholder="Select a country" />
+        </SelectTrigger>
+        <SelectContent>
+          {options
+            .filter((x) => x.value)
+            .map((option, i) => {
+              if (!option.value) return null;
+              return (
+                <SelectItem
+                  key={option.value}
+                  value={option.value}
+                  data-testid={`${id}_${option.value}`}
+                >
+                  {option.label}
+                  {option.value && `+${getCountryCallingCode(option.value)}`}
+                </SelectItem>
+              );
+            })}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
+const FlagComponent = ({ country, countryName }: FlagProps) => {
+  const Flag = flags[country];
+
+  return (
+    <span className="w-5 overflow-hidden rounded-sm">
+      {Flag ? (
+        <Flag title={countryName} />
+      ) : (
+        <PhoneIcon size={16} aria-hidden="true" />
+      )}
+    </span>
+  );
+};

package/src/custom/schema-form/custom/index.tsx

@@ -0,0 +1 @@
+export * from "./label";

package/src/custom/schema-form/custom/label.tsx

@@ -0,0 +1,53 @@
+import { Label } from "@repo/ayasofyazilim-ui/components/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@repo/ayasofyazilim-ui/components/tooltip";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { InfoIcon } from "lucide-react";
+import { JSXElementConstructor, ReactElement } from "react";
+
+export function FieldLabel({
+  id,
+  className,
+  required,
+  label,
+  description,
+}: {
+  label: string | undefined;
+  id: string | undefined;
+  className?: string;
+  required?: boolean;
+  description?:
+    | ReactElement<unknown, string | JSXElementConstructor<any>>
+    | string
+    | undefined;
+}) {
+  if (!label) return null;
+  return (
+    <Label
+      data-testid={`${id}_label`}
+      htmlFor={id}
+      className={cn("flex items-center gap-0 text-nowrap", className)}
+    >
+      {label}
+      {required ? <span className="text-destructive">*</span> : null}
+      {description &&
+      typeof description === "string" &&
+      description.length > 0 ? (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <InfoIcon className="size-3.5 ml-1 text-muted-foreground cursor-help" />
+            </TooltipTrigger>
+            <TooltipContent>{description}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        description
+      )}
+    </Label>
+  );
+}

package/src/custom/schema-form/fields/base-input-field.tsx

@@ -0,0 +1,82 @@
+import { Input } from "@repo/ayasofyazilim-ui/components/input";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import {
+  ariaDescribedByIds,
+  BaseInputTemplateProps,
+  examplesId,
+  getInputProps,
+} from "@rjsf/utils";
+import { ChangeEvent, FocusEvent } from "react";
+
+export function BaseInputTemplate({
+  id,
+  htmlName,
+  placeholder,
+  required,
+  readonly,
+  disabled,
+  type,
+  value,
+  onChange,
+  onChangeOverride,
+  onBlur,
+  onFocus,
+  autofocus,
+  options,
+  schema,
+  rawErrors = [],
+  children,
+  extraProps,
+  className,
+}: BaseInputTemplateProps) {
+  const inputProps = {
+    ...extraProps,
+    ...getInputProps(schema, type, options),
+  };
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(value === "" ? options.emptyValue : value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, target && target.value);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, target && target.value);
+
+  return (
+    <>
+      <Input
+        id={id}
+        name={htmlName || id}
+        type={type}
+        placeholder={placeholder}
+        autoFocus={autofocus}
+        required={required}
+        disabled={disabled}
+        readOnly={readonly}
+        className={cn(
+          { "border-destructive focus-visible:ring-0": rawErrors.length > 0 },
+          className
+        )}
+        list={schema.examples ? examplesId(id) : undefined}
+        {...inputProps}
+        value={value || value === 0 ? value : ""}
+        onChange={onChangeOverride || _onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
+      />
+      {children}
+      {Array.isArray(schema.examples) ? (
+        <datalist id={examplesId(id)}>
+          {(schema.examples as string[])
+            .concat(
+              schema.default && !schema.examples.includes(schema.default)
+                ? ([schema.default] as string[])
+                : []
+            )
+            .map((example: any) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      ) : null}
+    </>
+  );
+}

package/src/custom/schema-form/fields/field.tsx

@@ -0,0 +1,67 @@
+import { TableCell } from "@repo/ayasofyazilim-ui/components/table";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { FieldTemplateProps } from "@rjsf/utils";
+import { FieldLabel } from "../custom";
+
+export const FieldTemplate = (props: FieldTemplateProps) => {
+  const {
+    id,
+    classNames,
+    style,
+    label,
+    help,
+    required,
+    description,
+    errors,
+    children,
+    displayLabel,
+    hidden,
+    schema,
+    registry,
+  } = props;
+
+  const shouldRenderLabel = label && displayLabel && schema.type !== "boolean";
+  if (hidden) return null;
+  const isInArray = /root_\w+_\d+/.test(id);
+  const { useTableForArrayFields } = registry.formContext;
+  if (schema.type === "object" && isInArray && useTableForArrayFields)
+    return children;
+  if (isInArray && useTableForArrayFields)
+    return (
+      <TableCell
+        className={cn(
+          "p-0",
+          "*:data-wrapper:border-0 *:data-wrapper:shadow-none *:data-wrapper:rounded-none *:data-wrapper:justify-center",
+          "**:[[role=combobox]]:border-0 **:[[role=combobox]]:shadow-none **:[[role=combobox]]:rounded-none",
+          "**:data-[slot=input]:border-0 **:data-[slot=input]:shadow-none **:data-[slot=input]:rounded-none",
+          "**:data-rac:border-0 **:data-rac:shadow-none **:data-rac:rounded-none",
+          "*:data-[slot=drawer-trigger]:border-0"
+        )}
+      >
+        {children}
+      </TableCell>
+    );
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1.5 h-max",
+        props.schema.type === "object" && "gap-3",
+        classNames,
+        label
+      )}
+      style={style}
+    >
+      {shouldRenderLabel && (
+        <FieldLabel
+          id={id}
+          label={label}
+          description={description}
+          required={required}
+        />
+      )}
+      {children}
+      {errors}
+      {help}
+    </div>
+  );
+};

package/src/custom/schema-form/fields/index.tsx

@@ -0,0 +1,5 @@
+export * from "./field";
+export * from "./object";
+export * from "./table-array/array-field-item";
+export * from "./table-array/array-field-template";
+export * from "./base-input-field";

package/src/custom/schema-form/fields/object.tsx

@@ -0,0 +1,12 @@
+import { ObjectFieldTemplateProps } from "@rjsf/utils";
+import { Fragment } from "react";
+
+export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
+  return (
+    <>
+      {props.properties.map((element, idx) => (
+        <Fragment key={element.name + idx}>{element.content}</Fragment>
+      ))}
+    </>
+  );
+};

package/src/custom/schema-form/fields/table-array/array-field-item.tsx

@@ -0,0 +1,90 @@
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { ButtonGroup } from "@repo/ayasofyazilim-ui/components/button-group";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { TableCell, TableRow } from "@repo/ayasofyazilim-ui/components/table";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import {
+  ArrayFieldItemTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ClipboardCheck,
+  MoreHorizontal,
+  Trash2,
+} from "lucide-react";
+
+export function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldItemTemplateProps<T, S, F>) {
+  const { children, buttonsProps, hasToolbar } = props;
+  const {
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    onCopyItem,
+    onMoveDownItem,
+    onMoveUpItem,
+    onRemoveItem,
+  } = buttonsProps;
+  const isMultipleToolbar = hasRemove && (hasCopy || hasMoveDown || hasMoveUp);
+  return (
+    <TableRow className={cn("divide-x", props.className)} key={props.itemKey}>
+      {children}
+      <TableCell className="p-0">
+        {hasToolbar && hasRemove && !isMultipleToolbar && (
+          <Button
+            variant="ghost"
+            type="button"
+            onClick={buttonsProps.onRemoveItem}
+          >
+            <Trash2 className="size-4" />
+          </Button>
+        )}
+        {hasToolbar && isMultipleToolbar && (
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" type="button" className="">
+                <MoreHorizontal className="size-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 border-0 min-w-max">
+              <ButtonGroup>
+                {hasCopy && (
+                  <Button variant="outline" onClick={onCopyItem}>
+                    <ClipboardCheck className="size-4" />
+                  </Button>
+                )}
+                {hasMoveUp && (
+                  <Button variant="outline" onClick={onMoveUpItem}>
+                    <ArrowUpIcon className="size-4" />
+                  </Button>
+                )}
+                {hasRemove && (
+                  <Button variant="outline" onClick={onRemoveItem}>
+                    <Trash2 className="size-4" />
+                  </Button>
+                )}
+                {hasMoveDown && (
+                  <Button variant="outline" onClick={onMoveDownItem}>
+                    <ArrowDownIcon className="size-4" />
+                  </Button>
+                )}
+              </ButtonGroup>
+            </PopoverContent>
+          </Popover>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}