pixel-react 1.6.9 → 1.7.1

package/src/components/Checkbox/Checkbox.tsx

@@ -14,7 +14,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
   checked: initialChecked = false,
   partial = false,
   onChange,
-  variant
+  variant,
 }) => {
   const [checked, setChecked] = useState(initialChecked);
 
@@ -35,7 +35,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
       />
       <span
         className={classNames('ff-checkbox-custom', {
-          'ff-checkbox-checked': checked ,
+          'ff-checkbox-checked': checked,
           'ff-storybook-checkbox--partial': partial && !checked,
           [`ff-checkbox--${variant}`]: variant,
           [`ff-checkbox-checked--${variant}`]: checked && variant,
@@ -44,9 +44,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
         {checked && (
           <Icon
             name="tick"
-            height={6}
-            width={8}
             color="var(--primary-icon-color)"
+            className="ff-tick-icon"
           />
         )}
       </span>

package/src/components/Chip/Chip.scss

@@ -22,19 +22,21 @@
     padding: 1px 6px;
     line-height: 15px;
     border: none;
-    transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;
-    box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out,
+      padding 0.4s ease-in-out;
+    box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
       -1px -1px 2px 0px var(--ff-chip-bg) inset,
       1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+      -1px -1px 2px 0px var(--ff-chips-blur-color),
       1px 1px 2px 0px var(--ff-chip-bg);
     &--fullText:hover {
-      box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+      box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
         -1px -1px 2px 0px var(--ff-chip-bg) inset,
         1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+        -1px -1px 2px 0px var(--ff-chips-blur-color),
         1px 1px 2px 0px var(--ff-chip-bg);
-      padding-right: 12px;
+      padding-right: 7px;
     }
-    @extend .fontXs;
 
     &--primary {
       @include chip-variant-background(var(--ff-chips-fill-color));
@@ -68,18 +70,26 @@
     }
     &--public {
       @include chip-variant-background(var(--public-chip-bg-color));
+      color: var(--license_header_text_color);
     }
 
     &--partial-public {
       @include chip-variant-background(var(--partial-public-chip-bg-color));
+      color: var(--license_header_text_color);
     }
 
     &--private {
       @include chip-variant-background(var(--private-chip-bg-color));
+      color: var(--license_header_text_color);
     }
 
     &--disabled {
       @include chip-variant-background(var(--disabled-chip-bg-color));
+      color: var(--table-column-text-color);
+    }
+    &--count {
+      @include chip-variant-background(var(--impact-list-chip-bg-color));
+      color: var(--ff-chip-text-color);
     }
   }
 }

package/src/components/Chip/Chip.stories.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Chip from './Chip';
 import '../../assets/styles/_colors.scss';
 import './Chip.scss';
 import Typography from '../Typography';
+
 const meta: Meta<typeof Chip> = {
   title: 'Components/Chip',
   component: Chip,
@@ -111,7 +113,14 @@ export const Disabled: Story = {
     ...defaultArgs,
     variant: 'disabled',
     fullText: 'Sub Modules 0',
-  },  
+  },    
+};
+export const Count: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'count',
+    fullText: 'Sub Modules 0',
+  },
 };
 
 export default meta;

package/src/components/Chip/Chip.tsx

@@ -26,7 +26,11 @@ const Chip = ({
           { ['ff-default-chip-style--fullText']: !!fullText }
         )}
       >
-        {labelText && <Typography as="p">{labelText}</Typography>}
+        {labelText && (
+          <Typography as="p" fontSize={10} fontWeight="semi-bold">
+            {labelText}
+          </Typography>
+        )}
       </button>
     </div>
   );

package/src/components/Chip/types.ts

