@tpzdsp/next-toolkit 2.5.0 → 3.0.0

package/src/components/SlidingPanel/SlidingPanel.stories.tsx

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { SlidingPanel } from './SlidingPanel';
-
-export default {
-  children: 'SlidingPanel',
-  component: SlidingPanel,
-} as Meta;
-
-export const AllSlidingPanels: StoryObj<typeof SlidingPanel> = {
-  render: () => (
-    <div>
-      <div>
-        <SlidingPanel>Left</SlidingPanel>
-      </div>
-
-      <div>
-        <SlidingPanel position="center-right">Right</SlidingPanel>
-      </div>
-
-      <div>
-        <SlidingPanel position="center-top">Top</SlidingPanel>
-      </div>
-
-      <div>
-        <SlidingPanel position="center-bottom">Bottom</SlidingPanel>
-      </div>
-    </div>
-  ),
-};
-
-export const WithAutoFocus: StoryObj<typeof SlidingPanel> = {
-  render: () => (
-    <SlidingPanel tabLabel="Auto Focus Demo" position="center-left">
-      <div>
-        <h3>Panel with Auto Focus</h3>
-
-        <p>The input below should be focused when the panel opens:</p>
-
-        <input data-autofocus placeholder="I will be focused automatically" />
-
-        <button type="button">Button</button>
-      </div>
-    </SlidingPanel>
-  ),
-};
-
-export const DefaultOpen: StoryObj<typeof SlidingPanel> = {
-  render: () => (
-    <SlidingPanel tabLabel="Always Open" position="center-right" defaultOpen>
-      <div>
-        <h3>Default Open Panel</h3>
-
-        <p>This panel starts open by default.</p>
-
-        <button type="button">Button 1</button>
-
-        <button type="button">Button 2</button>
-
-        <input placeholder="Input field" />
-      </div>
-    </SlidingPanel>
-  ),
-};
-
-export const FormExample: StoryObj<typeof SlidingPanel> = {
-  render: () => (
-    <SlidingPanel tabLabel="Contact Form" position="center-top">
-      <div>
-        <h3>Contact Form</h3>
-
-        <form>
-          <div style={{ marginBottom: '1rem' }}>
-            <label htmlFor="name">Name:</label>
-
-            <input id="name" type="text" placeholder="Your name" data-autofocus />
-          </div>
-
-          <div style={{ marginBottom: '1rem' }}>
-            <label htmlFor="email">Email:</label>
-
-            <input id="email" type="email" placeholder="your@email.com" />
-          </div>
-
-          <div style={{ marginBottom: '1rem' }}>
-            <label htmlFor="message">Message:</label>
-
-            <textarea id="message" placeholder="Your message"></textarea>
-          </div>
-
-          <button type="submit">Send Message</button>
-
-          <button type="button">Cancel</button>
-        </form>
-      </div>
-    </SlidingPanel>
-  ),
-};
-
-export const NoFocusableElements: StoryObj<typeof SlidingPanel> = {
-  render: () => (
-    <SlidingPanel tabLabel="No Focus Elements" position="center-left">
-      <div>
-        <h3>Panel Without Focusable Elements</h3>
-
-        <p>This panel only contains text and headings.</p>
-
-        <p>
-          It should still work properly with focus trapping, even though there are no buttons,
-          inputs, or other interactive elements.
-        </p>
-
-        <div>
-          <strong>Key Features:</strong>
-        </div>
-
-        <ul>
-          <li>Opens and closes properly</li>
-
-          <li>Focus trap works correctly</li>
-
-          <li>Escape key closes the panel</li>
-
-          <li>Focus returns to trigger button</li>
-        </ul>
-      </div>
-    </SlidingPanel>
-  ),
-};

package/src/components/SlidingPanel/SlidingPanel.test.tsx

