pixel-react 1.10.15 → 1.10.16

package/src/components/DragAndDrop/DragAndDropList.tsx

@@ -1,151 +0,0 @@
-import { useState } from 'react';
-import DragAndDrop from './DragAndDrop';
-const {
-  DNDCore: {
-    DndContext,
-    KeyboardSensor,
-    PointerSensor,
-    useSensor,
-    useSensors,
-    closestCorners,
-  },
-  DNDSortable: {
-    useSortable,
-    arrayMove,
-    sortableKeyboardCoordinates,
-    SortableContext,
-    verticalListSortingStrategy,
-  },
-  DNDUtilities: { CSS },
-} = DragAndDrop;
-import Typography from '../Typography';
-
-import './DragAndDropList.scss';
-import { DragEndEvent } from '@dnd-kit/core';
-
-interface TaskProps {
-  id: number;
-  title: string;
-}
-
-export const Task = ({ id, title }: TaskProps) => {
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id });
-
-  const style = {
-    transition,
-    transform: CSS.Transform.toString(transform),
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      {...attributes}
-      {...listeners}
-      className="task"
-    >
-      <Typography as='h1' fontSize={16} className='task-title'>{title}</Typography>
-    </div>
-  );
-};
-
-interface ColumnProps {
-  id: string;
-  tasks: { id: number; title: string }[];
-}
-
-export const Column: React.FC<ColumnProps> = ({ tasks }) => {
-  return (
-    <div className="column">
-      <SortableContext items={tasks} strategy={verticalListSortingStrategy}>
-        {tasks.map((task) => (
-          <Task key={task.id} id={task.id} title={task.title} />
-        ))}
-      </SortableContext>
-    </div>
-  );
-};
-
-interface InputProps {
-  onSubmit: (input: string) => void;
-}
-
-export const Input: React.FC<InputProps> = ({ onSubmit }) => {
-  const [input, setInput] = useState('');
-
-  const handleSubmit = () => {
-    if (!input) return;
-
-    onSubmit(input);
-
-    setInput('');
-  };
-
-  return (
-    <div className="container">
-      <input
-        className="input"
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-      />
-      <button onClick={handleSubmit} className="button">
-        <Typography fontSize={14}>Add</Typography>
-      </button>
-    </div>
-  );
-};
-
-const DragAndDropList = () => {
-  const [tasks, setTasks] = useState([
-    { id: 1, title: 'Add tests to homepage' },
-    { id: 2, title: 'Fix styling in about section' },
-    { id: 3, title: 'Learn how to center a div' },
-  ]);
-
-  const addTask = (title: any) => {
-    setTasks((tasks) => [...tasks, { id: tasks.length + 1, title }]);
-  };
-
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  const getTaskPos = (id: number): number =>
-    tasks.findIndex((task) => task.id === id);
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-
-    if (active.id === over?.id) return;
-
-    setTasks((tasks) => {
-      const originalPos = getTaskPos(Number(active?.id));
-      const newPos = getTaskPos(Number(over?.id));
-
-      return arrayMove(tasks, originalPos, newPos);
-    });
-  };
-
-  return (
-    <div className="drag-and-drop-list">
-      <Typography fontSize={32} fontWeight="semi-bold">
-        Drag and Drop test ✅
-      </Typography>
-      <Input onSubmit={addTask} />
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCorners}
-        onDragEnd={handleDragEnd}
-      >
-        <Column id="toDo" tasks={tasks} />
-      </DndContext>
-    </div>
-  );
-};
-
-export default DragAndDropList;

package/src/components/DragAndDrop/index.ts

