pixel-react 1.10.15 → 1.10.16

package/src/components/AppHeader/AppHeader.tsx

@@ -1,206 +0,0 @@
-import { AppHeaderProps } from './types';
-import Icon from '../Icon';
-import './AppHeader.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import AllProjectsDropdown from '../AllProjectsDropdown';
-import MenuOption from '../MenuOption';
-import Tooltip from '../Tooltip';
-import React, { useRef } from 'react';
-
-const AppHeader: React.FC<AppHeaderProps> = ({
-  logoIconName = 'fireflink_icon',
-  width,
-  borderRadius,
-  leftContent,
-  rightContent,
-  projectsList,
-  appHeaderMenuItems,
-  appHeaderHiddenMenuItems,
-  selectedMenu,
-  selectedSubMenu,
-  selectedQuickMenu,
-  selectedProject = { label: '', value: '', iconName: '' },
-  onMenuClick = () => {},
-  onSubMenuClick = () => {},
-  onQuickMenuClick = () => {},
-  onProjectMenuClick = () => {},
-  onProjectDropdownLabelClick = () => {},
-  onMoreMenuOptionClick = () => {},
-}) => {
-  const hiddenMenuref = useRef<HTMLDivElement>(null);
-  return (
-    <div className="ff-app-header-main">
-      <div
-        className="ff-app-header"
-        style={{
-          borderStartStartRadius: borderRadius,
-          borderStartEndRadius: borderRadius,
-        }}
-      >
-        <div className="ff-app-header-left-container">
-          <div className="ff-app-header-logo-icon">
-            <Icon color="" name={logoIconName} height={24} width={21} />
-          </div>
-          {leftContent && (
-            <div className="ff-app-header-left-content">{leftContent}</div>
-          )}
-        </div>
-        {!checkEmpty(appHeaderMenuItems) && (
-          <div className="ff-app-header-nav-bar" style={{ width: width }}>
-            {projectsList && !checkEmpty(projectsList) && (
-              <div>
-                {
-                  <AllProjectsDropdown
-                    onClick={onProjectMenuClick}
-                    options={projectsList}
-                    selectedOption={selectedProject}
-                    onMenuClick={onProjectDropdownLabelClick}
-                    selected={selectedMenu === 'Projects'}
-                  />
-                }
-              </div>
-            )}
-            <div className="ff-app-header-nav-bar-items fontSm">
-              {appHeaderMenuItems.map((menuItem) => {
-                return (
-                  !appHeaderHiddenMenuItems?.find(
-                    (menu) => menu.label === menuItem.label
-                  ) && (
-                    <div
-                      className={classNames('ff-app-header-nav-bar-item', {
-                        ['ff-app-header-nav-bar-item--selected']:
-                          menuItem.label === selectedMenu,
-                      })}
-                      key={menuItem.label}
-                    >
-                      <Typography
-                        as="div"
-                        className="ff-app-header-nav-bar-item-label"
-                        lineHeight="18px"
-                        onClick={() => onMenuClick(menuItem)}
-                      >
-                        {menuItem.label}
-                      </Typography>
-                      {menuItem.label === selectedMenu &&
-                        menuItem?.subMenuItems && (
-                          <>
-                            {menuItem.subMenuItems.map((subMenuItem) => {
-                              return (
-                                <div
-                                  key={subMenuItem.label}
-                                  className="ff-app-header-submenu-container"
-                                >
-                                  <Typography
-                                    as="div"
-                                    className={classNames(
-                                      'ff-app-header-nav-bar-submenu-item',
-                                      {
-                                        ['ff-app-header-nav-bar-submenu-item--selected']:
-                                          subMenuItem.label === selectedSubMenu,
-                                      }
-                                    )}
-                                    lineHeight="18px"
-                                    onClick={() => onSubMenuClick(subMenuItem)}
-                                  >
-                                    {subMenuItem.label}
-                                  </Typography>
-                                </div>
-                              );
-                            })}
-                            {menuItem.subMenuItems.map((subMenuItem) => {
-                              return (
-                                <div
-                                  key={subMenuItem.label}
-                                  className="ff-app-header-submenu-container"
-                                >
-                                  {subMenuItem.label === selectedSubMenu &&
-                                    subMenuItem?.quickMenuItems && (
-                                      <div
-                                        // className="ff-app-header-quickmenu-container"
-                                        className={classNames(
-                                          'ff-app-header-quickmenu-container',
-                                          subMenuItem.quickMenuItems?.length
-                                            ? 'visible'
-                                            : ''
-                                        )}
-                                      >
-                                        <div>
-                                          <Icon name="vertical_separator" />
-                                        </div>
-                                        {subMenuItem.quickMenuItems.map(
-                                          (quickMenuItem) => {
-                                            return (
-                                              <>
-                                                <div
-                                                  key={quickMenuItem.iconName}
-                                                  onClick={() =>
-                                                    onQuickMenuClick(
-                                                      quickMenuItem
-                                                    )
-                                                  }
-                                                  className={classNames(
-                                                    'ff-app-header-nav-bar-quickmenu-item',
-                                                    {
-                                                      ['ff-app-header-nav-bar-quickmenu-item--selected']:
-                                                        quickMenuItem.path ===
-                                                        selectedQuickMenu,
-                                                    }
-                                                  )}
-                                                >
-                                                  <Tooltip
-                                                    title={quickMenuItem?.label}
-                                                  >
-                                                    <Icon
-                                                      name={
-                                                        quickMenuItem.iconName
-                                                      }
-                                                      height={16}
-                                                      width={16}
-                                                      hoverEffect={true}
-                                                    />
-                                                  </Tooltip>
-                                                </div>
-                                              </>
-                                            );
-                                          }
-                                        )}
-                                      </div>
-                                    )}
-                                </div>
-                              );
-                            })}
-                          </>
-                        )}
-                    </div>
-                  )
-                );
-              })}
-            </div>
-            {appHeaderHiddenMenuItems &&
-              !checkEmpty(appHeaderHiddenMenuItems) && (
-                <div className="more-menu" ref={hiddenMenuref}>
-                  <MenuOption
-                    iconName="more"
-                    options={appHeaderHiddenMenuItems}
-                    onOptionClick={onMoreMenuOptionClick}
-                    variant="dark"
-                    dropdownPlacement="down"
-                    zIndex={1001}
-                    tooltipTitle="More"
-                    optionCardVariant="primary"
-                    targetRef={hiddenMenuref}
-                  />
-                </div>
-              )}
-          </div>
-        )}
-        {rightContent && (
-          <div className="ff-app-header-right-content">{rightContent}</div>
-        )}
-      </div>
-    </div>
-  );
-};
-export default AppHeader;

