@tpzdsp/next-toolkit 2.5.1 → 3.0.0

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

@@ -1,194 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-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

@@ -1,104 +0,0 @@
-import { SelectSkeleton } from './SelectSkeleton';
-import { render, screen } from '../../test/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',
-      '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 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

@@ -1,23 +0,0 @@
-import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES } from './common';
-import type { ExtendProps } from '../../types';
-import { cn } from '../../utils';
-
-type Props = {
-  /** Explicitly disallow children as we hard-code the skeleton content */
-  children?: never;
-};
-
-export type SelectSkeletonProps = ExtendProps<'div', Props>;
-
-export const SelectSkeleton = ({ className, ...props }: SelectSkeletonProps = {}) => {
-  return (
-    <div className={cn(SELECT_CONTAINER_CLASSES, className)} {...props}>
-      <div className={cn(SELECT_CONTROL_CLASSES, 'p-2')}>
-        <div
-          className="w-full h-full bg-gray-100 animate-pulse col-span-2"
-          aria-label="Loading options"
-        ></div>
-      </div>
-    </div>
-  );
-};

package/src/components/select/common.ts

@@ -1,3 +0,0 @@
-export const SELECT_CONTAINER_CLASSES = 'w-full select-none !pointer-events-auto input-height';
-export const SELECT_CONTROL_CLASSES =
-  'p-1 !grid gap-4 grid-cols-[1fr_min-content] w-full border input-height border-black';

package/src/components/select/index.ts

@@ -1,18 +0,0 @@
-// Select components with react-select dependency
-export { Select } from './Select';
-export { SelectSkeleton } from './SelectSkeleton';
-
-// Export types
-export type { SelectProps } from './Select';
-export type { SelectSkeletonProps } from './SelectSkeleton';
-
-// Re-export useful types from react-select for convenience
-export type {
-  Props as ReactSelectProps,
-  GroupBase,
-  OptionsOrGroups,
-  SingleValue,
-  MultiValue,
-  ActionMeta,
-  OnChangeValue,
-} from 'react-select';

package/src/components/skipLink/SkipLink.stories.tsx

