@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Popover/Popover.stories.tsx

@@ -1,18 +1,90 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Popover, PopoverTrigger } from './Popover';
 import { Toggle } from '../Toggle/Toggle';
 import { Button } from '../Button/Button';
 
-const meta = {
+const meta: Meta<typeof Popover> = {
   title: 'Components/Popover',
   component: Popover,
   parameters: {
     layout: 'fullscreen',
     docs: {
       description: {
-        component:
-          'The Popover component displays floating content relative to a trigger element. It provides a flexible way to show additional information, actions, or controls without navigating away from the current context. Popovers support multiple positions, click or hover triggers, and can include rich interactive content.',
+        component: `
+# Popover
+
+## Overview
+
+Popover displays floating content relative to a trigger element. It provides a flexible way to show additional information, actions, or controls without navigating away from the current context. Popovers support multiple positions, click or hover triggers, and can include rich interactive content.
+
+## Features
+
+- Multiple position options (top, bottom, left, right, auto)
+- Click or hover triggers
+- Configurable delays and offsets
+- Click outside and escape key closing
+- Glass morphism effect
+- Rich content support
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Navigate and activate with keyboard
+- Screen reader: Popover content and purpose announced appropriately
+- ARIA support: Proper roles and properties for popover components
+- Focus management: Traps focus within the popover when open
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Popover 
+  position="top"
+  trigger="click"
+>
+  <PopoverTrigger>
+    <button>Trigger</button>
+  </PopoverTrigger>
+  <div>Popover content</div>
+</Popover>
+\`\`\`
+
+### With Configuration
+
+\`\`\`tsx
+<Popover 
+  position="right"
+  trigger="hover"
+  delay={200}
+  offset={10}
+>
+  <PopoverTrigger>
+    <button>Trigger</button>
+  </PopoverTrigger>
+  <div>Popover content</div>
+</Popover>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| position | 'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'auto' | 'top' | Position of the popover relative to the trigger |
+| trigger | 'click' \\| 'hover' | 'click' | How the popover is triggered |
+| delay | number | 0 | Delay in milliseconds before showing the popover |
+| offset | number | 12 | Offset distance from the trigger element |
+| defaultOpen | boolean | false | Whether the popover is initially open |
+| closeOnClickOutside | boolean | true | Whether to close the popover when clicking outside |
+| closeOnEscape | boolean | true | Whether to close the popover when pressing Escape key |
+| glass | boolean | false | Enable glass morphism effect |
+| className | string | - | Additional CSS classes for the component |
+        `,
       },
     },
   },
@@ -21,42 +93,79 @@ const meta = {
     position: {
       control: { type: 'select' },
       options: ['top', 'bottom', 'left', 'right', 'auto'],
-      defaultValue: 'top',
+      description: 'Position of the popover relative to the trigger',
+      table: {
+        type: { summary: '"top" | "bottom" | "left" | "right" | "auto"' },
+        defaultValue: { summary: 'top' },
+      },
     },
     trigger: {
       control: { type: 'select' },
       options: ['click', 'hover'],
-      defaultValue: 'click',
+      description: 'How the popover is triggered',
+      table: {
+        type: { summary: '"click" | "hover"' },
+        defaultValue: { summary: 'click' },
+      },
     },
     delay: {
       control: { type: 'number' },
-      defaultValue: 0,
+      description: 'Delay in milliseconds before showing the popover',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
     },
     offset: {
       control: { type: 'number' },
-      defaultValue: 12,
+      description: 'Offset distance from the trigger element',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '12' },
+      },
     },
     defaultOpen: {
       control: { type: 'boolean' },
-      defaultValue: false,
+      description: 'Whether the popover is initially open',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     closeOnClickOutside: {
       control: { type: 'boolean' },
-      defaultValue: true,
+      description: 'Whether to close the popover when clicking outside',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
     },
     closeOnEscape: {
       control: { type: 'boolean' },
-      defaultValue: true,
+      description: 'Whether to close the popover when pressing Escape key',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
     },
     className: {
       control: { type: 'text' },
+      description: 'Additional CSS classes for the component',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     glass: {
       control: { type: 'boolean' },
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
   },
-} satisfies Meta<typeof Popover>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -103,101 +212,125 @@ const InteractivePopover = (args: React.ComponentProps<typeof Popover>) => {
   );
 
   return (
-    <div
-      style={{ padding: '80px', display: 'flex', justifyContent: 'center', background: '#f5f5f5' }}
-    >
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '100px' }}>
       <Popover {...args} content={content}>
-        <PopoverTrigger trigger={args.trigger}>
-          <Button variant="primary" label="Open Popover" />
+        <PopoverTrigger>
+          <Button variant="primary">Open Popover</Button>
         </PopoverTrigger>
       </Popover>
     </div>
   );
 };
 