package/src/components/AppHeader/index.ts

@@ -1 +0,0 @@
-export { default } from "./AppHeader";

package/src/components/AppHeader/types.ts

@@ -1,55 +0,0 @@
-import { ReactNode } from 'react';
-import { optionsType } from '../AllProjectsDropdown/types';
-export interface AppHeaderProps {
-  width?: string;
-  borderRadius?:string;
-  logoIconName: string;
-  leftContent?: ReactNode;
-  rightContent?: ReactNode;
-  projectsList?: optionsType[];
-  appHeaderMenuItems: appHeaderMenuItemProps[];
-  appHeaderHiddenMenuItems?: appHeaderHiddenMenuItemProps[];
-  selectedMenu: string;
-  selectedSubMenu?: string;
-  selectedQuickMenu?: string;
-  selectedProject?: optionsType;
-  onMenuClick?: (text: any) => void;
-  onSubMenuClick?: (text: any) => void;
-  onQuickMenuClick?: (text: any) => void;
-  onProjectMenuClick?: (text: any) => void;
-  onProjectDropdownLabelClick?: () => void;
-  onMoreMenuOptionClick?: (text: any) => void;
-}
-export interface appHeaderMenuItemProps {
-  label: string;
-  path?: string;
-  disable?: boolean;
-  disableText?: string;
-  hide?: boolean;
-  subMenuItems?: appHeaderSubMenuItemProps[];
-}
-export interface appHeaderSubMenuItemProps {
-  label: string;
-  path?: string;
-  disable?: boolean;
-  disableText?: string;
-  hide?: boolean;
-  quickMenuItems?: appHeaderQuickMenuItemProps[];
-  hiddenMenuItems?: appHeaderHiddenMenuItemProps[];
-}
-export interface appHeaderQuickMenuItemProps {
-  label?: string;
-  path: string;
-  iconName: string;
-  disable?: boolean;
-  disableText?: string;
-  hide?: boolean;
-}
-export interface appHeaderHiddenMenuItemProps {
-  label: string;
-  value: string | string[];
-  icon: string;
-  disable?: boolean;
-  disableText?: string;
-  hide?: boolean;
-}

