pixel-react 1.7.8 → 1.8.0

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/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;
-}