@shohojdhara/atomix 0.1.30 → 0.2.2

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

@@ -0,0 +1,143 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { fn } from '@storybook/test';
+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' },
+    },
+  },
+} 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 | null>;
+  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/ProductReview/ProductReview.stories.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { ProductReview, ProductReviewProps } from './ProductReview';
+
+export default {
+  title: 'Components/ProductReview',
+  component: ProductReview,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Product review form for collecting user ratings and feedback',
+      },
+    },
+  },
+  argTypes: {
+    productName: { control: 'text' },
+    productImage: { control: 'text' },
+    initialRating: { control: { type: 'number', min: 0, max: 5, step: 0.5 } },
+    maxRating: { control: { type: 'number', min: 1, max: 10 } },
+    allowHalf: { control: 'boolean' },
+    ratingColor: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
+      },
+    },
+  },
+} as Meta<typeof ProductReview>;
+
+const Template: StoryFn<ProductReviewProps> = (args: ProductReviewProps) => (
+  <ProductReview {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  productName: 'Wireless Headphones',
+  productImage: 'https://via.placeholder.com/100',
+  initialRating: 0,
+  maxRating: 5,
+  allowHalf: true,
+  ratingColor: 'warning',
+  onSubmit: (rating: number, comment: string) => {
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+  },
+};
+
+export const WithInitialRating = Template.bind({});
+WithInitialRating.args = {
+  productName: 'Smart Watch',
+  productImage: 'https://via.placeholder.com/100',
+  initialRating: 4,
+  maxRating: 5,
+  allowHalf: true,
+  ratingColor: 'warning',
+  onSubmit: (rating: number, comment: string) => {
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+  },
+};
+
+export const WithoutImage = Template.bind({});
+WithoutImage.args = {
+  productName: 'Bluetooth Speaker',
+  initialRating: 0,
+  maxRating: 5,
+  allowHalf: true,
+  ratingColor: 'warning',
+  onSubmit: (rating: number, comment: string) => {
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+  },
+};
+
+export const CustomRatingScale = Template.bind({});
+CustomRatingScale.args = {
+  productName: 'Gaming Laptop',
+  productImage: 'https://via.placeholder.com/100',
+  initialRating: 0,
+  maxRating: 10,
+  allowHalf: false,
+  ratingColor: 'primary',
+  onSubmit: (rating: number, comment: string) => {
+    console.log('Rating:', rating);
+    console.log('Comment:', comment);
+  },
+};

package/src/components/ProductReview/ProductReview.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Rating } from '../Rating/Rating';
+import { Button } from '../Button/Button';
+import type { ThemeColor } from '../../lib/types/components';
+
+export interface ProductReviewProps {
+  /**
+   * Product name
+   */
+  productName: string;
+
+  /**
+   * Product image URL
+   */
+  productImage?: string;
+
+  /**
+   * Initial rating value (0-5)
+   */
+  initialRating?: number;
+
+  /**
+   * Maximum possible rating value
+   */
+  maxRating?: number;
+
+  /**
+   * Whether to allow half-star ratings
+   */
+  allowHalf?: boolean;
+
+  /**
+   * Color theme for the rating stars
+   */
+  ratingColor?: ThemeColor;
+
+  /**
+   * Callback when review is submitted
+   */
+  onSubmit?: (rating: number, comment: string) => void;
+
+  /**
+   * Additional CSS class
+   */
+  className?: string;
+}
+
+/**
+ * ProductReview component for collecting user ratings and feedback
+ */
+export const ProductReview: React.FC<ProductReviewProps> = ({
+  productName,
+  productImage,
+  initialRating = 0,
+  maxRating = 5,
+  allowHalf = true,
+  ratingColor = 'warning' as ThemeColor,
+  onSubmit,
+  className = '',
+}) => {
+  const [rating, setRating] = useState<number>(initialRating);
+  const [comment, setComment] = useState<string>('');
+  const [submitted, setSubmitted] = useState<boolean>(false);
+  const reviewRef = useRef<HTMLDivElement>(null);
+  const reviewInstance = useRef<any>(null);
+
+  useEffect(() => {
+    // Only run on client-side
+    if (typeof window === 'undefined' || !reviewRef.current) return undefined;
+
+    // Cleanup on unmount
+    return () => {
+      if (reviewInstance.current) {
+        reviewInstance.current.destroy();
+      }
+    };
+  }, [productName, productImage, initialRating, maxRating, allowHalf, ratingColor, onSubmit]);
+
+  const handleSubmit = (e: React.FormEvent): void => {
+    e.preventDefault();
+
+    if (onSubmit) {
+      onSubmit(rating, comment);
+    }
+
+    setSubmitted(true);
+  };
+
+  const containerClasses = ['c-product-review', className].filter(Boolean).join(' ');
+
+  if (submitted) {
+    return (
+      <div className={containerClasses} ref={reviewRef}>
+        <div className="c-product-review__success">
+          <h3>Thank you for your review!</h3>
+          <p>Your feedback helps us improve our products.</p>
+          <Button
+            variant="secondary"
+            label="Write another review"
+            onClick={() => {
+              setSubmitted(false);
+              setRating(0);
+              setComment('');
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={containerClasses} ref={reviewRef}>
+      <div className="c-product-review__header">
+        <h3 className="c-product-review__title">Review {productName}</h3>
+        {productImage && (
+          <div className="c-product-review__image-wrapper">
+            <img src={productImage} alt={productName} className="c-product-review__image" />
+          </div>
+        )}
+      </div>
+
+      <form className="c-product-review__form" onSubmit={handleSubmit}>
+        <div className="c-product-review__rating-container">
+          <label className="c-product-review__label">Your Rating</label>
+          <div className="c-rating-container">
+            <Rating
+              value={rating}
+              onChange={setRating}
+              allowHalf={allowHalf}
+              maxValue={maxRating}
+              size="lg"
+              color={ratingColor}
+            />
+            <span className="c-rating__value">
+              {rating > 0 ? rating.toFixed(1) : 'Select a rating'}
+            </span>
+          </div>
+        </div>
+
+        <div className="c-product-review__comment-container">
+          <label htmlFor="review-comment" className="c-product-review__label">
+            Your Review
+          </label>
+          <textarea
+            id="review-comment"
+            className="c-product-review__textarea"
+            value={comment}
+            onChange={e => setComment(e.target.value)}
+            placeholder="Share your experience with this product..."
+            rows={5}
+          />
+        </div>
+
+        <div className="c-product-review__actions">
+          <Button
+            variant="primary"
+            label="Submit Review"
+            disabled={rating === 0}
+            onClick={() => handleSubmit(new Event('click') as unknown as React.FormEvent)}
+          />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+ProductReview.displayName = 'ProductReview';
+
+export default ProductReview;

package/src/components/ProductReview/index.ts

@@ -0,0 +1,3 @@
+export { ProductReview } from './ProductReview';
+export { default } from './ProductReview';
+export type { ProductReviewProps } from './ProductReview';