package/src/components/AttachImage/AttachImage.stories.tsx

@@ -1,24 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AttachImage from './AttachImage';
-import { AttachImageProps } from './types';
-
-const meta: Meta<typeof AttachImage> = {
-  title: 'Components/AttachImage',
-  component: AttachImage,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<AttachImageProps>;
-
-export const Default: Story = {
-  args: {
-    imageSrc: 'src/assets/images/photo.png',
-    onExpandClick: () => alert('Expand clicked'),
-    onDeleteClick: () => alert('Delete clicked'),
-    onDownloadClick: () => alert('Download clicked'),
-    height: '80px',
-    width: '80px',
-  },
-};

package/src/components/AttachImage/AttachImage.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import './AttachImage.scss';
-import Icon from '../Icon/Icon';
-import Tooltip from '../Tooltip';
-import { AttachImageProps } from './types';
-
-const AttachImage: React.FC<AttachImageProps> = ({
-  imageSrc,
-  onExpandClick,
-  onDeleteClick,
-  onDownloadClick,
-  height = '75px',
-  width = '79px',
-}) => {
-  return (
-    <div className="ff-attach-image-container" style={{ height, width }}>
-      <div className="ff-image-wrapper" style={{ height, width }}>
-        <img src={imageSrc} alt="Attached" />
-        <div className="ff-hover-icons">
-          <div className="ff-top-icons">
-            <div className="ff-icon-container">
-              <Tooltip title={'Download File'} placement="bottom">
-                <Icon
-                  name="download_file_icon"
-                  height={10}
-                  width={10}
-                  onClick={onDownloadClick}
-                  color="var(--icons-default-color)"
-                />
-              </Tooltip>
-            </div>
-            <div className="ff-icon-container">
-              <Tooltip title="Delete" placement="bottom">
-                <Icon
-                  name="delete"
-                  height={10}
-                  width={10}
-                  color="var(--ff-delete-button-attachment)"
-                  onClick={onDeleteClick}
-                />
-              </Tooltip>
-            </div>
-          </div>
-          <div className="ff-expand-icon-container">
-            <Tooltip title="Maximize" placement="bottom">
-              <Icon
-                name="expand_icon"
-                height={16}
-                width={16}
-                onClick={onExpandClick}
-              />
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AttachImage;

package/src/components/AttachImage/index.ts

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

package/src/components/AttachImage/types.ts

@@ -1,26 +0,0 @@
-export interface AttachImageProps {
-  /**
-   * The image source to display.
-   */
-  imageSrc: string;
-  /**
-   * Function triggered when the expand icon is clicked.
-   */
-  onExpandClick: () => void;
-  /**
-   * Function triggered when the delete icon is clicked.
-   */
-  onDeleteClick: () => void;
-  /**
-   * Function triggered when the download icon is clicked.
-   */
-  onDownloadClick: () => void;
-  /**
-   * Custom height for the component.
-   */
-  height?: string;
-  /**
-   * Custom width for the component.
-   */
-  width?: string;
-}

package/src/components/AttachmentButton/AttachmentButton.stories.tsx

@@ -1,81 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import AttachmentButton from './AttachmentButton';
-import React from 'react';
-
-const meta: Meta<typeof AttachmentButton> = {
-  title: 'Components/AttachmentButton',
-  component: AttachmentButton,
-  argTypes: {
-    onFilesChange: { action: 'files changed' },
-    disabled: { control: 'boolean' },
-    maxFileSizeMB: { control: 'number' },
-    maxFiles: { control: 'number' },
-    buttonLabel: { control: 'text' },
-    showSelectedFiles: { control: 'boolean' },
-    deleteButton: { control: 'boolean' },
-    addAttachmentButton:{control:'boolean'}
-  },
-};
-
-type Story = StoryObj<typeof AttachmentButton>;
-
-const defaultArgs = {
-  disabled: false,
-  maxFileSizeMB: 5,
-  maxFiles: 10,
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Upload Files',
-  },
-  render: (args) => {
-    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-
-    const handleFilesChange = (files: File[]) => {
-      setSelectedFiles(files);
-      args.onFilesChange(files);
-    };
-
-    return (
-      <AttachmentButton
-        {...args}
-        selectedFiles={selectedFiles}
-        onFilesChange={handleFilesChange}
-      />
-    );
-  },
-};
-
-export const SmallFileLimit: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Upload Files (2 MB Max)',
-    maxFileSizeMB: 2,
-    maxFiles: 5,
-  },
-  render: Default.render,
-};
-
-export const LargeFileLimit: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Upload Large Files (20 MB Max)',
-    maxFileSizeMB: 20,
-    maxFiles: 5,
-  },
-  render: Default.render,
-};
-
-export const DisabledUploader: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Disabled Uploader',
-    disabled: true,
-  },
-  render: Default.render,
-};
-
-export default meta;

