@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,144 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,120 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-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 };