@ayasofyazilim/ui 0.0.0

package/src/custom/schema-form/utils/schemas.ts

@@ -0,0 +1,289 @@
+import { GenericObjectType } from "@rjsf/utils";
+import {
+  CreateFieldConfigWithResourceProps,
+  FilteredObject,
+  FilterType,
+  UiSchema,
+} from "../types";
+import { lodash } from "@repo/ayasofyazilim-ui/lib/utils";
+
+/**
+ *
+ */
+export function bulkCreateUiSchema<T>({
+  elements,
+  config,
+}: {
+  config: UiSchema<T>;
+  elements: Array<keyof T>;
+}): UiSchema<T> {
+  const uiSchema = {};
+  for (const element of elements) {
+    Object.assign(uiSchema, { [element]: config });
+  }
+  return filterUndefinedAndEmpty(uiSchema);
+}
+
+/**
+ * Creates a UiSchema with internationalization resources and optional overrides.
+ */
+export function createUiSchemaWithResource<T = unknown>({
+  resources,
+  schema,
+  extend,
+  name = "Form",
+}: CreateFieldConfigWithResourceProps): UiSchema<T> {
+  const baseUiSchema = uiSchemaFromSchema({
+    object: schema,
+    resources,
+    name,
+    constantKey: name,
+  });
+
+  const targetSchema = lodash.get(baseUiSchema, name, {});
+
+  if (extend) {
+    // Lodash merge handles deep merging recursively and safely
+    return lodash.merge({}, targetSchema, extend);
+  }
+
+  return targetSchema;
+}
+
+/**
+ * Filters a JSON Schema based on include/exclude/fullExclude rules.
+ */
+export function createSchemaWithFilters<T = string>({
+  schema,
+  filter,
+}: {
+  filter: FilterType<T>;
+  schema: GenericObjectType;
+}): GenericObjectType {
+  const { keys, type } = filter;
+  // Deep clone first to avoid mutating the original schema reference
+  const modifiedSchema = lodash.cloneDeep(schema);
+
+  const isWildCard = (key: string) => lodash.some(keys, (k) => k === `*${key}`);
+  const hasKey = (key: string) => lodash.includes(keys, key);
+
+  const filterRecursive = (
+    currentObj: GenericObjectType,
+    parentPath: string = ""
+  ): void => {
+    if (!currentObj.properties && !currentObj.items) return;
+
+    // Handle Properties
+    if (currentObj.properties) {
+      const keptKeys: string[] = [];
+
+      currentObj.properties = lodash.transform(
+        currentObj.properties,
+        (result, property, key) => {
+          const propertyKey = String(key);
+          const currentPath = parentPath
+            ? `${parentPath}.${propertyKey}`
+            : propertyKey;
+
+          let shouldKeep = false;
+
+          switch (type) {
+            case "include":
+              // Keep if explicitly included or if it's a wildcard match
+              shouldKeep = hasKey(currentPath) || isWildCard(currentPath);
+              break;
+            case "exclude":
+            case "fullExclude":
+              // Keep if NOT in the exclude list
+              shouldKeep = !hasKey(currentPath);
+              break;
+          }
+
+          if (shouldKeep) {
+            result[propertyKey] = property;
+            keptKeys.push(propertyKey);
+
+            // Recursive step for Objects and Arrays
+            if (property.type === "object") {
+              filterRecursive(property, currentPath);
+            } else if (property.type === "array" && property.items) {
+              filterRecursive(property.items, currentPath);
+            }
+          }
+        },
+        {} as GenericObjectType["properties"]
+      );
+
+      // Update or Remove 'required' array based on kept keys
+      if (currentObj.required) {
+        currentObj.required = lodash.intersection(
+          currentObj.required,
+          keptKeys
+        );
+        if (lodash.isEmpty(currentObj.required)) {
+          delete currentObj.required;
+        }
+      }
+    }
+  };
+
+  filterRecursive(modifiedSchema);
+  return modifiedSchema;
+}
+
+/**
+ * Recursively removes specific keys from any object or array.
+ */
+export function removeFieldsfromGenericSchema<T>(
+  obj: T,
+  keysToRemove: string | string[]
+): T {
+  const keysArray = lodash.castArray(keysToRemove);
+
+  const transform = (value: unknown): unknown => {
+    if (lodash.isArray(value)) {
+      return lodash.map(value, transform);
+    }
+
+    if (lodash.isPlainObject(value)) {
+      return lodash.transform(
+        value as Record<string, unknown>,
+        (result, val, key) => {
+          if (!keysArray.includes(key)) {
+            result[key] = transform(val);
+          }
+        },
+        {} as Record<string, unknown>
+      );
+    }
+
+    return value;
+  };
+
+  return transform(obj) as T;
+}
+
+/**
+ * Merges two UISchema objects recursively.
+ */
+
+export function mergeUISchemaObjects<
+  T extends UiSchema<T> | UiSchema,
+  U extends UiSchema<T> | UiSchema,
+>(source: T, target: U): T & U {
+  // We pass {} as the first argument to ensure we create a new object
+  // rather than mutating 'source'.
+  return lodash.merge({}, source, target) as T & U;
+}
+
+/**
+ * Helper: Generates UiSchema structure from JSON Schema + Resources
+ */
+function uiSchemaFromSchema({
+  name,
+  object,
+  resources,
+  constantKey,
+}: {
+  constantKey: string;
+  name: string;
+  object: GenericObjectType;
+  resources: Record<string, string>;
+}) {
+  const uiSchema: Record<string, any> = { [name]: {} };
+
+  // 1. Handle Objects
+  if (object?.type === "object" && object.properties) {
+    lodash.forEach(object.properties, (propValue, propKey) => {
+      const nestedSchema = uiSchemaFromSchema({
+        name: propKey,
+        object: propValue,
+        resources,
+        constantKey: `${constantKey}.${propKey}`,
+      });
+
+      // Merge nested results into the current name scope
+      Object.assign(uiSchema[name], {
+        "ui:title": resources[constantKey],
+        ...nestedSchema,
+      });
+    });
+  }
+
+  // 2. Handle Arrays
+  else if (object?.type === "array" && object.items?.properties) {
+    const items = lodash.reduce(
+      object.items.properties,
+      (acc, propValue, propKey) => {
+        const nested = uiSchemaFromSchema({
+          name: propKey,
+          object: propValue,
+          resources,
+          constantKey: `${constantKey}.${propKey}`,
+        });
+        return lodash.merge(acc, nested);
+      },
+      {}
+    );
+
+    Object.assign(uiSchema[name], {
+      "ui:title": resources[constantKey] || lodash.startCase(name),
+      items,
+    });
+  }
+
+  // 3. Handle Primitives (Plain fields)
+  else if (object) {
+    const getResource = (suffix?: string) =>
+      resources[suffix ? `${constantKey}.${suffix}` : constantKey];
+
+    const uiSchemaItem: Record<string, any> = {
+      "ui:title": getResource() || lodash.startCase(name),
+      "ui:placeholder": getResource("ui:placeholder"),
+    };
+
+    if (object.enum) {
+      uiSchemaItem["ui:enumNames"] = object.enum.map(
+        (key: string) => resources[`${constantKey}.${key}`] || key
+      );
+      uiSchemaItem["ui:options"] = {
+        label: true,
+        emptyValue: getResource("emptyValue"),
+        searchPlaceholder: getResource("searchPlaceholder"),
+        searchResultLabel: getResource("searchResultLabel"),
+      };
+    }
+
+    Object.assign(uiSchema[name], uiSchemaItem);
+  }
+
+  return filterUndefinedAndEmpty(uiSchema);
+}
+
+/**
+ * Recursively filters out undefined values and empty objects/arrays
+ */
+function filterUndefinedAndEmpty<T>(obj: T): FilteredObject<T> {
+  if (!lodash.isObject(obj)) {
+    return obj as FilteredObject<T>;
+  }
+
+  // Use omitBy to filter undefined, then mapValues to recurse
+  const result = lodash.transform(
+    obj as unknown as object,
+    (acc: any, value, key) => {
+      const filteredValue = filterUndefinedAndEmpty(value);
+
+      const isValid =
+        filteredValue !== undefined &&
+        !(lodash.isPlainObject(filteredValue) && lodash.isEmpty(filteredValue));
+
+      if (isValid) {
+        acc[key] = filteredValue;
+      }
+    },
+    {}
+  );
+
+  return result as FilteredObject<T>;
+}

