@tpzdsp/next-toolkit 1.1.0 → 1.2.0

package/src/components/select/SelectSkeleton.stories.tsx

@@ -0,0 +1,195 @@
+/* eslint-disable storybook/no-renderer-packages */
+import { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SelectSkeleton } from './SelectSkeleton';
+
+const meta = {
+  title: 'Components/SelectSkeleton',
+  component: SelectSkeleton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SelectSkeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const InContainer: Story = {
+  render: () => (
+    <div className="w-80">
+      <SelectSkeleton />
+    </div>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="space-y-4 w-80">
+      <SelectSkeleton />
+
+      <SelectSkeleton />
+
+      <SelectSkeleton />
+    </div>
+  ),
+};
+
+export const InForm: Story = {
+  render: () => (
+    <form className="space-y-4 p-4 border rounded w-96">
+      <div>
+        <p className="block text-sm font-medium mb-1">Flavor</p>
+
+        <SelectSkeleton />
+      </div>
+
+      <div>
+        <p className="block text-sm font-medium mb-1">Toppings</p>
+
+        <SelectSkeleton />
+      </div>
+
+      <div>
+        <p className="block text-sm font-medium mb-1">Size</p>
+
+        <SelectSkeleton />
+      </div>
+    </form>
+  ),
+};
+
+export const WithOtherSkeletons: Story = {
+  render: () => (
+    <div className="space-y-4 p-4 border rounded w-96">
+      <div>
+        <div className="h-4 bg-gray-200 rounded w-1/4 mb-2 animate-pulse"></div>
+
+        <SelectSkeleton />
+      </div>
+
+      <div>
+        <div className="h-4 bg-gray-200 rounded w-1/3 mb-2 animate-pulse"></div>
+
+        <SelectSkeleton />
+      </div>
+
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <div className="h-4 bg-gray-200 rounded w-1/2 mb-2 animate-pulse"></div>
+
+          <SelectSkeleton />
+        </div>
+
+        <div className="flex-1">
+          <div className="h-4 bg-gray-200 rounded w-2/3 mb-2 animate-pulse"></div>
+
+          <SelectSkeleton />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const DifferentWidths: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="w-32">
+        <div className="text-sm mb-1">Small (w-32)</div>
+
+        <SelectSkeleton />
+      </div>
+
+      <div className="w-64">
+        <div className="text-sm mb-1">Medium (w-64)</div>
+
+        <SelectSkeleton />
+      </div>
+
+      <div className="w-96">
+        <div className="text-sm mb-1">Large (w-96)</div>
+
+        <SelectSkeleton />
+      </div>
+
+      <div className="w-full max-w-lg">
+        <div className="text-sm mb-1">Full width (max-w-lg)</div>
+
+        <SelectSkeleton />
+      </div>
+    </div>
+  ),
+};
+
+export const LoadingTransition: Story = {
+  render: () => {
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }, []);
+
+    return (
+      <div className="space-y-4 w-80">
+        <div className="text-sm text-gray-600">
+          {isLoading ? 'Loading options...' : 'Options loaded!'}
+        </div>
+        {isLoading ? (
+          <SelectSkeleton />
+        ) : (
+          <select className="w-full p-2 border border-gray-300 rounded-md">
+            <option>Chocolate</option>
+
+            <option>Strawberry</option>
+
+            <option>Vanilla</option>
+          </select>
+        )}
+        <button
+          onClick={() => setIsLoading(true)}
+          className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
+        >
+          Reload
+        </button>
+      </div>
+    );
+  },
+};
+
+export const GridLayout: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-96">
+      <div>
+        <div className="h-4 bg-gray-200 rounded w-3/4 mb-2 animate-pulse"></div>
+
+        <SelectSkeleton />
+      </div>
+
+      <div>
+        <div className="h-4 bg-gray-200 rounded w-2/3 mb-2 animate-pulse"></div>
+
+        <SelectSkeleton />
+      </div>
+
+      <div>
+        <div className="h-4 bg-gray-200 rounded w-1/2 mb-2 animate-pulse"></div>
+
+        <SelectSkeleton />
+      </div>
+
+      <div>
+        <div className="h-4 bg-gray-200 rounded w-5/6 mb-2 animate-pulse"></div>
+
+        <SelectSkeleton />
+      </div>
+    </div>
+  ),
+};

package/src/components/select/SelectSkeleton.test.tsx

