pixel-react 1.7.8 → 1.7.9

package/src/components/TextArea/Textarea.tsx

@@ -17,6 +17,7 @@ const Textarea = ({
   onChange,
   onBlur,
   onFocus,
+  onPaste,
   rows = 4,
   cols = 40,
   resize = false,
@@ -65,6 +66,7 @@ const Textarea = ({
         onChange={onChange}
         onBlur={onBlur}
         onFocus={onFocus}
+        onPaste={onPaste}
         required={required}
         rows={rows}
         cols={cols}

package/src/components/TextArea/Types.ts

@@ -49,6 +49,9 @@ export interface TextareaProps {
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
 
   onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+
+  onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+  
   /**
    * id to select the textarea field uniquely
    */

package/src/index.ts

@@ -71,6 +71,7 @@ import FieldSet from './components/FieldSet';
 import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
 import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
 import ProgressBar from './components/ProgressBar';
+import ChooseFile from './components/ChooseFile/ChooseFile';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -184,6 +185,8 @@ export {
   PhoneInputField,
   TableWithAccordion,
   ProgressBar,
+  ChooseFile,
+  
   // utils exports
   checkEmpty,
   getExtension,

package/src/utils/validateFile/validateFile.stories.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import {
+  validateFileExtension,
+  validateZipFileExtension,
+} from './validateFile';
+
+export default {
+  title: 'Utils/validateFile',
+};
+
+const allowedFileTypes = {
+  '.txt': 'text/plain',
+  '.zip': 'application/zip',
+  '.jpg': 'image/jpeg',
+};
+
+export const ValidateFileExtension = () => {
+  const [result, setResult] = useState<string | boolean>('');
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isValid = validateFileExtension(event, allowedFileTypes);
+    setResult(isValid ? 'Valid file type' : 'Invalid file type');
+  };
+
+  return (
+    <div>
+      <h3>Validate File Extension</h3>
+      <input type="file" onChange={handleFileChange} />
+      <p>Result: {result.toString()}</p>
+    </div>
+  );
+};
+
+export const ValidateZipFileExtension = () => {
+  const [result, setResult] = useState<string | boolean>('');
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isValid = validateZipFileExtension(event);
+    setResult(isValid ? 'Valid ZIP file' : 'Invalid ZIP file');
+  };
+
+  return (
+    <div>
+      <h3>Validate ZIP File Extension</h3>
+      <input type="file" onChange={handleFileChange} />
+      <p>Result: {result.toString()}</p>
+    </div>
+  );
+};

package/src/utils/validateFile/validateFile.ts

@@ -0,0 +1,39 @@
+export const validateFileExtension = (
+  file: File | React.ChangeEvent<HTMLInputElement>,
+  allowedFileTypes: Record<string, string>
+) => {
+  const selectedFile =
+    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
+    (file as File);
+  const fileExtension =
+    '.' + selectedFile?.name?.split('.')?.pop()?.toLowerCase();
+  const fileType = selectedFile?.type;
+  if (
+    ['.ipa', '.y4m', '.yml', '.md', '.pem', '.properties'].includes(
+      fileExtension
+    ) &&
+    Object.keys(allowedFileTypes)?.includes(fileExtension)
+  ) {
+    return true;
+  }
+  return (
+    allowedFileTypes[fileExtension] &&
+    fileType === allowedFileTypes[fileExtension]
+  );
+};
+
+export const validateZipFileExtension = (
+  file: File | React.ChangeEvent<HTMLInputElement>
+) => {
+  const selectedFile =
+    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
+    (file as File);
+  // List of valid MIME types
+  const validMimeTypes = ['application/zip', 'application/x-zip-compressed'];
+  // Validating the file extension and MIME type
+  return (
+    selectedFile &&
+    validMimeTypes?.includes(selectedFile?.type) &&
+    selectedFile?.name?.toLowerCase()?.endsWith('.zip')
+  );
+};

package/lib/components/AddButton/AddButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './AddButton.scss';
-import { AddButtonProps } from './types';
-declare const AddButton: React.FC<AddButtonProps>;
-export default AddButton;

package/lib/components/AddButton/AddButton.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const PrimaryAddButton: Story;
-export default meta;

package/lib/components/AddButton/index.d.ts

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

package/lib/components/AddButton/types.d.ts

@@ -1,4 +0,0 @@
-export interface AddButtonProps {
-    name: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}

package/lib/components/AddVariables/AddVariables.d.ts

@@ -1,5 +0,0 @@
-import { AddVariableProps } from './types';
-import './AddVariables.scss';
-import React from 'react';
-declare const AddVariables: React.FC<AddVariableProps>;
-export default AddVariables;

package/lib/components/AddVariables/index.d.ts

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

package/lib/components/AddVariables/types.d.ts

@@ -1,35 +0,0 @@
-export type dynamicObject = {
-    [key: string]: any;
-};
-export interface AddVariableProps {
-    /**
-     * Label for the field
-     */
-    label?: string;
-    /**
-     * List of variables
-     */
-    variableList?: dynamicObject[];
-    /**
-     * Place holder for the input field
-     */
-    placeholder?: string;
-    /**
-     * Function to handle input change
-     * @param value
-     * @returns
-     */
-    onChange: (value: string) => void;
-    /**
-     * Function to handle create variable icon click
-     */
-    onCreateVariableClick?: () => void;
-    /**
-     * Value of the input field
-     */
-    value: string;
-    /**
-     * Width of the dropdown
-     */
-    dropdownWidth?: string;
-}

package/lib/components/AttachImage/AttachImage.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AttachImage from './AttachImage';
-import { AttachImageProps } from './types';
-declare const meta: Meta<typeof AttachImage>;
-export default meta;
-type Story = StoryObj<AttachImageProps>;
-export declare const Default: Story;

package/lib/components/Charts/BarChart/BarChart.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import BarChart from './BarChart';
-declare const meta: Meta<typeof BarChart>;
-export default meta;
-type Story = StoryObj<typeof BarChart>;
-export declare const BarChartDashboard: Story;

package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import IconRadialChart from './IconRadialChart';
-declare const meta: Meta<typeof IconRadialChart>;
-export default meta;
-type Story = StoryObj<typeof IconRadialChart>;
-export declare const Default: Story;
-export declare const Mobile: Story;
-export declare const WithoutIcon: Story;

package/lib/components/Charts/LineChart/LineChart.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import LineChart from './LineChart';
-import { LineChartProps } from './types';
-declare const meta: Meta<typeof LineChart>;
-export default meta;
-export declare const DefaultLineChart: StoryObj<LineChartProps>;
-export declare const StatusLineChart: StoryObj<LineChartProps>;

package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import MultiRadialChart from './MultiRadialChart';
-declare const meta: Meta<typeof MultiRadialChart>;
-export default meta;
-type Story = StoryObj<typeof MultiRadialChart>;
-export declare const Default: Story;
-export declare const numberLegend: Story;
-export declare const PillLegend: Story;

package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ConnectingBranch from './ConnectingBranch';
-declare const meta: Meta<typeof ConnectingBranch>;
-export default meta;
-type Story = StoryObj<typeof ConnectingBranch>;
-export declare const Default: Story;

package/lib/components/EditTextField/EditTextField.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import EditTextField from './EditTextField';
-import '../../assets/styles/_colors.scss';
-import './EditTextField.scss';
-declare const meta: Meta<typeof EditTextField>;
-type Story = StoryObj<typeof EditTextField>;
-export declare const textFieldWithLabel: Story;
-export declare const textFieldWithOutLabel: Story;
-export declare const openTextField: Story;
-export default meta;

package/lib/components/Editor/Editor.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { EditorProps } from './types';
-declare const meta: Meta<EditorProps>;
-export default meta;
-type Story = StoryObj<EditorProps>;
-export declare const Default: Story;

package/lib/components/Excel/ContextMenu/ContextMenu.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './ContextMenu.scss';
-declare const ContextMenu: React.FC<ContextMenuProps>;
-export default ContextMenu;

package/lib/components/Excel/ExcelFile.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ExcelFile from './ExcelFile/ExcelFile';
-declare const meta: Meta<typeof ExcelFile>;
-type Story = StoryObj<typeof ExcelFile>;
-export declare const Default: Story;
-export default meta;

package/lib/components/ExcelFile/ChangeExcelStyles.d.ts

@@ -1,14 +0,0 @@
-import { CellBase } from "./ExcelFile/Excel";
-interface ChangeExcelStylesOptions {
-    sheetName: string;
-    styleType: string;
-    value: string;
-    selectedCell: {
-        row: number;
-        column: number;
-    }[];
-}
-export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
-    [key: string]: Matrix<CellBase>;
-}>>, options: ChangeExcelStylesOptions): void;
-export {};

package/lib/components/ExcelFile/ImportExcelStyles.d.ts

@@ -1,24 +0,0 @@
-interface CellStyle {
-    color?: string;
-    backgroundColor?: string;
-    bold?: boolean;
-    italic?: boolean;
-    name?: string;
-    border: {
-        top: string;
-        bottom: string;
-        left: string;
-        right: string;
-    };
-    alignment: {
-        horizontal?: string;
-        vertical?: string;
-        wrapText?: boolean;
-    };
-}
-interface CellData {
-    style?: CellStyle;
-}
-type ImportExcelStylesData = Array<Array<CellData>>;
-export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
-export {};

package/lib/components/StatusCard/StatusCard.stories.d.ts

@@ -1,11 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Card from './StatusCard';
-import { CardProps } from './types';
-declare const meta: Meta<typeof Card>;
-export default meta;
-type Story = StoryObj<CardProps>;
-export declare const Passed: Story;
-export declare const Failed: Story;
-export declare const Warning: Story;
-export declare const Skipped: Story;
-export declare const Flaky: Story;

package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { MachineExecutionInstanceDataSet } from './types';
-declare const SequentialPayloadComponent: React.FC<{
-    machineInstances: MachineExecutionInstanceDataSet[];
-}>;
-declare const meta: Meta<typeof SequentialPayloadComponent>;
-type Story = StoryObj<typeof SequentialPayloadComponent>;
-export declare const Primary: Story;
-export default meta;

package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss

@@ -1,51 +0,0 @@
-.ff-connecting-datalist-modal-header-wrapper,
-.ff-connecting-modal-child-wrapper {
-  width: 534px;
-  padding: 0 4px;
-}
-
-.ff-connecting-datalist-modal-header-wrapper {
-  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
-  margin-bottom: 4px;
-}
-
-.ff-connecting-modal-child-wrapper {
-  .ff-branch-select-input-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .ff-select-browser {
-      width: 263px;
-    }
-
-    .ff-branch-input-wrapper {
-      display: flex;
-      align-items: flex-end;
-      height: 38px;
-
-      .ff-input-browser {
-        width: 245px;
-      }
-    }
-  }
-}
-
-.ff-connecting-modal-footer-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 8px;
-  margin-top: 8px;
-  border-top: 1px solid var(--ff-connecting-branch-modal-border);
-
-  .ff-branch-toggle-wrapper,
-  .ff-datalist-button-wrapper {
-    display: flex;
-    gap: 8px;
-  }
-
-  .ff-branch-toggle-wrapper {
-    gap: 4px;
-  }
-}

