pixel-react 1.6.2 → 1.6.5

package/src/components/Charts/RadialChart/RadialChart.tsx

@@ -6,6 +6,7 @@ import {
   ArcResult,
   ArcAnglesResult,
 } from './types';
+import Tooltip from '../../Tooltip';
 
 const useColorMappings = () =>
   useMemo(() => {
@@ -117,54 +118,59 @@ const RadialChart: React.FC<RadialChartProps> = ({
           calculateArcAngles(status.value, total, currentAngle, radius);
         currentAngle = endAngle;
         return (
-          <svg
-            key={status.status}
-            width={svgSize}
-            height={svgSize}
-            viewBox={`0 0 ${svgSize} ${svgSize}`}
-            onClick={() => onClick(status)}
-            role="img"
-            aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
+          <Tooltip
+            title={`${status.status}: ${Math.round(percentage * 100)}%`}
+            zIndex={1000}
           >
-            <g
-              transform={`translate(${radius + lineWidth}, ${
-                radius + lineWidth
-              })`}
+            <svg
+              key={status.status}
+              width={svgSize}
+              height={svgSize}
+              viewBox={`0 0 ${svgSize} ${svgSize}`}
+              onClick={() => onClick(status)}
+              role="img"
+              aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
             >
-              {/* Background Circle */}
-              <path
-                d={backgroundArcPath}
-                fill="none"
-                stroke={
-                  backgroundColorMapping[
-                    normalizedStatus as keyof typeof colorMapping
-                  ]
-                }
-                strokeWidth={lineWidth}
-              />
-              {/* Status Arc */}
-              <path
-                d={foregroundArcPath}
-                fill="none"
-                stroke={
-                  colorMapping[normalizedStatus as keyof typeof colorMapping]
-                }
-                strokeWidth={lineWidth}
-              />
-              {/* Percentage Text */}
-              <text
-                x="0"
-                y="0"
-                fill={
-                  colorMapping[normalizedStatus as keyof typeof colorMapping]
-                }
-                textAnchor="middle"
-                dominantBaseline="central"
+              <g
+                transform={`translate(${radius + lineWidth}, ${
+                  radius + lineWidth
+                })`}
               >
-                {`${Math.round(percentage * 100)}%`}
-              </text>
-            </g>
-          </svg>
+                {/* Background Circle */}
+                <path
+                  d={backgroundArcPath}
+                  fill="none"
+                  stroke={
+                    backgroundColorMapping[
+                      normalizedStatus as keyof typeof colorMapping
+                    ]
+                  }
+                  strokeWidth={lineWidth}
+                />
+                {/* Status Arc */}
+                <path
+                  d={foregroundArcPath}
+                  fill="none"
+                  stroke={
+                    colorMapping[normalizedStatus as keyof typeof colorMapping]
+                  }
+                  strokeWidth={lineWidth}
+                />
+                {/* Percentage Text */}
+                <text
+                  x="0"
+                  y="0"
+                  fill={
+                    colorMapping[normalizedStatus as keyof typeof colorMapping]
+                  }
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                >
+                  {`${Math.round(percentage * 100)}%`}
+                </text>
+              </g>
+            </svg>
+          </Tooltip>
         );
       })}
     </div>

package/src/components/CreateVariable/CreateVariableSlider.scss

@@ -0,0 +1,18 @@
+.ff-create-variable-slider {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .ff-hide-value-content {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.ff-create-slider-footer {
+  width: 100%;
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

package/src/components/CreateVariable/CreateVariableSlider.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import CreateVariableSlider from './CreateVariableSlider';
+import { CreateVariableProps } from './types';
+import React from 'react';
+
+const meta: Meta<typeof CreateVariableSlider> = {
+  title: 'Components/CreateVariableSlider',
+  component: CreateVariableSlider,
+};
+
+export default meta;
+type Story = StoryObj<typeof CreateVariableSlider>;
+
+export const WithState: Story = {
+  render: (args) => {
+    const [variableName, setVariableName] = useState('');
+    const [value, setValue] = useState('');
+    const [selectedVariableType, setSelectedVariableType] = useState({
+      label: 'Local Variable',
+      value: 'LOCAL',
+    });
+    const [hideValue, setHideValue] = useState(false);
+
+    const variableTypeList = [
+      { label: 'Local Variable', value: 'LOCAL' },
+      { label: 'Global Variable', value: 'GLOBAL' },
+      { label: 'Project Environment Variable', value: 'PROJECT_ENVIRONMENT' },
+    ];
+    const handleNameChange = (value) => {
+      setVariableName(value);
+    };
+    const handleValueChange = (value) => {
+      setValue(value);
+    };
+    const handleTypeChange = (value) => {
+      setSelectedVariableType(value);
+    };
+    const handleSubmit = () => {
+      let variable = {
+        name: variableName,
+        value,
+        type: selectedVariableType.value,
+        hideValue,
+      };
+      console.log('Variable :', variable);
+    };
+
+    return (
+      <CreateVariableSlider
+        {...args}
+        isOpen={true} // Ensures the drawer is open for interaction
+        variableName={variableName}
+        value={value}
+        selectedVariableType={selectedVariableType}
+        hideValue={hideValue}
+        variableTypesList={variableTypeList}
+        onNameChange={handleNameChange}
+        onValueChange={handleValueChange}
+        onVariableTypeChange={handleTypeChange}
+        onHideChange={setHideValue}
+        handleSubmit={handleSubmit}
+      />
+    );
+  },
+};

package/src/components/CreateVariable/CreateVariableSlider.tsx

@@ -0,0 +1,95 @@
+import { type FC, type JSX } from 'react';
+import Drawer from '../Drawer';
+import { CreateVariableProps } from './types';
+import Input from '../Input';
+import Select from '../Select';
+import './CreateVariableSlider.scss';
+import Checkbox from '../Checkbox';
+import Icon from '../Icon';
+import Button from '../Button';
+import Tooltip from '../Tooltip';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+const CreateVariableSlider: FC<CreateVariableProps> = ({
+  isOpen,
+  variableTypesList = [],
+  onClose,
+  onNameChange,
+  onValueChange,
+  variableName,
+  value,
+  onVariableTypeChange,
+  selectedVariableType,
+  hideValue = false,
+  onHideChange,
+  handleSubmit,
+}): JSX.Element => {
+  const FooterContent: FC = (): JSX.Element => {
+    return (
+      <div className="ff-create-slider-footer">
+        <Button onClick={onClose} label="Cancel" variant="tertiary" />
+        <Button
+          variant="primary"
+          label="create"
+          type="submit"
+          onClick={handleSubmit}
+          disabled={checkEmpty(variableName) || checkEmpty(value)}
+        />
+      </div>
+    );
+  };
+  return (
+    <Drawer
+      onClose={onClose}
+      isOpen={isOpen}
+      title="Create Variable"
+      width="284px"
+      height="222px"
+      top="35%"
+      right={8}
+      isFooterRequired={true}
+      overlay
+      footerContent={<FooterContent />}
+    >
+      <div className="ff-create-variable-slider">
+        <Input
+          label="Variable Name"
+          required
+          type="text"
+          name="variable name"
+          value={variableName}
+          onChange={(event) => onNameChange(event.target.value)}
+        />
+        <Select
+          label="Variable Type"
+          required
+          onChange={(option: any) => onVariableTypeChange(option)}
+          selectedOption={selectedVariableType}
+          optionsList={variableTypesList}
+          optionZIndex={99999}
+        />
+        <Input
+          label="Variable Value"
+          required
+          type="text"
+          name="value"
+          value={value}
+          onChange={(event) => onValueChange(event.target.value)}
+        />
+        <div className="ff-hide-value-content">
+          <Checkbox
+            onChange={(event) => onHideChange(event.target.checked)}
+            name="hide value"
+            label="Hide Value"
+            checked={hideValue}
+          />
+          <Tooltip title="Once the value is hidden, it cannot be undone">
+            <Icon name="info" width={12} height={12} />
+          </Tooltip>
+        </div>
+      </div>
+    </Drawer>
+  );
+};
+
+export default CreateVariableSlider;

package/src/components/CreateVariable/index.ts

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

package/src/components/CreateVariable/types.ts

@@ -0,0 +1,58 @@
+export type variableType = 'LOCAL' | 'GLOBAL' | 'GROUP' | 'PROJECT_ENVIRONMENT';
+
+export type DynamicObj = {
+  [key: string]: any;
+};
+
+export interface CreateVariableProps {
+  /**
+   * Open Create variable Slider
+   */
+  isOpen: boolean;
+  /**
+   * Value for the variable name
+   */
+  variableName: string;
+  /**
+   * Value for the variable to be created
+   */
+  value: string;
+  /**
+   * List for the variable types
+   */
+  variableTypesList: DynamicObj[];
+  /**
+   * Selected variable type
+   */
+  selectedVariableType: DynamicObj;
+  /**
+   * Function to handle variable type change
+   * @param option
+   * @returns
+   */
+  onVariableTypeChange: (option: DynamicObj) => void;
+  /**
+   * Function to handle close
+   */
+  onClose?: () => void;
+  /**
+   * onChange of name
+   */
+  onNameChange: (value: string | boolean) => void;
+  /**
+   * onChange of value
+   */
+  onValueChange: (value: string | boolean) => void;
+  /**
+   * Hide value
+   */
+  hideValue: boolean;
+  /**
+   * onChange for hide value
+   */
+  onHideChange: (value: boolean) => void;
+  /**
+   * Function to handle submit
+   */
+  handleSubmit: () => void;
+}

package/src/components/Drawer/Drawer.scss

@@ -19,7 +19,6 @@
     right: 0;
     bottom: 0;
     top: 87px;
-    min-width: 450px;
     background-color: var(--primary-button-text-color);
     z-index: 999;
     transform: translateX(100%);
@@ -123,6 +122,7 @@
       z-index: 1000;
       background-color: var(--base-bg-color);
       transform: translateY(3px);
+      border-radius: 0 0 4px 4px;
 
       .button-container {
         display: flex;

package/src/components/Drawer/Drawer.stories.tsx

@@ -115,7 +115,6 @@ export const WithTertiaryButtons: Story = {
   },
 };
 
-
 export const WithCustomZIndex: Story = {
   args: {
     ...defaultArgs,

package/src/components/Drawer/Drawer.tsx

@@ -36,6 +36,9 @@ const Drawer: FC<DrawerProps> = ({
   zIndex = 999,
   secondLayerZIndex = false,
   top,
+  height,
+  width,
+  right = 0,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -85,7 +88,7 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
-        style={{ zIndex, top }}
+        style={{ zIndex, top, height, width, right }}
       >
         {showHeader && (
           <div

package/src/components/Drawer/Types.ts

@@ -141,4 +141,17 @@ export interface DrawerProps {
    * Custom top for the drawer
    */
   top?: string;
+  /**
+   * Height of the drawer
+   */
+  height?: string;
+  /**
+   *
+   * width of the drawer
+   */
+  width?: string;
+  /**
+   * Position from right
+   */
+  right?: string | number;
 }

package/src/components/FileDropzone/FileDropzone.scss

@@ -65,7 +65,6 @@
 
   .ff-file-details-wrapper {
     @include column-flex-gap(10px);
-    width: 640px;
     max-height: 300px;
     overflow-y: auto;
     scroll-behavior: smooth;

package/src/components/Icon/iconList.ts

@@ -222,6 +222,14 @@ import AddToArchive from '../../assets/icons/add_archive.svg?react';
 import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
 import InfoUser from '../../assets/icons/info_user.svg?react';
 import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
+import ProjectStatusIcon from '../../assets/icons/project_status_icon.svg?react';
+import captureIcon from '../../assets/icons/capture_icon.svg?react';
+import rotateIcon from '../../assets/icons/rotate_icon.svg?react';
+import tapIcon from '../../assets/icons/tap_icon.svg?react';
+import refreshIcon from '../../assets/icons/refresh_icon.svg?react';
+import swipeIcon from '../../assets/icons/swipe_icon.svg?react';
+import backward from '../../assets/icons/backward.svg?react';
+import forward from '../../assets/icons/forward.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -442,5 +450,13 @@ Components['remove_user'] = RemoveUser;
 Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
 Components['info_user'] = InfoUser;
 Components['web_service_icon'] = WebServiceIcon;
+Components['project_status_icon'] = ProjectStatusIcon;
+Components['capture_icon'] = captureIcon;
+Components['backward'] = backward;
+Components['forward'] = forward;
+Components['refresh_icon'] = refreshIcon;
+Components['rotate_icon'] = rotateIcon;
+Components['tap_icon'] = tapIcon;
+Components['swipe_icon'] = swipeIcon;
 
 export default Components;

package/src/components/IconButton/IconButton.scss

@@ -9,32 +9,32 @@
   cursor: pointer;
   @include mixins.center-content();
   gap: 8px;
-  background-color: var(--secondary-icon-color);
+  background-color: var(--hover-color);
   padding: 2px 8px 2px 2px;
-  border: 1px solid transparent;
+  border: 1px solid var(--secondary-icon-color);
   .button-icon {
     width: 20px;
     height: 20px;
-    border: 1px solid transparent;
+    border: 1px solid var(--primary-icon-color);
     border-radius: 50%;
     @include mixins.center-content();
-    background-color: var(--hover-color);
+    background-color: var(--secondary-icon-color);
     .ff-icon-color {
       path {
-        color: var(--secondary-icon-color);
+        color: var(--primary-icon-color);
       }
     }
   }
   .icon-name {
-    color: var(--primary-icon-color);
+    color: var(--secondary-icon-color);
     @include mixins.center-content();
   }
   &:hover {
-    border: 1px solid var(--secondary-icon-color);
-    background-color: var(--hover-color);
+    border: 1px solid transparent;
+    background-color: var(--secondary-icon-color);
     .icon-name {
       font-weight: 600;
-      color: var(--secondary-icon-color);
+      color: var(--primary-icon-color);
       @include mixins.center-content();
     }
     .button-icon {
@@ -43,10 +43,10 @@
       border: 1px solid transparent;
       border-radius: 50%;
       @include mixins.center-content();
-      background-color: var(--secondary-icon-color);
+      background-color: var(--hover-color);
       .ff-icon-color {
         path {
-          color: var(--primary-icon-color);
+          color: var(--secondary-icon-color);
         }
       }
     }

package/src/components/IconButton/IconButton.tsx

@@ -9,9 +9,10 @@ const IconButton: React.FC<IconButtonProps> = ({
   label,
   iconName = 'plus_user_icon',
   onClick,
+  ref,
 }) => {
   return (
-    <button onClick={onClick} className={classNames('ff-plus-icon')}>
+    <button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
       <div className={classNames('button-icon')}>
         <Icon
           height={12}

package/src/components/IconButton/types.ts

@@ -2,4 +2,5 @@ export interface IconButtonProps {
   label: string;
   iconName: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  ref?: React.RefObject<HTMLButtonElement>;
 }

package/src/components/MiniModal/MiniModal.scss

@@ -35,7 +35,6 @@
     &.popover-arrow-top {
       bottom: 100%;
       left: 30px;
-      border-width: 0 10px 10px 10px;
       padding: 0 3px 0 0;
       border-color: transparent transparent var(--ff-mini-modal-border)
         transparent;
@@ -46,7 +45,6 @@
     }
     &.popover-arrow-left {
       left: -15px; //align the arrow with modal for the right side modal
-      border-width: 10px 10px 10px 0;
       border-color: transparent var(--ff-mini-modal-border) transparent
         transparent;
       filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
@@ -58,7 +56,6 @@
     &.popover-arrow-bottom {
       top: 100%;
       left: 30px;
-      border-width: 10px 10px 0 10px;
       border-color: var(--ff-mini-modal-border) transparent transparent
         transparent; // Bottom part of the arrow with the correct color
       filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
@@ -70,7 +67,6 @@
     &.popover-arrow-right {
       right: -10px;
       top: 66px;
-      border-width: 10px 0 10px 10px;
       border-color: transparent transparent transparent
         var(--ff-mini-modal-border);
       filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -55,7 +55,7 @@ const BasicModalComponent = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 180 }}
+          modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>
@@ -271,7 +271,8 @@ export const CustomModalWithArrow = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 250 }}
+          modalProperties={{ width: 300, height: 250, left: 180 }}
+          arrowProperties={{ left: 270, size: 6 }}
           arrowZIndex={1000}
           headerProps={
             <>

package/src/components/MiniModal/MiniModal.tsx

@@ -31,6 +31,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       extraLeftSpace,
       isIconModel,
       wrapperProperties,
+      arrowProperties,
       arrowZIndex,
       overlay,
       outSideClick,
@@ -43,7 +44,21 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     });
     const [isVisible, setIsVisible] = useState(false);
     const modalRef = useRef<HTMLDivElement>(null);
+    const {
+      width: modalWidth,
+      height: modalHeight,
+      borderRadius: modalBorderRadius = 4,
+      zIndex: modalZIndex = 99,
+      boxShadow: modalBoxShadow,
+      left: modalLeft,
+      top: modalTop,
+    } = modalProperties || {};
 
+    const {
+      left: popOverLeft,
+      top: popOverTop,
+      size: popOverSize = 10,
+    } = arrowProperties || {};
     // Function to calculate available space
     const getAvailableSpace = (rect: Rect): AvailableSpace => {
       const { top, left, bottom, right } = rect;
@@ -196,14 +211,6 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       };
     }, [calculatePosition]);
 
-    const {
-      width: modalWidth,
-      height: modalHeight,
-      borderRadius: modalBorderRadius = 4,
-      zIndex: modalZIndex = 99,
-      boxShadow: modalBoxShadow,
-    } = modalProperties || {};
-
     const {
       width: wrapperWidth = 35,
       zIndex: wrapperZIndex = 101,
@@ -234,8 +241,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
             animatedModal: isAnimated,
           })}
           style={{
-            top: `${calculatedModalTop}px`,
-            left: `${calculatedModalLeft}px`,
+            top: `${modalTop ?? calculatedModalTop}px`,
+            left: `${modalLeft ?? calculatedModalLeft}px`,
           }}
         >
           {isPopOver && (
@@ -251,6 +258,17 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
               } ${getArrowClassName()}`}
               style={{
                 zIndex: `${arrowZIndex}`,
+                top: `${popOverTop && popOverTop}px`,
+                left: `${popOverLeft && popOverLeft}px`,
+                borderWidth: `${
+                  modalPosition === 'right'
+                    ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
+                    : modalPosition === 'top'
+                    ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
+                    : modalPosition === 'left'
+                    ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
+                    : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
+                }`,
               }}
             />
           )}

package/src/components/MiniModal/types.ts

@@ -5,6 +5,8 @@ interface ModalDimensions {
   borderRadius?: number;
   zIndex?: number;
   boxShadow?: string;
+  left?: number;
+  top?: number;
 }
 export interface MiniEditModalProps {
   /**
@@ -94,6 +96,11 @@ export interface MiniEditModalProps {
     boxShadow?: string;
   };
   arrowZIndex?: number;
+  arrowProperties?: {
+    left?: number;
+    top?: number;
+    size?: number;
+  };
   overlay?: {
     isOverlay?: boolean;
     zIndexOverlay?: number;