package/src/components/AttachmentButton/AttachmentButton.tsx

@@ -1,129 +0,0 @@
-import React, { useRef, useState } from 'react';
-import Typography from '../Typography';
-import Button from '../Button';
-import Toaster from '../Toast';
-import Icon from '../Icon';
-import { AttachmentUploaderProps } from './types';
-import './AttachmentButton.scss';
-import Tooltip from '../Tooltip';
-
-const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
-  label,
-  selectedFiles,
-  onFilesChange,
-  disabled = false,
-  maxFileSizeMB = 5, // Default to 5 MB if not provided
-  maxFiles = 10, // Default to 10 files if not provided
-  buttonLabel = 'Select Files',
-  showSelectedFiles = true,
-  buttonVariant = 'primary',
-  deleteButton = true,
-  addAttachmentButton = true,
-}) => {
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const [fileError, setFileError] = useState<string>('');
-  const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
-
-  const handleAttachmentClick = () => {
-    setFileError('');
-    fileInputRef.current?.click();
-  };
-
-  const handleFileChange = () => {
-    setFileError('');
-    if (fileInputRef.current?.files) {
-      const files = Array.from(fileInputRef.current.files);
-      const duplicateFiles = files.filter((file) =>
-        selectedFiles.some((selectedFile) => selectedFile.name === file.name)
-      );
-      if (duplicateFiles.length > 0) {
-        setFileError('This file is already selected.');
-        fileInputRef.current.value = '';
-        return;
-      }
-      if (selectedFiles.length + files.length > maxFiles) {
-        setFileError(`You can only select up to ${maxFiles} files.`);
-        fileInputRef.current.value = '';
-        return;
-      }
-      const oversizedFiles = files.filter(
-        (file) => file.size > maxFileSizeBytes
-      );
-      if (oversizedFiles.length > 0) {
-        setFileError(`Each file must be less than ${maxFileSizeMB} MB.`);
-        fileInputRef.current.value = '';
-        return;
-      }
-      onFilesChange([...selectedFiles, ...files]);
-      fileInputRef.current.value = '';
-    }
-  };
-
-  const handleDeleteFile = (index: number) => {
-    const updatedFiles = [...selectedFiles];
-    updatedFiles.splice(index, 1);
-    onFilesChange(updatedFiles);
-  };
-
-  return (
-    <div>
-      <Typography fontWeight="semi-bold" lineHeight='18px'>{label}</Typography>
-      {(!showSelectedFiles || selectedFiles.length === 0) && (
-        <Button
-          variant={buttonVariant}
-          label={buttonLabel}
-          size="medium"
-          onClick={handleAttachmentClick}
-          disabled={disabled}
-        />
-      )}
-      <input
-        type="file"
-        ref={fileInputRef}
-        className="ff-input-field"
-        onChange={handleFileChange}
-        multiple
-        accept="*"
-      />
-      {fileError && (
-        <Toaster
-          isOpen={!!fileError}
-          variant="info"
-          toastTitle="Error"
-          toastMessage={fileError}
-          zIndex={10000000}
-        />
-      )}
-      {showSelectedFiles &&
-        selectedFiles.map((file, index) => (
-          <div key={file.name} className="ff-attachment-files">
-            <Typography color="var(--brand-color)">{file.name}</Typography>
-            {deleteButton && (
-              <Tooltip title="Delete">
-                <Icon
-                  name="delete"
-                  hoverEffect={true}
-                  color="var(--ff-delete-button-attachment)"
-                  variant="danger"
-                  onClick={() => handleDeleteFile(index)}
-                />
-              </Tooltip>
-            )}
-            {index === selectedFiles.length - 1 &&
-              selectedFiles.length < maxFiles &&
-              addAttachmentButton && (
-                <Tooltip title="Add Attachment">
-                  <Icon
-                    name="add_file"
-                    hoverEffect={true}
-                    onClick={handleAttachmentClick}
-                  />
-                </Tooltip>
-              )}
-          </div>
-        ))}
-    </div>
-  );
-};
-
-export default AttachmentButton;

