pixel-react 1.10.15 → 1.10.16

package/src/components/Toast/Toast.tsx

@@ -1,117 +0,0 @@
-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 +0,0 @@
-export { default } from './Toast';

package/src/components/Toast/types.ts

@@ -1,27 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-export { default } from './Toastify';

package/src/components/Toastify/types.ts

@@ -1,10 +0,0 @@
-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.stories.tsx

@@ -1,132 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Toggle from './Toggle';
-
-const meta: Meta<typeof Toggle> = {
-  title: 'Components/Toggle',
-  component: Toggle,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    onChange: { action: 'changed' },
-    disabled: { control: 'boolean' },
-    checked: { control: 'boolean' },
-    id: { control: 'text' },
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'medium', 'large'],
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Toggle>;
-
-export const Default: Story = {
-  args: {
-    disabled: false,
-    checked: false,
-    id: 'toggle1',
-    size: 'large',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-    id: 'toggle2',
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    ...Default.args,
-    checked: true,
-    id: 'toggle3',
-  },
-};
-
-export const SmallSize: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle4"
-        size="small"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const MediumSize: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle5"
-        size="medium"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const DynamicIconAndSize: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle7"
-        size="large"
-        checked={checked}
-        onChange={handleChange}
-        icon={{
-          checked: { name: 'moon_stars_icon', width: 14, height: 14 },
-          unchecked: { name: 'sun_icon', width: 14, height: 14 },
-        }}
-      />
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle8"
-        size="large"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};

package/src/components/Toggle/Toggle.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { ToggleProps } from './types';
-import './Toggle.scss';
-import Icon from '../Icon';
-
-const Toggle: React.FC<ToggleProps> = ({
-  onChange,
-  variant = 'primary',
-  disabled,
-  checked = false,
-  id = 'toggle',
-  size = 'large',
-  icon,
-}) => {
-  const handleChange = (e: any) => {
-    if (onChange) {
-      onChange(e);
-    }
-  };
-
-  const baseIconSizes = {
-    large: 10,
-    medium: 8,
-    small: 6,
-  };
-
-  const defaultIconSize = baseIconSizes[size as 'small' | 'medium' | 'large'];
-
-  const defaultIcons = {
-    checked: {
-      name: 'check_mark',
-      width: defaultIconSize,
-      height: defaultIconSize,
-    },
-    unchecked: {
-      name: 'wrong_mark',
-      width: defaultIconSize,
-      height: defaultIconSize,
-    },
-  };
-
-  const iconNames = {
-    checked: { ...defaultIcons.checked, ...icon?.checked },
-    unchecked: { ...defaultIcons.unchecked, ...icon?.unchecked },
-  };
-
-  return (
-    <div className="ff--switch-container">
-      <input
-        className="ff--switch-checkbox"
-        id={`ff-toggle-${id}`}
-        type="checkbox"
-        disabled={!!disabled}
-        onChange={handleChange}
-        checked={checked}
-      />
-      <label
-        className={classNames(
-          `ff--switch-label default--${size} ff--switch-label--${variant}`,
-          {
-            'ff--switch-label--disabled': disabled,
-          }
-        )}
-        htmlFor={`ff-toggle-${id}`}
-      >
-        <span
-          className={classNames(
-            `ff--switch-button ff--switch-button--${size}`,
-            {
-              checked: checked,
-            }
-          )}
-        >
-          {checked ? (
-            <Icon
-              name={iconNames.checked.name}
-              width={iconNames.checked.width}
-              height={iconNames.checked.height}
-              className={`ff-checked-icon--${variant}`}
-            />
-          ) : (
-            <Icon
-              name={iconNames.unchecked.name}
-              width={iconNames.unchecked.width}
-              height={iconNames.unchecked.height}
-              className={`ff-unchecked-icon--${variant}`}
-            />
-          )}
-        </span>
-      </label>
-    </div>
-  );
-};
-
-export default Toggle;

package/src/components/Toggle/index.ts

@@ -1 +0,0 @@
-export { default } from './Toggle';

package/src/components/Toggle/types.ts

@@ -1,43 +0,0 @@
-export interface ToggleProps {
-  /**
-   * Optional onChange handler
-   */
-  onChange?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
-  /**
-   * Optional disabled state
-   */
-  disabled?: boolean;
-  /**
-   * Optional checked state
-   */
-  checked?: boolean;
-  /**
-   * Optional id
-   */
-  id?: string;
-  /**
-   * What background color to occur upon toggled
-   */
-  variant?: 'primary' | 'secondary';
-
-  /**
-   * Defines the size of the toggle
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Optional icon configuration for the toggle. This allows for custom icons to be used for both the checked and unchecked states.
-   *
-   * @property checked - Icon configuration for the checked state.
-   * @property unchecked - Icon configuration for the unchecked state.
-   *
-   * @example
-   * {
-   *   checked: { name: 'checked-icon', width: 24, height: 24 },
-   *   unchecked: { name: 'unchecked-icon', width: 24, height: 24 }
-   * }
-   */
-  icon?: {
-    checked?: { name: string; width: number; height: number };
-    unchecked?: { name: string; width: number; height: number };
-  };
-}

package/src/components/ToggleSwitch/ToggleSwitch.stories.tsx

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ToggleSwitch from "./ToggleSwitch";
-import React, { useState } from "react";
-
-
-const meta: Meta<typeof ToggleSwitch> = {
-  title: "Components/ToggleSwitch",
-  component: ToggleSwitch,
-  tags: ["autodocs"],
-  argTypes: {
-    selected: {
-      control: { type: "radio" }, 
-      options: ["Automation", "Manual"],
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ToggleSwitch>;
-
-export const Default: Story = {
-  args: {
-    selected: "Automation", 
-    firstButton: "Automation",
-    secondButton: "Manual",
-    handleClick: () => {},
-  },
-};
-
-export const Switch: Story = {
-  render: () => {
-    const ToggleSwitchWrapper = () => {
-      const [selected, setSelected] = useState<string>("Automation");
-
-      const handleChange = (selectedSwitch: string) => {
-        setSelected(selectedSwitch);
-      };
-
-      return (
-        <ToggleSwitch
-          selected={selected}
-          firstButton="Automation"
-          secondButton="Manual"
-          handleClick={handleChange}
-        />
-      );
-    };
-
-    return <ToggleSwitchWrapper />;
-  },
-};

package/src/components/ToggleSwitch/ToggleSwitch.tsx

@@ -1,30 +0,0 @@
-import React, { type JSX } from "react";
-import "./ToggleSwitch.scss";
-
-interface ToggleSwitchProps {
-  firstButton:string,
-  secondButton:string,
-  handleClick:(selected:string)=>void,
-  selected:string
-}
-
-const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ selected = "text",firstButton='File',secondButton='File',handleClick}):JSX.Element => {
-  return (
-    <div className="toggle-container">
-      <button
-        className={`toggle-button ${selected === firstButton ? "active" : ""}`}
-        onClick={() => handleClick(firstButton)}
-      >
-        {firstButton}
-      </button>
-      <button
-        className={`toggle-button ${selected === secondButton ? "active" : ""}`}
-        onClick={() => handleClick(secondButton)}
-      >
-        {secondButton}
-      </button>
-    </div>
-  );
-};
-
-export default ToggleSwitch;

package/src/components/ToggleSwitch/index.ts

@@ -1 +0,0 @@
-export {default} from './ToggleSwitch'