@@ -1,83 +0,0 @@
-import { SlidingPanel } from './SlidingPanel';
-import { act, render, screen, userEvent, waitFor } from '../../test/renderers';
-
-const positions = ['center-left', 'center-right', 'center-top', 'center-bottom'] as const;
-
-const getExpectedOpenClass = (pos: string) =>
-  pos.includes('left') || pos.includes('right') ? 'translate-x-0' : 'translate-y-0';
-
-const hiddenPositionClasses = {
-  'center-left': '-translate-x-full',
-  'center-right': 'translate-x-full',
-  'center-top': '-translate-y-[200%]',
-  'center-bottom': 'translate-y-[200%]',
-};
-
-describe('SlidingPanel', () => {
-  it.each(positions)('should render closed panel by default at %s', (position) => {
-    render(
-      <SlidingPanel position={position} tabLabel="Test">
-        <p>Panel Content</p>
-      </SlidingPanel>,
-    );
-
-    expect(screen.getByRole('button', { name: 'Open Test' })).toBeVisible();
-
-    // Content should still be in the DOM but hidden
-    const panelContent = screen.queryByText('Panel Content')?.parentElement?.parentElement;
-
-    expect(panelContent).toBeInTheDocument();
-    expect(panelContent).toHaveClass(hiddenPositionClasses[position]);
-  });
-
-  it.each(positions)(
-    'should render content and correct class after opening %s',
-    async (position) => {
-      const user = userEvent.setup();
-
-      render(
-        <SlidingPanel position={position} tabLabel="Me">
-          <div>My content</div>
-        </SlidingPanel>,
-      );
-
-      await user.click(screen.getByRole('button', { name: 'Open Me' }));
-
-      // Wait one animation frame for isVisible to be set
-      await act(() => new Promise(requestAnimationFrame));
-
-      const content = await screen.findByText('My content');
-
-      expect(content).toBeVisible();
-
-      // Go up from content div to panel wrapper
-      const wrapper = content.closest('div')!.parentElement!.parentElement!;
-
-      expect(wrapper.className).toContain(getExpectedOpenClass(position));
-    },
-  );
-
-  it.each(positions)('should close panel when "Close" is clicked at %s', async (position) => {
-    const user = userEvent.setup();
-
-    render(
-      <SlidingPanel position={position} tabLabel="Trigger" defaultOpen>
-        <p>Panel Content</p>
-      </SlidingPanel>,
-    );
-
-    const panelContent = screen.getByText('Panel Content');
-
-    expect(panelContent).toBeVisible();
-
-    await user.click(screen.getByRole('button', { name: 'Close Trigger' }));
-
-    await waitFor(() => {
-      expect(panelContent).toBeInTheDocument();
-      const insideDiv = panelContent?.parentElement?.parentElement;
-
-      expect(insideDiv).not.toBeNull();
-      expect(insideDiv).toHaveClass(hiddenPositionClasses[position]);
-    });
-  });
-});

package/src/components/SlidingPanel/SlidingPanel.tsx

