@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,143 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Popover, PopoverTrigger } from './Popover';
+import { Toggle } from '../Toggle/Toggle';
+import { Button } from '../Button/Button';
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+  argTypes: {
+    position: {
+      control: { type: 'select' },
+      options: ['top', 'bottom', 'left', 'right', 'auto'],
+      defaultValue: 'top',
+    },
+    trigger: {
+      control: { type: 'select' },
+      options: ['click', 'hover'],
+      defaultValue: 'click',
+    },
+    delay: {
+      control: { type: 'number' },
+      defaultValue: 0,
+    },
+    offset: {
+      control: { type: 'number' },
+      defaultValue: 12,
+    },
+    defaultOpen: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    closeOnClickOutside: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+    closeOnEscape: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+    className: {
+      control: { type: 'text' },
+    },
+    onOpenChange: { action: 'openChange' },
+  },
+} as Meta<typeof Popover>;
+
+// Default template
+const Template: StoryFn<typeof Popover> = 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-d-flex u-align-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={{ padding: '80px', display: 'flex', justifyContent: 'center', background: '#f5f5f5' }}
+    >
+      <Popover {...args} content={content}>
+        <PopoverTrigger trigger={args.trigger}>
+          <Button variant="primary" label="Open Popover" />
+        </PopoverTrigger>
+      </Popover>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  position: 'top',
+  trigger: 'click',
+  offset: 12,
+  delay: 0,
+  defaultOpen: false,
+  closeOnClickOutside: true,
+  closeOnEscape: true,
+};
+
+export const Hover = Template.bind({});
+Hover.args = {
+  ...Default.args,
+  trigger: 'hover',
+  delay: 200,
+};
+
+export const BottomPosition = Template.bind({});
+BottomPosition.args = {
+  ...Default.args,
+  position: 'bottom',
+};
+
+export const LeftPosition = Template.bind({});
+LeftPosition.args = {
+  ...Default.args,
+  position: 'left',
+};
+
+export const RightPosition = Template.bind({});
+RightPosition.args = {
+  ...Default.args,
+  position: 'right',
+};
+
+export const AutoPosition = Template.bind({});
+AutoPosition.args = {
+  ...Default.args,
+  position: 'auto',
+  defaultOpen: true, // Open by default to showcase auto-positioning
+};

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,137 @@
+import React, { ReactNode, forwardRef, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { POPOVER } from '../../lib/constants/components';
+import { usePopover } from '../../lib/composables/usePopover';
+import type { PopoverProps, PopoverTriggerProps } from '../../lib/types/components';
+
+// Context to share popover state between components
+export const PopoverContext = createContext<{
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  triggerRef: React.RefObject<HTMLElement>;
+  popoverId: string;
+  triggerType: 'click' | 'hover';
+}>({
+  isOpen: false,
+  setIsOpen: () => {},
+  triggerRef: { current: null },
+  popoverId: '',
+  triggerType: 'click',
+});
+
+/**
+ * Popover component for displaying floating content
+ */
+export const Popover: React.FC<PopoverProps> = ({
+  content,
+  position = 'top',
+  trigger = 'click',
+  className = '',
+  delay = 0,
+  offset = 12,
+  defaultOpen = false,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  id,
+  children,
+}) => {
+  const {
+    isOpen,
+    setIsOpen,
+    triggerRef,
+    popoverRef,
+    arrowRef,
+    popoverId,
+    currentPosition,
+    updatePosition,
+  } = usePopover({
+    position,
+    trigger,
+    offset,
+    delay,
+    defaultOpen,
+    isOpen: controlledIsOpen,
+    onOpenChange,
+    closeOnClickOutside,
+    closeOnEscape,
+    id,
+  });
+
+  return (
+    <PopoverContext.Provider
+      value={{ isOpen, setIsOpen, triggerRef, popoverId, triggerType: trigger }}
+    >
+      {children}
+
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            ref={popoverRef}
+            className={`c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ''} ${className}`}
+            id={popoverId}
+            role="tooltip"
+            aria-hidden={!isOpen}
+          >
+            <div className="c-popover__content">
+              <div className="c-popover__content-inner">{content}</div>
+            </div>
+            <div ref={arrowRef} className="c-popover__arrow"></div>
+          </div>,
+          document.body
+        )}
+    </PopoverContext.Provider>
+  );
+};
+
+/**
+ * PopoverTrigger component to wrap the element that triggers the popover
+ */
+export const PopoverTrigger: React.FC<PopoverTriggerProps> = 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;
+  }
+
+  return React.cloneElement(child, triggerProps);
+});
+
+export type { PopoverProps, PopoverTriggerProps };
+
+Popover.displayName = 'Popover';
+
+export default Popover;

