@moontra/moonui-pro 2.20.2 → 2.20.4

package/src/patterns/login-form/index.tsx

@@ -1,276 +0,0 @@
-import React, { useState } from 'react'
-import { cn } from '../../utils/cn'
-import { useLicenseCheck } from '../../hooks/use-license-check'
-import { LicenseError } from '../../components/license-error'
-import { Skeleton } from '../../components/ui/skeleton'
-import type { LoginFormProps, LoginData } from './types'
-
-export function LoginFormCore({
-  theme = {},
-  className,
-  layout = 'single',
-  logo,
-  header,
-  footer,
-  features = {},
-  onSubmit,
-  onSocialLogin,
-  onForgotPassword,
-  validation,
-  texts = {},
-  autoFocus = true,
-  disabled = false,
-}: LoginFormProps) {
-  const { isValid, isLoading } = useLicenseCheck()
-  const [formData, setFormData] = useState<LoginData>({
-    email: '',
-    password: '',
-    rememberMe: false,
-  })
-  const [errors, setErrors] = useState<Partial<LoginData>>({})
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  // License kontrolü
-  if (isLoading) {
-    return <Skeleton className="w-full h-96" />
-  }
-
-  if (!isValid) {
-    return <LicenseError className={className} />
-  }
-
-  // Form submit handler
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    
-    if (disabled || isSubmitting) return
-
-    // Validation
-    const newErrors: Partial<LoginData> = {}
-    
-    if (validation?.email) {
-      const emailError = validation.email(formData.email)
-      if (emailError) newErrors.email = emailError
-    } else if (!formData.email) {
-      newErrors.email = 'Email is required'
-    }
-
-    if (validation?.password) {
-      const passwordError = validation.password(formData.password)
-      if (passwordError) newErrors.password = passwordError
-    } else if (!formData.password) {
-      newErrors.password = 'Password is required'
-    }
-
-    if (Object.keys(newErrors).length > 0) {
-      setErrors(newErrors)
-      return
-    }
-
-    setIsSubmitting(true)
-    try {
-      await onSubmit?.(formData)
-    } catch (error) {
-      console.error('Login error:', error)
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  // Social login handler
-  const handleSocialLogin = async (provider: string) => {
-    if (disabled || isSubmitting) return
-    
-    setIsSubmitting(true)
-    try {
-      await onSocialLogin?.(provider)
-    } catch (error) {
-      console.error('Social login error:', error)
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  // Layout classes
-  const layoutClasses = {
-    single: 'max-w-md mx-auto',
-    'two-column': 'grid md:grid-cols-2 gap-8',
-    centered: 'max-w-md mx-auto text-center',
-  }
-
-  // Theme styles
-  const themeStyles = {
-    '--login-primary': theme.primary || '#6366f1',
-    '--login-secondary': theme.secondary || '#8b5cf6',
-    '--login-background': theme.background || '#ffffff',
-    '--login-text': theme.text || '#1f2937',
-    '--login-border-radius': theme.borderRadius || '0.5rem',
-    '--login-spacing': theme.spacing === 'compact' ? '0.5rem' : theme.spacing === 'relaxed' ? '1.5rem' : '1rem',
-  } as React.CSSProperties
-
-  return (
-    <div
-      className={cn(
-        'w-full',
-        layoutClasses[layout],
-        className
-      )}
-      style={themeStyles}
-    >
-      <div className="space-y-6 p-8 rounded-lg border bg-[var(--login-background)] shadow-sm">
-        {/* Logo & Header */}
-        {(logo || header) && (
-          <div className="space-y-4">
-            {logo && <div className="flex justify-center">{logo}</div>}
-            {header}
-          </div>
-        )}
-
-        {/* Title */}
-        <div className="space-y-2 text-center">
-          <h2 className="text-2xl font-bold text-[var(--login-text)]">
-            {texts.title || 'Welcome back'}
-          </h2>
-          {texts.subtitle && (
-            <p className="text-sm text-gray-600">{texts.subtitle}</p>
-          )}
-        </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {/* Email field */}
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-[var(--login-text)]">
-              {texts.emailLabel || 'Email'}
-            </label>
-            <input
-              type="email"
-              value={formData.email}
-              onChange={(e) => {
-                setFormData({ ...formData, email: e.target.value })
-                setErrors({ ...errors, email: undefined })
-              }}
-              className={cn(
-                "w-full px-3 py-2 border rounded-[var(--login-border-radius)] focus:outline-none focus:ring-2 focus:ring-[var(--login-primary)]",
-                errors.email && "border-red-500"
-              )}
-              placeholder="name@example.com"
-              autoFocus={autoFocus}
-              disabled={disabled || isSubmitting}
-            />
-            {errors.email && (
-              <p className="text-sm text-red-500">{errors.email}</p>
-            )}
-          </div>
-
-          {/* Password field */}
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-[var(--login-text)]">
-              {texts.passwordLabel || 'Password'}
-            </label>
-            <input
-              type="password"
-              value={formData.password}
-              onChange={(e) => {
-                setFormData({ ...formData, password: e.target.value })
-                setErrors({ ...errors, password: undefined })
-              }}
-              className={cn(
-                "w-full px-3 py-2 border rounded-[var(--login-border-radius)] focus:outline-none focus:ring-2 focus:ring-[var(--login-primary)]",
-                errors.password && "border-red-500"
-              )}
-              placeholder="••••••••"
-              disabled={disabled || isSubmitting}
-            />
-            {errors.password && (
-              <p className="text-sm text-red-500">{errors.password}</p>
-            )}
-          </div>
-
-          {/* Remember me & Forgot password */}
-          {(features.rememberMe || features.forgotPassword) && (
-            <div className="flex items-center justify-between">
-              {features.rememberMe && (
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    checked={formData.rememberMe}
-                    onChange={(e) => setFormData({ ...formData, rememberMe: e.target.checked })}
-                    className="mr-2"
-                    disabled={disabled || isSubmitting}
-                  />
-                  <span className="text-sm text-gray-600">
-                    {texts.rememberMeLabel || 'Remember me'}
-                  </span>
-                </label>
-              )}
-              {features.forgotPassword && (
-                <button
-                  type="button"
-                  onClick={onForgotPassword}
-                  className="text-sm text-[var(--login-primary)] hover:underline"
-                  disabled={disabled || isSubmitting}
-                >
-                  {texts.forgotPasswordLink || 'Forgot password?'}
-                </button>
-              )}
-            </div>
-          )}
-
-          {/* Submit button */}
-          <button
-            type="submit"
-            disabled={disabled || isSubmitting}
-            className={cn(
-              "w-full py-2 px-4 bg-[var(--login-primary)] text-white rounded-[var(--login-border-radius)] font-medium",
-              "hover:opacity-90 transition-opacity",
-              "disabled:opacity-50 disabled:cursor-not-allowed"
-            )}
-          >
-            {isSubmitting ? 'Loading...' : (texts.submitButton || 'Sign in')}
-          </button>
-        </form>
-
-        {/* Social login */}
-        {features.socialLogin && (
-          <>
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t"></div>
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-[var(--login-background)] text-gray-500">
-                  {texts.orContinueWith || 'Or continue with'}
-                </span>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-              {(Array.isArray(features.socialLogin) ? features.socialLogin : ['google', 'github']).map((provider) => (
-                <button
-                  key={provider}
-                  type="button"
-                  onClick={() => handleSocialLogin(provider)}
-                  disabled={disabled || isSubmitting}
-                  className={cn(
-                    "flex items-center justify-center py-2 px-4 border rounded-[var(--login-border-radius)]",
-                    "hover:bg-gray-50 transition-colors",
-                    "disabled:opacity-50 disabled:cursor-not-allowed"
-                  )}
-                >
-                  {provider.charAt(0).toUpperCase() + provider.slice(1)}
-                </button>
-              ))}
-            </div>
-          </>
-        )}
-
-        {/* Footer */}
-        {footer}
-      </div>
-    </div>
-  )
-}
-
-// Export types
-export type { LoginFormProps, LoginData, LoginFormTheme, LoginFormFeatures, LoginFormTexts } from './types'

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

@@ -1,67 +0,0 @@
-export interface LoginFormTheme {
-  primary?: string
-  secondary?: string
-  background?: string
-  text?: string
-  borderRadius?: string
-  spacing?: 'compact' | 'normal' | 'relaxed'
-}
-
-export interface LoginFormFeatures {
-  socialLogin?: boolean | string[]
-  rememberMe?: boolean
-  forgotPassword?: boolean
-  twoFactor?: boolean
-  passwordStrength?: boolean
-}
-
-export interface LoginFormTexts {
-  title?: string
-  subtitle?: string
-  emailLabel?: string
-  passwordLabel?: string
-  submitButton?: string
-  forgotPasswordLink?: string
-  signUpLink?: string
-  rememberMeLabel?: string
-  orContinueWith?: string
-}
-
-export interface LoginData {
-  email: string
-  password: string
-  rememberMe?: boolean
-}
-
-export interface ValidationRules {
-  email?: (value: string) => string | null
-  password?: (value: string) => string | null
-}
-
-export interface LoginFormProps {
-  // Stil özelleştirme
-  theme?: LoginFormTheme
-  className?: string
-  
-  // Yapı özelleştirme
-  layout?: 'single' | 'two-column' | 'centered'
-  logo?: React.ReactNode
-  header?: React.ReactNode
-  footer?: React.ReactNode
-  
-  // Özellik kontrolü
-  features?: LoginFormFeatures
-  
-  // Davranış özelleştirme
-  onSubmit?: (data: LoginData) => Promise<void> | void
-  onSocialLogin?: (provider: string) => Promise<void> | void
-  onForgotPassword?: () => void
-  validation?: ValidationRules
-  
-  // İçerik özelleştirme
-  texts?: LoginFormTexts
-  
-  // Diğer
-  autoFocus?: boolean
-  disabled?: boolean
-}

package/src/setupTests.ts

@@ -1,41 +0,0 @@
-import '@testing-library/jest-dom'
-
-// Mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}))
-
-// Mock IntersectionObserver
-global.IntersectionObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}))
-
-// Mock matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-})
-
-// Mock console methods to reduce noise in tests
-global.console = {
-  ...console,
-  warn: jest.fn(),
-  error: jest.fn(),
-}
-
-// Mock URL.createObjectURL
-URL.createObjectURL = jest.fn(() => 'mocked-url')
-URL.revokeObjectURL = jest.fn()

