pixel-react 1.10.15 → 1.10.16

package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx

@@ -1,320 +0,0 @@
-import { ReactNode, useContext, useRef, useState } from 'react';
-import {
-  NlpDropDownListProps,
-  nlpDropdownDefaultCSSData,
-} from './NlpDropDownType';
-import useClickOutside from '../../../../hooks/useClickOutside';
-import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
-import './NlpDropdown.scss';
-import Typography from '../../../Typography';
-import { ffid } from '../../../../utils/ffID/ffid';
-import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-import Icon from '../../../Icon';
-import IconButton from '../../../IconButton';
-
-type OptionType = {
-  label?: ReactNode;
-  value?: string;
-  displayName?: string;
-  videoSrc?: string;
-  description?: string;
-  nlpType?: string;
-  path?: string;
-  platform?: string;
-  stepInputs?: { type?: string; name?: string }[];
-  returnType?: string;
-};
-
-const NlpDropdown = ({
-  onSelectBlur,
-  onSelectOptionSelector,
-  dropdownPosition,
-  options = [],
-  optionZIndex = 100,
-  inputRef,
-  webServiceClick = () => {},
-  containerWidth,
-}: NlpDropDownListProps) => {
-  const [nlpData, setNlpData] = useState<OptionType | null>(null);
-  const [showNlpDetails, setShowNlpDetails] = useState('');
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-  const optionsWrapperRef = useRef<HTMLDivElement>(null);
-  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
-
-  const { positionX, positionY, width, fromBottom } = dropdownPosition;
-  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
-    nlpDropdownDefaultCSSData;
-
-  const updateDropdownPosition = () => {
-    let dropdownContainerHeight;
-
-    if (checkEmpty(options)) {
-      dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
-    } else if (options.length > 5) {
-      dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
-    } else {
-      dropdownContainerHeight =
-        options.length * optionHeight + 2 * dropDownWrapperPadding;
-    }
-
-    if (fromBottom > dropdownContainerHeight + margin) {
-      return {
-        left: positionX,
-        top: positionY,
-        width: width,
-        zIndex: optionZIndex,
-      };
-    }
-    return {
-      zIndex: optionZIndex,
-      left: positionX,
-      width: width,
-      top: positionY - selectInputHeight - dropdownContainerHeight - margin,
-    };
-  };
-
-  const getNLPType = (nlpType: string): JSX.Element => {
-    let label = '';
-    let className = '';
-
-    if (nlpType === 'NLP') {
-      label = 'NLP';
-      className = 'ff-nlp'; // red color
-    } else if (nlpType === 'STEP_GROUP') {
-      label = 'SG';
-      className = 'ff-sg'; // green color
-    } else if (nlpType === 'PROGRAM_ELEMENTS') {
-      label = 'PE';
-      className = 'ff-pe'; // yellow color
-    } else {
-      label = '--';
-      className = 'nlp-default'; // default black color
-    }
-
-    return <span className={className}>{label}</span>;
-  };
-
-  const getPlatformIcon = (platform: string): JSX.Element | string => {
-    if (platform === 'Web') {
-      return <Icon name="web_icon" height={8} width={8} />;
-    } else if (platform === 'android') {
-      return <Icon name="android_icon" height={8} width={8} />;
-    } else if (platform === 'ios') {
-      return (
-        <Icon
-          name="ios_icon"
-          height={8}
-          width={8}
-          color="var(--dotted-border-color)"
-        />
-      );
-    } else if (platform === 'Generic') {
-      return <b className="platform-ios">Generic</b>;
-    } else {
-      return '--';
-    }
-  };
-
-  return (
-    <div className="ff-nlp-dropdown-wrapper">
-      <div
-        ref={optionsWrapperRef}
-        style={{ ...updateDropdownPosition(), width: containerWidth }}
-        className={classNames('ff-nlp-options-wrapper', currentTheme)}
-        onMouseLeave={() => setShowNlpDetails('hide')}
-      >
-        <div className="ff-nlp-options-wrapper-main">
-          <div className="ff-nlp-options-primary-wrapper">
-            {!checkEmpty(options) ? (
-              options.map((option) => (
-                <div
-                  key={ffid()}
-                  onMouseEnter={() => {
-                    setNlpData(option as OptionType);
-                    setShowNlpDetails('show');
-                  }}
-                >
-                  <Typography
-                    as="div"
-                    lineHeight="30px"
-                    fontSize={12}
-                    className={classNames('ff-nlp-option', currentTheme)}
-                    onClick={() => onSelectOptionSelector(option)}
-                  >
-                    <span>
-                      <Typography
-                        className="nlp-categories"
-                        fontWeight="regular"
-                        fontSize={8}
-                      >
-                        {getNLPType(option.nlpType)}
-                      </Typography>
-                    </span>
-
-                    <span>{getPlatformIcon(option.platform)}</span>
-                    {option?.displayName}
-                  </Typography>
-                </div>
-              ))
-            ) : (
-              <Typography
-                textAlign="center"
-                lineHeight="32px"
-                as="p"
-                color="var(--ff-nlp-text-color)"
-                className="ff-nlp-no-option"
-              >
-                No Results Found
-              </Typography>
-            )}
-          </div>
-          <div>
-            <div className="ff-nlp-web-service-div ">
-              <IconButton
-                iconName="plus_user_icon"
-                label="Web Service"
-                onClick={webServiceClick}
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          className={
-            showNlpDetails === 'show' ? 'ff-nlp-data-show' : 'ff-nlp-data-hide'
-          }
-        >
-          <div className="ff-nlp-data-side-menu">
-            {nlpData?.videoSrc && (
-              <Typography
-                className="nlp-details-header"
-                fontWeight="semi-bold"
-                fontSize={10}
-              >
-                Video
-                <div className="nlp-details ">
-                  <video
-                    src={nlpData.videoSrc}
-                    controls
-                    className="nlp-video-player"
-                    width="100%"
-                  >
-                    Your browser does not support the video tag.
-                  </video>
-                </div>
-              </Typography>
-            )}
-
-            <Typography
-              className="nlp-details-header"
-              fontWeight="semi-bold"
-              fontSize={10}
-            >
-              NLP Details
-              <Typography
-                className="nlp-details"
-                fontWeight="regular"
-                fontSize={10}
-              >
-                {nlpData?.displayName || '--'}
-              </Typography>
-            </Typography>
-
-            <Typography
-              className="nlp-details-header"
-              fontWeight="semi-bold"
-              fontSize={10}
-            >
-              Description
-              <Typography
-                className="nlp-details"
-                fontWeight="regular"
-                fontSize={10}
-              >
-                {nlpData?.description || '--'}
-              </Typography>
-            </Typography>
-
-            {nlpData?.nlpType === 'STEP_GROUP' && (
-              <>
-                <Typography
-                  className="nlp-details-header"
-                  fontWeight="semi-bold"
-                  fontSize={10}
-                >
-                  Path
-                  <Typography
-                    className="nlp-details"
-                    fontWeight="regular"
-                    fontSize={10}
-                  >
-                    {nlpData?.path ? nlpData?.path.slice(6) : '--'}
-                  </Typography>
-                </Typography>
-              </>
-            )}
-            <Typography
-              className="nlp-details-header"
-              fontWeight="semi-bold"
-              fontSize={10}
-            >
-              Inputs
-            </Typography>
-            {nlpData?.stepInputs?.length ? (
-              nlpData.stepInputs.map((stepInput, index) => {
-                const stepInputType = stepInput.type
-                  ? stepInput?.type?.split('.')?.pop()
-                  : '--';
-                return (
-                  <div key={index}>
-                    <Typography
-                      className="nlp-details-header"
-                      fontWeight="semi-bold"
-                      fontSize={10}
-                    >
-                      Input{index + 1}
-                      <Typography
-                        className="nlp-details"
-                        fontWeight="regular"
-                        fontSize={10}
-                      >
-                        type: {stepInputType}
-                      </Typography>
-                      <Typography
-                        className="nlp-details"
-                        fontWeight="regular"
-                        fontSize={10}
-                      >
-                        name: {stepInput.name || '--'}
-                      </Typography>
-                    </Typography>
-                  </div>
-                );
-              })
-            ) : (
-              <div className="nlp-details">--</div>
-            )}
-
-            <Typography
-              className="nlp-details-header"
-              fontWeight="semi-bold"
-              fontSize={10}
-            >
-              Output
-              <Typography
-                className="nlp-details "
-                fontWeight="regular"
-                fontSize={10}
-              >
-                {nlpData?.returnType || '--'}
-              </Typography>
-            </Typography>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NlpDropdown;

package/src/components/NLPInput/index.ts

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

package/src/components/NLPInput/sampleData.ts

@@ -1,162 +0,0 @@
-export const nlpList= 
-    [
-    {
-      desc: 'randomNumber',
-      displayName:
-        'PostgreSQL : Update value *setValues* into *tableName* table',
-      failMessage: 'randomNumber has failed',
-      isNonPE: false,
-      platform: 'Web',
-      name: 'randomNumber',
-      nlpName: 'randomNumber',
-      videoSrc: '',
-      nlpType: 'NLP',
-      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-      parentId: 'PKJ1017',
-      passMessage: 'randomNumber has passed',
-      programElementId: 'PRG_ELE1001',
-      projectId: 'PJT1001',
-      returnType: 'java.lang.Integer',
-      searchName: 'randomNumber',
-      stepInputs: [{}],
-      toolTip: 'Logics : randomNumber',
-      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-    },
-    {
-      desc: 'randomNumber',
-      displayName: 'Wait for *element* until text contains *text*',
-      platform: 'android',
-
-      failMessage: 'randomNumber has failed',
-      isNonPE: false,
-      name: 'randomNumber',
-      nlpName: 'randomNumber',
-      nlpType: 'PROGRAM_ELEMENTS',
-      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-      parentId: 'PKJ1017',
-      passMessage: 'randomNumber has passed',
-      programElementId: 'PRG_ELE1001',
-      projectId: 'PJT1001',
-      returnType: 'java.lang.Integer',
-      searchName: 'randomNumber',
-      stepInputs: [{}],
-      toolTip: 'Logics : randomNumber',
-      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-    },
-    {
-      desc: 'randomNumber',
-      platform: 'ios',
-
-      displayName:
-        'String : Verify if string *string1* is equal to string *string2*',
-      failMessage: 'randomNumber has failed',
-      isNonPE: false,
-      name: 'randomNumber',
-      nlpName: 'randomNumber',
-      nlpType: 'STEP_GROUP',
-      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-      parentId: 'PKJ1017',
-      passMessage: 'randomNumber has passed',
-      programElementId: 'PRG_ELE1001',
-      projectId: 'PJT1001',
-      returnType: 'java.lang.Integer',
-      searchName: 'randomNumber',
-      stepInputs: [{}],
-      toolTip: 'Logics : randomNumber',
-      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-    },
-    {
-      desc: 'randomNumber',
-      displayName:
-        'Wait for page to load for maximum time limit of *time* second',
-      failMessage: 'randomNumber has failed',
-      isNonPE: false,
-      platform: 'android',
-
-      name: 'randomNumber',
-      nlpName: 'randomNumber',
-      nlpType: 'PROGRAM_ELEMENTS',
-      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-      parentId: 'PKJ1017',
-      passMessage: 'randomNumber has passed',
-      programElementId: 'PRG_ELE1001',
-      projectId: 'PJT1001',
-      returnType: 'java.lang.Integer',
-      searchName: 'randomNumber',
-      stepInputs: [
-        { name: 'Range Of The Number', type: 'java.lang.Integer' },
-      ],
-      toolTip: 'Logics : randomNumber',
-      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-    },
-    {
-      description: '',
-      displayName:
-        'Excel : Get string cell data for given *uniqueData* and *header* for single row table',
-      failMessage: 'Open Browser is failed',
-      imported: false,
-      libraryId: 'LIB1002',
-      name: 'Open Browser',
-      nlpName: 'Open Browser',
-      nlpType: 'STEP_GROUP',
-      parentId: 'STP_GRP1001',
-      passMessage: 'Open Browser is passed',
-      path: '/Root/Open and Close Browser/Open Browser',
-      platform: 'Web',
-      projectId: 'PJT1001',
-      returnType: 'void',
-      searchName: 'Open Browser',
-      stepInputs: [],
-      toolTip: 'Open and Close Browser : Open Browser : Web',
-      _class: 'com.tyss.optimize.data.models.db.model.StepGroupNlp',
-      _id: 'SG_NLP1001',
-    },
-    {
-      desc: 'randomNumber',
-      displayName:
-        'PostgreSQL : Update value *setValues* into *tableName* table',
-      failMessage: 'randomNumber has failed',
-      isNonPE: false,
-      platform: 'Web',
-
-      name: 'randomNumber',
-      nlpName: 'randomNumber',
-      nlpType: 'PROGRAM_ELEMENTS',
-      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-      parentId: 'PKJ1017',
-      passMessage: 'randomNumber has passed',
-      programElementId: 'PRG_ELE1001',
-      projectId: 'PJT1001',
-      returnType: 'java.lang.Integer',
-      searchName: 'randomNumber',
-      stepInputs: [{}],
-      toolTip: 'Logics : randomNumber',
-      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-    },
-    {
-      desc: 'randomNumber',
-      displayName: 'randomNumber',
-      failMessage: 'randomNumber has failed',
-      isNonPE: false,
-      name: 'randomNumber',
-      platform: 'Web',
-      nlpName: 'randomNumber',
-      nlpType: 'PROGRAM_ELEMENTS',
-      packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-      parentId: 'PKJ1017',
-      passMessage: 'randomNumber has passed',
-      programElementId: 'PRG_ELE1001',
-      projectId: 'PJT1001',
-      returnType: 'java.lang.Integer',
-      searchName: 'randomNumber',
-      stepInputs: [{}],
-      toolTip: 'Logics : randomNumber',
-      _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-      _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-    }
-  ]

package/src/components/NLPInput/types.tsx

@@ -1,136 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface SelectProps {
-  /*
-   * Label for the NLP NLP select dropdown
-   */
-  label?: string;
-
-  rightIcon?: string;
-
-  leftIcon?: string;
-
-  /*
-   * If true, the NLP select dropdown will have a label
-   */
-  showLabel?: boolean;
-  onHelpIconClick?: () => void;
-  webServiceClick?: () => void;
-  aiIconClick?: () => void;
-  rightIconColor: string;
-  /*
-   * Options for the NLP select dropdown
-   */
-  optionsList: any[];
-
-  /*
-   * Selected option for the NLP select dropdown
-   */
-  selectedOption?: NlpRenderOption;
-  containerWidth?:string | number,
-
-  /*
-   * onChange callback function for handling selected option changes
-   */
-  onChange: (option: NlpRenderOption) => void;
-
-  /*
-   * If error is true, this message will be displayed
-   */
-  errorMsg?: string;
-
-  /*
-   * provide the className for the NLP select dropdown
-   */
-  className?: string;
-
-  /*
-   *  Providing the z-index for dropdown and select
-   */
-  optionZIndex?: number;
-
-  /*
-   * Provide disable prop for the disabling the select component
-   */
-  disabled?: boolean;
-
-  /*
-   * Provide disable prop for the providing border radius at right side
-   */
-  borderRadius?: boolean;
-
-  /*
-   * Provide boolean value to show border or not
-   */
-
-  showBorder?: boolean;
-
-  /*
-   * Provide the boolean value if the select component is required or not
-   */
-  required?: boolean;
-  value: string;
-  onSelect: (e: any) => void;
-}
-
-export interface DrowdownPosition {
-  positionX: number;
-  positionY: number;
-  width: number;
-  fromBottom: number;
-}
-
-export interface SelectState {
-  isInputFocused: boolean;
-  iconColor: string;
-  isIconClick: boolean;
-  showOptions: boolean;
-  options: any[];
-  option: string;
-  dropdownPosition: DrowdownPosition;
-}
-
-export type SelectAction =
-  | { type: 'FOCUS_INPUT' }
-  | {
-      type: 'BLUR_INPUT';
-      payload: {
-        optionsList: NlpRenderOption[];
-        option: NlpRenderOption['projectId'];
-      };
-    }
-  | { type: 'MOUSE_ENTER' }
-  | { type: 'MOUSE_LEAVE' }
-  | {
-      type: 'UPDATE_DROPDOWN_POSITION';
-      payload: {
-        positionX: number;
-        positionY: number;
-        width: number;
-        fromBottom: number;
-      };
-    }
-  | {
-      type: 'UPDATE_OPTION';
-      payload: string;
-    }
-  | {
-      type: 'UPDATE_OPTION_LIST';
-      payload: any[];
-    }
-  | {
-      type: 'SHOW_ERROR';
-      payload: {
-        optionsList: any[];
-        option: NlpRenderOption['projectId'];
-      };
-    };
-
-export interface NlpRenderOption {
-  displayName: string | ReactNode;
-  projectId: string;
-  nlpType: string;
-  platform: string;
-  disabled?: boolean;
-  videoSrc?: string;
-}

package/src/components/Paper/Paper.stories.tsx

@@ -1,77 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Paper from './Paper';
-import { Children } from 'react';
-import Typography from '../Typography';
-import './Paper.scss';
-
-const meta: Meta<typeof Paper> = {
-  title: 'Components/Paper',
-  component: Paper,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Paper>;
-
-const defaultArgs = {
-  Children,
-  className: '',
-  rounded: false,
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    children: <p>This is a simple Paper component with default styles.</p>,
-    className: 'ff_paper_default_style',
-  },
-};
-
-export const PrimaryPaper: Story = {
-  render: () => {
-    return (
-      <Paper className="ff_paper_default_style">
-        <Typography>
-          This Paper component has custom background color and padding.
-        </Typography>
-      </Paper>
-    );
-  },
-};
-
-export const PaperWithLowShadow: Story = {
-  render: () => {
-    return (
-      <Paper className="ff_paper_default_style">
-        <Typography>This Paper component has a shadow depth of 6.</Typography>
-      </Paper>
-    );
-  },
-};
-
-export const PaperWithHighShadow: Story = {
-  render: () => {
-    return (
-      <Paper className="ff_paper_basic_style" rounded>
-        <Typography>
-          This Paper component combines custom styles, shadow depth of 10, and
-          rounded corners.
-        </Typography>
-      </Paper>
-    );
-  },
-};
-
-export const PaperWithRounded: Story = {
-  render: () => {
-    return (
-      <Paper rounded className="ff_paper_default_style">
-        <Typography>This Paper component has Rounded Corners.</Typography>
-      </Paper>
-    );
-  },
-};
-
-export default meta;