@@ -1 +0,0 @@
-export * from './DragAndDrop';

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,157 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Drawer from './Drawer';
-import { useState } from 'react';
-import Button from '../Button';
-import Icon from '../Icon';
-
-const meta: Meta<typeof Drawer> = {
-  title: 'Components/Drawer',
-  component: Drawer,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Drawer>;
-const defaultArgs = {
-  isOpen: true,
-  title: 'Drawer Title',
-  showEditButton: false,
-  _isExpanded: false,
-  showHeader: true,
-  onClose: () => {},
-  primaryButtonProps: {
-    label: 'Create',
-    variant: 'primary',
-    disabled: false,
-    onClick: () => {},
-  },
-  secondaryButtonProps: {
-    label: 'Cancel',
-    variant: 'secondary',
-    disabled: false,
-    onClick: () => {},
-  },
-  leftPrimaryButtonProps: {
-    label: 'Next',
-    variant: 'primary',
-    disabled: false,
-    onClick: () => {},
-  },
-  leftSecondaryButtonProps: {
-    label: 'Previuos',
-    variant: 'secondary',
-    disabled: false,
-    onClick: () => {},
-  },
-  onEdit: () => {},
-  overlay: false,
-  isFooterRequired: true,
-  footerContent: null,
-  backButtonIcon: <Icon name="error" height={16} width={16} />,
-  onCloseIconClick: () => alert('Close icon clicked!'),
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    size: 'medium',
-    showHeader: true,
-  },
-};
-export const WithoutHeader: Story = {
-  args: {
-    ...defaultArgs,
-    showHeader: false,
-    size: 'medium',
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-export const WithCustomHeader: Story = {
-  args: {
-    ...defaultArgs,
-    customHeader: (
-      <div>
-        <h3>My Custom Header</h3>
-      </div>
-    ),
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-export const WithCustomFooter: Story = {
-  args: {
-    ...defaultArgs,
-    customFooter: (
-      <div>
-        <h3>My Custom Footer</h3>
-      </div>
-    ),
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-export const WithTertiaryButtons: Story = {
-  args: {
-    ...defaultArgs,
-    leftTertiaryButtonProps: {
-      label: 'Help',
-      onClick: () => {},
-    },
-    rightTertiaryButtonProps: {
-      label: 'More Info',
-      onClick: () => {},
-    },
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-
-export const WithCustomZIndex: Story = {
-  args: {
-    ...defaultArgs,
-    zIndex: 1050,
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [showModal, setShowModal] = useState(false);
-
-    return (
-      <>
-        <div>
-          <Button
-            onClick={() => setShowModal(true)}
-            label="show modal"
-            variant="primary"
-            disabled={false}
-          />
-        </div>
-        <Drawer
-          {...defaultArgs}
-          isOpen={showModal}
-          onCollapse={() => {}}
-          onClose={() => setShowModal(false)}
-          isFooterRequired={true}
-          _isExpanded={false}
-          size="medium"
-        >
-          <span>Drawer body</span>
-        </Drawer>
-      </>
-    );
-  },
-};

package/src/components/Drawer/Drawer.tsx

@@ -1,237 +0,0 @@
-import { createPortal } from 'react-dom';
-import { DrawerProps } from './Types.js';
-import Button from '../Button/Button.js';
-import classNames from 'classnames';
-import './Drawer.scss';
-import { FC, useContext, useEffect, useState } from 'react';
-import Icon from '../Icon';
-import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
-import { ThemeContext } from '../ThemeProvider/ThemeProvider.js';
-import cx from 'classnames';
-const Drawer: FC<DrawerProps> = ({
-  isOpen = true,
-  children = 'Drawer content area',
-  onClose = () => {},
-  title = 'drawer',
-  primaryButtonProps = {},
-  secondaryButtonProps = {},
-  leftPrimaryButtonProps = {},
-  leftSecondaryButtonProps = {},
-  showEditButton = false,
-  onEdit = () => {},
-  onCollapse = () => {},
-  overlay = false,
-  isFooterRequired = true,
-  footerContent = null,
-  size = 'medium',
-  _isExpanded = false,
-  isBackButtonVisible = false,
-  _isCloseModalButtonVisible = true,
-  showHeader = true,
-  backButtonIcon,
-  onCloseIconClick,
-  customHeader,
-  customFooter,
-  leftTertiaryButtonProps = {},
-  rightTertiaryButtonProps = {},
-  zIndex = 999,
-  secondLayerZIndex = false,
-  top,
-  height,
-  width,
-  right = 0,
-  overflow,
-}: DrawerProps) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const handleEsc = useEscapeKey('Escape');
-
-  handleEsc(onClose);
-
-  const toggleExpand = () => {
-    setIsExpanded((prev) => {
-      onCollapse(!prev);
-      return !prev;
-    });
-  };
-
-  const onCancel = () => {
-    if (secondaryButtonProps.onClick) {
-      secondaryButtonProps.onClick();
-    } else {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    closeModal();
-  }, [isOpen]);
-
-  const closeModal = () => {
-    if (!isOpen) {
-      setTimeout(() => {
-        return null;
-      }, 1000);
-    }
-  };
-
-  const drawerSize = isExpanded ? 'x-large' : size;
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-  return createPortal(
-    <div className={classNames('ff-drawer-container', currentTheme)}>
-      {overlay && (
-        <div
-          className={cx(
-            secondLayerZIndex && 'child-drawer-overlay',
-            'ff-overlay'
-          )}
-        />
-      )}
-
-      <div
-        className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
-          'ff-drawer--open': isOpen,
-        })}
-        style={{ zIndex, top, height, width, right, overflow }}
-      >
-        {showHeader && (
-          <div
-            className={classNames('ff-drawer-header', {
-              'ff-custom-header': customHeader,
-            })}
-          >
-            {customHeader ? (
-              <div className="ff-custom-header">{customHeader}</div>
-            ) : (
-              <div className="ff-drawer-action-section">
-                <div className="ff-action-button">
-                  {showEditButton && (
-                    <button
-                      className="ff-expand-collapse-button"
-                      onClick={onEdit}
-                    >
-                      <Icon name="logo" height={16} width={16} />
-                      Edit
-                    </button>
-                  )}
-                  {_isExpanded && (
-                    <button
-                      className="ff-expand-collapse-button"
-                      onClick={toggleExpand}
-                    >
-                      <Icon
-                        name={isExpanded ? 'minimize_script' : 'maximize_icon'}
-                        height={16}
-                        width={16}
-                      />
-                    </button>
-                  )}
-                  {isBackButtonVisible &&
-                    (backButtonIcon || (
-                      <Icon
-                        name="back_icon"
-                        height={16}
-                        width={16}
-                        hoverEffect
-                        onClick={onClose}
-                      />
-                    ))}
-                  {title && <div className="ff-drawer-title">{title}</div>}
-                </div>
-                {_isCloseModalButtonVisible && (
-                  <div className="ff-close-icon">
-                    <Icon
-                      name="close"
-                      hoverEffect={true}
-                      onClick={onCloseIconClick || onClose}
-                      height={6}
-                      width={6}
-                      color="var(--tabs-label-active-color)"
-                    />
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-
-        <div
-          className={classNames('ff-drawer-body', {
-            'no-footer': !isFooterRequired,
-          })}
-        >
-          {children}
-        </div>
-
-        {isFooterRequired && (
-          <div
-            className={classNames('ff-drawer-footer', {
-              'ff-custom-footer': customFooter,
-            })}
-          >
-            {customFooter || footerContent || (
-              <>
-                <div className="button-container">
-                  {leftSecondaryButtonProps.label && (
-                    <Button
-                      {...leftSecondaryButtonProps}
-                      onClick={leftPrimaryButtonProps.onClick}
-                      variant="secondary"
-                      transparentBackground={true}
-                    />
-                  )}
-                  {leftPrimaryButtonProps.label && (
-                    <Button
-                      {...leftPrimaryButtonProps}
-                      onClick={leftPrimaryButtonProps.onClick}
-                      variant="primary"
-                      transparentBackground={true}
-                    />
-                  )}
-                  {leftTertiaryButtonProps?.label && (
-                    <Button
-                      {...leftTertiaryButtonProps}
-                      onClick={leftTertiaryButtonProps.onClick}
-                      variant="tertiary"
-                      transparentBackground={true}
-                    />
-                  )}
-                </div>
-                <div className="button-container">
-                  {rightTertiaryButtonProps?.label && (
-                    <Button
-                      {...rightTertiaryButtonProps}
-                      onClick={rightTertiaryButtonProps.onClick}
-                      variant="tertiary"
-                      transparentBackground={true}
-                    />
-                  )}
-                  {secondaryButtonProps.label && (
-                    <Button
-                      {...secondaryButtonProps}
-                      onClick={onCancel}
-                      variant="secondary"
-                      transparentBackground={true}
-                    />
-                  )}
-                  {primaryButtonProps.label && (
-                    <Button
-                      {...primaryButtonProps}
-                      onClick={primaryButtonProps.onClick}
-                      variant="primary"
-                      transparentBackground={true}
-                    />
-                  )}
-                </div>
-              </>
-            )}
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body
-  );
-};
-
-export default Drawer;

package/src/components/Drawer/Types.ts

@@ -1,165 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface BtnPropsCommon {
-  /**
-   * Label for the button
-   */
-  label?: string;
-  /**
-   * Boolean value to disable the button
-   */
-  disabled?: boolean;
-  /**
-   * Onclick function for button
-   */
-  onClick?: () => void;
-  /**
-   * Button type
-   * @default 'button'
-   * @example 'submit'
-   * @example 'button'
-   */
-  type?: 'button' | 'submit';
-  /**
-   *  form to accept id of form in string format
-   */
-  form?: string;
-}
-export interface DrawerProps {
-  /**
-   * To Open the Drawer
-   */
-  isOpen: boolean;
-  /**
-   * To Expand the Drawer
-   */
-  _isExpanded?: boolean;
-  /**
-   * To show and  hide the back button of the Drawer
-   */
-  isBackButtonVisible?: boolean;
-  /**
-   * To show and  hide the close button of the Drawer
-   */
-  _isCloseModalButtonVisible?: boolean;
-  /**
-   * Function to close the drawer
-   */
-
-  onClose?: () => void;
-  /**
-   * Size of the drawer medium = 550px large = 850px
-   */
-  size?: 'small' | 'medium' | 'large' | 'x-large';
-
-  /**
-   * Body Content of the drawer
-   */
-  children: ReactNode;
-  /**
-   * Header title for the drawer
-   */
-  title?: string | ReactNode;
-  /**
-   * To show the edit button on the header
-   */
-  showEditButton?: boolean;
-  /**
-   * Primary | Success button props
-   */
-  primaryButtonProps?: BtnPropsCommon;
-  /**
-   * Secondary | Cancel button props
-   */
-  secondaryButtonProps?: BtnPropsCommon;
-  /**
-   * Left side Primary Button | Cancel button props
-   */
-  leftPrimaryButtonProps?: BtnPropsCommon;
-  /**
-   * Left side Secondary | Cancel button props
-   */
-  leftSecondaryButtonProps?: BtnPropsCommon;
-  /**
-   * Left side Tertiary Button | Help button props
-   */
-  leftTertiaryButtonProps?: BtnPropsCommon;
-
-  /**
-   * Right side Tertiary Button | More Info button props
-   */
-  rightTertiaryButtonProps?: BtnPropsCommon;
-  /**
-   * Onclick function for edit button
-   */
-  onEdit?: () => void;
-  /**
-   * Background overlay for the drawer
-   */
-  overlay?: boolean;
-  /**
-   * displays footer if its true, default true
-   */
-  isFooterRequired?: boolean;
-  /**
-   * footer Content
-   */
-  footerContent?: ReactNode;
-  /**
-   * To show or hide the header
-   */
-  showHeader?: boolean;
-  /**
-   *  Custom back button icon
-   * The icon to display for the back button.
-   * If not provided, a default icon will be used.
-   */
-  backButtonIcon?: ReactNode;
-  /**
-   * Callback function when the close icon is clicked
-   */
-  onCloseIconClick?: () => void;
-  /**
-   * Custom header for the drawer, replacing the default header.
-   * If provided, this will render in place of the default header.
-   */
-  customHeader?: ReactNode;
-  /**
-   * Custom footer for the drawer, replacing the default footer.
-   * If provided, this will render in place of the default footer.
-   */
-  customFooter?: ReactNode;
-  /**
-   * Custom z-index for the drawer
-   */
-  zIndex?: number;
-  /**
-   * Custom z-index for the secondary drawer
-   */
-  secondLayerZIndex?: boolean;
-  /**
-   * Custom top for the drawer
-   */
-  top?: string;
-  /**
-   * Height of the drawer
-   */
-  height?: string;
-  /**
-   *
-   * width of the drawer
-   */
-  width?: string;
-  /**
-   * Position from right
-   */
-  right?: string | number;
-  /**
-   * Custom overflow for the drawer
-   */
-  overflow?: string;
-  /**
-   * Callback function returns a boolean value when the drawer is collapsed.
-   */
-  onCollapse?: (value: boolean) => void;
-}

package/src/components/Drawer/index.ts

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