@catalystsoftware/ui 1.0.5 → 1.0.7

package/components/catalyst-ui/utils/cors-middleware.tsx

@@ -1,71 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-
-export function CORSMiddleware() {
-  const handleCORS = useCallback((
-    request: Request,
-    options: CORSOptions
-  ): Response | null => {
-    const origin = request.headers.get('Origin');
-    const method = request.method;
-
-    if (method === 'OPTIONS') {
-      const headers = new Headers();
-      
-      if (typeof options.origin === 'boolean') {
-        headers.set('Access-Control-Allow-Origin', options.origin ? '*' : 'null');
-      } else if (typeof options.origin === 'string') {
-        headers.set('Access-Control-Allow-Origin', options.origin);
-      } else if (Array.isArray(options.origin) && origin) {
-        if (options.origin.includes(origin)) {
-          headers.set('Access-Control-Allow-Origin', origin);
-        }
-      }
-
-      if (options.credentials) {
-        headers.set('Access-Control-Allow-Credentials', 'true');
-      }
-
-      if (options.methods) {
-        headers.set('Access-Control-Allow-Methods', options.methods.join(', '));
-      }
-
-      if (options.headers) {
-        headers.set('Access-Control-Allow-Headers', options.headers.join(', '));
-      }
-
-      return new Response(null, { status: 204, headers });
-    }
-
-    return null;
-  }, []);
-
-  const addCORSHeaders = useCallback((
-    response: Response,
-    options: CORSOptions,
-    requestOrigin?: string
-  ): Response => {
-    const headers = new Headers(response.headers);
-
-    if (typeof options.origin === 'boolean') {
-      headers.set('Access-Control-Allow-Origin', options.origin ? '*' : 'null');
-    } else if (typeof options.origin === 'string') {
-      headers.set('Access-Control-Allow-Origin', options.origin);
-    } else if (Array.isArray(options.origin) && requestOrigin) {
-      if (options.origin.includes(requestOrigin)) {
-        headers.set('Access-Control-Allow-Origin', requestOrigin);
-      }
-    }
-
-    if (options.credentials) {
-      headers.set('Access-Control-Allow-Credentials', 'true');
-    }
-
-    return new Response(response.body, {
-      status: response.status,
-      statusText: response.statusText,
-      headers,
-    });
-  }, []);
-
-  return { handleCORS, addCORSHeaders };
-}

package/components/catalyst-ui/utils/deferred-content.tsx

