pixel-react 1.6.7 → 1.6.8

package/src/components/Charts/LineChart/LineChart.scss

@@ -15,15 +15,19 @@
     transition: cx 0.2s ease, cy 0.2s ease;
   }
 }
-.ff-line-chart-yAxisLabel {
-  display: flex;
-  white-space: nowrap;
-  transform: rotate(270deg) translateX(60px);
-  transform-origin: right center;
-}
-
-.ff-line-chart-svg {
-  width: inherit;
+.ff-line-chart-yAxisLabel-warpper {
+  position: relative;
+  min-width: 20px;
+  height: 100%;
+  .ff-line-chart-yAxisLabel {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    display: flex;
+    white-space: nowrap;
+    transform: rotate(270deg) translateX(60%);
+    transform-origin: right center;
+  }
 }
 
 .ff-line-chart-text1 {

package/src/components/Charts/LineChart/LineChart.tsx

@@ -130,8 +130,11 @@ const LineChart: React.FC<LineChartProps> = ({
   const xTickInterval = Math.floor(data[0].data.length / 4);
 
   return (
-    <div className="ff-line-chart-text" style={{ width: width }}>
-      <div>
+    <div className="ff-line-chart-text" style={{ width: width + 20 }}>
+      <div
+        className="ff-line-chart-yAxisLabel-warpper"
+        style={{ height: height }}
+      >
         {' '}
         <Typography
           className="ff-line-chart-yAxisLabel"
@@ -145,6 +148,7 @@ const LineChart: React.FC<LineChartProps> = ({
         {' '}
         <svg
           height={height}
+          width={width}
           onMouseMove={handleMouseMove}
           onMouseLeave={handleMouseLeave}
           className="ff-line-chart-svg"

package/src/components/DatePicker/DatePicker.scss

@@ -8,6 +8,8 @@
     --rdp-accent-color: var(--brand-color);
     --rdp-day-height: 24px;
     --rdp-day-width: 36px;
+    --rdp-day_button-height: 24px;
+    --rdp-day_button-width: 36px;
     @include fonts.fontPoppins(12px);
     --rdp-font-family: 'Poppins', sans-serif;
   }
@@ -157,6 +159,15 @@
           background-color: var(--brand-color);
           color: var(--primary-button-text-color);
         }
+        &--disabled {
+          color: var(--text-color-light);
+          cursor: default;
+
+          &.ff-custom-month--selected,
+          &.ff-custom-year--selected {
+            background-color: var(--disable-color);
+          }
+        }
       }
     }
 

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -172,3 +172,22 @@ export const Dateonly: Story = {
     );
   },
 };
+
+export const PastOneYear: Story = {
+  render: (args) => {
+    const [selectedDate, setSelectDate] = useState<Date | undefined>();
+
+    return (
+      <CustomDatePicker
+        {...args}
+        value={selectedDate}
+        onChange={setSelectDate}
+        calendarWidth={240}
+        maxDate={new Date()}
+        minDate={new Date(new Date().setFullYear(new Date().getFullYear() - 1))}
+        dateOnly
+        dateFormat="dd MMM yyyy"
+      />
+    );
+  },
+};

package/src/components/DatePicker/DatePicker.tsx

@@ -217,6 +217,40 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
     }
   };
 
+  const isDisabledDate = (
+    year: number | null,
+    month: number | null,
+    minDate?: Date,
+    maxDate?: Date
+  ): boolean => {
+    const isMinDateValid = minDate instanceof Date && !isNaN(minDate.getTime());
+    const isMaxDateValid = maxDate instanceof Date && !isNaN(maxDate.getTime());
+
+    if (isMinDateValid) {
+      if (year !== null && year < minDate.getFullYear()) return true;
+      if (
+        year !== null &&
+        month !== null &&
+        year === minDate.getFullYear() &&
+        month < minDate.getMonth()
+      )
+        return true;
+    }
+
+    if (isMaxDateValid) {
+      if (year !== null && year > maxDate.getFullYear()) return true;
+      if (
+        year !== null &&
+        month !== null &&
+        year === maxDate.getFullYear() &&
+        month > maxDate.getMonth()
+      )
+        return true;
+    }
+
+    return false;
+  };
+
   useEffect(() => {
     if (isPickerOpen && view === 'years') {
       const currentYear =
@@ -255,17 +289,28 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   const CustomMonthGrid: React.FC = () => {
     return (
       <div className="ff-custom-month_grid">
-        {months.map((month: string, index: number) => (
-          <div
-            key={index}
-            onClick={() => handleMonthSelect(index)}
-            className={classNames('ff-custom-month', {
-              'ff-custom-month--selected': index === selectedMonth?.getMonth(),
-            })}
-          >
-            <Typography>{month}</Typography>
-          </div>
-        ))}
+        {months.map((month: string, index: number) => {
+          const isDisabled = isDisabledDate(
+            selectedMonth?.getFullYear() || null,
+            index,
+            minDate,
+            maxDate
+          );
+
+          return (
+            <div
+              key={index}
+              onClick={() => !isDisabled && handleMonthSelect(index)}
+              className={classNames('ff-custom-month', {
+                'ff-custom-month--selected':
+                  index === selectedMonth?.getMonth(),
+                'ff-custom-month--disabled': isDisabled,
+              })}
+            >
+              <Typography>{month}</Typography>
+            </div>
+          );
+        })}
       </div>
     );
   };
@@ -303,17 +348,23 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   const CustomYearGrid: React.FC = () => {
     return (
       <div className="ff-custom-year_grid">
-        {years.map((year: number) => (
-          <div
-            key={year}
-            onClick={() => handleYearSelect(year)}
-            className={classNames('ff-custom-year', {
-              'ff-custom-year--selected': year === selectedMonth?.getFullYear(),
-            })}
-          >
-            <Typography>{year}</Typography>
-          </div>
-        ))}
+        {years.map((year: number) => {
+          const isDisabled = isDisabledDate(year, null, minDate, maxDate);
+
+          return (
+            <div
+              key={year}
+              onClick={() => !isDisabled && handleYearSelect(year)}
+              className={classNames('ff-custom-year', {
+                'ff-custom-year--selected':
+                  year === selectedMonth?.getFullYear(),
+                'ff-custom-year--disabled': isDisabled,
+              })}
+            >
+              <Typography>{year}</Typography>
+            </div>
+          );
+        })}
       </div>
     );
   };

package/src/components/FileDropzone/Dropzone.tsx

@@ -4,6 +4,8 @@ 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,
@@ -14,42 +16,88 @@ const Dropzone: FC<DroppableProps> = ({
   getInputProps,
   isDragActive = false,
   height = 188,
+  isWebServiceFileDropZone = false,
+  selectedRadioOption,
+  radioOptions,
+  handleOptionChange,
+  selectedFile,
+  setSelectedFile,
+  handleRemoveFile,
+  isDisable,
 }) => {
+  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,
       })}
-      style={{height: height}}
+      style={{ height: height }}
     >
-      <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>
-        <Button
-          variant="primary"
-          label={buttonLabel}
-          className="choose-file-btn"
-        >
-          <input {...getInputProps()} />
-        </Button>
-      </div>
+      {isWebServiceFile ? (
+        <RadioFilePreview
+          selectedFile={selectedFile.name}
+          onFileRemoveClick={handleRemoveFile}
+          onFileReplaceClick={setSelectedFile}
+          setSelectedFile={setSelectedFile}
+        />
+      ) : (
+        <>
+          <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>
   );
 };

package/src/components/FileDropzone/FileDropzone.scss

@@ -30,11 +30,22 @@
     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;
@@ -60,6 +71,9 @@
           }
         }
       }
