stackkit 0.3.4 → 0.3.6

package/modules/components/files/shared/url/load-more.tsx

@@ -0,0 +1,93 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import { useEffect, useRef, useState } from "react";
+{{#if framework == "nextjs"}}
+import { useRouter, useSearchParams } from "next/navigation";
+{{else}}
+import { useNavigate, useSearchParams } from "react-router";
+{{/if}}
+import { formUrlQuery } from "@/lib/utils/url-helpers";
+
+const LoadMore = ({ hasNextPage }: { hasNextPage: boolean }) => {
+  {{#if framework == "nextjs"}}
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  {{else}}
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  {{/if}}
+
+  const loaderRef = useRef<HTMLDivElement | null>(null);
+  const isLoadingRef = useRef(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const [currentPage, setCurrentPage] = useState(() => {
+    const page = searchParams?.get("page");
+    return page ? Number(page) : 1;
+  });
+
+  useEffect(() => {
+    isLoadingRef.current = false;
+  }, []);
+
+  useEffect(() => {
+    if (!hasNextPage) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        setIsVisible(entry.isIntersecting);
+
+        if (entry.isIntersecting && !isLoadingRef.current && hasNextPage) {
+          isLoadingRef.current = true;
+
+          setTimeout(() => {
+            const nextPage = currentPage + 1;
+            setCurrentPage(nextPage);
+
+            const url = formUrlQuery({
+              params: searchParams?.toString() ?? "",
+              key: "page",
+              value: nextPage.toString(),
+            });
+
+            {{#if framework == "nextjs"}}
+            router.push(url, { scroll: false });
+            {{else}}
+            navigate(url, { replace: false });
+            {{/if}}
+          }, 500);
+        }
+      },
+      { threshold: 0.8, rootMargin: "400px" },
+    );
+
+    if (loaderRef.current) observer.observe(loaderRef.current);
+
+    return () => observer.disconnect();
+  }, [
+    hasNextPage,
+    currentPage,
+    {{#if framework == "nextjs"}}
+    router,
+    {{else}}
+    navigate,
+    {{/if}}
+    searchParams,
+  ]);
+
+  return (
+    <div ref={loaderRef} className="my-8 flex h-20 w-full items-center justify-center">
+      {isVisible && (
+        <div className="flex flex-col items-center gap-2">
+          <div className="border-accent-main h-10 w-10 animate-spin rounded-full border-4 border-t-transparent" />
+          <span className="text-sm text-gray-500">Loading more ...</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LoadMore;

package/modules/components/files/shared/url/search-bar.tsx

@@ -0,0 +1,131 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import * as React from "react";
+{{#if framework == "nextjs"}}
+import { useRouter, useSearchParams } from "next/navigation";
+{{else}}
+import { useNavigate, useSearchParams } from "react-router";
+{{/if}}
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { formUrlQuery, removeKeysFromQuery } from "@/lib/utils/url-helpers";
+
+type SearchBarProps = {
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  paramKey?: string;
+  defaultValue?: string;
+  debounceMs?: number;
+  replace?: boolean;
+  minLength?: number;
+  autoFocus?: boolean;
+  showClear?: boolean;
+  ariaLabel?: string;
+  onDebouncedChange?: (value: string) => void;
+};
+
+export default function SearchBar({
+  placeholder = "Search by title",
+  className,
+  inputClassName,
+  paramKey = "search",
+  defaultValue = "",
+  debounceMs = 400,
+  replace = true,
+  minLength = 0,
+  autoFocus = false,
+  showClear = true,
+  ariaLabel = "Search",
+  onDebouncedChange,
+}: SearchBarProps) {
+  {{#if framework == "nextjs"}}
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  {{else}}
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  {{/if}}
+
+  const [value, setValue] = React.useState<string>(() => {
+    return searchParams?.get(paramKey) ?? defaultValue;
+  });
+
+  React.useEffect(() => {
+    const urlVal = searchParams?.get(paramKey) ?? defaultValue;
+    setValue((prev) => (prev !== urlVal ? urlVal : prev));
+  }, [searchParams, paramKey, defaultValue]);
+
+  React.useEffect(() => {
+    const t = setTimeout(() => {
+      const trimmed = value.trim();
+      const meetsMin = trimmed.length >= minLength;
+      const qs = searchParams?.toString() ?? "";
+
+      const newUrl =
+        meetsMin && trimmed !== defaultValue
+          ? formUrlQuery({ params: qs, key: paramKey, value: trimmed })
+          : removeKeysFromQuery({ params: qs, keysToRemove: [paramKey] });
+
+      {{#if framework == "nextjs"}}
+      if (replace) router.replace(newUrl, { scroll: false });
+      else router.push(newUrl, { scroll: false });
+      {{else}}
+      navigate(newUrl, { replace });
+      {{/if}}
+
+      onDebouncedChange?.(trimmed);
+    }, debounceMs);
+
+    return () => clearTimeout(t);
+  }, [
+    value,
+    debounceMs,
+    replace,
+    {{#if framework == "nextjs"}}
+    router,
+    {{else}}
+    navigate,
+    {{/if}}
+    searchParams,
+    paramKey,
+    defaultValue,
+    minLength,
+    onDebouncedChange,
+  ]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape" && value) setValue("");
+  };
+
+  return (
+    <div className={cn("relative", className)}>
+      <div className="border-input bg-background flex items-center gap-2 overflow-hidden rounded-md">
+        <Input
+          type="text"
+          aria-label={ariaLabel}
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          autoFocus={autoFocus}
+          className={cn("pr-8", inputClassName, "bg-transparent")}
+        />
+      </div>
+
+      {showClear && value ? (
+        <button
+          type="button"
+          onClick={() => setValue("")}
+          className="text-muted-foreground hover:bg-accent hover:text-accent-foreground absolute inset-y-0 right-2 my-auto flex h-6 w-6 items-center justify-center rounded-md focus:outline-none"
+          aria-label="Clear search"
+          title="Clear"
+        >
+          ×
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/modules/components/files/shared/url/sort-select.tsx

@@ -0,0 +1,118 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import * as React from "react";
+{{#if framework == "nextjs"}}
+import { useRouter, useSearchParams } from "next/navigation";
+{{else}}
+import { useNavigate, useSearchParams } from "react-router";
+{{/if}}
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { formUrlQuery } from "@/lib/utils/url-helpers";
+
+export type SortOption = {
+  value: string;
+  label: string;
+};
+
+export interface SortSelectProps {
+  items: SortOption[];
+  paramKey?: string;
+  placeholder?: string;
+  defaultValue?: string;
+  debounceMs?: number;
+  replace?: boolean;
+  className?: string;
+  onValueChange?: (value: string) => void;
+  ariaLabel?: string;
+}
+
+export default function SortSelect({
+  items,
+  paramKey = "sort",
+  placeholder = "Default sorting",
+  defaultValue = "",
+  debounceMs = 350,
+  replace = true,
+  className = "w-full md:w-48",
+  onValueChange,
+  ariaLabel = "Sort options",
+}: SortSelectProps) {
+  {{#if framework == "nextjs"}}
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  {{else}}
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  {{/if}}
+
+  const [value, setValue] = React.useState(() => {
+    return searchParams?.get(paramKey) ?? defaultValue;
+  });
+
+  React.useEffect(() => {
+    const urlVal = searchParams?.get(paramKey) ?? defaultValue;
+    setValue((prev) => (prev !== urlVal ? urlVal : prev));
+  }, [searchParams, paramKey, defaultValue]);
+
+  React.useEffect(() => {
+    const t = setTimeout(() => {
+      const qs = searchParams?.toString() ?? "";
+      const newUrl = formUrlQuery({
+        params: qs,
+        key: paramKey,
+        value: value && value !== defaultValue ? value : null,
+      });
+
+      {{#if framework == "nextjs"}}
+      if (replace) router.replace(newUrl, { scroll: false });
+      else router.push(newUrl, { scroll: false });
+      {{else}}
+      navigate(newUrl, { replace });
+      {{/if}}
+
+      onValueChange?.(value);
+    }, debounceMs);
+
+    return () => clearTimeout(t);
+  }, [
+    value,
+    debounceMs,
+    replace,
+    {{#if framework == "nextjs"}}
+    router,
+    {{else}}
+    navigate,
+    {{/if}}
+    searchParams,
+    paramKey,
+    defaultValue,
+    onValueChange,
+  ]);
+
+  const handleChange = React.useCallback((v: string | null) => setValue(v ?? ""), []);
+
+  return (
+    <div className="overflow-hidden rounded-md dark:bg-transparent">
+      <Select value={value} onValueChange={handleChange}>
+        <SelectTrigger className={className} aria-label={ariaLabel}>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {items.map((it) => (
+            <SelectItem key={it.value} value={it.value}>
+              {it.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/modules/components/files/shared/url/url-tabs.tsx

@@ -0,0 +1,77 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import * as React from "react";
+{{#if framework == "nextjs"}}
+import { useRouter, useSearchParams } from "next/navigation";
+{{else}}
+import { useNavigate, useSearchParams } from "react-router";
+{{/if}}
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { formUrlQuery } from "@/lib/utils/url-helpers";
+
+export type TabItem = {
+  value: string;
+  label: string;
+};
+
+interface UrlTabsProps {
+  items: TabItem[];
+  paramKey?: string;
+  defaultValue?: string;
+  className?: string;
+  replace?: boolean;
+  onValueChange?: (value: string) => void;
+  children?: React.ReactNode;
+}
+
+export default function UrlTabs({
+  items,
+  paramKey = "tab",
+  defaultValue,
+  className,
+  replace = true,
+  onValueChange,
+  children,
+}: UrlTabsProps) {
+  {{#if framework == "nextjs"}}
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  {{else}}
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  {{/if}}
+
+  const activeTab = searchParams?.get(paramKey) ?? defaultValue ?? items[0]?.value ?? "";
+
+  const handleChange = (value: string) => {
+    const url = formUrlQuery({
+      params: searchParams?.toString() ?? "",
+      key: paramKey,
+      value: value === (defaultValue ?? items[0]?.value) ? null : value,
+    });
+
+    {{#if framework == "nextjs"}}
+    if (replace) router.replace(url, { scroll: false });
+    else router.push(url, { scroll: false });
+    {{else}}
+    navigate(url, { replace });
+    {{/if}}
+
+    onValueChange?.(value);
+  };
+
+  return (
+    <Tabs value={activeTab} onValueChange={handleChange} className={className}>
+      <TabsList>
+        {items.map((item) => (
+          <TabsTrigger key={item.value} value={item.value}>
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {children}
+    </Tabs>
+  );
+}

package/modules/components/generator.json

@@ -0,0 +1,109 @@
+{
+  "name": "components",
+  "type": "components",
+  "priority": 10,
+  "operations": [
+    {
+      "type": "create-file",
+      "source": "shared/shadcn/**",
+      "destination": "{{framework == 'nextjs' ? 'components/**' : 'src/components/**'}}",
+      "condition": { "framework": ["nextjs", "react"], "ui": "shadcn" }
+    },
+    {
+      "type": "create-file",
+      "source": "shared/hooks/**",
+      "destination": "{{framework == 'nextjs' ? 'hooks/**' : 'src/hooks/**'}}",
+      "condition": { "framework": ["nextjs", "react"] }
+    },
+    {
+      "type": "create-file",
+      "source": "shared/lib/**",
+      "destination": "{{framework == 'nextjs' ? 'lib/**' : 'src/lib/**'}}",
+      "condition": { "framework": ["nextjs", "react"] }
+    },
+    {
+      "type": "create-file",
+      "source": "shared/url/*",
+      "destination": "{{framework == 'nextjs' ? 'components/global/url/*' : 'src/components/global/url/*'}}",
+      "condition": { "framework": ["nextjs", "react"] }
+    },
+    {
+      "type": "patch-file",
+      "destination": "app/layout.tsx",
+      "condition": { "framework": "nextjs" },
+      "operations": [
+        {
+          "type": "add-import",
+          "imports": ["import { TooltipProvider } from \"@/components/ui/tooltip\";"]
+        },
+        {
+          "type": "add-code",
+          "before": "<QueryProviders>{children}</QueryProviders>",
+          "code": ["<TooltipProvider>"]
+        },
+        {
+          "type": "add-code",
+          "after": "<QueryProviders>{children}</QueryProviders>",
+          "code": ["</TooltipProvider>"]
+        }
+      ]
+    },
+    {
+      "type": "patch-file",
+      "destination": "src/main.tsx",
+      "condition": { "framework": "react" },
+      "operations": [
+        {
+          "type": "add-import",
+          "imports": ["import { TooltipProvider } from \"./components/ui/tooltip\";"]
+        },
+        {
+          "type": "add-code",
+          "before": "<QueryProvider>",
+          "code": ["<TooltipProvider>"]
+        },
+        {
+          "type": "add-code",
+          "after": "</QueryProvider>",
+          "code": ["</TooltipProvider>"]
+        }
+      ]
+    },
+    {
+      "type": "run-command",
+      "command": "{{packageManager=='pnpm' ? 'pnpm dlx shadcn@latest add button checkbox field input input-group textarea select badge command popover scroll-area toggle tabs dialog skeleton table -y' : packageManager=='yarn' ? 'yarn dlx shadcn@latest add button checkbox field input input-group textarea select badge command popover scroll-area toggle tabs dialog skeleton table -y' : packageManager=='bun' ? 'bun dlx shadcn@latest add button checkbox field input input-group textarea select badge command popover scroll-area toggle tabs dialog skeleton table -y' : 'npx shadcn@latest add button checkbox field input input-group textarea select badge command popover scroll-area toggle tabs dialog skeleton table -y'}}",
+      "condition": { "framework": ["react", "nextjs"], "ui": "shadcn" }
+    },
+    {
+      "type": "add-dependency",
+      "condition": { "framework": ["react", "nextjs"], "ui": "shadcn" },
+      "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@tiptap/core": "^3.20.0",
+        "@tabler/icons-react": "^3.41.1",
+        "@tanstack/react-table": "^8.21.3",
+        "@tiptap/extension-blockquote": "^3.20.0",
+        "@tiptap/extension-bold": "^3.20.0",
+        "@tiptap/extension-bullet-list": "^3.20.0",
+        "@tiptap/extension-code": "^3.20.0",
+        "@tiptap/extension-hard-break": "^3.20.0",
+        "@tiptap/extension-heading": "^3.20.0",
+        "@tiptap/extension-highlight": "^3.20.0",
+        "@tiptap/extension-history": "^3.20.0",
+        "@tiptap/extension-horizontal-rule": "^3.20.0",
+        "@tiptap/extension-italic": "^3.20.0",
+        "@tiptap/extension-link": "^3.20.0",
+        "@tiptap/extension-list-item": "^3.20.0",
+        "@tiptap/extension-ordered-list": "^3.20.0",
+        "@tiptap/extension-strike": "^3.20.0",
+        "@tiptap/extension-table": "^3.20.0",
+        "@tiptap/extension-text-align": "^3.20.0",
+        "@tiptap/extension-underline": "^3.20.0",
+        "@tiptap/react": "^3.20.0",
+        "@tiptap/starter-kit": "^3.20.0"
+      }
+    }
+  ]
+}

package/modules/components/module.json

@@ -0,0 +1,11 @@
+{
+  "name": "components",
+  "displayName": "Components",
+  "category": "components",
+  "description": "Pre-built form fields, data table, and more",
+  "supportedFrameworks": ["react", "nextjs"],
+  "compatibility": {
+    "frameworks": ["react", "nextjs"],
+    "languages": ["typescript"]
+  }
+}

package/modules/database/mongoose/generator.json

@@ -7,13 +7,13 @@
       "type": "create-file",
       "source": "lib/mongoose.ts",
       "destination": "src/database/mongoose.ts",
-      "condition": { "framework": ["express"] }
+      "condition": { "framework": "express" }
     },
     {
       "type": "create-file",
       "source": "models/health.ts",
       "destination": "src/modules/health/health.model.ts",
-      "condition": { "framework": ["express"] }
+      "condition": { "framework": "express" }
     },
     {
       "type": "patch-file",
@@ -31,18 +31,7 @@
         }
       ]
     },
-    {
-      "type": "create-file",
-      "source": "lib/mongoose.ts",
-      "destination": "server/database/mongoose.ts",
-      "condition": { "framework": ["nextjs"] }
-    },
-    {
-      "type": "create-file",
-      "source": "models/health.ts",
-      "destination": "server/database/models/health.model.ts",
-      "condition": { "framework": ["nextjs"] }
-    },
+    
     {
       "type": "add-dependency",
       "dependencies": {

package/modules/database/mongoose/module.json

@@ -4,9 +4,9 @@
   "category": "database",
   "provider": "mongoose",
   "database": "mongodb",
-  "supportedFrameworks": ["nextjs", "express"],
+  "supportedFrameworks": ["express"],
   "compatibility": {
-    "frameworks": ["nextjs", "express"],
+    "frameworks": ["express"],
     "databases": ["mongoose"],
     "languages": ["typescript", "javascript"],
     "packageManagers": ["npm", "yarn", "pnpm", "bun"]

package/modules/database/prisma/generator.json

@@ -17,13 +17,7 @@
       "type": "create-file",
       "source": "lib/prisma.ts",
       "destination": "src/database/prisma.ts",
-      "condition": { "framework": ["express"] }
-    },
-    {
-      "type": "create-file",
-      "source": "lib/prisma.ts",
-      "destination": "server/database/prisma.ts",
-      "condition": { "framework": ["nextjs"] }
+      "condition": { "framework": "express" }
     },
     {
       "type": "add-dependency",
@@ -34,11 +28,11 @@
     {
       "type": "add-script",
       "scripts": {
-        "generate": "prisma generate",
-        "push": "prisma db push",
-        "seed": "tsx prisma/seed.ts",
-        "migrate": "prisma migrate dev",
-        "studio": "prisma studio"
+        "prisma:generate": "prisma generate",
+        "prisma:push": "prisma db push",
+        "prisma:seed": "tsx prisma/seed.ts",
+        "prisma:migrate": "prisma migrate dev",
+        "prisma:studio": "prisma studio"
       }
     },
     {

package/modules/database/prisma/module.json

@@ -3,9 +3,9 @@
   "displayName": "Prisma",
   "category": "database",
   "provider": "prisma",
-  "supportedFrameworks": ["nextjs", "express"],
+  "supportedFrameworks": ["express"],
   "compatibility": {
-    "frameworks": ["nextjs", "express"],
+    "frameworks": ["express"],
     "databases": ["prisma"],
     "languages": ["typescript", "javascript"],
     "packageManagers": ["npm", "yarn", "pnpm", "bun"]