pixel-react 1.5.3 → 1.5.5

package/src/components/Editor/types.ts

@@ -18,7 +18,6 @@ export interface EditorProps {
    */
   height: string;
 
-
   /**
    * read only
    */
@@ -45,7 +44,7 @@ export interface EditorProps {
   /**
    * onChange function to handle the input changes
    */
-  handleChange: (value: string | undefined, _event: any) => {};
+  handleChange: (value: string | undefined, _event: any) => void;
 
   /**
    * Theme

package/src/components/FileDropzone/FileDropzone.scss

@@ -30,8 +30,9 @@
     text-align: center;
     gap: 8px;
     transition: background-color 0.2s ease;
-    
-     &:hover, &--active {
+
+    &:hover,
+    &--active {
       background-color: var(--file-dropzone-selected-color);
     }
 
@@ -94,7 +95,7 @@
           display: flex;
           align-items: center;
           gap: 4px;
-          width: 60%;
+          width: 90%;
 
           .ff-file-info__icon {
             @include center;

package/src/components/Form/Forms.tsx

@@ -20,7 +20,7 @@ const Forms = <T extends Form.FieldValues>(
   const { handleSubmit } = methods;
   const extendedMethods = {
     ...methods,
-    Form,
+    Form: Form,
   };
   useImperativeHandle(ref, () => ({
     submit: handleSubmit(onSubmit),

package/src/components/Icon/iconList.ts

@@ -30,6 +30,7 @@ import FireflinkIcon from '../../assets/Icons/fireflink_icon.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
+import Alert from '../../assets/icons/alert.svg?react';
 
 import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
 import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
@@ -206,7 +207,7 @@ import RunManualTestcaseIcon from '../../assets/icons/run_manual_testcase_icon.s
 import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_icon.svg?react';
 import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
 import ReplaceIcon from '../../assets/icons/replace_icon.svg?react';
-import HeaderPreset from '../../assets/icons/Header_preset.svg?react';
+import HeaderPreset from '../../assets/icons/header_preset.svg?react';
 import ProjectElement from '../../assets/icons/project_element.svg?react';
 import Element from '../../assets/icons/element.svg?react';
 import StepGroup from '../../assets/icons/step_group.svg?react';
@@ -214,8 +215,13 @@ import Variable from '../../assets/icons/variable.svg?react';
 import Defects from '../../assets/icons/defects.svg?react';
 import ApprovalPending from '../../assets/icons/approval_pending.svg?react';
 import Configuration from '../../assets/icons/configuration.svg?react';
+import NoData from '../../assets/icons/no_data.svg?react';
+import AddUser from '../../assets/icons/add_user.svg?react';
+import RemoveUser from '../../assets/icons/remove_user.svg?react';
+import AddToArchive from '../../assets/icons/add_archive.svg?react';
 
 Components['success'] = ToastSuccessIcon;
+Components['alert'] = Alert;
 Components['delete_info'] = DeleteInfoIcon;
 Components['warning'] = WarningIcon;
 Components['toast_info'] = ToastInfoIcon;
@@ -415,7 +421,7 @@ Components['quick_run_setting'] = QuickRunSettingIcon;
 Components['run_manual_testcase'] = RunManualTestcaseIcon;
 Components['run_automation_scripts'] = RunAutomationScriptsIcon;
 Components['eye_open_icon'] = EyeOpenIcon;
-Components['replace_icon']=ReplaceIcon;
+Components['replace_icon'] = ReplaceIcon;
 Components['header_preset'] = HeaderPreset;
 Components['project_element'] = ProjectElement;
 Components['element'] = Element;
@@ -424,5 +430,9 @@ Components['variable'] = Variable;
 Components['defects'] = Defects;
 Components['approval_pending'] = ApprovalPending;
 Components['configuration'] = Configuration;
+Components['no_data'] = NoData;
+Components['add_user'] = AddUser;
+Components['add_to_archive'] = AddToArchive;
+Components['remove_user'] = RemoveUser;
 
 export default Components;

package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx

@@ -24,13 +24,13 @@ export const Default: Story = {
       },
       {
         iconName: 'view_access_icon',
-        iconLabel: 'View',
+        iconLabel: 'View Access',
         disabled: false,
         disableMessage: '',
       },
       {
         iconName: 'edit',
-        iconLabel: 'Edit',
+        iconLabel: 'Edit Access',
         disabled: false,
         disableMessage: '',
       },

package/src/components/IconRadioGroup/IconRadioGroup.tsx

@@ -54,8 +54,6 @@ const IconRadioGroup: React.FC<IconRadioGroupProps> = ({
             >
               <Icon
                 name={item.iconName}
-                height={14}
-                width={14}
                 hoverEffect={false}
                 color={
                   selectedValue === item.iconName

package/src/components/StatusButton/StatusButton.scss

@@ -8,7 +8,7 @@
   border-radius: 4px;
   padding: 0 4px;
   cursor: pointer;
-  width: 76px;
+  width: 80px;
   height: 16px;
 
   &__text {

package/src/components/TableTree/TableTree.scss

@@ -11,6 +11,7 @@
     border-collapse: collapse;
     width: 100%;
     text-align: left;
+    position: relative; /* Ensure the table has a relative position for z-index to work */
   }
 
   .ff-toggle-arrow-icon {
@@ -36,14 +37,6 @@
     }
   }
 
