@moontra/moonui 3.1.0 → 3.2.0

package/src/components/ui/__tests__/rating.test.tsx

@@ -0,0 +1,218 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Rating, ratingVariants } from '../rating'
+
+describe('Rating Component', () => {
+  describe('Rendering', () => {
+    it('renders a radiogroup with the default aria-label', () => {
+      render(<Rating />)
+      const group = screen.getByRole('radiogroup')
+      expect(group).toBeInTheDocument()
+      expect(group).toHaveAttribute('aria-label', 'Rating')
+    })
+
+    it('renders the default number of stars (5)', () => {
+      const { container } = render(<Rating />)
+      const stars = container.querySelectorAll('[data-slot="rating-star"]')
+      expect(stars).toHaveLength(5)
+    })
+
+    it('renders a custom number of stars via max', () => {
+      const { container } = render(<Rating max={10} />)
+      const stars = container.querySelectorAll('[data-slot="rating-star"]')
+      expect(stars).toHaveLength(10)
+    })
+
+    it('renders one radio option per star in full precision', () => {
+      render(<Rating max={5} />)
+      expect(screen.getAllByRole('radio')).toHaveLength(5)
+    })
+
+    it('renders two radio options per star in half precision', () => {
+      render(<Rating max={5} precision="half" />)
+      expect(screen.getAllByRole('radio')).toHaveLength(10)
+    })
+
+    it('applies a custom className to the root', () => {
+      render(<Rating className="custom-rating" aria-label="Score" />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('custom-rating')
+    })
+
+    it('respects a user-provided aria-label', () => {
+      render(<Rating aria-label="Product rating" />)
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-label', 'Product rating')
+    })
+
+    it('forwards ref to the root div', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<Rating ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(Rating.displayName).toBe('Rating')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('applies default (md) size gap', () => {
+      render(<Rating />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('gap-1')
+    })
+
+    it('applies sm size gap', () => {
+      render(<Rating size="sm" />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('gap-0.5')
+    })
+
+    it('applies lg size gap', () => {
+      render(<Rating size="lg" />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('gap-1.5')
+    })
+
+    it('exposes ratingVariants helper', () => {
+      expect(typeof ratingVariants).toBe('function')
+      expect(ratingVariants({ size: 'lg' })).toContain('gap-1.5')
+    })
+  })
+
+  describe('Interaction', () => {
+    it('calls onValueChange with the clicked star value', () => {
+      const onValueChange = jest.fn()
+      render(<Rating onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '3 stars' }))
+      expect(onValueChange).toHaveBeenCalledWith(3)
+    })
+
+    it('uses singular label for the first star', () => {
+      const onValueChange = jest.fn()
+      render(<Rating onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '1 star' }))
+      expect(onValueChange).toHaveBeenCalledWith(1)
+    })
+
+    it('updates uncontrolled value on click (defaultValue)', () => {
+      render(<Rating defaultValue={2} />)
+      // 2 stars initially checked
+      expect(screen.getByRole('radio', { name: '2 stars' })).toHaveAttribute('aria-checked', 'true')
+      fireEvent.click(screen.getByRole('radio', { name: '4 stars' }))
+      expect(screen.getByRole('radio', { name: '4 stars' })).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByRole('radio', { name: '2 stars' })).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('supports half precision selection', () => {
+      const onValueChange = jest.fn()
+      render(<Rating precision="half" onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '2.5 stars' }))
+      expect(onValueChange).toHaveBeenCalledWith(2.5)
+    })
+  })
+
+  describe('Controlled behavior', () => {
+    it('reflects the controlled value prop', () => {
+      render(<Rating value={4} />)
+      expect(screen.getByRole('radio', { name: '4 stars' })).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByRole('radio', { name: '3 stars' })).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('does not change the controlled value internally on click but fires callback', () => {
+      const onValueChange = jest.fn()
+      render(<Rating value={2} onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '5 stars' }))
+      // callback fired
+      expect(onValueChange).toHaveBeenCalledWith(5)
+      // but the displayed selection stays controlled at 2
+      expect(screen.getByRole('radio', { name: '2 stars' })).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByRole('radio', { name: '5 stars' })).toHaveAttribute('aria-checked', 'false')
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    it('increments value with ArrowRight', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenCalledWith(4)
+    })
+
+    it('decrements value with ArrowLeft', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowLeft' })
+      expect(onValueChange).toHaveBeenCalledWith(2)
+    })
+
+    it('sets minimum with Home and maximum with End', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} onValueChange={onValueChange} />)
+      const group = screen.getByRole('radiogroup')
+      fireEvent.keyDown(group, { key: 'Home' })
+      expect(onValueChange).toHaveBeenCalledWith(1)
+      fireEvent.keyDown(group, { key: 'End' })
+      expect(onValueChange).toHaveBeenCalledWith(5)
+    })
+
+    it('clamps at max on ArrowRight', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={5} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenCalledWith(5)
+    })
+
+    it('steps by 0.5 in half precision', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} precision="half" onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenCalledWith(3.5)
+    })
+
+    it('is focusable when interactive', () => {
+      render(<Rating />)
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('tabindex', '0')
+    })
+  })
+
+  describe('ReadOnly mode', () => {
+    it('marks the group as aria-readonly and non-focusable', () => {
+      render(<Rating value={3} readOnly />)
+      const group = screen.getByRole('radiogroup')
+      expect(group).toHaveAttribute('aria-readonly', 'true')
+      expect(group).not.toHaveAttribute('tabindex')
+    })
+
+    it('renders no interactive radio options', () => {
+      render(<Rating value={3} readOnly />)
+      expect(screen.queryAllByRole('radio')).toHaveLength(0)
+    })
+
+    it('does not respond to keyboard input', () => {
+      const onValueChange = jest.fn()
+      render(<Rating value={3} readOnly onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).not.toHaveBeenCalled()
+    })
+
+    it('still renders the star visuals', () => {
+      const { container } = render(<Rating value={3} readOnly />)
+      expect(container.querySelectorAll('[data-slot="rating-star"]')).toHaveLength(5)
+    })
+  })
+
+  describe('Custom icon', () => {
+    it('renders a custom icon instead of the default Star', () => {
+      const CustomIcon = <svg data-testid="custom-icon" />
+      const { container } = render(<Rating icon={CustomIcon} max={3} />)
+      // Both empty and filled layers per star -> 2 icons per star
+      expect(container.querySelectorAll('[data-testid="custom-icon"]').length).toBeGreaterThanOrEqual(3)
+    })
+  })
+
+  describe('HTML attributes', () => {
+    it('passes through arbitrary HTML attributes', () => {
+      render(<Rating data-testid="my-rating" id="rating-1" />)
+      const group = screen.getByTestId('my-rating')
+      expect(group).toHaveAttribute('id', 'rating-1')
+    })
+  })
+})

