pixel-react 1.10.15 → 1.10.16

package/src/components/FileDropzone/Dropzone.tsx

@@ -1,109 +0,0 @@
-import { FC } from 'react';
-import classNames from 'classnames';
-import './FileDropzone.scss';
-import { DroppableProps } from './types';
-import Button from '../Button';
-import Typography from '../Typography';
-import RadioGroup from '../RadioGroup';
-import RadioFilePreview from './RadioFilePreview';
-
-const Dropzone: FC<DroppableProps> = ({
-  icon,
-  primaryLabel,
-  secondaryLabel,
-  buttonLabel,
-  getRootProps,
-  getInputProps,
-  isDragActive = false,
-  height = 188,
-  isWebServiceFileDropZone = false,
-  selectedRadioOption,
-  radioOptions,
-  handleOptionChange,
-  selectedFile,
-  setSelectedFile,
-  handleRemoveFile,
-  isDisable,
-  setShowDrawer,
-}) => {
-  const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
-  return (
-    <div
-      {...getRootProps()}
-      className={classNames('ff-file-dropzone', {
-        'ff-file-dropzone--active': isDragActive,
-        'ff-file-dropzone--webservice-file': isWebServiceFile,
-        'ff-file-dropzone--webservice-container': isWebServiceFileDropZone,
-        'ff-disable-file-dropzone-wrapper': isDisable,
-      })}
-      style={{ height: height }}
-    >
-      {isWebServiceFile ? (
-        <RadioFilePreview
-          selectedFile={selectedFile.name}
-          onFileRemoveClick={handleRemoveFile}
-          onFileReplaceClick={setSelectedFile}
-          setSelectedFile={setSelectedFile}
-          selectedRadioOption={selectedRadioOption}
-          setShowDrawer={setShowDrawer}
-        />
-      ) : (
-        <>
-          <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>
-            {isWebServiceFileDropZone ? (
-              <div className="ff-radio-group-wrapper">
-                <Typography fontWeight="semi-bold">
-                  {' '}
-                  Choose file from{' '}
-                </Typography>
-                <RadioGroup
-                  name="radio_btn_file_dropzone"
-                  options={
-                    radioOptions ?? [
-                      { label: 'Default Label', value: 'default_value' },
-                    ]
-                  }
-                  selectedValue={selectedRadioOption?.value}
-                  onChange={handleOptionChange}
-                />
-              </div>
-            ) : (
-              <Button
-                variant="primary"
-                label={buttonLabel}
-                className="choose-file-btn"
-                disabled={isDisable}
-              >
-                <input
-                  {...(isDisable
-                    ? { style: { cursor: 'not-allowed' }, disabled: true }
-                    : getInputProps())}
-                />
-              </Button>
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default Dropzone;

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

@@ -1,273 +0,0 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import FileDropzone from './FileDropzone';
-import Toaster from '../Toast';
-import { useState } from 'react';
-import { RadioOption } from './types';
-import Drawer from '../Drawer/Drawer';
-import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
-import './FileDropzone.scss';
-import { DynamicObj } from '../CreateVariable/types';
-import Button from '../Button';
-
-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',
-  width: 640,
-  height: 188,
-};
-
-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 [acceptedFiles, setAcceptedFiles] = useState([]);
-    const [rejectedFiles, setRejectedFiles] = useState([]);
-
-    const showMaxFilesError = () => {
-      setShowToaster(true);
-      setTimeout(() => {
-        setShowToaster(false);
-      }, 2000);
-    };
-
-    const getAcceptedFiles = (files) => {
-      setAcceptedFiles(files);
-    };
-
-    const getRejectedFiles = (files) => {
-      setRejectedFiles(files);
-    };
-
-    return (
-      <>
-        <FileDropzone
-          {...defaultArgs}
-          accept={[
-            'image/png',
-            'image/jpeg',
-            'application/x-zip-compressed',
-            'application/zip',
-          ]}
-          validateMIMEType={true}
-          onMaxFilesError={showMaxFilesError}
-          getAcceptedFiles={getAcceptedFiles}
-          getRejectedFiles={getRejectedFiles}
-          isApiResponseError
-        />
-        {showToaster && (
-          <Toaster
-            isOpen={showToaster}
-            variant="danger"
-            toastTitle="Error"
-            toastMessage={'Max 5 files can be uploaded'}
-          />
-        )}
-      </>
-    );
-  },
-};
-
-export const WithRadioButton: Story = {
-  render: () => {
-    const [showToaster, setShowToaster] = useState<boolean>(false);
-    const [showModal, setShowModal] = useState(false);
-
-    const [selectedRadioOption, setSelectedRadioOption] =
-      useState<RadioOption>();
-    const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
-      null
-    );
-    const [testDataSelectedFile, setTestDataSelectedFile] = useState<
-      DynamicObj | File | null
-    >(null);
-
-    const drawerArgs = {
-      primaryButtonProps: {
-        label: 'Create',
-        variant: 'primary',
-        disabled: false,
-        onClick: () => {},
-      },
-      secondaryButtonProps: {
-        label: 'Cancel',
-        variant: 'secondary',
-        disabled: false,
-        onClick: () => {},
-      },
-    };
-
-    const radioOptions: RadioOption[] = [
-      { value: 'Test Data', label: 'Test Data' },
-      { value: 'Local File', label: 'Local File' },
-    ];
-    const handleOptionChange = (option: RadioOption) => {
-      setSelectedRadioOption(option);
-      if (option.value === 'Test Data') {
-        setShowModal(true);
-      } else {
-        setShowModal(false);
-      }
-    };
-    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-      
-      if (file) {
-        setSelectedFile(file);
-      }
-    };    
-
-    const handleRemoveFile = () => {
-      setSelectedFile(null);
-    };
-
-    const showMaxFilesError = () => {
-      setShowToaster(true);
-      setTimeout(() => {
-        setShowToaster(false);
-      }, 2000);
-    };
-
-    const testData = [
-      {
-        _id: '1',
-        name: 'File1.txt',
-        actualPath: '/documents/File1.txt',
-        searchKey: 'file1',
-        parentId: 'root',
-      },
-      {
-        _id: '2',
-        name: 'File2.doc',
-        actualPath: '/documents/File2.doc',
-        searchKey: 'file2',
-        parentId: 'root',
-      },
-      {
-        _id: '3',
-        name: 'Image1.png',
-        actualPath: '/images/Image1.png',
-        searchKey: 'image1',
-        parentId: 'folder1',
-      },
-      {
-        _id: '4',
-        name: 'Presentation.ppt',
-        actualPath: '/presentations/Presentation.ppt',
-        searchKey: 'presentation',
-        parentId: 'folder2',
-      },
-    ];
-
-    const handleSaveButton = () => {
-      setSelectedFile(testDataSelectedFile);
-      setShowModal(false);
-    };
-
-    return (
-      <>
-        <FileDropzone
-          {...defaultArgs}
-          accept={[
-            'image/png',
-            'image/jpeg',
-            'application/x-zip-compressed',
-            'application/zip',
-          ]}
-          validateMIMEType={true}
-          onMaxFilesError={showMaxFilesError}
-          isWebServiceFileDropZone
-          selectedRadioOption={selectedRadioOption}
-          radioOptions={radioOptions}
-          handleOptionChange={handleOptionChange}
-          setSelectedFile={setSelectedFile}
-          selectedFile={selectedFile}
-          handleFileChange={handleFileChange}
-          handleRemoveFile={handleRemoveFile}
-          setShowDrawer={setShowModal}
-        />
-        {showToaster && (
-          <Toaster
-            isOpen={showToaster}
-            variant="danger"
-            toastTitle="Error"
-            toastMessage={'Max 5 files can be uploaded'}
-          />
-        )}
-        {selectedRadioOption?.value === 'Test Data' && (
-          <Drawer
-            {...drawerArgs}
-            isOpen={showModal}
-            onClose={() => setShowModal(false)}
-            isFooterRequired={false}
-            _isExpanded={false}
-            size="small"
-            
-          >
-            <ConditionalDropdown
-              label="Select Path Using #"
-              placeholder="Enter # to search files"
-              isHash
-              dataFiles={testData}
-              dropdownWidth="auto"
-              setHashInputValue={setTestDataSelectedFile}
-            />
-            <div className="footer_basic_button">
-              <Button
-                type="button"
-                variant="secondary"
-                size="small"
-                onClick={() => setShowModal(false)}
-                label={'Cancel'}
-              />
-
-              <Button
-                type={'button'}
-                variant="primary"
-                size="small"
-                label={'Save'}
-                onClick={handleSaveButton}
-              />
-            </div>
-          </Drawer>
-        )}
-      </>
-    );
-  },
-};
-
-export default meta;

package/src/components/FileDropzone/FileDropzone.tsx

@@ -1,164 +0,0 @@
-import useFileDropzone from '../../hooks/useFileDropzone';
-import { FileDropzoneProps } from './types';
-import './FileDropzone.scss';
-import Icon from '../Icon';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import { useEffect, useMemo, useRef } from 'react';
-import Dropzone from './Dropzone';
-import FilePreview from './FilePreview';
-import classNames from 'classnames';
-
-const FileDropzone: React.FC<FileDropzoneProps> = ({
-  icon = (
-    <Icon name="dropzone_icon" height={80} width={80} hoverEffect={false} />
-  ),
-  primaryLabel = 'Drag & drop your file to upload',
-  secondaryLabel = 'Or',
-  buttonLabel = 'Choose File to upload',
-  accept = [],
-  multiple = false,
-  maxFiles,
-  maxSize,
-  onMaxFilesError,
-  maxSizeErrorMessage = '',
-  invalidFileMessage = '',
-  fileExistMessage = '',
-  validateMIMEType = false,
-  width = 640,
-  height = 188,
-  getAcceptedFiles = () => {},
-  getRejectedFiles = () => {},
-  isWebServiceFileDropZone = false,
-  selectedRadioOption,
-  radioOptions,
-  handleOptionChange,
-  selectedFile,
-  setSelectedFile,
-  handleFileChange,
-  handleRemoveFile,
-  isApiResponseError = false,
-  isDisable = false,
-  setShowDrawer,
-}) => {
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const {
-    getRootProps,
-    getInputProps,
-    acceptedFiles,
-    rejectedFiles,
-    isDragActive,
-    handleRemoveClick,
-    handleReplaceClick,
-  } = useFileDropzone({
-    accept,
-    multiple,
-    maxFiles,
-    maxSize,
-    onMaxFilesError,
-    maxSizeErrorMessage,
-    invalidFileMessage,
-    fileExistMessage,
-    validateMIMEType,
-    isApiResponseError,
-    // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
-  });
-
-  getAcceptedFiles(acceptedFiles);
-  getRejectedFiles(rejectedFiles);
-
-  const acceptedFilesList = useMemo(
-    () =>
-      acceptedFiles.map((file) => (
-        <FilePreview
-          key={file.name}
-          file={file}
-          onRemoveClick={handleRemoveClick}
-          onReplaceClick={handleReplaceClick}
-        />
-      )),
-    [acceptedFiles, handleRemoveClick, handleReplaceClick]
-  );
-
-  useEffect(() => {
-    if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
-      fileInputRef.current.click();
-    }
-  }, [selectedRadioOption]);
-
-  useEffect(() => {
-    if (!checkEmpty(acceptedFiles) && setSelectedFile) {
-      setSelectedFile(acceptedFiles[0] || null);
-    }
-  }, [acceptedFiles, setSelectedFile]);
-
-  const rejectedFilesList = useMemo(
-    () =>
-      rejectedFiles.map((rejectedFile) => (
-        <FilePreview
-          key={rejectedFile.file.name}
-          file={rejectedFile.file}
-          error={rejectedFile.errors[0]?.message}
-          onRemoveClick={handleRemoveClick}
-          onReplaceClick={handleReplaceClick}
-        />
-      )),
-    [rejectedFiles, handleRemoveClick, handleReplaceClick]
-  );
-
-  return (
-    <div
-      className={classNames('ff-file-dropzone-wrapper')}
-      style={{ width: `${width}px` }}
-    >
-      <Dropzone
-        icon={icon}
-        primaryLabel={primaryLabel}
-        secondaryLabel={secondaryLabel}
-        buttonLabel={buttonLabel}
-        getRootProps={getRootProps}
-        getInputProps={getInputProps}
-        isDragActive={isDragActive}
-        height={`${height}px`}
-        isWebServiceFileDropZone={isWebServiceFileDropZone}
-        selectedRadioOption={selectedRadioOption}
-        radioOptions={
-          radioOptions ?? [{ label: 'Default Label', value: 'default_value' }]
-        }
-        handleOptionChange={handleOptionChange}
-        selectedFile={selectedFile}
-        handleFileChange={handleFileChange}
-        handleRemoveFile={handleRemoveFile}
-        setSelectedFile={setSelectedFile}
-        isDisable={isDisable}
-        setShowDrawer={setShowDrawer}
-      />
-
-      {isWebServiceFileDropZone && (
-        <input
-          ref={fileInputRef}
-          type="file"
-          className="ff-input-ref"
-          onChange={handleFileChange}
-          accept={accept.join(',')}
-        />
-      )}
-
-      {isWebServiceFileDropZone ? null : (
-        <div
-          className={'ff-file-details-wrapper'}
-          style={{ width: `${width}px` }}
-        >
-          {!checkEmpty(acceptedFiles) && (
-            <div className="ff-file-details">{acceptedFilesList}</div>
-          )}
-
-          {!checkEmpty(rejectedFiles) && (
-            <div className="ff-file-details">{rejectedFilesList}</div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default FileDropzone;

package/src/components/FileDropzone/FilePreview.tsx

@@ -1,77 +0,0 @@
-import './FileDropzone.scss';
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-import { FilePreviewProps } from './types';
-import Typography from '../Typography';
-
-const FilePreview: React.FC<FilePreviewProps> = ({
-  file,
-  error,
-  onRemoveClick,
-  onReplaceClick,
-}) => {
-  return (
-    <div key={file.name} className="ff-file-details__item">
-      <div className="ff-file-info">
-        <div className="ff-file-info__icon">
-          <Icon
-            name="file"
-            color={'var(--icons-default-color)'}
-            height={16}
-            width={16}
-          />
-        </div>
-        <div className="ff-file-info__name-wrapper">
-          <Tooltip title={file?.name}>
-            <Typography
-              lineHeight="18px"
-              fontWeight="semi-bold"
-              color={'var(--text-color)'}
-              className="ff-file-info__name-wrapper__name"
-            >
-              {file?.name}
-            </Typography>
-          </Tooltip>
-          {error && (
-            <Typography
-              fontSize={8}
-              color={'var(--error-light)'}
-              lineHeight="12px"
-              letterSpacing="0.5px"
-            >
-              {error}
-            </Typography>
-          )}
-        </div>
-      </div>
-      <div className="ff-file-actions">
-        <div className="ff-file-actions__icon-replace">
-          <Tooltip title="Replace">
-            <Icon
-              name="replace_file"
-              color={'var(--icons-default-color)'}
-              height={16}
-              width={16}
-              hoverEffect
-              onClick={() => onReplaceClick(file)}
-            />
-          </Tooltip>
-        </div>
-        <div className="ff-file-actions__icon-remove">
-          <Tooltip title="Remove">
-            <Icon
-              name="close"
-              height={16}
-              width={16}
-              hoverEffect
-              color={'var(--default-icon-color)'}
-              onClick={() => onRemoveClick(file)}
-            />
-          </Tooltip>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FilePreview;

package/src/components/FileDropzone/RadioFilePreview.tsx

@@ -1,80 +0,0 @@
-import './FileDropzone.scss';
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-import { RadioFilePreviewProps } from './types';
-import Typography from '../Typography';
-import { useRef } from 'react';
-
-const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
-  selectedFile,
-  onFileRemoveClick,
-  onFileReplaceClick,
-  selectedRadioOption,
-  setShowDrawer,
-}) => {
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-
-  const handleReplaceClick = () => {
-    if (selectedRadioOption?.value === 'Test Data') {
-      setShowDrawer?.(true);
-      return;
-    }
-    fileInputRef.current?.click();
-  };
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      onFileReplaceClick?.(file);
-    }
-  };
-  return (
-    <div className="ff-webservice-file-wrapper">
-      <div className="ff-file-info">
-        <>
-          <Tooltip title={selectedFile}>
-            <Typography
-              lineHeight="18px"
-              fontWeight="semi-bold"
-              color={'var(--text-color)'}
-              className="ff-webservice-file-name"
-            >
-              {selectedFile}
-            </Typography>
-          </Tooltip>
-        </>
-      </div>
-      <>
-        <Tooltip title="Remove">
-          <Icon
-            name="close"
-            height={12}
-            width={12}
-            hoverEffect
-            onClick={onFileRemoveClick}
-          />
-        </Tooltip>
-      </>
-      <>
-        <Tooltip title="Replace">
-          <Icon
-            name="replace_file"
-            color={'var(--icons-default-color)'}
-            height={16}
-            width={16}
-            hoverEffect
-            onClick={handleReplaceClick}
-          />
-        </Tooltip>
-        <input
-        type="file"
-        ref={fileInputRef}
-        className='ff-input-ref'
-        onChange={handleFileChange}
-      />
-      </>
-    </div>
-  );
-};
-
-export default RadioFilePreview;

package/src/components/FileDropzone/index.ts

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