-  th,
-  td {
-    padding: 0 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   th {
     vertical-align: middle;
     height: 32px;
@@ -108,42 +101,52 @@
   }
 
   .ff-node-li {
-    position: relative;
     --indent-size: 18px;
     --total-children-height: var(--node-height);
 
-    td:first-child {
-      padding-left: calc(var(--level) * var(--indent-size));
-      height: 32px;
-    }
-
-    // Vertical line connecting the node to the parent
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: calc(var(--level) * var(--indent-size) - 4px);
-      width: 1px;
-      height: calc(var(--total-children-height));
-      background-color: var(--tree-connecting-lines-color);
-      z-index: 1;
-    }
-
-    // Horizontal line connecting child node to parent
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: calc(var(--level) * var(--indent-size) - 4px);
-      width: 12px;
-      height: 1px;
-      background-color: var(--tree-connecting-lines-color);
-      z-index: 1;
-    }
+    td {
+      padding: 0 8px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
 
-    // For the last child node, limit the vertical line
-    &.ff-is-last::before {
-      height: calc(var(--node-height) / 2);
+      &:first-child {
+        position: sticky;
+
+        padding-left: calc(var(--level) * var(--indent-size));
+        height: 32px;
+        position: sticky; /* Make first td sticky */
+        left: 0;
+        z-index: 10; /* Ensure it stays on top of the other cells */
+        background-color: var(--slider-table-color);
+        // Vertical line connecting the node to the parent
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: calc(var(--level) * var(--indent-size) - 4px);
+          width: 1px;
+          height: calc(var(--total-children-height));
+          // background-color: var(--tree-connecting-lines-color);
+          background-color: var(--tree-connecting-lines-color);
+          z-index: 9999;
+        }
+
+        // Horizontal line connecting child node to parent
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: calc(var(--level) * var(--indent-size) - 4px);
+          width: 12px;
+          height: 1px;
+          background-color: var(--tree-connecting-lines-color);
+          z-index: 10; /* Ensure it stays above the content */
+        }
+
+        &.ff-is-last::before {
+          height: calc(var(--node-height) / 2);
+        }
+      }
     }
 
     // Remove the lines for root level
@@ -153,17 +156,10 @@
     }
   }
 
-  th:first-child {
-    position: sticky;
-    left: 0;
-    z-index: 999;
-    background-color: var(--slider-table-color);
-  }
+  th:first-child,
   td:first-child {
     position: sticky;
     left: 0;
-    z-index: 99;
-    background-color: var(--ff-status-card-text-color);
   }
 }
 