package/src/components/ui/__tests__/spinner.test.tsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Spinner, spinnerVariants } from '../spinner'
+
+describe('Spinner Component', () => {
+  describe('Rendering', () => {
+    it('renders correctly with default props', () => {
+      render(<Spinner data-testid="spinner" />)
+      const spinner = screen.getByTestId('spinner')
+      expect(spinner).toBeInTheDocument()
+    })
+
+    it('applies custom className', () => {
+      render(<Spinner className="custom-spinner" data-testid="spinner" />)
+      expect(screen.getByTestId('spinner')).toHaveClass('custom-spinner')
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<Spinner ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(Spinner.displayName).toBe('Spinner')
+    })
+
+    it('passes through HTML attributes', () => {
+      render(<Spinner data-testid="spinner" id="loader-1" />)
+      expect(screen.getByTestId('spinner')).toHaveAttribute('id', 'loader-1')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="status"', () => {
+      render(<Spinner />)
+      expect(screen.getByRole('status')).toBeInTheDocument()
+    })
+
+    it('has aria-live="polite"', () => {
+      render(<Spinner />)
+      expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite')
+    })
+
+    it('renders default accessible label "Loading" visually hidden', () => {
+      render(<Spinner />)
+      const label = screen.getByText('Loading')
+      expect(label).toBeInTheDocument()
+      expect(label).toHaveClass('sr-only')
+    })
+
+    it('contains the sr-only label inside the status region', () => {
+      render(<Spinner />)
+      const status = screen.getByRole('status')
+      expect(status).toContainElement(screen.getByText('Loading'))
+    })
+
+    it('renders a custom label', () => {
+      render(<Spinner label="Yükleniyor" />)
+      const label = screen.getByText('Yükleniyor')
+      expect(label).toHaveClass('sr-only')
+      expect(screen.queryByText('Loading')).not.toBeInTheDocument()
+    })
+
+    it('marks the visual indicator as aria-hidden', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveAttribute('aria-hidden', 'true')
+    })
+  })
+
+  describe('Animation & reduced motion', () => {
+    it('applies animate-spin to the default ring', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('span[aria-hidden="true"]')
+      expect(ring).toHaveClass('animate-spin')
+    })
+
+    it('disables animation under prefers-reduced-motion', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('span[aria-hidden="true"]')
+      expect(ring).toHaveClass('motion-reduce:animate-none')
+    })
+  })
+
+  describe('Size variants', () => {
+    it('applies md size classes by default', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-6', 'w-6')
+    })
+
+    it('applies sm size classes', () => {
+      render(<Spinner size="sm" />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-4', 'w-4')
+    })
+
+    it('applies lg size classes', () => {
+      render(<Spinner size="lg" />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-8', 'w-8')
+    })
+
+    it('applies xl size classes', () => {
+      render(<Spinner size="xl" />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-10', 'w-10')
+    })
+
+    it('spinnerVariants generates size classes directly', () => {
+      expect(spinnerVariants({ size: 'sm' })).toContain('h-4')
+      expect(spinnerVariants({ size: 'xl' })).toContain('h-10')
+    })
+  })
+
+  describe('Dots variant', () => {
+    it('renders three dots and no ring', () => {
+      render(<Spinner variant="dots" />)
+      const status = screen.getByRole('status')
+      expect(status.querySelector('.animate-spin')).not.toBeInTheDocument()
+      const dots = status.querySelectorAll('.animate-bounce')
+      expect(dots).toHaveLength(3)
+    })
+
+    it('keeps the sr-only label in dots variant', () => {
+      render(<Spinner variant="dots" label="Please wait" />)
+      const status = screen.getByRole('status')
+      const label = screen.getByText('Please wait')
+      expect(label).toHaveClass('sr-only')
+      expect(status).toContainElement(label)
+    })
+
+    it('disables dot animation under prefers-reduced-motion', () => {
+      render(<Spinner variant="dots" />)
+      const dot = screen.getByRole('status').querySelector('.animate-bounce')
+      expect(dot).toHaveClass('motion-reduce:animate-none')
+    })
+  })
+})