@@ -1,595 +0,0 @@
-import React, { useState, useRef, useEffect, ReactNode } from 'react';
-import { cn } from '~/components/catalyst-ui';
-import { Loader2 } from 'lucide-react';
-
-export interface DeferredContentProps {
-  children: ReactNode;
-  className?: string;
-  onLoad?: () => void;
-  loading?: boolean;
-  loadingTemplate?: ReactNode;
-  threshold?: number;
-  rootMargin?: string;
-  root?: Element | null;
-}
-
-export function DeferredContent({
-  children,
-  className,
-  onLoad,
-  loading = false,
-  loadingTemplate,
-  threshold = 0,
-  rootMargin = '0px',
-  root = null,
-}: DeferredContentProps) {
-  const [isVisible, setIsVisible] = useState(false);
-  const [hasLoaded, setHasLoaded] = useState(false);
-  const elementRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const element = elementRef.current;
-    if (!element) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const [entry] = entries;
-        if (entry.isIntersecting && !hasLoaded) {
-          setIsVisible(true);
-          setHasLoaded(true);
-          onLoad?.();
-          observer.unobserve(element);
-        }
-      },
-      {
-        threshold,
-        rootMargin,
-        root,
-      }
-    );
-
-    observer.observe(element);
-
-    return () => {
-      if (element) {
-        observer.unobserve(element);
-      }
-    };
-  }, [threshold, rootMargin, root, hasLoaded, onLoad]);
-
-  const defaultLoadingTemplate = (
-    <div className="flex items-center justify-center p-8">
-      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-    </div>
-  );
-
-  return (
-    <div
-      ref={elementRef}
-      className={cn('min-h-[1px]', className)}
-    >
-      {hasLoaded && !loading ? (
-        children
-      ) : (
-        loadingTemplate || defaultLoadingTemplate
-      )}
-    </div>
-  );
-}
-
-export interface DeferredImageProps {
-  src: string;
-  alt?: string;
-  className?: string;
-  loadingClassName?: string;
-  threshold?: number;
-  rootMargin?: string;
-  onLoad?: () => void;
-}
-
-export function DeferredImage({
-  src,
-  alt = '',
-  className,
-  loadingClassName,
-  threshold = 0,
-  rootMargin = '0px',
-  onLoad,
-}: DeferredImageProps) {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [imageError, setImageError] = useState(false);
-
-  const handleImageLoad = () => {
-    setImageLoaded(true);
-    onLoad?.();
-  };
-
-  const handleImageError = () => {
-    setImageError(true);
-  };
-
-  const loadingTemplate = (
-    <div className={cn(
-      'bg-muted animate-pulse rounded-md flex items-center justify-center',
-      'min-h-[200px] w-full',
-      loadingClassName
-    )}>
-      <div className="text-muted-foreground text-sm">Loading...</div>
-    </div>
-  );
-
-  return (
-    <DeferredContent
-      threshold={threshold}
-      rootMargin={rootMargin}
-      loadingTemplate={loadingTemplate}
-    >
-      {imageError ? (
-        <div className={cn(
-          'bg-muted rounded-md flex items-center justify-center',
-          'min-h-[200px] w-full text-muted-foreground',
-          className
-        )}>
-          Failed to load image
-        </div>
-      ) : (
-        <img
-          src={src}
-          alt={alt}
-          className={cn(
-            'transition-opacity duration-300',
-            imageLoaded ? 'opacity-100' : 'opacity-0',
-            className
-          )}
-          onLoad={handleImageLoad}
-          onError={handleImageError}
-        />
-      )}
-    </DeferredContent>
-  );
-}
-
-export interface DeferredTableProps {
-  data: any[];
-  columns: Array<{
-    field: string;
-    header: string;
-    className?: string;
-  }>;
-  className?: string;
-  threshold?: number;
-  rootMargin?: string;
-  onLoad?: () => void;
-}
-
-export function DeferredTable({
-  data,
-  columns,
-  className,
-  threshold = 0,
-  rootMargin = '0px',
-  onLoad,
-}: DeferredTableProps) {
-  const loadingTemplate = (
-    <div className="space-y-4">
-      <div className="h-8 bg-muted animate-pulse rounded" />
-      {Array.from({ length: 5 }).map((_, i) => (
-        <div key={i} className="h-12 bg-muted animate-pulse rounded" />
-      ))}
-    </div>
-  );
-
-  return (
-    <DeferredContent
-      threshold={threshold}
-      rootMargin={rootMargin}
-      loadingTemplate={loadingTemplate}
-      onLoad={onLoad}
-    >
-      <div className={cn('overflow-x-auto', className)}>
-        <table className="w-full border-collapse">
-          <thead>
-            <tr className="border-b border-border">
-              {columns.map((column) => (
-                <th
-                  key={column.field}
-                  className={cn(
-                    'text-left p-4 font-medium text-foreground',
-                    column.className
-                  )}
-                >
-                  {column.header}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((row, index) => (
-              <tr
-                key={index}
-                className="border-b border-border hover:bg-muted/50"
-              >
-                {columns.map((column) => (
-                  <td
-                    key={column.field}
-                    className={cn('p-4 text-foreground', column.className)}
-                  >
-                    {row[column.field]}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </DeferredContent>
-  );
-}
-
-export interface DeferredCardProps {
-  title: string;
-  description?: string;
-  imageUrl?: string;
-  buttonText?: string;
-  secondaryButtonText?: string;
-  onButtonClick?: () => void;
-  onSecondaryButtonClick?: () => void;
-  className?: string;
-  threshold?: number;
-  rootMargin?: string;
-  onLoad?: () => void;
-}
-
-export function DeferredCard({
-  title,
-  description,
-  imageUrl,
-  buttonText,
-  secondaryButtonText,
-  onButtonClick,
-  onSecondaryButtonClick,
-  className,
-  threshold = 0,
-  rootMargin = '0px',
-  onLoad,
-}: DeferredCardProps) {
-  const loadingTemplate = (
-    <div className="bg-background border border-border rounded-lg p-6 space-y-4">
-      <div className="h-6 bg-muted animate-pulse rounded" />
-      <div className="h-4 bg-muted animate-pulse rounded" />
-      <div className="h-4 bg-muted animate-pulse rounded w-2/3" />
-      {imageUrl && <div className="h-48 bg-muted animate-pulse rounded" />}
-      <div className="flex gap-2">
-        <div className="h-10 bg-muted animate-pulse rounded w-24" />
-        {secondaryButtonText && (
-          <div className="h-10 bg-muted animate-pulse rounded w-24" />
-        )}
-      </div>
-    </div>
-  );
-
-  return (
-    <DeferredContent
-      threshold={threshold}
-      rootMargin={rootMargin}
-      loadingTemplate={loadingTemplate}
-      onLoad={onLoad}
-    >
-      <div className={cn(
-        'bg-background border border-border rounded-lg p-6 space-y-4',
-        className
-      )}>
-        <h3 className="text-lg font-semibold text-foreground">{title}</h3>
-        {description && (
-          <p className="text-muted-foreground">{description}</p>
-        )}
-        {imageUrl && (
-          <DeferredImage
-            src={imageUrl}
-            alt={title}
-            className="w-full h-48 object-cover rounded-md"
-          />
-        )}
-        {(buttonText || secondaryButtonText) && (
-          <div className="flex gap-2">
-            {buttonText && (
-              <button
-                onClick={onButtonClick}
-                className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
-              >
-                {buttonText}
-              </button>
-            )}
-            {secondaryButtonText && (
-              <button
-                onClick={onSecondaryButtonClick}
-                className="px-4 py-2 border border-border text-foreground rounded-md hover:bg-muted transition-colors"
-              >
-                {secondaryButtonText}
-              </button>
-            )}
-          </div>
-        )}
-      </div>
-    </DeferredContent>
-  );
-}
-
-
-export default function DeferredContentDemo() {
-  const tableData = [
-    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Developer' },
-    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Designer' },
-    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager' },
-    { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'Developer' },
-    { id: 5, name: 'Charlie Wilson', email: 'charlie@example.com', role: 'Designer' },
-  ];
-
-  const tableColumns = [
-    { field: 'id', header: 'ID', className: 'w-16' },
-    { field: 'name', header: 'Name' },
-    { field: 'email', header: 'Email' },
-    { field: 'role', header: 'Role' },
-  ];
-
-  const handleLoad = (section: string) => {
-    console.log(`${section} loaded!`);
-  };
-
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="container mx-auto px-4 py-8 space-y-12">
-        <div className="text-center space-y-4">
-          <h1 className="text-4xl font-bold text-foreground">
-            DeferredContent Demo
-          </h1>
-          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-            Scroll down to see different deferred content components load as they come into view.
-            This technique improves page performance by only loading content when needed.
-          </p>
-        </div>
-
-        <div className="h-screen flex items-center justify-center bg-muted/20 rounded-lg">
-          <div className="text-center space-y-4">
-            <h2 className="text-2xl font-semibold text-foreground">
-              Scroll Down to See Deferred Content
-            </h2>
-            <p className="text-muted-foreground">
-              The components below will load when they become visible
-            </p>
-          </div>
-        </div>
-
-        <section className="space-y-6">
-          <h2 className="text-2xl font-bold text-foreground">Basic Deferred Content</h2>
-          <DeferredContent
-            onLoad={() => handleLoad('Basic Content')}
-            className="bg-card border border-border rounded-lg p-8"
-          >
-            <div className="text-center space-y-4">
-              <h3 className="text-xl font-semibold text-foreground">
-                This content was loaded lazily!
-              </h3>
-              <p className="text-muted-foreground">
-                This content only loaded when it became visible in the viewport.
-                This helps improve initial page load performance.
-              </p>
-            </div>
-          </DeferredContent>
-        </section>
-
-        <section className="space-y-6">
-          <h2 className="text-2xl font-bold text-foreground">Deferred Images</h2>
-          <div className="grid md:grid-cols-2 gap-6">
-            <DeferredImage
-              src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop"
-              alt="Mountain landscape"
-              className="w-full h-64 object-cover rounded-lg"
-              onLoad={() => handleLoad('Mountain Image')}
-            />
-            <DeferredImage
-              src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=500&h=300&fit=crop"
-              alt="Forest landscape"
-              className="w-full h-64 object-cover rounded-lg"
-              onLoad={() => handleLoad('Forest Image')}
-            />
-          </div>
-        </section>
-
-        <section className="space-y-6">
-          <h2 className="text-2xl font-bold text-foreground">Deferred Table</h2>
-          <DeferredTable
-            data={tableData}
-            columns={tableColumns}
-            className="bg-card border border-border rounded-lg overflow-hidden"
-            onLoad={() => handleLoad('User Table')}
-          />
-        </section>
-
-        <section className="space-y-6">
-          <h2 className="text-2xl font-bold text-foreground">Deferred Cards</h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <DeferredCard
-              title="Product Demo"
-              description="Experience our latest product features with this interactive demonstration."
-              imageUrl="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=200&fit=crop"
-              buttonText="Try Demo"
-              secondaryButtonText="Learn More"
-              onButtonClick={() => console.log('Demo clicked')}
-              onSecondaryButtonClick={() => console.log('Learn more clicked')}
-              onLoad={() => handleLoad('Product Card')}
-            />
-            
-            <DeferredCard
-              title="Get Started"
-              description="Ready to begin your journey? Follow our comprehensive getting started guide."
-              buttonText="Start Now"
-              onButtonClick={() => console.log('Start clicked')}
-              onLoad={() => handleLoad('Getting Started Card')}
-            />
-            
-            <DeferredCard
-              title="Documentation"
-              description="Explore our complete documentation with examples, API references, and best practices."
-              imageUrl="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=400&h=200&fit=crop"
-              buttonText="Read Docs"
-              secondaryButtonText="API Reference"
-              onButtonClick={() => console.log('Docs clicked')}
-              onSecondaryButtonClick={() => console.log('API clicked')}
-              onLoad={() => handleLoad('Documentation Card')}
-            />
-          </div>
-        </section>
-
-        <section className="space-y-6">
-          <h2 className="text-2xl font-bold text-foreground">Custom Loading Template</h2>
-          <DeferredContent
-            onLoad={() => handleLoad('Custom Loading')}
-            loadingTemplate={
-              <div className="bg-card border border-border rounded-lg p-8">
-                <div className="flex items-center justify-center space-x-2">
-                  <div className="w-3 h-3 bg-primary rounded-full animate-bounce"></div>
-                  <div className="w-3 h-3 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
-                  <div className="w-3 h-3 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
-                </div>
-                <p className="text-center text-muted-foreground mt-4">
-                  Custom loading animation...
-                </p>
-              </div>
-            }
-          >
-            <div className="bg-card border border-border rounded-lg p-8 text-center space-y-4">
-              <h3 className="text-xl font-semibold text-foreground">
-                Content with Custom Loading
-              </h3>
-              <p className="text-muted-foreground">
-                This section used a custom loading template with bouncing dots animation.
-              </p>
-            </div>
-          </DeferredContent>
-        </section>
-
-        <section className="space-y-6">
-          <h2 className="text-2xl font-bold text-foreground">Advanced Configuration</h2>
-          <div className="grid gap-6">
-            <DeferredContent
-              threshold={0.5}
-              rootMargin="50px"
-              onLoad={() => handleLoad('Advanced Config 1')}
-              className="bg-card border border-border rounded-lg p-6"
-            >
-              <div className="space-y-2">
-                <h3 className="text-lg font-semibold text-foreground">
-                  50% Visible + 50px Margin
-                </h3>
-                <p className="text-sm text-muted-foreground">
-                  threshold: 0.5, rootMargin: "50px"
-                </p>
-                <p className="text-muted-foreground">
-                  This content loads when 50% is visible, with 50px extra margin for early triggering.
-                </p>
-              </div>
-            </DeferredContent>
-
-            <DeferredContent
-              threshold={1.0}
-              onLoad={() => handleLoad('Advanced Config 2')}
-              className="bg-card border border-border rounded-lg p-6"
-            >
-              <div className="space-y-2">
-                <h3 className="text-lg font-semibold text-foreground">
-                  Fully Visible Required
-                </h3>
-                <p className="text-sm text-muted-foreground">
-                  threshold: 1.0
-                </p>
-                <p className="text-muted-foreground">
-                  This content only loads when the entire element is visible in the viewport.
-                </p>
-              </div>
-            </DeferredContent>
-          </div>
-        </section>
-
-        <div className="h-32 flex items-center justify-center bg-muted/20 rounded-lg">
-          <p className="text-muted-foreground text-center">
-            End of demo - Check your console for load events!
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function DeferredContentDemo1() {
-  return (
-    <div className="space-y-8 p-6">
-      <h1>Deferred Content Demo</h1>
-      
-      {/* Basic Deferred Content */}
-      <DeferredContent
-        threshold={0.1}
-        rootMargin="100px"
-        onLoad={() => console.log('Content loaded!')}
-        loadingTemplate={<div>Custom loading...</div>}
-      >
-        <div className="p-6 bg-blue-100 rounded-lg">
-          <h2>This content loads when visible</h2>
-          <p>It uses Intersection Observer to defer loading until needed.</p>
-        </div>
-      </DeferredContent>
-
-      {/* Deferred Image */}
-      <DeferredImage
-        src="https://example.com/large-image.jpg"
-        alt="Large image"
-        className="rounded-lg shadow-lg"
-        loadingClassName="rounded-lg"
-        threshold={0.2}
-        onLoad={() => console.log('Image loaded!')}
-      />
-
-      {/* Deferred Table */}
-      <DeferredTable
-        data={[
-          { id: 1, name: 'John', age: 30 },
-          { id: 2, name: 'Jane', age: 25 }
-        ]}
-        columns={[
-          { field: 'id', header: 'ID', className: 'w-20' },
-          { field: 'name', header: 'Name' },
-          { field: 'age', header: 'Age', className: 'w-20' }
-        ]}
-        threshold={0.3}
-        onLoad={() => console.log('Table loaded!')}
-      />
-
-      {/* Deferred Card */}
-      <DeferredCard
-        title="Product Card"
-        description="This card loads when it enters the viewport"
-        imageUrl="https://example.com/product.jpg"
-        buttonText="Buy Now"
-        secondaryButtonText="Learn More"
-        onButtonClick={() => console.log('Buy clicked')}
-        onSecondaryButtonClick={() => console.log('Learn more clicked')}
-        threshold={0.5}
-        rootMargin="200px"
-        onLoad={() => console.log('Card loaded!')}
-      />
-
-      {/* Multiple deferred items in a grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {[1, 2, 3, 4].map((item) => (
-          <DeferredCard
-            key={item}
-            title={`Card ${item}`}
-            description={`This is card number ${item}`}
-            threshold={0.1}
-            rootMargin="50px"
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

package/components/catalyst-ui/utils/honeypot-middleware.tsx

@@ -1,38 +0,0 @@
-
-import { useState, useEffect, useCallback, useRef } from "react";
-
-export function HoneypotMiddleware() {
-  const createHoneypot = useCallback((config: HoneypotConfig) => {
-    const timestamp = Date.now().toString();
-    const hash = btoa(`${timestamp}-${config.encryptionSeed}`);
-    
-    return {
-      nameField: config.nameFieldName,
-      validFromField: config.validFromFieldName,
-      encryptedValidFrom: hash,
-    };
-  }, []);
-
-  const validateHoneypot = useCallback((
-    formData: FormData, 
-    config: HoneypotConfig
-  ): boolean => {
-    const nameFieldValue = formData.get(config.nameFieldName);
-    const validFromValue = formData.get(config.validFromFieldName);
-    
-    if (nameFieldValue) return false;
-    
-    try {
-      const decrypted = atob(validFromValue as string);
-      const [timestamp] = decrypted.split('-');
-      const submissionTime = Date.now();
-      const honeypotTime = parseInt(timestamp);
-      
-      return submissionTime - honeypotTime > 1000;
-    } catch {
-      return false;
-    }
-  }, []);
-
-  return { createHoneypot, validateHoneypot };
-}