@goplusvn/core 0.1.0 → 0.1.2

package/src/crud/components/crud-sheet.tsx

@@ -0,0 +1,336 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { CheckCircle2, Loader2, X } from "lucide-react";
+
+import type { EntityConfig } from "../../types";
+import type { DynamicIconNameType } from "../../types";
+
+import { Button } from "../../ui";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "../../ui";
+import { DynamicIcon } from "../../ui";
+import { CrudForm } from "./crud-form";
+import { useCrudConfig } from "./crud-context";
+
+interface CrudSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config: EntityConfig;
+  initialData?: Record<string, unknown>;
+  mode?: "create" | "edit";
+  onSubmit: (data: Record<string, unknown>) => Promise<void> | void;
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+export function CrudSheet({
+  open,
+  onOpenChange,
+  config,
+  initialData,
+  mode = "create",
+  onSubmit,
+  side = "right",
+}: CrudSheetProps) {
+  const { translations } = useCrudConfig();
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formProgress, setFormProgress] = useState<number | null>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const progressSubscriptionRef = useRef<(() => void) | null>(null);
+  const successTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleSubmit = async (data: Record<string, unknown>) => {
+    try {
+      setIsSubmitting(true);
+      await onSubmit(data);
+      setIsSubmitting(false);
+      setShowSuccess(true);
+
+      // Clear any existing timeout
+      if (successTimeoutRef.current) {
+        clearTimeout(successTimeoutRef.current);
+      }
+
+      successTimeoutRef.current = setTimeout(() => {
+        setShowSuccess(false);
+        onOpenChange(false);
+        successTimeoutRef.current = null;
+      }, 1500);
+    } catch (error) {
+      setIsSubmitting(false);
+      throw error;
+    }
+  };
+
+  const handleCancel = () => {
+    if (!isSubmitting) {
+      onOpenChange(false);
+    }
+  };
+
+  // Focus management and cleanup
+  useEffect(() => {
+    if (open && formRef.current) {
+      // Clear any existing timeout
+      if (focusTimeoutRef.current) {
+        clearTimeout(focusTimeoutRef.current);
+      }
+
+      focusTimeoutRef.current = setTimeout(() => {
+        const firstInput = formRef.current?.querySelector<HTMLInputElement>(
+          "input:not([disabled]), textarea:not([disabled]), select:not([disabled])",
+        );
+        if (firstInput) {
+          firstInput.focus();
+        }
+        focusTimeoutRef.current = null;
+      }, 100);
+    } else {
+      // Reset states when sheet closes
+      setShowSuccess(false);
+      setIsSubmitting(false);
+      setFormProgress(null);
+      // Cleanup progress subscription
+      if (
+        progressSubscriptionRef.current &&
+        typeof progressSubscriptionRef.current === "function"
+      ) {
+        try {
+          progressSubscriptionRef.current();
+        } catch (error) {
+          console.error("Error cleaning up progress subscription:", error);
+        }
+        progressSubscriptionRef.current = null;
+      }
+    }
+
+    // Cleanup timeouts when component unmounts or sheet closes
+    return () => {
+      if (successTimeoutRef.current) {
+        clearTimeout(successTimeoutRef.current);
+        successTimeoutRef.current = null;
+      }
+      if (focusTimeoutRef.current) {
+        clearTimeout(focusTimeoutRef.current);
+        focusTimeoutRef.current = null;
+      }
+      // Cleanup progress subscription on unmount
+      if (
+        progressSubscriptionRef.current &&
+        typeof progressSubscriptionRef.current === "function"
+      ) {
+        try {
+          progressSubscriptionRef.current();
+        } catch (error) {
+          console.error(
+            "Error cleaning up progress subscription on unmount:",
+            error,
+          );
+        }
+        progressSubscriptionRef.current = null;
+      }
+    };
+  }, [open]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ignore if typing in input/textarea
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      // Esc to close
+      if (e.key === "Escape" && !isSubmitting) {
+        onOpenChange(false);
+      }
+
+      // Ctrl/Cmd + Enter to submit
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter" && !isSubmitting) {
+        formRef.current?.requestSubmit();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, isSubmitting, onOpenChange]);
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side={side}
+        className="flex flex-col p-0 w-full sm:max-w-2xl overflow-hidden"
+      >
+        {/* Success overlay */}
+        {showSuccess && (
+          <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm">
+            <div className="flex flex-col items-center gap-4">
+              <CheckCircle2 className="h-16 w-16 text-green-500 animate-in zoom-in-50" />
+              <p className="text-lg font-semibold">
+                {translations?.savedSuccessfully ||
+                  (mode === "create"
+                    ? "Created successfully!"
+                    : "Updated successfully!")}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Loading overlay */}
+        {isSubmitting && (
+          <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm">
+            <div className="flex flex-col items-center gap-4">
+              <Loader2 className="h-8 w-8 animate-spin text-primary" />
+              <p className="text-sm text-muted-foreground">
+                {mode === "create"
+                  ? translations?.creating || "Creating..."
+                  : translations?.updating || "Updating..."}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Header */}
+        <SheetHeader className="sticky top-0 z-10 bg-background border-b px-6 py-4 flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              {config.iconName && (
+                <DynamicIcon
+                  name={config.iconName as DynamicIconNameType}
+                  className="h-5 w-5"
+                />
+              )}
+              <div className="flex-1">
+                <SheetTitle className="text-lg font-semibold">
+                  {mode === "create"
+                    ? translations?.add
+                      ? `${translations.add} ${config.label}`
+                      : `Add ${config.label}`
+                    : translations?.edit
+                      ? `${translations.edit} ${config.label}`
+                      : `Edit ${config.label}`}
+                </SheetTitle>
+                <SheetDescription className="mt-1 text-xs text-muted-foreground">
+                  {mode === "create"
+                    ? translations?.addNew
+                      ? `${translations.addNew} ${config.label.toLowerCase()}`
+                      : `Add a new ${config.label.toLowerCase()}`
+                    : translations?.update
+                      ? `${translations.update} ${config.label.toLowerCase()}`
+                      : `Update ${config.label.toLowerCase()} information`}
+                </SheetDescription>
+              </div>
+            </div>
+            {formProgress !== null && config.fields.length > 5 && (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <span>{formProgress}%</span>
+                <div className="h-1.5 w-16 bg-muted rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-primary transition-all duration-300"
+                    style={{ width: `${formProgress}%` }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </SheetHeader>
+
+        {/* Form Content */}
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          <CrudForm
+            key={`${config.name}-${mode}-${initialData?.id || "new"}`}
+            ref={formRef}
+            config={config}
+            initialData={initialData}
+            mode={mode}
+            onSubmit={handleSubmit}
+            onCancel={handleCancel}
+            submitLabel={
+              mode === "create"
+                ? translations?.create || "Create"
+                : translations?.update || "Update"
+            }
+            submittingLabel={
+              mode === "create"
+                ? translations?.creating || "Creating..."
+                : translations?.updating || "Updating..."
+            }
+            cancelLabel={translations?.cancel || "Cancel"}
+            isSubmitting={isSubmitting}
+            enableAutoSave={mode === "create"}
+            onFormReady={(form) => {
+              // Clean up previous subscription
+              if (
+                progressSubscriptionRef.current &&
+                typeof progressSubscriptionRef.current === "function"
+              ) {
+                try {
+                  progressSubscriptionRef.current();
+                } catch (error) {
+                  console.error(
+                    "Error cleaning up previous subscription:",
+                    error,
+                  );
+                }
+                progressSubscriptionRef.current = null;
+              }
+
+              // Subscribe to form value changes for progress
+              if (config.fields.length > 5) {
+                // Filter out: hidden fields and display-only fields (DTO fields)
+                const visibleFields = config.fields.filter(
+                  (f) => !f.hideInForm && !f.isDisplayOnly,
+                );
+                // Watch only visible fields instead of all fields for better performance
+                const visibleFieldNames = visibleFields.map((f) => f.name);
+                try {
+                  // form.watch() returns an unsubscribe function directly, not an object with unsubscribe()
+                  const unsubscribe = form.watch(
+                    visibleFieldNames,
+                    (values: Record<string, unknown>) => {
+                      const filledFields = visibleFields.filter((field) => {
+                        const value = values[field.name];
+                        return (
+                          value !== undefined && value !== null && value !== ""
+                        );
+                      });
+                      const progress = Math.round(
+                        (filledFields.length / visibleFields.length) * 100,
+                      );
+                      setFormProgress(progress);
+                    },
+                  );
+                  // Store unsubscribe function directly, but only if it's actually a function
+                  if (typeof unsubscribe === "function") {
+                    progressSubscriptionRef.current = unsubscribe;
+                  } else {
+                    progressSubscriptionRef.current = null;
+                  }
+                } catch (error) {
+                  console.error("Error setting up form watch:", error);
+                  progressSubscriptionRef.current = null;
+                }
+              } else {
+                progressSubscriptionRef.current = null;
+              }
+            }}
+          />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/crud/components/crud-table-skeleton.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+// Re-export DataTableSkeleton as CrudTableSkeleton for backward compatibility
+// This ensures existing code using CrudTableSkeleton continues to work
+import { DataTableSkeleton } from "../../ui/data-display/data-table/data-table-skeleton";
+import type { DataTableSkeletonProps } from "../../ui/data-display/data-table/data-table-skeleton";
+
+export { DataTableSkeleton as CrudTableSkeleton };
+export type { DataTableSkeletonProps as CrudTableSkeletonProps };
+
+// Legacy interface for backward compatibility
+export interface LegacyCrudTableSkeletonProps {
+  columns: number;
+  rows?: number;
+}
+
+/**
+ * @deprecated Use DataTableSkeleton from @goerp/core/ui instead
+ * This is kept for backward compatibility
+ */
+export function CrudTableSkeletonLegacy({
+  columns,
+  rows = 5,
+}: LegacyCrudTableSkeletonProps) {
+  return <DataTableSkeleton columns={columns} rows={rows} />;
+}

package/src/crud/components/crud-table-toolbar.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useMemo } from "react";
+import type { Table } from "@tanstack/react-table";
+
+import type { CrudPermissions, EntityConfig } from "../../types";
+
+import { CrudFilterChips } from "./crud-filter-chips";
+import { FilterBuilder } from "./crud-filters/filter-builder";
+import { useCrudState } from "./crud-context";
+import { DataTableToolbar } from "../../ui/data-display/data-table/data-table-toolbar";
+import type { FilterConfig } from "../../ui/data-display/data-table/data-table-toolbar";
+
+interface CrudTableToolbarProps<TData> {
+  table?: Table<TData>;
+  config: EntityConfig;
+  permissions: CrudPermissions;
+  viewMode?: "table" | "card";
+  onViewModeChange?: (mode: "table" | "card") => void;
+}
+
+export function CrudTableToolbar<TData>({
+  table,
+  config,
+  permissions,
+  viewMode = "table",
+  onViewModeChange,
+}: CrudTableToolbarProps<TData>) {
+  const { filters, clearFilters, addFilter, removeFilter, search, setSearch } =
+    useCrudState();
+
+  // Convert Crud filters to DataTable filters
+  // Note: This is an approximation as CrudFilters use a more complex builder
+  // We'll pass the custom builder via filterBuilder slot
+  const dataTableFilters: FilterConfig[] = useMemo(() => {
+    return (config.filters || []).map((f) => ({
+      name: f.name,
+      label: f.label,
+      type: "custom" as const, // We use custom builder
+      field: f.field,
+    }));
+  }, [config.filters]);
+
+  const activeFilters = useMemo(() => {
+    return filters.map((f) => ({
+      name: f.name,
+      value: f.value,
+      operator: f.operator,
+    }));
+  }, [filters]);
+
+  return (
+    <div className="space-y-2">
+      <DataTableToolbar
+        table={table}
+        // Search
+        searchEnabled={config.features?.search}
+        searchValue={search}
+        onSearchChange={setSearch}
+        searchPlaceholder={`Search ${config.pluralLabel.toLowerCase()}...`}
+        // Filters
+        filters={dataTableFilters}
+        activeFilters={activeFilters}
+        // Custom filter builder overrides the default filter rendering
+        filterBuilder={<FilterBuilder filters={config.filters!} />}
+        // Filter callbacks
+        onFiltersChange={(newFilters) => {
+          if (newFilters.length === 0) {
+            clearFilters();
+          } else {
+            // Complex syncing is handled by FilterBuilder/CrudFilterChips
+            // This callback mainly handles the "Clear all" action
+            clearFilters();
+          }
+        }}
+        // View Options
+        viewMode={viewMode}
+        onViewModeChange={onViewModeChange}
+        enableViewModeToggle={!!onViewModeChange}
+        // Reset
+        onReset={() => {
+          setSearch("");
+          clearFilters();
+        }}
+      />
+
+      {/* Second row: Filter chips (specific to CRUD complex filters) */}
+      <CrudFilterChips config={config} />
+    </div>
+  );
+}