pixel-react 1.10.15 → 1.10.16

package/src/components/Excel/dataConversion.ts

@@ -1,192 +0,0 @@
-const getTextAlignment = (
-  alignment: string
-): 'left' | 'right' | 'center' | 'justify' => {
-  switch (alignment.toLowerCase()) {
-    case 'LEFT':
-      return 'left';
-    case 'RIGHT':
-      return 'right';
-    case 'CENTER':
-      return 'center';
-    case 'JUSTIFY':
-      return 'justify';
-    default:
-      return 'left';
-  }
-};
-
-const getTextDecoration = (
-  textDecoration: string
-): 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy' => {
-  if (!textDecoration) {
-    return 'solid';
-  }
-  switch (textDecoration.toLowerCase()) {
-    case 'solid':
-      return 'solid';
-    case 'dotted':
-      return 'dotted';
-    case 'dashed':
-      return 'dashed';
-    case 'wavy':
-      return 'wavy';
-    default:
-      return 'solid';
-  }
-};
-
-const getTextAlignmentBack = (
-  alignment: 'left' | 'right' | 'center' | 'justify'
-): string => {
-  switch (alignment) {
-    case 'left':
-      return 'LEFT';
-    case 'right':
-      return 'RIGHT';
-    case 'center':
-      return 'CENTER';
-    case 'justify':
-      return 'JUSTIFY';
-    default:
-      return 'LEFT';
-  }
-};
-
-export const getTextDecorationBack = (
-  textDecoration: string
-): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
-  switch (textDecoration.toLowerCase()) {
-    case 'solid':
-      return 'solid';
-    case 'dotted':
-      return 'dotted';
-    case 'dashed':
-      return 'dashed';
-    case 'wavy':
-      return 'wavy';
-    case 'underline':
-      return 'NONE';
-    default:
-      return 'solid';
-  }
-};
-
-export function convertStyleToFrontend(
-  backendStyle: BackendStyle
-): React.CSSProperties {
-  const { border } = backendStyle;
-
-  let borderTop = '';
-  let borderRight = '';
-  let borderBottom = '';
-  let borderLeft = '';
-
-  if (border.top !== 'THIN') {
-    borderTop =
-      border.top === 'MEDIUM'
-        ? '2px solid var(--input-hover-border-color)'
-        : '1px solid var(--excel-header-border)';
-  }
-  if (border.right !== 'THIN') {
-    borderRight =
-      border.right === 'MEDIUM'
-        ? '2px solid var(--input-hover-border-color)'
-        : '1px solid var(--excel-header-border)';
-  }
-  if (border.bottom !== 'THIN') {
-    borderBottom =
-      border.bottom === 'MEDIUM'
-        ? '2px solid var(--input-hover-border-color)'
-        : '1px solid var(--excel-header-border)';
-  }
-  if (border.left !== 'THIN') {
-    borderLeft =
-      border.left === 'MEDIUM'
-        ? '2px solid var(--input-hover-border-color)'
-        : '1px solid var(--excel-header-border)';
-  }
-
-  return {
-    fontSize: `${backendStyle.size}px`,
-    fontFamily: backendStyle.name,
-    color: `#${backendStyle.color}`,
-    backgroundColor: `#${backendStyle.backgroundColor}`,
-    fontWeight: backendStyle.bold ? 'bold' : 'normal',
-    fontStyle: backendStyle.italic ? 'italic' : 'normal',
-    textDecoration: backendStyle.underline
-      ? `underline ${getTextDecoration(backendStyle.underline)}`
-      : 'none',
-    borderTop: borderTop,
-    borderRight: borderRight,
-    borderBottom: borderBottom,
-    borderLeft: borderLeft,
-    textAlign: getTextAlignment(backendStyle.alignment.horizontal),
-  };
-}
-
-const getBorderStyle = (
-  border: string | undefined
-): 'NONE' | 'THIN' | 'MEDIUM' | 'THICK' => {
-  if (!border || border === 'none') {
-    return 'THIN';
-  }
-  if (
-    border.includes('solid') ||
-    border.includes('dashed') ||
-    border.includes('dotted')
-  ) {
-    if (border.includes('2px') || border.includes('medium')) {
-      return 'MEDIUM';
-    } else if (border.includes('3px') || border.includes('medium')) {
-      return 'THICK';
-    }
-  }
-  return 'THIN';
-};
-
-export const convertStyleToBackend = (
-  frontendStyle: React.CSSProperties
-): BackendStyle => {
-  return {
-    name: frontendStyle.fontFamily || 'Arial',
-    size: parseInt(frontendStyle.fontSize?.toString() || '11', 11),
-    bold: frontendStyle.fontWeight === 'bold',
-    italic: frontendStyle.fontStyle === 'italic',
-    underline: 'solid',
-    color: frontendStyle.color?.replace('#', '') || '000000',
-    backgroundColor:
-      frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
-    borderColor:
-      frontendStyle.borderTop &&
-      frontendStyle.borderTop.toString().includes('solid')
-        ? 'F2F2F2'
-        : '000000',
-    border: {
-      top: getBorderStyle(
-        frontendStyle.borderTop ? frontendStyle.borderTop.toString() : undefined
-      ),
-      right: getBorderStyle(
-        frontendStyle.borderRight
-          ? frontendStyle.borderRight.toString()
-          : undefined
-      ),
-      bottom: getBorderStyle(
-        frontendStyle.borderBottom
-          ? frontendStyle.borderBottom.toString()
-          : undefined
-      ),
-      left: getBorderStyle(
-        frontendStyle.borderLeft
-          ? frontendStyle.borderLeft.toString()
-          : undefined
-      ),
-    },
-    alignment: {
-      horizontal: getTextAlignmentBack(
-        frontendStyle.textAlign as 'left' | 'right' | 'center' | 'justify'
-      ),
-      vertical: 'BOTTOM',
-      wrapText: false,
-    },
-  };
-};

