pixel-priya 0.0.1

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MenuOption from './MenuOption';
+import './MenuOption.scss';
+import React, { ReactNode, useRef } from 'react';
+import Icon from '../Icon';
+
+const meta: Meta<typeof MenuOption> = {
+  title: 'Components/MenuOption',
+  component: MenuOption,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    iconName: {
+      control: 'text',
+      description: 'Name of the icon to display in the button.',
+      defaultValue: 'more',
+    },
+    labelName: {
+      control: 'text',
+      description: 'Label text displayed beside the icon.',
+      defaultValue: 'Menu',
+    },
+    tooltipTitle: {
+      control: 'text',
+      description: 'Tooltip text displayed on hover.',
+      defaultValue: 'Select an option',
+    },
+    tooltipPlacement: {
+      control: {
+        type: 'select',
+        options: ['top', 'down', 'left', 'right'],
+      },
+      description: 'Placement of the tooltip relative to the button.',
+      defaultValue: 'top',
+    },
+    dropdownPlacement: {
+      control: {
+        type: 'select',
+        options: ['top', 'down', 'left', 'right'],
+      },
+      description: 'Placement of the dropdown menu relative to the button.',
+      defaultValue: 'down',
+    },
+  },
+};
+
+type Story = StoryObj<typeof MenuOption>;
+
+const options = [
+  {
+    label: (
+      <div>
+        hello <Icon name="edit" />
+      </div>
+    ),
+    value: 'opt1',
+    icon: 'success',
+  },
+  { label: 'Option 2', value: 'opt2', icon: 'success' },
+  {
+    label: 'Delete',
+    value: 'deleteOpt',
+    icon: 'delete',
+    iconColor: 'var(--delete-text-color)',
+  },
+];
+
+const handleOptionClick = (option: { label: string | ReactNode }) => {
+  alert(`Option clicked: ${option.label}`);
+};
+
+export const ControlledMenuOption: Story = {
+  args: {
+    iconName: 'more',
+    labelName: 'Controlled Menu',
+    tooltipTitle: 'Select an option',
+    dropdownPlacement: 'top',
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef} // Make sure targetRef is passed properly here
+          onOptionClick={handleOptionClick}
+          dropdownPlacement="left" // Dropdown placement for testing
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A controlled `MenuOption` with customizable tooltip and dropdown placement.',
+      },
+    },
+  },
+};
+
+export const MenuOptionTop: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'top',
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned above the button.',
+      },
+    },
+  },
+};
+
+export const MenuOptionBottom: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'down',
+  },
+  render: (args) => {
+    return (
+      <div id="more">
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={'more'}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned below the button.',
+      },
+    },
+  },
+};
+
+export const MenuOptionLeft: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'left',
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned to the left of the button.',
+      },
+    },
+  },
+};
+
+export const MenuOptionRight: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'right', // Proper dropdown placement
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef} // Properly pass ref to targetRef
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned to the right of the button.',
+      },
+    },
+  },
+};
+
+export default meta;

package/src/components/MenuOption/MenuOption.tsx