package/src/components/AttachmentButton/index.ts

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

package/src/components/AttachmentButton/types.ts

@@ -1,13 +0,0 @@
-export interface AttachmentUploaderProps {
-  label: string;
-  selectedFiles: File[];
-  onFilesChange: (files: File[]) => void;
-  disabled?: boolean;
-  maxFileSizeMB?: number;
-  maxFiles?: number;
-  buttonLabel?: string;
-  showSelectedFiles?: boolean;
-  buttonVariant?: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
-  deleteButton: boolean;
-  addAttachmentButton: boolean;
-}

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,76 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Avatar from './Avatar';
-
-const meta: Meta<typeof Avatar> = {
-  component: Avatar,
-  title: 'Components/Avatar',
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      control: { type: 'radio' },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Small: Story = {
-  args: {
-    variant: 'small',
-    iconName: 'accordion_header_icon',
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    variant: 'medium',
-    iconName: 'accordion_header_icon',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    variant: 'large',
-    iconName: 'accordion_header_icon',
-  },
-};
-
-export const CustomAvatarSize: Story = {
-  args: {
-    customAvatarSize: 30,
-    iconName: 'accordion_header_icon',
-  },
-};
-
-export const CustomIconSize: Story = {
-  args: {
-    customIconSize: 30,
-    customAvatarSize: 40,
-    iconName: 'accordion_header_icon',
-  },
-};
-
-export const WithLabel: Story = {
-  args: {
-    label: 'AB',
-    customAvatarSize: 40,
-    labelFontSize: '16px',
-    backgroundColor: '#E0E0E0',
-    iconColor: '#333',
-  },
-};
-
-export const LabelWithCustomSize: Story = {
-  args: {
-    label: 'XY',
-    customAvatarSize: 50,
-    labelFontSize: '20px',
-    backgroundColor: '#F5A623',
-    iconColor: '#FFF',
-  },
-};