-export const Default: Story = {
-  render: args => <InteractivePopover {...args} />,
+export const BasicUsage: Story = {
+  render: args => <InteractivePopover {...args} content={undefined} />,
   args: {
     position: 'top',
     trigger: 'click',
-    offset: 12,
-    delay: 0,
-    defaultOpen: false,
     closeOnClickOutside: true,
     closeOnEscape: true,
-  } as any,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic popover with top position and click trigger.',
+      },
+    },
+  },
 };
 
-export const Hover: Story = {
-  render: args => <InteractivePopover {...args} />,
-  args: {
-    position: 'top',
-    trigger: 'hover',
-    offset: 12,
-    delay: 200,
-    defaultOpen: false,
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-  } as any,
-};
+export const AllPositions: Story = {
+  render: () => {
+    const content = <div style={{ padding: '20px' }}>Popover Content</div>;
 
-export const BottomPosition: Story = {
-  render: args => <InteractivePopover {...args} />,
-  args: {
-    position: 'bottom',
-    trigger: 'click',
-    offset: 12,
-    delay: 0,
-    defaultOpen: false,
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-  } as any,
-};
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          gap: '20px',
+          padding: '50px',
+          alignItems: 'center',
+          height: '300px',
+        }}
+      >
+        <Popover position="left" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Left</Button>
+          </PopoverTrigger>
+        </Popover>
 
-export const LeftPosition: Story = {
-  render: args => <InteractivePopover {...args} />,
-  args: {
-    position: 'left',
-    trigger: 'click',
-    offset: 12,
-    delay: 0,
-    defaultOpen: false,
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-  } as any,
-};
+        <Popover position="top" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Top</Button>
+          </PopoverTrigger>
+        </Popover>
 
-export const RightPosition: Story = {
-  render: args => <InteractivePopover {...args} />,
-  args: {
-    position: 'right',
-    trigger: 'click',
-    offset: 12,
-    delay: 0,
-    defaultOpen: false,
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-  } as any,
+        <Popover position="bottom" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Bottom</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover position="right" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Right</Button>
+          </PopoverTrigger>
+        </Popover>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'All available popover positions demonstrated.',
+      },
+    },
+  },
 };
 