@@ -10,7 +10,7 @@ export interface ChipsProps {
   /**
    * The variant of the Chip.
    */
-  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled';
+  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled' | 'count';
 
   /**
    * The callback function to be executed when the Chip is clicked.

package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss}

@@ -12,3 +12,7 @@
     gap: 8px;
   }
 }
+.ff-variable-dropdown {
+  padding: 4px;
+  width: auto;
+}

package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx}

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import AddVariables from './AddVariables';
-import { AddVariableProps, dynamicObject } from './types';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import ConditionalDropdown from './ConditionalDropdown';
+import { ConditionalDropdownProps, dynamicObject } from './types';
 import { variableList } from '../Editor/constants';
 import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
 
 export default {
-  title: 'Components/AddVariables',
-  component: AddVariables,
+  title: 'Components/ConditionalDropdown',
+  component: ConditionalDropdown,
   args: {
     label: 'Add Variables',
     placeholder: 'Enter text',
@@ -18,10 +18,11 @@ export default {
   parameters: {
     layout: 'centered',
   },
-} as Meta<AddVariableProps>;
+} as Meta<ConditionalDropdownProps>;
 
-// Wrapper component to handle state inside Storybook stories
-const Template: StoryFn<AddVariableProps> = (args) => {
+type Story = StoryObj<typeof ConditionalDropdown>;
+
+const Template: StoryFn<ConditionalDropdownProps> = (args) => {
   const [inputValue, setInputValue] = useState<string>('');
   const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
   const [variableName, setVariableName] = useState<string>('');
@@ -34,7 +35,7 @@ const Template: StoryFn<AddVariableProps> = (args) => {
 
   return (
     <>
-      <AddVariables
+      <ConditionalDropdown
         {...args}
         onChange={(value: string) => setInputValue(value)}
         value={inputValue}
@@ -74,9 +75,73 @@ Default.args = {
   onCreateVariableClick: () => alert('Create Variable clicked'),
 };
 
-// Customized story with pre-filled input value
 export const WithInitialValue = Template.bind({});
 WithInitialValue.args = {
   inputValue: 'Initial Text with $',
   onCreateVariableClick: () => alert('Create Variable clicked'),
 };
+
+export const DropdownOnHash: Story = {
+  render: () => {
+    const [hashInputValue, setHashInputValue] = useState<
+      dynamicObject | undefined
+    >();
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+      {
+        _id: '5',
+        name: 'Spreadsheet.xlsx',
+        actualPath: '/spreadsheets/Spreadsheet.xlsx',
+        searchKey: 'spreadsheet',
+        parentId: 'folder3',
+      },
+      {
+        _id: '6',
+        name: 'Code.js',
+        actualPath: '/projects/Code.js',
+        searchKey: 'code',
+        parentId: 'folder4',
+      },
+    ];
+
+    return (
+      <>
+        <ConditionalDropdown
+          label="Select Path Using #"
+          placeholder="Enter # to search files"
+          isHash
+          dataFiles={testData}
+          dropdownWidth="auto"
+          setHashInputValue={setHashInputValue}
+        />
+      </>
+    );
+  },
+};

package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx}

@@ -2,25 +2,31 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import VariableDropdown from '../Editor/VariableDropdown';
 import Icon from '../Icon';
 import Input from '../Input';
-import { AddVariableProps, dynamicObject } from './types';
-import './AddVariables.scss';
+import { ConditionalDropdownProps, dynamicObject } from './types';
+import './ConditionalDropdown.scss';
 import React, { useState, useRef, useEffect } from 'react';
+import OptionsDropdown from './OptionsDropdown';
 
-const AddVariables: React.FC<AddVariableProps> = ({
+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 [inputValue, setInputValue] = useState<string>(value);
   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(() => {
@@ -31,37 +37,48 @@ const AddVariables: React.FC<AddVariableProps> = ({
   }, [cursorPosition]);
 
   useEffect(() => {
-    const newPayload = replaceVariablesWithIds(inputValue);
-    onChange(newPayload);
+    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) => {
-      // Find the matching variable in the list by name
       const foundVariable = variableList.find(
         (varaible) => varaible.name === variableName.trim()
       );
-      return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`; // Replace if found, otherwise keep as is
+      return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
     });
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const fieldValue = event.target.value;
     setInputValue(fieldValue);
-
-    // Show dropdown only if the last character typed is `$`
     const cursorPos = inputRef.current?.selectionStart || 0;
     const isDollarTyped = fieldValue[cursorPos - 1] === '$';
 
-    if (isDollarTyped) {
-      setShowDropdown(true);
+    if (isHash) {
+      setShowDropdown(fieldValue.startsWith('#'));
     } else {
-      setShowDropdown(false); // Close if it's a space or other characters
-    }
-    if (fieldValue?.includes('$')) {
-      setShowCreateVariableIcon(false);
-    } else {
-      setShowCreateVariableIcon(true);
+      if (isDollarTyped) {
+        setShowDropdown(true);
+      } else {
+        setShowDropdown(false);
+      }
+      if (fieldValue?.includes('$')) {
+        setShowCreateVariableIcon(false);
+      } else {
+        setShowCreateVariableIcon(true);
+      }
     }
   };
 
@@ -78,14 +95,18 @@ const AddVariables: React.FC<AddVariableProps> = ({
           : 'PEV'
       }_${item.name}}`;
 
-      const newValue =
-        inputValue.slice(0, selectionStart || 0) +
-        dollarSyntax +
-        inputValue.slice(selectionEnd || 0);
+      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);
-
-      // Close the dropdown after inserting the variable
       setShowDropdown(false);
     }
   };
@@ -104,7 +125,7 @@ const AddVariables: React.FC<AddVariableProps> = ({
           label={label}
           placeholder={placeholder}
         />
-        {!checkEmpty(value) && showCreateVariableIcon && (
+        {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
           <Icon
             onClick={onCreateVariableClick}
             name="add_variable"
@@ -115,15 +136,24 @@ const AddVariables: React.FC<AddVariableProps> = ({
         )}
       </div>
       {showDropdown && (
-        <VariableDropdown
-          position="relative"
-          width={dropdownWidth}
-          optionsList={variableList}
-          onSelectVariable={handleDropdownClick}
-        />
-      )}
+    isHash ? (
+      <OptionsDropdown
+        position="relative"
+        width={dropdownWidth}
+        filteredOptions={filteredOptions}
+        onSelectVariable={handleDropdownClick}
+      />
+    ) : (
+      <VariableDropdown
+        position="relative"
+        width={dropdownWidth}
+        optionsList={variableList}
+        onSelectVariable={handleDropdownClick}
+      />
+    )
+  )}
     </div>
   );
 };
 
-export default AddVariables;
+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/{AddVariables → ConditionalDropdown}/types.ts

@@ -1,12 +1,33 @@
+import { dropdownPositionType } from "../Editor/types";
+
 export type dynamicObject = {
   [key: string]: any;
 };
 
-export interface AddVariableProps {
+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
    */
@@ -20,7 +41,7 @@ export interface AddVariableProps {
    * @param value
    * @returns
    */
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
   /**
    * Function to handle create variable icon click
    */
@@ -32,11 +53,11 @@ export interface AddVariableProps {
   /**
    * Name | name of the input field
    */
-  name: string;
+  name?: string;
   /**
    * value | input field value
    */
-  value: string;
+  value?: string;
   /**
    * variants to set color/style of the input field
    */
@@ -44,7 +65,7 @@ export interface AddVariableProps {
   /**
    * type to set color/style of the input field
    */
-  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
   /**
    * error | If true, error message will be displayed
    */
@@ -100,4 +121,40 @@ export interface AddVariableProps {
    * 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;
+}