pixel-react-excel-sheet 1.2.0

package/src/assets/styles/_fonts.scss

@@ -0,0 +1,68 @@
+@mixin fontPoppins($size: 16px) {
+  font-family: 'Poppins', sans-serif;
+  font-size: $size;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 400;
+  src: local('Poppins-Regular'),
+    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src: local('Poppins-Medium'),
+    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 600;
+  src: local('Poppins-SemiBold'),
+    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 700;
+  src: local('Poppins-Bold'),
+    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
+}
+
+.fontXs {
+  @include fontPoppins(10px);
+}
+
+.fontSm {
+  @include fontPoppins(12px);
+}
+
+.fontMd {
+  @include fontPoppins(14px);
+}
+
+.fontLg {
+  @include fontPoppins(16px);
+}
+
+.fontXL {
+  @include fontPoppins(18px);
+}
+
+.font2Xl {
+  @include fontPoppins(24px);
+}
+
+.font-size-8 {
+  @include fontPoppins(8px);
+}
+
+.font-size-32 {
+  @include fontPoppins(32px);
+}
+
+.font-size-80 {
+  @include fontPoppins(80px);
+}

package/src/assets/styles/_mixins.scss

@@ -0,0 +1,21 @@
+// Mixin for centering content
+@mixin center-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+}
+
+// Mixin for transition effects
+@mixin transition($properties, $duration: 0.3s) {
+  transition: $properties $duration;
+}
+
+//Mixin for height, width and border
+@mixin box($size, $border: none) {
+  width: $size;
+  height: $size;
+  @if $border != none {
+    border: $border;
+  }
+}

package/src/assets/utils/functionUtils.ts

@@ -0,0 +1,42 @@
+export const isFunction = (functionToCheck: any) => {
+  return (
+    functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
+  );
+};
+
+
+export const convertTo24Hour = (time12h: string): string => {
+  const [time, modifier] = time12h.split(' ');
+  if (!time || !modifier) return '00:00';
+
+  let [hours, minutes] = time.split(':');
+  if (!hours || !minutes) return '00:00';
+
+  if (hours === '12') {
+    hours = '00';
+  }
+
+  if (modifier.toUpperCase() === 'PM') {
+    hours = (parseInt(hours, 10) + 12).toString();
+  }
+
+  return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+};
+
+export const convertTo12Hour = (time24: string): string => {
+  const [hoursStr, minutesStr] = time24.split(':');
+  const hours = parseInt(hoursStr ?? '0', 10);
+  const minutes = parseInt(minutesStr ?? '0', 10);
+
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  const hours12 = hours % 12 || 12;
+
+  return `${hours12.toString().padStart(2, '0')}:${minutes
+    .toString()
+    .padStart(2, '0')} ${ampm}`;
+};
+
+export const isValid12HourTime = (timeString: string): boolean => {
+  const regex = /^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i;
+  return regex.test(timeString);
+};

package/src/components/Accordion/Accordion.scss

