@tpzdsp/next-toolkit 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A reusable React component library for Next.js applications",
   "type": "module",
   "private": false,

package/src/components/Button/Button.stories.tsx

@@ -14,25 +14,25 @@ export const AllButtons: StoryObj<typeof Button> = {
   render: () => (
     <div className="flex flex-col gap-4">
       <div>
-        <Button type="primary" onClick={action('primary-click')}>
+        <Button variant="primary" onClick={action('primary-click')}>
           Primary
         </Button>
       </div>
 
       <div>
-        <Button type="secondary" onClick={action('secondary-click')}>
+        <Button variant="secondary" onClick={action('secondary-click')}>
           Secondary
         </Button>
       </div>
 
       <div className="p-4 bg-brand">
-        <Button type="inverse" onClick={action('inverse-click')}>
+        <Button variant="inverse" onClick={action('inverse-click')}>
           Inverse
         </Button>
       </div>
 
       <div>
-        <Button type="primary" disabled>
+        <Button variant="primary" disabled>
           Disabled Button
         </Button>
       </div>

package/src/components/Heading/Heading.tsx

@@ -1,21 +1,48 @@
+import { twMerge } from 'tailwind-merge';
+
 export type HeadingProps = {
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  className?: string;
   children: React.ReactNode;
 };
 
-export const Heading = ({ type, children }: HeadingProps) => {
+export const Heading = ({ type, className, children }: HeadingProps) => {
   switch (type) {
     case 'h1':
-      return <h1 className="py-4 text-4xl font-bold text-text-primary">{children}</h1>;
+      return (
+        <h1 className={twMerge('py-4 text-4xl font-bold text-text-primary', className)}>
+          {children}
+        </h1>
+      );
     case 'h2':
-      return <h2 className="py-3 text-3xl font-bold text-text-primary">{children}</h2>;
+      return (
+        <h2 className={twMerge('py-3 text-3xl font-bold text-text-primary', className)}>
+          {children}
+        </h2>
+      );
     case 'h3':
-      return <h3 className="py-3 text-xl font-bold text-text-primary">{children}</h3>;
+      return (
+        <h3 className={twMerge('py-3 text-xl font-bold text-text-primary', className)}>
+          {children}
+        </h3>
+      );
     case 'h4':
-      return <h4 className="py-3 text-lg font-bold text-text-primary">{children}</h4>;
+      return (
+        <h4 className={twMerge('py-3 text-lg font-bold text-text-primary', className)}>
+          {children}
+        </h4>
+      );
     case 'h5':
-      return <h5 className="py-2 text-base font-bold text-text-primary">{children}</h5>;
+      return (
+        <h5 className={twMerge('py-2 text-base font-bold text-text-primary', className)}>
+          {children}
+        </h5>
+      );
     case 'h6':
-      return <h6 className="py-2 text-sm font-bold text-text-primary">{children}</h6>;
+      return (
+        <h6 className={twMerge('py-2 text-sm font-bold text-text-primary', className)}>
+          {children}
+        </h6>
+      );
   }
 };

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

@@ -0,0 +1,31 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+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>
+  ),
+};

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

@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest';
+
+import { act, render, screen, userEvent, waitFor } from '@tpzdsp/next-toolkit';
+
+import { SlidingPanel } from './SlidingPanel';
+
+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="Open 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="Open 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' }));
+
+    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

@@ -0,0 +1,133 @@
+'use client';
+
+import { useState, useEffect, type ReactNode, useRef, useMemo } from 'react';
+
+type Position = 'center-left' | 'center-right' | 'center-top' | 'center-bottom';
+
+export type SlidingPanelProps = {
+  children: ReactNode;
+  position?: Position;
+  tabLabel?: string;
+  defaultOpen?: boolean;
+};
+
+export const SlidingPanel = ({
+  children,
+  tabLabel = 'Open',
+  position = 'center-left',
+  defaultOpen = false,
+}: SlidingPanelProps) => {
+  const [isVisible, setIsVisible] = useState(defaultOpen);
+  const [panelDimensions, setPanelDimensions] = useState({ width: 0, height: 0 });
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Measure panel dimensions when visible
+  useEffect(() => {
+    if (isVisible && panelRef.current) {
+      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 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(() => {
+    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]);
+
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none z-30">
+      <button
+        className={`pointer-events-auto ${buttonPosition} bg-gray-700 text-white z-40`}
+        style={getButtonStyle}
+        onClick={() => setIsVisible((prev) => !prev)}
+      >
+        {isVisible ? 'Close' : tabLabel}
+      </button>
+
+      <div
+        ref={panelRef}
+        className={`${panelBase} ${panelLayout} pointer-events-auto`}
+        aria-hidden={!isVisible}
+        inert={!isVisible}
+      >
+        <div className="mt-4">{children}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -22,11 +22,13 @@ export type { HintProps } from './Hint/Hint';
 export type { ExternalLinkProps } from './link/ExternalLink';
 export type { LinkProps } from './link/Link';
 export type { ParagraphProps } from './Paragraph/Paragraph';
+export type { SlidingPanelProps } from './SlidingPanel/SlidingPanel';
 
 // Client components - these require 'use client' directive
 export { NextLinkWrapper } from './link/NextLinkWrapper';
 export { DropdownMenu } from './dropdown/DropdownMenu';
 export { useDropdownMenu } from './dropdown/useDropdownMenu';
+export { SlidingPanel } from './SlidingPanel/SlidingPanel';
 
 // Export client component types
 export type { NextLinkWrapperProps } from './link/NextLinkWrapper';