pixel-react 1.6.8 → 1.7.0

package/src/components/ConditionalDropdown/ConditionalDropdown.tsx

@@ -0,0 +1,159 @@
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import VariableDropdown from '../Editor/VariableDropdown';
+import Icon from '../Icon';
+import Input from '../Input';
+import { ConditionalDropdownProps, dynamicObject } from './types';
+import './ConditionalDropdown.scss';
+import React, { useState, useRef, useEffect } from 'react';
+import OptionsDropdown from './OptionsDropdown';
+
+const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
+  label = '',
+  hashInputValue = '',
+  setHashInputValue,
+  variableList = [],
+  placeholder = 'Enter text',
+  onChange,
+  onCreateVariableClick,
+  value = '',
+  dropdownWidth = 'inherit',
+  isHash = false,
+  dataFiles = [],
+  ...props
+}) => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+  const [showCreateVariableIcon, setShowCreateVariableIcon] =
+    useState<boolean>(false);
+  const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (cursorPosition !== null && inputRef.current) {
+      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+      inputRef.current.focus();
+    }
+  }, [cursorPosition]);
+
+  useEffect(() => {
+    if (inputValue.startsWith('#') && isHash) {
+      const searchQuery = inputValue.slice(1).toLowerCase();
+      const filtered = dataFiles.filter((file) =>
+        file.name.toLowerCase().includes(searchQuery)
+      );
+
+      setFilteredOptions(filtered);
+      setShowDropdown(filtered.length > 0);
+    } else if (!isHash) {
+      const newPayload = replaceVariablesWithIds(inputValue);
+      onChange?.(newPayload);
+    }
+  }, [inputValue]);
+
+  const replaceVariablesWithIds = (input: string): string => {
+    return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
+      const foundVariable = variableList.find(
+        (varaible) => varaible.name === variableName.trim()
+      );
+      return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
+    });
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const fieldValue = event.target.value;
+    setInputValue(fieldValue);
+    const cursorPos = inputRef.current?.selectionStart || 0;
+    const isDollarTyped = fieldValue[cursorPos - 1] === '$';
+
+    if (isHash) {
+      setShowDropdown(fieldValue.startsWith('#'));
+    } else {
+      if (isDollarTyped) {
+        setShowDropdown(true);
+      } else {
+        setShowDropdown(false);
+      }
+      if (fieldValue?.includes('$')) {
+        setShowCreateVariableIcon(false);
+      } else {
+        setShowCreateVariableIcon(true);
+      }
+    }
+  };
+
+  const handleDropdownClick = (item: dynamicObject) => {
+    if (inputRef.current) {
+      const { selectionStart, selectionEnd } = inputRef.current;
+      const dollarSyntax = `{${
+        item.type === 'LOCAL'
+          ? 'LV'
+          : item.type === 'GLOBAL'
+          ? 'GV'
+          : item.type === 'GROUP'
+          ? 'SG'
+          : 'PEV'
+      }_${item.name}}`;
+
+      let newValue;
+      if (isHash && inputValue[0] === '#') {
+        newValue = item.name + inputValue.slice(selectionEnd || 1);
+      } else {
+        newValue =
+          inputValue.slice(0, selectionStart || 0) +
+          dollarSyntax +
+          inputValue.slice(selectionEnd || 0);
+      }
+      setHashInputValue?.(item);
+      setInputValue(newValue);
+      setCursorPosition((selectionStart || 0) + dollarSyntax.length);
+      setShowDropdown(false);
+    }
+  };
+
+  return (
+    <div className="ff-add-variable-container">
+      <div className="ff-add-variable-input">
+        <Input
+          {...props}
+          name="add_variable"
+          ref={inputRef}
+          type="text"
+          value={inputValue}
+          onChange={handleChange}
+          variant="primary"
+          label={label}
+          placeholder={placeholder}
+        />
+        {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
+          <Icon
+            onClick={onCreateVariableClick}
+            name="add_variable"
+            width={24}
+            height={24}
+            hoverEffect
+          />
+        )}
+      </div>
+      {showDropdown && (
+    isHash ? (
+      <OptionsDropdown
+        position="relative"
+        width={dropdownWidth}
+        filteredOptions={filteredOptions}
+        onSelectVariable={handleDropdownClick}
+      />
+    ) : (
+      <VariableDropdown
+        position="relative"
+        width={dropdownWidth}
+        optionsList={variableList}
+        onSelectVariable={handleDropdownClick}
+      />
+    )
+  )}
+    </div>
+  );
+};
+
+export default ConditionalDropdown;

package/src/components/ConditionalDropdown/OptionsDropdown.tsx

