pixel-react-excel-sheet 1.0.12 → 1.0.14

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/Excel/ExcelFile/ExcelFile.scss

@@ -2,8 +2,6 @@
   .ff-excel-book {
     // position: relative;
     z-index: 1000;
-    height: 564px;
-
 
     .ff-excel-sheet {
       position: static;

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -123,9 +123,9 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     payload.sheets.forEach((sheet) => {
       const sheetName = sheet.sheetName;
       const json = sheet.data;
-      const maxRows = Math.max(15, json.length + 2);
+      const maxRows = Math.max(26, json.length + 2);
       const maxCols = Math.max(
-        15,
+        26,
         Math.max(...json.map((row) => row.length)) + 2
       );
 
@@ -248,8 +248,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     const baseName = 'NewSheet';
     const existingSheetNames = sheetNames;
     const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
-    const newSheetData = Array.from({ length: 15 }, () =>
-      Array.from({ length: 15 }, () => EmptyRow)
+    const newSheetData = Array.from({ length: 26 }, () =>
+      Array.from({ length: 26 }, () => EmptyRow)
     );
     setSheetNames((prev) => [...prev, newSheetName]);
     setSelectedSheet({ index: sheetNames?.length, name: newSheetName });

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -9,6 +9,7 @@
     top: 0;
     background-color:var( --excel-toolbar-bg);
     padding: 4px 8px;
+    margin-bottom: 20px;
   }
 
 .ff-spreadsheet {
@@ -23,7 +24,7 @@
 
     position: relative;
     overflow: scroll;
-    max-height: calc(100vh - 70px);
+    height: 365px;
     background: var(--background-color);
     color: var(--text-color);
     scrollbar-width: none;
@@ -49,8 +50,6 @@
     &::-webkit-scrollbar {
       height: 0px;
     }
-
-    margin-top: 20px;
     border-collapse: collapse;
     table-layout: fixed;
   }

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>
+        )}
       </>
     );
   },