@@ -0,0 +1,105 @@
+import { SelectSkeleton } from './SelectSkeleton';
+import { render, screen } from '../../utils/renderers';
+
+const LOADING_OPTIONS_LABEL = 'Loading options';
+
+describe('SelectSkeleton', () => {
+  it('should render with default props', () => {
+    render(<SelectSkeleton />);
+
+    const skeleton = screen.getByLabelText(LOADING_OPTIONS_LABEL);
+
+    expect(skeleton).toBeInTheDocument();
+  });
+
+  it('should have correct CSS classes for skeleton styling', () => {
+    const { container } = render(<SelectSkeleton />);
+
+    const skeletonContainer = container.firstChild as HTMLElement;
+
+    // Just verify it's a div element - we can't easily test the exact Tailwind classes from SELECT_CONTAINER_CLASSES
+    expect(skeletonContainer.tagName).toBe('DIV');
+
+    const skeletonElement = screen.getByLabelText(LOADING_OPTIONS_LABEL);
+
+    expect(skeletonElement).toHaveClass(
+      'w-full',
+      'h-full',
+      'bg-gray-100',
+      'animate-pulse',
+      'rounded-md',
+      'col-span-2',
+    );
+  });
+
+  it('should have proper accessibility attributes', () => {
+    render(<SelectSkeleton />);
+
+    const skeleton = screen.getByLabelText(LOADING_OPTIONS_LABEL);
+
+    expect(skeleton).toHaveAttribute('aria-label', LOADING_OPTIONS_LABEL);
+  });
+
+  it('should render skeleton with correct structure', () => {
+    const { container } = render(<SelectSkeleton />);
+
+    // Should have container div
+    const containerDiv = container.firstChild;
+
+    expect(containerDiv).toBeInTheDocument();
+
+    // Should have control div inside container
+    const controlDiv = containerDiv?.firstChild;
+
+    expect(controlDiv).toBeInTheDocument();
+
+    // Should have skeleton div inside control
+    const skeletonDiv = controlDiv?.firstChild;
+
+    expect(skeletonDiv).toBeInTheDocument();
+    expect(skeletonDiv).toHaveAttribute('aria-label', LOADING_OPTIONS_LABEL);
+  });
+
+  it('should apply SELECT_CONTAINER_CLASSES to container', () => {
+    const { container } = render(<SelectSkeleton />);
+
+    const containerElement = container.firstChild as HTMLElement;
+
+    // Since we can't easily test the exact classes from common.ts,
+    // we test that it's a div with some expected structure
+    expect(containerElement.tagName).toBe('DIV');
+  });
+
+  it('should apply SELECT_CONTROL_CLASSES and SELECT_MIN_HEIGHT to control element', () => {
+    const { container } = render(<SelectSkeleton />);
+
+    const controlElement = container.firstChild?.firstChild as HTMLElement;
+
+    expect(controlElement.tagName).toBe('DIV');
+  });
+
+  it('should be visually distinguishable as a loading state', () => {
+    render(<SelectSkeleton />);
+
+    const skeleton = screen.getByLabelText(LOADING_OPTIONS_LABEL);
+
+    // Should have animation class for loading indication
+    expect(skeleton).toHaveClass('animate-pulse');
+
+    // Should have background color for visual feedback
+    expect(skeleton).toHaveClass('bg-gray-100');
+  });
+
+  it('should maintain consistent dimensions with Select component', () => {
+    const { container } = render(<SelectSkeleton />);
+
+    const skeleton = screen.getByLabelText(LOADING_OPTIONS_LABEL);
+
+    // Should fill available space
+    expect(skeleton).toHaveClass('w-full', 'h-full');
+
+    // Container should have proper structure
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild?.firstChild).toBeInTheDocument();
+  });
+});

package/src/components/select/SelectSkeleton.tsx

@@ -0,0 +1,16 @@
+import { twMerge } from 'tailwind-merge';
+
+import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT } from './common';
+
+export const SelectSkeleton = () => {
+  return (
+    <div className={SELECT_CONTAINER_CLASSES}>
+      <div className={twMerge(SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT)}>
+        <div
+          className="w-full h-full bg-gray-100 animate-pulse rounded-md col-span-2"
+          aria-label="Loading options"
+        ></div>
+      </div>
+    </div>
+  );
+};

package/src/components/select/common.ts

@@ -0,0 +1,4 @@
+export const SELECT_MIN_HEIGHT = '!min-h-[38px]';
+export const SELECT_CONTAINER_CLASSES = 'w-full h-max select-none !pointer-events-auto';
+export const SELECT_CONTROL_CLASSES =
+  'px-2 py-2 !grid gap-4 grid-cols-[1fr_min-content] w-full border h-full rounded-md';

package/src/contexts/index.ts