package/src/components/TableTree/TableTree.tsx

@@ -1,6 +1,12 @@
 /* eslint-disable */
 // @ts-nocheck
-import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { prepareData } from '../../utils/TableCell/TableCell';
 import Icon from '../Icon';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
@@ -162,7 +168,7 @@ const TableTree = ({
       return columnsData.map((column: any) => {
         if (column.accessor === 'title') {
           return (
-            <td className="ff-title-container">
+            <td className={`ff-title-container ${isLast ? 'ff-is-last' : ''}`}>
               <span className="ff-toggle-folder" onClick={handleToggleExpand}>
                 {node.folder && (
                   <span
@@ -236,9 +242,7 @@ const TableTree = ({
       <>
         <tr
           ref={nodeRef}
-          className={`ff-node-li ${node.children ? 'ff-has-children' : ''} ${
-            isLast ? 'ff-is-last' : ''
-          }`}
+          className={`ff-node-li ${node.children ? 'ff-has-children' : ''} `}
           style={
             {
               '--level': level,
@@ -262,7 +266,14 @@ const TableTree = ({
   const renderTree = (nodes: any, level = 0) => {
     return nodes.map((node: any, index: number) => {
       const isLast = index === nodes.length - 1;
-      return <TreeNode key={node.key || index} node={node} level={level} isLast={isLast} />;
+      return (
+        <TreeNode
+          key={node.key || index}
+          node={node}
+          level={level}
+          isLast={isLast}
+        />
+      );
     });
   };
 

package/src/components/Toast/Toast.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Toaster from './Toast';
 import Button from '../Button';
@@ -9,17 +9,17 @@ const meta: Meta<typeof Toaster> = {
   parameters: {
     layout: 'centered',
   },
-
   tags: ['autodocs'],
 };
 
 type Story = StoryObj<typeof Toaster>;
+
 const defaultArgs = {
   isOpen: false,
   toastTitle: 'Success',
-  toastMessage: 'Variable name Requested for Review successfully',
+  toastMessage: 'Operation completed successfully!',
   closeButtonLabel: 'x',
-  displayDuration: 3000, // Set toast displayDuration in milliseconds
+  displayDuration: 3000, // Set toast display duration in milliseconds
 };
 
 export const Controlled: Story = {
@@ -27,49 +27,19 @@ export const Controlled: Story = {
     ...defaultArgs,
   },
   render: () => {
-    const [open1, setOpen1] = useState(false);
-    const handleButtonClick1 = () => {
-      setOpen1(true);
-    };
-    const handleCancelClick1 = () => {
-      setOpen1(false);
-    };
+    const [toasts, setToasts] = useState({
+      success: false,
+      info: false,
+      confirm: false,
+      warning: false,
+      alert: false,
+      error: false,
+    });
 
-    const [open2, setOpen2] = useState(false);
-    const handleButtonClick2 = () => {
-      setOpen2(true);
-    };
-    const handleCancelClick2 = () => {
-      setOpen2(false);
-    };
-    const [open3, setOpen3] = useState(false);
-    const handleButtonClick3 = () => {
-      setOpen3(true);
-    };
-    const handleCancelClick3 = () => {
-      setOpen3(false);
-    };
-    const [open4, setOpen4] = useState(false);
-    const handleButtonClick4 = () => {
-      setOpen4(true);
-    };
-    const handleCancelClick4 = () => {
-      setOpen4(false);
-    };
-    const [open5, setOpen5] = useState(false);
-    const handleButtonClick5 = () => {
-      setOpen5(true);
-    };
-    const handleCancelClick5 = () => {
-      setOpen5(false);
-    };
-    const [open6, setOpen6] = useState(false);
-    const handleButtonClick6 = () => {
-      setOpen6(true);
-    };
-    const handleCancelClick6 = () => {
-      setOpen6(false);
+    const handleToastToggle = (key: keyof typeof toasts) => {
+      setToasts((prev) => ({ ...prev, [key]: !prev[key] }));
     };
+
     return (
       <div className="fireflink-stories-toaster-container">
         <div className="fireflink-stories-toaster-container-row">
@@ -77,48 +47,45 @@ export const Controlled: Story = {
             <Button
               variant="primary"
               label="SUCCESS"
-              onClick={handleButtonClick1}
-              disabled={false}
+              onClick={() => handleToastToggle('success')}
             />
             <Toaster
               {...defaultArgs}
-              isOpen={open1}
+              isOpen={toasts.success}
               variant="success"
               toastTitle="Success!"
-              onCancelClick={handleCancelClick1}
-              toastMessage="Variable name Requested for Review successfully"
+              toastMessage="Variable name requested for review successfully."
+              onCancelClick={() => handleToastToggle('success')}
             />
           </div>
           <div>
             <Button
               variant="secondary"
               label="Information"
-              onClick={handleButtonClick2}
-              disabled={false}
+              onClick={() => handleToastToggle('info')}
             />
             <Toaster
               {...defaultArgs}
-              isOpen={open2}
+              isOpen={toasts.info}
               variant="info"
-              toastTitle="Info!!!"
-              onCancelClick={handleCancelClick2}
-              toastMessage="Data updated succesfully"
+              toastTitle="Info!"
+              toastMessage="Data updated successfully."
+              onCancelClick={() => handleToastToggle('info')}
             />
           </div>
           <div>
             <Button
               variant="delete"
               label="Confirmation"
-              onClick={handleButtonClick3}
-              disabled={false}
+              onClick={() => handleToastToggle('confirm')}
             />
             <Toaster
               {...defaultArgs}
-              isOpen={open3}
+              isOpen={toasts.confirm}
               variant="confirm"
-              toastTitle="Delete !!"
-              onCancelClick={handleCancelClick3}
-              toastMessage="Are you sure to delete data?"
+              toastTitle="Delete Confirmation"
+              toastMessage="Are you sure you want to delete this data?"
+              onCancelClick={() => handleToastToggle('confirm')}
             />
           </div>
         </div>
@@ -126,49 +93,46 @@ export const Controlled: Story = {
           <div>
             <Button
               variant="primary"
-              label="WARNING "
-              onClick={handleButtonClick4}
-              disabled={false}
+              label="WARNING"
+              onClick={() => handleToastToggle('warning')}
             />
             <Toaster
               {...defaultArgs}
-              isOpen={open4}
+              isOpen={toasts.warning}
               variant="warning"
               toastTitle="Warning!"
-              onCancelClick={handleCancelClick4}
-              toastMessage="Variable name Requested for Review successfully"
+              toastMessage="Action might have consequences."
+              onCancelClick={() => handleToastToggle('warning')}
             />
           </div>
           <div>
             <Button
               variant="primary"
-              label="click "
-              onClick={handleButtonClick5}
-              disabled={false}
+              label="Alert"
+              onClick={() => handleToastToggle('alert')}
             />
             <Toaster
               {...defaultArgs}
-              isOpen={open5}
-              variant="success"
-              toastTitle="Success!"
-              onCancelClick={handleCancelClick5}
-              toastMessage="Variable name Requested for Review successfully"
+              isOpen={toasts.alert}
+              variant="alert"
+              toastTitle="Alert!"
+              toastMessage="Immediate action required!"
+              onCancelClick={() => handleToastToggle('alert')}
             />
           </div>
           <div>
             <Button
               variant="delete"
-              label="ERROR "
-              onClick={handleButtonClick6}
-              disabled={false}
+              label="ERROR"
+              onClick={() => handleToastToggle('error')}
             />
             <Toaster
               {...defaultArgs}
-              isOpen={open6}
+              isOpen={toasts.error}
               variant="danger"
-              toastTitle="Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!"
-              onCancelClick={handleCancelClick6}
-              toastMessage="SomethingVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariable"
+              toastTitle="Error!"
+              toastMessage="An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request."
+              onCancelClick={() => handleToastToggle('error')}
             />
           </div>
         </div>

package/src/components/Toast/Toast.tsx

@@ -26,10 +26,11 @@ const Toaster: React.FC<ToasterProps> = ({
     warning: 'warning',
     danger: 'error',
     confirm: 'delete',
+    alert: 'alert',
   };
 
   const getToasterIcon = (
-    variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm'
+    variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm' | 'alert'
   ) => {
     const name = iconMap[variant];
     return <Icon name={name} height={40} width={40} />;

package/src/components/Toast/types.ts

@@ -3,7 +3,7 @@ export interface ToasterProps {
   isOpen: boolean;
 
   /**Variant for different type of toast message. */
-  variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm';
+  variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm' | 'alert';
 
   /**Title of the toaster  */
   toastTitle: string;

package/src/components/Toastify/Toastify.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Toastify, toast } from './Toastify';
 import Button from '../Button';
@@ -26,7 +27,6 @@ export const Controlled: Story = {
     ...defaultArgs,
   },
   render: () => (
-    
     /*
       Note:-
       import { Toastify, toast } from 'pixel-react';
@@ -40,7 +40,7 @@ export const Controlled: Story = {
       <Button
         variant="primary"
         label="Show Success Toast"
-        onClick={() => toast.success('Your request was successful!')}
+        onClick={() => toast.success('Your request was successful!','Your request was successful! Your request was successful! Your request was successful! Your request was successful!')}
       />
       <Button
         variant="delete"
@@ -49,20 +49,20 @@ export const Controlled: Story = {
       />
       <Button
         variant="warning"
-        label="Show Object Toast"
+        label="Show warning Object Toast"
         onClick={() =>
           toast.warning('Something went wrong!', { a: 'hi', b: '5', c: 10 })
         }
       />
       <Button
-        variant="warning"
-        label="Show Array Toast"
-        onClick={() => toast.warning('Something went wrong!', ['1', 4, 'hi'])}
+        variant="secondary"
+        label="Show info Array Toast"
+        onClick={() => toast.info('Something went wrong!', ['1', 4, 'hi'])}
       />
       <Button
-        variant="warning"
-        label="Show function Toast"
-        onClick={() => toast.warning('Something went wrong!', () => {})}
+        variant="tertiary"
+        label="Show alert function Toast"
+        onClick={() => toast.alert('Something went wrong!', () => {})}
       />
     </div>
   ),

package/src/components/Toastify/Toastify.tsx

@@ -89,4 +89,6 @@ export const toast = {
     openToast('warning', arg1, arg2),
   info: (arg1: AcceptedType, arg2?: AcceptedType) =>
     openToast('info', arg1, arg2),
+  alert: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('alert', arg1, arg2),
 };

package/src/components/Toastify/types.ts

@@ -1,4 +1,4 @@
-export type Variant = 'success' | 'warning' | 'danger' | 'info' | 'confirm';
+export type Variant = 'success' | 'warning' | 'danger' | 'info' | 'alert';
 
 export interface ToastProps {
   isOpen: boolean;

package/src/index.ts

@@ -61,6 +61,7 @@ import ModuleChip from './components/ModulesChip/ModuleChip';
 import IconRadialChart from './components/Charts/IconRadialChart';
 import AttachImage from './components/AttachImage';
 import StatusCard from './components/StatusCard';
+import VariableDropdown from './components/Editor/VariableDropdown';
 
 import LineChart from './components/Charts/LineChart';
 // Utils imports
@@ -155,6 +156,7 @@ export {
   AttachImage,
   ToggleSwitch,
   Avatar,
+  VariableDropdown,
   // utils exports
   checkEmpty,
   getExtension,