pixel-react-excel-sheet 1.2.0

package/src/components/AppHeader/AppHeader.scss

@@ -0,0 +1,129 @@
+.ff-app-header {
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--brand-color);
+  padding-left: 8px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  .ff-app-header-left-container {
+    display: flex;
+    .ff-app-header-logo-icon {
+      padding: 8px;
+      height: 24px;
+    }
+  }
+  .ff-app-header-nav-bar {
+    display: flex;
+    align-items: center;
+    background-color: var(--brand-color);
+    transform: translateY(12px);
+    border-radius: 20px;
+    padding: 5px;
+    .ff-app-header-nav-bar-items {
+      display: flex;
+      align-items: center;
+      .ff-app-header-nav-bar-item {
+        margin-left: 8px;
+        padding: 7px;
+        color: var(--ff-header-text-color);
+        cursor: pointer;
+        display: flex;
+        position: relative;
+        &:not(.ff-app-header-nav-bar-item--selected):hover::after {
+          animation: oscillate-border-width 0.5s ease-in-out forwards;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 25%;
+          width: 0%;
+          height: 2px;
+          background: var(--ff-app-header-menu-border-bottom-color);
+          border-radius: 4px;
+          transition: width 0.15s ease-in-out;
+        }
+
+        &--selected {
+          padding: 3px 6px 3px 3px;
+          background-color: var(--primary-icon-color);
+          border-radius: 20px;
+          .ff-app-header-nav-bar-item-label {
+            background-color: var(--brand-color);
+            border-radius: 20px;
+            padding: 4px 8px;
+          }
+        }
+        .ff-app-header-submenu-container {
+          display: flex;
+          .ff-app-header-nav-bar-submenu-item {
+            color: var(--ff-header-submenu-text-color);
+            align-content: center;
+            position: relative;
+            &:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {
+              animation: oscillate-border-width 0.5s ease-in-out forwards;
+            }
+            &::after {
+              content: '';
+              position: absolute;
+              bottom: 0;
+              left: 25%;
+              width: 0%;
+              height: 2px;
+              background: var(--ff-app-header-submenu-border-bottom-color);
+              border-radius: 4px;
+              transition: width 0.15s ease-in-out;
+            }
+            padding-left: 8px;
+            &--selected {
+              color: var(--ff-header-submenu-highlight-text-color);
+              &::after {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 10%;
+                width: 90%;
+                height: 2px;
+                border-radius: 4px;
+                box-shadow: 0px 1px 0.2px 0px #00000029;
+                background: var(--ff-app-header-submenu-border-bottom-color);
+              }
+            }
+          }
+          .ff-app-header-quickmenu-container {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+    .ff-app-header-more-icon {
+      svg {
+        path {
+          fill: var(--primary-icon-color);
+        }
+        cursor: pointer;
+      }
+    }
+  }
+  .ff-app-header-left-content,
+  .ff-app-header-right-content {
+    height: 24px;
+    padding: 8px;
+    align-content: center;
+  }
+}
+@keyframes oscillate-border-width {
+  0% {
+    width: 50%;
+    left: 25%;
+  }
+  50% {
+    width: 70%;
+    left: 15%;
+  }
+  100% {
+    width: 50%;
+    left: 25%;
+  }
+}

package/src/components/AppHeader/AppHeader.stories.tsx

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AppHeader from './AppHeader';
+import {
+  appHeaderMenuItemProps,
+  appHeaderSubMenuItemProps,
+  appHeaderQuickMenuItemProps,
+} from './types';
+import Icon from '../Icon';
+import { useState } from 'react';
+
+const meta: Meta<typeof AppHeader> = {
+  title: 'Components/AppHeader',
+  component: AppHeader,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof AppHeader>;
+const defaultArgs = {
+  logoIconName: 'fireflink_icon',
+  rightContent: (
+    <div>
+      <Icon name="logo" />
+    </div>
+  ),
+};
+
+const headerMenuItems = [
+  { menuLabel: 'Dashboard', menuName: 'Dashboard', subMenuItems: [] },
+  {
+    menuLabel: 'Repo',
+    menuName: 'Repo',
+    subMenuItems: [
+      {
+        subMenuLabel: 'Elements',
+        subMenuName: 'Elements',
+        quickMenuItems: [],
+      },
+      {
+        subMenuLabel: 'Program Elements',
+        subMenuName: 'Program Elements',
+        quickMenuItems: [],
+      },
+      {
+        subMenuLabel: 'Step Groups',
+        subMenuName: 'Step Groups',
+        quickMenuItems: [
+          {
+            quickMenuName: 'Success Icon',
+            quickMenuIconName: 'success',
+          },
+          {
+            quickMenuName: 'Warning Icon',
+            quickMenuIconName: 'warning',
+          },
+          {
+            quickMenuName: 'Info Icon',
+            quickMenuIconName: 'info',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    menuLabel: 'Test Data',
+    menuName: 'Test Data',
+    subMenuItems: [],
+  },
+  {
+    menuLabel: 'Test Dev',
+    menuName: 'Test Dev',
+    subMenuItems: [
+      {
+        subMenuLabel: 'Scripts',
+        subMenuName: 'Scripts',
+        quickMenuItems: [
+          {
+            quickMenuName: 'Delete Icon',
+            quickMenuIconName: 'delete',
+          },
+          {
+            quickMenuName: 'Details Icon',
+            quickMenuIconName: 'details',
+          },
+          {
+            quickMenuName: 'Sun Icon',
+            quickMenuIconName: 'sun_icon',
+          },
+          {
+            quickMenuName: 'Moon Stars Icon',
+            quickMenuIconName: 'moon_stars_icon',
+          },
+          {
+            quickMenuName: 'Impact List Icon',
+            quickMenuIconName: 'impactList',
+          },
+        ],
+      },
+      {
+        subMenuLabel: 'Executions',
+        subMenuName: 'Executions',
+        quickMenuItems: [],
+      },
+    ],
+  },
+];
+const headerHiddenMenuItems = ['Configuration', 'Approval Request'];
+const headerRightSideContent = (
+  <div>
+    <Icon name="logo" />
+  </div>
+);
+
+export const SampleAppHeader: Story = {
+  args: {
+    ...defaultArgs,
+    rightContent: (
+      <div>
+        <Icon name="logo" />
+      </div>
+    ),
+    appHeaderMenuItems: headerMenuItems,
+    appHeaderHiddenMenuItems: headerHiddenMenuItems,
+    selectedMenu: 'Repo',
+  },
+};
+export const Controlled: Story = {
+  render: () => {
+    const [selectedMenuItem, setSelectedMenuItem] = useState('Test Data');
+    const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
+    const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
+    const handleMenuClick = (item: appHeaderMenuItemProps) => {
+      setSelectedMenuItem(item.menuLabel);
+    };
+    const handleSubMenuClick = (item: appHeaderSubMenuItemProps) => {
+      setSelectedSubMenuItem(item.subMenuLabel);
+    };
+    const handleQuickMenuClick = (item: appHeaderQuickMenuItemProps) => {
+      setSelectedQuickMenuItem(item.quickMenuIconName);
+    };
+
+    return (
+      <>
+        <div>
+          <AppHeader
+            logoIconName="fireflink_icon"
+            leftContent={headerRightSideContent}
+            rightContent={headerRightSideContent}
+            appHeaderMenuItems={headerMenuItems}
+            appHeaderHiddenMenuItems={headerHiddenMenuItems}
+            projectsList={[]}
+            selectedMenu={selectedMenuItem}
+            selectedSubMenu={selectedSubMenuItem}
+            selectedQuickMenu={selectedQuickMenuItem}
+            onMenuClick={handleMenuClick}
+            onSubMenuClick={handleSubMenuClick}
+            onQuickMenuClick={handleQuickMenuClick}
+          />
+        </div>
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/AppHeader/AppHeader.tsx

@@ -0,0 +1,133 @@
+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';
+
+const AppHeader: React.FC<AppHeaderProps> = ({
+  logoIconName = 'fireflink_icon',
+  leftContent,
+  rightContent,
+  projectsList,
+  appHeaderMenuItems,
+  selectedMenu,
+  selectedSubMenu,
+  selectedQuickMenu,
+  onMenuClick = () => {},
+  onSubMenuClick = () => {},
+  onQuickMenuClick = () => {},
+}) => {
+  return (
+    <>
+      <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>
+        <div className="ff-app-header-nav-bar">
+          {checkEmpty(projectsList) && (
+            <div>{/* <AllProjectsDropdown /> */}</div>
+          )}
+          <div className="ff-app-header-nav-bar-items fontSm">
+            {appHeaderMenuItems.map((menuItem) => {
+              return (
+                <div
+                  className={classNames('ff-app-header-nav-bar-item', {
+                    ['ff-app-header-nav-bar-item--selected']:
+                      menuItem.menuLabel === selectedMenu,
+                  })}
+                  key={menuItem.menuLabel}
+                  onClick={() => onMenuClick(menuItem)}
+                >
+                  <Typography
+                    as="div"
+                    className="ff-app-header-nav-bar-item-label"
+                    lineHeight="18px"
+                  >
+                    {menuItem.menuLabel}
+                  </Typography>
+                  {menuItem.menuLabel === selectedMenu &&
+                    menuItem?.subMenuItems &&
+                    menuItem.subMenuItems.map((subMenuItem) => {
+                      return (
+                        <div
+                          key={subMenuItem.subMenuLabel}
+                          onClick={() => onSubMenuClick(subMenuItem)}
+                          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.subMenuLabel === selectedSubMenu,
+                              }
+                            )}
+                            lineHeight="18px"
+                          >
+                            {subMenuItem.subMenuLabel}
+                          </Typography>
+                          {subMenuItem.subMenuLabel === selectedSubMenu &&
+                            subMenuItem?.quickMenuItems && (
+                              <div className="ff-app-header-quickmenu-container">
+                                <div>
+                                  <Icon name="vertical_separator" />
+                                </div>
+                                {subMenuItem.quickMenuItems.map(
+                                  (quickMenuItem) => {
+                                    return (
+                                      <>
+                                        <div
+                                          key={quickMenuItem.quickMenuIconName}
+                                          onClick={() =>
+                                            onQuickMenuClick(quickMenuItem)
+                                          }
+                                          className={classNames(
+                                            'ff-app-header-nav-bar-quickmenu-item',
+                                            {
+                                              ['ff-app-header-nav-bar-quickmenu-item--selected']:
+                                                quickMenuItem.quickMenuName ===
+                                                selectedQuickMenu,
+                                            }
+                                          )}
+                                        >
+                                          <Icon
+                                            name={
+                                              quickMenuItem.quickMenuIconName
+                                            }
+                                            height={24}
+                                            width={24}
+                                          />
+                                        </div>
+                                      </>
+                                    );
+                                  }
+                                )}
+                              </div>
+                            )}
+                        </div>
+                      );
+                    })}
+                </div>
+              );
+            })}
+          </div>
+          <div>
+            <Icon name="more" className="ff-app-header-more-icon" />
+          </div>
+        </div>
+        {rightContent && (
+          <div className="ff-app-header-right-content">{rightContent}</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,31 @@
+import { ReactNode } from 'react';
+
+export interface AppHeaderProps {
+  logoIconName: string;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  projectsList?: string[];
+  appHeaderMenuItems: appHeaderMenuItemProps[];
+  appHeaderHiddenMenuItems?: string[];
+  selectedMenu: string;
+  selectedSubMenu?: string;
+  selectedQuickMenu?: string;
+  onMenuClick?: (text: any) => void;
+  onSubMenuClick?: (text: any) => void;
+  onQuickMenuClick?: (text: any) => void;
+}
+export interface appHeaderMenuItemProps {
+  menuLabel: string;
+  menuName?: string;
+  subMenuItems?: appHeaderSubMenuItemProps[];
+}
+export interface appHeaderSubMenuItemProps {
+  subMenuLabel: string;
+  subMenuName?: string;
+  quickMenuItems?: appHeaderQuickMenuItemProps[];
+}
+export interface appHeaderQuickMenuItemProps {
+  quickMenuLabel?: string;
+  quickMenuName?: string;
+  quickMenuIconName: string;
+}

package/src/components/AttachmentButton/AttachmentButton.scss

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

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

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import AttachmentButton from './AttachmentButton';
+
+const meta: Meta<typeof AttachmentButton> = {
+  title: 'Components/AttachmentButton',
+  component: AttachmentButton,
+  argTypes: {
+    onFilesChange: { action: 'files changed' },
+    disabled: { control: 'boolean' },
+    maxFileSizeMB: { control: 'number' },
+    maxFiles: { control: 'number' },
+  },
+};
+
+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,113 @@
+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';
+
+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
+}) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [fileError, setFileError] = useState<string>('');
+  const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
+
+  const handleAttachmentClick = () => {
+    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">{label}</Typography>
+      {selectedFiles.length === 0 && (
+        <Button
+          variant="primary"
+          label="Select Files"
+          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}
+        />
+      )}
+      {selectedFiles.map((file, index) => (
+        <div key={file.name} className="ff-attachment-files">
+          <Typography color="var(--brand-color)">{file.name}</Typography>
+          <Icon
+            name="delete"
+            color="var(--ff-delete-button-attachment)"
+            onClick={() => handleDeleteFile(index)}
+          />
+          {index === selectedFiles.length - 1 &&
+            selectedFiles.length < maxFiles && (
+              <Icon
+                name="add_file"
+                height={24}
+                width={24}
+                onClick={handleAttachmentClick}
+              />
+            )}
+        </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,8 @@
+export interface AttachmentUploaderProps {
+  label: string; 
+  selectedFiles: File[]; 
+  onFilesChange: (files: File[]) => void;
+  disabled?: boolean;
+  maxFileSizeMB?: number;
+  maxFiles?: number;
+}