pixel-react 1.8.2 → 1.8.4

package/src/components/Toast/Toast.tsx

@@ -1,117 +1,117 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { createPortal } from 'react-dom';
-import Icon from '../Icon';
-import './Toast.scss';
-import Button from '../Button';
-import classNames from 'classnames';
-import { ToasterProps } from './types';
-import Typography from '../Typography';
-import { ThemeContext } from '../ThemeProvider/ThemeProvider';
-const Toaster: React.FC<ToasterProps> = ({
-  isOpen = false,
-  variant = 'success',
-  toastTitle = 'Success',
-  onCancelClick = () => {},
-  onConfirmation = () => {},
-  toastMessage = 'Hello this is child element',
-  displayDuration = 5000,
-  confirmationText = 'Confirm',
-  zIndex = 99,
-}) => {
-  const [isExiting, setIsExiting] = useState(false);
-
-  const iconMap = {
-    success: 'success',
-    info: 'toast_info',
-    warning: 'warning',
-    danger: 'error',
-    confirm: 'delete',
-    alert: 'alert',
-  };
-
-  const getToasterIcon = (
-    variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm' | 'alert'
-  ) => {
-    const name = iconMap[variant];
-    return <Icon name={name} height={40} width={40} />;
-  };
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-  useEffect(() => {
-    if (isOpen && variant !== 'confirm') {
-      const timer = setTimeout(() => {
-        setIsExiting(true);
-        setTimeout(onCancelClick, 500); // Duration of exit animation
-      }, displayDuration);
-
-      return () => {
-        clearTimeout(timer);
-        setIsExiting(false);
-      };
-    }
-    return () => {};
-  }, [isOpen]);
-
-  const handleClose = () => {
-    setIsExiting(true);
-    setTimeout(() => {
-      onCancelClick();
-      setIsExiting(false);
-    }, 500);
-  };
-
-  if (!isOpen && !isExiting) return null;
-
-  return createPortal(
-    <div
-      role="alert"
-      aria-live="assertive"
-      className={classNames('ff-toaster-overlay', {
-        exiting: isExiting,
-        [currentTheme || '']: true,
-      })}
-      style={{ zIndex }}
-    >
-      <div className={classNames('ff-toaster', { exiting: isExiting })}>
-        <div className={`ff-toaster-container ff-toaster--${variant}`}>
-          {getToasterIcon(variant)}
-          <div className="ff-toaster-content">
-            <Typography
-              color={'var(--tooltip-bg-color)'}
-              fontWeight="semi-bold"
-              lineHeight="18px"
-              className="ff-toaster-content__title"
-            >
-              {toastTitle}
-            </Typography>
-            <Typography
-              color={'var(--input-default-label-color)'}
-              fontWeight="semi-bold"
-              fontSize={'10px'}
-              className="ff-toaster-content__message"
-            >
-              {toastMessage}
-            </Typography>
-            {variant === 'confirm' && (
-              <div className="ff-toaster-content__prompt">
-                <Button onClick={handleClose} variant="secondary">
-                  Cancel
-                </Button>
-                <Button onClick={onConfirmation} variant="delete">
-                  {confirmationText}
-                </Button>
-              </div>
-            )}
-          </div>
-
-          <div className="ff-close-icon-wrapper" onClick={handleClose}>
-            <Icon name="close" height={8} width={8} />
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-};
-
-export default Toaster;
+import React, { useEffect, useState, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import Icon from '../Icon';
+import './Toast.scss';
+import Button from '../Button';
+import classNames from 'classnames';
+import { ToasterProps } from './types';
+import Typography from '../Typography';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+const Toaster: React.FC<ToasterProps> = ({
+  isOpen = false,
+  variant = 'success',
+  toastTitle = 'Success',
+  onCancelClick = () => {},
+  onConfirmation = () => {},
+  toastMessage = 'Hello this is child element',
+  displayDuration = 5000,
+  confirmationText = 'Confirm',
+  zIndex = 99,
+}) => {
+  const [isExiting, setIsExiting] = useState(false);
+
+  const iconMap = {
+    success: 'success',
+    info: 'toast_info',
+    warning: 'warning',
+    danger: 'error',
+    confirm: 'delete',
+    alert: 'alert',
+  };
+
+  const getToasterIcon = (
+    variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm' | 'alert'
+  ) => {
+    const name = iconMap[variant];
+    return <Icon name={name} height={40} width={40} />;
+  };
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  useEffect(() => {
+    if (isOpen && variant !== 'confirm') {
+      const timer = setTimeout(() => {
+        setIsExiting(true);
+        setTimeout(onCancelClick, 500); // Duration of exit animation
+      }, displayDuration);
+
+      return () => {
+        clearTimeout(timer);
+        setIsExiting(false);
+      };
+    }
+    return () => {};
+  }, [isOpen]);
+
+  const handleClose = () => {
+    setIsExiting(true);
+    setTimeout(() => {
+      onCancelClick();
+      setIsExiting(false);
+    }, 500);
+  };
+
+  if (!isOpen && !isExiting) return null;
+
+  return createPortal(
+    <div
+      role="alert"
+      aria-live="assertive"
+      className={classNames('ff-toaster-overlay', {
+        exiting: isExiting,
+        [currentTheme || '']: true,
+      })}
+      style={{ zIndex }}
+    >
+      <div className={classNames('ff-toaster', { exiting: isExiting })}>
+        <div className={`ff-toaster-container ff-toaster--${variant}`}>
+          {getToasterIcon(variant)}
+          <div className="ff-toaster-content">
+            <Typography
+              color={'var(--tooltip-bg-color)'}
+              fontWeight="semi-bold"
+              lineHeight="18px"
+              className="ff-toaster-content__title"
+            >
+              {toastTitle}
+            </Typography>
+            <Typography
+              color={'var(--input-default-label-color)'}
+              fontWeight="semi-bold"
+              fontSize={'10px'}
+              className="ff-toaster-content__message"
+            >
+              {toastMessage}
+            </Typography>
+            {variant === 'confirm' && (
+              <div className="ff-toaster-content__prompt">
+                <Button onClick={handleClose} variant="secondary">
+                  Cancel
+                </Button>
+                <Button onClick={onConfirmation} variant="delete">
+                  {confirmationText}
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <div className="ff-close-icon-wrapper" onClick={handleClose}>
+            <Icon name="close" height={8} width={8} />
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default Toaster;

package/src/components/Toast/index.ts

@@ -1 +1 @@
-export { default } from './Toast';
+export { default } from './Toast';

package/src/components/Toast/types.ts

@@ -1,27 +1,27 @@
-export interface ToasterProps {
-  /**Boolean value to handle state of toaster. */
-  isOpen: boolean;
-
-  /**Variant for different type of toast message. */
-  variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm' | 'alert';
-
-  /**Title of the toaster  */
-  toastTitle: string;
-
-  /**Message for the toaster. */
-  toastMessage?: string;
-
-  /**Function to call upon clicking the close icon or cancel button. */
-  onCancelClick?: () => void;
-
-  /**Function to call when confirmation the prompt. */
-  onConfirmation?: () => void;
-
-  /**Duration in ms for which toaster will stay on the screen */
-  displayDuration?: number;
-
-  /**Confirmation text for variant confirm. */
-  confirmationText?: string;
-  /**z-index value */
-  zIndex?: number;
-}
+export interface ToasterProps {
+  /**Boolean value to handle state of toaster. */
+  isOpen: boolean;
+
+  /**Variant for different type of toast message. */
+  variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm' | 'alert';
+
+  /**Title of the toaster  */
+  toastTitle: string;
+
+  /**Message for the toaster. */
+  toastMessage?: string;
+
+  /**Function to call upon clicking the close icon or cancel button. */
+  onCancelClick?: () => void;
+
+  /**Function to call when confirmation the prompt. */
+  onConfirmation?: () => void;
+
+  /**Duration in ms for which toaster will stay on the screen */
+  displayDuration?: number;
+
+  /**Confirmation text for variant confirm. */
+  confirmationText?: string;
+  /**z-index value */
+  zIndex?: number;
+}

package/src/components/Toastify/Toastify.stories.tsx

@@ -1,71 +1,71 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { Toastify, toast } from './Toastify';
-import Button from '../Button';
-
-const meta: Meta<typeof Toastify> = {
-  title: 'Components/Toastify',
-  component: Toastify,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Toastify>;
-
-const defaultArgs = {
-  isOpen: false,
-  toastTitle: 'Success',
-  toastMessage: 'Variable name Requested for Review successfully',
-  closeButtonLabel: 'x',
-  displayDuration: 3000,
-};
-
-export const Controlled: Story = {
-  args: {
-    ...defaultArgs,
-  },
-  render: () => (
-    /*
-      Note:-
-      import { Toastify, toast } from 'pixel-react';
-    */
-
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      {/* Render Toastify to allow toast notifications */}
-      <Toastify />
-
-      {/* Button to trigger a toast notification */}
-      <Button
-        variant="primary"
-        label="Show Success Toast"
-        onClick={() => toast.success('Your request was successful!','Your request was successful! Your request was successful! Your request was successful! Your request was successful!')}
-      />
-      <Button
-        variant="delete"
-        label="Show Error Toast"
-        onClick={() => toast.error('Something went wrong!')}
-      />
-      <Button
-        variant="warning"
-        label="Show warning Object Toast"
-        onClick={() =>
-          toast.warning('Something went wrong!', { a: 'hi', b: '5', c: 10 })
-        }
-      />
-      <Button
-        variant="secondary"
-        label="Show info Array Toast"
-        onClick={() => toast.info('Something went wrong!', ['1', 4, 'hi'])}
-      />
-      <Button
-        variant="tertiary"
-        label="Show alert function Toast"
-        onClick={() => toast.alert('Something went wrong!', () => {})}
-      />
-    </div>
-  ),
-};
-
-export default meta;
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Toastify, toast } from './Toastify';
+import Button from '../Button';
+
+const meta: Meta<typeof Toastify> = {
+  title: 'Components/Toastify',
+  component: Toastify,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Toastify>;
+
+const defaultArgs = {
+  isOpen: false,
+  toastTitle: 'Success',
+  toastMessage: 'Variable name Requested for Review successfully',
+  closeButtonLabel: 'x',
+  displayDuration: 3000,
+};
+
+export const Controlled: Story = {
+  args: {
+    ...defaultArgs,
+  },
+  render: () => (
+    /*
+      Note:-
+      import { Toastify, toast } from 'pixel-react';
+    */
+
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      {/* Render Toastify to allow toast notifications */}
+      <Toastify />
+
+      {/* Button to trigger a toast notification */}
+      <Button
+        variant="primary"
+        label="Show Success Toast"
+        onClick={() => toast.success('Your request was successful!','Your request was successful! Your request was successful! Your request was successful! Your request was successful!')}
+      />
+      <Button
+        variant="delete"
+        label="Show Error Toast"
+        onClick={() => toast.error('Something went wrong!')}
+      />
+      <Button
+        variant="warning"
+        label="Show warning Object Toast"
+        onClick={() =>
+          toast.warning('Something went wrong!', { a: 'hi', b: '5', c: 10 })
+        }
+      />
+      <Button
+        variant="secondary"
+        label="Show info Array Toast"
+        onClick={() => toast.info('Something went wrong!', ['1', 4, 'hi'])}
+      />
+      <Button
+        variant="tertiary"
+        label="Show alert function Toast"
+        onClick={() => toast.alert('Something went wrong!', () => {})}
+      />
+    </div>
+  ),
+};
+
+export default meta;

package/src/components/Toastify/Toastify.tsx

@@ -1,95 +1,95 @@
-import { useState, useRef } from 'react';
-import Toaster from '../Toast/Toast';
-import { Variant, ToastProps, AcceptedType } from './types';
-
-let openToast: (
-  variant: Variant,
-  arg1: AcceptedType,
-  arg2?: AcceptedType
-) => void;
-
-export const Toastify = () => {
-  const [toastProps, setToastProps] = useState<ToastProps>({
-    isOpen: false,
-    variant: 'info',
-    toastTitle: '',
-    toastMessage: '',
-  });
-
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  openToast = (variant: Variant, arg1: AcceptedType, arg2?: AcceptedType) => {
-    // Clear the previous timeout if it exists
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-
-    // Set the title and message based on the arguments
-    let title = '';
-    let message = '';
-
-    // Function to format message
-    const formatMessage = (input: AcceptedType) => {
-      if (input && typeof input === 'object') {
-        return JSON.stringify(input, null, 2);
-      } else if (typeof input === 'function') {
-        return input.toString();
-      }
-      return String(input);
-    };
-
-    // If arg2 exists, use it as the message
-    if (arg2 !== undefined) {
-      title = formatMessage(arg1);
-      message = formatMessage(arg2);
-    } else {
-      title = formatMessage(arg1);
-      message = '';
-    }
-
-    const formattedTitle = title.charAt(0).toUpperCase() + title.slice(1);
-
-    // Close the existing toast if open, and then immediately show the new one
-    setToastProps((prev) => ({ ...prev, isOpen: false }));
-
-    setTimeout(() => {
-      setToastProps({
-        isOpen: true,
-        variant,
-        toastTitle: formattedTitle,
-        toastMessage: message,
-      });
-    }, 10);
-
-    timeoutRef.current = setTimeout(() => {
-      setToastProps((prev) => ({ ...prev, isOpen: false }));
-    }, 3000);
-  };
-
-  return (
-    <Toaster
-      isOpen={toastProps.isOpen}
-      variant={toastProps.variant}
-      toastTitle={toastProps.toastTitle}
-      toastMessage={toastProps.toastMessage}
-      zIndex={1000000000}
-    />
-  );
-};
-
-export default Toastify;
-
-// Utility to trigger toast messages outside of the Toastify component
-export const toast = {
-  success: (arg1: AcceptedType, arg2?: AcceptedType) =>
-    openToast('success', arg1, arg2),
-  error: (arg1: AcceptedType, arg2?: AcceptedType) =>
-    openToast('danger', arg1, arg2),
-  warning: (arg1: AcceptedType, arg2?: AcceptedType) =>
-    openToast('warning', arg1, arg2),
-  info: (arg1: AcceptedType, arg2?: AcceptedType) =>
-    openToast('info', arg1, arg2),
-  alert: (arg1: AcceptedType, arg2?: AcceptedType) =>
-    openToast('alert', arg1, arg2),
-};
+import { useState, useRef } from 'react';
+import Toaster from '../Toast/Toast';
+import { Variant, ToastProps, AcceptedType } from './types';
+
+let openToast: (
+  variant: Variant,
+  arg1: AcceptedType,
+  arg2?: AcceptedType
+) => void;
+
+export const Toastify = () => {
+  const [toastProps, setToastProps] = useState<ToastProps>({
+    isOpen: false,
+    variant: 'info',
+    toastTitle: '',
+    toastMessage: '',
+  });
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  openToast = (variant: Variant, arg1: AcceptedType, arg2?: AcceptedType) => {
+    // Clear the previous timeout if it exists
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    // Set the title and message based on the arguments
+    let title = '';
+    let message = '';
+
+    // Function to format message
+    const formatMessage = (input: AcceptedType) => {
+      if (input && typeof input === 'object') {
+        return JSON.stringify(input, null, 2);
+      } else if (typeof input === 'function') {
+        return input.toString();
+      }
+      return String(input);
+    };
+
+    // If arg2 exists, use it as the message
+    if (arg2 !== undefined) {
+      title = formatMessage(arg1);
+      message = formatMessage(arg2);
+    } else {
+      title = formatMessage(arg1);
+      message = '';
+    }
+
+    const formattedTitle = title.charAt(0).toUpperCase() + title.slice(1);
+
+    // Close the existing toast if open, and then immediately show the new one
+    setToastProps((prev) => ({ ...prev, isOpen: false }));
+
+    setTimeout(() => {
+      setToastProps({
+        isOpen: true,
+        variant,
+        toastTitle: formattedTitle,
+        toastMessage: message,
+      });
+    }, 10);
+
+    timeoutRef.current = setTimeout(() => {
+      setToastProps((prev) => ({ ...prev, isOpen: false }));
+    }, 3000);
+  };
+
+  return (
+    <Toaster
+      isOpen={toastProps.isOpen}
+      variant={toastProps.variant}
+      toastTitle={toastProps.toastTitle}
+      toastMessage={toastProps.toastMessage}
+      zIndex={1000000000}
+    />
+  );
+};
+
+export default Toastify;
+
+// Utility to trigger toast messages outside of the Toastify component
+export const toast = {
+  success: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('success', arg1, arg2),
+  error: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('danger', arg1, arg2),
+  warning: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('warning', arg1, arg2),
+  info: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('info', arg1, arg2),
+  alert: (arg1: AcceptedType, arg2?: AcceptedType) =>
+    openToast('alert', arg1, arg2),
+};

package/src/components/Toastify/index.ts

@@ -1 +1 @@
-export { default } from './Toastify';
+export { default } from './Toastify';

package/src/components/Toastify/types.ts

@@ -1,10 +1,10 @@
-export type Variant = 'success' | 'warning' | 'danger' | 'info' | 'alert';
-
-export interface ToastProps {
-  isOpen: boolean;
-  variant: Variant;
-  toastTitle: string;
-  toastMessage: string;
-}
-
+export type Variant = 'success' | 'warning' | 'danger' | 'info' | 'alert';
+
+export interface ToastProps {
+  isOpen: boolean;
+  variant: Variant;
+  toastTitle: string;
+  toastMessage: string;
+}
+
 export type AcceptedType = string | (() => void) | Record<string, unknown> | unknown[];