luxlabs 1.0.1 → 1.0.3

package/templates/interface-boilerplate/components/ui/select.tsx

@@ -1,149 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const Select = SelectPrimitive.Root;
-const SelectGroup = SelectPrimitive.Group;
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};

package/templates/interface-boilerplate/components/ui/separator.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import { cn } from '@/lib/utils';
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      'shrink-0 bg-border',
-      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-      className
-    )}
-    {...props}
-  />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };

package/templates/interface-boilerplate/components/ui/skeleton.tsx

@@ -1,12 +0,0 @@
-import { cn } from '@/lib/utils';
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

package/templates/interface-boilerplate/components/ui/switch.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { cn } from '@/lib/utils';
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };

package/templates/interface-boilerplate/components/ui/tabs.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '@/lib/utils';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-      className
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-      className
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      className
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };

package/templates/interface-boilerplate/components/ui/textarea.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea };

package/templates/interface-boilerplate/components/ui/tooltip.tsx

@@ -1,29 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { cn } from '@/lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/templates/interface-boilerplate/lib/analytics.ts

@@ -1,182 +0,0 @@
-/**
- * PostHog Analytics Helper
- *
- * Initializes PostHog for tracking user behavior in production interfaces.
- *
- * Usage:
- * 1. Wrap your app with <AnalyticsProvider> (in layout.tsx)
- * 2. Use trackEvent() for custom events
- * 3. Use identifyUser() when user logs in
- * 4. Use resetUser() when user logs out
- *
- * A/B Testing (Feature Flags):
- * 1. Create experiments in PostHog dashboard
- * 2. Use useFeatureFlagVariantKey() hook in client components
- * 3. Use getFeatureFlag() for server-side or non-React code
- *
- * @see AnalyticsProvider component for React context setup
- */
-
-import posthog from 'posthog-js';
-
-const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY || '';
-const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com';
-const INTERFACE_ID = process.env.NEXT_PUBLIC_LUX_INTERFACE_ID || '';
-
-let initialized = false;
-
-/**
- * Initialize PostHog analytics
- * NOTE: Prefer using <AnalyticsProvider> instead of calling this directly.
- * This function is kept for backward compatibility and non-React contexts.
- */
-export function initAnalytics(): void {
-	if (typeof window === 'undefined') return;
-	if (initialized) return;
-
-	if (!POSTHOG_KEY) {
-		console.warn('[analytics] PostHog not configured - missing POSTHOG_KEY');
-		return;
-	}
-
-	// Initialize PostHog with standard configuration
-	posthog.init(POSTHOG_KEY, {
-		api_host: POSTHOG_HOST,
-		autocapture: true,
-		capture_pageview: true,
-		capture_pageleave: true,
-		persistence: 'localStorage',
-		loaded: (ph) => {
-			// Register super properties that will be sent with every event
-			if (INTERFACE_ID) {
-				ph.register({
-					$lux_interface_id: INTERFACE_ID,
-				});
-			}
-		},
-	});
-
-	initialized = true;
-	console.log('[analytics] PostHog initialized');
-}
-
-/**
- * Track a custom event
- * @param name - Event name (e.g., 'button_clicked', 'form_submitted')
- * @param properties - Optional event properties
- */
-export function trackEvent(name: string, properties?: Record<string, any>): void {
-	if (!initialized && !posthog.__loaded) return;
-	posthog.capture(name, properties);
-}
-
-/**
- * Identify a user (call when user logs in)
- * @param userId - Unique user identifier
- * @param properties - Optional user properties (email, name, etc.)
- */
-export function identifyUser(userId: string, properties?: Record<string, any>): void {
-	if (!initialized && !posthog.__loaded) return;
-	posthog.identify(userId, properties);
-}
-
-/**
- * Reset user identity (call when user logs out)
- */
-export function resetUser(): void {
-	if (!initialized && !posthog.__loaded) return;
-	posthog.reset();
-}
-
-/**
- * Check if analytics is initialized
- */
-export function isAnalyticsInitialized(): boolean {
-	return initialized || posthog.__loaded;
-}
-
-// ============================================================================
-// A/B Testing & Feature Flags
-// ============================================================================
-
-/**
- * Get a feature flag value (for non-React contexts or server-side checks)
- *
- * For React components, prefer using the useFeatureFlagVariantKey hook:
- * ```tsx
- * import { useFeatureFlagVariantKey } from 'posthog-js/react';
- * const variant = useFeatureFlagVariantKey('my-experiment');
- * ```
- *
- * @param flagKey - The feature flag key from PostHog
- * @returns The variant key (e.g., 'control', 'test') or undefined if not loaded
- */
-export function getFeatureFlag(flagKey: string): string | boolean | undefined {
-	if (!posthog.__loaded) return undefined;
-	return posthog.getFeatureFlag(flagKey);
-}
-
-/**
- * Check if a feature flag is enabled (boolean flags)
- * @param flagKey - The feature flag key from PostHog
- * @returns true if enabled, false otherwise
- */
-export function isFeatureEnabled(flagKey: string): boolean {
-	if (!posthog.__loaded) return false;
-	return posthog.isFeatureEnabled(flagKey) ?? false;
-}
-
-/**
- * Get the payload associated with a feature flag
- * Useful for passing configuration data with experiments
- *
- * @param flagKey - The feature flag key from PostHog
- * @returns The payload object or undefined
- */
-export function getFeatureFlagPayload(flagKey: string): Record<string, any> | undefined {
-	if (!posthog.__loaded) return undefined;
-	return posthog.getFeatureFlagPayload(flagKey) as Record<string, any> | undefined;
-}
-
-/**
- * Manually reload feature flags
- * Useful after user identification or when you need fresh flag values
- */
-export function reloadFeatureFlags(): void {
-	if (!posthog.__loaded) return;
-	posthog.reloadFeatureFlags();
-}
-
-/**
- * Register a callback for when feature flags are loaded
- * @param callback - Function to call when flags are ready
- */
-export function onFeatureFlagsLoaded(callback: () => void): void {
-	if (!posthog.__loaded) return;
-	posthog.onFeatureFlags(callback);
-}
-
-/**
- * Track a conversion event for an A/B test
- * This helps PostHog calculate experiment results
- *
- * @param experimentKey - The experiment/feature flag key
- * @param eventName - The conversion event name (e.g., 'signup_completed')
- * @param properties - Optional additional properties
- */
-export function trackExperimentConversion(
-	experimentKey: string,
-	eventName: string,
-	properties?: Record<string, any>
-): void {
-	if (!posthog.__loaded) return;
-
-	// Get the current variant for attribution
-	const variant = posthog.getFeatureFlag(experimentKey);
-
-	posthog.capture(eventName, {
-		...properties,
-		$experiment_key: experimentKey,
-		$experiment_variant: variant,
-	});
-}

