@getjack/jack 0.1.28 → 0.1.30

package/templates/saas/src/client/components/ui/field.tsx

@@ -1,9 +1,9 @@
+import { type VariantProps, cva } from "class-variance-authority";
 import { useMemo } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
 	return (

package/templates/saas/src/client/components/ui/form.tsx

@@ -1,20 +1,20 @@
 "use client";
 
-import * as React from "react";
 import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
 import {
 	Controller,
-	FormProvider,
-	useFormContext,
-	useFormState,
 	type ControllerProps,
 	type FieldPath,
 	type FieldValues,
+	FormProvider,
+	useFormContext,
+	useFormState,
 } from "react-hook-form";
 
-import { cn } from "@/lib/utils";
 import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 
 const Form = FormProvider;
 

package/templates/saas/src/client/components/ui/hover-card.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/input-group.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 	return (

package/templates/saas/src/client/components/ui/input-otp.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { MinusIcon } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/item.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
 	return (

package/templates/saas/src/client/components/ui/label.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/menubar.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/navigation-menu.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/pagination.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import type * as React from "react";
 
+import { type Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { buttonVariants, type Button } from "@/components/ui/button";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
 	return (

package/templates/saas/src/client/components/ui/popover.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/progress.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/radio-group.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/resizable.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { GripVerticalIcon } from "lucide-react";
+import type * as React from "react";
 import { Group, Panel, Separator } from "react-resizable-panels";
 
 import { cn } from "@/lib/utils";

package/templates/saas/src/client/components/ui/scroll-area.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/select.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/separator.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/sheet.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/sidebar.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
+import * as React from "react";
 
-import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
@@ -19,6 +17,8 @@ import {
 } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;

package/templates/saas/src/client/components/ui/slider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/switch.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/table.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/textarea.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/toggle-group.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
 
-import { cn } from "@/lib/utils";
 import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/lib/utils";
 
 const ToggleGroupContext = React.createContext<
 	VariantProps<typeof toggleVariants> & {

package/templates/saas/src/client/components/ui/toggle.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/hooks/useSubscription.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { authClient } from "../lib/auth-client";
 
 type Subscription = {
@@ -8,7 +8,7 @@ type Subscription = {
 	stripeCustomerId?: string;
 	stripeSubscriptionId?: string;
 	cancelAtPeriodEnd?: boolean;
-	cancelAt?: Date | string | null;  // Better Auth uses this
+	cancelAt?: Date | string | null; // Better Auth uses this
 	periodEnd?: Date | string | null;
 };
 
@@ -60,11 +60,12 @@ export function useSubscription() {
 	const isCancelling =
 		stripeStatus?.cancelAtPeriodEnd ||
 		activeSubscription?.cancelAtPeriodEnd ||
-		!!activeSubscription?.cancelAt ||  // Better Auth sets cancelAt date when cancelling
+		!!activeSubscription?.cancelAt || // Better Auth sets cancelAt date when cancelling
 		false;
 
 	// Get period end from either source
-	const periodEnd = stripeStatus?.periodEnd ||
+	const periodEnd =
+		stripeStatus?.periodEnd ||
 		(activeSubscription?.periodEnd ? String(activeSubscription.periodEnd) : null);
 
 	return {

package/templates/saas/src/client/lib/auth-client.ts

@@ -1,5 +1,5 @@
-import { createAuthClient } from "better-auth/react";
 import { stripeClient } from "@better-auth/stripe/client";
+import { createAuthClient } from "better-auth/react";
 
 export const authClient = createAuthClient({
 	baseURL: window.location.origin,

package/templates/saas/src/client/lib/plans.ts

@@ -20,12 +20,7 @@ export const plans: PlanConfig[] = [
 		price: "$0",
 		priceMonthly: 0,
 		description: "Perfect for getting started",
-		features: [
-			"Up to 100 users",
-			"Basic analytics",
-			"Community support",
-			"1 project",
-		],
+		features: ["Up to 100 users", "Basic analytics", "Community support", "1 project"],
 	},
 	{
 		id: "pro",

package/templates/saas/src/client/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

package/templates/saas/src/client/main.tsx

@@ -1,6 +1,6 @@
+import { ThemeProvider } from "next-themes";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { ThemeProvider } from "next-themes";
 import App from "./App";
 import { Toaster } from "./components/ui/sonner";
 import "./index.css";

package/templates/saas/src/client/pages/DashboardPage.tsx

@@ -1,18 +1,33 @@
 import { useEffect, useState } from "react";
+import { ThemeToggle } from "../components/ThemeToggle";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
 import { useAuth } from "../hooks/useAuth";
 import { useSubscription } from "../hooks/useSubscription";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
-import { Button } from "../components/ui/button";
-import { ThemeToggle } from "../components/ThemeToggle";
 import { getPlanName } from "../lib/plans";
 
 interface DashboardPageProps {
-	navigate: (route: "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password") => void;
+	navigate: (
+		route:
+			| "/"
+			| "/login"
+			| "/signup"
+			| "/pricing"
+			| "/dashboard"
+			| "/forgot-password"
+			| "/reset-password",
+	) => void;
 }
 
 export default function DashboardPage({ navigate }: DashboardPageProps) {
 	const { user, signOut } = useAuth();
-	const { plan, isSubscribed, isCancelling, periodEnd, isLoading: isSubscriptionLoading } = useSubscription();
+	const {
+		plan,
+		isSubscribed,
+		isCancelling,
+		periodEnd,
+		isLoading: isSubscriptionLoading,
+	} = useSubscription();
 	const [showUpgradeSuccess, setShowUpgradeSuccess] = useState(false);
 
 	// Check for upgrade success
@@ -103,19 +118,33 @@ export default function DashboardPage({ navigate }: DashboardPageProps) {
 							className="absolute top-4 right-4 text-white/80 hover:text-white"
 						>
 							<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M6 18L18 6M6 6l12 12"
+								/>
 							</svg>
 						</button>
 						<div className="flex items-start gap-4">
 							<div className="flex-shrink-0 w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
 								<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M5 13l4 4L19 7"
+									/>
 								</svg>
 							</div>
 							<div className="flex-1">
 								<h2 className="text-xl font-bold mb-1">You're all set!</h2>
 								<p className="text-white/90 mb-4">
-									Your upgrade to <span className="font-semibold">{plan === "enterprise" ? "Enterprise" : "Pro"}</span> is complete. Here's what you just unlocked:
+									Your upgrade to{" "}
+									<span className="font-semibold">
+										{plan === "enterprise" ? "Enterprise" : "Pro"}
+									</span>{" "}
+									is complete. Here's what you just unlocked:
 								</p>
 								<div className="grid gap-2 sm:grid-cols-3 mb-4">
 									<div className="bg-white/10 rounded-lg p-3">
@@ -184,7 +213,10 @@ export default function DashboardPage({ navigate }: DashboardPageProps) {
 									</p>
 									<p className="text-sm text-yellow-700 dark:text-yellow-300">
 										You'll have access to {getPlanName(currentPlan)} features until{" "}
-										{periodEnd ? new Date(periodEnd).toLocaleDateString() : "the end of your billing period"}.
+										{periodEnd
+											? new Date(periodEnd).toLocaleDateString()
+											: "the end of your billing period"}
+										.
 									</p>
 								</div>
 								<Button variant="outline" onClick={() => navigate("/pricing")}>

package/templates/saas/src/client/pages/ForgotPasswordPage.tsx

@@ -1,11 +1,20 @@
 import { useState } from "react";
-import { authClient } from "../lib/auth-client";
 import { toast } from "sonner";
 import { ThemeToggle } from "../components/ThemeToggle";
 import { Button } from "../components/ui/button";
+import { authClient } from "../lib/auth-client";
 
 interface ForgotPasswordPageProps {
-	navigate: (route: "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password") => void;
+	navigate: (
+		route:
+			| "/"
+			| "/login"
+			| "/signup"
+			| "/pricing"
+			| "/dashboard"
+			| "/forgot-password"
+			| "/reset-password",
+	) => void;
 }
 
 export default function ForgotPasswordPage({ navigate }: ForgotPasswordPageProps) {

package/templates/saas/src/client/pages/HomePage.tsx

@@ -1,9 +1,18 @@
 import { useEffect, useState } from "react";
-import { authClient } from "../lib/auth-client";
 import { ThemeToggle } from "../components/ThemeToggle";
+import { authClient } from "../lib/auth-client";
 
 interface HomePageProps {
-	navigate: (route: "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password") => void;
+	navigate: (
+		route:
+			| "/"
+			| "/login"
+			| "/signup"
+			| "/pricing"
+			| "/dashboard"
+			| "/forgot-password"
+			| "/reset-password",
+	) => void;
 }
 
 export default function HomePage({ navigate }: HomePageProps) {

package/templates/saas/src/client/pages/LoginPage.tsx

@@ -1,9 +1,18 @@
 import { useState } from "react";
-import { authClient } from "../lib/auth-client";
 import { ThemeToggle } from "../components/ThemeToggle";
+import { authClient } from "../lib/auth-client";
 
 interface LoginPageProps {
-	navigate: (route: "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password") => void;
+	navigate: (
+		route:
+			| "/"
+			| "/login"
+			| "/signup"
+			| "/pricing"
+			| "/dashboard"
+			| "/forgot-password"
+			| "/reset-password",
+	) => void;
 }
 
 export default function LoginPage({ navigate }: LoginPageProps) {

package/templates/saas/src/client/pages/PricingPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
-import { authClient } from "../lib/auth-client";
 import { toast } from "sonner";
+import { ThemeToggle } from "../components/ThemeToggle";
+import { Button } from "../components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -9,12 +10,20 @@ import {
 	CardHeader,
 	CardTitle,
 } from "../components/ui/card";
-import { Button } from "../components/ui/button";
-import { ThemeToggle } from "../components/ThemeToggle";
-import { plans, getPlanName, isPaidPlan, type PlanId, type PlanConfig } from "../lib/plans";
+import { authClient } from "../lib/auth-client";
+import { type PlanConfig, type PlanId, getPlanName, isPaidPlan, plans } from "../lib/plans";
 
 interface PricingPageProps {
-	navigate: (route: "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password") => void;
+	navigate: (
+		route:
+			| "/"
+			| "/login"
+			| "/signup"
+			| "/pricing"
+			| "/dashboard"
+			| "/forgot-password"
+			| "/reset-password",
+	) => void;
 }
 
 export default function PricingPage({ navigate }: PricingPageProps) {
@@ -45,7 +54,7 @@ export default function PricingPage({ navigate }: PricingPageProps) {
 					try {
 						const subscription = await authClient.subscription.list();
 						const activeSub = subscription?.data?.find(
-							(s: { status: string }) => s.status === "active" || s.status === "trialing"
+							(s: { status: string }) => s.status === "active" || s.status === "trialing",
 						);
 						if (activeSub?.plan) {
 							setCurrentPlan(activeSub.plan as PlanId);
@@ -283,7 +292,10 @@ export default function PricingPage({ navigate }: PricingPageProps) {
 							<p className="text-sm text-yellow-800 dark:text-yellow-200">
 								<strong>Your subscription is set to cancel.</strong> You'll have access to{" "}
 								{getPlanName(currentPlan || "free")} features until{" "}
-								{periodEnd ? new Date(periodEnd).toLocaleDateString() : "the end of your billing period"}.
+								{periodEnd
+									? new Date(periodEnd).toLocaleDateString()
+									: "the end of your billing period"}
+								.
 							</p>
 							<Button variant="outline" size="sm" asChild className="shrink-0">
 								<a href="/api/billing-portal">Manage in Stripe</a>
@@ -320,9 +332,7 @@ export default function PricingPage({ navigate }: PricingPageProps) {
 									<CardTitle className="text-2xl">{plan.name}</CardTitle>
 									<div className="mt-2">
 										<span className="text-4xl font-bold">{plan.price}</span>
-										{plan.id !== "free" && (
-											<span className="text-muted-foreground">/month</span>
-										)}
+										{plan.id !== "free" && <span className="text-muted-foreground">/month</span>}
 									</div>
 									<CardDescription className="mt-2">{plan.description}</CardDescription>
 								</CardHeader>