+      &__webservice-file {
+        padding: 4px;
+      }
     }
   }
 
@@ -69,7 +83,6 @@
     overflow-y: auto;
     scroll-behavior: smooth;
     padding: 2px;
-
     ::-webkit-scrollbar {
       width: 2px;
     }
@@ -133,3 +146,18 @@
     }
   }
 }
+.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,8 +1,12 @@
-import React from 'react';
+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',
@@ -59,13 +63,13 @@ export const Controlled: Story = {
       }, 2000);
     };
 
-    const getAcceptedFiles = (files) => { 
+    const getAcceptedFiles = (files) => {
       setAcceptedFiles(files);
-    }
+    };
 
     const getRejectedFiles = (files) => {
       setRejectedFiles(files);
-    }
+    };
 
     return (
       <>
@@ -81,6 +85,103 @@ export const Controlled: Story = {
           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
@@ -90,6 +191,26 @@ export const Controlled: Story = {
             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>
+        )}
       </>
     );
   },

package/src/components/FileDropzone/FileDropzone.tsx

@@ -3,9 +3,10 @@ import { FileDropzoneProps } from './types';
 import './FileDropzone.scss';
 import Icon from '../Icon';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import Dropzone from './Dropzone';
 import FilePreview from './FilePreview';
+import classNames from 'classnames';
 
 const FileDropzone: React.FC<FileDropzoneProps> = ({
   icon = (
@@ -27,6 +28,16 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   height = 188,
   getAcceptedFiles = () => {},
   getRejectedFiles = () => {},
+  isWebServiceFileDropZone = false,
+  selectedRadioOption,
+  radioOptions,
+  handleOptionChange,
+  selectedFile,
+  setSelectedFile,
+  handleFileChange,
+  handleRemoveFile,
+  isApiResponseError = false,
+  isDisable = false,
 }) => {
   const {
     getRootProps,
@@ -46,6 +57,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
     invalidFileMessage,
     fileExistMessage,
     validateMIMEType,
+    isApiResponseError,
     // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
   });
 
@@ -65,6 +77,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
     [acceptedFiles, handleRemoveClick, handleReplaceClick]
   );
 
+  useEffect(() => {
+    if (!checkEmpty(acceptedFiles) && setSelectedFile) {
+      setSelectedFile(acceptedFiles[0] || null);
+    }    
+  }, [acceptedFiles, setSelectedFile]);  
+
   const rejectedFilesList = useMemo(
     () =>
       rejectedFiles.map((rejectedFile) => (
@@ -80,7 +98,9 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   );
 
   return (
-    <div className="ff-file-dropzone-wrapper" style={{ width: `${width}px` }}>
+    <div className={classNames('ff-file-dropzone-wrapper',
+      {'ff-disable-file-dropzone-wrapper': isDisable,}
+    )} style={{ width: `${width}px` }}>
       <Dropzone
         icon={icon}
         primaryLabel={primaryLabel}
@@ -90,20 +110,33 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         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}
       />
 
-      <div
-        className={'ff-file-details-wrapper'}
-        style={{ width: `${width}px` }}
-      >
-        {!checkEmpty(acceptedFiles) && (
-          <div className="ff-file-details">{acceptedFilesList}</div>
-        )}
+      {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>
+          {!checkEmpty(rejectedFiles) && (
+            <div className="ff-file-details">{rejectedFilesList}</div>
+          )}
+        </div>
+      )}
     </div>
   );
 };