@@ -1,5 +0,0 @@
-// Export all contexts and hooks
-export { useTheme, ThemeContext } from './ThemeContext';
-
-// Export context types
-export type { ThemeContextValue } from '../types';

package/src/hooks/index.ts

@@ -1,6 +1,7 @@
 // Export all hooks
 export { useLocalStorage } from './useLocalStorage';
 export { useDebounce } from './useDebounce';
+export { useClickOutside } from './useClickOutside';
 
 // Export hook types
 export type { UseLocalStorageReturn } from './useLocalStorage';

package/src/hooks/useClickOutside.test.ts

@@ -0,0 +1,290 @@
+import { useRef } from 'react';
+
+import { useClickOutside } from './useClickOutside';
+import { renderHook } from '../utils/renderers';
+
+describe('useClickOutside', () => {
+  it('should call clickAwayHandler when clicking outside the element', () => {
+    const clickAwayHandler = vi.fn();
+    const ref = { current: document.createElement('div') };
+
+    renderHook(() => useClickOutside(ref, clickAwayHandler));
+
+    // Create an element outside the ref
+    const outsideElement = document.createElement('div');
+
+    document.body.appendChild(outsideElement);
+
+    // Simulate click outside
+    const mouseEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    Object.defineProperty(mouseEvent, 'target', {
+      value: outsideElement,
+      enumerable: true,
+    });
+
+    window.dispatchEvent(mouseEvent);
+
+    expect(clickAwayHandler).toHaveBeenCalledTimes(1);
+
+    // Cleanup
+    document.body.removeChild(outsideElement);
+  });
+
+  it('should not call clickAwayHandler when clicking inside the element', () => {
+    const clickAwayHandler = vi.fn();
+    const ref = { current: document.createElement('div') };
+
+    renderHook(() => useClickOutside(ref, clickAwayHandler));
+
+    // Create an element inside the ref
+    const insideElement = document.createElement('span');
+
+    ref.current.appendChild(insideElement);
+
+    // Simulate click inside
+    const mouseEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    Object.defineProperty(mouseEvent, 'target', {
+      value: insideElement,
+      enumerable: true,
+    });
+
+    window.dispatchEvent(mouseEvent);
+
+    expect(clickAwayHandler).not.toHaveBeenCalled();
+  });
+
+  it('should not call clickAwayHandler when clicking on the element itself', () => {
+    const clickAwayHandler = vi.fn();
+    const ref = { current: document.createElement('div') };
+
+    renderHook(() => useClickOutside(ref, clickAwayHandler));
+
+    // Simulate click on the element itself
+    const mouseEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    Object.defineProperty(mouseEvent, 'target', {
+      value: ref.current,
+      enumerable: true,
+    });
+
+    window.dispatchEvent(mouseEvent);
+
+    expect(clickAwayHandler).not.toHaveBeenCalled();
+  });
+
+  it('should not call clickAwayHandler when ref.current is null', () => {
+    const clickAwayHandler = vi.fn();
+    const ref = { current: null };
+
+    renderHook(() => useClickOutside(ref, clickAwayHandler));
+
+    // Create an outside element
+    const outsideElement = document.createElement('div');
+
+    document.body.appendChild(outsideElement);
+
+    // Simulate click
+    const mouseEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    Object.defineProperty(mouseEvent, 'target', {
+      value: outsideElement,
+      enumerable: true,
+    });
+
+    window.dispatchEvent(mouseEvent);
+
+    expect(clickAwayHandler).not.toHaveBeenCalled();
+
+    // Cleanup
+    document.body.removeChild(outsideElement);
+  });
+
+  it('should not call clickAwayHandler when event target is not an HTMLElement', () => {
+    const clickAwayHandler = vi.fn();
+    const ref = { current: document.createElement('div') };
+
+    renderHook(() => useClickOutside(ref, clickAwayHandler));
+
+    // Simulate click with non-HTMLElement target
+    const mouseEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    Object.defineProperty(mouseEvent, 'target', {
+      value: document.createTextNode('text'),
+      enumerable: true,
+    });
+
+    window.dispatchEvent(mouseEvent);
+
+    expect(clickAwayHandler).not.toHaveBeenCalled();
+  });
+
+  it('should clean up event listener when unmounted', () => {
+    const clickAwayHandler = vi.fn();
+    const ref = { current: document.createElement('div') };
+    const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+
+    const { unmount } = renderHook(() => useClickOutside(ref, clickAwayHandler));
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+
+    removeEventListenerSpy.mockRestore();
+  });
+
+  it('should update event listener when clickAwayHandler changes', () => {
+    const firstHandler = vi.fn();
+    const secondHandler = vi.fn();
+    const ref = { current: document.createElement('div') };
+
+    // Test with first handler
+    const { unmount: unmount1 } = renderHook(() => useClickOutside(ref, firstHandler));
+
+    // Create an outside element
+    const outsideElement = document.createElement('div');
+
+    document.body.appendChild(outsideElement);
+
+    // Simulate click outside with first handler
+    const mouseEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    Object.defineProperty(mouseEvent, 'target', {
+      value: outsideElement,
+      enumerable: true,
+    });
+
+    window.dispatchEvent(mouseEvent);
+
+    expect(firstHandler).toHaveBeenCalledTimes(1);
+    expect(secondHandler).not.toHaveBeenCalled();
+
+    // Cleanup first hook
+    unmount1();
+
+    // Test with second handler
+    renderHook(() => useClickOutside(ref, secondHandler));
+
+    // Simulate another click outside with second handler
+    window.dispatchEvent(mouseEvent);
+
+    expect(secondHandler).toHaveBeenCalledTimes(1);
+
+    // Cleanup
+    document.body.removeChild(outsideElement);
+  });
+
+  it('should update event listener when ref changes', () => {
+    const clickAwayHandler = vi.fn();
+    const firstRef = { current: document.createElement('div') };
+    const secondRef = { current: document.createElement('div') };
+
+    // Test with first ref
+    const { unmount: unmount1 } = renderHook(() => useClickOutside(firstRef, clickAwayHandler));
+
+    // Create an element inside the first ref
+    const insideFirstElement = document.createElement('span');
+
+    firstRef.current.appendChild(insideFirstElement);
+
+    // Cleanup first hook
+    unmount1();
+
+    // Test with second ref
+    renderHook(() => useClickOutside(secondRef, clickAwayHandler));
+
+    // Click on element that was inside the first ref (now should be outside the second ref)
+    const mouseEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    Object.defineProperty(mouseEvent, 'target', {
+      value: insideFirstElement,
+      enumerable: true,
+    });
+
+    window.dispatchEvent(mouseEvent);
+
+    expect(clickAwayHandler).toHaveBeenCalledTimes(1);
+  });
+
+  it('should work with deeply nested elements', () => {
+    const clickAwayHandler = vi.fn();
+    const ref = { current: document.createElement('div') };
+
+    renderHook(() => useClickOutside(ref, clickAwayHandler));
+
+    // Create deeply nested structure
+    const level1 = document.createElement('div');
+    const level2 = document.createElement('div');
+    const level3 = document.createElement('span');
+
+    ref.current.appendChild(level1);
+    level1.appendChild(level2);
+    level2.appendChild(level3);
+
+    // Click on deeply nested element (should not trigger handler)
+    const mouseEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    Object.defineProperty(mouseEvent, 'target', {
+      value: level3,
+      enumerable: true,
+    });
+
+    window.dispatchEvent(mouseEvent);
+
+    expect(clickAwayHandler).not.toHaveBeenCalled();
+  });
+
+  it('should work with real useRef hook', () => {
+    const clickAwayHandler = vi.fn();
+
+    const { result } = renderHook(() => {
+      const ref = useRef<HTMLDivElement>(null);
+
+      useClickOutside(ref, clickAwayHandler);
+
+      return ref;
+    });
+
+    // This test verifies the hook works with actual useRef
+    // The hook should be properly typed and not cause TypeScript errors
+    expect((result.current as React.RefObject<HTMLDivElement>).current).toBe(null); // Initially null
+    expect(clickAwayHandler).toBeDefined();
+  });
+
+  it('should add event listener on mount', () => {
+    const clickAwayHandler = vi.fn();
+    const ref = { current: document.createElement('div') };
+    const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+
+    renderHook(() => useClickOutside(ref, clickAwayHandler));
+
+    expect(addEventListenerSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+
+    addEventListenerSpy.mockRestore();
+  });
+});

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,26 @@
+import { useEffect, type RefObject } from 'react';
+
+export const useClickOutside = (
+  refElement: RefObject<HTMLElement | null>,
+  clickAwayHandler: () => void,
+) => {
+  useEffect(() => {
+    const listener = (event: MouseEvent) => {
+      const element = event.target;
+
+      if (
+        refElement.current &&
+        element instanceof HTMLElement &&
+        !refElement.current.contains(element)
+      ) {
+        clickAwayHandler();
+      }
+    };
+
+    window.addEventListener('mousedown', listener);
+
+    return () => {
+      window.removeEventListener('mousedown', listener);
+    };
+  }, [refElement, clickAwayHandler]);
+};