@@ -0,0 +1,44 @@
+@use '../../assets/styles/fonts';
+
+.ff-accordion {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  min-width: fit-content;
+  .accordion-header {
+    display: flex;
+    justify-content: space-between;
+    min-height: 32px;
+    .header-title {
+      padding: 8px;
+    }
+
+    .accordion-arrow {
+      display: flex;
+      padding: 8px;
+      align-items: center;
+      transition: transform 0.3s ease;
+      &.expanded {
+        transform: rotate(180deg);
+      }
+      &:hover {
+        color: var(--tooltip-bg-color);
+      }
+    }
+
+    &.expanded {
+      background-color: var(
+        --hover-color
+      ); //todo need to replace this color once it is available in the design system
+      border-bottom: 1px solid var(--hover-color);
+    }
+  }
+  .accordion-header:hover {
+    background-color: var(
+      --hover-color
+    ); //todo need to replace this color once it is available in the design system
+  }
+
+  .accordion-content {
+    padding: 4px;
+  }
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+import Icon from '../Icon';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Accordion>;
+const defaultArgs = {
+  headerTitle: 'Accordion',
+};
+
+export const SampleAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    headerTitle: (
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <Icon name="accordion_header_icon" />
+        <span>Home and Web</span>
+      </div>
+    ),
+  },
+};
+
+export default meta;

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import './Accordion.scss';
+import Icon from '../Icon';
+import '../../../index.scss';
+import { AccordionProps } from './types';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+
+/**
+ * Accordion UI component
+ */
+const Accordion = ({
+  headerTitle = '',
+  color,
+  minHeight = '32px', // Default min-height for accordion content
+  accordionContent = <>This is accordion content</>,
+  disable = false,
+  disableInfoMessage = '',
+}: AccordionProps) => {
+  const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);
+
+  const onAccordionClick = () => {
+    setIsAccordionExpanded(!isAccordionExpanded);
+  };
+  return (
+    <div className="ff-accordion">
+      <Tooltip title={disableInfoMessage}>
+        <div
+          className={`accordion-header ${disable && 'ff-disabled'} ${
+            isAccordionExpanded && 'expanded'
+          }`}
+          style={{ color: color || '--tooltip-bg-color' }}
+        >
+          <Typography
+            as="div"
+            className="header-title"
+            fontWeight="semi-bold"
+            lineHeight="18px"
+          >
+            {headerTitle}
+          </Typography>
+
+          <Icon
+            name={'arrow_up'}
+            hoverEffect={false}
+            className={`accordion-arrow  ${isAccordionExpanded && 'expanded'}`}
+            onClick={() => {
+              !disable && onAccordionClick();
+            }}
+          />
+        </div>
+      </Tooltip>
+      {!disable && isAccordionExpanded && (
+        <div style={{ minHeight }} className="accordion-content">
+          {accordionContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/index.ts

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

package/src/components/Accordion/types.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+export interface AccordionProps {
+  /**
+   * Accordion Header Title
+   */
+  headerTitle: string | JSX.Element;
+  /**
+   * Content that to be shown while Accordion is expanded
+   */
+  accordionContent: ReactNode;
+  /**
+   * Custom color for the Accordion header
+   */
+  color?: string;
+  /**
+   * Minimum height for the Accordion
+   */
+  minHeight?: string;
+  /**
+   * Property to disable accordion
+   */
+  disable?: boolean;
+  /**
+   * Info message to user for disabling accordion
+   */
+  disableInfoMessage?: string;
+}

package/src/components/AddResourceButton/AddButton.scss

@@ -0,0 +1,36 @@
+.ff-add-button-container {
+  position: relative;
+  border: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: transparent;
+  &.ff-hovered-add-button--primary {
+    background-color: var(--hover-color);
+  }
+  .ff-hovered-add-icon--primary {
+    svg {
+      path {
+        fill: var(--add-icon-hover-color);
+      }
+    }
+  }
+  .ff-add-icon--primary {
+    svg {
+      path {
+        fill: var(--brand-color);
+      }
+    }
+  }
+  .ff-add-button {
+    position: absolute;
+    border: none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    background: none;
+  }
+}

package/src/components/AddResourceButton/AddButton.stories.tsx

@@ -0,0 +1,126 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AddButton from './AddButton';
+import { AddResourceButtonProps } from './type';
+
+const meta: Meta<typeof AddButton> = {
+  title: 'Components/AddResourceButton',
+  component: AddButton,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof AddButton>;
+
+export const Default: Story = {
+  args: {
+    directionalArrow: [
+      {
+        direction: 'right',
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'sub_module',
+            icon: 'plus',
+            disable: false,
+          },
+        ],
+      },
+    ],
+  } as AddResourceButtonProps,
+};
+
+export const TwoArrowsButtons: Story = {
+  args: {
+    directionalArrow: [
+      {
+        direction: 'top',
+        menuOptions: [
+          {
+            label: 'Add Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+      {
+        direction: 'right',
+        menuOptions: [
+          {
+            label: 'Add Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+    ],
+  } as AddResourceButtonProps,
+};
+
+export const ThreeArrowsButton: Story = {
+  args: {
+    directionalArrow: [
+      {
+        direction: 'top',
+        menuOptions: [
+          {
+            label: 'Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+      {
+        direction: 'right',
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Automation Script',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Manual Test Case',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Pre / Post Condition',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Authorization',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+      {
+        direction: 'down',
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'sub_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+    ],
+  } as AddResourceButtonProps,
+};
+
+export default meta;

package/src/components/AddResourceButton/AddButton.tsx

@@ -0,0 +1,121 @@
+import './AddButton.scss';
+import ArrowsButton from './ArrowsButton/ArrowsButton';
+import Icon from '../Icon';
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  AddResourceButtonProps,
+  DirectionalArrow,
+  validateArrows,
+} from './type';
+import usePortalPosition from '../../hooks/usePortalPosition';
+
+const AddButton = ({
+  id = 'AddModule',
+  variant = 'primary',
+  directionalArrow = [
+    {
+      direction: 'right',
+      menuOptions: [
+        { label: 'Sub Module', value: 'sub_module', icon: '', disable: false },
+      ],
+    },
+  ],
+  zIndex = 99,
+}: AddResourceButtonProps) => {
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+  const [positionArrowContainer, setPositionArrowContainer] = useState<{
+    left: number;
+    top: number;
+  }>({ left: 0, top: 0 });
+  const [activeArrow, setActiveArrow] = useState<string>('');
+  const arrowContainerRef = useRef<HTMLDivElement>(null);
+  const validArrows = validateArrows(directionalArrow);
+  const portalPosition = usePortalPosition(arrowContainerRef, isHovered);
+
+  const handleHover = () => {
+    if (!activeArrow) {
+      setIsHovered(true);
+    }
+    const { positionX, positionY } = portalPosition(arrowContainerRef);
+    setPositionArrowContainer({ left: positionX, top: positionY });
+  };
+
+  const handleLeave = () => {
+    setIsHovered(false);
+    setActiveArrow('');
+  };
+
+  const handleArrowClick = (direction: string) => {
+    if (activeArrow === direction) {
+      setActiveArrow('');
+      setIsHovered(false);
+    } else {
+      setActiveArrow(direction);
+      setIsHovered(true);
+    }
+  };
+
+  const getArrowButtonClass = () => {
+    const directions = validArrows
+      .map((arrow: { direction: string }) => arrow.direction)
+      .sort()
+      .join('-');
+    return `ff-${directions}`;
+  };
+
+  return (
+    <div
+      className={`ff-add-button-container ${
+        isHovered ? `ff-hovered-add-button--${variant}` : ''
+      }`}
+      id={id}
+      onMouseEnter={handleHover}
+      onMouseLeave={handleLeave}
+      ref={arrowContainerRef}
+    >
+      <span className="ff-add-button">
+        <Icon
+          name="plus_icon"
+          width={16}
+          height={16}
+          className={
+            isHovered
+              ? `ff-hovered-add-icon--${variant}`
+              : `ff-add-icon--${variant}`
+          }
+        />
+      </span>
+
+      {isHovered &&
+        createPortal(
+          <div
+            className={`ff-arrow-buttons-container ${getArrowButtonClass()}`}
+            onMouseEnter={handleHover}
+            onMouseLeave={handleLeave}
+            style={{
+              left: positionArrowContainer.left,
+              top: positionArrowContainer.top,
+              zIndex: zIndex,
+            }}
+          >
+            {directionalArrow.map(
+              ({ direction, menuOptions }: DirectionalArrow, index: number) => (
+                <ArrowsButton
+                  key={index}
+                  direction={direction}
+                  onArrowClick={() => handleArrowClick(direction)}
+                  menuOptions={menuOptions}
+                  isActive={activeArrow === direction}
+                  variant={variant}
+                />
+              )
+            )}
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};
+
+export default AddButton;