@arcote.tech/arc-ds 0.4.1

package/src/ds/form/form-part.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { type ArcObjectAny } from "@arcote.tech/arc";
+import React, { createContext, useCallback, useContext, useState } from "react";
+import { FormContext } from "./form";
+
+export type FormPartContextValue = {
+  registerField: (field: string) => void;
+  unregisterField: (field: string) => void;
+  validatePart: () => boolean;
+};
+
+export const FormPartContext = createContext<FormPartContextValue | null>(null);
+
+export function FormPart({ children }: { children: React.ReactNode }) {
+  const formContext = useContext(FormContext);
+  if (!formContext) {
+    throw new Error("FormPart must be used within a Form");
+  }
+
+  const [registeredFields, setRegisteredFields] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const registerField = useCallback((field: string) => {
+    setRegisteredFields((prev) => new Set([...prev, field]));
+  }, []);
+
+  const unregisterField = useCallback((field: string) => {
+    setRegisteredFields((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(field);
+      return newSet;
+    });
+  }, []);
+
+  const validatePart = useCallback(() => {
+    const { validatePartial } = formContext;
+    return validatePartial(Array.from(registeredFields));
+  }, [formContext, registeredFields]);
+
+  return (
+    <FormPartContext.Provider
+      value={{
+        registerField,
+        unregisterField,
+        validatePart,
+      }}
+    >
+      {children}
+    </FormPartContext.Provider>
+  );
+}
+
+FormPart.displayName = "FormPart";
+
+export function useFormPart<T extends ArcObjectAny>() {
+  const context = useContext(FormPartContext);
+  if (!context) {
+    throw new Error("useFormPart must be used within a FormPart");
+  }
+
+  return context;
+}
+
+export function useFormPartField(fieldName: string) {
+  const context = useContext(FormPartContext);
+
+  if (!context) return null;
+
+  React.useEffect(() => {
+    context.registerField(fieldName);
+    return () => {
+      context.unregisterField(fieldName);
+    };
+  }, [fieldName]);
+
+  return context;
+}

package/src/ds/form/form.tsx

