@moontra/moonui 2.0.7 → 2.0.9

package/src/components/ui/input.stories.tsx

@@ -0,0 +1,255 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from './input';
+import { Label } from './label';
+import { Button } from './button';
+import { Search, Mail, Lock, Eye, EyeOff } from 'lucide-react';
+import { useState } from 'react';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays a form input field or a component that looks like an input field.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
+      description: 'The type of input',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email">Email</Label>
+      <Input type="email" id="email" placeholder="Email" />
+    </div>
+  ),
+};
+
+export const Email: Story = {
+  args: {
+    type: 'email',
+    placeholder: 'Enter your email',
+  },
+};
+
+export const Password: Story = {
+  args: {
+    type: 'password',
+    placeholder: 'Enter your password',
+  },
+};
+
+export const Search: Story = {
+  args: {
+    type: 'search',
+    placeholder: 'Search...',
+  },
+};
+
+export const Number: Story = {
+  args: {
+    type: 'number',
+    placeholder: 'Enter a number',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Disabled input',
+  },
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <div className="relative">
+      <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+      <Input
+        type="search"
+        placeholder="Search..."
+        className="pl-10"
+      />
+    </div>
+  ),
+};
+
+export const WithButton: Story = {
+  render: () => (
+    <div className="flex w-full max-w-sm items-center space-x-2">
+      <Input type="email" placeholder="Email" />
+      <Button type="submit">Subscribe</Button>
+    </div>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <div className="w-full max-w-sm space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="name">Name</Label>
+        <Input id="name" placeholder="Your name" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="email-form">Email</Label>
+        <div className="relative">
+          <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+          <Input
+            id="email-form"
+            type="email"
+            placeholder="your@email.com"
+            className="pl-10"
+          />
+        </div>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="password-form">Password</Label>
+        <div className="relative">
+          <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+          <Input
+            id="password-form"
+            type="password"
+            placeholder="••••••••"
+            className="pl-10"
+          />
+        </div>
+      </div>
+      <Button className="w-full">Sign Up</Button>
+    </div>
+  ),
+};
+
+export const PasswordWithToggle: Story = {
+  render: () => {
+    const [showPassword, setShowPassword] = useState(false);
+    
+    return (
+      <div className="relative">
+        <Input
+          type={showPassword ? 'text' : 'password'}
+          placeholder="Enter your password"
+          className="pr-10"
+        />
+        <button
+          type="button"
+          className="absolute right-3 top-3 h-4 w-4 text-muted-foreground hover:text-foreground"
+          onClick={() => setShowPassword(!showPassword)}
+        >
+          {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+        </button>
+      </div>
+    );
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="w-full max-w-sm space-y-4">
+      <div className="space-y-2">
+        <Label>Small</Label>
+        <Input placeholder="Small input" className="h-8 text-sm" />
+      </div>
+      <div className="space-y-2">
+        <Label>Default</Label>
+        <Input placeholder="Default input" />
+      </div>
+      <div className="space-y-2">
+        <Label>Large</Label>
+        <Input placeholder="Large input" className="h-12 text-lg" />
+      </div>
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="w-full max-w-sm space-y-4">
+      <div className="space-y-2">
+        <Label>Default</Label>
+        <Input placeholder="Default state" />
+      </div>
+      <div className="space-y-2">
+        <Label>Focused</Label>
+        <Input placeholder="Focused state" autoFocus />
+      </div>
+      <div className="space-y-2">
+        <Label>Disabled</Label>
+        <Input placeholder="Disabled state" disabled />
+      </div>
+      <div className="space-y-2">
+        <Label>Error</Label>
+        <Input
+          placeholder="Error state"
+          className="border-red-500 focus:border-red-500 focus:ring-red-500"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const WithValidation: Story = {
+  render: () => {
+    const [email, setEmail] = useState('');
+    const [error, setError] = useState('');
+    
+    const validateEmail = (value: string) => {
+      if (!value) {
+        setError('Email is required');
+      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+        setError('Please enter a valid email address');
+      } else {
+        setError('');
+      }
+    };
+    
+    return (
+      <div className="w-full max-w-sm space-y-2">
+        <Label htmlFor="email-validation">Email</Label>
+        <Input
+          id="email-validation"
+          type="email"
+          placeholder="Enter your email"
+          value={email}
+          onChange={(e) => {
+            setEmail(e.target.value);
+            validateEmail(e.target.value);
+          }}
+          className={error ? 'border-red-500' : ''}
+        />
+        {error && (
+          <p className="text-sm text-red-500">{error}</p>
+        )}
+      </div>
+    );
+  },
+};

package/src/components/ui/input.tsx

@@ -0,0 +1,219 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Loader2 } from "lucide-react";
+
+/**
+ * Premium Input Component
+ * 
+ * Erişilebilir, estetik ve işlevsel input bileşeni.
+ * İkon desteği, hata gösterimi ve çeşitli varyantlar sunar.
+ */
+
+const inputWrapperVariants = cva(
+  "group relative flex items-center w-full transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: "",
+        lg: "",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+const inputVariants = cva(
+  [
+    "w-full bg-background transition-all duration-200",
+    "text-foreground placeholder:text-muted-foreground dark:placeholder:text-gray-500", 
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "file:border-0 file:bg-transparent file:font-medium",
+    "focus-visible:outline-none dark:text-gray-200"
+  ],
+  {
+    variants: {
+      variant: {
+        standard: "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80 dark:bg-gray-900/60 dark:shadow-inner dark:shadow-gray-950/10",
+        filled: "border border-transparent bg-gray-100 dark:bg-gray-800/90 rounded-md px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-700/90 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 dark:shadow-inner dark:shadow-gray-950/10",
+        ghost: "border-none bg-transparent shadow-none px-1 dark:text-gray-300 dark:placeholder:text-gray-500 hover:bg-gray-100/50 dark:hover:bg-gray-800/30 focus-visible:bg-transparent",
+        underline: "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 py-2 hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary dark:focus-visible:border-primary/80 dark:text-gray-300",
+      },
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-10 text-sm",
+        lg: "h-12 text-base",
+      },
+      hasLeftIcon: {
+        true: "pl-10",
+        false: "",
+      },
+      hasRightIcon: {
+        true: "pr-10",
+        false: "",
+      },
+      hasRightButton: {
+        true: "pr-10",
+        false: "",
+      },
+      isError: {
+        true: "border-error focus-visible:ring-error/30 focus-visible:border-error hover:border-error/80 dark:hover:border-error/80",
+        false: "",
+      },
+      isSuccess: {
+        true: "border-success focus-visible:ring-success/30 focus-visible:border-success hover:border-success/80 dark:hover:border-success/80",
+        false: "",
+      },
+      isDisabled: {
+        true: "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800/50 pointer-events-none",
+        false: "",
+      }
+    },
+    defaultVariants: {
+      variant: "standard",
+      size: "md",
+      isError: false,
+      isSuccess: false,
+      isDisabled: false,
+      hasLeftIcon: false,
+      hasRightIcon: false,
+      hasRightButton: false,
+    },
+  }
+);
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    Omit<VariantProps<typeof inputVariants>, "isDisabled" | "hasLeftIcon" | "hasRightIcon" | "hasRightButton"> {
+  /** Hata mesajı */
+  error?: string;
+  /** Başarı mesajı */
+  success?: string;
+  /** Yükleniyor durumu */
+  loading?: boolean;
+  /** Sol tarafta gösterilecek ikon */
+  leftIcon?: React.ReactNode;
+  /** Sağ tarafta gösterilecek ikon */
+  rightIcon?: React.ReactNode;
+  /** Sağ tarafta gösterilecek buton (password show/hide vb. için) */
+  rightButton?: React.ReactNode;
+  /** Mesajın görünürlüğü (true: her zaman görünür, false: sadece hata/başarı durumunda) */
+  alwaysShowMessage?: boolean;
+  /** Input wrapper için ek sınıflar */
+  wrapperClassName?: string;
+  /** Mesaj için ek sınıflar */
+  messageClassName?: string;
+}
+
+/**
+ * Premium Input Component
+ * 
+ * @param props - Input bileşeni özellikleri
+ * @param props.variant - Görsel varyant (standard, filled, ghost, underline)
+ * @param props.size - Boyut (sm, md, lg)
+ * @param props.error - Hata mesajı
+ * @param props.success - Başarı mesajı
+ * @param props.loading - Yükleniyor durumu
+ * @param props.leftIcon - Sol tarafta gösterilecek ikon
+ * @param props.rightIcon - Sağ tarafta gösterilecek ikon
+ * @param props.rightButton - Sağ tarafta gösterilecek buton
+ * @param props.alwaysShowMessage - Mesajın her zaman görünür olması
+ */
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ 
+    className, 
+    wrapperClassName,
+    messageClassName,
+    variant, 
+    size, 
+    isError,
+    disabled, 
+    error,
+    success,
+    loading,
+    leftIcon,
+    rightIcon,
+    rightButton,
+    alwaysShowMessage = false,
+    ...props 
+  }, ref) => {
+    // Mesajı göster/gizle
+    const showMessage = alwaysShowMessage || error || success;
+    const messageType = error ? "error" : success ? "success" : "normal";
+
+    return (
+      <div className="space-y-1.5 w-full">
+        <div className={cn(inputWrapperVariants({ size }), wrapperClassName)}>
+          {leftIcon && (
+            <div className="absolute left-3 text-gray-500 flex items-center justify-center pointer-events-none">
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : leftIcon}
+            </div>
+          )}
+          
+          <input
+            className={cn(
+              inputVariants({ 
+                variant, 
+                size, 
+                isError: !!error || isError, 
+                isSuccess: !!success,
+                isDisabled: disabled || loading,
+                hasLeftIcon: !!leftIcon || loading,
+                hasRightIcon: !!rightIcon,
+                hasRightButton: !!rightButton,
+              }),
+              className
+            )}
+            ref={ref}
+            disabled={disabled || loading}
+            data-loading={loading ? "" : undefined}
+            data-error={!!error ? "" : undefined}
+            data-success={!!success ? "" : undefined}
+            aria-invalid={!!error || !!isError || undefined}
+            aria-describedby={error ? `${props.id || ''}-error` : success ? `${props.id || ''}-success` : undefined}
+            {...props}
+          />
+          
+          {rightIcon && !loading && (
+            <div className="absolute right-3 text-gray-500 flex items-center justify-center pointer-events-none">
+              {rightIcon}
+            </div>
+          )}
+          
+          {rightButton && (
+            <div className="absolute right-3">
+              {rightButton}
+            </div>
+          )}
+          
+          {loading && !leftIcon && (
+            <div className="absolute left-3 text-gray-500 flex items-center justify-center pointer-events-none">
+              <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+            </div>
+          )}
+        </div>
+        
+        {showMessage && (
+          <p 
+            className={cn(
+              "text-xs transition-all",
+              messageType === "error" && "text-error",
+              messageType === "success" && "text-success",
+              messageType === "normal" && "text-muted-foreground",
+              messageClassName
+            )}
+            id={error ? `${props.id || ''}-error` : success ? `${props.id || ''}-success` : undefined}
+          >
+            {error || success || ""}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none text-gray-900 dark:text-gray-200 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:peer-disabled:opacity-60 transition-colors duration-200"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }