pixel-react 1.6.6 → 1.6.8

package/src/components/FileDropzone/FileDropzone.scss

@@ -1,135 +1,163 @@
-@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 {
-    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;
-    transition: background-color 0.2s ease;
-
-    &:hover,
-    &--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);
-    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: 87%;
-
-          .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;
-          gap: 8px;
-          &__icon-replace,
-          &__icon-remove {
-            @include icon-container;
-            @include center;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-}
+@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 {
+    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;
+    transition: background-color 0.2s ease;
+
+    .ff-radio-group-wrapper {
+      position: relative;
+      bottom: 8px;
+    }
+
+    &:hover,
+    &--active {
+      background-color: var(--file-dropzone-selected-color);
+    }
+    &--webservice-file {
+      @include center;
+    }
+    &--webservice-container {
+      @include center;
+      padding: 16px 0 40px 0;
+    }
+    &-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;
+          }
+        }
+      }
+      &__webservice-file {
+        padding: 4px;
+      }
+    }
+  }
+
+  .ff-file-details-wrapper {
+    @include column-flex-gap(10px);
+    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: 87%;
+
+          .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;
+          gap: 8px;
+          &__icon-replace,
+          &__icon-remove {
+            @include icon-container;
+            @include center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+.ff-webservice-file-wrapper {
+  display: flex;
+  gap: 8px;
+  .ff-webservice-file-name {
+    position: relative;
+    bottom: 2px;
+  }
+}
+.ff-input-ref {
+  display: none;
+}
+.ff-disable-file-dropzone-wrapper {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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

@@ -1,98 +1,219 @@
-import React from 'react';
-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',
-  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}
-        />
-        {showToaster && (
-          <Toaster
-            isOpen={showToaster}
-            variant="danger"
-            toastTitle="Error"
-            toastMessage={'Max 5 files can be uploaded'}
-          />
-        )}
-      </>
-    );
-  },
-};
-
-export default meta;
+import React, { useEffect, useRef } 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 Typography from '../Typography';
+import './FileDropzone.scss';
+
+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 | null>(null);
+
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+    const drawerArgs = {
+      primaryButtonProps: {
+        label: 'Create',
+        variant: 'primary',
+        disabled: false,
+        onClick: () => {},
+      },
+      secondaryButtonProps: {
+        label: 'Cancel',
+        variant: 'secondary',
+        disabled: false,
+        onClick: () => {},
+      },
+    };
+
+    useEffect(() => {
+      if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
+        fileInputRef.current.click();
+      }
+    }, [selectedRadioOption]);
+
+    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);
+    };
+
+    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}
+        />
+        {showToaster && (
+          <Toaster
+            isOpen={showToaster}
+            variant="danger"
+            toastTitle="Error"
+            toastMessage={'Max 5 files can be uploaded'}
+          />
+        )}
+        {selectedRadioOption?.value === 'Local File' ? (
+          <input
+            ref={fileInputRef}
+            type="file"
+            className='ff-input-ref'
+            onChange={handleFileChange}
+            accept="image/png, image/jpeg, application/x-zip-compressed, application/zip"
+          />
+        ) : (
+          <Drawer
+            {...drawerArgs}
+            isOpen={showModal}
+            onClose={() => setShowModal(false)}
+            isFooterRequired={true}
+            _isExpanded={false}
+            size="small"
+          >
+            <Typography>Upload TestData Files Here</Typography>
+          </Drawer>
+        )}
+      </>
+    );
+  },
+};
+
+export default meta;