@@ -0,0 +1,299 @@
+"use client";
+import {
+  type $type,
+  type ArcObjectAny,
+  type ArcObjectKeys,
+  type ArcObjectValueByKey,
+  ArcOptional,
+  deepMerge,
+} from "@arcote.tech/arc";
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "react";
+import { FormField } from "./field";
+
+export type FormContextValue<T extends ArcObjectAny> = {
+  values: Partial<Record<ArcObjectKeys<T>, any>>;
+  errors: Partial<Record<ArcObjectKeys<T>, Record<string, any>>>;
+  dirty: Set<ArcObjectKeys<T>>;
+  isSubmitted: boolean;
+  setFieldValue: (field: ArcObjectKeys<T>, value: any) => void;
+  setFieldDirty: (field: ArcObjectKeys<T>) => void;
+  validatePartial: (keys: ArcObjectKeys<T>[]) => boolean;
+};
+
+export type FormRef<T extends ArcObjectAny> = {
+  submit: () => Promise<void>;
+  getValues: () => Partial<$type<T>>;
+  validate: () => boolean;
+  setFieldValue: (field: ArcObjectKeys<T>, value: any) => void;
+};
+
+export type FormFields<T extends ArcObjectAny> = {
+  [K in ArcObjectKeys<T> as Capitalize<`${K}`>]: ArcObjectValueByKey<
+    T,
+    K
+  > extends ArcObjectAny
+    ? ReturnType<
+        typeof FormField<
+          ArcObjectValueByKey<T, K>,
+          FormFields<ArcObjectValueByKey<T, K>>
+        >
+      >
+    : ArcObjectValueByKey<T, K> extends ArcOptional<
+          infer U extends ArcObjectAny
+        >
+      ? ReturnType<typeof FormField<ArcObjectValueByKey<T, K>, FormFields<U>>>
+      : ReturnType<typeof FormField<ArcObjectValueByKey<T, K>>>;
+};
+
+export type FormProps<T extends ArcObjectAny> = {
+  render: (props: FormFields<T>, values: Partial<$type<T>>) => React.ReactNode;
+  schema: T;
+  onSubmit: (values: $type<T>) => void | Promise<void>;
+  onUnvalidatedSubmit?: (values: Partial<$type<T>>, errors: any) => void;
+  defaults?: Partial<$type<T>> | null;
+};
+
+export const FormContext = createContext<FormContextValue<any> | null>(null);
+
+export function useForm<T extends ArcObjectAny>(): FormContextValue<T> {
+  const context = React.useContext(FormContext);
+  if (!context) {
+    throw new Error("useForm must be used within a Form component");
+  }
+  return context;
+}
+
+// Helper function to set nested value using dot notation
+function setNestedValue(obj: any, path: string, value: any): any {
+  const keys = path.split(".");
+  const result = { ...obj };
+  let current = result;
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (
+      !(key in current) ||
+      typeof current[key] !== "object" ||
+      current[key] === null
+    ) {
+      current[key] = {};
+    } else {
+      current[key] = { ...current[key] };
+    }
+    current = current[key];
+  }
+
+  current[keys[keys.length - 1]] = value;
+  return result;
+}
+
+// Helper function to get nested value using dot notation
+function getNestedValue(obj: any, path: string): any {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
+
+export const Form = forwardRef(function Form<T extends ArcObjectAny>(
+  props: FormProps<T>,
+  ref: React.Ref<FormRef<T>>,
+) {
+  const { render, schema, onSubmit, defaults, onUnvalidatedSubmit } = props;
+  const [values, setValues] = useState<Partial<$type<T>>>({});
+  const [errors, setErrors] = useState<
+    Partial<Record<ArcObjectKeys<T>, Record<string, any>>>
+  >({});
+  const [dirty, setDirty] = useState<Set<ArcObjectKeys<T>>>(new Set());
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // Set initial values from defaults prop
+  useEffect(() => {
+    if (defaults) {
+      setValues((prev) => ({
+        ...prev,
+        ...defaults,
+      }));
+    }
+  }, [defaults]); // Update when defaults change
+
+  const validate = useCallback(() => {
+    const errors = schema.validate(values);
+    setErrors(errors as any);
+    setDirty(new Set(schema.entries().map(([key]) => key as ArcObjectKeys<T>)));
+    return Object.values(errors).some((result) => result);
+  }, [schema, values]);
+
+  const validatePartial = useCallback(
+    (keys: ArcObjectKeys<T>[]) => {
+      const partialValues = keys.reduce(
+        (acc, key) => {
+          const value = getNestedValue(values, key as string);
+          if (value !== undefined) {
+            return setNestedValue(acc, key as string, value);
+          }
+          return acc;
+        },
+        {} as Partial<Record<ArcObjectKeys<T>, any>>,
+      );
+      const errors = schema.validatePartial(partialValues);
+      if (errors) setErrors((prev) => deepMerge(prev, errors as any));
+      setDirty((prev) => {
+        const newSet = new Set([...prev, ...keys]);
+        if (
+          newSet.size === prev.size &&
+          [...prev].every((key) => newSet.has(key))
+        ) {
+          return prev;
+        }
+        return newSet;
+      });
+      return Object.values(errors).some((result) => result);
+    },
+    [schema, values, dirty],
+  );
+
+  const setFieldValue = useCallback((field: ArcObjectKeys<T>, value: any) => {
+    setValues((prev) => setNestedValue(prev, field as string, value));
+  }, []);
+
+  const setFieldDirty = useCallback((field: ArcObjectKeys<T>) => {
+    setDirty((prev) => new Set([...prev, field]));
+  }, []);
+
+  // Add effect to revalidate dirty fields when values change
+  useEffect(() => {
+    const partialValues = Array.from(dirty).reduce(
+      (acc, key) => {
+        const value = getNestedValue(values, key as string);
+        if (value !== undefined) {
+          return setNestedValue(acc, key as string, value);
+        }
+        return acc;
+      },
+      {} as Partial<Record<ArcObjectKeys<T>, any>>,
+    );
+    const errors = schema.validatePartial(partialValues);
+    setErrors(errors as any);
+  }, [values, dirty]);
+
+  const handleSubmit = useCallback(
+    async (e?: React.FormEvent) => {
+      if (e) {
+        e.preventDefault();
+      }
+      setIsSubmitted(true);
+
+      const hasErrors = validate();
+      if (!hasErrors) {
+        await onSubmit(values as $type<T>);
+      } else {
+        onUnvalidatedSubmit?.(values, errors);
+      }
+    },
+    [schema, values, onSubmit, validate, errors, onUnvalidatedSubmit],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      submit: handleSubmit,
+      getValues: () => values,
+      validate,
+      setFieldValue,
+    }),
+    [handleSubmit, values, validate],
+  );
+
+  // Recursive function to build field structure according to FormFields type
+  const buildFieldsStructure = useCallback(
+    (element: any, fieldName: string, defaultValue?: any): any => {
+      // Check if it's an optional element first using duck typing
+      // ArcOptional has a unique toJsonSchema() that returns { anyOf: [...] }
+      const isOptional =
+        element?.toJsonSchema &&
+        typeof element.toJsonSchema === "function" &&
+        element.parent !== undefined;
+
+      if (isOptional) {
+        // Unwrap the optional and recurse with the parent element
+        return buildFieldsStructure(
+          (element as any).parent,
+          fieldName,
+          defaultValue,
+        );
+      }
+
+      // Check if it's an object element using duck typing
+      // ArcObject has entries() method
+      const isObject =
+        element?.entries && typeof element.entries === "function";
+
+      if (isObject) {
+        // Build subfields for nested structure
+        const subFields = Object.fromEntries(
+          element.entries().map(([key, value]: [string, any]) => [
+            key.charAt(0).toUpperCase() + key.slice(1), // Capitalize key to match FormFields type
+            buildFieldsStructure(
+              value,
+              fieldName ? `${fieldName}.${key}` : key, // Build dot notation path for nested access
+              defaultValue?.[key],
+            ),
+          ]),
+        );
+
+        // For objects, create FormField with subFields
+        return FormField(fieldName, defaultValue, subFields);
+      }
+
+      // For primitive elements, create FormField
+      return FormField(fieldName, defaultValue);
+    },
+    [],
+  );
+
+  const Fields = useMemo(() => {
+    return Object.fromEntries(
+      schema
+        .entries()
+        .map(([key, value]) => [
+          key.charAt(0).toUpperCase() + key.slice(1),
+          buildFieldsStructure(value, key, defaults?.[key]),
+        ]),
+    );
+  }, [schema, defaults, buildFieldsStructure]);
+
+  const contextValue = useMemo(
+    () => ({
+      values,
+      errors,
+      dirty,
+      isSubmitted,
+      setFieldValue: setFieldValue as any,
+      setFieldDirty: setFieldDirty as any,
+      validatePartial: validatePartial as any,
+    }),
+    [
+      values,
+      errors,
+      dirty,
+      isSubmitted,
+      setFieldValue,
+      setFieldDirty,
+      validatePartial,
+    ],
+  );
+
+  return (
+    <FormContext.Provider value={contextValue}>
+      <form onSubmit={handleSubmit}>{render(Fields as any, values)}</form>
+    </FormContext.Provider>
+  );
+}) as <T extends ArcObjectAny>(
+  props: FormProps<T> & React.RefAttributes<FormRef<T>>,
+) => React.JSX.Element;

