@ayasofyazilim/ui 0.0.0

package/src/custom/schema-form/widgets/date.tsx

@@ -0,0 +1,59 @@
+import { DatePicker } from "@repo/ayasofyazilim-ui/custom/date-picker";
+import { WidgetProps } from "@rjsf/utils";
+
+export const DateWidget = (props: WidgetProps) => {
+  const { value, onChange, disabled, uiSchema } = props;
+
+  const initialDate =
+    value && !Number.isNaN(new Date(value).getTime())
+      ? new Date(new Date(value).toJSON())
+      : undefined;
+  return (
+    <DatePicker
+      id={props.id}
+      defaultValue={initialDate}
+      disabled={disabled}
+      classNames={{
+        dateInput: " shadow-xs date-input",
+      }}
+      onChange={(selectedDate) => {
+        if (selectedDate) {
+          if (props.schema.format === "date") {
+            onChange(selectedDate.toISOString().split("T").at(0));
+          } else {
+            onChange(selectedDate.toISOString());
+          }
+        }
+      }}
+    />
+  );
+};
+
+export const DateTimeWidget = (props: WidgetProps) => {
+  const { value, onChange, disabled, uiSchema } = props;
+
+  const initialDate =
+    value && !Number.isNaN(new Date(value).getTime())
+      ? new Date(new Date(value).toJSON())
+      : undefined;
+  return (
+    <DatePicker
+      id={props.id}
+      defaultValue={initialDate}
+      useTime
+      disabled={disabled}
+      classNames={{
+        dateInput: "shadow-xs date-input",
+      }}
+      onChange={(selectedDate) => {
+        if (selectedDate) {
+          if (props.schema.format === "date") {
+            onChange(selectedDate.toISOString().split("T").at(0));
+          } else {
+            onChange(selectedDate.toISOString());
+          }
+        }
+      }}
+    />
+  );
+};

package/src/custom/schema-form/widgets/email.tsx

@@ -0,0 +1,34 @@
+import { EmailInput } from "@repo/ayasofyazilim-ui/custom/email-input";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { WidgetProps } from "@rjsf/utils";
+import { useState } from "react";
+
+export const EmailInputWidget = (props: WidgetProps) => {
+  const {
+    uiSchema,
+    className,
+    onChange,
+    value,
+    defaultValue,
+    disabled,
+    readOnly,
+  } = props;
+
+  const [email, setEmail] = useState(value || "");
+  return (
+    <EmailInput
+      disabled={disabled}
+      id={props.id}
+      value={email}
+      onValueChange={(val) => {
+        setEmail(val);
+        onChange(val);
+      }}
+      defaultValue={defaultValue}
+      readOnly={readOnly}
+      placeholder={props.placeholder || "Try typing 'john@gmail.com'"}
+      className={cn("w-full", className)}
+      suggestions={uiSchema?.["ui:baseList"] ?? []}
+    />
+  );
+};

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

@@ -0,0 +1,10 @@
+export * from "./boolean";
+export * from "./combobox";
+export * from "./date";
+export * from "./email";
+export * from "./password";
+export * from "./url";
+export * from "./phone";
+export * from "./selectable";
+export * from "./select";
+export * from "./string-array";

package/src/custom/schema-form/widgets/password.tsx

@@ -0,0 +1,40 @@
+import { WidgetProps } from "@rjsf/utils";
+import { PasswordInput } from "@repo/ayasofyazilim-ui/custom/password-input";
+
+export const PasswordInputWidget = (props: WidgetProps) => {
+  const {
+    uiSchema,
+    id,
+    className,
+    onChange,
+    value,
+    defaultValue,
+    disabled,
+    readOnly,
+  } = props;
+
+  const required = uiSchema?.["ui:required"] || props.required;
+
+  return (
+    <PasswordInput
+      id={id}
+      data-testid={id}
+      onBlur={props.onBlur && ((event) => props.onBlur(id, event.target.value))}
+      className={className}
+      required={required}
+      onChange={(event) => {
+        if (event.target.value === "") {
+          onChange(undefined);
+        } else {
+          onChange(event.target.value);
+        }
+      }}
+      defaultValue={value || defaultValue}
+      readOnly={readOnly}
+      disabled={disabled}
+      autoComplete={uiSchema?.["ui:autocomplete"]}
+      showGenerator={uiSchema?.["ui:showGenerator"]}
+      passwordLength={uiSchema?.["ui:passwordLength"] || 10}
+    />
+  );
+};

