pixel-react-excel-sheet 1.2.0

package/src/components/DragAndDrop/DragAndDropList.tsx

@@ -0,0 +1,150 @@
+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';
+
+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: any) => {
+    const { active, over } = event;
+
+    if (active.id === over.id) return;
+
+    setTasks((tasks) => {
+      const originalPos = getTaskPos(active.id);
+      const newPos = getTaskPos(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

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

package/src/components/Drawer/Drawer.scss

@@ -0,0 +1,129 @@
+@use '../../assets/styles/fonts';
+
+.ff-drawer-container {
+  .ff-overlay {
+    position: fixed;
+    inset: 0;
+    background-color: var(--drawer-title-color);
+    opacity: 0.5;
+  }
+
+  .ff-drawer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    min-width: 450px;
+    background-color: var(--primary-button-text-color);
+    z-index: 999;
+    transform: translateX(100%);
+    opacity: 0;
+
+    &--open {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    &--small {
+      width: 444px;
+    }
+    &--medium {
+      width: 666px;
+    }
+    &--large {
+      width: 888px;
+    }
+    &--x-large {
+      width: calc(100vw - 10px);
+    }
+    &--open,
+    &--medium,
+    &--large,
+    &--x-large {
+      transition: all 0.4s ease-in-out;
+      border-radius: 5px;
+      border: 1px solid var(--border-color);
+    }
+
+    .ff-drawer-header {
+      padding: 4px 8px 4px 8px;
+      display: flex;
+      gap: 10px;
+      border-bottom: 1px solid var(--border-color);
+
+      .ff-drawer-title {
+        @extend .fontSm;
+        font-weight: 600;
+        color: var(--drawer-title-color);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .ff-close-icon {
+        height: 16px;
+        width: 16px;
+        background-color: var(--button-bg-color);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .ff-drawer-action-section {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        height: 24px;
+
+        .ff-action-button {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          .ff-expand-collapse-button {
+            cursor: pointer;
+            height: 24px;
+            width: 24px;
+            background-color: var(--button-bg-color);
+            outline: none;
+            border: none;
+            margin: 0;
+            border: 1px solid transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 8px;
+          }
+        }
+      }
+    }
+
+    .ff-drawer-body {
+      background-color: var(--drawer-footer-bg);
+      height: calc(100vh - 76px);
+      overflow: hidden auto;
+    }
+
+    .no-footer {
+      height: 100vh;
+    }
+
+    .ff-drawer-footer {
+      height: 24px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 4px 8px 4px 8px;
+      display: flex;
+      justify-content: space-between;
+      border-top: 1px solid var(--drawer-footer-border);
+
+      .button-container {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+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 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}
+          onClose={() => setShowModal(false)}
+          isFooterRequired={true}
+          _isExpanded={false}
+          size="medium"
+        >
+          <span>Drawer body</span>
+        </Drawer>
+      </>
+    );
+  },
+};

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,198 @@
+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';
+const Drawer: FC<DrawerProps> = ({
+  isOpen = true,
+  children = 'Drawer content area',
+  onClose = () => {},
+  title = 'drawer',
+  primaryButtonProps = {},
+  secondaryButtonProps = {},
+  leftPrimaryButtonProps = {},
+  leftSecondaryButtonProps = {},
+  showEditButton = false,
+  onEdit = () => {},
+  overlay = false,
+  isFooterRequired = true,
+  footerContent = null,
+  size = 'medium',
+  _isExpanded = false,
+  isBackButtonVisible = false,
+  _isCloseModalButtonVisible = true,
+  showHeader = true,
+  backButtonIcon,
+  onCloseIconClick,
+  customHeader,
+  customFooter,
+}: DrawerProps) => {
+  const [isExpanded, setIsExpanded] = useState(_isExpanded);
+
+  const handleEsc = useEscapeKey('Escape');
+
+  handleEsc(onClose);
+
+  const toggleExpand = () => {
+    setIsExpanded((prev) => !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="ff-overlay" />}
+
+      <div
+        className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
+          'ff-drawer--open': isOpen,
+        })}
+      >
+        {showHeader && (
+          <div className="ff-drawer-header">
+            {customHeader ? (
+              customHeader
+            ) : (
+              <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 ? 'logo' : 'logo'}
+                        height={16}
+                        width={16}
+                      />
+                    </button>
+                  )}
+                  {isBackButtonVisible && (
+                    <button
+                      className="ff-expand-collapse-button"
+                      onClick={onClose}
+                    >
+                      {backButtonIcon ? (
+                        backButtonIcon
+                      ) : (
+                        <Icon
+                          name="error"
+                          height={16}
+                          width={16}
+                          hoverEffect={false}
+                        />
+                      )}
+                    </button>
+                  )}
+                  {title && <div className="ff-drawer-title">{title}</div>}
+                </div>
+                {_isCloseModalButtonVisible && (
+                  <div className="ff-close-icon">
+                    <Icon
+                      name="close"
+                      hoverEffect={false}
+                      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="ff-drawer-footer">
+            {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}
+                    />
+                  )}
+                </div>
+                <div className="button-container">
+                  {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

@@ -0,0 +1,112 @@
+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;
+}
+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;
+  /**
+   * 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;
+}