package/src/custom/schema-form/utils/validation.ts

@@ -0,0 +1,23 @@
+import { FormValidation } from "@rjsf/utils";
+
+export function customPasswordValidate<T>({
+  formData,
+  keyOne,
+  keyTwo,
+  errorMessage,
+  errors,
+}: {
+  formData: T | undefined;
+  keyOne: keyof T;
+  keyTwo: keyof T;
+  errorMessage: string;
+  errors: FormValidation<T>;
+}): FormValidation<T> {
+  if (!formData) {
+    return errors;
+  }
+  if (formData[keyOne] !== formData[keyTwo]) {
+    errors[keyTwo]?.addError(errorMessage);
+  }
+  return errors;
+}

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

@@ -0,0 +1,77 @@
+import { Checkbox } from "@repo/ayasofyazilim-ui/components/checkbox";
+import { Label } from "@repo/ayasofyazilim-ui/components/label";
+import { Switch } from "@repo/ayasofyazilim-ui/components/switch";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { WidgetProps } from "@rjsf/utils";
+import { ReactNode } from "react";
+
+export const SwitchWidget = (props: WidgetProps) => {
+  const { id, name, onChange, value, defaultValue, disabled, uiSchema } = props;
+  const required = uiSchema?.["ui:required"] || props.required;
+  return (
+    <BooleanWrapper widgetProps={props}>
+      <Switch
+        id={id}
+        data-testid={id}
+        onCheckedChange={() => {
+          onChange(!value);
+        }}
+        checked={value}
+        defaultValue={value || defaultValue}
+        name={name}
+        disabled={disabled}
+        required={required}
+      />
+    </BooleanWrapper>
+  );
+};
+
+export const CheckboxWidget = (props: WidgetProps) => {
+  const { id, name, onChange, value, defaultValue, disabled, uiSchema } = props;
+  const required = uiSchema?.["ui:required"] || props.required;
+  return (
+    <BooleanWrapper widgetProps={props}>
+      <Checkbox
+        id={id}
+        data-testid={id}
+        onCheckedChange={() => {
+          onChange(!value);
+        }}
+        checked={value}
+        defaultValue={value || defaultValue}
+        name={name}
+        disabled={disabled}
+        required={required}
+      />
+    </BooleanWrapper>
+  );
+};
+
+function BooleanWrapper({
+  children,
+  widgetProps,
+}: {
+  children: ReactNode;
+  widgetProps: WidgetProps;
+}) {
+  const { id, className, label, uiSchema } = widgetProps;
+  const required = uiSchema?.["ui:required"] || widgetProps.required;
+  const displayLabel = uiSchema?.displayLabel;
+  return (
+    <div
+      data-wrapper="boolean"
+      className={cn(
+        "flex items-center gap-2 h-9 px-2 border rounded-md shadow-xs",
+        className
+      )}
+    >
+      {children}
+      {displayLabel !== false && (
+        <Label id={id} htmlFor={id} className="w-full">
+          {label}
+          {required && "*"}
+        </Label>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,274 @@
+import { ChevronsUpDown } from "lucide-react";
+import { WidgetProps } from "@rjsf/utils";
+import { CheckIcon } from "lucide-react";
+import { Dispatch, ReactNode, SetStateAction, useState } from "react";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from "@repo/ayasofyazilim-ui/components/drawer";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { useMediaQuery } from "@repo/ayasofyazilim-ui/hooks/use-media-query";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+type BadgeOptions = { className?: string; showValue?: boolean; label?: string };
+
+type CustomComboboxProps<T> = {
+  emptyValue?: string;
+  list: Array<T> | null | undefined;
+  onValueChange?: Dispatch<SetStateAction<T | null | undefined>>;
+  searchPlaceholder?: string;
+  searchResultLabel?: string;
+  selectIdentifier: keyof T;
+  selectLabel: keyof T;
+  disabledItems?: T[keyof T][];
+  badges?: Partial<Record<keyof T, BadgeOptions>>;
+  customItemRenderer?: (values: T) => ReactNode | undefined | string;
+} & WidgetProps;
+
+export function CustomCombobox<T>(props: CustomComboboxProps<T>) {
+  const {
+    value,
+    defaultValue,
+    list,
+    selectIdentifier,
+    selectLabel,
+    disabled,
+    emptyValue = "Please select",
+  } = props;
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [open, setOpen] = useState(false);
+  const fieldValue = value || defaultValue;
+  const fieldValueDisplayName = list?.find(
+    (x) => x[selectIdentifier] === fieldValue
+  )?.[selectLabel];
+  const DesktopContent = (
+    <Popover open={open} onOpenChange={setOpen} modal>
+      <PopoverTrigger
+        asChild
+        disabled={disabled}
+        className={cn(disabled && "cursor-not-allowed")}
+      >
+        <Button
+          id={props.id}
+          data-testid={props.id}
+          type="button"
+          variant="outline"
+          role="combobox"
+          className={cn(
+            "text-muted-foreground w-full justify-between font-normal shadow-xs hover:bg-white overflow-hidden",
+            fieldValueDisplayName && "text-foreground",
+            disabled &&
+              "disabled:pointer-events-auto hover:bg-background hover:text-muted-foreground"
+          )}
+        >
+          <span className="truncate has-[role=dialog]:max-w-xs">
+            {typeof fieldValueDisplayName !== "undefined" &&
+            fieldValueDisplayName !== null
+              ? fieldValueDisplayName.toString()
+              : emptyValue}
+          </span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0">
+        <List {...props} setOpen={setOpen} />
+      </PopoverContent>
+    </Popover>
+  );
+
+  const MobileContent = (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button
+          data-testid={props.id}
+          type="button"
+          disabled={disabled}
+          variant="outline"
+          className={cn(
+            "text-muted-foreground w-full justify-between font-normal shadow-xs hover:bg-white",
+            fieldValueDisplayName && "text-black"
+          )}
+        >
+          {fieldValueDisplayName
+            ? fieldValueDisplayName.toString()
+            : emptyValue}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mt-4 border-t">
+          <List {...props} setOpen={setOpen} />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  return isDesktop ? DesktopContent : MobileContent;
+}
+
+function List<T>({
+  setOpen,
+  ...props
+}: CustomComboboxProps<T> & {
+  setOpen: (open: boolean) => void;
+}) {
+  const {
+    uiSchema,
+    onChange,
+    value,
+    list,
+    selectIdentifier,
+    selectLabel,
+    searchPlaceholder,
+    searchResultLabel,
+    onValueChange,
+    badges,
+    customItemRenderer,
+  } = props;
+  const uiOptions = uiSchema?.["ui:options"];
+  return (
+    <Command
+      filter={(value, search) => {
+        const filterResult = list?.find(
+          (i) =>
+            (i[selectIdentifier] as string).toString()?.toLocaleLowerCase() ===
+            value.toLocaleLowerCase()
+        )?.[selectLabel] as string;
+        if (
+          value.includes(search) ||
+          filterResult?.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+        )
+          return 1;
+        return 0;
+      }}
+    >
+      <CommandInput
+        data-testid={`${props.id}_search`}
+        placeholder={searchPlaceholder || "Search..."}
+        className="h-9"
+      />
+      <CommandList className="w-full min-w-full max-w-full">
+        <CommandEmpty>{searchResultLabel || "0 search result."}</CommandEmpty>
+        <CommandGroup>
+          {list?.map((item: T, index) => (
+            <CommandItem
+              data-testid={`${props.id}_${index}`}
+              disabled={props.disabledItems?.includes(item[selectIdentifier])}
+              onSelect={() => {
+                onChange(
+                  uiOptions?.allowEmpty !== false
+                    ? item[selectIdentifier] === value
+                      ? undefined
+                      : item[selectIdentifier]
+                    : item[selectIdentifier]
+                );
+                if (onValueChange)
+                  onValueChange(
+                    list.find((i) => i[selectIdentifier] === value)
+                  );
+                setOpen(false);
+              }}
+              key={JSON.stringify(item[selectIdentifier])}
+              value={item[selectIdentifier] as string}
+            >
+              {item[selectIdentifier] === value && (
+                <CheckIcon className={cn("mr-2 h-4 w-4")} />
+              )}
+              {customItemRenderer ? (
+                customItemRenderer(item)
+              ) : (
+                <>
+                  {item[selectLabel] as string}
+                  {badges && (
+                    <div className="ml-auto">
+                      {Object.keys(badges).map((badgeKey) => {
+                        const badgeOptions = badges[badgeKey as keyof T];
+                        if (!badgeOptions) return null;
+                        return (
+                          <Badge
+                            key={badgeKey}
+                            variant="outline"
+                            className={cn("ml-2", badgeOptions.className)}
+                          >
+                            {badgeOptions.showValue !== false &&
+                              (item[badgeKey as keyof T] as string)}
+                            {badgeOptions.label && badgeOptions.label}
+                          </Badge>
+                        );
+                      })}
+                    </div>
+                  )}
+                </>
+              )}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+
+export function CustomComboboxWidget<T>({
+  languageData,
+  selectLabel,
+  selectIdentifier,
+  list,
+  onChange,
+  disabledItems,
+  badges,
+  customItemRenderer,
+}: {
+  languageData: {
+    "Select.Placeholder": string;
+    "Select.ResultLabel": string;
+    "Select.EmptyValue": string;
+  };
+  selectIdentifier: keyof T;
+  selectLabel: keyof T;
+  list: T[];
+  onChange?: (value: T | null | undefined) => void;
+  disabledItems?: T[keyof T][];
+  badges?: CustomComboboxProps<T>["badges"];
+  customItemRenderer?: CustomComboboxProps<T>["customItemRenderer"];
+}) {
+  function Widget(props: WidgetProps) {
+    const { uiSchema } = props;
+    const uiList = uiSchema?.["ui:optionList"];
+    return (
+      <CustomCombobox<T>
+        {...props}
+        list={uiList || list}
+        onChange={(value) => {
+          props.onChange(value);
+          if (onChange) {
+            onChange(list.find((i) => i[selectIdentifier] === value));
+          }
+        }}
+        customItemRenderer={customItemRenderer}
+        searchPlaceholder={languageData["Select.Placeholder"]}
+        searchResultLabel={languageData["Select.ResultLabel"]}
+        emptyValue={languageData["Select.EmptyValue"]}
+        selectIdentifier={selectIdentifier}
+        selectLabel={selectLabel}
+        disabledItems={disabledItems}
+        badges={badges}
+      />
+    );
+  }
+  return Widget;
+}