pixel-react-excel-sheet 1.2.0

package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss

@@ -0,0 +1,160 @@
+.ff-arrow-buttons-container {
+  position: absolute;
+  transition: opacity 0.3s ease;
+
+  &.ff-down-right-top,
+  &.ff-down-top {
+    height: 80px;
+    width: 52px;
+    transform: translateY(calc(-50% + 12px));
+
+    .ff-arrow-button--right {
+      top: 28px;
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+
+    .ff-arrow-button--top {
+      top: 2px;
+      animation: slideTop 0.4s ease-out;
+    }
+
+    .ff-arrow-button--down {
+      bottom: 2px;
+      animation: slideDown 0.4s ease-out;
+    }
+  }
+
+  &.ff-right-top {
+    height: 52px;
+    width: 52px;
+    transform: translateY(calc(-54%));
+
+    .ff-arrow-button--right {
+      top: 28px;
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+
+    .ff-arrow-button--top {
+      top: 2px;
+      animation: slideTop 0.4s ease-out;
+    }
+  }
+
+  &.ff-down-right {
+    height: 52px;
+    width: 52px;
+
+    .ff-arrow-button--right {
+      top: 0px;
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+
+    .ff-arrow-button--down {
+      bottom: 2px;
+      animation: slideDown 0.4s ease-out;
+    }
+  }
+
+  &.ff-top {
+    height: 52px;
+    width: 24px;
+    transform: translateY(calc(-54%));
+
+    .ff-arrow-button--top {
+      top: 2px;
+      animation: slideTop 0.4s ease-out;
+    }
+  }
+
+  &.ff-right {
+    height: 24px;
+    width: 52px;
+
+    .ff-arrow-button--right {
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+  }
+
+  &.ff-down {
+    height: 52px;
+    width: 24px;
+
+    .ff-arrow-button--down {
+      bottom: 2px;
+      animation: slideDown 0.4s ease-out;
+    }
+  }
+  .ff-arrow-button {
+    background: var(--arrow-button-bg-color);
+    border: 0.5px solid var(--arrows-button-border-color);
+    padding: 0;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease;
+    position: absolute;
+
+    &--top {
+      top: 0px;
+      left: 0;
+    }
+
+    &--down {
+      bottom: 0px;
+      left: 0;
+    }
+  }
+
+  @keyframes slideTop {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    50% {
+      transform: translateY(-10px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideRight {
+    from {
+      transform: translateX(-20px);
+      opacity: 0;
+    }
+    50% {
+      transform: translateX(10px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideDown {
+    from {
+      transform: translateY(-20px);
+      opacity: 0;
+    }
+    50% {
+      transform: translateY(10px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}

package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import './ArrowsButton.scss';
+import { DirectionalArrowButtonProps } from '../type';
+import MenuOption from '../../MenuOption/MenuOption';
+
+const ArrowsButton = ({
+  direction,
+  menuOptions,
+  onArrowClick,
+}: DirectionalArrowButtonProps & { isActive: boolean }) => {
+  const getIconName = () => {
+    return `arrows_${direction}_icon`;
+  };
+
+  return (
+    <div>
+      <button
+        className={classNames(
+          'ff-arrow-button',
+          `ff-arrow-button--${direction}`
+        )}
+        onClick={onArrowClick}
+      >
+        <MenuOption
+          iconName={getIconName()}
+          options={menuOptions}
+          dropdownPlacement={direction}
+          iconSize={12}
+          iconButtonSize={24}
+          iconButtonBorderRadius={3}
+          onOptionClick={() => {}} 
+        />
+      </button>
+    </div>
+  );
+};
+
+export default ArrowsButton;

package/src/components/AddResourceButton/index.ts

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

package/src/components/AddResourceButton/type.ts

@@ -0,0 +1,92 @@
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+/**
+ * Describes the directional arrow used in the Add Resource Button component.
+ * The arrow specifies its direction (top, right, down) and associated menu options.
+ *
+ * @property {('top' | 'right' | 'down')} direction - Specifies the direction of the arrow.
+ * @property {(Object | null)[]} menuOptions - The list of menu options displayed when the arrow button is active.
+ * If null, no menu options will be shown.
+ */
+export interface DirectionalArrow {
+  direction: string | 'top' | 'right' | 'down';
+  menuOptions: {
+    label: string;
+    value: string | string[];
+    icon: string;
+    disable?: boolean;
+  }[];
+}
+
+/**
+ * Props for the Add Resource Button component.
+ *
+ * @property {string} [id] - An optional unique identifier for the Add Resource Button.
+ * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
+ * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
+ * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
+ */
+export interface AddResourceButtonProps {
+  id?: string;
+  variant?: 'primary' | 'secondary';
+  directionalArrow: {
+    /**
+     * direction option: 'top' | 'right' | 'down'
+     */
+    direction: string;
+    menuOptions: {
+      label: string;
+      value: string | string[];
+      icon: string;
+      disable?: boolean;
+    }[];
+  }[];
+  zIndex?: number;
+}
+
+/**
+ * Props for individual directional arrow buttons.
+ *
+ * @property {('top' | 'right' | 'down')} direction - The direction of the arrow button (top, right, or down).
+ * @property {(Object | any)} menuOptions - The list of menu options or a generic value for dynamic content.
+ * @property {() => void} onArrowClick - Callback function triggered when the arrow button is clicked.
+ * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
+ */
+export interface DirectionalArrowButtonProps {
+  direction: string | 'top' | 'right' | 'down';
+  menuOptions: {
+    label: string;
+    value: string | string[];
+    icon: string;
+    disable?: boolean;
+  }[];
+  onArrowClick: () => void;
+  isActive: boolean;
+  variant?: 'primary' | 'secondary';
+}
+
+/**
+ * Utility function to validate an array of directional arrows.
+ * Ensures there is at least one valid arrow in the array.
+ * If the array is empty, it returns a default arrow object.
+ */
+export const validateArrows = (
+  arrows: DirectionalArrow[]
+): DirectionalArrow[] => {
+  if (checkEmpty(arrows)) {
+    return [
+      {
+        direction: null as any,
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'sub_module',
+            icon: '',
+            disable: false,
+          },
+        ],
+      },
+    ];
+  }
+  return arrows;
+};

package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss

@@ -0,0 +1,70 @@
+@use '../../assets/styles/mixins';
+
+.ff-all-project {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  .ff-all-project-dropdown {
+    background-color: var(--secondary-icon-color);
+    color: var(--expandable-menu-default-bg);
+    height: 24px;
+    @include mixins.center-content();
+    gap: 10px;
+    padding: 4px;
+    .label-icon {
+      height: 16px;
+      width: 16px;
+      @include mixins.center-content();
+    }
+  }
+  .ff-dropdown {
+    position: absolute;
+    top: 50px;
+    padding: 1px;
+    border: 0.5px solid var(--expandable-menu-default-bg);
+    border-radius: 4px;
+    background-color: var(--secondary-icon-color);
+    color: var(--primary-icon-color);
+    .ff-search {
+      margin-bottom: 1px;
+      input {
+        height: 30px;
+        width: inherit;
+        border-radius: 4px;
+        border-style: none;
+        &::placeholder {
+          padding-left: 28px;
+          font-size: 8px;
+          line-height: 12px;
+        }
+      }
+      span {
+        position: absolute;
+        top: 15px;
+        left: 18px;
+      }
+    }
+    .scroll {
+      max-height: 124px;
+      overflow-y: scroll;
+    }
+    .option-card {
+      .projects-options {
+        @include mixins.center-content();
+        justify-content: flex-start;
+        gap: 4px;
+
+        .projects-icons {
+          @include mixins.center-content();
+          height: 24px;
+          width: 24px;
+        }
+      }
+      .all-projects-option {
+        background-color: var(--primary-icon-color);
+        color: var(--secondary-icon-color);
+        border-radius: 4px;
+      }
+    }
+  }
+}

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

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

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

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

package/src/components/AllProjectsDropdown/types.ts

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