@@ -1,346 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { SkipLink } from './SkipLink';
-
-const meta = {
-  title: 'Components/SkipLink',
-  component: SkipLink,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'A skip link component that allows users to jump to the main content, improving accessibility for keyboard and screen reader users.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    mainContentId: {
-      control: 'text',
-      description: 'The ID of the main content element to skip to',
-      defaultValue: 'main-content',
-    },
-  },
-} satisfies Meta<typeof SkipLink>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default skip link with the standard main content ID.',
-      },
-    },
-  },
-};
-
-export const CustomTarget: Story = {
-  args: {
-    mainContentId: 'custom-main',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Skip link with a custom target ID.',
-      },
-    },
-  },
-};
-
-export const WithMainContent: Story = {
-  render: (args) => (
-    <div className="min-h-screen">
-      <SkipLink {...args} />
-
-      <header className="bg-blue-600 text-white p-4">
-        <nav>
-          <ul className="flex space-x-4">
-            <li>
-              <a href="#" className="hover:underline">
-                Home
-              </a>
-            </li>
-
-            <li>
-              <a href="#" className="hover:underline">
-                About
-              </a>
-            </li>
-
-            <li>
-              <a href="#" className="hover:underline">
-                Services
-              </a>
-            </li>
-
-            <li>
-              <a href="#" className="hover:underline">
-                Contact
-              </a>
-            </li>
-          </ul>
-        </nav>
-      </header>
-
-      <main id="main-content" className="p-8">
-        <h1 className="text-3xl font-bold mb-6">Main Content</h1>
-
-        <p className="mb-4">
-          This is the main content area. Use Tab key to navigate to the skip link at the top, then
-          press Enter to jump directly here.
-        </p>
-
-        <p className="mb-4">
-          The skip link is invisible by default but becomes visible when focused, providing an
-          accessible way for keyboard users to bypass navigation.
-        </p>
-
-        <div className="space-y-4">
-          <p>Sample content paragraph 1.</p>
-
-          <p>Sample content paragraph 2.</p>
-
-          <p>Sample content paragraph 3.</p>
-        </div>
-      </main>
-
-      <footer className="bg-gray-800 text-white p-4 mt-8">
-        <p>&copy; 2024 Example Site. All rights reserved.</p>
-      </footer>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Complete page layout showing how the skip link works in context. Use Tab to focus the skip link, then Enter to jump to main content.',
-      },
-    },
-  },
-};
-
-export const CustomTargetWithContent: Story = {
-  args: {
-    mainContentId: 'article-content',
-  },
-  render: (args) => (
-    <div className="min-h-screen">
-      <SkipLink {...args} />
-
-      <header className="bg-green-600 text-white p-4">
-        <h1 className="text-xl font-bold">Site Header</h1>
-      </header>
-
-      <nav className="bg-gray-200 p-4">
-        <ul className="flex space-x-4">
-          <li>
-            <a href="#" className="text-blue-600 hover:underline">
-              Navigation Link 1
-            </a>
-          </li>
-
-          <li>
-            <a href="#" className="text-blue-600 hover:underline">
-              Navigation Link 2
-            </a>
-          </li>
-
-          <li>
-            <a href="#" className="text-blue-600 hover:underline">
-              Navigation Link 3
-            </a>
-          </li>
-        </ul>
-      </nav>
-
-      <aside className="bg-yellow-100 p-4">
-        <h2 className="font-bold mb-2">Sidebar</h2>
-
-        <p>Some sidebar content that users might want to skip.</p>
-      </aside>
-
-      <article id="article-content" className="p-8 bg-white">
-        <h1 className="text-3xl font-bold mb-6">Article Title</h1>
-
-        <p className="mb-4">
-          This skip link targets a custom ID &quot;article-content&quot; instead of the default
-          &quot;main-content&quot;.
-        </p>
-
-        <p className="mb-4">
-          This demonstrates how the component can be configured for different page layouts and
-          content structures.
-        </p>
-      </article>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Skip link with custom target ID, demonstrating flexibility for different page structures.',
-      },
-    },
-  },
-};
-
-export const FocusedState: Story = {
-  args: {
-    mainContentId: 'article-content-focused',
-  },
-  render: (args) => (
-    <div className="min-h-screen relative">
-      <style>
-        {`
-          .skip-link {
-            position: relative !important;
-            top: 0 !important;
-            display: block !important;
-          }
-        `}
-      </style>
-
-      <SkipLink {...args} />
-
-      <div className="p-8">
-        <h1 className="text-2xl font-bold mb-4">Skip Link in Focused State</h1>
-
-        <p className="mb-4">
-          This story shows how the skip link appears when focused. Normally it&apos;s hidden
-          off-screen until a user tabs to it.
-        </p>
-
-        <main id="main-content-focused" className="mt-8 p-4 border-2 border-dashed border-gray-400">
-          <h2 className="text-xl font-bold mb-2">Main Content Target</h2>
-
-          <p>This is where users will land when they activate the skip link.</p>
-        </main>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Shows the visual appearance of the skip link when focused (normally hidden off-screen).',
-      },
-    },
-  },
-};
-
-export const AccessibilityTest: Story = {
-  args: {
-    mainContentId: 'article-content-accessibility',
-  },
-  render: (args) => (
-    <div className="min-h-screen">
-      <SkipLink {...args} />
-
-      <div className="p-8">
-        <h1 className="text-2xl font-bold mb-6">Accessibility Testing</h1>
-
-        <div className="bg-blue-50 border border-blue-200 rounded p-4 mb-6">
-          <h2 className="font-bold text-blue-800 mb-2">Testing Instructions:</h2>
-
-          <ol className="list-decimal list-inside space-y-1 text-blue-700">
-            <li>Use Tab key to navigate to the skip link (it will appear at the top)</li>
-
-            <li>Press Enter or Space to activate the skip link</li>
-
-            <li>Verify that focus moves to the main content below</li>
-
-            <li>Test with screen reader for proper announcement</li>
-          </ol>
-        </div>
-
-        <nav className="mb-8">
-          <h2 className="text-lg font-semibold mb-3">Navigation Menu</h2>
-
-          <ul className="space-y-2">
-            <li>
-              <a
-                href="#"
-                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
-              >
-                Link 1
-              </a>
-            </li>
-
-            <li>
-              <a
-                href="#"
-                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
-              >
-                Link 2
-              </a>
-            </li>
-
-            <li>
-              <a
-                href="#"
-                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
-              >
-                Link 3
-              </a>
-            </li>
-
-            <li>
-              <a
-                href="#"
-                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
-              >
-                Link 4
-              </a>
-            </li>
-
-            <li>
-              <a
-                href="#"
-                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
-              >
-                Link 5
-              </a>
-            </li>
-          </ul>
-        </nav>
-
-        <main
-          id="main-content-accessibility"
-          className="p-6 bg-green-50 border border-green-200 rounded"
-        >
-          <h2 className="text-xl font-bold mb-4 text-green-800">Main Content Area</h2>
-
-          <p className="mb-4">
-            If the skip link worked correctly, focus should now be on this main content area,
-            bypassing all the navigation links above.
-          </p>
-
-          <p className="mb-4">
-            This is particularly important for users who rely on keyboard navigation or screen
-            readers, as it saves them from having to tab through all navigation elements on every
-            page.
-          </p>
-
-          <button
-            className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 focus:outline-2
-              focus:outline-green-500"
-          >
-            Interactive Element
-          </button>
-        </main>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Complete accessibility testing scenario with instructions for manual testing.',
-      },
-    },
-  },
-};