pixel-priya 0.0.1

package/src/components/AppHeader/AppHeader.tsx

@@ -0,0 +1,199 @@
+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,
+  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">
+        <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.iconName ===
+                                                        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

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

package/src/components/AppHeader/types.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { optionsType } from '../AllProjectsDropdown/types';
+export interface AppHeaderProps {
+  width?: 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.scss

@@ -0,0 +1,76 @@
+.ff-attach-image-container {
+  position: relative;
+  display: inline-block;
+
+  .ff-image-wrapper {
+    position: relative;
+    width: 79px;
+    height: 75px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .ff-hover-icons {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      background-color: rgba(0, 0, 0, 0.7);
+      transition: opacity 0.4s ease;
+
+      .ff-top-icons {
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        display: flex;
+        gap: 4px;
+
+        .ff-icon-container {
+          width: 8px;
+          height: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 4px;
+          background-color: transparent;
+          transition: background-color 0.3s ease;
+        }
+      }
+
+      .ff-expand-icon-container {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 4px;
+        background-color: transparent;
+        transition: background-color 0.3s ease;
+      }
+    }
+
+    &:hover .ff-hover-icons {
+      opacity: 1;
+    }
+
+    &:hover .ff-icon-container,
+    &:hover .ff-top-icons .ff-icon-container {
+      border-radius: 4px;
+      background-color: var(--ff-icon-hover-bg-color);
+    }
+
+    &:hover .ff-expand-icon-container {
+      background-color: var(--ff-icon-hover-bg-color);
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,60 @@
+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

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

package/src/components/AttachImage/types.ts

@@ -0,0 +1,26 @@
+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.scss

@@ -0,0 +1,9 @@
+.ff-input-field {
+  display: none;
+}
+.ff-attachment-files {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  line-height: 15px;
+}

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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,129 @@
+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

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

package/src/components/AttachmentButton/types.ts

@@ -0,0 +1,13 @@
+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;
+}