package/src/components/Popover/index.ts

@@ -0,0 +1,5 @@
+import { Popover, PopoverTrigger } from './Popover';
+import type { PopoverProps, PopoverTriggerProps } from '../../lib/types/components';
+
+export { Popover, PopoverTrigger };
+export type { PopoverProps, PopoverTriggerProps };

package/src/components/Popover/readme.md

@@ -0,0 +1,120 @@
+# Popover Component
+
+The Popover component displays floating content next to a trigger element. It's fully implemented with both React and vanilla JavaScript support, following the Atomix design system standards.
+
+## Features
+
+- Separate trigger and content components with a context-based system
+- Support for both click and hover interactions
+- Five positioning options (top, bottom, left, right, auto) with intelligent positioning
+- Automatic repositioning based on available space
+- Fully accessible with proper ARIA attributes
+- Both controlled and uncontrolled usage modes
+- Simple API for customization
+- Automatic handling of window resize and scrolling
+- Vanilla JS implementation for non-React projects
+
+## React Usage
+
+### Basic usage:
+
+```jsx
+import { Popover, PopoverTrigger } from './components/Popover';
+
+<Popover content={<div>Popover content</div>} position="top">
+  <PopoverTrigger>
+    <button className="c-btn">Open Popover</button>
+  </PopoverTrigger>
+</Popover>
+```
+
+### Controlled usage:
+
+```jsx
+const [isOpen, setIsOpen] = useState(false);
+
+<Popover 
+  content={<div>Controlled popover</div>}
+  isOpen={isOpen}
+  onOpenChange={setIsOpen}
+>
+  <PopoverTrigger>
+    <button className="c-btn">Toggle Popover</button>
+  </PopoverTrigger>
+</Popover>
+```
+
+### Auto-position usage:
+
+```jsx
+<Popover 
+  content={<div>This popover will position itself optimally</div>}
+  position="auto"
+>
+  <PopoverTrigger>
+    <button className="c-btn">Auto-positioning Popover</button>
+  </PopoverTrigger>
+</Popover>
+```
+
+## Vanilla JavaScript Usage
+
+The Popover component can also be used with HTML and vanilla JavaScript:
+
+```html
+<!-- Popover trigger -->
+<button data-popover-id="my-popover" data-popover-trigger="click">
+  Open Popover
+</button>
+
+<!-- Popover content -->
+<div id="my-popover" class="js-atomix-popover" data-popover-position="auto">
+  <div class="c-popover__content">
+    <div class="c-popover__content-inner">
+      Popover content goes here
+    </div>
+  </div>
+</div>
+```
+
+### JavaScript Initialization:
+
+The popovers are automatically initialized on page load, but you can also initialize them manually:
+
+```js
+import { initPopovers } from './components/Popover/scripts';
+
+// Initialize all popovers
+initPopovers();
+
+// Or create a specific popover instance
+import Popover from './components/Popover/scripts';
+
+const element = document.getElementById('my-popover');
+const popover = new Popover(element, {
+  position: 'auto',
+  trigger: 'click',
+  offset: 12,
+  delay: 0
+});
+
+// Control programmatically
+popover.open();
+popover.close();
+popover.toggle();
+popover.destroy(); // Clean up event listeners
+```
+
+## Configuration Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| position | 'top', 'bottom', 'left', 'right', 'auto' | 'top' | The position of the popover relative to the trigger |
+| trigger | 'click', 'hover' | 'click' | How the popover is triggered |
+| offset | number | 12 | Offset from the trigger element (in pixels) |
+| delay | number | 0 | Delay before showing the popover (in milliseconds) |
+| defaultOpen | boolean | false | Whether the popover should be open initially (React only) |
+| isOpen | boolean | undefined | Controlled state of the popover (React only) |
+| onOpenChange | function | undefined | Callback when the popover open state changes (React only) |
+| closeOnClickOutside | boolean | true | Whether to close the popover when clicking outside (React only) |
+| closeOnEscape | boolean | true | Whether to close the popover when pressing escape key (React only) |

package/src/components/Popover/scripts/bundle.ts

@@ -0,0 +1,12 @@
+import Popover, { initPopovers } from './index';
+import { PopoverPosition, PopoverOptions } from './componentInteractions';
+
+// Export for global use
+if (typeof window !== 'undefined') {
+  (window as any).Atomix = (window as any).Atomix || {};
+  (window as any).Atomix.Popover = Popover;
+  (window as any).Atomix.initPopovers = initPopovers;
+}
+
+export { Popover, initPopovers };
+export type { PopoverPosition, PopoverOptions };