pixel-react 1.10.15 → 1.10.16

package/src/components/Accordion/types.ts

@@ -1,52 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface AccordionProps {
-  /**
-   * Accordion Header Title
-   */
-  headerTitle: string | JSX.Element;
-  /**
-   * Content that to be shown while Accordion is expanded
-   */
-  accordionContent: ReactNode;
-  /**
-   * Custom color for the Accordion header
-   */
-  color?: string;
-  /**
-   * Minimum height for the Accordion
-   */
-  minHeight?: string;
-  /**
-   * Property to disable accordion
-   */
-  disable?: boolean;
-  /**
-   * Info message to user for disabling accordion
-   */
-  disableInfoMessage?: string;
-  /**
-   * Icon name for the Accordion state like expand and collapse
-   */
-  accordionStateIconName?: string;
-  /**
-   * Accordion collapse and expand Icon width
-   */
-  AccordionStateIconWidth: number; // Allow string or number for icon size
-  /**
-   * Accordion collapse and expand Icon height
-   */
-  AccordionStateIconHeight: number; // Allow string or number for icon size
-  /**
-   * Optional props for initial state of Accordion
-   */
-  isExpand?: boolean;
-  /**
-   * Callback function for the accordion header click
-   */
-  onClick?: () => void; // onClick handler for accordion header
-  /**
-   * Providing className for Styles
-   */
-  className?: string;
-}

package/src/components/AddResourceButton/AddResourceButton.stories.tsx