@@ -1,258 +0,0 @@
-'use client';
-
-import {
-  useState,
-  useEffect,
-  type ReactNode,
-  useRef,
-  useMemo,
-  useId,
-  type CSSProperties,
-} from 'react';
-
-import { FocusTrap } from 'focus-trap-react';
-
-import type { ExtendProps } from '../../types';
-import { cn } from '../../utils';
-
-type Position = 'center-left' | 'center-right' | 'center-top' | 'center-bottom';
-
-type Props = {
-  children: ReactNode;
-  position?: Position;
-  tabLabel?: string;
-  defaultOpen?: boolean;
-};
-
-export type SlidingPanelProps = ExtendProps<'div', Props>;
-
-export const SlidingPanel = ({
-  children,
-  tabLabel = 'Open',
-  position = 'center-left',
-  defaultOpen = false,
-  className,
-  ...props
-}: SlidingPanelProps) => {
-  const id = useId();
-
-  const [isVisible, setIsVisible] = useState(defaultOpen);
-  const [isTrapActive, setIsTrapActive] = useState(defaultOpen);
-  const [panelDimensions, setPanelDimensions] = useState({ width: 0, height: 0 });
-
-  const panelRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-
-  // Required for the `escapeDeactivates` function as these options are an object and only
-  // capture their environment once, so without a ref, `isVisible` would only ever be
-  // `false` inside the callback, even if it's change. A `useCallback` doesn't help because
-  // it creates a new function each time, so the event would still only capture the first created function.
-  const isVisibleRef = useRef(isVisible);
-  // tracks if the focus trap was deactivated by clicking outside the trap
-  const deactivatedByClick = useRef(false);
-
-  useEffect(() => {
-    isVisibleRef.current = isVisible;
-
-    deactivatedByClick.current = false;
-
-    setIsTrapActive(isVisible);
-  }, [isVisible]);
-
-  // Measure panel dimensions when visible or when panel content changes
-  useEffect(() => {
-    if (!panelRef.current) {
-      return;
-    }
-
-    const updateDimensions = () => {
-      if (panelRef.current) {
-        const rect = panelRef.current.getBoundingClientRect();
-        const newDimensions = { width: rect.width, height: rect.height };
-
-        if (
-          newDimensions.width !== panelDimensions.width ||
-          newDimensions.height !== panelDimensions.height
-        ) {
-          setPanelDimensions(newDimensions);
-        }
-      }
-    };
-
-    // Initial measurement
-    updateDimensions();
-
-    // Use ResizeObserver to detect content changes
-    const resizeObserver = new ResizeObserver(updateDimensions);
-
-    resizeObserver.observe(panelRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [isVisible, panelDimensions.height, panelDimensions.width]);
-
-  const panelBase =
-    'absolute bg-white shadow-lg p-4 flex flex-col transition-transform duration-300 ease-in-out overflow-auto z-30';
-
-  const panelLayout = {
-    'center-left': `top-0 left-0 h-full w-[30%] lg:w-[35%] ${
-      isVisible ? 'translate-x-0' : '-translate-x-full'
-    }`,
-    'center-right': `top-0 right-0 h-full w-[30%] lg:w-[35%] ${
-      isVisible ? 'translate-x-0' : 'translate-x-full'
-    }`,
-    // Changed: Use max-height and let content determine actual height
-    'center-top': `top-0 left-0 w-full max-h-[80vh] ${
-      isVisible ? 'translate-y-0' : '-translate-y-[200%]'
-    }`,
-    'center-bottom': `bottom-0 left-0 w-full max-h-[80vh] ${
-      isVisible ? 'translate-y-0' : 'translate-y-[200%]'
-    }`,
-  }[position];
-
-  const buttonPosition = {
-    'center-left':
-      'absolute top-1/2 -translate-y-1/2 transition-all duration-300 ease-in-out rounded-tr-md rounded-br-md [writing-mode:vertical-rl] px-1 py-3',
-    'center-right':
-      'absolute top-1/2 -translate-y-1/2 transition-all duration-300 ease-in-out rounded-tl-md rounded-bl-md [writing-mode:vertical-rl] px-1 py-3',
-    'center-top':
-      'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out rounded-bl-md rounded-br-md px-3 py-1',
-    'center-bottom':
-      'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out rounded-tl-md rounded-tr-md px-3 py-1',
-  }[position];
-
-  // Dynamic positioning using actual panel dimensions
-  const getButtonStyle = useMemo((): CSSProperties => {
-    if (position === 'center-left') {
-      return {
-        left: isVisible ? `${panelDimensions.width}px` : '0px',
-      };
-    }
-
-    if (position === 'center-right') {
-      return {
-        right: isVisible ? `${panelDimensions.width}px` : '0px',
-      };
-    }
-
-    if (position === 'center-top') {
-      return {
-        top: isVisible ? `${panelDimensions.height}px` : '0px',
-      };
-    }
-
-    if (position === 'center-bottom') {
-      return {
-        bottom: isVisible ? `${panelDimensions.height}px` : '0px',
-      };
-    }
-
-    return {};
-  }, [isVisible, panelDimensions.height, panelDimensions.width, position]);
-
-  const openPanel = () => {
-    setIsVisible(true);
-  };
-
-  const closePanel = () => {
-    setIsVisible(false);
-  };
-
-  return (
-    <div
-      className={cn(
-        'absolute inset-0 z-30 overflow-hidden pointer-events-none sliding-panel',
-        className,
-      )}
-      {...props}
-    >
-      <button
-        className={`pointer-events-auto ${buttonPosition} bg-gray-700 text-white z-40 focus-yellow`}
-        style={getButtonStyle}
-        onClick={() => (isVisible ? closePanel() : openPanel())}
-        aria-expanded={isVisible}
-        aria-controls={id}
-        ref={buttonRef}
-        type="button"
-      >
-        {isVisible ? `Close ${tabLabel}` : `Open ${tabLabel}`}
-      </button>
-
-      <FocusTrap
-        active={isTrapActive}
-        focusTrapOptions={{
-          escapeDeactivates: () => {
-            deactivatedByClick.current = false;
-
-            if (isVisibleRef.current) {
-              closePanel();
-            }
-
-            return false;
-          },
-          clickOutsideDeactivates: () => {
-            deactivatedByClick.current = true; // mark as mouse-driven
-
-            return true; // still allow it to deactivate
-          },
-
-          setReturnFocus: (target) => {
-            // if the user has clicked outside the focus trap we shouldn't return focus as it will steal focus from the element they clicked on
-            return deactivatedByClick.current ? false : target;
-          },
-          onDeactivate: () => {
-            setIsTrapActive(false);
-          },
-          onActivate: () => {
-            setIsTrapActive(true);
-          },
-          /**
-           * Emergency fallback focus function for FocusTrap.
-           *
-           * This function is automatically called by FocusTrap whenever it cannot find
-           * any tabbable elements within the panel. This commonly occurs in scenarios like:
-           *
-           * - Panel opens but async content hasn't loaded yet
-           * - Panel is closing and content is being unmounted
-           * - User presses Escape and TableFilters content disappears
-           * - Dynamic content changes temporarily remove all focusable elements
-           *
-           * Without this fallback, FocusTrap throws the error:
-           * "Your focus-trap must have at least one container with at least one tabbable node in it at all times"
-           *
-           * The function ensures there's always a focusable element available by:
-           * 1. Looking for our guaranteed hidden fallback element with [data-fallback-focus]
-           * 2. Making it temporarily focusable (tabIndex = 0)
-           * 3. Returning it to FocusTrap as a safe focus target
-           * 4. Using document.body as ultimate fallback if something goes wrong
-           *
-           * This is especially crucial for complex content like ObservationTableManager
-           * where TableFilters has async operations that can cause content to disappear
-           * during panel lifecycle events.
-           *
-           * @returns HTMLElement - The element FocusTrap should focus on as a fallback
-           */
-          fallbackFocus: () => {
-            return panelRef.current ?? buttonRef.current ?? document.body;
-          },
-        }}
-      >
-        <div
-          ref={panelRef}
-          tabIndex={-1}
-          id={id}
-          role="dialog"
-          aria-modal="true"
-          aria-label={`Sliding panel for ${tabLabel}`}
-          className={`${panelBase} ${panelLayout} pointer-events-auto`}
-          aria-hidden={!isVisible}
-          inert={!isVisible}
-          onPointerDown={() => (!isTrapActive ? setIsTrapActive(true) : void 0)}
-        >
-          <div className="mt-4">{children}</div>
-        </div>
-      </FocusTrap>
-    </div>
-  );
-};

package/src/components/accordion/Accordion.stories.tsx

@@ -1,234 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Accordion } from './Accordion';
-
-const meta: Meta<typeof Accordion> = {
-  title: 'Components/Accordion',
-  component: Accordion,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'The title displayed in the accordion header',
-    },
-    defaultOpen: {
-      control: 'boolean',
-      description: 'Whether the accordion should be open by default',
-    },
-    children: {
-      control: false,
-      description: 'The content to display when the accordion is expanded',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Accordion>;
-
-export const Default: Story = {
-  args: {
-    title: 'Getting Started',
-    children: (
-      <div className="space-y-2">
-        <p>Welcome to our platform! Here&apos;s how to get started:</p>
-
-        <ul className="list-disc list-inside space-y-1">
-          <li>Create your account</li>
-
-          <li>Verify your email</li>
-
-          <li>Complete your profile</li>
-        </ul>
-      </div>
-    ),
-  },
-};
-
-export const DefaultOpen: Story = {
-  args: {
-    title: 'Features Overview',
-    defaultOpen: true,
-    children: (
-      <div className="space-y-2">
-        <p>Our platform offers the following features:</p>
-
-        <ul className="list-disc list-inside space-y-1">
-          <li>Real-time collaboration</li>
-
-          <li>Advanced analytics</li>
-
-          <li>Customizable dashboards</li>
-
-          <li>API integrations</li>
-        </ul>
-      </div>
-    ),
-  },
-};
-
-export const SimpleContent: Story = {
-  args: {
-    title: 'What is React?',
-    children: <p>React is a JavaScript library for building user interfaces.</p>,
-  },
-};
-
-export const LongContent: Story = {
-  args: {
-    title: 'Terms and Conditions',
-    children: (
-      <div className="space-y-4 max-h-64 overflow-y-auto">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-          ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-          nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-          deserunt mollit anim id est laborum.
-        </p>
-
-        <p>
-          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
-          laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
-          architecto beatae vitae dicta sunt explicabo.
-        </p>
-      </div>
-    ),
-  },
-};
-
-export const ComplexContent: Story = {
-  args: {
-    title: 'Pricing Plans',
-    children: (
-      <div className="space-y-4">
-        <p>Choose the plan that works best for you:</p>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div className="border rounded p-4">
-            <h4 className="font-semibold">Basic</h4>
-
-            <p className="text-gray-600">$9/month</p>
-
-            <button className="mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm">
-              Choose Plan
-            </button>
-          </div>
-
-          <div className="border rounded p-4">
-            <h4 className="font-semibold">Pro</h4>
-
-            <p className="text-gray-600">$29/month</p>
-
-            <button className="mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm">
-              Choose Plan
-            </button>
-          </div>
-
-          <div className="border rounded p-4">
-            <h4 className="font-semibold">Enterprise</h4>
-
-            <p className="text-gray-600">Contact us</p>
-
-            <button className="mt-2 px-3 py-1 bg-blue-500 text-white rounded text-sm">
-              Contact Sales
-            </button>
-          </div>
-        </div>
-      </div>
-    ),
-  },
-};
-
-export const FAQ: Story = {
-  render: () => (
-    <div className="space-y-4 max-w-2xl">
-      <h2 className="text-xl font-bold mb-4">Frequently Asked Questions</h2>
-
-      <Accordion title="How do I reset my password?">
-        <div className="space-y-2">
-          <p>To reset your password:</p>
-
-          <ol className="list-decimal list-inside space-y-1">
-            <li>Go to the login page</li>
-
-            <li>Click &quot;Forgot Password&quot;</li>
-
-            <li>Enter your email address</li>
-
-            <li>Check your email for reset instructions</li>
-          </ol>
-        </div>
-      </Accordion>
-
-      <Accordion title="Can I cancel my subscription anytime?">
-        <p>
-          Yes, you can cancel your subscription at any time. Your access will continue until the end
-          of your current billing period.
-        </p>
-      </Accordion>
-
-      <Accordion title="Do you offer refunds?">
-        <div className="space-y-2">
-          <p>We offer refunds under the following conditions:</p>
-
-          <ul className="list-disc list-inside space-y-1">
-            <li>Within 30 days of purchase</li>
-
-            <li>Service was not used extensively</li>
-
-            <li>Technical issues that couldn&apos;t be resolved</li>
-          </ul>
-
-          <p className="mt-2">Contact support for refund requests.</p>
-        </div>
-      </Accordion>
-
-      <Accordion title="Is my data secure?" defaultOpen>
-        <div className="space-y-2">
-          <p>Yes, we take data security seriously:</p>
-
-          <ul className="list-disc list-inside space-y-1">
-            <li>All data is encrypted in transit and at rest</li>
-
-            <li>We use industry-standard security practices</li>
-
-            <li>Regular security audits and penetration testing</li>
-
-            <li>GDPR and CCPA compliant</li>
-          </ul>
-        </div>
-      </Accordion>
-    </div>
-  ),
-};
-
-export const Interactive: Story = {
-  render: () => (
-    <div className="space-y-6 max-w-lg">
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Multiple Accordions</h3>
-
-        <div className="space-y-4">
-          <Accordion title="Section 1">
-            <p>Content for the first section.</p>
-          </Accordion>
-
-          <Accordion title="Section 2" defaultOpen>
-            <p>Content for the second section (open by default).</p>
-          </Accordion>
-
-          <Accordion title="Section 3">
-            <p>Content for the third section.</p>
-          </Accordion>
-        </div>
-      </div>
-    </div>
-  ),
-};