package/templates/interface-boilerplate/lib/auth-context.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
-import { User, AuthSession, getSession, signIn, signUp, signOut, signInWithGoogle } from './auth';
-
-interface AuthContextType {
-  user: User | null;
-  isLoading: boolean;
-  isAuthenticated: boolean;
-  signIn: (email: string, password: string) => Promise<{ success: boolean; error?: string }>;
-  signUp: (email: string, password: string, name?: string) => Promise<{ success: boolean; error?: string }>;
-  signOut: () => Promise<void>;
-  signInWithGoogle: (redirectUri?: string) => void;
-  refresh: () => Promise<void>;
-}
-
-const AuthContext = createContext<AuthContextType | null>(null);
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const refresh = async () => {
-    try {
-      const session = await getSession();
-      setUser(session?.user || null);
-    } catch {
-      setUser(null);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    refresh();
-  }, []);
-
-  const handleSignIn = async (email: string, password: string) => {
-    const result = await signIn(email, password);
-    if (result.success && result.user) {
-      setUser(result.user);
-    }
-    return result;
-  };
-
-  const handleSignUp = async (email: string, password: string, name?: string) => {
-    const result = await signUp(email, password, name);
-    if (result.success && result.user) {
-      setUser(result.user);
-    }
-    return result;
-  };
-
-  const handleSignOut = async () => {
-    await signOut();
-    setUser(null);
-  };
-
-  return (
-    <AuthContext.Provider
-      value={{
-        user,
-        isLoading,
-        isAuthenticated: !!user,
-        signIn: handleSignIn,
-        signUp: handleSignUp,
-        signOut: handleSignOut,
-        signInWithGoogle,
-        refresh,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-export function useAuth(): AuthContextType {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-}