@@ -1,142 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AddResourceButton from './AddResourceButton';
-import { AddResourceButtonProps } from './type';
-import { ReactNode } from 'react';
-
-const meta: Meta<typeof AddResourceButton> = {
-  title: 'Components/AddResourceButton',
-  component: AddResourceButton,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-type Story = StoryObj<typeof AddResourceButton>;
-
-export const Default: Story = {
-  args: {
-    directionalArrow: [
-      {
-        direction: 'right',
-        menuOptions: [
-          {
-            label: 'Sub Module',
-            value: 'sub_module_sibling',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-    ],
-    onMenuOptionClick: (option: { label: string | ReactNode; value: any }) => {
-      alert(`Option clicked: ${option.label}, Value: ${option.value}`);
-    },
-  } as AddResourceButtonProps,
-};
-
-export const TwoArrowsButtons: Story = {
-  args: {
-    directionalArrow: [
-      {
-        direction: 'top',
-        menuOptions: [
-          {
-            label: 'Add Module',
-            value: 'add_module_top',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-      {
-        direction: 'right',
-        menuOptions: [
-          {
-            label: 'Add Sub Module',
-            value: 'add_sub_module_sibling',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-    ],
-    onMenuOptionClick: (option: { label: string | ReactNode; value: any }) => {
-      alert(`Option clicked: ${option.label}, Value: ${option.value}`);
-    },
-  } as AddResourceButtonProps,
-};
-
-export const ThreeArrowsButton: Story = {
-  args: {
-    directionalArrow: [
-      {
-        direction: 'top',
-        menuOptions: [
-          {
-            label: 'Module',
-            value: 'add_module_top',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-      {
-        direction: 'right',
-        menuOptions: [
-          {
-            label: 'Sub Module',
-            value: 'add_module_sibling',
-            icon: 'module_icon',
-            disable: false,
-          },
-          {
-            label: 'Automation Script',
-            value: 'add_Automation_script_sibling',
-            icon: 'automation_testcase',
-            disable: false,
-          },
-          {
-            label: 'Manual Test Case',
-            value: 'add_manual_test_case_sibling',
-            icon: 'manual_testcase',
-            disable: false,
-          },
-          {
-            label: 'Pre / Post Condition',
-            value: 'add_pre_post_condition_sibling',
-            icon: 'pre_post_condition',
-            disable: false,
-          },
-          {
-            label: 'Authorization',
-            value: 'add_authorization_sibling',
-            icon: 'authorization_icon',
-            disable: false,
-          },
-          {
-            label: 'Data Provider',
-            value: 'data_provider_sibling',
-            icon: 'data_provider',
-            disable: false,
-          },
-        ],
-      },
-      {
-        direction: 'down',
-        menuOptions: [
-          {
-            label: 'Sub Module',
-            value: 'sub_module_down',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-    ],
-    onMenuOptionClick: (option: { label: string | ReactNode; value: any }) => {
-      alert(`Option clicked: ${option.label}, Value: ${option.value}`);
-    },
-  } as AddResourceButtonProps,
-};
-
-export default meta;

package/src/components/AddResourceButton/AddResourceButton.tsx

@@ -1,138 +0,0 @@
-import './AddResourceButton.scss';
-import ArrowsButton from './ArrowsButton/ArrowsButton';
-import Icon from '../Icon';
-import { useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import {
-  AddResourceButtonProps,
-  DirectionalArrow,
-  validateArrows,
-} from './type';
-import usePortalPosition from '../../hooks/usePortalPosition';
-
-const AddResourceButton = ({
-  id = 'AddModule',
-  variant = 'primary',
-  directionalArrow = [
-    {
-      direction: 'right',
-      menuOptions: [
-        { label: 'Sub Module', value: 'sub_module', icon: '', disable: false },
-      ],
-    },
-  ],
-  zIndex = 99,
-  treeRowRef,
-  onMenuOptionClick,
-}: AddResourceButtonProps) => {
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-  const [positionArrowContainer, setPositionArrowContainer] = useState<{
-    left: number;
-    top: number;
-  }>({ left: 0, top: 0 });
-  const [activeArrow, setActiveArrow] = useState<string>('');
-  const arrowContainerRef = useRef<HTMLDivElement>(null);
-  const validArrows = validateArrows(directionalArrow);
-  const portalPosition = usePortalPosition(arrowContainerRef, isHovered);
-
-  const handleHover = () => {
-    if (!activeArrow) {
-      setIsHovered(true);
-    }
-    const { positionX, positionY } = portalPosition(arrowContainerRef);
-    setPositionArrowContainer({ left: positionX, top: positionY });
-    const parentNode = arrowContainerRef.current?.parentNode;
-    if (treeRowRef !== null && parentNode) {
-      const actionContainer = treeRowRef?.current?.children[0]
-        ?.children[2] as HTMLElement;
-      actionContainer.classList.add('table-row-add-button');
-    }
-  };
-
-  const handleLeave = () => {
-    setIsHovered(false);
-    setActiveArrow('');
-    const parentNode = arrowContainerRef.current?.parentNode;
-    if (treeRowRef !== null && parentNode) {
-      const actionContainer = treeRowRef?.current?.children[0]
-        ?.children[2] as HTMLElement;
-      actionContainer.classList.remove('table-row-add-button');
-    }
-  };
-
-  const handleArrowClick = (direction: string) => {
-    if (activeArrow === direction) {
-      setActiveArrow('');
-      setIsHovered(false);
-    } else {
-      setActiveArrow(direction);
-      setIsHovered(true);
-    }
-  };
-
-  const getArrowButtonClass = () => {
-    const directions = validArrows
-      .map((arrow: { direction: string }) => arrow.direction)
-      .sort()
-      .join('-');
-    return `ff-${directions}`;
-  };
-
-  return (
-    <div
-      className={`ff-add-button-container ${
-        isHovered ? `ff-hovered-add-button--${variant}` : ''
-      }`}
-      id={id}
-      onMouseEnter={handleHover}
-      onMouseLeave={handleLeave}
-      ref={arrowContainerRef}
-    >
-      <span className="ff-add-button">
-        <Icon
-          name="plus_icon"
-          width={16}
-          height={16}
-          className={
-            isHovered
-              ? `ff-hovered-add-icon--${variant}`
-              : `ff-add-icon--${variant}`
-          }
-        />
-      </span>
-
-      {isHovered &&
-        createPortal(
-          <div
-            id={`portal-123`}
-            className={`ff-arrow-buttons-container ${getArrowButtonClass()}`}
-            onMouseEnter={handleHover}
-            onMouseLeave={handleLeave}
-            style={{
-              left: positionArrowContainer.left,
-              top: positionArrowContainer.top,
-              zIndex: zIndex,
-            }}
-          >
-            {directionalArrow.map(
-              ({ direction, menuOptions }: DirectionalArrow, index: number) => (
-                <ArrowsButton
-                  key={index}
-                  direction={direction as 'top' | 'right' | 'down'}
-                  onArrowClick={() => handleArrowClick(direction)}
-                  menuOptions={menuOptions}
-                  isActive={activeArrow === direction}
-                  variant={variant}
-                  treeRowRef={treeRowRef}
-                  onMenuOptionClick={onMenuOptionClick}
-                />
-              )
-            )}
-          </div>,
-          document.body
-        )}
-    </div>
-  );
-};
-
-export default AddResourceButton;

package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx

@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-import './ArrowsButton.scss';
-import { DirectionalArrowButtonProps } from '../type';
-import MenuOption from '../../MenuOption/MenuOption';
-import { useRef } from 'react';
-
-const ArrowsButton = ({
-  direction,
-  menuOptions,
-  onArrowClick,
-  treeRowRef,
-  onMenuOptionClick,
-}: DirectionalArrowButtonProps & { isActive: boolean }) => {
-  const getIconName = () => {
-    return `arrows_${direction}_icon`;
-  };
-  const menuOptionRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <div>
-      <button
-        className={classNames(
-          'ff-arrow-button',
-          `ff-arrow-button--${direction}`
-        )}
-        onClick={onArrowClick}
-      >
-        <span ref={menuOptionRef}>
-          <MenuOption
-            iconName={getIconName()}
-            options={menuOptions}
-            dropdownPlacement={direction}
-            iconSize={12}
-            iconButtonSize={24}
-            iconButtonBorderRadius={3}
-            onOptionClick={onMenuOptionClick}
-            treeRowRef={treeRowRef}
-          />
-        </span>
-      </button>
-    </div>
-  );
-};
-
-export default ArrowsButton;

package/src/components/AddResourceButton/index.ts

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

package/src/components/AddResourceButton/type.ts

@@ -1,103 +0,0 @@
-import { ReactNode } from 'react';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
-/**
- * Describes the directional arrow used in the Add Resource Button component.
- * The arrow specifies its direction (top, right, down) and associated menu options.
- *
- * @property {('top' | 'right' | 'down')} direction - Specifies the direction of the arrow.
- * @property {(Object | null)[]} menuOptions - The list of menu options displayed when the arrow button is active.
- * If null, no menu options will be shown.
- */
-export interface DirectionalArrow {
-  direction: string | 'top' | 'right' | 'down';
-  menuOptions: {
-    label: string;
-    value: string | string[];
-    icon?: string;
-    disable?: boolean;
-  }[];
-}
-
-/**
- * Props for the Add Resource Button component.
- *
- * @property {string} [id] - An optional unique identifier for the Add Resource Button.
- * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
- * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
- * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
- */
-export interface AddResourceButtonProps {
-  id?: string;
-  variant?: 'primary' | 'secondary';
-  directionalArrow: {
-    /**
-     * direction option: 'top' | 'right' | 'down'
-     */
-    direction: string;
-    menuOptions: {
-      label: string;
-      value: string | string[];
-      icon?: string;
-      disable?: boolean;
-    }[];
-  }[];
-  zIndex?: number;
-  treeRowRef?: React.RefObject<any | null>;
-  onMenuOptionClick?: (option: {
-    label: string | ReactNode;
-    value: any;
-  }) => void;
-}
-
-/**
- * Props for individual directional arrow buttons.
- *
- * @property {('top' | 'right' | 'down')} direction - The direction of the arrow button (top, right, or down).
- * @property {(Object | any)} menuOptions - The list of menu options or a generic value for dynamic content.
- * @property {() => void} onArrowClick - Callback function triggered when the arrow button is clicked.
- * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
- */
-export interface DirectionalArrowButtonProps {
-  direction: 'top' | 'right' | 'down';
-  menuOptions: {
-    label: string;
-    value: string | string[];
-    icon?: string;
-    disable?: boolean;
-  }[];
-  onArrowClick: () => void;
-  onMenuOptionClick?: (option: {
-    label: string | ReactNode;
-    value: any;
-  }) => void;
-  isActive: boolean;
-  variant?: 'primary' | 'secondary';
-  treeRowRef?: React.RefObject<any | null>;
-}
-
-/**
- * Utility function to validate an array of directional arrows.
- * Ensures there is at least one valid arrow in the array.
- * If the array is empty, it returns a default arrow object.
- */
-export const validateArrows = (
-  arrows: DirectionalArrow[]
-): DirectionalArrow[] => {
-  if (checkEmpty(arrows)) {
-    return [
-      {
-        direction: null as any,
-        menuOptions: [
-          {
-            label: 'Sub Module',
-            value: 'sub_module',
-            icon: '',
-            disable: false,
-          },
-        ],
-      },
-    ];
-  }
-  return arrows;
-};

package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx

@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AllProjectsDropdown from './AllProjectsDropdown';
-import React, { useState } from 'react';
-import { optionsType } from './types';
-
-const meta: Meta<typeof AllProjectsDropdown> = {
-  title: 'Components/AllProjectsDropdown',
-  component: AllProjectsDropdown,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof AllProjectsDropdown>;
-const options = [
-  {
-    label: 'All Projects',
-    value: 'All Projects',
-    iconName: 'all_projects',
-  },
-  {
-    label:
-      'Pantaloon Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
-    value:
-      'Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
-    iconName: 'web_icon',
-  },
-  {
-    label: 'Mobile Project',
-    value: 'Mobile Project',
-    iconName: 'mobile_icon',
-  },
-  {
-    label: 'Web & Mobile Project',
-    value: 'Web & Mobile Project',
-    iconName: 'web&mobile_icon',
-  },
-  {
-    label: 'Sales Force',
-    value: 'Sales Force',
-    iconName: 'sales_force',
-  },
-  {
-    label: 'MS Dynamic',
-    value: 'MS Dynamic',
-    iconName: 'ms_dynamic',
-  },
-  {
-    label: 'Test',
-    value: 'test',
-    iconName: 'mobile_icon',
-  },
-  {
-    label: 'Web Service',
-    value: 'Web Service',
-    iconName: '',
-  },
-];
-export const Default: Story = {
-  render: () => {
-    const [selectedOption, setSelectedOption] = useState({
-      label: 'All Projects',
-      value: 'All Projects',
-      iconName: 'all_projects',
-    });
-
-    const handleSelectedOption = (option: optionsType) => {
-      setSelectedOption(option);
-    };
-
-    return (
-      <div
-        style={{
-          backgroundColor: 'var(--brand-color)',
-          height: 50,
-          width: 120,
-          padding: 10,
-        }}
-      >
-        <AllProjectsDropdown
-          options={options}
-          onClick={handleSelectedOption}
-          selectedOption={selectedOption}
-        />
-      </div>
-    );
-  },
-};
-export const Selected: Story = {
-  render: () => {
-    const [selectedOption, setSelectedOption] = useState({
-      label: 'All Projects',
-      value: 'All Projects',
-      iconName: 'all_projects',
-    });
-
-    const handleSelectedOption = (option: optionsType) => {
-      setSelectedOption(option);
-    };
-
-    return (
-      <div
-        style={{
-          backgroundColor: 'var(--brand-color)',
-          height: 50,
-          width: 120,
-          padding: 10,
-        }}
-      >
-        <AllProjectsDropdown
-          options={options}
-          onClick={handleSelectedOption}
-          selectedOption={selectedOption}
-          selected={true}
-        />
-      </div>
-    );
-  },
-};
-
-export default meta;