@tpzdsp/next-toolkit 1.12.1 → 1.14.0

package/src/components/ButtonLink/ButtonLink.tsx

@@ -0,0 +1,33 @@
+import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
+
+type Props = {
+  type?: 'submit' | 'reset' | 'button';
+  children: React.ReactNode;
+};
+
+export type ButtonLinkProps = ExtendProps<'button', Props>;
+
+/**
+ * A button that looks like a link.
+ * Use when you need button functionality (onClick, form submission)
+ * but want the visual appearance of a link.
+ */
+export const ButtonLink = ({ type = 'button', className, children, ...props }: ButtonLinkProps) => {
+  return (
+    <button
+      type={type}
+      className={cn(
+        `cursor-pointer text-link hover:decoration-[max(3px,_.1875rem,_.12em)] hover:text-link-hover
+        visited:text-link-visited active:text-black focus:decoration-[max(3px,_.1875rem,_.12em)]
+        decoration-[max(1px,_.0625rem)] underline-offset-[0.1578em] underline outline-none
+        focus:text-focus-text focus:bg-focus inline-block bg-transparent border-0 p-0
+        disabled:opacity-50 disabled:cursor-not-allowed`,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

package/src/components/InfoBox/InfoBox.stories.tsx

@@ -0,0 +1,460 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { InfoBox } from './InfoBox';
+
+const meta = {
+  title: 'Components/InfoBox',
+  component: InfoBox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'An accessible info box component that displays contextual information in a popover triggered by an info icon button. Uses Floating UI for intelligent auto-positioning that adapts to viewport constraints.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Optional title displayed at the top of the info box content',
+    },
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Whether the info box starts open',
+      defaultValue: false,
+    },
+    maxWidth: {
+      control: 'text',
+      description: 'Maximum width of the content box (default: 320px)',
+    },
+    triggerLabel: {
+      control: 'text',
+      description: 'Accessible label for the trigger button',
+    },
+    placement: {
+      control: 'select',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end',
+      ],
+      description:
+        'Preferred placement (Floating UI will auto-adjust if there is not enough space)',
+    },
+    children: {
+      control: false,
+      description: 'Content to display inside the info box',
+    },
+    onOpenChange: {
+      action: 'onOpenChange',
+      description: 'Callback when the info box opens or closes',
+    },
+  },
+} satisfies Meta<typeof InfoBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: <p>This is helpful information about this feature.</p>,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic info box with simple text content. Click the info icon to open.',
+      },
+    },
+  },
+};
+
+export const WithTitle: Story = {
+  args: {
+    title: 'Important Information',
+    children: (
+      <div className="space-y-2">
+        <p>Here are some key points to remember:</p>
+
+        <ul className="list-disc list-inside text-sm">
+          <li>Point one</li>
+
+          <li>Point two</li>
+
+          <li>Point three</li>
+        </ul>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Info box with a title header for more structured content.',
+      },
+    },
+  },
+};
+
+export const DefaultOpen: Story = {
+  args: {
+    title: 'Getting Started',
+    defaultOpen: true,
+    children: <p>This info box starts open by default.</p>,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Info box that starts in the open state.',
+      },
+    },
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    title: 'Detailed Information',
+    maxWidth: '400px',
+    children: (
+      <div className="space-y-2 max-h-48 overflow-y-auto">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua.
+        </p>
+
+        <p>
+          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.
+        </p>
+
+        <p>
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+          anim id est laborum.
+        </p>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Info box with longer scrollable content and custom max width.',
+      },
+    },
+  },
+};
+
+export const AllPositions: Story = {
+  args: {
+    children: null,
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'Demonstrates various placement options using Floating UI. The content will automatically adjust if there is not enough space.',
+      },
+    },
+  },
+  render: () => (
+    <div className="p-8 grid grid-cols-2 gap-8 h-screen">
+      <div className="flex items-start justify-start">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-600">bottom-start:</span>
+
+          <InfoBox title="Position Demo" placement="bottom-start">
+            <p>Prefers bottom-start placement.</p>
+          </InfoBox>
+        </div>
+      </div>
+
+      <div className="flex items-start justify-end">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-600">bottom-end:</span>
+
+          <InfoBox title="Position Demo" placement="bottom-end">
+            <p>Prefers bottom-end placement.</p>
+          </InfoBox>
+        </div>
+      </div>
+
+      <div className="flex items-end justify-start">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-600">top-start:</span>
+
+          <InfoBox title="Position Demo" placement="top-start">
+            <p>Prefers top-start placement.</p>
+          </InfoBox>
+        </div>
+      </div>
+
+      <div className="flex items-end justify-end">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-600">top-end:</span>
+
+          <InfoBox title="Position Demo" placement="top-end">
+            <p>Prefers top-end placement.</p>
+          </InfoBox>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const InCorners: Story = {
+  args: {
+    children: null,
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'Demonstrates auto-positioning when the info box is placed in different corners of the viewport. The info box automatically positions itself to stay visible.',
+      },
+    },
+  },
+  render: () => (
+    <div className="relative h-screen w-full">
+      <div className="absolute top-4 left-4 flex items-center gap-2">
+        <InfoBox>
+          <p>Auto-positioned from top-left corner. Should open to bottom-right.</p>
+        </InfoBox>
+
+        <span className="text-xs text-gray-500">Top-left corner</span>
+      </div>
+
+      <div className="absolute top-4 right-4 flex items-center gap-2">
+        <span className="text-xs text-gray-500">Top-right corner</span>
+
+        <InfoBox>
+          <p>Auto-positioned from top-right corner. Should open to bottom-left.</p>
+        </InfoBox>
+      </div>
+
+      <div className="absolute bottom-4 left-4 flex items-center gap-2">
+        <InfoBox>
+          <p>Auto-positioned from bottom-left corner. Should open to top-right.</p>
+        </InfoBox>
+
+        <span className="text-xs text-gray-500">Bottom-left corner</span>
+      </div>
+
+      <div className="absolute bottom-4 right-4 flex items-center gap-2">
+        <span className="text-xs text-gray-500">Bottom-right corner</span>
+
+        <InfoBox>
+          <p>Auto-positioned from bottom-right corner. Should open to top-left.</p>
+        </InfoBox>
+      </div>
+
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
+        <p className="text-gray-400 text-sm">
+          Click the info icons in each corner to see auto-positioning
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const WithInteractiveContent: Story = {
+  args: {
+    title: 'Take Action',
+    children: (
+      <div className="space-y-3">
+        <p className="text-sm">You can interact with elements inside:</p>
+
+        <input
+          type="text"
+          placeholder="Type something..."
+          className="w-full px-3 py-2 text-sm border border-gray-300 rounded focus:outline-none
+            focus:ring-2 focus:ring-blue-500"
+        />
+
+        <button
+          type="button"
+          className="w-full px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700
+            focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          Submit
+        </button>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Info box with interactive content (form elements). Focus is trapped within the info box when open.',
+      },
+    },
+  },
+};
+
+export const InlineWithText: Story = {
+  args: {
+    children: null,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Info box used inline with paragraph text to provide contextual information.',
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-md p-4">
+      <p className="text-sm leading-relaxed">
+        This is a paragraph with an inline info box{' '}
+        <span className="inline-flex align-middle mx-1">
+          <InfoBox triggerLabel="Learn more about this term">
+            <p>Additional context about the preceding text that helps explain the concept.</p>
+          </InfoBox>
+        </span>{' '}
+        that provides more context about a specific term or concept in the text.
+      </p>
+    </div>
+  ),
+};
+
+export const CustomTriggerLabel: Story = {
+  args: {
+    triggerLabel: 'Learn more about data privacy',
+    title: 'Data Privacy',
+    children: (
+      <div className="space-y-2 text-sm">
+        <p>Your data is handled securely and in accordance with our privacy policy.</p>
+
+        <a href="https://example.com" className="text-blue-600 hover:underline">
+          Read our full privacy policy
+        </a>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Info box with a custom trigger label for better accessibility context. Screen readers will announce the custom label.',
+      },
+    },
+  },
+};
+
+export const MultipleInfoBoxes: Story = {
+  args: {
+    children: null,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple info boxes can be used independently on the same page.',
+      },
+    },
+  },
+  render: () => (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium">Username</span>
+
+        <InfoBox triggerLabel="Username requirements">
+          <p className="text-sm">Username must be 3-20 characters and contain only letters.</p>
+        </InfoBox>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium">Password</span>
+
+        <InfoBox triggerLabel="Password requirements">
+          <div className="text-sm space-y-1">
+            <p>Password must contain:</p>
+
+            <ul className="list-disc list-inside">
+              <li>At least 8 characters</li>
+
+              <li>One uppercase letter</li>
+
+              <li>One number</li>
+            </ul>
+          </div>
+        </InfoBox>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium">Email</span>
+
+        <InfoBox triggerLabel="Why we need your email">
+          <p className="text-sm">We use your email for account recovery and important updates.</p>
+        </InfoBox>
+      </div>
+    </div>
+  ),
+};
+
+export const Accessibility: Story = {
+  args: {
+    children: null,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the accessibility features of the InfoBox component.',
+      },
+    },
+  },
+  render: () => (
+    <div className="space-y-6 max-w-md p-4">
+      <div className="bg-blue-50 border border-blue-200 rounded p-4">
+        <h3 className="font-bold text-blue-800 mb-2">Accessibility Features:</h3>
+
+        <ul className="list-disc list-inside space-y-1 text-blue-700 text-sm">
+          <li>Trigger button has aria-expanded and aria-haspopup</li>
+
+          <li>Content has role=&quot;dialog&quot; and aria-modal=&quot;true&quot;</li>
+
+          <li>Focus is trapped within the info box when open</li>
+
+          <li>Escape key closes the info box</li>
+
+          <li>Click outside closes the info box</li>
+
+          <li>Focus returns to trigger on close (via keyboard)</li>
+
+          <li>Title provides aria-labelledby relationship</li>
+        </ul>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <span className="text-sm">Try this accessible info box:</span>
+
+        <InfoBox title="Accessible Info Box" triggerLabel="Show accessibility information">
+          <div className="text-sm space-y-2">
+            <p>This info box demonstrates proper accessibility:</p>
+
+            <ul className="list-disc list-inside">
+              <li>Use Tab to navigate between elements</li>
+
+              <li>Press Escape to close</li>
+
+              <li>Click outside to close</li>
+            </ul>
+          </div>
+        </InfoBox>
+      </div>
+    </div>
+  ),
+};