@moontra/moonui-pro 2.1.0 → 2.1.1

package/src/components/rich-text-editor/index.tsx

@@ -97,28 +97,77 @@ import { toast } from '../ui/toast';
 // Note: AI providers should be handled by consuming application
 
 // Type definitions for AI functionality
-type AIProvider = 'openai' | 'anthropic' | 'gemini'
+type AIProvider = 'openai' | 'anthropic' | 'gemini' | 'claude' | 'cohere'
 
 interface AISettingsType {
   provider: AIProvider
   apiKey?: string
   model?: string
+  temperature?: number
   maxTokens?: number
 }
 
 interface SlashCommand {
-  title: string
+  id?: string
+  title?: string
   description: string
   command: string
-  action: () => void
+  icon?: string
+  action: (text: string) => Promise<{ text: string; error?: string }> | void
 }
 
 // Mock AI provider function
 const getAIProvider = (settings: AISettingsType) => {
+  const generateWithPrompt = async (systemPrompt: string, userText: string) => {
+    // Mock implementation - consuming app should provide real AI integration
+    const result = `[${systemPrompt}] ${userText}`
+    return { text: result, error: undefined }
+  }
+
   return {
     generateText: async (prompt: string) => {
-      // Mock implementation - consuming app should provide real AI integration
-      return 'AI functionality requires proper API configuration'
+      const result = await generateWithPrompt('Generate text', prompt)
+      return result.text
+    },
+    rewrite: async (text: string) => {
+      const result = await generateWithPrompt('Rewrite this text', text)
+      return result
+    },
+    expand: async (text: string) => {
+      const result = await generateWithPrompt('Expand this text', text)
+      return result
+    },
+    summarize: async (text: string) => {
+      const result = await generateWithPrompt('Summarize this text', text)
+      return result
+    },
+    fixGrammar: async (text: string) => {
+      const result = await generateWithPrompt('Fix grammar and spelling', text)
+      return result
+    },
+    translate: async (text: string, targetLang: string) => {
+      const result = await generateWithPrompt(`Translate to ${targetLang}`, text)
+      return result
+    },
+    changeTone: async (text: string, tone: string) => {
+      const result = await generateWithPrompt(`Change tone to ${tone}`, text)
+      return result
+    },
+    continueWriting: async (text: string) => {
+      const result = await generateWithPrompt('Continue writing', text)
+      return result
+    },
+    improveWriting: async (text: string) => {
+      const result = await generateWithPrompt('Improve writing quality', text)
+      return result
+    },
+    generateIdeas: async (text: string) => {
+      const result = await generateWithPrompt('Generate writing ideas', text)
+      return result
+    },
+    complete: async (text: string) => {
+      const result = await generateWithPrompt('Complete this text', text)
+      return result
     }
   }
 }
