pixel-react 1.7.1 → 1.7.2

package/src/components/AttachImage/AttachImage.stories.tsx

@@ -1,24 +1,24 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AttachImage from './AttachImage';
-import { AttachImageProps } from './types';
-
-const meta: Meta<typeof AttachImage> = {
-  title: 'Components/AttachImage',
-  component: AttachImage,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<AttachImageProps>;
-
-export const Default: Story = {
-  args: {
-    imageSrc: 'src/assets/images/photo.png',
-    onExpandClick: () => alert('Expand clicked'),
-    onDeleteClick: () => alert('Delete clicked'),
-    onDownloadClick: () => alert('Download clicked'),
-    height: '80px',
-    width: '80px',
-  },
-};
+import { Meta, StoryObj } from '@storybook/react';
+import AttachImage from './AttachImage';
+import { AttachImageProps } from './types';
+
+const meta: Meta<typeof AttachImage> = {
+  title: 'Components/AttachImage',
+  component: AttachImage,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<AttachImageProps>;
+
+export const Default: Story = {
+  args: {
+    imageSrc: 'src/assets/images/photo.png',
+    onExpandClick: () => alert('Expand clicked'),
+    onDeleteClick: () => alert('Delete clicked'),
+    onDownloadClick: () => alert('Download clicked'),
+    height: '80px',
+    width: '80px',
+  },
+};

package/src/components/AttachImage/AttachImage.tsx

@@ -1,60 +1,60 @@
-import React from 'react';
-import './AttachImage.scss';
-import Icon from '../Icon/Icon';
-import Tooltip from '../Tooltip';
-import { AttachImageProps } from './types';
-
-const AttachImage: React.FC<AttachImageProps> = ({
-  imageSrc,
-  onExpandClick,
-  onDeleteClick,
-  onDownloadClick,
-  height = '75px',
-  width = '79px',
-}) => {
-  return (
-    <div className="ff-attach-image-container" style={{ height, width }}>
-      <div className="ff-image-wrapper" style={{ height, width }}>
-        <img src={imageSrc} alt="Attached" />
-        <div className="ff-hover-icons">
-          <div className="ff-top-icons">
-            <div className="ff-icon-container">
-              <Tooltip title={'Download File'} placement="bottom">
-                <Icon
-                  name="download_file_icon"
-                  height={10}
-                  width={10}
-                  onClick={onDownloadClick}
-                  color="var(--icons-default-color)"
-                />
-              </Tooltip>
-            </div>
-            <div className="ff-icon-container">
-              <Tooltip title="Delete" placement="bottom">
-                <Icon
-                  name="delete"
-                  height={10}
-                  width={10}
-                  color="var(--ff-delete-button-attachment)"
-                  onClick={onDeleteClick}
-                />
-              </Tooltip>
-            </div>
-          </div>
-          <div className="ff-expand-icon-container">
-            <Tooltip title="Maximize" placement="bottom">
-              <Icon
-                name="expand_icon"
-                height={16}
-                width={16}
-                onClick={onExpandClick}
-              />
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AttachImage;
+import React from 'react';
+import './AttachImage.scss';
+import Icon from '../Icon/Icon';
+import Tooltip from '../Tooltip';
+import { AttachImageProps } from './types';
+
+const AttachImage: React.FC<AttachImageProps> = ({
+  imageSrc,
+  onExpandClick,
+  onDeleteClick,
+  onDownloadClick,
+  height = '75px',
+  width = '79px',
+}) => {
+  return (
+    <div className="ff-attach-image-container" style={{ height, width }}>
+      <div className="ff-image-wrapper" style={{ height, width }}>
+        <img src={imageSrc} alt="Attached" />
+        <div className="ff-hover-icons">
+          <div className="ff-top-icons">
+            <div className="ff-icon-container">
+              <Tooltip title={'Download File'} placement="bottom">
+                <Icon
+                  name="download_file_icon"
+                  height={10}
+                  width={10}
+                  onClick={onDownloadClick}
+                  color="var(--icons-default-color)"
+                />
+              </Tooltip>
+            </div>
+            <div className="ff-icon-container">
+              <Tooltip title="Delete" placement="bottom">
+                <Icon
+                  name="delete"
+                  height={10}
+                  width={10}
+                  color="var(--ff-delete-button-attachment)"
+                  onClick={onDeleteClick}
+                />
+              </Tooltip>
+            </div>
+          </div>
+          <div className="ff-expand-icon-container">
+            <Tooltip title="Maximize" placement="bottom">
+              <Icon
+                name="expand_icon"
+                height={16}
+                width={16}
+                onClick={onExpandClick}
+              />
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AttachImage;

package/src/components/AttachImage/index.ts

@@ -1,2 +1,2 @@
-export { default} from './AttachImage';
-
+export { default} from './AttachImage';
+

package/src/components/AttachImage/types.ts

@@ -1,26 +1,26 @@
-export interface AttachImageProps {
-  /**
-   * The image source to display.
-   */
-  imageSrc: string;
-  /**
-   * Function triggered when the expand icon is clicked.
-   */
-  onExpandClick: () => void;
-  /**
-   * Function triggered when the delete icon is clicked.
-   */
-  onDeleteClick: () => void;
-  /**
-   * Function triggered when the download icon is clicked.
-   */
-  onDownloadClick: () => void;
-  /**
-   * Custom height for the component.
-   */
-  height?: string;
-  /**
-   * Custom width for the component.
-   */
-  width?: string;
-}
+export interface AttachImageProps {
+  /**
+   * The image source to display.
+   */
+  imageSrc: string;
+  /**
+   * Function triggered when the expand icon is clicked.
+   */
+  onExpandClick: () => void;
+  /**
+   * Function triggered when the delete icon is clicked.
+   */
+  onDeleteClick: () => void;
+  /**
+   * Function triggered when the download icon is clicked.
+   */
+  onDownloadClick: () => void;
+  /**
+   * Custom height for the component.
+   */
+  height?: string;
+  /**
+   * Custom width for the component.
+   */
+  width?: string;
+}

package/src/components/AttachmentButton/AttachmentButton.scss

@@ -1,9 +1,9 @@
-.ff-input-field {
-  display: none;
-}
-.ff-attachment-files {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  line-height: 15px;
-}
+.ff-input-field {
+  display: none;
+}
+.ff-attachment-files {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  line-height: 15px;
+}

package/src/components/AttachmentButton/AttachmentButton.stories.tsx

@@ -1,81 +1,81 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import AttachmentButton from './AttachmentButton';
-import React from 'react';
-
-const meta: Meta<typeof AttachmentButton> = {
-  title: 'Components/AttachmentButton',
-  component: AttachmentButton,
-  argTypes: {
-    onFilesChange: { action: 'files changed' },
-    disabled: { control: 'boolean' },
-    maxFileSizeMB: { control: 'number' },
-    maxFiles: { control: 'number' },
-    buttonLabel: { control: 'text' },
-    showSelectedFiles: { control: 'boolean' },
-    deleteButton: { control: 'boolean' },
-    addAttachmentButton:{control:'boolean'}
-  },
-};
-
-type Story = StoryObj<typeof AttachmentButton>;
-
-const defaultArgs = {
-  disabled: false,
-  maxFileSizeMB: 5,
-  maxFiles: 10,
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Upload Files',
-  },
-  render: (args) => {
-    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-
-    const handleFilesChange = (files: File[]) => {
-      setSelectedFiles(files);
-      args.onFilesChange(files);
-    };
-
-    return (
-      <AttachmentButton
-        {...args}
-        selectedFiles={selectedFiles}
-        onFilesChange={handleFilesChange}
-      />
-    );
-  },
-};
-
-export const SmallFileLimit: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Upload Files (2 MB Max)',
-    maxFileSizeMB: 2,
-    maxFiles: 5,
-  },
-  render: Default.render,
-};
-
-export const LargeFileLimit: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Upload Large Files (20 MB Max)',
-    maxFileSizeMB: 20,
-    maxFiles: 5,
-  },
-  render: Default.render,
-};
-
-export const DisabledUploader: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Disabled Uploader',
-    disabled: true,
-  },
-  render: Default.render,
-};
-
-export default meta;
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import AttachmentButton from './AttachmentButton';
+import React from 'react';
+
+const meta: Meta<typeof AttachmentButton> = {
+  title: 'Components/AttachmentButton',
+  component: AttachmentButton,
+  argTypes: {
+    onFilesChange: { action: 'files changed' },
+    disabled: { control: 'boolean' },
+    maxFileSizeMB: { control: 'number' },
+    maxFiles: { control: 'number' },
+    buttonLabel: { control: 'text' },
+    showSelectedFiles: { control: 'boolean' },
+    deleteButton: { control: 'boolean' },
+    addAttachmentButton:{control:'boolean'}
+  },
+};
+
+type Story = StoryObj<typeof AttachmentButton>;
+
+const defaultArgs = {
+  disabled: false,
+  maxFileSizeMB: 5,
+  maxFiles: 10,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Upload Files',
+  },
+  render: (args) => {
+    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+
+    const handleFilesChange = (files: File[]) => {
+      setSelectedFiles(files);
+      args.onFilesChange(files);
+    };
+
+    return (
+      <AttachmentButton
+        {...args}
+        selectedFiles={selectedFiles}
+        onFilesChange={handleFilesChange}
+      />
+    );
+  },
+};
+
+export const SmallFileLimit: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Upload Files (2 MB Max)',
+    maxFileSizeMB: 2,
+    maxFiles: 5,
+  },
+  render: Default.render,
+};
+
+export const LargeFileLimit: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Upload Large Files (20 MB Max)',
+    maxFileSizeMB: 20,
+    maxFiles: 5,
+  },
+  render: Default.render,
+};
+
+export const DisabledUploader: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Disabled Uploader',
+    disabled: true,
+  },
+  render: Default.render,
+};
+
+export default meta;