package/src/components/Excel/index.ts

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

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

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

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

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

package/src/components/ExpandableMenu/types.ts

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

@@ -1,51 +0,0 @@
-import React, { useState, forwardRef, ComponentType, Ref } from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-import { RecaptchaProps } from './types';
-import './Recaptcha.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-// Extend the props to include React.RefAttributes
-const FixedReCAPTCHA = ReCAPTCHA as unknown as ComponentType<
-  {
-    sitekey: string;
-    onChange: (token: string | null) => void;
-    className?: string;
-    theme?: 'light' | 'dark';
-    size?: 'compact' | 'normal' | 'invisible';
-    tabindex?: number;
-    badge?: 'bottomright' | 'bottomleft' | 'inline';
-  } & React.RefAttributes<ReCAPTCHA>
->;
-const Recaptcha = forwardRef<ReCAPTCHA, RecaptchaProps>(
-  (
-    { onVerify, className = '', error: externalError, sitekey, ...props },
-    ref: Ref<ReCAPTCHA>
-  ) => {
-    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)}>
-        <FixedReCAPTCHA
-          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

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

@@ -1,30 +0,0 @@
-import { ComponentProps } from 'react';
-// Fix ReCAPTCHA type by casting to a compatible type
-type FixedReCAPTCHA = React.ComponentType<{
-  sitekey: string;
-  onChange: (token: string | null) => void;
-  className?: string;
-  theme?: 'light' | 'dark';
-  size?: 'compact' | 'normal' | 'invisible';
-  tabindex?: number;
-  badge?: 'bottomright' | 'bottomleft' | 'inline';
-}>;
-export interface RecaptchaProps
-  extends Omit<ComponentProps<FixedReCAPTCHA>, '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/FieldSet/FieldSet.stories.tsx

@@ -1,104 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import FieldSet from './FieldSet';
-import Typography from '../Typography';
-
-const meta: Meta<typeof FieldSet> = {
-  title: 'Components/FieldSet',
-  component: FieldSet,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof FieldSet>;
-
-const defaultArgs = {
-  legendName: 'Default Legend',
-  height: '200px',
-  width: '300px',
-  children: <Typography>'Default content inside the FieldSet.'</Typography>,
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
-
-export const CustomDimensions: Story = {
-  args: {
-    ...defaultArgs,
-    height: '300px',
-    width: '400px',
-    legendName: 'Custom Dimensions',
-  },
-};
-
-export const WithNestedChildren: Story = {
-  args: {
-    ...defaultArgs,
-    legendName: 'Nested Content',
-    children: (
-      <div>
-        <p>This is some nested content inside the FieldSet.</p>
-        <button>Click Me</button>
-      </div>
-    ),
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [legend, setLegend] = useState('Controlled FieldSet');
-    const [content, setContent] = useState('Initial Content');
-
-    const handleLegendChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-      setLegend(event.target.value);
-
-    const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-      setContent(event.target.value);
-
-    return (
-      <>
-        <div style={{ marginBottom: '1rem' }}>
-          <label>
-            Legend:
-            <input
-              type="text"
-              value={legend}
-              onChange={handleLegendChange}
-              style={{ marginLeft: '0.5rem' }}
-            />
-          </label>
-        </div>
-        <div style={{ marginBottom: '1rem' }}>
-          <label>
-            Content:
-            <input
-              type="text"
-              value={content}
-              onChange={handleContentChange}
-              style={{ marginLeft: '0.5rem' }}
-            />
-          </label>
-        </div>
-        <FieldSet legendName={legend} height="250px" width="350px">
-          {content}
-        </FieldSet>
-      </>
-    );
-  },
-};
-
-export const EmptyFieldSet: Story = {
-  args: {
-    legendName: 'Empty FieldSet',
-    height: '32px',
-    width: '317px',
-    children: null,
-  },
-};
-
-export default meta;

package/src/components/FieldSet/FieldSet.tsx

@@ -1,29 +0,0 @@
-import { FC } from 'react';
-import './FieldSet.scss';
-import { fieldSetProps } from './types';
-import Typography from '../Typography';
-const FieldSet: FC<fieldSetProps> = ({
-  legendName,
-  height,
-  width,
-  children,
-}) => {
-  return (
-    <div className="ff_fieldSet_container">
-      <fieldset className="ff_fieldSet" style={{ height, width }}>
-        <legend className="ff_legend_container">
-          <Typography
-            color="var(--license_header_text_color)"
-            fontSize={8}
-            lineHeight="12px"
-          >
-            {legendName}
-          </Typography>
-        </legend>
-        <div className="ff_children_container">{children}</div>
-      </fieldset>
-    </div>
-  );
-};
-
-export default FieldSet;

package/src/components/FieldSet/index.ts

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

package/src/components/FieldSet/types.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface fieldSetProps {
-  legendName: string;
-  height: string;
-  width: string;
-  children: ReactNode | string;
-}