package/src/custom/schema-form/widgets/phone.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  PhoneInput,
+  PhoneInputProps,
+} from "@repo/ayasofyazilim-ui/custom/phone-input";
+import { WidgetProps } from "@rjsf/utils";
+
+export function CustomPhoneFieldWithParse<T>(
+  props: Partial<Omit<WidgetProps<T>, "onChange" | "id">> &
+    Omit<PhoneInputProps, "required" | "defaultValue" | "id">
+) {
+  const required = props.required || props.uiSchema?.["ui:required"];
+  return (
+    <PhoneInput
+      {...props}
+      id={props.id || ""}
+      required={required}
+      defaultValue={undefined}
+    />
+  );
+}
+export const PhoneWithParseWidget = CustomPhoneFieldWithParse;
+
+export const PhoneWithValueWidget = function CustomPhoneFieldWithValue(
+  props: WidgetProps & { defaultCountry?: string }
+) {
+  const { onChange, uiSchema } = props;
+  const required = uiSchema?.["ui:required"] || props.required;
+  return (
+    <PhoneInput
+      {...props}
+      required={required}
+      defaultValue={undefined}
+      onChange={(values) => {
+        onChange(values.value);
+      }}
+    />
+  );
+};

package/src/custom/schema-form/widgets/select.tsx