-export const AutoPosition: Story = {
-  render: args => <InteractivePopover {...args} />,
+export const WithGlassEffect: Story = {
+  render: args => (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '100px',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '300px',
+      }}
+    >
+      <Popover
+        {...args}
+        content={<div style={{ padding: '20px' }}>Glass Effect Popover Content</div>}
+      >
+        <PopoverTrigger>
+          <Button variant="primary">Open Glass Popover</Button>
+        </PopoverTrigger>
+      </Popover>
+    </div>
+  ),
   args: {
-    position: 'auto',
+    position: 'top',
     trigger: 'click',
-    offset: 12,
-    delay: 0,
-    defaultOpen: true, // Open by default to showcase auto-positioning
+    glass: true,
     closeOnClickOutside: true,
     closeOnEscape: true,
-  } as any,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Popover with glass morphism effect applied.',
+      },
+    },
+  },
 };
 
 /**
  * Glass morphism popover example.
  */
 export const GlassPopover: Story = {
-  render: args => <InteractivePopover {...args} />,
+  render: args => <InteractivePopover {...args} content={undefined} />,
   args: {
     position: 'top',
     trigger: 'click',
@@ -227,7 +360,56 @@ export const GlassPopover: Story = {
  * Glass popover with custom settings.
  */
 export const GlassPopoverCustom: Story = {
-  render: args => <InteractivePopover {...args} />,
+  render: args => {
+    const selectOptions = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' },
+      { value: '4', label: 'Option 4' },
+    ];
+
+    const [selectedOption, setSelectedOption] = React.useState('1');
+    const [showInternalOnly, setShowInternalOnly] = React.useState(false);
+
+    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+      setSelectedOption(e.target.value);
+    };
+
+    const handleToggleChange = () => {
+      setShowInternalOnly(!showInternalOnly);
+    };
+
+    const content = (
+      <>
+        <div className="u-flex u-items-center u-gap-7">
+          <span className="u-text-nowrap">Sort by</span>
+          <div className="c-select">
+            <select value={selectedOption} onChange={handleSelectChange}>
+              {selectOptions.map(option => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="c-toggle" onClick={handleToggleChange}>
+          <div className="c-toggle__label">Show internal comments only</div>
+          <div className="c-toggle__switch"></div>
+        </div>
+      </>
+    );
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', padding: '100px' }}>
+        <Popover {...args} content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Open Popover</Button>
+          </PopoverTrigger>
+        </Popover>
+      </div>
+    );
+  },
   args: {
     position: 'top',
     trigger: 'click',
@@ -244,7 +426,7 @@ export const GlassPopoverCustom: Story = {
       cornerRadius: 16,
       mode: 'polar',
     } as any,
-  } as any,
+  },
   decorators: [
     Story => (
       <div
@@ -264,7 +446,56 @@ export const GlassPopoverCustom: Story = {
  * Glass popover with hover trigger.
  */
 export const GlassPopoverHover: Story = {
-  render: args => <InteractivePopover {...args} />,
+  render: args => {
+    const selectOptions = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' },
+      { value: '4', label: 'Option 4' },
+    ];
+
+    const [selectedOption, setSelectedOption] = React.useState('1');
+    const [showInternalOnly, setShowInternalOnly] = React.useState(false);
+
+    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+      setSelectedOption(e.target.value);
+    };
+
+    const handleToggleChange = () => {
+      setShowInternalOnly(!showInternalOnly);
+    };
+
+    const content = (
+      <>
+        <div className="u-flex u-items-center u-gap-7">
+          <span className="u-text-nowrap">Sort by</span>
+          <div className="c-select">
+            <select value={selectedOption} onChange={handleSelectChange}>
+              {selectOptions.map(option => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="c-toggle" onClick={handleToggleChange}>
+          <div className="c-toggle__label">Show internal comments only</div>
+          <div className="c-toggle__switch"></div>
+        </div>
+      </>
+    );
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', padding: '100px' }}>
+        <Popover {...args} content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Open Popover</Button>
+          </PopoverTrigger>
+        </Popover>
+      </div>
+    );
+  },
   args: {
     position: 'top',
     trigger: 'hover',
@@ -274,7 +505,7 @@ export const GlassPopoverHover: Story = {
     closeOnClickOutside: true,
     closeOnEscape: true,
     glass: true,
-  } as any,
+  },
   decorators: [
     Story => (
       <div
@@ -294,9 +525,48 @@ export const GlassPopoverHover: Story = {
  * Glass popover with different positions.
  */
 export const GlassPopoverPositions: Story = {
-  render: args => <InteractivePopover {...args} />,
+  render: args => {
+    const content = <div style={{ padding: '20px' }}>Popover Content</div>;
+
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          gap: '20px',
+          padding: '50px',
+          alignItems: 'center',
+          height: '300px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        }}
+      >
+        <Popover {...args} position="left" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Left</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover {...args} position="top" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Top</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover {...args} position="bottom" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Bottom</Button>
+          </PopoverTrigger>
+        </Popover>
+
+        <Popover {...args} position="right" content={content}>
+          <PopoverTrigger>
+            <Button variant="primary">Right</Button>
+          </PopoverTrigger>
+        </Popover>
+      </div>
+    );
+  },
   args: {
-    position: 'top',
     trigger: 'click',
     offset: 12,
     delay: 0,
@@ -304,18 +574,5 @@ export const GlassPopoverPositions: Story = {
     closeOnClickOutside: true,
     closeOnEscape: true,
     glass: true,
-  } as any,
-  decorators: [
-    Story => (
-      <div
-        style={{
-          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-          minHeight: '100vh',
-          padding: '2rem',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
+  },
 };

package/src/components/Popover/Popover.tsx

@@ -106,7 +106,10 @@ export const Popover: React.FC<PopoverProps> = ({
                 <div className="c-popover__content-inner">{content}</div>
               </div>
             )}
-            <div ref={arrowRef as React.RefObject<HTMLDivElement>} className="c-popover__arrow"></div>
+            <div
+              ref={arrowRef as React.RefObject<HTMLDivElement>}
+              className="c-popover__arrow"
+            ></div>
           </div>,
           document.body
         )}
@@ -119,43 +122,44 @@ export const Popover: React.FC<PopoverProps> = ({
  */
 export const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>(
   ({ children, trigger: triggerProp }, ref) => {
-  const { isOpen, setIsOpen, triggerRef, popoverId, triggerType } =
-    React.useContext(PopoverContext);
-
-  // Determine which trigger type to use - prop from PopoverTrigger or from context
-  const effectiveTrigger = triggerProp || triggerType;
-
-  // Handle trigger events
-  const handleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const handleMouseEnter = () => {
-    setIsOpen(true);
-  };
-
-  const handleMouseLeave = () => {
-    setIsOpen(false);
-  };
-
-  // Clone the children element with additional props
-  const child = React.Children.only(children) as React.ReactElement;
-
-  const triggerProps: any = {
-    ref: ref || triggerRef,
-    'aria-describedby': popoverId,
-    'aria-expanded': isOpen,
-  };
-
-  if (effectiveTrigger === 'click') {
-    triggerProps.onClick = handleClick;
-  } else if (effectiveTrigger === 'hover') {
-    triggerProps.onMouseEnter = handleMouseEnter;
-    triggerProps.onMouseLeave = handleMouseLeave;
+    const { isOpen, setIsOpen, triggerRef, popoverId, triggerType } =
+      React.useContext(PopoverContext);
+
+    // Determine which trigger type to use - prop from PopoverTrigger or from context
+    const effectiveTrigger = triggerProp || triggerType;
+
+    // Handle trigger events
+    const handleClick = () => {
+      setIsOpen(!isOpen);
+    };
+
+    const handleMouseEnter = () => {
+      setIsOpen(true);
+    };
+
+    const handleMouseLeave = () => {
+      setIsOpen(false);
+    };
+
+    // Clone the children element with additional props
+    const child = React.Children.only(children) as React.ReactElement;
+
+    const triggerProps: any = {
+      ref: ref || triggerRef,
+      'aria-describedby': popoverId,
+      'aria-expanded': isOpen,
+    };
+
+    if (effectiveTrigger === 'click') {
+      triggerProps.onClick = handleClick;
+    } else if (effectiveTrigger === 'hover') {
+      triggerProps.onMouseEnter = handleMouseEnter;
+      triggerProps.onMouseLeave = handleMouseLeave;
+    }
+
+    return React.cloneElement(child, triggerProps);
   }
-
-  return React.cloneElement(child, triggerProps);
-});
+);
 
 PopoverTrigger.displayName = 'PopoverTrigger';