pixel-react 1.4.2 → 1.4.4

package/src/components/Select/components/Dropdown.scss

@@ -13,6 +13,7 @@
   &::-webkit-scrollbar {
     width: 4px;
     height: 12px;
+
     &-thumb {
       background-color: var(--ff-select-scroll-thumb-color);
       border-radius: 4px;
@@ -34,6 +35,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
 
+    &__selected,
     &:hover {
       background-color: var(--ff-select-option-hover-color);
     }

package/src/components/Select/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { useContext, useRef, type FC } from 'react';
+import { type FC, useContext, useRef } from 'react';
 import { dropdownDefaultCSSData, DropdownProps } from './types';
 import './Dropdown.scss';
 import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
@@ -6,7 +6,10 @@ import Typography from '../../Typography';
 import { ffid } from '../../../utils/ffID/ffid';
 import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
-import { getLabel } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
+import {
+  getLabel,
+  getValue,
+} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
 import useClickOutside from '../../../hooks/useClickOutside';
 
 const Dropdown: FC<DropdownProps> = ({
@@ -19,6 +22,8 @@ const Dropdown: FC<DropdownProps> = ({
   inputRef,
   selectArrowRef,
   heightFromTop,
+  selectedOption,
+  valueAccessor,
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -72,9 +77,19 @@ const Dropdown: FC<DropdownProps> = ({
             key={ffid()}
             as="div"
             lineHeight="30px"
-            className={classNames('ff-select-dropdown-option', currentTheme)}
+            className={classNames(
+              'ff-select-dropdown-option',
+              {
+                'ff-select-dropdown-option__selected':
+                  getValue(option, valueAccessor) === selectedOption,
+              },
+              currentTheme
+            )}
             color="var(--ff-select-text-color)"
-            onClick={() => onSelectOptionSelector(option)}
+            onClick={() => {
+              if ('disable' in option && option['disable']) return;
+              onSelectOptionSelector(option);
+            }}
           >
             {getLabel(option, labelAccessor)}
           </Typography>

package/src/components/Select/components/types.ts

@@ -1,4 +1,5 @@
 import { DrowdownPosition, Option } from '../types';
+import { RefObject } from 'react';
 
 export interface DropdownProps {
   options: Option[];
@@ -8,9 +9,10 @@ export interface DropdownProps {
   valueAccessor?: string;
   onSelectBlur: () => void;
   onSelectOptionSelector: (option: Option) => void;
-  inputRef?: React.RefObject<HTMLInputElement>;
-  selectArrowRef?: React.RefObject<HTMLDivElement>;
+  inputRef?: RefObject<HTMLInputElement>;
+  selectArrowRef?: RefObject<HTMLDivElement>;
   heightFromTop: number;
+  selectedOption?: Option;
 }
 
 export const dropdownDefaultCSSData = {

package/src/components/StatusButton/StatusButton.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import './StatusButton.scss';
 import { StatusButtonProps } from './types';
 import Typography from '../Typography';
+import Tooltip from '../Tooltip';
 
 const StatusButton = ({
   status = 'passed',
@@ -12,28 +13,33 @@ const StatusButton = ({
   disabled = false,
   ...props
 }: StatusButtonProps) => {
+  const hasTooltip =
+    status === 'partially-executed' || status === 'not-executed';
+
   return (
-    <button
-      className={classNames(
-        'ff-status-button',
-        `ff-status-button--${status}`,
-        className
-      )}
-      style={style}
-      onClick={onClick}
-      disabled={disabled}
-      {...props}
-    >
-      <Typography
-        as="div"
-        fontWeight="semi-bold"
-        lineHeight="16px"
-        textAlign="center"
-        className="ff-status-button__text"
+    <Tooltip title={hasTooltip ? label : ''} placement="bottom">
+      <button
+        className={classNames(
+          'ff-status-button',
+          `ff-status-button--${status}`,
+          className
+        )}
+        style={style}
+        onClick={onClick}
+        disabled={disabled}
+        {...props}
       >
-        {label}
-      </Typography>
-    </button>
+        <Typography
+          as="div"
+          fontWeight="semi-bold"
+          lineHeight="16px"
+          textAlign="center"
+          className="ff-status-button__text"
+        >
+          {label}
+        </Typography>
+      </button>
+    </Tooltip>
   );
 };
 

package/src/components/Table/Table.scss

@@ -1,4 +1,4 @@
-@use '../../assets/styles/_fonts';
+
 
 .ff-fixed-header-table {
   overflow-y: auto;
@@ -22,7 +22,6 @@
   thead {
     tr {
       th {
-        @extend .fontMd;
         border-bottom: 1px solid var(--slider-table-color);
       }
       th{
@@ -60,7 +59,6 @@
       td {
         position: relative;
         color: var(--table-column-text-color);
-        @extend .fontSm;
 
         &.clickable-cell {
           cursor: pointer;

package/src/components/Table/Table.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useEffect, useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Table from './Table';

package/src/components/Table/Table.tsx

@@ -48,7 +48,6 @@ const Table = ({
       onSelect(e, item);
     }
   };
-  if (!(data.length >= 0)) return null;
 
   return (
     <div
@@ -88,7 +87,12 @@ const Table = ({
                 key={column.header}
                 style={{ width: column?.width }}
               >
-                <div className="ff-label-checkbox-container">
+                <Typography
+                  as="div"
+                  fontSize={12}
+                  fontWeight="semi-bold"
+                  className="ff-label-checkbox-container"
+                >
                   {index === 0 && withCheckbox && (
                     <span className="ff-table-checkbox">
                       <Checkbox
@@ -105,7 +109,7 @@ const Table = ({
                   )}
 
                   {column.header}
-                </div>
+                </Typography>
               </th>
             ))}
           </tr>

package/src/components/ToggleSwitch/ToggleSwitch.scss

@@ -0,0 +1,59 @@
+/* Container Styling */
+.toggle-container {
+    display: flex;
+    background-color: var(--base-bg-color);
+    height: 24px;
+    border-radius: 6px;
+    padding: 4px 2px;
+    overflow: hidden;
+    width: fit-content;
+    box-shadow: 1px 1px 2px 0px var(--base-bg-color),
+    inset -1px -1px 2px var(--base-bg-color),
+    inset 1px -1px 2px var(--ff-toggle-switch-shadow-color),
+    inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+  
+  /* Button Styling */
+  .toggle-button {
+    padding: 4px 2px;
+    font-size: 10px;
+    font-weight: 500;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: var(--base-bg-color);
+    color: var(--ff-toggle-switch-off-color);
+    outline: none;
+    transition: all 0.3s ease;
+    min-width: 24px;
+    height: 20px;
+    text-align: center;
+    box-shadow: 
+    inset 1px 1px 2px 0 var(--base-bg-color),
+    1px 1px 3px 0 var(--ff-chips-blur-color),
+    -1px -1px 2px 0 var(--base-bg-color),
+    1px -1px 2px 0 var(--ff-chips-blur-color),
+    -1px 1px 2px 0 var(--ff-chips-blur-color)
+  }
+  
+  /* Active Button */
+  .toggle-button.active {
+    background-color: var(--ff-line-number-bg);
+    color: var(--base-bg-color);
+    box-shadow: 
+    inset -1px -1px 2px 0 var(--ff-chips-blur-color),
+    1px 1px 3px 0 var(--ff-chips-blur-color),
+    -1px -1px 2px 0 var(--base-bg-color),
+    -1px 1px 2px 0 var(--ff-chips-blur-color);
+  }
+  
+  /* Button Hover Effect */
+  .toggle-button:hover {
+    background-color: var(--hover-color);
+    color: var(--brand-color);
+  }
+  
+  

package/src/components/ToggleSwitch/ToggleSwitch.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ToggleSwitch from "./ToggleSwitch";
+import React, { useState } from "react";
+
+
+const meta: Meta<typeof ToggleSwitch> = {
+  title: "Components/ToggleSwitch",
+  component: ToggleSwitch,
+  tags: ["autodocs"],
+  argTypes: {
+    selected: {
+      control: { type: "radio" }, 
+      options: ["Automation", "Manual"],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleSwitch>;
+
+export const Default: Story = {
+  args: {
+    selected: "Automation", 
+    firstButton: "Automation",
+    secondButton: "Manual",
+    handleClick: () => {},
+  },
+};
+
+export const Switch: Story = {
+  render: () => {
+    const ToggleSwitchWrapper = () => {
+      const [selected, setSelected] = useState<string>("Automation");
+
+      const handleChange = (selectedSwitch: string) => {
+        setSelected(selectedSwitch);
+      };
+
+      return (
+        <ToggleSwitch
+          selected={selected}
+          firstButton="Automation"
+          secondButton="Manual"
+          handleClick={handleChange}
+        />
+      );
+    };
+
+    return <ToggleSwitchWrapper />;
+  },
+};

package/src/components/ToggleSwitch/ToggleSwitch.tsx

@@ -0,0 +1,30 @@
+import React, { type JSX } from "react";
+import "./ToggleSwitch.scss";
+
+interface ToggleSwitchProps {
+  firstButton:string,
+  secondButton:string,
+  handleClick:(selected:string)=>void,
+  selected:string
+}
+
+const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ selected = "text",firstButton='File',secondButton='File',handleClick}):JSX.Element => {
+  return (
+    <div className="toggle-container">
+      <button
+        className={`toggle-button ${selected === firstButton ? "active" : ""}`}
+        onClick={() => handleClick(firstButton)}
+      >
+        {firstButton}
+      </button>
+      <button
+        className={`toggle-button ${selected === secondButton ? "active" : ""}`}
+        onClick={() => handleClick(secondButton)}
+      >
+        {secondButton}
+      </button>
+    </div>
+  );
+};
+
+export default ToggleSwitch;

package/src/components/ToggleSwitch/index.ts

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

package/src/components/Typography/Typography.scss

@@ -1,10 +1,40 @@
-@import url('https://fonts.cdnfonts.com/css/poppins');
-
 @mixin fontPoppins($size: 16px) {
   font-family: 'Poppins';
   font-size: $size;
 }
 
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 400;
+  src:
+    local('Poppins-Regular'),
+    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src:
+    local('Poppins-Medium'),
+    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 600;
+  src:
+    local('Poppins-SemiBold'),
+    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 700;
+  src:
+    local('Poppins-Bold'),
+    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
+}
+
 .ff-text {
   @include fontPoppins();
 

package/src/hooks/useFileDropzone.tsx

@@ -167,6 +167,7 @@ const useFileDropzone = (options: DropzoneOptions): DropzoneState => {
     ) => {
       event.preventDefault();
       event.stopPropagation();
+      setIsDragActive(false);
 
       const droppedFiles =
         'dataTransfer' in event

package/src/index.ts

@@ -51,10 +51,11 @@ import MachineInputField from './components/MachineInputField';
 import SequentialConnectingBranch from './components/SequentialConnectingBranch';
 import AttachmentButton from './components/AttachmentButton';
 import { Toastify, toast } from './components/Toastify/Toastify';
+import ToggleSwitch from './components/ToggleSwitch/ToggleSwitch';
 
 import LabelEditTextField from './components/LabelEditTextField';
 import EditTextField from './components/EditTextField';
-// import Excel from './components/Excel';
+import Excel from './components/Excel';
 import ModuleChip from './components/ModulesChip/ModuleChip';
 import IconRadialChart from './components/Charts/IconRadialChart';
 import AttachImage from './components/AttachImage';
@@ -138,7 +139,7 @@ export {
   Editor,
   AttachmentButton,
   LabelEditTextField,
-  // Excel,
+  Excel,
   IconRadioGroup,
   Toastify,
   toast,
@@ -151,6 +152,7 @@ export {
   StatusCard,
   EditTextField,
   AttachImage,
+  ToggleSwitch,
   // utils exports
   checkEmpty,
   getExtension,

package/src/components/Excel/ContextMenu/ContextMenu.scss

@@ -1,99 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.context-menu {
-  position: absolute;
-  z-index: 1;
-  outline: none;
-  background-color: var(--brand-color);
-  border-radius: 5px;
-  opacity: 1;
-  padding: 16px 0;
-  .menu-options {
-    overflow: auto;
-    min-height: 20px;
-    max-height: 175px;
-    min-width: 250px;
-    opacity: 1;
-    .options {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      padding: 0 8px;
-      line-height: 35px;
-      gap: 16px;
-      .sheet-context-menu {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      &:hover {
-        .options-label {
-          background: var(--option-card-bg-color);
-        }
-      }
-    }
-  }
-}
-
-.ff-icon-label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  .ff-menuicon-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    &:hover {
-      background-color: var(--brand-color);
-    }
-  }
-
-  .ff-menuicon-container-clicked {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--brand-color);
-    cursor: pointer;
-    &:hover {
-      background-color: var(--brand-color);
-    }
-  }
-}
-
-.ff-option-card {
-  position: absolute;
-  border: 1px solid var(--option-card-border-color);
-  background: var(--option-card-bg-color);
-  border-radius: 4px;
-  margin: 2px;
-  min-height: 32px;
-  min-width: 111px;
-  z-index: 100000;
-  white-space: nowrap;
-
-  .ff-options {
-    @extend .fontSm;
-    cursor: pointer;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    padding: 8px;
-    line-height: 16px;
-    gap: 8px;
-    &:hover {
-      background-color: var(--hover-color);
-    }
-    label {
-      cursor: pointer;
-    }
-  }
-
-  .ff-disable-option {
-    opacity: 0.5;
-    cursor: no-drop;
-    label {
-      cursor: no-drop;
-    }
-  }
-}

package/src/components/Excel/ContextMenu/ContextMenu.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import './ContextMenu.scss';
-import Icon from '../../Icon';
-
-const ContextMenu: React.FC<ContextMenuProps> = ({
-  customContext,
-  contextAction,
-  contextData,
-  setContextData,
-}) => {
-  const contextOptions: ContextOption[] = [
-    {
-      name: 'cell',
-      value: customContext || [],
-    },
-    {
-      name: 'row',
-      value: [
-        { name: 'Add Row', title: 'Add Row', action: contextAction.addRow },
-        {
-          name: 'Delete Row',
-          title: 'Delete Row',
-          action: contextAction.deleteRow,
-        },
-      ],
-    },
-    {
-      name: 'column',
-      value: [
-        {
-          name: 'Add Column',
-          title: 'Add Column',
-          action: contextAction.addColumn,
-        },
-        {
-          name: 'Delete Column',
-          title: 'Delete Column',
-          action: contextAction.deleteColumn,
-        },
-      ],
-    },
-    {
-      name: 'sheet_options',
-      value: [
-        {
-          name: 'Add Sheet',
-          title: (
-            <span className="sheet-context-menu">
-              <Icon  name="plus_icon" /> Add
-              Sheet
-            </span>
-          ),
-          action: contextAction.addSheet,
-        },
-        {
-          name: 'Delete Sheet',
-          title: (
-            <span className="sheet-context-menu">
-              <Icon name="delete" /> Delete Sheet
-            </span>
-          ),
-          action: contextAction.deleteSheet,
-        },
-      ],
-    },
-  ];
-
-  return (
-    contextData.visible &&
-    contextOptions.some(
-      (contextType) =>
-        contextType.name === contextData.type && contextType.value.length > 0
-    ) && (
-      <div
-        className="context-menu"
-        style={{ top: contextData.y, left: contextData.x }}
-      >
-        <div className="menu-options">
-          {contextOptions
-            .filter((contextType) => contextType.name === contextData.type)
-            .map((contextType) =>
-              contextType.value.length > 0
-                ? contextType.value.map((item) => (
-                    <div
-                      className="options"
-                      key={item.name}
-                      onClick={() => {
-                        item.action();
-                        setContextData((prev) => ({ ...prev, visible: false }));
-                      }}
-                    >
-                      <label className="options-label">{item.title}</label>
-                    </div>
-                  ))
-                : null
-            )}
-        </div>
-      </div>
-    )
-  );
-};
-
-export default ContextMenu;