package/src/components/AttachmentButton/AttachmentButton.tsx

@@ -1,129 +1,129 @@
-import React, { useRef, useState } from 'react';
-import Typography from '../Typography';
-import Button from '../Button';
-import Toaster from '../Toast';
-import Icon from '../Icon';
-import { AttachmentUploaderProps } from './types';
-import './AttachmentButton.scss';
-import Tooltip from '../Tooltip';
-
-const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
-  label,
-  selectedFiles,
-  onFilesChange,
-  disabled = false,
-  maxFileSizeMB = 5, // Default to 5 MB if not provided
-  maxFiles = 10, // Default to 10 files if not provided
-  buttonLabel = 'Select Files',
-  showSelectedFiles = true,
-  buttonVariant = 'primary',
-  deleteButton = true,
-  addAttachmentButton = true,
-}) => {
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const [fileError, setFileError] = useState<string>('');
-  const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
-
-  const handleAttachmentClick = () => {
-    setFileError('');
-    fileInputRef.current?.click();
-  };
-
-  const handleFileChange = () => {
-    setFileError('');
-    if (fileInputRef.current?.files) {
-      const files = Array.from(fileInputRef.current.files);
-      const duplicateFiles = files.filter((file) =>
-        selectedFiles.some((selectedFile) => selectedFile.name === file.name)
-      );
-      if (duplicateFiles.length > 0) {
-        setFileError('This file is already selected.');
-        fileInputRef.current.value = '';
-        return;
-      }
-      if (selectedFiles.length + files.length > maxFiles) {
-        setFileError(`You can only select up to ${maxFiles} files.`);
-        fileInputRef.current.value = '';
-        return;
-      }
-      const oversizedFiles = files.filter(
-        (file) => file.size > maxFileSizeBytes
-      );
-      if (oversizedFiles.length > 0) {
-        setFileError(`Each file must be less than ${maxFileSizeMB} MB.`);
-        fileInputRef.current.value = '';
-        return;
-      }
-      onFilesChange([...selectedFiles, ...files]);
-      fileInputRef.current.value = '';
-    }
-  };
-
-  const handleDeleteFile = (index: number) => {
-    const updatedFiles = [...selectedFiles];
-    updatedFiles.splice(index, 1);
-    onFilesChange(updatedFiles);
-  };
-
-  return (
-    <div>
-      <Typography fontWeight="semi-bold" lineHeight='18px'>{label}</Typography>
-      {(!showSelectedFiles || selectedFiles.length === 0) && (
-        <Button
-          variant={buttonVariant}
-          label={buttonLabel}
-          size="medium"
-          onClick={handleAttachmentClick}
-          disabled={disabled}
-        />
-      )}
-      <input
-        type="file"
-        ref={fileInputRef}
-        className="ff-input-field"
-        onChange={handleFileChange}
-        multiple
-        accept="*"
-      />
-      {fileError && (
-        <Toaster
-          isOpen={!!fileError}
-          variant="info"
-          toastTitle="Error"
-          toastMessage={fileError}
-          zIndex={10000000}
-        />
-      )}
-      {showSelectedFiles &&
-        selectedFiles.map((file, index) => (
-          <div key={file.name} className="ff-attachment-files">
-            <Typography color="var(--brand-color)">{file.name}</Typography>
-            {deleteButton && (
-              <Tooltip title="Delete">
-                <Icon
-                  name="delete"
-                  hoverEffect={true}
-                  color="var(--ff-delete-button-attachment)"
-                  variant="danger"
-                  onClick={() => handleDeleteFile(index)}
-                />
-              </Tooltip>
-            )}
-            {index === selectedFiles.length - 1 &&
-              selectedFiles.length < maxFiles &&
-              addAttachmentButton && (
-                <Tooltip title="Add Attachment">
-                  <Icon
-                    name="add_file"
-                    hoverEffect={true}
-                    onClick={handleAttachmentClick}
-                  />
-                </Tooltip>
-              )}
-          </div>
-        ))}
-    </div>
-  );
-};
-
-export default AttachmentButton;
+import React, { useRef, useState } from 'react';
+import Typography from '../Typography';
+import Button from '../Button';
+import Toaster from '../Toast';
+import Icon from '../Icon';
+import { AttachmentUploaderProps } from './types';
+import './AttachmentButton.scss';
+import Tooltip from '../Tooltip';
+
+const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
+  label,
+  selectedFiles,
+  onFilesChange,
+  disabled = false,
+  maxFileSizeMB = 5, // Default to 5 MB if not provided
+  maxFiles = 10, // Default to 10 files if not provided
+  buttonLabel = 'Select Files',
+  showSelectedFiles = true,
+  buttonVariant = 'primary',
+  deleteButton = true,
+  addAttachmentButton = true,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [fileError, setFileError] = useState<string>('');
+  const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
+
+  const handleAttachmentClick = () => {
+    setFileError('');
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = () => {
+    setFileError('');
+    if (fileInputRef.current?.files) {
+      const files = Array.from(fileInputRef.current.files);
+      const duplicateFiles = files.filter((file) =>
+        selectedFiles.some((selectedFile) => selectedFile.name === file.name)
+      );
+      if (duplicateFiles.length > 0) {
+        setFileError('This file is already selected.');
+        fileInputRef.current.value = '';
+        return;
+      }
+      if (selectedFiles.length + files.length > maxFiles) {
+        setFileError(`You can only select up to ${maxFiles} files.`);
+        fileInputRef.current.value = '';
+        return;
+      }
+      const oversizedFiles = files.filter(
+        (file) => file.size > maxFileSizeBytes
+      );
+      if (oversizedFiles.length > 0) {
+        setFileError(`Each file must be less than ${maxFileSizeMB} MB.`);
+        fileInputRef.current.value = '';
+        return;
+      }
+      onFilesChange([...selectedFiles, ...files]);
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleDeleteFile = (index: number) => {
+    const updatedFiles = [...selectedFiles];
+    updatedFiles.splice(index, 1);
+    onFilesChange(updatedFiles);
+  };
+
+  return (
+    <div>
+      <Typography fontWeight="semi-bold" lineHeight='18px'>{label}</Typography>
+      {(!showSelectedFiles || selectedFiles.length === 0) && (
+        <Button
+          variant={buttonVariant}
+          label={buttonLabel}
+          size="medium"
+          onClick={handleAttachmentClick}
+          disabled={disabled}
+        />
+      )}
+      <input
+        type="file"
+        ref={fileInputRef}
+        className="ff-input-field"
+        onChange={handleFileChange}
+        multiple
+        accept="*"
+      />
+      {fileError && (
+        <Toaster
+          isOpen={!!fileError}
+          variant="info"
+          toastTitle="Error"
+          toastMessage={fileError}
+          zIndex={10000000}
+        />
+      )}
+      {showSelectedFiles &&
+        selectedFiles.map((file, index) => (
+          <div key={file.name} className="ff-attachment-files">
+            <Typography color="var(--brand-color)">{file.name}</Typography>
+            {deleteButton && (
+              <Tooltip title="Delete">
+                <Icon
+                  name="delete"
+                  hoverEffect={true}
+                  color="var(--ff-delete-button-attachment)"
+                  variant="danger"
+                  onClick={() => handleDeleteFile(index)}
+                />
+              </Tooltip>
+            )}
+            {index === selectedFiles.length - 1 &&
+              selectedFiles.length < maxFiles &&
+              addAttachmentButton && (
+                <Tooltip title="Add Attachment">
+                  <Icon
+                    name="add_file"
+                    hoverEffect={true}
+                    onClick={handleAttachmentClick}
+                  />
+                </Tooltip>
+              )}
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default AttachmentButton;