pixel-react-excel-sheet 1.2.0

package/src/components/ExpandableMenu/ExpandableMenu.scss

@@ -0,0 +1,110 @@
+@use '../../assets/styles/fonts';
+
+.ff-expandable-chip-menu {
+  display: inline-flex;
+  gap: 16px;
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  overflow: hidden;
+  width: auto;
+  padding: 4px 8px;
+  transition: all 0.3s ease;
+
+  &--primary {
+    border: 0.5px solid var(--brand-color);
+    background-color: var(--expandable-menu-default-bg);
+  }
+
+  .ff-label-chip {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px;
+    white-space: nowrap;
+    padding: 2px 0;
+
+    .arrow-icon {
+      height: 14px;
+      width: 14px;
+      display: grid;
+      place-items: center;
+    }
+
+    &--primary {
+      color: var(--brand-color);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+
+  &--medium {
+    @extend .fontSm;
+    line-height: 18px;
+  }
+
+  .ff-sub-chips {
+    display: flex;
+    gap: 8px;
+    max-width: 500px;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    opacity: 0;
+  }
+
+  &.expanded .ff-sub-chips {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+
+  .ff-sub-chip {
+    padding: 2px 8px;
+    border-radius: 12px;
+    white-space: nowrap;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    opacity: 0;
+    transform: translateX(-10px);
+    animation: fadeIn 0.5s ease forwards;
+
+    &--primary {
+      background: var(--expandable-menu-option-bg);
+      color: var(--brand-color);
+
+      &:hover,
+      &.selected {
+        background-color: var(--brand-color);
+        color: var(--expandable-menu-default-bg);
+      }
+    }
+    &--medium {
+      @extend .fontSm;
+      line-height: 18px;
+    }
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  &.expanded .ff-sub-chip {
+    animation: fadeIn 0.5s ease forwards;
+  }
+}

package/src/components/ExpandableMenu/ExpandableMenu.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExpandableMenu from './ExpandableMenu';
+import { useState } from 'react';
+
+const meta: Meta<typeof ExpandableMenu> = {
+  title: 'Components/ExpandableMenu',
+  component: ExpandableMenu,
+  parameters: {
+    layout: 'left',
+  },
+  argTypes: {
+    disable: Boolean,
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof ExpandableMenu>;
+
+const defaultArgs = {
+  label: 'Execution Settings',
+  disable: false,
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    subMenus: [
+      'Environment settings',
+      'Run settings',
+      'Report settings',
+      'Additional settings',
+      'Environment settings',
+      'Run settings',
+      'Report settings',
+      'Additional settings',
+      'Environment settings',
+      'Run settings',
+      'Report settings',
+      'Additional settings',
+    ],
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [selectedMenu, setSelectedMenu] = useState<string>('');
+    const onSubMenuClick = (chip: string) => {
+      setSelectedMenu(chip);
+    };
+
+    return (
+      <ExpandableMenu
+        {...defaultArgs}
+        subMenus={[
+          'Environment settings',
+          'Run settings',
+          'Report settings',
+          'Additional settings',
+        ]}
+        selectedMenu={selectedMenu}
+        onSubMenuClick={onSubMenuClick}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/ExpandableMenu/ExpandableMenu.tsx

@@ -0,0 +1,101 @@
+import { useCallback, useState } from 'react';
+import './ExpandableMenu.scss';
+import classNames from 'classnames';
+import { ExpandableMenuProps } from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Icon from '../Icon';
+import './ExpandableMenu.scss';
+import Typography from '../Typography';
+
+const ExpandableMenu: React.FC<ExpandableMenuProps> = ({
+  label = '',
+  icon = (
+    <Icon
+      name="arrow_right"
+      height={5}
+      width={8}
+      color={'var(--icons-default-color)'}
+    />
+  ),
+  variant = 'primary',
+  size = 'medium',
+  disable = false,
+  subMenus = [],
+  selectedMenu = '',
+  onSubMenuClick = () => {},
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const toggleExpand = () => {
+    setIsExpanded((prev) => !prev);
+    setIsHovered(false);
+  };
+
+  const handleMouseEnter = useCallback(() => {
+    if (!isExpanded) setIsHovered(true);
+  }, [isExpanded]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (!isExpanded) setIsHovered(false);
+  }, [isExpanded]);
+
+  const handleSelectedMenu = (chip: string) => {
+    if (!disable) {
+      onSubMenuClick(chip);
+      setIsExpanded(true);
+    }
+  };
+
+  const hasExpanded = isExpanded || isHovered;
+
+  return (
+    <div
+      className={classNames(
+        'ff-expandable-chip-menu',
+        `ff-expandable-chip-menu--${variant}`,
+        {
+          'ff-expandable-chip-menu--disabled': disable,
+          expanded: hasExpanded,
+        }
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div
+        className={`ff-label-chip ff-label-chip--${variant} ff-expandable-chip-menu--${size}`}
+        onClick={toggleExpand}
+      >
+        <Typography>{label}</Typography>
+        <span className="arrow-icon">{icon}</span>
+      </div>
+
+      {hasExpanded && !checkEmpty(subMenus) && (
+        <div
+          className={classNames('ff-sub-chips', {
+            expanded: hasExpanded,
+          })}
+        >
+          {subMenus.map((chip, index) => (
+            <div
+              key={index}
+              className={classNames(
+                'ff-sub-chip',
+                `ff-sub-chip--${variant}`,
+                `ff-sub-chip--${size}`,
+                {
+                  selected: selectedMenu === chip,
+                }
+              )}
+              onClick={() => handleSelectedMenu(chip)}
+            >
+              {chip}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ExpandableMenu;

package/src/components/ExpandableMenu/index.ts

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

package/src/components/ExpandableMenu/types.ts

@@ -0,0 +1,34 @@
+export interface ExpandableMenuProps {
+  /**
+   * mandatory | label for the expandable menu
+   */
+  label: string;
+  /**
+   * optional | Icon to describe direction of expansion
+   */
+  icon?: React.ReactNode;
+  /**
+   * optional | variant of the menu
+   */
+  variant?: 'primary';
+  /**
+   * optional | size of the expandable menu
+   */
+  size?: 'medium';
+  /**
+   * optional | disable to disable the menu and prevent click events but not hover event
+   */
+  disable?: boolean;
+  /**
+   * Mandatory |  sub menus to be shown inside  expandable menu
+   */
+  subMenus: string[];
+  /**
+   * optional | selected sub menu of the expandable menu
+   */
+  selectedMenu?: string;
+  /**
+   * optional | onSubMenuClick event to perform action on click of sub menu
+   */
+  onSubMenuClick?: (subChip: any) => void;
+}

package/src/components/FF_Captcha/Recaptcha.scss

@@ -0,0 +1,11 @@
+.ff-recaptcha-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    
+    .ff-recaptcha-error {
+      color: var(--input-error-text-color);
+      font-size: 12px;
+      margin-top: 4px;
+    }
+  }

package/src/components/FF_Captcha/Recaptcha.tsx

@@ -0,0 +1,41 @@
+import { useState, forwardRef } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { RecaptchaProps } from './types';
+import './Recaptcha.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+
+const Recaptcha = forwardRef<ReCAPTCHA, RecaptchaProps>(
+  ({ onVerify, className = '', error: externalError, sitekey, ...props }, ref) => {
+    const [internalError, setInternalError] = useState<string | null>(null);
+    
+    const handleChange = (token: string | null) => {
+      if (token) {
+        setInternalError(null);
+        onVerify(token);
+      } else {
+        setInternalError('Please complete the CAPTCHA');
+      }
+    };
+
+    const error = externalError || internalError;
+
+    return (
+      <div className={classNames('ff-recaptcha-wrapper', className)}>
+        <ReCAPTCHA
+          ref={ref}
+          sitekey={sitekey}
+          onChange={handleChange}
+          {...props}
+        />
+        {error && (
+          <div className="ff-recaptcha-error">
+            <Typography fontSize={12}>{error}</Typography>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+export default Recaptcha;

package/src/components/FF_Captcha/captcha.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Recaptcha from './Recaptcha';
+
+const meta: Meta<typeof Recaptcha> = {
+  title: 'Components/Recaptcha',
+  component: Recaptcha,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Recaptcha>;
+
+const defaultArgs = {
+  sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', // Test key
+  onVerify: () => {},
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    ...defaultArgs,
+    error: 'Custom error message',
+  },
+};
+
+export const WithCustomTheme: Story = {
+  args: {
+    ...defaultArgs,
+    theme: 'dark',
+  },
+};
+
+export default meta;

package/src/components/FF_Captcha/types.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+
+export interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, 'onChange'> {
+  /**
+   * Callback function that receives the verification token
+   */
+  onVerify: (token: string | null) => void;
+  /**
+   * Optional CSS class name
+   */
+  className?: string;
+  /**
+   * Optional error message to display
+   */
+  error?: string | null;
+  /**
+   * reCAPTCHA site key
+   */
+  sitekey: string;
+}
+

package/src/components/FileDropzone/Dropzone.tsx

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import classNames from 'classnames';
+import './FileDropzone.scss';
+import { DroppableProps } from './types';
+import Button from '../Button';
+import Typography from '../Typography';
+
+const Dropzone: FC<DroppableProps> = ({
+  icon,
+  primaryLabel,
+  secondaryLabel,
+  buttonLabel,
+  getRootProps,
+  getInputProps,
+  isDragActive = false,
+}) => {
+  return (
+    <div
+      {...getRootProps()}
+      className={classNames('ff-file-dropzone', {
+        'ff-file-dropzone--active': isDragActive,
+      })}
+    >
+      <div className="ff-file-dropzone-content__icon">{icon}</div>
+      <div className="ff-file-dropzone-content__labels">
+        <Typography
+          as="p"
+          fontWeight="semi-bold"
+          lineHeight="18px"
+          textAlign="center"
+          color={'var(--text-color)'}
+        >
+          {primaryLabel}
+        </Typography>
+        <Typography
+          as="p"
+          lineHeight="18px"
+          textAlign="center"
+          color={'var(--text-color)'}
+        >
+          {secondaryLabel}
+        </Typography>
+        <Button
+          variant="primary"
+          label={buttonLabel}
+          className="choose-file-btn"
+        >
+          <input {...getInputProps()} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Dropzone;

package/src/components/FileDropzone/FileDropzone.scss

@@ -0,0 +1,134 @@
+@mixin column-flex-gap($gap: 0) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+@mixin center {
+  display: grid;
+  place-items: center;
+}
+
+@mixin icon-container($height: 24px, $width: 24px) {
+  height: $height;
+  width: $width;
+}
+
+.ff-file-dropzone-wrapper {
+  @include column-flex-gap(10px);
+
+  .ff-file-dropzone {
+    width: 640px;
+    height: 188px;
+    padding: 16px 0;
+    border-radius: 8px;
+    background: var(--file-dropzone-default-color);
+    border: 1px dashed var(--brand-color);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 8px;
+
+    &--active {
+      background-color: var(--file-dropzone-selected-color);
+    }
+
+    &-content {
+      &__icon {
+        height: 80px;
+        width: 80px;
+        display: grid;
+        place-items: center;
+      }
+
+      &__labels {
+        .choose-file-btn {
+          margin: 0 auto;
+          position: relative;
+          font-weight: 600;
+          line-height: 15px;
+
+          input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .ff-file-details-wrapper {
+    @include column-flex-gap(10px);
+    width: 640px;
+    max-height: 300px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    padding: 2px;
+
+    ::-webkit-scrollbar {
+      width: 2px;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: thin;
+
+    .ff-file-details {
+      @include column-flex-gap(10px);
+
+      &__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px;
+        border-radius: 4px;
+        background-color: var(--file-details-bg);
+        box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
+        overflow: hidden;
+
+        .ff-file-info {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          width: 60%;
+
+          .ff-file-info__icon {
+            @include center;
+            @include icon-container;
+          }
+
+          &__name-wrapper {
+            @include column-flex-gap(2px);
+            justify-content: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+
+            &__name {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              display: block;
+              color: var(--text-color);
+            }
+          }
+        }
+
+        .ff-file-actions {
+          display: flex;
+          align-items: center;
+          &__icon-replace,
+          &__icon-remove {
+            @include icon-container;
+            @include center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -0,0 +1,83 @@
+import { StoryObj, Meta } from '@storybook/react';
+import FileDropzone from './FileDropzone';
+import Toaster from '../Toast';
+import { useState } from 'react';
+
+const meta: Meta<typeof FileDropzone> = {
+  title: 'Components/FileDropzone',
+  component: FileDropzone,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof FileDropzone>;
+
+const defaultArgs = {
+  accept: ['.png'],
+  multiple: true,
+  maxFiles: 5,
+  maxSize: 5000000,
+  maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
+  invalidFileMessage: 'Invalid file format',
+  fileExistMessage: 'File already exist with same name and type',
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const withMIMEValidation: Story = {
+  args: {
+    ...defaultArgs,
+    accept: [
+      'image/png',
+      'image/jpeg',
+      'application/x-zip-compressed',
+      'application/zip',
+    ],
+    validateMIMEType: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [showToaster, setShowToaster] = useState<boolean>(false);
+
+    const showMaxFilesError = () => {
+      setShowToaster(true);
+      setTimeout(() => {
+        setShowToaster(false);
+      }, 2000);
+    };
+
+    return (
+      <>
+        <FileDropzone
+          {...defaultArgs}
+          accept={[
+            'image/png',
+            'image/jpeg',
+            'application/x-zip-compressed',
+            'application/zip',
+          ]}
+          validateMIMEType={true}
+          onMaxFilesError={showMaxFilesError}
+        />
+        {showToaster && (
+          <Toaster
+            isOpen={showToaster}
+            variant="danger"
+            toastTitle="Error"
+            toastMessage={'Max 5 files can be uploaded'}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export default meta;