@@ -0,0 +1,105 @@
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@repo/ayasofyazilim-ui/components/select";
+import { Selectable } from "@repo/ayasofyazilim-ui/custom/selectable";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+
+interface EnumOption {
+  value: string;
+  label: string;
+  // Add other properties if your options have them (e.g., key, rawData)
+}
+
+// 2. Define the shape of the transformed item (optional, but good for clarity)
+interface MappedItem {
+  value: string;
+  label: string;
+  disabled: boolean;
+}
+
+export function SelectWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({
+  id,
+  options,
+  required,
+  disabled,
+  value,
+  multiple,
+  onChange,
+  rawErrors = [],
+  className,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
+  const items: MappedItem[] = (enumOptions as EnumOption[])?.map(
+    ({ value, label }: EnumOption) => {
+      return {
+        value,
+        label,
+        disabled: Array.isArray(enumDisabled) && enumDisabled.includes(value),
+      };
+    }
+  );
+  const cnClassName = cn(
+    "w-full",
+    { "border-destructive": rawErrors.length > 0 },
+    className
+  );
+  return !multiple ? (
+    <Select
+      required={required}
+      value={value}
+      onValueChange={(val) => {
+        onChange(val);
+      }}
+    >
+      <SelectTrigger className={cnClassName} id={id}>
+        <SelectValue placeholder={optEmptyValue} />
+      </SelectTrigger>
+      <SelectContent>
+        {items.map((item) => {
+          return (
+            <SelectItem
+              disabled={item.disabled}
+              key={item.value}
+              value={item.value}
+            >
+              {item.label}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  ) : (
+    <Selectable<MappedItem>
+      id={id}
+      getKey={(opt) => opt.value}
+      getLabel={(opt) => opt.label}
+      options={items}
+      onChange={(val) => {
+        onChange(val.map((item) => item.value));
+      }}
+      disabled={disabled}
+      makeAChoiceText={optEmptyValue}
+    />
+  );
+}

package/src/custom/schema-form/widgets/selectable.tsx

@@ -0,0 +1,25 @@
+import {
+  Selectable,
+  SelectableProps,
+} from "@repo/ayasofyazilim-ui/custom/selectable";
+import { WidgetProps } from "@rjsf/utils";
+
+export function CustomSelectableWidget<T>(
+  selectableProps: Omit<SelectableProps<T>, "onChange">
+) {
+  const { getKey } = selectableProps;
+
+  function Widget(widgetProps: Omit<WidgetProps, "options">) {
+    const handleChange = (values: T[]) => {
+      widgetProps.onChange(values.map((item) => getKey(item)));
+    };
+    return (
+      <Selectable<T>
+        {...widgetProps}
+        {...selectableProps}
+        onChange={handleChange}
+      />
+    );
+  }
+  return Widget;
+}

package/src/custom/schema-form/widgets/string-array.tsx

@@ -0,0 +1,296 @@
+import { ButtonProps } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+} from "@repo/ayasofyazilim-ui/components/input-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@repo/ayasofyazilim-ui/components/tooltip";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { WidgetProps } from "@rjsf/utils";
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import { useCallback, useState } from "react";
+
+interface StringArrayWidgetConfig {
+  classNames?: {
+    container?: string;
+    listContainer?: string;
+    listItem?: string;
+    listItemText?: string;
+    removeButton?: string;
+    inputContainer?: string;
+    input?: string;
+    addButton?: string;
+  };
+  icons?: {
+    add?: React.ComponentType<{ className?: string }>;
+    remove?: React.ComponentType<{ className?: string }>;
+  };
+  iconSizes?: {
+    add?: string;
+    remove?: string;
+  };
+  buttonVariants?: {
+    add?: ButtonProps["variant"];
+    remove?: ButtonProps["variant"];
+  };
+  buttonSizes?: {
+    add?: "icon-xs" | "sm" | "icon-sm" | "xs";
+    remove?: "icon-xs" | "sm" | "icon-sm" | "xs";
+  };
+  maxItems?: number;
+  maxHeight?: string;
+  allowDuplicates?: boolean;
+  trimValues?: boolean;
+  validateValue?: (value: string) => boolean | string;
+  transformValue?: (value: string) => string;
+  renderItem?: (
+    value: string,
+    index: number,
+    onRemove: () => void
+  ) => React.ReactNode;
+  emptyState?: React.ReactNode;
+  placeholder?: string;
+  addButtonLabel?: string;
+  removeButtonLabel?: string;
+  errorMessages?: {
+    duplicate?: string;
+    invalid?: string;
+    maxItems?: (max: number) => string;
+  };
+  messages?: {
+    maxReached?: (max: number) => string;
+  };
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  onAdd?: (value: string) => void;
+  onRemove?: (value: string, index: number) => void;
+  disabled?: boolean;
+}
+
+export function CustomStringArrayWidget(config: StringArrayWidgetConfig = {}) {
+  const {
+    classNames = {},
+    icons = {},
+    iconSizes = { add: "icon-xs", remove: "icon-xs" },
+    buttonVariants = { add: "default", remove: "secondary" },
+    buttonSizes = { add: "icon-xs", remove: undefined },
+    maxItems,
+    maxHeight = "max-h-52",
+    allowDuplicates = false,
+    trimValues = true,
+    validateValue,
+    transformValue,
+    renderItem,
+    emptyState,
+    placeholder,
+    addButtonLabel,
+    removeButtonLabel,
+    errorMessages = {},
+    messages = {},
+    inputProps = {},
+    onAdd,
+    onRemove,
+    disabled = false,
+  } = config;
+
+  const AddIcon = icons.add || PlusIcon;
+  const RemoveIcon = icons.remove || Trash2Icon;
+
+  const Widget = (props: WidgetProps) => {
+    const [inputValue, setInputValue] = useState("");
+    const [error, setError] = useState<string>("");
+
+    const currentValues = props.value || [];
+
+    const handleValue = useCallback(
+      (value: string) => {
+        const processedValue = trimValues ? value.trim() : value;
+
+        if (!processedValue) {
+          return;
+        }
+        const finalValue = transformValue
+          ? transformValue(processedValue)
+          : processedValue;
+        if (!allowDuplicates && currentValues.includes(finalValue)) {
+          if (errorMessages.duplicate) {
+            setError(errorMessages.duplicate);
+          }
+          return;
+        }
+        if (validateValue) {
+          const validationResult = validateValue(finalValue);
+          if (validationResult === false) {
+            if (errorMessages.invalid) {
+              setError(errorMessages.invalid);
+            }
+            return;
+          }
+          if (typeof validationResult === "string") {
+            setError(validationResult);
+            return;
+          }
+        }
+        if (maxItems && currentValues.length >= maxItems) {
+          if (errorMessages.maxItems) {
+            setError(errorMessages.maxItems(maxItems));
+          }
+          return;
+        }
+        setError("");
+        props.onChange([...currentValues, finalValue]);
+        setInputValue("");
+        if (onAdd) {
+          onAdd(finalValue);
+        }
+      },
+      [currentValues, props]
+    );
+
+    const handleRemove = useCallback(
+      (index: number) => {
+        const valueToRemove = currentValues[index];
+        const newValues = currentValues.filter(
+          (_: string, i: number) => i !== index
+        );
+        props.onChange(newValues);
+        if (onRemove) {
+          onRemove(valueToRemove, index);
+        }
+      },
+      [currentValues, props, onRemove]
+    );
+
+    const isDisabled = disabled || props.disabled;
+    const isMaxReached = !!(maxItems && currentValues.length >= maxItems);
+
+    return (
+      <InputGroup
+        className={cn(
+          "p-1.5",
+          currentValues.length === 0 && "p-0",
+          classNames.container
+        )}
+      >
+        <InputGroupAddon
+          align="block-end"
+          className={cn(
+            "flex-col gap-1.5",
+            maxHeight,
+            "overflow-auto p-0",
+            classNames.listContainer || ""
+          )}
+        >
+          {currentValues.length === 0 && emptyState
+            ? emptyState
+            : currentValues.map((value: string, index: number) => {
+                if (renderItem) {
+                  return renderItem(value, index, () => handleRemove(index));
+                }
+
+                return (
+                  <InputGroupText
+                    className={cn(
+                      "bg-accent relative w-full overflow-hidden pl-2 pr-1 min-h-8 h-8 rounded-md",
+                      classNames.listItem || ""
+                    )}
+                    key={`${value}-${index}`}
+                  >
+                    <span
+                      className={cn(
+                        "truncate text-ellipsis",
+                        classNames.listItemText || ""
+                      )}
+                    >
+                      {value}
+                    </span>
+                    <InputGroupButton
+                      className={cn(
+                        "rounded-md ml-auto",
+                        classNames.removeButton || ""
+                      )}
+                      variant={buttonVariants.remove}
+                      size={buttonSizes.remove}
+                      onClick={() => handleRemove(index)}
+                      disabled={isDisabled}
+                      aria-label={removeButtonLabel}
+                    >
+                      <RemoveIcon className={iconSizes.remove} />
+                    </InputGroupButton>
+                  </InputGroupText>
+                );
+              })}
+        </InputGroupAddon>
+        <InputGroupAddon
+          align="block-end"
+          className={cn(
+            "p-0 justify-between",
+            currentValues.length === 0 && "pr-1.5 ",
+            classNames.inputContainer || ""
+          )}
+        >
+          <Tooltip open={!!error}>
+            <TooltipTrigger asChild>
+              <div>
+                <InputGroupInput
+                  className={cn(
+                    "pl-2",
+                    error && "text-destructive",
+                    classNames.input || ""
+                  )}
+                  placeholder={placeholder || props.options.placeholder}
+                  value={inputValue}
+                  onChange={(e) => {
+                    setInputValue(e.target.value);
+                    setError("");
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      handleValue(inputValue);
+                    }
+                  }}
+                  {...inputProps}
+                />
+              </div>
+            </TooltipTrigger>
+            {error && <TooltipContent>{error}</TooltipContent>}
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div>
+                <InputGroupButton
+                  type="button"
+                  variant={buttonVariants.add}
+                  className={cn(
+                    "rounded-md ml-auto",
+                    classNames.addButton || ""
+                  )}
+                  size={buttonSizes.add}
+                  onClick={() => handleValue(inputValue)}
+                  disabled={isDisabled || isMaxReached || !inputValue}
+                  aria-label={addButtonLabel}
+                >
+                  <AddIcon className={iconSizes.add} />
+                  <span className="sr-only">{addButtonLabel}</span>
+                </InputGroupButton>
+              </div>
+            </TooltipTrigger>
+            {isMaxReached && messages.maxReached && (
+              <TooltipContent side="bottom">
+                {messages.maxReached(maxItems!)}
+              </TooltipContent>
+            )}
+          </Tooltip>
+        </InputGroupAddon>
+      </InputGroup>
+    );
+  };
+
+  return Widget;
+}

package/src/custom/schema-form/widgets/url.tsx

@@ -0,0 +1,56 @@
+import {} from "@radix-ui/react-tooltip";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@repo/ayasofyazilim-ui/components/input-group";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { WidgetProps } from "@rjsf/utils";
+
+export const URLInputWidget = (props: WidgetProps) => {
+  const {
+    uiSchema,
+    id,
+    className,
+    onChange,
+    value,
+    defaultValue,
+    disabled,
+    readOnly,
+  } = props;
+
+  const required = uiSchema?.["ui:required"] || props.required;
+
+  return (
+    <InputGroup>
+      <InputGroupInput
+        placeholder="example.com"
+        id={id}
+        data-testid={id}
+        onBlur={
+          props.onBlur && ((event) => props.onBlur(id, event.target.value))
+        }
+        className={cn("pl-1!", className)}
+        required={required}
+        onChange={(event) => {
+          if (event.target.value === "") {
+            onChange(undefined);
+          } else {
+            onChange(event.target.value);
+          }
+        }}
+        defaultValue={value || defaultValue}
+        readOnly={readOnly}
+        disabled={disabled}
+        autoComplete={uiSchema?.["ui:autocomplete"]}
+        onKeyDown={(e) => {
+          e.key === "Enter" && e.preventDefault();
+        }}
+      />
+      <InputGroupAddon>
+        <InputGroupText>{props.placeholder}</InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+};