pixel-react 1.6.7 → 1.6.9

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,94 +1,94 @@
-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}
-    />
-  );
-};
-
-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}
+    />
+  );
+};
+
+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[];

package/src/components/Toggle/Toggle.scss

@@ -1,133 +1,133 @@
-@use "sass:map";
-$switch-sizes: (
-  small: (
-    button-size: 16px,
-    container-width: 24px,
-    container-height: 10px,
-    translate-x: 10px,
-  ),
-  medium: (
-    button-size: 20px,
-    container-width: 32px,
-    container-height: 14px,
-    translate-x: 14px,
-  ),
-  large: (
-    button-size: 24px,
-    container-width: 40px,
-    container-height: 16px,
-    translate-x: 16px,
-  ),
-);
-
-@mixin switch-size($size) {
-  $button-size: map.get(map.get($switch-sizes, $size), button-size);
-  $container-width: map.get(map.get($switch-sizes, $size), container-width);
-  $container-height: map.get(map.get($switch-sizes, $size), container-height);
-  $translate-x: map.get(map.get($switch-sizes, $size), translate-x);
-
-  width: $container-width;
-  height: $container-height;
-
-  .ff--switch-button {
-    width: $button-size;
-    height: $button-size;
-    transform: translateX(0);
-    &.checked {
-      transform: translateX($translate-x);
-    }
-  }
-}
-
-.ff--switch-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  .ff--switch-checkbox {
-    height: 0;
-    width: 0;
-    display: none;
-
-    &:checked {
-      + .ff--switch-label {
-        .ff--switch-button {
-          right: -1px;
-          border: 1px solid var(--brand-color);
-          background: var(--toggle-button-bg-color);
-          transition: all 0.3s;
-          box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
-          .ff-checked-icon--primary {
-            svg {
-              path {
-                fill: var(--brand-color);
-              }
-            }
-          }
-        }
-
-        &--primary {
-          background: var(--brand-color);
-          transition: all 0.3s;
-        }
-
-        &:disabled {
-          cursor: default;
-          color: var(--disable-color);
-          background: var(--disable-color);
-        }
-      }
-    }
-    &:disabled {
-      cursor: no-drop;
-    }
-  }
-
-  .ff--switch-label {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    border-radius: 8px;
-    position: relative;
-    background: var(--toggle-strip-color);
-    transition: all 0.3s;
-
-    &--disabled {
-      opacity: 0.5;
-      cursor: no-drop;
-    }
-
-    .ff--switch-button {
-      position: absolute;
-      left: 0;
-      border: 1px solid var(--toggle-strip-color);
-      display: flex;
-      background: var(--toggle-button-bg-color);
-      border-radius: 50%;
-      box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
-      transition: all 0.3s;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-
-      .ff-unchecked-icon--primary {
-        svg {
-          path {
-            fill: var(--toggle-disable-icon-color);
-          }
-        }
-      }
-    }
-  }
-
-  .default--small {
-    @include switch-size(small);
-  }
-  .default--medium {
-    @include switch-size(medium);
-  }
-  .default--large {
-    @include switch-size(large);
-  }
-}
+@use "sass:map";
+$switch-sizes: (
+  small: (
+    button-size: 16px,
+    container-width: 24px,
+    container-height: 10px,
+    translate-x: 10px,
+  ),
+  medium: (
+    button-size: 20px,
+    container-width: 32px,
+    container-height: 14px,
+    translate-x: 14px,
+  ),
+  large: (
+    button-size: 24px,
+    container-width: 40px,
+    container-height: 16px,
+    translate-x: 16px,
+  ),
+);
+
+@mixin switch-size($size) {
+  $button-size: map.get(map.get($switch-sizes, $size), button-size);
+  $container-width: map.get(map.get($switch-sizes, $size), container-width);
+  $container-height: map.get(map.get($switch-sizes, $size), container-height);
+  $translate-x: map.get(map.get($switch-sizes, $size), translate-x);
+
+  width: $container-width;
+  height: $container-height;
+
+  .ff--switch-button {
+    width: $button-size;
+    height: $button-size;
+    transform: translateX(0);
+    &.checked {
+      transform: translateX($translate-x);
+    }
+  }
+}
+
+.ff--switch-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .ff--switch-checkbox {
+    height: 0;
+    width: 0;
+    display: none;
+
+    &:checked {
+      + .ff--switch-label {
+        .ff--switch-button {
+          right: -1px;
+          border: 1px solid var(--brand-color);
+          background: var(--toggle-button-bg-color);
+          transition: all 0.3s;
+          box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
+          .ff-checked-icon--primary {
+            svg {
+              path {
+                fill: var(--brand-color);
+              }
+            }
+          }
+        }
+
+        &--primary {
+          background: var(--brand-color);
+          transition: all 0.3s;
+        }
+
+        &:disabled {
+          cursor: default;
+          color: var(--disable-color);
+          background: var(--disable-color);
+        }
+      }
+    }
+    &:disabled {
+      cursor: no-drop;
+    }
+  }
+
+  .ff--switch-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    border-radius: 8px;
+    position: relative;
+    background: var(--toggle-strip-color);
+    transition: all 0.3s;
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: no-drop;
+    }
+
+    .ff--switch-button {
+      position: absolute;
+      left: 0;
+      border: 1px solid var(--toggle-strip-color);
+      display: flex;
+      background: var(--toggle-button-bg-color);
+      border-radius: 50%;
+      box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
+      transition: all 0.3s;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+
+      .ff-unchecked-icon--primary {
+        svg {
+          path {
+            fill: var(--toggle-disable-icon-color);
+          }
+        }
+      }
+    }
+  }
+
+  .default--small {
+    @include switch-size(small);
+  }
+  .default--medium {
+    @include switch-size(medium);
+  }
+  .default--large {
+    @include switch-size(large);
+  }
+}