@omnikit-js/ui 0.5.5 → 0.6.0

package/src/components/BillingServer.tsx

@@ -1,129 +0,0 @@
-import BillingClient from './BillingClient';
-
-// Import types from the target implementation
-interface BillingProps {
-  userId: string;
-  apiUrl?: string;
-  apiKey?: string;
-  projectId?: string;
-}
-
-// Server actions - these would typically be in a separate file
-async function getCustomerData(userId: string, apiUrl: string, apiKey: string) {
-  try {
-    const response = await fetch(`${apiUrl}/billing/customers/${userId}`, {
-      headers: {
-        'x-api-key': apiKey,
-        'Content-Type': 'application/json'
-      },
-      cache: 'no-store'
-    });
-
-    if (!response.ok) {
-      throw new Error('Failed to fetch customer data');
-    }
-
-    const data = await response.json();
-    return data.customer;
-  } catch (error) {
-    console.error('Error fetching customer data:', error);
-    return null;
-  }
-}
-
-async function getPricingData(projectId: string, apiUrl: string, apiKey: string) {
-  try {
-    const response = await fetch(`${apiUrl}/billing/prices?project_id=${projectId}`, {
-      headers: {
-        'x-api-key': apiKey,
-        'Content-Type': 'application/json'
-      },
-      cache: 'no-store'
-    });
-
-    if (!response.ok) {
-      throw new Error('Failed to fetch pricing data');
-    }
-
-    return await response.json();
-  } catch (error) {
-    console.error('Error fetching pricing data:', error);
-    return null;
-  }
-}
-
-async function getPaymentMethods(userId: string, apiUrl: string, apiKey: string) {
-  try {
-    const response = await fetch(`${apiUrl}/billing/payment-methods?user_id=${userId}`, {
-      headers: {
-        'x-api-key': apiKey,
-        'Content-Type': 'application/json'
-      },
-      cache: 'no-store'
-    });
-
-    if (!response.ok) {
-      throw new Error('Failed to fetch payment methods');
-    }
-
-    return await response.json();
-  } catch (error) {
-    console.error('Error fetching payment methods:', error);
-    return null;
-  }
-}
-
-export default async function BillingServer({ 
-  userId, 
-  apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001',
-  apiKey = process.env.API_KEY || '',
-  projectId = process.env.NEXT_PUBLIC_API_PROJECT || ''
-}: BillingProps) {
-  if (!userId) {
-    console.error('Billing component: userId is required');
-    return <div>Error: User ID is required</div>;
-  }
-
-  let customerData = null;
-  let pricingData = null;
-  let paymentMethods = null;
-
-  try {
-    // Fetch all billing data in parallel
-    const [customer, pricing, methods] = await Promise.all([
-      getCustomerData(userId, apiUrl, apiKey),
-      getPricingData(projectId, apiUrl, apiKey),
-      getPaymentMethods(userId, apiUrl, apiKey)
-    ]);
-    
-    customerData = customer;
-    pricingData = pricing;
-    
-    // Use payment methods from customer data if available, otherwise use the separate endpoint
-    if (customer?.payment_methods) {
-      paymentMethods = { paymentMethods: customer.payment_methods };
-    } else {
-      paymentMethods = methods;
-    }
-  } catch (error) {
-    console.error('Error fetching billing data:', error);
-    // Return a fallback UI or error state
-    return (
-      <div className="p-6 text-center">
-        <p className="text-red-600">Failed to load billing information. Please try again later.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="omnikit-billing-component">
-      <BillingClient 
-        customerData={customerData}
-        pricingData={pricingData}
-        paymentMethods={paymentMethods}
-        apiUrl={apiUrl}
-        apiKey={apiKey}
-      />
-    </div>
-  );
-}

package/src/components/PaymentMethodForm.tsx

@@ -1,125 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
-import { Button } from './ui/button';
-import { Alert, AlertDescription } from './ui/alert';
-import { Loader2, CheckCircle } from 'lucide-react';
-
-interface PaymentMethodFormProps {
-  userId: string;
-  onSuccess?: () => void;
-  onCancel?: () => void;
-  createSetupIntent: (userId: string) => Promise<{ client_secret: string }>;
-}
-
-export default function PaymentMethodForm({ userId, onSuccess, onCancel, createSetupIntent }: PaymentMethodFormProps) {
-  const stripe = useStripe();
-  const elements = useElements();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!stripe || !elements) {
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      // Create setup intent
-      const { client_secret } = await createSetupIntent(userId);
-      
-      if (!client_secret) {
-        throw new Error('Failed to create setup intent');
-      }
-
-      // Confirm card setup
-      const result = await stripe.confirmCardSetup(client_secret, {
-        payment_method: {
-          card: elements.getElement(CardElement)!,
-        },
-      });
-
-      if (result.error) {
-        setError(result.error.message || 'An error occurred');
-      } else {
-        setSuccess(true);
-        
-        // Close modal after 2 seconds
-        setTimeout(() => {
-          onSuccess && onSuccess();
-        }, 2000);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (success) {
-    return (
-      <div className="text-center py-8">
-        <CheckCircle className="h-12 w-12 text-green-500 mx-auto mb-4" />
-        <p className="text-lg font-medium">Payment method added successfully!</p>
-        <p className="text-sm text-muted-foreground mt-2">Redirecting...</p>
-      </div>
-    );
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-6">
-      <div>
-        <label className="block text-sm font-medium mb-2">
-          Card Details
-        </label>
-        <div className="border rounded-md p-3 bg-background">
-          <CardElement
-            options={{
-              style: {
-                base: {
-                  fontSize: '16px',
-                  color: '#fff',
-                  '::placeholder': {
-                    color: '#999',
-                  },
-                },
-              },
-            }}
-          />
-        </div>
-      </div>
-
-      {error && (
-        <Alert variant="destructive">
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-
-      <div className="flex gap-2">
-        <Button
-          type="button"
-          variant="outline"
-          onClick={onCancel}
-          disabled={loading}
-          className="flex-1"
-        >
-          Cancel
-        </Button>
-        <Button
-          type="submit"
-          disabled={!stripe || loading}
-          className="flex-1"
-        >
-          {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          {loading ? 'Processing...' : 'Add Payment Method'}
-        </Button>
-      </div>
-    </form>
-  );
-}

package/src/components/SubscriptionConfirmModal.tsx

@@ -1,213 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from './ui/dialog';
-import { Button } from './ui/button';
-import { Card } from './ui/card';
-import { Check, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
-import { Alert, AlertDescription } from './ui/alert';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
-import { RadioGroup, RadioGroupItem } from './ui/radio-group';
-import { Label } from './ui/label';
-import { CardBrandIcon } from './ui/card-brand-icon';
-
-interface SubscriptionConfirmModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  plan: any;
-  currentPlan?: any;
-  paymentMethods: any[];
-  userId: string;
-  onSuccess: () => void;
-  createSubscription: (userId: string, priceId: string, paymentMethodId: string) => Promise<{success: boolean; error?: string}>;
-}
-
-export default function SubscriptionConfirmModal({
-  isOpen,
-  onClose,
-  plan,
-  currentPlan,
-  paymentMethods,
-  userId,
-  onSuccess,
-  createSubscription
-}: SubscriptionConfirmModalProps) {
-  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(
-    paymentMethods?.find(m => m.is_default)?.stripe_payment_method_id || paymentMethods?.[0]?.stripe_payment_method_id || ''
-  );
-  const [isSubscribing, setIsSubscribing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-
-  const formatCurrency = (amount: number) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'usd',
-    }).format(amount / 100);
-  };
-
-  const formatFeatureValue = (value: any) => {
-    // Handle string boolean values
-    if (value === 'true' || value === true) {
-      return '✓'
-    }
-    if (value === 'false' || value === false) {
-      return '✗'
-    }
-    // Handle numeric values (both string and number)
-    const numValue = typeof value === 'string' ? parseFloat(value) : value
-    if (!isNaN(numValue) && numValue >= 1000) {
-      return new Intl.NumberFormat('en-US').format(numValue)
-    }
-    return value
-  };
-
-  const handleConfirm = async () => {
-    setIsSubscribing(true);
-    setError(null);
-
-    try {
-      const priceId = plan.prices[0].stripe_price_id;
-      const isFree = parseFloat(plan.prices[0].unit_amount) === 0;
-      
-      const result = await createSubscription(
-        userId,
-        priceId,
-        isFree ? '' : selectedPaymentMethod
-      );
-
-      if (result.success) {
-        setSuccess(true);
-        setTimeout(() => {
-          onSuccess();
-          onClose();
-        }, 2000);
-      } else {
-        setError(result.error || 'Failed to create subscription');
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
-    } finally {
-      setIsSubscribing(false);
-    }
-  };
-
-  if (!plan) {
-    return null;
-  }
-
-  const price = plan?.prices?.[0];
-  const isFree = price && parseFloat(price.unit_amount) === 0;
-  const isDowngrade = currentPlan && price && parseFloat(price.unit_amount) < parseFloat(currentPlan.prices[0].unit_amount);
-
-  if (success) {
-    return (
-      <Dialog open={isOpen} onOpenChange={onClose}>
-        <DialogContent>
-          <div className="text-center py-8">
-            <CheckCircle className="h-12 w-12 text-green-500 mx-auto mb-4" />
-            <h3 className="text-lg font-medium">Subscription Successful!</h3>
-            <p className="text-sm text-muted-foreground mt-2">
-              You have been successfully subscribed to {plan.name}
-            </p>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Confirm Subscription</DialogTitle>
-          <DialogDescription>
-            {currentPlan ? 'You are about to change your subscription plan' : 'You are about to subscribe to a new plan'}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <Card className="p-4">
-            <h4 className="font-medium mb-2">{plan.name}</h4>
-            <p className="text-2xl font-bold mb-2">
-              {isFree ? 'Free' : formatCurrency(parseFloat(price.unit_amount) * 100)}
-              {!isFree && <span className="text-sm font-normal text-muted-foreground">/month</span>}
-            </p>
-            <ul className="space-y-1">
-              {plan.features?.map((feature: any) => (
-                <li key={feature.id} className="flex items-start text-sm">
-                  <Check className="h-4 w-4 mr-2 text-primary mt-0.5 shrink-0" />
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <span className="cursor-help">
-                          {formatFeatureValue(feature.value)} <span className="text-sm text-muted-foreground font-normal">{feature.units}</span> - {feature.name || feature.description}
-                        </span>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>{feature.description}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </li>
-              ))}
-            </ul>
-          </Card>
-
-          {!isFree && paymentMethods?.length > 0 && (
-            <div className="space-y-3">
-              <Label>Payment Method</Label>
-              <RadioGroup value={selectedPaymentMethod} onValueChange={setSelectedPaymentMethod}>
-                {paymentMethods.map((method) => (
-                  <div key={method.id} className="flex items-center space-x-3">
-                    <RadioGroupItem value={method.stripe_payment_method_id} id={method.id.toString()} />
-                    <Label htmlFor={method.id.toString()} className="flex items-center gap-3 cursor-pointer flex-1">
-                      <CardBrandIcon brand={method.brand} className="w-12 h-8" />
-                      <span className="font-medium">•••• {method.last4}</span>
-                      {method.is_default && (
-                        <span className="text-xs text-muted-foreground">(Default)</span>
-                      )}
-                    </Label>
-                  </div>
-                ))}
-              </RadioGroup>
-            </div>
-          )}
-
-          {!isFree && (
-            <Alert>
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription>
-                You will be charged {formatCurrency(parseFloat(price.unit_amount) * 100)} immediately upon confirmation.
-                {isDowngrade && ' Refunds for downgrades will be prorated and applied to your next invoice.'}
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {error && (
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-        </div>
-
-        <DialogFooter className="gap-2">
-          <Button
-            variant="outline"
-            onClick={onClose}
-            disabled={isSubscribing}
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={handleConfirm}
-            disabled={isSubscribing || (!isFree && !selectedPaymentMethod)}
-          >
-            {isSubscribing && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {isSubscribing ? 'Processing...' : 'Confirm Subscription'}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/theme-provider.tsx

@@ -1,11 +0,0 @@
-"use client"
- 
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
- 
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}

package/src/components/ui/alert.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground border-border",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/avatar.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "../../lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }

package/src/components/ui/badge.tsx

@@ -1,46 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }