@moontra/moonui 2.0.8 → 2.0.9

package/src/components/ui/calendar.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
+import { 
+  format, 
+  startOfMonth, 
+  endOfMonth, 
+  eachDayOfInterval, 
+  getDay, 
+  isSameMonth, 
+  isSameDay,
+  isToday,
+  addMonths,
+  subMonths,
+  startOfWeek,
+  endOfWeek
+} from "date-fns";
+
+export interface CalendarProps {
+  mode?: "single" | "range" | "multiple";
+  selected?: Date | Date[] | { from?: Date; to?: Date } | undefined;
+  onSelect?: (date: Date | Date[] | { from?: Date; to?: Date } | undefined) => void;
+  disabled?: (date: Date) => boolean;
+  showOutsideDays?: boolean;
+  className?: string;
+  classNames?: Record<string, string>;
+  numberOfMonths?: number;
+  defaultMonth?: Date;
+  initialFocus?: boolean;
+}
+
+function Calendar({
+  mode = "single",
+  selected,
+  onSelect,
+  disabled,
+  showOutsideDays = false,
+  className,
+  classNames,
+  numberOfMonths = 1,
+  defaultMonth,
+  ...props
+}: CalendarProps) {
+  const [currentMonth, setCurrentMonth] = React.useState(
+    defaultMonth || (selected && (selected as Date)) || new Date()
+  );
+
+  const weekDays = [
+    { short: "S", full: "Sunday" },
+    { short: "M", full: "Monday" },
+    { short: "T", full: "Tuesday" },
+    { short: "W", full: "Wednesday" },
+    { short: "T", full: "Thursday" },
+    { short: "F", full: "Friday" },
+    { short: "S", full: "Saturday" }
+  ];
+
+  const handlePreviousMonth = () => {
+    setCurrentMonth(subMonths(currentMonth, 1));
+  };
+
+  const handleNextMonth = () => {
+    setCurrentMonth(addMonths(currentMonth, 1));
+  };
+
+  const handleDateClick = (date: Date) => {
+    if (disabled?.(date)) return;
+
+    if (mode === "single") {
+      onSelect?.(date);
+    } else if (mode === "range") {
+      const currentSelection = selected as { from?: Date; to?: Date } | undefined;
+      if (!currentSelection?.from || (currentSelection.from && currentSelection.to)) {
+        onSelect?.({ from: date, to: undefined });
+      } else {
+        if (date < currentSelection.from) {
+          onSelect?.({ from: date, to: currentSelection.from });
+        } else {
+          onSelect?.({ from: currentSelection.from, to: date });
+        }
+      }
+    }
+  };
+
+  const isDateSelected = (date: Date) => {
+    if (!selected) return false;
+    
+    if (mode === "single") {
+      return isSameDay(date, selected as Date);
+    } else if (mode === "range") {
+      const range = selected as { from?: Date; to?: Date };
+      if (range.from && range.to) {
+        return date >= range.from && date <= range.to;
+      }
+      return range.from ? isSameDay(date, range.from) : false;
+    }
+    return false;
+  };
+
+  const isRangeStart = (date: Date) => {
+    if (mode !== "range" || !selected) return false;
+    const range = selected as { from?: Date; to?: Date };
+    return range.from ? isSameDay(date, range.from) : false;
+  };
+
+  const isRangeEnd = (date: Date) => {
+    if (mode !== "range" || !selected) return false;
+    const range = selected as { from?: Date; to?: Date };
+    return range.to ? isSameDay(date, range.to) : false;
+  };
+
+  const isRangeMiddle = (date: Date) => {
+    if (mode !== "range" || !selected) return false;
+    const range = selected as { from?: Date; to?: Date };
+    if (!range.from || !range.to) return false;
+    return date > range.from && date < range.to;
+  };
+
+  const getDaysInMonth = () => {
+    const start = startOfMonth(currentMonth);
+    const end = endOfMonth(currentMonth);
+    const days = eachDayOfInterval({ start, end });
+    
+    // Get days from previous month to fill the first week
+    const firstDayOfWeek = getDay(start);
+    const previousMonthDays = [];
+    if (firstDayOfWeek > 0 && showOutsideDays) {
+      const previousMonthStart = startOfWeek(start);
+      const previousMonthEnd = new Date(start);
+      previousMonthEnd.setDate(previousMonthEnd.getDate() - 1);
+      previousMonthDays.push(...eachDayOfInterval({ 
+        start: previousMonthStart, 
+        end: previousMonthEnd 
+      }));
+    }
+    
+    // Get days from next month to fill the last week
+    const lastDayOfWeek = getDay(end);
+    const nextMonthDays = [];
+    if (lastDayOfWeek < 6 && showOutsideDays) {
+      const nextMonthStart = new Date(end);
+      nextMonthStart.setDate(nextMonthStart.getDate() + 1);
+      const nextMonthEnd = endOfWeek(end);
+      nextMonthDays.push(...eachDayOfInterval({ 
+        start: nextMonthStart, 
+        end: nextMonthEnd 
+      }));
+    }
+    
+    // Add empty cells for the first week if not showing outside days
+    const emptyCells = [];
+    if (!showOutsideDays && firstDayOfWeek > 0) {
+      for (let i = 0; i < firstDayOfWeek; i++) {
+        emptyCells.push(null);
+      }
+    }
+    
+    return [...previousMonthDays, ...emptyCells, ...days, ...nextMonthDays];
+  };
+
+  const days = getDaysInMonth();
+
+  return (
+    <div className={cn("p-0", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-4">
+        <button
+          onClick={handlePreviousMonth}
+          className={cn(
+            "h-10 w-10 bg-transparent p-0 rounded-lg",
+            "hover:bg-muted transition-colors",
+            "inline-flex items-center justify-center"
+          )}
+          type="button"
+        >
+          <ChevronLeft className="h-5 w-5" />
+        </button>
+        
+        <h2 className="text-base font-medium">
+          {format(currentMonth, "MMMM yyyy")}
+        </h2>
+        
+        <button
+          onClick={handleNextMonth}
+          className={cn(
+            "h-10 w-10 bg-transparent p-0 rounded-lg",
+            "hover:bg-muted transition-colors",
+            "inline-flex items-center justify-center"
+          )}
+          type="button"
+        >
+          <ChevronRight className="h-5 w-5" />
+        </button>
+      </div>
+
+      {/* Calendar Grid */}
+      <div className="px-6 pb-4">
+        {/* Week days header */}
+        <div className="grid grid-cols-7 mb-2">
+          {weekDays.map((day, index) => (
+            <div
+              key={`weekday-${index}`}
+              className="text-muted-foreground text-xs font-medium h-10 flex items-center justify-center"
+              title={day.full}
+            >
+              {day.short}
+            </div>
+          ))}
+        </div>
+
+        {/* Days grid */}
+        <div className="grid grid-cols-7 gap-1">
+          {days.map((date, index) => {
+            if (!date) {
+              return <div key={`empty-${index}`} className="h-10 w-10" />;
+            }
+
+            const isOutsideMonth = !isSameMonth(date, currentMonth);
+            const isDisabled = disabled?.(date) || false;
+            const isSelected = isDateSelected(date);
+            const isTodayDate = isToday(date);
+            const rangeStart = isRangeStart(date);
+            const rangeEnd = isRangeEnd(date);
+            const rangeMiddle = isRangeMiddle(date);
+
+            return (
+              <button
+                key={date.toISOString()}
+                onClick={() => handleDateClick(date)}
+                disabled={isDisabled}
+                className={cn(
+                  "h-10 w-10 p-0 font-normal",
+                  "inline-flex items-center justify-center rounded-lg",
+                  "hover:bg-muted transition-colors text-sm",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  isOutsideMonth && "text-muted-foreground/50",
+                  isDisabled && "text-muted-foreground/30 cursor-not-allowed hover:bg-transparent",
+                  isSelected && !rangeMiddle && "bg-primary text-primary-foreground font-medium hover:bg-primary hover:text-primary-foreground",
+                  isTodayDate && "font-semibold relative after:absolute after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:h-1 after:w-1 after:rounded-full after:bg-primary",
+                  rangeMiddle && "bg-accent/30 text-accent-foreground rounded-none",
+                  rangeStart && "rounded-r-none",
+                  rangeEnd && "rounded-l-none"
+                )}
+                type="button"
+              >
+                {format(date, "d")}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+    </div>
+  );
+}
+
+Calendar.displayName = "Calendar";
+
+export { Calendar };

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

@@ -0,0 +1,208 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
+import { Button } from './button';
+import { Badge } from './badge';
+import { Bell, Check, X } from 'lucide-react';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays a card with header, content, and footer.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card Description</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card Content</p>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const WithNotification: Story = {
+  render: () => (
+    <Card className="w-[380px]">
+      <CardHeader>
+        <div className="flex items-center space-x-2">
+          <Bell className="h-5 w-5" />
+          <CardTitle>Notifications</CardTitle>
+        </div>
+        <CardDescription>
+          You have 3 unread messages.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+            <span className="text-sm">New comment on your post</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+            <span className="text-sm">Your order has been shipped</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
+            <span className="text-sm">Payment reminder</span>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Mark all as read</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const WithBadge: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle>Feature Request</CardTitle>
+          <Badge variant="secondary">Open</Badge>
+        </div>
+        <CardDescription>
+          Add dark mode support to the dashboard
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">
+          Users have been requesting a dark mode option for better accessibility and reduced eye strain during night usage.
+        </p>
+        <div className="mt-4 flex items-center space-x-2">
+          <div className="flex -space-x-2">
+            <div className="w-8 h-8 bg-blue-500 rounded-full border-2 border-background"></div>
+            <div className="w-8 h-8 bg-green-500 rounded-full border-2 border-background"></div>
+            <div className="w-8 h-8 bg-yellow-500 rounded-full border-2 border-background"></div>
+          </div>
+          <span className="text-sm text-muted-foreground">+12 others</span>
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">
+          <X className="mr-2 h-4 w-4" />
+          Close
+        </Button>
+        <Button>
+          <Check className="mr-2 h-4 w-4" />
+          Approve
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const ProductCard: Story = {
+  render: () => (
+    <Card className="w-[300px]">
+      <CardHeader className="pb-3">
+        <div className="aspect-square bg-muted rounded-lg flex items-center justify-center">
+          <span className="text-muted-foreground text-sm">Product Image</span>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <CardTitle className="text-lg">Wireless Headphones</CardTitle>
+        <CardDescription className="mt-2">
+          High-quality wireless headphones with noise cancellation
+        </CardDescription>
+        <div className="mt-4 flex items-center justify-between">
+          <span className="text-2xl font-bold">$299</span>
+          <Badge>In Stock</Badge>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Add to Cart</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const SimpleCard: Story = {
+  render: () => (
+    <Card className="w-[300px]">
+      <CardContent className="pt-6">
+        <div className="text-center space-y-2">
+          <h3 className="text-lg font-semibold">Total Revenue</h3>
+          <p className="text-3xl font-bold">$15,231.89</p>
+          <p className="text-sm text-muted-foreground">
+            +20.1% from last month
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  ),
+};
+
+export const InteractiveCard: Story = {
+  render: () => (
+    <Card className="w-[350px] cursor-pointer transition-all hover:shadow-lg">
+      <CardHeader>
+        <CardTitle>Interactive Card</CardTitle>
+        <CardDescription>
+          This card responds to hover and click events
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">
+          Hover over this card to see the elevation effect, or click to interact with it.
+        </p>
+      </CardContent>
+    </Card>
+  ),
+};
+
+export const CardGrid: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {Array.from({ length: 6 }).map((_, index) => (
+        <Card key={index} className="w-[250px]">
+          <CardHeader>
+            <CardTitle>Card {index + 1}</CardTitle>
+            <CardDescription>
+              This is card number {index + 1}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Some content for card {index + 1}
+            </p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple cards arranged in a responsive grid layout.',
+      },
+    },
+  },
+};

package/src/components/ui/card.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { motion, type HTMLMotionProps } from "framer-motion";
+import { cn } from "../../lib/utils";
+import { microInteractionVariants, hoverAnimations, tapAnimations } from "@/lib/micro-interactions";
+
+const cardVariants = cva(
+  "rounded-lg border bg-card text-card-foreground shadow-sm dark:shadow-gray-900/20 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border border-border shadow-none bg-transparent dark:border-gray-700 dark:bg-transparent dark:text-gray-200",
+        filled: "border-none bg-secondary dark:bg-gray-800 dark:text-gray-100 dark:shadow-inner dark:shadow-gray-950/10",
+        elevated: "border-none shadow-md dark:shadow-lg dark:shadow-gray-900/30 dark:bg-gray-850 dark:text-gray-100",
+        gradient: "border-none bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/20",
+        glass: "border border-white/20 bg-white/10 backdrop-blur-md dark:border-gray-700/30 dark:bg-gray-800/10",
+      },
+      size: {
+        default: "p-6",
+        sm: "p-4",
+        lg: "p-8",
+        xl: "p-10",
+      },
+      radius: {
+        default: "rounded-lg",
+        sm: "rounded-md",
+        lg: "rounded-xl",
+        full: "rounded-3xl",
+        none: "rounded-none",
+      },
+      interactive: {
+        true: "cursor-pointer hover:shadow-lg hover:border-primary/20 dark:hover:border-primary/30 hover:-translate-y-0.5 active:translate-y-0 active:shadow-sm",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+    },
+  }
+);
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {
+  asChild?: boolean;
+  microInteraction?: "lift" | "glow" | "scale" | "none";
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, size, radius, interactive, microInteraction = "lift", ...props }, ref) => {
+    // Interactive özelliği varsa motion.div, yoksa normal div kullan
+    if (interactive && microInteraction !== "none") {
+      const interactionProps = {
+        whileHover: microInteraction === "scale" ? hoverAnimations.scale : 
+                    microInteraction === "glow" ? hoverAnimations.glow : 
+                    hoverAnimations.lift,
+        whileTap: tapAnimations.scale,
+      };
+      
+      return (
+        <motion.div
+          ref={ref}
+          className={cn(cardVariants({ variant, size, radius, interactive, className }))}
+          {...interactionProps}
+          {...props}
+        />
+      );
+    }
+    
+    // Non-interactive version
+    return (
+      <div
+        ref={ref}
+        className={cn(cardVariants({ variant, size, radius, interactive, className }))}
+        {...props}
+      />
+    );
+  }
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center pt-4", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };