@jmruthers/pace-core 0.5.140 → 0.5.142

package/src/components/Textarea/Textarea.test.tsx

@@ -0,0 +1,269 @@
+/**
+ * @file Textarea Component Tests
+ * @description Comprehensive tests for Textarea component
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Textarea } from './Textarea';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+describe('Textarea Component', () => {
+  // Basic rendering tests
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<Textarea />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toBeInTheDocument();
+      expect(textarea.tagName).toBe('TEXTAREA');
+    });
+
+    it('renders with custom placeholder', () => {
+      renderWithProviders(<Textarea placeholder="Enter your message..." />);
+      expect(screen.getByPlaceholderText('Enter your message...')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<Textarea className="custom-class" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass('custom-class');
+    });
+
+    it('renders with value', () => {
+      renderWithProviders(<Textarea value="test value" />);
+      expect(screen.getByDisplayValue('test value')).toBeInTheDocument();
+    });
+
+    it('renders with defaultValue', () => {
+      renderWithProviders(<Textarea defaultValue="default value" />);
+      expect(screen.getByDisplayValue('default value')).toBeInTheDocument();
+    });
+
+    it('renders with rows attribute', () => {
+      renderWithProviders(<Textarea rows={5} />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('rows', '5');
+    });
+  });
+
+  // Variant tests
+  describe('Variants', () => {
+    it('renders with default variant', () => {
+      renderWithProviders(<Textarea variant="default" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass('border-input');
+    });
+
+    it('renders with destructive variant', () => {
+      renderWithProviders(<Textarea variant="destructive" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass('border-destructive', 'focus-visible:ring-destructive');
+    });
+
+    it('applies destructive styling when error is true', () => {
+      renderWithProviders(<Textarea error={true} />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass('border-destructive', 'focus-visible:ring-destructive');
+    });
+  });
+
+  // Size tests
+  describe('Sizes', () => {
+    it('renders with small size', () => {
+      renderWithProviders(<Textarea size="sm" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass('min-h-[60px]', 'px-2', 'py-1', 'text-xs');
+    });
+
+    it('renders with medium size (default)', () => {
+      renderWithProviders(<Textarea size="md" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass('min-h-[80px]', 'px-3', 'py-2', 'text-sm');
+    });
+
+    it('renders with large size', () => {
+      renderWithProviders(<Textarea size="lg" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass('min-h-[100px]', 'px-4', 'py-3', 'text-base');
+    });
+  });
+
+  // Event handling tests
+  describe('Event Handling', () => {
+    it('handles onChange events', async () => {
+      const handleChange = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Textarea onChange={handleChange} />);
+      
+      const textarea = screen.getByRole('textbox');
+      await user.type(textarea, 'test input');
+      
+      expect(handleChange).toHaveBeenCalled();
+    });
+
+    it('handles onFocus events', async () => {
+      const handleFocus = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Textarea onFocus={handleFocus} />);
+      
+      const textarea = screen.getByRole('textbox');
+      await user.click(textarea);
+      
+      expect(handleFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles onBlur events', async () => {
+      const handleBlur = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Textarea onBlur={handleBlur} />);
+      
+      const textarea = screen.getByRole('textbox');
+      await user.click(textarea);
+      await user.tab();
+      
+      expect(handleBlur).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles onKeyDown events', async () => {
+      const handleKeyDown = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Textarea onKeyDown={handleKeyDown} />);
+      
+      const textarea = screen.getByRole('textbox');
+      await user.type(textarea, 'a');
+      
+      expect(handleKeyDown).toHaveBeenCalled();
+    });
+  });
+
+  // State management tests
+  describe('State Management', () => {
+    it('handles controlled state', () => {
+      const { rerender } = renderWithProviders(
+        <Textarea value="initial" />
+      );
+      
+      expect(screen.getByDisplayValue('initial')).toBeInTheDocument();
+      
+      rerender(<Textarea value="updated" />);
+      expect(screen.getByDisplayValue('updated')).toBeInTheDocument();
+    });
+
+    it('handles uncontrolled state', () => {
+      renderWithProviders(<Textarea defaultValue="default" />);
+      expect(screen.getByDisplayValue('default')).toBeInTheDocument();
+    });
+
+    it('handles disabled state', () => {
+      renderWithProviders(<Textarea disabled />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toBeDisabled();
+      expect(textarea).toHaveClass('disabled:cursor-not-allowed', 'disabled:opacity-50');
+    });
+  });
+
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(<Textarea aria-label="Test textarea" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('aria-label', 'Test textarea');
+    });
+
+    it('supports aria-describedby', () => {
+      renderWithProviders(
+        <div>
+          <Textarea aria-describedby="help-text" />
+          <div id="help-text">This is help text</div>
+        </div>
+      );
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('aria-describedby', 'help-text');
+    });
+
+    it('supports aria-invalid for error states', () => {
+      renderWithProviders(<Textarea aria-invalid="true" />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    it('is keyboard accessible', () => {
+      renderWithProviders(<Textarea />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).not.toHaveAttribute('tabindex', '-1');
+    });
+
+    it('supports screen readers with proper focus management', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<Textarea />);
+      
+      const textarea = screen.getByRole('textbox');
+      await user.click(textarea);
+      
+      expect(textarea).toHaveFocus();
+    });
+  });
+
+  // Error handling tests
+  describe('Error Handling', () => {
+    it('handles error state styling', () => {
+      renderWithProviders(<Textarea error={true} />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveClass('border-destructive', 'focus-visible:ring-destructive');
+    });
+  });
+
+  // Integration tests
+  describe('Integration', () => {
+    it('works with forms', async () => {
+      const handleSubmit = vi.fn((e) => e.preventDefault());
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <form onSubmit={handleSubmit}>
+          <Textarea name="test-textarea" />
+          <button type="submit">Submit</button>
+        </form>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Submit' }));
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    it('works with labels', () => {
+      renderWithProviders(
+        <div>
+          <label htmlFor="test-textarea">Test Label</label>
+          <Textarea id="test-textarea" />
+        </div>
+      );
+      
+      const textarea = screen.getByLabelText('Test Label');
+      expect(textarea).toBeInTheDocument();
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLTextAreaElement>();
+      renderWithProviders(<Textarea ref={ref} />);
+      
+      expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
+    });
+
+    it('handles multi-line input', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<Textarea />);
+      
+      const textarea = screen.getByRole('textbox');
+      await user.type(textarea, 'Line 1{Enter}Line 2');
+      
+      expect(textarea).toHaveValue('Line 1\nLine 2');
+    });
+  });
+});
+

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,133 @@
+/**
+ * @file Textarea Component
+ * @package @jmruthers/pace-core
+ * @module Textarea
+ * @since 0.5.141
+ *
+ * A multi-line text input component with consistent styling matching the Input component.
+ * Provides flexible, accessible textarea component with consistent styling and behavior.
+ *
+ * Features:
+ * - Multiple textarea variants (default, destructive)
+ * - Multiple textarea sizes (sm, md, lg)
+ * - Error state styling
+ * - Forwarded ref support
+ * - Consistent styling with Input component
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <Textarea placeholder="Enter your message..." />
+ * 
+ * // Textarea with variants and sizes
+ * <Textarea 
+ *   variant="destructive" 
+ *   size="lg" 
+ *   placeholder="Error textarea" 
+ * />
+ * 
+ * // Textarea with error state
+ * <Textarea 
+ *   placeholder="Comments" 
+ *   error={true}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Proper ARIA attributes and roles
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ * - Focus management
+ */
+
+import * as React from 'react';
+import { cn } from '../../utils/core/cn';
+
+// ============================================================================
+// TEXTAREA COMPONENT
+// ============================================================================
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /**
+   * Textarea variant style
+   */
+  variant?: 'default' | 'destructive';
+  
+  /**
+   * Textarea size
+   */
+  size?: 'sm' | 'md' | 'lg';
+  
+  /**
+   * Error state for styling
+   */
+  error?: boolean;
+}
+
+/**
+ * Textarea component
+ * A flexible, accessible textarea component with multiple variants and sizes.
+ * Matches the Input component API and styling for consistency.
+ * 
+ * @param props - Textarea configuration and styling
+ * @param ref - Forwarded ref to the textarea element
+ * @returns JSX.Element - The rendered textarea element
+ * 
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <Textarea placeholder="Enter your message..." />
+ * 
+ * // Textarea with error state
+ * <Textarea 
+ *   placeholder="Comments" 
+ *   error={true}
+ * />
+ * 
+ * // Large textarea with destructive variant
+ * <Textarea 
+ *   variant="destructive" 
+ *   size="lg" 
+ *   placeholder="Error textarea" 
+ * />
+ * ```
+ */
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, variant = 'default', size = 'md', error, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          // Base styles (matching Input component)
+          'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          
+          // Variant styles
+          {
+            'border-input': variant === 'default' && !error,
+            'border-destructive focus-visible:ring-destructive': variant === 'destructive' || error,
+          },
+          
+          // Size styles
+          {
+            'min-h-[60px] px-2 py-1 text-xs': size === 'sm',
+            'min-h-[80px] px-3 py-2 text-sm': size === 'md',
+            'min-h-[100px] px-4 py-3 text-base': size === 'lg',
+          },
+          
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export { Textarea };
+

package/src/components/Textarea/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @file Textarea component exports
+ * @package @jmruthers/pace-core
+ * @module Textarea
+ * @since 0.5.141
+ */
+
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+

package/src/components/index.ts

@@ -46,6 +46,9 @@ export type { InputProps } from './Input';
 export { Label } from './Label';
 export type { LabelProps } from './Label';
 
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+
 export { Alert, AlertTitle, AlertDescription } from './Alert';
 export { Avatar, AvatarImage, AvatarFallback } from './Avatar';
 
@@ -114,6 +117,14 @@ export {
   SelectSeparator,
 } from './Select';
 
+// Tabs exports
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './Tabs';
+
+// Calendar exports
+export { Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';
+
 // Toast exports
 export {
   Toast,

package/src/index.ts

@@ -76,6 +76,9 @@ export type { InputProps } from './components/Input/Input';
 export { Label } from './components/Label/Label';
 export type { LabelProps } from './components/Label/Label';
 
+export { Textarea } from './components/Textarea/Textarea';
+export type { TextareaProps } from './components/Textarea/Textarea';
+
 export { Alert, AlertTitle, AlertDescription } from './components/Alert/Alert';
 export { Avatar, AvatarImage, AvatarFallback } from './components/Avatar/Avatar';
 
@@ -117,6 +120,14 @@ export {
   SelectSeparator,
 } from './components/Select';
 
+// Tabs exports
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/Tabs/Tabs';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './components/Tabs/Tabs';
+
+// Calendar exports
+export { Calendar } from './components/Calendar/Calendar';
+export type { CalendarProps } from './components/Calendar/Calendar';
+
 // Modal functionality is provided by Dialog components
 
 export {

package/src/rbac/hooks/index.ts

@@ -10,6 +10,8 @@
 export { useRBAC } from './useRBAC';
 export { useResolvedScope } from './useResolvedScope';
 export type { UseResolvedScopeOptions, UseResolvedScopeReturn } from './useResolvedScope';
+export { useResourcePermissions } from './useResourcePermissions';
+export type { UseResourcePermissionsOptions, ResourcePermissions } from './useResourcePermissions';
 
 // Export all permission hooks
 export {