@@ -0,0 +1,44 @@
+import type { FC, ReactNode } from 'react';
+import { dynamicObject, OptionsDropdownProps } from './types';
+import './ConditionalDropdown.scss';
+import Typography from '../Typography';
+import classNames from 'classnames';
+
+const OptionsDropdown:FC<OptionsDropdownProps> = ({
+    onSelectVariable,
+    dropdownPosition,
+    filteredOptions= [],
+    position = 'relative',
+    width = '300px',
+  }): ReactNode => {
+    return (
+      <div
+        className={classNames('ff-variable-dropdown', position)}
+        style={
+          dropdownPosition
+            ? {
+                top: dropdownPosition.top + 30,
+                left: dropdownPosition.left - 30,
+                width,
+              }
+            : { width }
+        }
+      >
+        {filteredOptions?.map((option: dynamicObject): ReactNode => {
+          return (
+            <div
+              className="ff-variable-option"
+              onClick={() => onSelectVariable(option)}
+              key={option?.id}
+            >
+              <Typography as="span" fontSize={14}>
+                {option?.name}
+              </Typography>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+export default OptionsDropdown;

package/src/components/ConditionalDropdown/index.ts

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

package/src/components/ConditionalDropdown/types.ts

@@ -0,0 +1,160 @@
+import { dropdownPositionType } from "../Editor/types";
+
+export type dynamicObject = {
+  [key: string]: any;
+};
+
+export type TestDataObject = {
+  _id: string;
+  name: string;
+  actualPath: string;
+  searchKey: string;
+  parentId: string;
+}
+
+export interface ConditionalDropdownProps {
+  /**
+   * Label for the field
+   */
+  label?: string;
+
+  /**
+   * Value in the input should stored in this state
+   */
+  hashInputValue?: TestDataObject | dynamicObject;
+
+  /**
+   * Function storing and updating the inputValue state
+   */
+  setHashInputValue?:(value: dynamicObject | undefined) => void;
+
+  /**
+   * List of variables
+   */
+  variableList?: dynamicObject[];
+  /**
+   * Place holder for the input field
+   */
+  placeholder?: string;
+  /**
+   * Function to handle input change
+   * @param value
+   * @returns
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Function to handle create variable icon click
+   */
+  onCreateVariableClick?: () => void;
+  /**
+   * Width of the dropdown
+   */
+  dropdownWidth?: string;
+  /**
+   * Name | name of the input field
+   */
+  name?: string;
+  /**
+   * value | input field value
+   */
+  value?: string;
+  /**
+   * variants to set color/style of the input field
+   */
+  variant?: 'default' | 'primary';
+  /**
+   * type to set color/style of the input field
+   */
+  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+  /**
+   * to disable the input field
+   */
+  disabled?: boolean;
+  /**
+   * if true, input field will be mandatory
+   */
+  required?: boolean;
+  /**
+   * classnames to style the input field
+   */
+  className?: string;
+  /**
+   * noBorder prop 'true' removes border of input
+   */
+  noBorder?: boolean;
+
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * id to select the input field uniquely
+   */
+  id?: string;
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+  /**
+   *  minimum and maximum values for the number type input field and their functions
+   */
+  minValue?: number;
+  maxValue?: number;
+  /**
+   * background of the input field prop
+   */
+  transparentBackground?: boolean;
+  /**
+   * size for the input field
+   */
+  size?: 'small' | 'medium';
+  /**
+   * isLabelRequired for the input field without label,showing placeholder
+   */
+  isLabelRequired?: boolean;
+
+   /**
+   * If true, dropdown opens when '#' is entered at the first position.
+   */
+   isHash?: boolean;
+   /**
+    * Options for the dropdown when `isHash` is true.
+    */
+   dataFiles?: dynamicObject[];
+}
+
+export interface OptionsDropdownProps {
+   /**
+   * Position whether absoloute or relative
+   */
+   position: 'absolute' | 'relative';
+
+   /**
+    * Dropdown width
+    */
+   width: string;
+   
+   /**
+    * chars entered to search in Input : 
+    */
+   filteredOptions?: dynamicObject[];
+ 
+   /**
+    * Function to handle click on variable
+    */
+   onSelectVariable: (variable: object) => void;
+ 
+   /**
+    * Dropdown postion used for dropdown placement
+    */
+   dropdownPosition?: dropdownPositionType;
+}

package/src/components/CreateVariable/CreateVariableSlider.tsx

@@ -57,7 +57,7 @@ const CreateVariableSlider: FC<CreateVariableProps> = ({
           required
           type="text"
           name="variable name"
-          value={variableName}
+          value={variableName || ''}
           onChange={(event) => onNameChange(event.target.value)}
         />
         <Select
@@ -73,7 +73,7 @@ const CreateVariableSlider: FC<CreateVariableProps> = ({
           required
           type="text"
           name="value"
-          value={value}
+          value={value || ''}
           onChange={(event) => onValueChange(event.target.value)}
         />
         <div className="ff-hide-value-content">

package/src/components/CreateVariable/types.ts

@@ -38,11 +38,11 @@ export interface CreateVariableProps {
   /**
    * onChange of name
    */
-  onNameChange: (value: string | boolean) => void;
+  onNameChange: (value: string) => void;
   /**
    * onChange of value
    */
-  onValueChange: (value: string | boolean) => void;
+  onValueChange: (value: string) => void;
   /**
    * Hide value
    */

package/src/components/DownloadClient/DownloadClient.scss

@@ -1,80 +1,67 @@
-@use '../../assets/styles/colors' as *;
-@use '../../assets/styles/fonts';
 @use '../../assets/styles/mixins' as *;
 
-.ff-download-client-overlay {
-  width: 378px;
-  height: 217px;  
+.ff-download-client-wrapper {
   position: absolute;
-  @include center-content;
-  z-index: 9999;
+  height: 181px;
+  width: 368px;
+  border: 1px solid var(--download-client-border-color);
+  border-radius: 4px;
+  box-shadow: 0px 0px 8px 0px
+    var(--download-client-icon-container-box-shadow-color);
 
-  .ff-download-client-container {
-    width: 370px;
+  .ff-download-client-header-wrapper {
+    position: relative;
     @include center-content;
-    flex-direction: column;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--download-client-border-color);
-    margin-left: 5px;
+    justify-content: space-between;
+    background-color: var(--download-client-header-bg-color);
 
-    .ff-download-client-header {
-      width: 100%;
-      @include center-content;
-      justify-content: space-between;
-      padding: 7px 4px;
-      margin-bottom: 8px;
-      border-radius: 4px 4px 0 0;
-      background-color: var(--download-client-header-bg-color);
-      box-sizing: border-box;
+    .ff-download-client-hollow-triangle {
+      position: absolute;
+      height: 8px;
+      width: 8px;
+      border: 1px solid var(--download-client-border-color);
+      top: -6px;
+      right: 64px;
+      z-index: -1;
+      border-radius: 2px;
+      transform: rotate(45deg);
+    }
 
-      .ff-header-arrow {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 10px;
-        right: 70px;
-        width: 10px;
-        height: 10px;
-        background-color: var(--download-client-icon-container-bg-color) ;
-        transform: translateY(-50%) rotate(-45deg);
-        z-index: -999;
-        border: 1px solid var(--download-client-header-bg-color); 
-      }
+    .ff-download-client-header-text {
+      margin-left: 4px;
+    }
 
+    .ff-download-client-close-icon {
+      cursor: pointer;
+      margin-right: 10px;
     }
+  }
 
-    .ff-download-client-content {
-      width: 100%;
-      @include center-content;
-      flex-direction: column;
-      padding-left: 8px;
-      padding-right: 24px;
-      gap: 8px;
-      margin-bottom: 8px;
-      color: var(--popup-text-color);
-      .ff-download-install,
-      .ff-choose-os {
-        padding: 4px 0;
-      }
+  .ff-download-client-content-text {
+    width: calc(100% - 16px);
+    height: 132px;
+    background-color: #fff;
+    padding: 8px;
+
+    .ff-download-client-description-text {
+      margin-bottom: 8px
     }
 
-    .ff-download-client-actions {
-      width: 240px;
+  }
+
+  .ff-download-client-os-wrapper {
+    @include center-content;
+    gap: 24px;
+
+    .ff-os-version-wrapper {
       @include center-content;
-      gap: 12px;
-      margin-bottom: 17px;
-      .ff-icons-container {
-        @include center-content;
-        width: 64px;
-        height: 64px;
-        border-radius: 8px;
-        border: 1px solid var(--download-client-icon-container-border-color);
-        background-color: var(--download-client-icon-container-bg-color);
-        cursor: pointer;
-        box-shadow: 0px 0px 10px 0px
-          var(--download-client-icon-container-box-shadow-color);
-      }
+      height: 64px;
+      width: 64px;
+      cursor: pointer;
+      border-radius: 8px;
+      border: 1px solid var(--download-client-icon-container-border-color);
+      box-shadow: 0px 0px 10px 0px
+        var(--download-client-icon-container-box-shadow-color);
     }
   }
 }

package/src/components/DownloadClient/DownloadClient.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import DownloadClient from './DownloadClient';
+import './DemoDownloadClient.scss';
 
 const meta: Meta<typeof DownloadClient> = {
   title: 'Components/DownloadClient',
@@ -14,12 +15,11 @@ type Story = StoryObj<typeof DownloadClient>;
 
 export const Default: Story = {
   args: {
-    onClose: () =>{},
-    onClickWindows: () =>{},
-    onClickLinux: () =>{},
-    onClickMac: () =>{},
-    top: '100px',  
-    left: '50px',
+    onClose: () => {},
+    top: '50%',
+    left: '50%',
+    className: 'ff-download-client-stories',
+    onClick: () => {},
   },
 };
 

package/src/components/DownloadClient/DownloadClient.tsx

@@ -6,17 +6,13 @@ import { DownloadClientProps } from './type';
 
 const DownloadClient: React.FC<DownloadClientProps> = ({
   onClose,
-  onClickWindows,
-  onClickLinux,
-  onClickMac,
-  top = '10px',
-  left = '10px',
+  top = '100px',
+  left = '0px',
+  className,
+  description = 'Download and Install the fireflink client to run the script',
+  onClick = () => {},
+  optionZIndex = 10000001,
 }) => {
-  const title = 'Download Client';
-  const description =
-    'Download and Install the fireflink client to run the script';
-  const chooseOSText = 'Choose OS';
-
   useEffect(() => {
     const handleCloseDownloadClient = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -29,49 +25,62 @@ const DownloadClient: React.FC<DownloadClientProps> = ({
     };
   }, [onClose]);
 
+  const osVersion = ['windows', 'mac_icon', 'linux'];
+
   return (
-    <div className="ff-download-client-overlay" style={{ top, left }}>
-      <div className="ff-download-client-container">
-        <div className="ff-download-client-header">
-          <div className="ff-header-arrow"></div>
-          <Typography
-            color="var(--table-header-text-color)"
-            fontWeight="semi-bold"
-          >
-            {title}
-          </Typography>
-          <div onClick={onClose}>
-            <Icon name="close" width={12} height={12} />
-          </div>
-        </div>
-        <div className="ff-download-client-content">
-          <div className="ff-download-install">
-            <Typography
-              fontWeight="semi-bold"
-              color="var(--download-client-content-text-color)"
-            >
-              {description}
-            </Typography>
-          </div>
-          <div className="ff-choose-os">
-            <Typography
-              fontWeight="semi-bold"
-              color="var(--download-client-choose-os-text-color)"
+    <div
+      className={`ff-download-client-wrapper ${className}`}
+      style={{ top: top, left: left, zIndex: optionZIndex }}
+    >
+      <div className="ff-download-client-header-wrapper">
+        <div className="ff-download-client-hollow-triangle"></div>
+        <Typography
+          fontWeight="semi-bold"
+          lineHeight="32px"
+          className="ff-download-client-header-text"
+        >
+          Download client
+        </Typography>
+        <Icon
+          name="close"
+          color="var(--brand-color)"
+          className="ff-download-client-close-icon"
+          height={12}
+          width={12}
+        />
+      </div>
+
+      <div className="ff-download-client-content-text">
+        <Typography
+          as="div"
+          color="var(--download-client-content-text-color)"
+          fontWeight="semi-bold"
+          textAlign="center"
+          lineHeight="26px"
+        >
+          {description}
+        </Typography>
+        <Typography
+          as="div"
+          className="ff-download-client-description-text"
+          textAlign="center"
+          fontWeight="medium"
+          lineHeight='26px'
+        >
+          Choose OS to Download
+        </Typography>
+
+        <div className="ff-download-client-os-wrapper">
+          {osVersion.map((os) => (
+            <div
+              className="ff-os-version-wrapper"
+              onClick={() => {
+                onClick(os === 'mac_icon' ? 'mac' : os);
+              }}
             >
-              {chooseOSText}
-            </Typography>
-          </div>
-        </div>
-        <div className="ff-download-client-actions">
-          <div className="ff-icons-container" onClick={onClickWindows}>
-            <Icon name="windows" width={32} height={38} />
-          </div>
-          <div className="ff-icons-container" onClick={onClickLinux}>
-            <Icon name="linux" width={32} height={38} />
-          </div>
-          <div className="ff-icons-container" onClick={onClickMac}>
-            <Icon name="mac_icon" width={32} height={38} />
-          </div>
+              <Icon name={os} height={36} width={36} />
+            </div>
+          ))}
         </div>
       </div>
     </div>