@@ -255,14 +304,12 @@ export function RichTextEditor({
   },
 }: RichTextEditorProps) {
   // Pro access kontrolü
-  const docsProAccess = { hasAccess: true }; // Pro access assumed in package
   const { hasProAccess, isLoading } = useSubscription();
   
   // In docs mode, always show the component
-  const canShowComponent = docsProAccess.isDocsMode || hasProAccess;
   
   // If not in docs mode and no pro access, show upgrade prompt
-  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-full", className)}>
         <CardContent className="py-12 text-center">
@@ -548,10 +595,10 @@ export function RichTextEditor({
           response = await provider.improveWriting(text);
           break;
         case 'ideas':
-          response = await provider.generateIdeas(text, 5);
+          response = await provider.generateIdeas(text);
           break;
         default:
-          response = await provider.complete(action, text);
+          response = await provider.complete(text);
       }
       
       if (response.error) {
@@ -938,6 +985,16 @@ export function RichTextEditor({
                 <DialogTrigger asChild>
                   <ToolbarButton
                     active={editor.isActive('link')}
+                    onClick={() => {
+                      const previousUrl = editor.getAttributes('link').href
+                      const url = window.prompt('URL', previousUrl)
+                      if (url === null) return
+                      if (url === '') {
+                        editor.chain().focus().extendMarkRange('link').unsetLink().run()
+                      } else {
+                        editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+                      }
+                    }}
                     tooltip="Add link"
                     disabled={isSourceView}
                   >
@@ -994,6 +1051,12 @@ export function RichTextEditor({
               <Dialog open={isImageDialogOpen} onOpenChange={setIsImageDialogOpen}>
                 <DialogTrigger asChild>
                   <ToolbarButton
+                    onClick={() => {
+                      const url = window.prompt('Image URL')
+                      if (url) {
+                        editor.chain().focus().setImage({ src: url }).run()
+                      }
+                    }}
                     tooltip="Add image"
                     disabled={isSourceView}
                   >
@@ -1038,6 +1101,7 @@ export function RichTextEditor({
                 <Dialog open={isTableDialogOpen} onOpenChange={setIsTableDialogOpen}>
                   <DialogTrigger asChild>
                     <ToolbarButton
+                      onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
                       tooltip="Create table"
                       disabled={isSourceView}
                     >
@@ -1255,6 +1319,7 @@ export function RichTextEditor({
               <Dialog open={isAiSettingsOpen} onOpenChange={setIsAiSettingsOpen}>
                 <DialogTrigger asChild>
                   <ToolbarButton
+                    onClick={() => setIsAiSettingsOpen(true)}
                     tooltip="AI Settings - Configure your API keys here"
                     disabled={isSourceView}
                   >

package/src/components/rich-text-editor/slash-commands-extension.ts

@@ -11,7 +11,7 @@ declare module '@tiptap/core' {
   }
 }
 
-export interface SlashCommandsOptions {
+interface SlashCommandsOptions {
   commands: SlashCommand[];
   onSelectCommand: (command: SlashCommand) => void;
 }

package/src/components/spotlight-card/index.tsx

@@ -66,7 +66,6 @@ const SpotlightCardInternal = React.forwardRef<HTMLDivElement, SpotlightCardProp
         onMouseLeave={handleMouseLeave}
         whileHover={{ scale: 1.02 }}
         transition={{ duration: 0.2 }}
-        {...props}
       >
         {/* Spotlight effect */}
         <motion.div
@@ -154,14 +153,12 @@ SpotlightCardInternal.displayName = "SpotlightCardInternal"
 export const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
   ({ className, ...props }, ref) => {
     // Check if we're in docs mode or have pro access
-    const docsProAccess = { hasAccess: true } // Pro access assumed in package
     const { hasProAccess, isLoading } = useSubscription()
     
     // In docs mode, always show the component
-    const canShowComponent = docsProAccess.isDocsMode || hasProAccess
     
     // If not in docs mode and no pro access, show upgrade prompt
-    if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+    if (!isLoading && !hasProAccess) {
       return (
         <Card className={cn("w-fit", className)}>
           <CardContent className="py-6 text-center">

package/src/components/swipeable-card/index.tsx

@@ -4,7 +4,7 @@ import React, { ReactNode } from "react"
 import { motion, useMotionValue, useTransform, animate, PanInfo } from "framer-motion"
 import { cn } from "../../lib/utils"
 
-export interface SwipeableCardProps {
+interface SwipeableCardProps {
   children: ReactNode
   onSwipeLeft?: () => void
   onSwipeRight?: () => void

package/src/components/timeline/index.tsx

@@ -21,7 +21,7 @@ import {
 } from 'lucide-react'
 import { cn } from '@moontra/moonui'
 
-export interface TimelineEvent {
+interface TimelineEvent {
   id: string
   title: string
   description?: string
@@ -44,7 +44,7 @@ export interface TimelineEvent {
   color?: string
 }
 
-export interface TimelineProps {
+interface TimelineProps {
   events: TimelineEvent[]
   onEventClick?: (event: TimelineEvent) => void
   className?: string

package/src/components/ui/color-picker.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from "react"
 import { cn } from "../../lib/utils"
 
-export interface ColorPickerProps {
+interface ColorPickerProps {
   value?: string
   onChange?: (color: string) => void
   className?: string

package/src/components/ui/index.ts

@@ -18,6 +18,8 @@ export * from './switch';
 export * from './checkbox';
 export * from './color-picker';
 export * from './textarea';
+export * from './skeleton';
+export * from './progress';
 
 // Micro-interaction Components
 export { AnimatedButton, animatedButtonVariants } from "./animated-button";

package/src/components/ui/progress.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { cn } from "../../lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { cn } from "../../lib/utils"
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Skeleton({
+  className,
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}

package/src/components/ui/tooltip.tsx

@@ -72,7 +72,7 @@ const TooltipContent = React.forwardRef<
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
 // Simplified Tooltip component for easy usage
-export interface SimpleTooltipProps {
+interface SimpleTooltipProps {
   children: React.ReactElement
   content: React.ReactNode
   variant?: TooltipContentProps["variant"]

package/src/components/virtual-list/index.tsx

@@ -43,8 +43,8 @@ export function VirtualList<T = any>({
   // Refs
   const containerRef = useRef<HTMLDivElement>(null)
   const scrollElementRef = useRef<HTMLDivElement>(null)
-  const scrollTimeoutRef = useRef<NodeJS.Timeout>()
-  const isScrollingTimeoutRef = useRef<NodeJS.Timeout>()
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
+  const isScrollingTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
 
   // Item pozisyonlarını hesapla
   const itemPositions = useMemo(() => {
@@ -365,5 +365,4 @@ export function SelectableVirtualList<T = any>({
   return <VirtualList {...props} renderItem={renderItem} />
 }
 
-// Export types
-export type { VirtualListProps, SelectableVirtualListProps }
+// Export types

package/src/hooks/use-chart.ts

@@ -3,7 +3,7 @@
 import React from 'react'
 import { ChartDataPoint, ChartSeries } from '../components/advanced-chart'
 
-export interface UseChartOptions {
+interface UseChartOptions {
   data: ChartDataPoint[]
   series: ChartSeries[]
   realtime?: boolean
@@ -11,7 +11,7 @@ export interface UseChartOptions {
   maxDataPoints?: number
 }
 
-export interface UseChartReturn {
+interface UseChartReturn {
   data: ChartDataPoint[]
   series: ChartSeries[]
   isLoading: boolean

package/src/index.ts

@@ -1,9 +1,6 @@
 // Pro Components Export - Source of Truth: packages/moonui-pro
 // Development environment imports from local packages
 
-// Package access guard - ensures CLI usage
-import "./utils/package-guard"
-
 // Import CSS for auto-loading
 import "./styles/index.css"
 

package/src/patterns/login-form/types.ts

@@ -1,4 +1,4 @@
-export interface LoginFormTheme {
+interface LoginFormTheme {
   primary?: string
   secondary?: string
   background?: string
@@ -7,7 +7,7 @@ export interface LoginFormTheme {
   spacing?: 'compact' | 'normal' | 'relaxed'
 }
 
-export interface LoginFormFeatures {
+interface LoginFormFeatures {
   socialLogin?: boolean | string[]
   rememberMe?: boolean
   forgotPassword?: boolean
@@ -15,7 +15,7 @@ export interface LoginFormFeatures {
   passwordStrength?: boolean
 }
 
-export interface LoginFormTexts {
+interface LoginFormTexts {
   title?: string
   subtitle?: string
   emailLabel?: string
@@ -27,18 +27,18 @@ export interface LoginFormTexts {
   orContinueWith?: string
 }
 
-export interface LoginData {
+interface LoginData {
   email: string
   password: string
   rememberMe?: boolean
 }
 
-export interface ValidationRules {
+interface ValidationRules {
   email?: (value: string) => string | null
   password?: (value: string) => string | null
 }
 
-export interface LoginFormProps {
+interface LoginFormProps {
   // Stil özelleştirme
   theme?: LoginFormTheme
   className?: string

package/src/use-pro-access.ts

@@ -6,7 +6,7 @@ import { useSession } from 'next-auth/react'
 import { useQuery } from '@tanstack/react-query'
 import { getComponentAccess } from '@/lib/component-metadata'
 
-export interface UserSubscription {
+interface UserSubscription {
   userId: string
   plan: 'free' | 'pro_monthly' | 'pro_annual' | 'pro_lifetime'
   status: 'active' | 'expired' | 'cancelled' | 'trial'
@@ -15,7 +15,7 @@ export interface UserSubscription {
   updatedAt: Date
 }
 
-export interface ProAccessStatus {
+interface ProAccessStatus {
   hasProAccess: boolean
   subscription: UserSubscription | null | undefined
   isLoading: boolean

package/src/utils/chart-helpers.ts

@@ -1,6 +1,6 @@
 import { ChartDataPoint, ChartSeries } from '../components/advanced-chart'
 
-export interface ChartTheme {
+interface ChartTheme {
   colors: string[]
   backgroundColor: string
   textColor: string

package/src/utils/license-guard.tsx

@@ -1,177 +0,0 @@
-"use client"
-
-import React, { useEffect, useState } from 'react';
-
-const API_BASE = process.env.NEXT_PUBLIC_MOONUI_API || 'https://moonui.dev';
-
-interface LicenseCheckResult {
-  valid: boolean;
-  error?: string;
-  loading: boolean;
-}
-
-// In-memory cache for license check
-let licenseCache: {
-  result: boolean;
-  timestamp: number;
-} | null = null;
-
-const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
-
-export function useLicenseCheck(): LicenseCheckResult {
-  const [state, setState] = useState<LicenseCheckResult>({
-    valid: false,
-    loading: true,
-    error: undefined
-  });
-
-  useEffect(() => {
-    checkLicense().then(result => {
-      setState({
-        valid: result.valid,
-        loading: false,
-        error: result.error
-      });
-    });
-  }, []);
-
-  return state;
-}
-
-async function checkLicense(): Promise<{ valid: boolean; error?: string }> {
-  // Check cache first
-  if (licenseCache && Date.now() - licenseCache.timestamp < CACHE_DURATION) {
-    return { valid: licenseCache.result };
-  }
-
-  try {
-    // Get auth token from localStorage or cookie
-    const token = getAuthToken();
-    
-    if (!token) {
-      return { valid: false, error: 'No authentication token found' };
-    }
-
-    const response = await fetch(`${API_BASE}/api/license/verify`, {
-      method: 'POST',
-      headers: {
-        'Authorization': `Bearer ${token}`,
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        component: 'runtime-check',
-        source: 'moonui-pro'
-      })
-    });
-
-    if (!response.ok) {
-      return { valid: false, error: 'License verification failed' };
-    }
-
-    const data = await response.json();
-    
-    // Cache the result
-    licenseCache = {
-      result: data.valid && data.planType !== 'free',
-      timestamp: Date.now()
-    };
-
-    return { valid: licenseCache.result };
-  } catch (error) {
-    return { valid: false, error: 'Network error during license check' };
-  }
-}
-
-function getAuthToken(): string | null {
-  // First check localStorage (for client-side)
-  if (typeof window !== 'undefined') {
-    const stored = localStorage.getItem('moonui_auth');
-    if (stored) {
-      try {
-        const auth = JSON.parse(stored);
-        return auth.accessToken;
-      } catch {
-        // Invalid JSON
-      }
-    }
-  }
-
-  // Check cookies (for SSR)
-  if (typeof document !== 'undefined') {
-    const cookies = document.cookie.split(';');
-    for (const cookie of cookies) {
-      const [name, value] = cookie.trim().split('=');
-      if (name === 'moonui_token') {
-        return decodeURIComponent(value);
-      }
-    }
-  }
-
-  return null;
-}
-
-// License Guard HOC
-export function withLicenseGuard<P extends object>(
-  Component: React.ComponentType<P>,
-  options?: {
-    fallback?: React.ReactNode;
-    onUnauthorized?: () => void;
-  }
-) {
-  return function LicenseGuardedComponent(props: P) {
-    const { valid, loading, error } = useLicenseCheck();
-
-    useEffect(() => {
-      if (!loading && !valid && options?.onUnauthorized) {
-        options.onUnauthorized();
-      }
-    }, [loading, valid]);
-
-    if (loading) {
-      return (
-        <div className="flex items-center justify-center p-8">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
-        </div>
-      );
-    }
-
-    if (!valid) {
-      if (options?.fallback) {
-        return <>{options.fallback}</>;
-      }
-
-      return (
-        <div className="rounded-lg border border-red-200 bg-red-50 p-8 text-center">
-          <h3 className="text-lg font-semibold text-red-900 mb-2">
-            Pro License Required
-          </h3>
-          <p className="text-red-700 mb-4">
-            This component requires a MoonUI Pro license.
-          </p>
-          <a
-            href="https://moonui.dev/pricing"
-            className="inline-flex items-center justify-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700"
-          >
-            Get Pro License
-          </a>
-          {error && (
-            <p className="text-xs text-red-600 mt-4">
-              Error: {error}
-            </p>
-          )}
-        </div>
-      );
-    }
-
-    return <Component {...props} />;
-  };
-}
-
-// Self-protecting component wrapper
-export function ProComponent<P extends object>({
-  component: Component,
-  ...props
-}: P & { component: React.ComponentType<P> }) {
-  const GuardedComponent = withLicenseGuard(Component);
-  return <GuardedComponent {...(props as P)} />;
-}

package/src/utils/package-guard.ts

@@ -1,60 +0,0 @@
-/**
- * Package Access Guard
- * Prevents direct NPM package usage without CLI
- */
-
-const ALLOWED_CALLERS = [
-  '@moontra/moonui-cli',
-  'moonui-cli',
-  '.moonui/temp', // CLI temp directory
-];
-
-const DEV_MODE = process.env.NODE_ENV === 'development';
-
-export function checkPackageAccess(): void {
-  // Skip in development mode for easier testing
-  if (DEV_MODE) {
-    return;
-  }
-
-  // Check if running in a browser (client-side)
-  if (typeof window !== 'undefined') {
-    // Client-side access is allowed after server-side validation
-    return;
-  }
-
-  // Server-side check
-  const stack = new Error().stack;
-  
-  if (!stack) {
-    throw new Error(
-      'MoonUI Pro: This package can only be used via @moontra/moonui-cli. ' +
-      'Please install components using: npx @moontra/moonui-cli add <component>'
-    );
-  }
-
-  // Check if called from allowed sources
-  const isAllowed = ALLOWED_CALLERS.some(caller => stack.includes(caller));
-  
-  // Also check for local file paths that indicate CLI usage
-  const isCliGenerated = stack.includes('/components/ui/') || 
-                        stack.includes('/components/pro/');
-
-  if (!isAllowed && !isCliGenerated) {
-    console.error('Stack trace:', stack);
-    throw new Error(
-      'MoonUI Pro: Unauthorized package access detected.\n' +
-      'This package can only be used via @moontra/moonui-cli.\n' +
-      'Install components using: npx @moontra/moonui-cli add <component>\n\n' +
-      'If you have a Pro license, make sure to:\n' +
-      '1. Login with: npx @moontra/moonui-cli login\n' +
-      '2. Install components via CLI\n\n' +
-      'Learn more at: https://moonui.dev/docs/installation'
-    );
-  }
-}
-
-// Auto-check on import
-if (typeof window === 'undefined') {
-  checkPackageAccess();
-}