pixel-react-excel-sheet 1.2.0 → 1.2.1

package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx

@@ -1,119 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AllProjectsDropdown from './AllProjectsDropdown';
-import { useState } from 'react';
-import { optionsType } from './types';
-
-const meta: Meta<typeof AllProjectsDropdown> = {
-  title: 'Components/AllProjectsDropdown',
-  component: AllProjectsDropdown,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof AllProjectsDropdown>;
-
-export const Default: Story = {
-  args: {
-    options: [
-      {
-        label: 'All Projects',
-        value: 'All Projects',
-        iconName: 'all_projects',
-      },
-      {
-        label: 'Pantaloon Project',
-        value: 'Pantaloon Web Project',
-        iconName: 'web_icon',
-      },
-      {
-        label: 'Mobile Project',
-        value: 'Mobile Project',
-        iconName: 'mobile_icon',
-      },
-      {
-        label: 'Web & Mobile Project',
-        value: 'Web & Mobile Project',
-        iconName: 'web&mobile_icon',
-      },
-      {
-        label: 'Sales Force',
-        value: 'Sales Force',
-        iconName: 'sales_force',
-      },
-      {
-        label: 'MS Dynamic',
-        value: 'MS Dynamic',
-        iconName: 'ms_dynamic',
-      },
-      {
-        label: 'Web Service',
-        value: 'Web Service',
-        iconName: '',
-      },
-    ],
-  },
-};
-
-export const PrimaryIconButton: Story = {
-  render: () => {
-    const [selectedOption, setSelectedOption] = useState({
-      label: 'All Projects',
-      value: 'All Projects',
-      iconName: 'all_projects',
-    });
-
-    const handleSelectedOption = (option: optionsType) => {
-      setSelectedOption(option);
-    };
-
-    const options = [
-      {
-        label: 'All Projects',
-        value: 'All Projects',
-        iconName: 'all_projects',
-      },
-      {
-        label: 'Pantaloon Project',
-        value: 'Pantaloon Web Project',
-        iconName: 'web_icon',
-      },
-      {
-        label: 'Mobile Project',
-        value: 'Mobile Project',
-        iconName: 'mobile_icon',
-      },
-      {
-        label: 'Web & Mobile Project',
-        value: 'Web & Mobile Project',
-        iconName: 'web&mobile_icon',
-      },
-      {
-        label: 'Sales Force',
-        value: 'Sales Force',
-        iconName: 'sales_force',
-      },
-      {
-        label: 'MS Dynamic',
-        value: 'MS Dynamic',
-        iconName: 'ms_dynamic',
-      },
-      {
-        label: 'Web Service',
-        value: 'Web Service',
-        iconName: '',
-      },
-    ];
-
-    return (
-      <AllProjectsDropdown
-        options={options}
-        onClick={handleSelectedOption}
-        selectedOption={selectedOption}
-      />
-    );
-  },
-};
-
-export default meta;

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -1,122 +0,0 @@
-import { useState } from 'react';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import { truncateText } from '../../utils/truncateText/truncateText';
-import './AllProjectsDropdown.scss';
-import classNames from 'classnames';
-import { AllProjectsDropdownProps, optionsType } from './types';
-
-const AllProjectsDropdown = ({
-  onClick = () => {},
-  options,
-  selectedOption = {
-    label: 'All Projects',
-    value: 'All Projects',
-    iconName: 'all_projects',
-  },
-}: AllProjectsDropdownProps) => {
-  const [showOptions, setShowOptions] = useState(false);
-  const [selectedOptions, setSelectedOptions] = useState(selectedOption);
-  const [search, setSearch] = useState(true);
-
-  const handleShowOption = () => {
-    setShowOptions(!showOptions);
-  };
-
-  const handleSelectOption = (option: optionsType) => {
-    setSelectedOptions(option);
-    setShowOptions(false);
-    () => onClick(option);
-  };
-
-  const handleInput = () => {
-    setSearch(false);
-  };
-
-  const handleSearchEnter = () => {
-    setSearch(false);
-  };
-  const handleSearchLeave = () => {
-    setSearch(true);
-  };
-
-  return (
-    <div className={classNames('ff-all-project')}>
-      <div
-        onClick={handleShowOption}
-        className={classNames('ff-all-project-dropdown')}
-      >
-        <Typography
-          as={'div'}
-          lineHeight={'18px'}
-          fontSize={12}
-          fontWeight={'regular'}
-          className={classNames('projects-label')}
-        >
-          {truncateText(selectedOptions?.label, 12)}
-        </Typography>
-        <div className={classNames('label-icon')}>
-          <Icon
-            name="arrows_down_icon"
-            color="var(--primary-icon-color)"
-            height={8}
-            width={8}
-          />
-        </div>
-      </div>
-      {showOptions && (
-        <div className={classNames('ff-dropdown')}>
-          <div
-            className={classNames('ff-search')}
-            onMouseEnter={() => handleSearchEnter()}
-            onMouseLeave={() => handleSearchLeave()}
-          >
-            {search && <Icon name="search" height={8} width={8} />}
-            <input
-              type="text"
-              placeholder={`${search ? 'Search Project' : ''}`}
-              onClick={() => handleInput()}
-            />
-          </div>
-          <div
-            className={classNames(
-              'option-card',
-              `${options.length > 4 ? 'scroll' : ''}`
-            )}
-          >
-            {options.map((option, index) => (
-              <div
-                key={index}
-                onClick={() => handleSelectOption(option)}
-                className={classNames(
-                  'projects-options',
-                  `${
-                    option.label === 'All Projects' ? 'all-projects-option' : ''
-                  }`
-                )}
-              >
-                <div className={classNames('projects-icons')}>
-                  <Icon
-                    name={option.iconName}
-                    height={12}
-                    width={12}
-                    color={
-                      option.label === 'All Projects'
-                        ? 'var(--secondary-icon-color)'
-                        : 'var(--primary-icon-color);'
-                    }
-                  />
-                </div>
-                <Typography key={index} as={'div'} lineHeight={'30px'}>
-                  {option.label}
-                </Typography>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AllProjectsDropdown;

package/src/components/AllProjectsDropdown/index.ts

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

package/src/components/AllProjectsDropdown/types.ts

@@ -1,10 +0,0 @@
-export interface optionsType {
-  label: string;
-  value: string;
-  iconName: string;
-}
-export interface AllProjectsDropdownProps {
-  options: optionsType[];
-  onClick: (option: optionsType) => void;
-  selectedOption: optionsType;
-}

package/src/components/AppHeader/AppHeader.scss

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

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

@@ -1,133 +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';
-
-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

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