package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx

@@ -1,107 +0,0 @@
-import { forwardRef, RefObject } from 'react';
-import MiniModal from '../../../MiniModal';
-import Typography from '../../../Typography';
-import './AddBrowserModal.scss';
-import Select from '../../../Select';
-import Button from '../../../Button';
-import Toggle from '../../../Toggle';
-import Input from '../../../Input/Input';
-import { AddBrowserModalProps } from './types';
-
-const AddBrowserModal = forwardRef<HTMLButtonElement, AddBrowserModalProps>(
-  (props, ref) => {
-    // TODO: WILL BE REMOVE IN THE FUTURE
-    const selectOptions = [
-      { label: 'Execution Environment', inputName: 'number of runs' },
-      { label: 'Browser', inputName: 'Browser Version' },
-      { label: 'Android Device', inputName: 'os version' },
-      { label: 'IOS Device', inputName: 'os version-1' },
-    ];
-
-    const renderSelectOptions = () => (
-      <div>
-        {selectOptions.map(({ label, inputName }, index) => (
-          <div className="ff-branch-select-input-wrapper" key={index}>
-            <Select
-              optionsList={[]}
-              onChange={() => {}}
-              label={label}
-              className="ff-select-browser"
-            />
-            <div className="ff-branch-input-wrapper">
-              <Input
-                value="0"
-                label="Number of Runs"
-                type="number"
-                onChange={() => {}}
-                name={inputName}
-                className="ff-input-browser"
-              />
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-
-    const renderFooterContent = () => (
-      <div className="ff-connecting-modal-footer-wrapper">
-        <div className="ff-branch-toggle-wrapper">
-          <Typography as="span" lineHeight="32px">
-            Run in Headless Mode
-          </Typography>
-          <Toggle />
-        </div>
-        <div className="ff-datalist-button-wrapper">
-          <Button label="Cancel" variant="tertiary" />
-          <Button label="Update" variant="primary" />
-        </div>
-      </div>
-    );
-
-    return (
-      <div>
-        <MiniModal
-          anchorRef={ref as RefObject<HTMLButtonElement>}
-          headerProps={
-            <div className="ff-connecting-datalist-modal-header-wrapper">
-              <Typography
-                as="span"
-                color="var(--ff-connecting-branch-modal-header)"
-                fontWeight="semi-bold"
-                fontSize={12}
-                lineHeight="38px"
-              >
-                Add Browser / Device
-              </Typography>
-            </div>
-          }
-          childContent={
-            <div className="ff-connecting-modal-child-wrapper">
-              {renderSelectOptions()}
-            </div>
-          }
-          footerContent={renderFooterContent()}
-          cancelButtonProps={{
-            text: 'Cancel',
-
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props.onUpdateAddBrowser,
-          }}
-          proceedButtonProps={{
-            text: 'Proceed',
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props.onUpdateAddBrowser,
-          }}
-          modalPosition="right"
-          isPopOver
-          leftTopArrow
-          extraRightSpace={{ leftTopArrow: 45 }}
-          extraLeftSpace={{ rightAlignModal: 115 }}
-          {...props}
-        />
-      </div>
-    );
-  }
-);
-
-export default AddBrowserModal;

package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts

@@ -1,5 +0,0 @@
-export interface AddBrowserModalProps {
-
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  onUpdateAddBrowser: () => void;
-}

package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss

@@ -1,31 +0,0 @@
-.ff-datalist-modal-header-wrapper,
-.ff-datalist-modal-child-wrapper,
-.ff-datalist-modal-footer-wrapper {
-  margin: 0 8px;
-}
-
-.ff-datalist-modal-header-wrapper {
-  width: 255px;
-  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
-  display: flex;
-  align-items: center;
-}
-
-.ff-datalist-modal-child-wrapper {
-  .variable {
-    margin: 8px 0;
-  }
-}
-
-.ff-datalist-modal-footer-wrapper {
-  display: flex;
-  justify-content: space-between;
-  border-top: 1px solid var(--ff-connecting-branch-modal-border);
-
-  .datalist-button-wrapper {
-    display: flex;
-    gap: 10px;
-    margin-top: 4px;
-    justify-content: flex-end;
-  }
-}

package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx

@@ -1,85 +0,0 @@
-import { forwardRef, RefObject } from 'react';
-import MiniModal from '../../../MiniModal';
-import Typography from '../../../Typography';
-import './DatasetListModal.scss';
-import Select from '../../../Select';
-import Checkbox from '../../../Checkbox';
-import Button from '../../../Button';
-import { DatasetListModalProps } from './types';
-
-const DatasetListModal = forwardRef<HTMLButtonElement, DatasetListModalProps>(
-  (props, ref) => {
-    const selectOptions = [
-      { label: 'Project Environment Variable' },
-      { label: 'Global Variables' },
-      { label: 'Test Data Set' },
-    ];
-
-    const renderSelectOptions = () =>
-      selectOptions.map(({ label }, idx) => (
-        <Select
-          key={idx}
-          optionsList={[]}
-          onChange={() => {}}
-          label={label}
-          className="variable"
-        />
-      ));
-
-    const renderFooterContent = () => (
-      <div className="ff-datalist-modal-footer-wrapper">
-        <Checkbox checked={false} label="Set as Default" />
-        <div className="datalist-button-wrapper">
-          <Button label="Cancel" variant="tertiary" />
-          <Button label="Update" variant="primary" />
-        </div>
-      </div>
-    );
-
-    return (
-      <div>
-        <MiniModal
-          anchorRef={ref as RefObject<HTMLButtonElement>}
-          headerProps={
-            <div className="ff-datalist-modal-header-wrapper">
-              <Typography
-                as="span"
-                color="var(--ff-connecting-branch-modal-header)"
-                fontWeight="semi-bold"
-                fontSize={12}
-                lineHeight="38px"
-              >
-                Data Sets
-              </Typography>
-            </div>
-          }
-          childContent={
-            <div className="ff-datalist-modal-child-wrapper">
-              {renderSelectOptions()}
-            </div>
-          }
-          footerContent={renderFooterContent()}
-          cancelButtonProps={{
-            text: 'Cancel',
-
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props?.onUpdateDatasetList,
-          }}
-          proceedButtonProps={{
-            text: 'Proceed',
-            // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-            onClick: props?.onUpdateDatasetList,
-          }}
-          modalPosition="right"
-          isPopOver
-          leftTopArrow
-          extraRightSpace={{ leftTopArrow: 40 }}
-          extraLeftSpace={{ rightAlignModal: 110 }}
-          {...props}
-        />
-      </div>
-    );
-  }
-);
-
-export default DatasetListModal;

package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts

@@ -1,4 +0,0 @@
-export interface DatasetListModalProps {
-  // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
-  onUpdateDatasetList: () => void;
-}