package/src/ds/form/index.tsx

@@ -0,0 +1,5 @@
+export * from "./field";
+export * from "./form";
+export * from "./form-part";
+export * from "./message";
+export * from "./fields";

package/src/ds/form/message.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { type HTMLAttributes } from "react";
+import { useFormField } from "./field";
+
+export function FormMessage({ ...props }: HTMLAttributes<HTMLSpanElement>) {
+  const { messages } = useFormField();
+
+  if (messages.length === 0) return null;
+
+  return <span {...props}>{messages[0]}</span>;
+}
+
+FormMessage.displayName = "FormMessage";

package/src/ds/input/input.tsx

@@ -0,0 +1,115 @@
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { useDisplayMode } from "../display-mode";
+import type { InputProps } from "../types";
+
+// ---------------------------------------------------------------------------
+// CVA
+// ---------------------------------------------------------------------------
+
+export const inputVariants = cva(
+  "w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+  {
+    variants: {
+      size: {
+        default: "h-10 md:h-9",
+        sm: "h-9 text-sm md:h-8",
+        xs: "h-7 text-xs px-2 md:h-6",
+        lg: "h-11 md:h-10",
+      },
+      display: {
+        default: "",
+        compact: "h-8 text-sm",
+        minimal: "h-6 text-xs px-2",
+        expanded: "",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      display: "default",
+    },
+  },
+);
+
+// ---------------------------------------------------------------------------
+// Sub-CVA — icon wrapper
+// ---------------------------------------------------------------------------
+
+export const inputIconVariants = cva(
+  "absolute top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none",
+  {
+    variants: {
+      side: {
+        left: "left-2.5",
+        right: "right-2.5",
+      },
+      size: {
+        default: "size-4",
+        sm: "size-3.5",
+        xs: "size-3",
+        lg: "size-4",
+      },
+    },
+    defaultVariants: {
+      side: "left",
+      size: "default",
+    },
+  },
+);
+
+// ---------------------------------------------------------------------------
+// Input
+// ---------------------------------------------------------------------------
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      icon: Icon,
+      iconSide = "left",
+      size: sizeProp,
+      display: displayProp,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const contextMode = useDisplayMode();
+    const display = displayProp ?? contextMode;
+    const size = sizeProp ?? "default";
+
+    if (Icon) {
+      return (
+        <div className="relative">
+          <Icon
+            className={inputIconVariants({
+              side: iconSide,
+              size,
+            })}
+          />
+          <input
+            ref={ref}
+            data-slot="input"
+            className={cn(
+              inputVariants({ size, display }),
+              iconSide === "left" ? "pl-8" : "pr-8",
+              className,
+            )}
+            {...props}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <input
+        ref={ref}
+        data-slot="input"
+        className={cn(inputVariants({ size, display }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = "Input";

package/src/ds/merge-variants.ts

@@ -0,0 +1,26 @@
+import type { CVAVariantOverride } from "./types";
+
+/**
+ * Deep merge CVA variant config.
+ *
+ * Dodaje nowe warianty do istniejących — nie kasuje domyślnych.
+ * Jeśli override zawiera istniejący klucz, nadpisuje go.
+ */
+export function mergeVariants(
+  base: CVAVariantOverride,
+  override: CVAVariantOverride | undefined,
+): CVAVariantOverride {
+  if (!override) return base;
+
+  const result: CVAVariantOverride = {};
+
+  for (const key of Object.keys(base)) {
+    result[key] = { ...base[key] };
+  }
+
+  for (const key of Object.keys(override)) {
+    result[key] = { ...result[key], ...override[key] };
+  }
+
+  return result;
+}