formik-form-components 2.0.2 → 2.0.3

package/src/Form/AppUploadFile.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import React from "react";
+import { useFormikContext, FormikValues } from "formik";
+import type { UploadProps } from "../upload";
+import { Upload } from "../upload";
+
+interface FileWithPreview {
+  file?: File;
+  preview?: string;
+  name: string;
+  size: number;
+  type: string;
+}
+
+export const base64toBlob = ({
+  b64Data,
+  sliceSize = 512,
+  forcedMimeType,
+}: {
+  b64Data: string;
+  sliceSize?: number;
+  forcedMimeType?: string;
+}): Blob => {
+  const mimeType =
+    forcedMimeType ??
+    b64Data.match(/[^:]\w+\/[\w-+.]+(?=;|,)/)?.[0] ??
+    "application/octet-stream";
+
+  const base64 = b64Data.replace(/^data:.*,/, "");
+  const byteCharacters = atob(base64);
+  const byteArrays: Uint8Array[] = [];
+
+  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+    const slice = byteCharacters.slice(offset, offset + sliceSize);
+    const byteNumbers = new Array(slice.length);
+
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
+
+    byteArrays.push(new Uint8Array(byteNumbers));
+  }
+
+  return new Blob(byteArrays as BlobPart[], { type: mimeType });
+};
+
+export const blobToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+};
+
+interface AppUploadFileProps
+  extends Omit<UploadProps, "file" | "files" | "disabled"> {
+  name: string;
+  label?: string;
+  className?: string;
+  multiple?: boolean;
+  maxFiles?: number;
+  disabled?: boolean;
+  onFilesChange?: (files: File[] | File | null) => void;
+}
+
+const AppUploadFile: React.FC<AppUploadFileProps> = ({
+  name,
+  className = "",
+  disabled: propDisabled,
+  onFilesChange,
+  ...rest
+}) => {
+  const { errors, touched, setFieldValue, values } =
+    useFormikContext<FormikValues>();
+
+  const maxSizeInBytes = rest.maxSize ? rest.maxSize * 1024 : undefined;
+
+  const fieldError = (errors as any)[name];
+  const isTouched = (touched as any)[name];
+  const val = (values as any)[name];
+
+  const isMaxFilesReached =
+    rest.maxFiles != null &&
+    (Array.isArray(val) ? val.length : val ? 1 : 0) >= (rest.maxFiles || 0);
+
+  const isDisabled = propDisabled || isMaxFilesReached;
+
+  const handleFiles = async (files: File[]) => {
+    const processed = await Promise.all(
+      files.map(async (file) => ({
+        file,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        preview: await blobToBase64(file),
+      }))
+    );
+
+    if (rest.multiple) {
+      const current = Array.isArray(val) ? val : [];
+      if (current.length + processed.length > (rest.maxFiles || Infinity)) {
+        return;
+      }
+      const newFiles = [...current, ...processed];
+      setFieldValue(name, newFiles, true);
+      onFilesChange?.(newFiles);
+    } else {
+      const newFile = processed[0] || null; // <-- Changed from processed[0]?.file to processed[0]
+      setFieldValue(name, newFile, true);
+      onFilesChange?.(newFile as any);
+    }
+  };
+
+  const handleDelete = () => {
+    const newValue = rest.multiple ? [] : null;
+    setFieldValue(name, newValue, true);
+    onFilesChange?.(newValue);
+  };
+
+  const handleRemove = (fileToRemove: File | string | FileWithPreview) => {
+    if (rest.multiple) {
+      const current = Array.isArray(val) ? val : [];
+      const updated = current.filter((f: any) => {
+        if (f?.file && f.file === fileToRemove) return false;
+        if (f === fileToRemove) return false;
+        if (f?.preview === fileToRemove) return false;
+        return true;
+      });
+      setFieldValue(name, updated, true);
+      onFilesChange?.(updated);
+    } else {
+      setFieldValue(name, null, true);
+      onFilesChange?.(null);
+    }
+  };
+
+  return (
+    <div className={`w-full space-y-1 ${className}`}>
+      <div className={isDisabled ? "opacity-50" : ""}>
+        <Upload
+          {...rest}
+          maxSize={maxSizeInBytes}
+          file={!rest.multiple ? val || undefined : undefined}
+          files={rest.multiple ? (Array.isArray(val) ? val : []) : undefined}
+          error={Boolean(fieldError) && Boolean(isTouched)}
+          onDrop={handleFiles}
+          onDelete={handleDelete}
+          onRemove={handleRemove}
+        />
+      </div>
+
+      {Boolean(fieldError) && Boolean(isTouched) && (
+        <p className="text-xs text-red-500">{fieldError}</p>
+      )}
+
+      {rest.maxFiles != null && (
+        <p className="text-xs text-gray-500">
+          Maximum {rest.maxFiles} file{rest.maxFiles > 1 ? "s" : ""} allowed
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default AppUploadFile;

package/src/Form/SubmitButton.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import React from "react";
+import { useFormikContext } from "formik";
+import clsx from "clsx";
+
+interface SubmitButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  loading?: boolean;
+  icon?: React.ReactNode;
+  variant?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "danger"
+    | "ghost"
+    | "outline";
+  size?: "sm" | "md" | "lg";
+}
+
+const SubmitButton = React.forwardRef<HTMLButtonElement, SubmitButtonProps>(
+  (
+    {
+      loading = false,
+      icon,
+      variant = "primary",
+      size = "md",
+      className = "",
+      children,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const { isSubmitting } = useFormikContext();
+
+    // Use manual loading prop OR Formik's isSubmitting
+    const showLoadingState = loading || isSubmitting;
+    const isButtonDisabled = disabled || showLoadingState;
+
+    const variantStyles = {
+      default:
+        "bg-gray-800 text-white hover:bg-gray-700 focus:ring-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600",
+      primary:
+        "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-600",
+      secondary:
+        "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600",
+      danger:
+        "bg-red-600 text-white hover:bg-red-700 focus:ring-red-300 dark:bg-red-700 dark:hover:bg-red-600",
+      ghost:
+        "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-300 dark:text-gray-300 dark:hover:bg-gray-800",
+      outline:
+        "border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-900/30",
+    };
+
+    const sizeStyles = {
+      sm: "px-3 py-1.5 text-sm h-9",
+      md: "px-4 py-2.5 text-base h-11",
+      lg: "px-6 py-3 text-lg h-14",
+    };
+
+    const defaultLoadingIcon = (
+      <svg
+        className="animate-spin h-5 w-5"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    );
+
+    return (
+      <button
+        ref={ref}
+        type="submit" // This is IMPORTANT - let Formik handle submission
+        disabled={isButtonDisabled}
+        className={clsx(
+          "inline-flex items-center justify-center font-medium rounded-lg",
+          "transition-all duration-200 ease-in-out",
+          "focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          "active:scale-[0.98]",
+          "whitespace-nowrap",
+          variantStyles[variant],
+          sizeStyles[size],
+          showLoadingState && "cursor-wait",
+          className
+        )}
+        aria-busy={showLoadingState}
+        aria-disabled={isButtonDisabled}
+        {...props}
+      >
+        <span className="flex items-center justify-center gap-2">
+          {showLoadingState && (
+            <span className="flex-shrink-0">{defaultLoadingIcon}</span>
+          )}
+          {!showLoadingState && icon && (
+            <span className="flex-shrink-0">{icon}</span>
+          )}
+          <span>{children}</span>
+        </span>
+      </button>
+    );
+  }
+);
+
+SubmitButton.displayName = "SubmitButton";
+
+export default SubmitButton;

package/src/Form/index.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { ReactNode, ReactElement } from "react";
+import type { FormikValues, FormikProps } from "formik";
+import { Formik, Form as FormikForm, FormikConfig } from "formik";
+
+export interface FormProps<T> extends FormikConfig<T> {
+  children?: ((props: FormikProps<T>) => ReactNode) | ReactNode;
+  className?: string;
+}
+
+const Form = <T extends FormikValues>({
+  children,
+  className,
+  ...props
+}: FormProps<T>): ReactElement => {
+  return (
+    <Formik<T> {...props}>
+      {(formikProps: FormikProps<T>) => (
+        <FormikForm className={className}>
+          {typeof children === "function" ? children(formikProps) : children}
+        </FormikForm>
+      )}
+    </Formik>
+  );
+};
+
+export default Form;

package/src/assets/illustrations/BackgroundIllustration.tsx

@@ -0,0 +1,42 @@
+import React, { memo } from "react";
+
+interface BackgroundIllustrationProps {
+  primaryColor?: string;
+}
+
+const BackgroundIllustration: React.FC<BackgroundIllustrationProps> = ({
+  primaryColor = "#6366F1",
+}) => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 480 360"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="absolute inset-0"
+    >
+      <defs>
+        <linearGradient
+          id="BG"
+          x1="19.496%"
+          x2="77.479%"
+          y1="71.822%"
+          y2="16.69%"
+        >
+          <stop offset="0%" stopColor={primaryColor} />
+          <stop offset="100%" stopColor={primaryColor} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+
+      <path
+        fill="url(#BG)"
+        fillRule="nonzero"
+        d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z"
+        opacity="0.2"
+      />
+    </svg>
+  );
+};
+
+export default memo(BackgroundIllustration);