package/src/components/ui/index.ts

@@ -424,6 +424,27 @@ export {
     TooltipProvider as MoonUITooltipProvider,
 } from "./tooltip";
 
+// Kbd (issue #247) — standalone klavye-tuşu rozeti
+export {
+    Kbd as MoonUIKbd,
+    kbdVariants as moonUIKbdVariants,
+} from "./kbd";
+export type { KbdProps as MoonUIKbdProps } from "./kbd";
+
+// Rating (issue #247) — standalone yıldız değerlendirme
+export {
+    Rating as MoonUIRating,
+    ratingVariants as moonUIRatingVariants,
+} from "./rating";
+export type { RatingProps as MoonUIRatingProps } from "./rating";
+
+// Spinner (issue #247) — standalone yükleme göstergesi
+export {
+    Spinner as MoonUISpinner,
+    spinnerVariants as moonUISpinnerVariants,
+} from "./spinner";
+export type { SpinnerProps as MoonUISpinnerProps } from "./spinner";
+
 // Also export without MoonUI prefix for backward compatibility
 export * from "./accordion";
 export * from "./alert";
@@ -473,3 +494,6 @@ export * from "./textarea";
 export * from "./toast";
 export * from "./toggle";
 export * from "./tooltip";
+export * from "./kbd";
+export * from "./rating";
+export * from "./spinner";

package/src/components/ui/kbd.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+/**
+ * Premium Kbd Component
+ *
+ * Klavye tuşlarını (⌘, Ctrl, K vb.) görsel olarak temsil eden standalone
+ * bir rozet bileşeni. Dark ve light modda uyumlu, token tabanlı stiller
+ * kullanır ve hafif kabartma/gölge ile fiziksel bir tuş görünümü verir.
+ */
+const kbdVariants = cva(
+  [
+    // Temel klavye-tuşu görünümü — token tabanlı, hardcoded renk yok
+    "inline-flex items-center justify-center rounded",
+    "border border-border bg-muted",
+    "px-1.5 font-mono font-medium text-muted-foreground",
+    // Alt kenarda hafif kabartma (border token'ı ile — [#...] hex sınıfı DEĞİL)
+    "shadow-[0_1px_0_1px_hsl(var(--border))]",
+    "select-none whitespace-nowrap",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-5 min-w-5 text-[10px]",
+        md: "h-6 min-w-6 text-xs",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export interface KbdProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof kbdVariants> {
+  /** Tuş içeriği (⌘, K, Ctrl vb.) */
+  children: React.ReactNode;
+}
+
+/**
+ * Premium Kbd Component
+ *
+ * @param props - Kbd bileşeni özellikleri
+ * @param props.size - Tuş boyutu ("sm" | "md")
+ * @param props.children - Tuş içeriği (⌘, K, Ctrl vb.)
+ */
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+  ({ className, size, children, ...props }, ref) => {
+    return (
+      <kbd
+        ref={ref}
+        className={cn("moonui-theme", kbdVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </kbd>
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+
+export { Kbd, kbdVariants };