pixel-react-excel-sheet 1.2.0

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

@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MenuOption from './MenuOption';
+import './MenuOption.scss';
+
+export const DefaultMenuOption: Story = {
+  args: {
+    iconName: 'more',
+    options: [
+      {
+        label: 'StepGroup',
+        icon: 'success',
+        value: [],
+        disable: true,
+      },
+      {
+        label: 'Script',
+        value: ['SCR101', 'SCR102'],
+        icon: 'success',
+      },
+      {
+        label: 'Script',
+        value: ['SCR101', 'SCR102'],
+        icon: 'success',
+      },
+      {
+        label: 'Script',
+        value: ['SCR101', 'SCR102'],
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+const meta: Meta<typeof MenuOption> = {
+  title: 'Components/MenuOption',
+  component: MenuOption,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    iconName: {
+      control: 'text',
+      defaultValue: 'more',
+    },
+    labelName: {
+      control: 'text',
+      defaultValue: 'Controlled Menu',
+    },
+    tooltipTitle: {
+      control: 'text',
+      defaultValue: 'Select an option',
+    },
+    tooltipPlacement: {
+      control: {
+        type: 'select',
+        options: ['top', 'bottom', 'left', 'right'],
+      },
+      defaultValue: 'top',
+    },
+    dropdownPlacement: {
+      control: {
+        type: 'select',
+        options: ['top', 'bottom', 'left', 'right'],
+      },
+      defaultValue: 'bottom',
+    },
+  },
+};
+
+type Story = StoryObj<typeof MenuOption>;
+
+export const ControlledMenuOption: Story = {
+  render: (args) => {
+    const options = [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+      {
+        label: 'Delete option',
+        value: 'deleteOpt',
+        icon: 'delete',
+      },
+    ];
+
+    return (
+      <MenuOption
+        iconName={args.iconName}
+        labelName={args.labelName}
+        options={options}
+        tooltipTitle={args.tooltipTitle}
+        tooltipPlacement={args.tooltipPlacement}
+        dropdownPlacement={args.dropdownPlacement}
+      />
+    );
+  },
+};
+
+// Story for MenuOption with label
+export const MenuOptionWithLabel: Story = {
+  args: {
+    labelName: 'more',
+    iconName: 'more',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with disabled hover effect
+export const MenuOptionWithDisabledHoverEffect: Story = {
+  render: () => {
+    const options = [
+      {
+        label: 'StepGroup',
+        icon: 'success',
+        value: [],
+        disable: true,
+      },
+      {
+        label: 'Script',
+        value: ['SCR101', 'SCR102'],
+        icon: 'success',
+      },
+    ];
+    return (
+      <MenuOption
+        iconName="more"
+        tooltipTitle="more options"
+        tooltipPlacement="top"
+        dropdownPlacement="right"
+        options={options}
+      />
+    );
+  },
+};
+
+// Story for MenuOption with tooltip
+export const MenuOptionWithToolTip: Story = {
+  args: {
+    labelName: 'ImpactList',
+    iconName: 'success',
+    tooltipTitle: 'More Info',
+    tooltipPlacement: 'bottom',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with 'top' placement
+export const MenuOptionPlacementTop: Story = {
+  args: {
+    iconName: 'more',
+    labelName: 'Top Placement',
+    dropdownPlacement: 'top',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with 'down' placement
+export const MenuOptionPlacementDown: Story = {
+  args: {
+    iconName: 'more',
+    labelName: ' Placement',
+    dropdownPlacement: 'down',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with 'left' placement
+export const MenuOptionPlacementLeft: Story = {
+  args: {
+    iconName: 'more',
+    labelName: 'Left Placement',
+    dropdownPlacement: 'left',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'delete',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+// Story for MenuOption with 'right' placement
+export const MenuOptionPlacementRight: Story = {
+  args: {
+    iconName: 'more',
+    dropdownPlacement: 'right',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+
+export const MenuOptionCustom: Story = {
+  args: {
+    iconName: 'more',
+    dropdownPlacement: 'bottom',
+    variant:'dark',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
+export default meta;

package/src/components/MenuOption/MenuOption.tsx

@@ -0,0 +1,128 @@
+import { useState, useRef } 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 useClickOutside from '../../hooks/useClickOutside';
+import Typography from '../Typography';
+
+const Option = ({ option, onClick }: OptionProps) => (
+  <div
+    className={classNames('ff-options', {
+      'ff-disable-option': option.disable,
+    })}
+    onClick={() => !option.disable && onClick(option)}
+  >
+    <Icon name={option.icon} height={16} width={16} />
+    <Typography
+      as="label"
+      color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
+    >
+      {option.label}
+    </Typography>
+  </div>
+);
+
+const OptionCard = ({ options, onClick, styles }: OptionCardProps) => {
+  return (
+    <div className="ff-option-card" style={styles}>
+      {options.map((opt) => (
+        <Option key={opt.label} option={opt} onClick={onClick} />
+      ))}
+    </div>
+  );
+};
+
+const MenuOption = ({
+  labelName,
+  iconName,
+  tooltipTitle,
+  tooltipPlacement = 'bottom',
+  options = [],
+  dropdownPlacement = 'down',
+  onClick = () => {},
+  onOptionClick = () => {},
+  iconButtonSize = 20,
+  iconButtonBorderRadius = 7,
+  iconSize = 16,
+  variant = 'light',
+}: MenuOptionProps) => {
+  const [isClicked, setIsClicked] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const closeDropDown = () => setIsClicked(false);
+
+  const onIconClickHandler = () => {
+    onClick();
+    setIsClicked((prev) => !prev);
+  };
+
+  const handleOptionClick = (option: OptionClick) => {
+    onOptionClick(option);
+    closeDropDown();
+  };
+
+  const dropdownPositionStyles = () => {
+    switch (dropdownPlacement) {
+      case 'top':
+        return { bottom: '100%', left: -2 };
+      case 'left':
+        return { top: -2, right: '100%' };
+      case 'right':
+        return { top: -2, left: '100%' };
+      case 'down':
+      default:
+        return { top: '100%', left: -2 };
+    }
+  };
+
+  useClickOutside(menuRef, closeDropDown);
+
+  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`,
+            }}
+          >
+            <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}
+          styles={dropdownPositionStyles()}
+        />
+      )}
+    </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,170 @@
+interface OptionClick {
+  /**
+   * The label displayed for the option.
+   * @type {string}
+   * @required
+   */
+  label: string;
+
+  /**
+   * The value(s) associated with the option, which can be a single string or an array of strings.
+   * @type {Array<string> | string}
+   * @required
+   */
+  value: Array<string> | string;
+}
+
+interface OptionType extends OptionClick {
+  /**
+   * The name of the icon associated with the option.
+   * @type {string}
+   * @required
+   */
+  icon: string;
+
+  /**
+   * 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 {any} data - The data associated with the clicked option.
+   * @type {function}
+   * @required
+   */
+  onClick: (data?: any) => void;
+
+  /**
+   * Optional styles applied to the card.
+   * @type {React.CSSProperties}
+   * @optional
+   */
+  styles?: React.CSSProperties;
+}
+
+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 {'top' | 'left' | 'right' | 'bottom'}
+   * @optional
+   */
+  dropdownPlacement?: string | 'top' | 'left' | 'right' | 'down';
+
+  /**
+   * Callback function triggered when the icon is clicked.
+   * @type {function}
+   * @optional
+   */
+
+  variant?: 'dark' | 'light';
+  /**
+   * The variant of the menu option, either 'dark' or 'light'.
+   * @type {'dark' | 'light'}
+   * @default 'light'
+   * @optional
+   */
+
+  onClick?: () => void;
+
+  /**
+   * Callback function triggered when an option is clicked.
+   * @param {OptionClick} option - The option that was clicked.
+   * @type {function}
+   * @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.
+   * @type {number}
+   * @default 7
+   */
+  iconButtonBorderRadius?: number;
+}
+
+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 {function}
+   * @required
+   */
+  onClick: (option: OptionClick) => void;
+}
+
+export { OptionProps, MenuOptionProps, OptionCardProps, OptionClick };