@@ -0,0 +1,222 @@
+import { useState, useRef, useContext, useEffect } from 'react';
+import './MenuOption.scss';
+import Icon from '../Icon';
+import classNames from 'classnames';
+import Tooltip from '../Tooltip';
+import {
+  OptionCardProps,
+  OptionProps,
+  MenuOptionProps,
+  OptionClick,
+} from './types';
+import Typography from '../Typography';
+import { createPortal } from 'react-dom';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import useClickOutside from '../../hooks/useClickOutside';
+
+const Option = ({ option, onClick }: OptionProps) => (
+  <div
+    className={classNames('ff-options', {
+      'ff-disable-option': option.disable,
+    })}
+    onClick={() => !option.disable && onClick(option)}
+  >
+    {option.icon && (
+      <Icon
+        name={option.icon}
+        color={option.iconColor}
+        height={16}
+        width={16}
+      />
+    )}
+    <Typography
+      as="label"
+      lineHeight="18px"
+      color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
+    >
+      {option.label}
+    </Typography>
+  </div>
+);
+
+const OptionCard = ({
+  options,
+  onClick,
+  menuPosition,
+  menuRef,
+  closeDropdown,
+  zIndex,
+  dropdownPlacement,
+  variant,
+}: OptionCardProps) => {
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  const [optionsHeight, setOptionsHeight] = useState(0);
+  const [optionsWidth, setOptionsWidth] = useState(0);
+  const optionCardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (optionCardRef?.current) {
+      const rect = optionCardRef?.current?.getBoundingClientRect();
+      setOptionsHeight(rect?.height);
+      setOptionsWidth(rect?.width);
+    }
+  }, []);
+
+  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
+
+  const style = (() => {
+    switch (dropdownPlacement) {
+      case 'top':
+        return {
+          top: menuPosition.top - optionsHeight - 7,
+          left: menuPosition.left - 4,
+        };
+      case 'down':
+        return {
+          top: menuPosition.top + 20,
+          left: menuPosition.left - 4,
+        };
+      case 'left':
+        return {
+          top: menuPosition.top - 4,
+          left: menuPosition.left - optionsWidth - 8,
+        };
+      case 'right':
+        return {
+          top: menuPosition.top - 4,
+          left: menuPosition.left + 20,
+        };
+      default:
+        return {
+          top: menuPosition.bottom,
+          left: menuPosition.rightSpaceAvailable + 12,
+        };
+    }
+  })();
+
+  return createPortal(
+    <div
+      className={classNames(
+        'ff-option-card',
+        [{ 'ff-option-card--primary': variant === 'primary' }],
+        currentTheme
+      )}
+      style={{ ...style, zIndex }}
+      ref={optionCardRef}
+    >
+      {options.map((opt) => (
+        <Option key={opt.value} option={opt} onClick={onClick} />
+      ))}
+    </div>,
+    document.body
+  );
+};
+
+const MenuOption = ({
+  labelName,
+  iconName,
+  tooltipTitle,
+  tooltipPlacement = 'bottom',
+  options = [],
+  onClick = () => {},
+  onOptionClick = () => {},
+  iconButtonSize = 20,
+  iconButtonBorderRadius = 7,
+  iconSize = 16,
+  variant = 'light',
+  zIndex = 99,
+  dropdownPlacement = 'down',
+  optionCardVariant,
+  targetRef,
+}: MenuOptionProps) => {
+  const [isClicked, setIsClicked] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [menuPosition, setMenuPosition] = useState({
+    top: 0,
+    left: 0,
+    height: 0,
+    right: 0,
+  });
+
+  const closeDropDown = () => setIsClicked(false);
+
+  const onIconClickHandler = () => {
+    onClick();
+    calculateDims();
+    setIsClicked((prev) => !prev);
+  };
+
+  const handleOptionClick = (option: OptionClick) => {
+    onOptionClick(option);
+    closeDropDown();
+  };
+
+  const calculateDims = () => {
+    let targetElement: HTMLElement | null = null;
+    if (typeof targetRef === 'string') {
+      targetElement = document.getElementById(targetRef);
+    } else if (targetRef && targetRef.current) {
+      targetElement = targetRef.current;
+    }
+
+    if (targetElement) {
+      const rect = targetElement.getBoundingClientRect();
+      setMenuPosition({
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+        height: rect.height,
+        right: rect.right,
+      });
+    }
+  };
+
+  return (
+    <div className="ff-menu-option-container" ref={menuRef}>
+      <Tooltip title={tooltipTitle} placement={tooltipPlacement}>
+        <div className="ff-icon-label">
+          <div
+            className={classNames('ff-menuicon-container', {
+              'ff-menuicon-container-clicked': isClicked,
+              dark: variant === 'dark',
+            })}
+            onClick={onIconClickHandler}
+            style={{
+              width: `${iconButtonSize}px`,
+              height: `${iconButtonSize}px`,
+              borderRadius: `${iconButtonBorderRadius}px`,
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Icon
+              height={iconSize}
+              width={iconSize}
+              name={iconName}
+              color={
+                isClicked === (variant === 'dark')
+                  ? 'var(--menu-option-icon-clicked)'
+                  : 'var(--menu-option-icon-color)'
+              }
+            />
+          </div>
+          {labelName && <Typography as="label">{labelName}</Typography>}
+        </div>
+      </Tooltip>
+      {isClicked && (
+        <OptionCard
+          options={options}
+          onClick={handleOptionClick}
+          menuPosition={menuPosition}
+          menuRef={menuRef}
+          closeDropdown={closeDropDown}
+          zIndex={zIndex}
+          dropdownPlacement={dropdownPlacement}
+          variant={optionCardVariant}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MenuOption;

package/src/components/MenuOption/index.ts

@@ -0,0 +1 @@
+export { default } from './MenuOption';

package/src/components/MenuOption/types.ts

@@ -0,0 +1,231 @@
+import { ReactNode } from 'react';
+
+interface OptionClick {
+  /**
+   * The label displayed for the option.
+   * @type {string}
+   * @required
+   */
+  label: string | ReactNode;
+
+  /**
+   * The value(s) associated with the option, which can be a single string or an array of strings.
+   * @type {Array<string> | string}
+   * @required
+   */
+  value: any;
+}
+
+interface OptionType extends OptionClick {
+  /**
+   * The name of the icon associated with the option.
+   * @type {string}
+   * @optional
+   */
+  icon?: string;
+
+  iconColor?: string;
+
+  name?: string | ReactNode;
+
+  /**
+   * Indicates whether the option is disabled.
+   * @type {boolean}
+   * @optional
+   */
+  disable?: boolean;
+}
+
+interface OptionCardProps {
+  /**
+   * The list of options displayed in the card.
+   * @type {Array<OptionType>}
+   * @required
+   */
+  options: Array<OptionType>;
+
+  /**
+   * Callback function triggered when an option is clicked.
+   * @param {OptionClick} data - The data associated with the clicked option.
+   * @type {function}
+   * @required
+   */
+  onClick: (data: OptionClick) => void;
+
+  /**
+   * Optional styles applied to the card.
+   * @type {React.CSSProperties}
+   * @optional
+   */
+  styles?: React.CSSProperties;
+
+  /**
+   * The z-index of the option card.
+   * @type {number}
+   * @optional
+   */
+  zIndex?: number;
+
+  /**
+   * The position of the menu relative to the triggering element.
+   * @type {dropdownPosition}
+   * @required
+   */
+  menuPosition: any;
+
+  /**
+   * Reference to the menu DOM element.
+   * @type {React.RefObject<HTMLElement>}
+   * @required
+   */
+  menuRef: React.RefObject<HTMLElement>;
+
+  /**
+   * Callback function to close the dropdown.
+   * @type {() => void}
+   * @required
+   */
+  closeDropdown: () => void;
+
+  /**
+   * Placement of the dropdown menu relative to the icon.
+   * @type {dropdownPosition}
+   * @optional
+   */
+  dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
+  /**
+   * Variant for backgroung color of options card.
+   * @type {string}
+   * @optional
+   */
+  variant?: 'primary';
+}
+
+interface MenuOptionProps {
+  /**
+   * The name of the label displayed next to the icon.
+   * @type {string}
+   * @optional
+   */
+  labelName?: string;
+
+  /**
+   * The name of the icon to be displayed.
+   * @type {string}
+   * @required
+   */
+  iconName: string;
+
+  /**
+   * The list of options available in the dropdown.
+   * @type {Array<OptionType>}
+   * @required
+   */
+  options: Array<OptionType>;
+
+  /**
+   * The title displayed in the tooltip when hovering over the icon.
+   * @type {string}
+   * @optional
+   */
+  tooltipTitle?: string;
+
+  /**
+   * The placement of the tooltip relative to the icon.
+   * @type {'bottom' | 'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'}
+   * @optional
+   */
+  tooltipPlacement?:
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end';
+
+  /**
+   * The placement of the dropdown menu relative to the icon.
+   * @type {dropdownPosition}
+   * @optional
+   */
+  dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
+
+  /**
+   * The variant of the menu option, either 'dark' or 'light'.
+   * @type {'dark' | 'light'}
+   * @default 'light'
+   * @optional
+   */
+  variant?: 'dark' | 'light';
+
+  /**
+   * Callback function triggered when the icon is clicked.
+   * @type {() => void}
+   * @optional
+   */
+  onClick?: () => void;
+
+  /**
+   * Callback function triggered when an option is clicked.
+   * @param {OptionClick} option - The option that was clicked.
+   * @type {(option: OptionClick) => void}
+   * @optional
+   */
+  onOptionClick?: (option: OptionClick) => void;
+
+  /**
+   * The size of the icon button.
+   * @type {number}
+   * @default 20
+   */
+  iconButtonSize?: number;
+
+  /**
+   * The size of the icon.
+   * @type {number}
+   * @default 16
+   */
+  iconSize?: number;
+
+  /**
+   * The border radius of the icon button.
+   * @type {number}
+   * @default 7
+   */
+  iconButtonBorderRadius?: number;
+
+  /**
+   * Providing z-index for the options card.
+   * @type {number}
+   * @optional
+   */
+  zIndex?: number;
+  /**
+   * Variant for backgroung color of options card.
+   * @type {string}
+   * @optional
+   */
+  optionCardVariant?: 'primary';
+  targetRef?: string | React.RefObject<HTMLElement>;
+}
+
+interface OptionProps {
+  /**
+   * The option to be displayed.
+   * @type {OptionType}
+   * @required
+   */
+  option: OptionType;
+
+  /**
+   * Callback function triggered when the option is clicked.
+   * @param {OptionClick} option - The clicked option.
+   * @type {(option: OptionClick) => void}
+   * @required
+   */
+  onClick: (option: OptionClick) => void;
+}
+
+export { OptionProps, MenuOptionProps, OptionCardProps, OptionClick };