package/src/styles/advanced-chart.css

@@ -1,239 +0,0 @@
-/* Advanced Chart Styles */
-
-/* Chart animation classes */
-.chart-animate-in {
-  animation: chartFadeIn 0.5s ease-out;
-}
-
-.chart-point-pulse {
-  animation: pointPulse 2s ease-in-out infinite;
-}
-
-.chart-gradient-shift {
-  animation: gradientShift 3s ease-in-out infinite;
-}
-
-/* Custom chart tooltips */
-.recharts-tooltip-wrapper {
-  outline: none !important;
-}
-
-.recharts-tooltip-cursor {
-  fill: hsl(var(--muted) / 0.1);
-}
-
-/* Legend hover effects */
-.recharts-legend-item {
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.recharts-legend-item:hover {
-  transform: translateY(-1px);
-}
-
-/* Smooth chart transitions */
-.recharts-line-curve,
-.recharts-area-curve {
-  transition: all 0.3s ease;
-}
-
-.recharts-bar-rectangle {
-  transition: all 0.2s ease;
-}
-
-.recharts-bar-rectangle:hover {
-  filter: brightness(1.1);
-}
-
-/* Pie chart enhancements */
-.recharts-pie-sector {
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.recharts-pie-sector:hover {
-  filter: brightness(1.1);
-  transform: scale(1.02);
-}
-
-/* Brush styling */
-.recharts-brush {
-  fill: hsl(var(--primary) / 0.1);
-  stroke: hsl(var(--primary) / 0.3);
-}
-
-.recharts-brush-slide {
-  fill: hsl(var(--primary) / 0.2);
-  fill-opacity: 0.5;
-}
-
-/* Grid styling */
-.recharts-cartesian-grid-horizontal line,
-.recharts-cartesian-grid-vertical line {
-  stroke-dasharray: 3 3;
-  opacity: 0.3;
-}
-
-/* Axis styling */
-.recharts-xAxis .recharts-cartesian-axis-tick-value,
-.recharts-yAxis .recharts-cartesian-axis-tick-value {
-  fill: hsl(var(--muted-foreground));
-  font-size: 11px;
-}
-
-/* Dark mode enhancements */
-.dark .recharts-tooltip-wrapper {
-  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
-}
-
-.dark .recharts-cartesian-grid-horizontal line,
-.dark .recharts-cartesian-grid-vertical line {
-  opacity: 0.2;
-}
-
-/* Sparkline mode */
-.sparkline-chart .recharts-surface {
-  overflow: visible !important;
-}
-
-/* Loading skeleton animation */
-@keyframes chartSkeletonPulse {
-  0%, 100% {
-    opacity: 0.5;
-    transform: scaleY(0.8);
-  }
-  50% {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-}
-
-/* Chart animations */
-@keyframes chartFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes pointPulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.2);
-    opacity: 0.8;
-  }
-}
-
-@keyframes gradientShift {
-  0%, 100% {
-    stop-opacity: 0.8;
-  }
-  50% {
-    stop-opacity: 0.4;
-  }
-}
-
-/* Interactive legend styles */
-.chart-legend-item {
-  position: relative;
-  overflow: hidden;
-}
-
-.chart-legend-item::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);
-  transition: left 0.5s ease;
-}
-
-.chart-legend-item:hover::before {
-  left: 100%;
-}
-
-/* Crosshair cursor */
-.chart-crosshair {
-  stroke: hsl(var(--muted-foreground));
-  stroke-width: 1;
-  stroke-dasharray: 5 5;
-  opacity: 0.5;
-}
-
-/* Mini map styles */
-.chart-minimap {
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius-md);
-  background: hsl(var(--background) / 0.8);
-  backdrop-filter: blur(8px);
-}
-
-/* Export menu animation */
-.chart-export-menu {
-  animation: slideDown 0.2s ease-out;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Zoom indicator */
-.chart-zoom-indicator {
-  background: hsl(var(--background) / 0.9);
-  backdrop-filter: blur(8px);
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius-full);
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-/* Performance optimizations */
-.recharts-surface {
-  will-change: transform;
-}
-
-.recharts-line,
-.recharts-area,
-.recharts-bar {
-  will-change: opacity, transform;
-}
-
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  .recharts-wrapper {
-    font-size: 0.875rem;
-  }
-  
-  .recharts-legend-wrapper {
-    margin-top: 1rem !important;
-  }
-}
-
-/* Print styles */
-@media print {
-  .chart-controls {
-    display: none !important;
-  }
-  
-  .recharts-tooltip-wrapper {
-    display: none !important;
-  }
-}

package/src/styles/calendar.css

@@ -1,35 +0,0 @@
-/* Calendar Component Styles - Custom Implementation */
-.moonui-calendar {
-  width: 100%;
-}
-
-/* Mobile adjustments */
-@media (max-width: 640px) {
-  .moonui-calendar {
-    font-size: 0.875rem;
-  }
-  
-  .moonui-calendar button {
-    font-size: 0.8125rem;
-  }
-}
-
-/* Popover responsive */
-@media (max-width: 640px) {
-  .time-range-popover {
-    max-width: calc(100vw - 2rem) !important;
-    margin: 0 auto;
-  }
-  
-  /* Make calendar months stack vertically on mobile */
-  .moonui-calendar .grid-cols-7 {
-    font-size: 0.75rem;
-  }
-}
-
-/* Ensure proper layout on desktop */
-@media (min-width: 641px) {
-  .time-range-popover {
-    min-width: 640px;
-  }
-}