@ayasofyazilim/ui 0.0.0

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

@@ -0,0 +1,115 @@
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@repo/ayasofyazilim-ui/components/table";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import {
+  ArrayFieldTemplateProps,
+  buttonId,
+  getTemplate,
+  getUiOptions,
+} from "@rjsf/utils";
+import { PlusCircle } from "lucide-react";
+
+export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate(
+    "ArrayFieldDescriptionTemplate",
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate(
+    "ArrayFieldTitleTemplate",
+    registry,
+    uiOptions
+  );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
+
+  return (
+    <div className="border rounded-md overflow-hidden">
+      <Table key={`array-item-list-${fieldPathId.$id}`} className="caption-top">
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
+        <TableCaption className="border-b mt-0  [&_h5]:font-medium [&_h5]:text-black **:data-[slot=separator]:hidden">
+          <ArrayFieldTitleTemplate
+            fieldPathId={fieldPathId}
+            title={uiOptions.title || title}
+            schema={schema}
+            uiSchema={uiSchema}
+            required={required}
+            registry={registry}
+            optionalDataControl={
+              showOptionalDataControlInTitle ? optionalDataControl : undefined
+            }
+          />
+          <ArrayFieldDescriptionTemplate
+            fieldPathId={fieldPathId}
+            description={uiOptions.description || schema.description}
+            schema={schema}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        </TableCaption>
+        <TableHeader>
+          <TableRow className="divide-x">
+            {Object.keys(
+              (schema?.items as { properties: Record<string, string> })
+                ?.properties || {}
+            ).map((item) => {
+              const itemsUiSchema =
+                typeof uiSchema?.items === "function"
+                  ? undefined
+                  : (uiSchema?.items as
+                      | Record<string, { "ui:title": string }>
+                      | undefined);
+              const title =
+                itemsUiSchema?.[item as string]?.["ui:title"] || item;
+              return (
+                <TableHead
+                  key={item}
+                  className={cn("h-9", !canAdd && "nth-last-2:border-0!")}
+                >
+                  {title}
+                </TableHead>
+              );
+            })}
+            <TableHead className={cn("p-0 size-9")}>
+              {canAdd && (
+                <Button
+                  id={buttonId(fieldPathId, "add")}
+                  onClick={onAddClick}
+                  disabled={disabled || readonly}
+                  className="rounded-none h-full"
+                  variant="ghost"
+                >
+                  <PlusCircle className="size-4" />
+                </Button>
+              )}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody className="[&_tr:last-child>td]:rounded-md">
+          {items}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

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

@@ -0,0 +1,259 @@
+"use client";
+
+import { lodash } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Form } from "@rjsf/shadcn";
+import { customizeValidator } from "@rjsf/validator-ajv8";
+import type { RJSFValidationError, FormValidation } from "@rjsf/utils";
+import { useCallback, useMemo } from "react";
+import {
+  ArrayFieldItemTemplate,
+  ArrayFieldTemplate,
+  BaseInputTemplate,
+  FieldTemplate,
+  ObjectFieldTemplate,
+} from "./fields";
+import { DescriptionFieldTemplate, SubmitButton } from "./templates";
+import { SchemaFormProps } from "./types";
+import {
+  createSchemaWithFilters,
+  removeFieldsfromGenericSchema,
+  isValueEmpty,
+  cleanFormDataForSubmit,
+  cleanHiddenFieldsFromFormData,
+  createRuntimeValidator,
+  createDynamicSchema,
+  applyFieldDependencies,
+} from "./utils";
+import {
+  CheckboxWidget,
+  DateTimeWidget,
+  DateWidget,
+  EmailInputWidget,
+  PasswordInputWidget,
+  PhoneWithParseWidget,
+  PhoneWithValueWidget,
+  SelectWidget,
+  SwitchWidget,
+  URLInputWidget,
+} from "./widgets";
+
+export * from "./custom";
+export * from "./types";
+export * from "./utils";
+export * from "./widgets";
+
+const INTERNAL_WIDGETS = {
+  switch: SwitchWidget,
+  checkbox: CheckboxWidget,
+  date: DateWidget,
+  "date-time": DateTimeWidget,
+  email: EmailInputWidget,
+  password: PasswordInputWidget,
+  phone: PhoneWithValueWidget,
+  "phone-with-parse": PhoneWithParseWidget,
+  select: SelectWidget,
+  url: URLInputWidget,
+};
+
+const INTERNAL_TEMPLATES = {
+  ObjectFieldTemplate,
+  BaseInputTemplate,
+  FieldTemplate,
+  DescriptionFieldTemplate,
+  ButtonTemplates: { SubmitButton },
+};
+
+const FIELDS_TO_REMOVE = ["extraProperties", "additionalProperties"];
+
+export function SchemaForm<T = any>(props: SchemaFormProps<T>) {
+  const {
+    validator: customValidator,
+    schema: originalSchema,
+    widgets,
+    fields,
+    templates,
+    filter,
+    useTableForArrayFields = false,
+    formData,
+    transformErrors: userTransformErrors,
+    runtimeDependencyConfig,
+    fieldDependencies,
+    onSubmit: userOnSubmit,
+    customValidate: userCustomValidate,
+    ...restProps
+  } = props;
+
+  const validatorToUse = useMemo(() => {
+    if (customValidator) return customValidator;
+
+    return customizeValidator({
+      ajvOptionsOverrides: {
+        removeAdditional: true,
+      },
+    });
+  }, [customValidator]);
+
+  const processedSchema = useMemo(() => {
+    let schema = originalSchema;
+
+    if (fieldDependencies) {
+      schema = applyFieldDependencies(schema, fieldDependencies);
+    }
+
+    if (runtimeDependencyConfig && formData) {
+      schema = createDynamicSchema(
+        schema,
+        runtimeDependencyConfig,
+        formData as Record<string, unknown>
+      );
+    }
+
+    if (filter) {
+      schema = createSchemaWithFilters({
+        filter,
+        schema,
+      });
+    }
+    return removeFieldsfromGenericSchema(schema, FIELDS_TO_REMOVE);
+  }, [
+    originalSchema,
+    filter,
+    runtimeDependencyConfig,
+    formData,
+    fieldDependencies,
+  ]);
+
+  const transformErrors = useCallback(
+    (errors: RJSFValidationError[]): RJSFValidationError[] => {
+      const errorsToFilterWhenEmpty = ["format", "minLength", "pattern"];
+
+      let filteredErrors = errors.filter((error) => {
+        if (!error.name || !errorsToFilterWhenEmpty.includes(error.name))
+          return true;
+
+        const path = (error.property || "")
+          .replace(/^\./, "")
+          .split(".")
+          .filter(Boolean);
+
+        if (path.length === 0 || !formData) return true;
+
+        let value: unknown = formData;
+        for (const key of path) {
+          if (value && typeof value === "object" && key in value) {
+            value = (value as Record<string, unknown>)[key];
+          } else {
+            return true;
+          }
+        }
+
+        return !isValueEmpty(value);
+      });
+
+      if (userTransformErrors) {
+        filteredErrors = userTransformErrors(filteredErrors, {} as any);
+      }
+
+      return filteredErrors;
+    },
+    [formData, userTransformErrors]
+  );
+
+  const combinedCustomValidate = useCallback(
+    (formDataToValidate: T, errors: FormValidation<T>): FormValidation<T> => {
+      let validationErrors = errors;
+
+      if (runtimeDependencyConfig) {
+        const runtimeValidator = createRuntimeValidator(
+          runtimeDependencyConfig
+        );
+        validationErrors = runtimeValidator(
+          formDataToValidate as Record<string, unknown>,
+          validationErrors as FormValidation<Record<string, unknown>>
+        ) as FormValidation<T>;
+      }
+
+      if (userCustomValidate) {
+        validationErrors = userCustomValidate(
+          formDataToValidate,
+          validationErrors
+        );
+      }
+
+      return validationErrors;
+    },
+    [runtimeDependencyConfig, userCustomValidate]
+  );
+
+  const memoizedWidgets = useMemo(
+    () => lodash.merge(INTERNAL_WIDGETS, widgets),
+    [widgets]
+  );
+  const memoizedFields = useMemo(() => fields, [fields]);
+  const memoizedTemplates = useMemo(() => {
+    return lodash.merge(
+      INTERNAL_TEMPLATES,
+      templates,
+      useTableForArrayFields
+        ? { ArrayFieldItemTemplate, ArrayFieldTemplate }
+        : {}
+    );
+  }, [templates]);
+
+  const handleSubmit = useCallback(
+    (
+      data: Parameters<NonNullable<typeof userOnSubmit>>[0],
+      event: React.FormEvent<HTMLFormElement>
+    ) => {
+      if (!userOnSubmit) return;
+
+      let submitData = data;
+      let cleanedFormData = data.formData as T;
+
+      if (fieldDependencies && cleanedFormData) {
+        cleanedFormData = cleanHiddenFieldsFromFormData(
+          cleanedFormData as Record<string, unknown>,
+          fieldDependencies
+        ) as T;
+      }
+
+      if (runtimeDependencyConfig && cleanedFormData) {
+        cleanedFormData = cleanFormDataForSubmit(
+          cleanedFormData as Record<string, unknown>,
+          runtimeDependencyConfig
+        ) as T;
+      }
+
+      if (fieldDependencies || runtimeDependencyConfig) {
+        submitData = { ...data, formData: cleanedFormData };
+      }
+
+      userOnSubmit(submitData, event);
+    },
+    [userOnSubmit, runtimeDependencyConfig, fieldDependencies]
+  );
+
+  return (
+    <Form
+      {...restProps}
+      customValidate={
+        runtimeDependencyConfig || userCustomValidate
+          ? combinedCustomValidate
+          : undefined
+      }
+      formContext={{
+        useTableForArrayFields,
+      }}
+      formData={formData}
+      onSubmit={handleSubmit}
+      schema={processedSchema}
+      transformErrors={transformErrors}
+      validator={validatorToUse}
+      widgets={memoizedWidgets}
+      fields={memoizedFields}
+      templates={memoizedTemplates}
+      noHtml5Validate={restProps.noHtml5Validate ?? true}
+      showErrorList={restProps.showErrorList ?? false}
+    />
+  );
+}

package/src/custom/schema-form/templates/description.tsx

@@ -0,0 +1,20 @@
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@repo/ayasofyazilim-ui/components/tooltip";
+import { DescriptionFieldProps } from "@rjsf/utils";
+import { InfoIcon, MessageCircleQuestion } from "lucide-react";
+
+export function DescriptionFieldTemplate(props: DescriptionFieldProps) {
+  const { description, id } = props;
+  if (!description) return null;
+  return (
+    <Tooltip>
+      <TooltipTrigger id={id} type="button">
+        <InfoIcon className="size-3.5 ml-1 text-muted-foreground cursor-help" />
+      </TooltipTrigger>
+      <TooltipContent>{description}</TooltipContent>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,2 @@
+export * from "./submit";
+export * from "./description";

package/src/custom/schema-form/templates/submit.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import {
+  getSubmitButtonOptions,
+  SubmitButtonProps,
+  UISchemaSubmitButtonOptions,
+} from "@rjsf/utils";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+export function SubmitButton(props: SubmitButtonProps) {
+  const { uiSchema } = props;
+  const {
+    norender,
+    props: options,
+    disabled,
+    submitText,
+  }: UISchemaSubmitButtonOptions & {
+    disabled?: boolean;
+  } = getSubmitButtonOptions(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <Button
+      type="submit"
+      className={cn("w-full mt-3", options?.className)}
+      disabled={options?.disabled || disabled}
+    >
+      {submitText || "Submit"}
+    </Button>
+  );
+}

package/src/custom/schema-form/types.ts

@@ -0,0 +1,64 @@
+import { FormProps, IChangeEvent } from "@rjsf/core";
+import { GenericObjectType as _GenericObjectType } from "@rjsf/utils";
+import { UiSchema as BaseUiSchema } from "@rjsf/utils";
+import type {
+  RuntimeDependencyConfig,
+  DependencyConfig,
+} from "./utils/schema-dependency";
+export type GenericObjectType = _GenericObjectType;
+export type {
+  FieldProps,
+  ArrayFieldItemTemplateProps,
+  ArrayFieldTemplateProps,
+  FieldTemplateProps,
+  ObjectFieldTemplateProps,
+  TemplatesType,
+  WidgetProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
+
+export type SchemaFormProps<T = any> = Omit<
+  FormProps<T>,
+  "validator" | "schema" | "uiSchema"
+> & {
+  schema: _GenericObjectType;
+  validator?: FormProps<T>["validator"];
+  uiSchema?: UiSchema | UiSchema<T>;
+  filter?: FilterType<T>;
+  useTableForArrayFields?: boolean;
+  runtimeDependencyConfig?: RuntimeDependencyConfig;
+  fieldDependencies?: DependencyConfig;
+};
+export type RJSFChangeEvent<T = any> = IChangeEvent<T>;
+
+export type CreateFieldConfigWithResourceProps = {
+  extend?: _GenericObjectType;
+  name?: string;
+  resources: _GenericObjectType;
+  schema: _GenericObjectType;
+};
+
+export type UiSchema<T = unknown> = BaseUiSchema<T>;
+
+export type CommonFilterType<T> = {
+  keys: Array<keyof Partial<T> | string>;
+};
+export type FilterType<T> = CommonFilterType<T> & {
+  type: "include" | "exclude" | "fullExclude";
+};
+export type CreateSchemaWithFilters<T> = {
+  filter: FilterType<T>;
+  name?: string;
+  schema: _GenericObjectType;
+};
+
+export type FilteredObject<T> = {
+  [K in keyof T]: T[K] extends object
+    ? T[K] extends Array<any>
+      ? T[K] // Keep arrays as they are
+      : FilteredObject<T[K]>
+    : T[K] extends undefined
+      ? never
+      : T[K];
+};

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

@@ -0,0 +1,4 @@
+export * from "./schemas";
+export * from "./validation";
+export * from "./schema-dependency";
+export { getTemplate, getUiOptions, getChangedFields } from "@rjsf/utils";