pixel-react 1.0.6 → 1.0.7

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.tsx

@@ -3,11 +3,11 @@ import { DrawerProps } from './Types.js';
 import Button from '../Button/Button.js';
 import classNames from 'classnames';
 import './Drawer.scss';
-import { useContext, useEffect, useState } from 'react';
+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 = ({
+const Drawer: FC<DrawerProps> = ({
   isOpen = true,
   children = 'Drawer content area',
   onClose = () => {},
@@ -103,11 +103,7 @@ const Drawer = ({
               <div className="ff-drawer-title">{title}</div>
             </div>
             {_isCloseModalButtonVisible && (
-              <Icon
-                name="close"
-                hoverEffect={false}
-                onClick={onClose}
-              />
+              <Icon name="close" hoverEffect={false} onClick={onClose} />
             )}
           </div>
         </div>

package/src/components/Icon/iconList.ts

@@ -45,6 +45,13 @@ import ImpactListIcon from '../../assets/icons/impactList.svg?react';
 import InfoIcon from '../../assets/icons/info_icon.svg?react';
 import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
 import HideIcon from '../../assets/icons/hide_icon.svg?react';
+import CollapseIcon from '../../assets/icons/collapse-icon.svg?react';
+import ExpandIcon from '../../assets/icons/expand-icon.svg?react';
+import CopyIcon from '../../assets/icons/copy-icon.svg?react';
+import DownloadFile from '../../assets/icons/download-icon.svg?react';
+import RefreshIcon from '../../assets/icons/refresh-icon.svg?react';
+import LicenseInfo from '../../assets/icons/license_info.svg?react';
+import LicenseWarning from '../../assets/icons/license_warning.svg?react';
 //icons
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -90,5 +97,12 @@ Components['add_variable'] = AddVariable;
 Components['info'] = InfoIcon;
 Components['calendar_icon'] = CalendarIcon;
 Components['hide_icon'] = HideIcon;
+Components['collapse_icon'] = CollapseIcon;
+Components['refresh_icon'] = RefreshIcon;
+Components['download_file'] = DownloadFile;
+Components['copy_icon'] = CopyIcon;
+Components['expand_icon'] = ExpandIcon;
+Components['license_info'] = LicenseInfo;
+Components['license_warning'] = LicenseWarning;
 
 export default Components;

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+import { useState } from 'react';
+import Button from '../Button';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Modal>;
+
+export const DefaultModalStory: Story = {
+  args: {
+    isOpen: true,
+    contentLabel: 'modal',
+    ariaHideApp: true,
+    isHeaderDisplayed: true,
+    headerContent: <h2>title</h2>,
+    children: <h2>Hello</h2>,
+    isFooterDisplayed:true,
+    footerContent: <Button variant="primary" label="continue" />,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [openModal, setModal] = useState(false);
+    return (
+      <>
+        <Button
+          variant="primary"
+          onClick={() => {
+            setModal(true);
+          }}
+        >
+          Show Modal
+        </Button>
+        {openModal && (
+          <Modal
+            overlayClassName="custom-overlay"
+            isOpen={openModal}
+            onClose={() => {
+              setModal(false);
+            }}
+            headerContent={<div>title</div>}
+            isHeaderDisplayed={true}
+            children={<div>Hello</div>}
+            ariaHideApp={true}
+            isFooterDisplayed={true}
+            footerContent={<Button variant="primary" label='continue'/>}
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,71 @@
+import React, { useContext, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import './modal.scss';
+import { ModalProps } from './types';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  contentLabel,
+  isHeaderDisplayed,
+  headerContent,
+  footerContent,
+  contentClassName,
+  isFooterDisplayed,
+  overlayClassName,
+  shouldCloseOnEsc = true,
+  ariaHideApp = true,
+  shouldCloseOnOverlayClick = true,
+  children,
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && shouldCloseOnEsc) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      if (ariaHideApp) {
+        document.body.style.overflow = 'hidden';
+      }
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      if (ariaHideApp) {
+        document.body.style.overflow = '';
+      }
+    };
+  }, [isOpen, onClose, ariaHideApp, shouldCloseOnEsc]);
+
+  if (!isOpen) return null;
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+
+  return createPortal(
+    <div
+      className={`ff-modal-overlay ${overlayClassName || ''}`}
+      onClick={shouldCloseOnOverlayClick ? onClose : undefined}
+    >
+      <div
+        className={`ff-modal-content ${currentTheme} ${contentClassName || ''}`}
+        onClick={(e) => e.stopPropagation()}
+        aria-label={contentLabel}
+      >
+        {isHeaderDisplayed && (
+          <div className="ff-modal-header">{headerContent}</div>
+        )}
+        {children}
+      </div>
+      {isFooterDisplayed && (
+        <div className="ff-modal-footer">{footerContent}</div>
+      )}
+    </div>,
+    document.body
+  );
+};
+
+export default Modal;

package/src/components/Modal/index.tsx

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

package/src/components/Modal/modal.scss

@@ -0,0 +1,37 @@
+@use '../../assets/styles/mixins' as *;
+.ff-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--background-modal-color);
+  @include center-content;
+  flex-direction: column;
+}
+
+.ff-modal-content {
+  background: var(--ff-mini-modal-border);
+  position: relative;
+  max-width: 549px;
+  width: 100%;
+  border-radius: 12px 12px 0 0;
+  padding: 16px;
+  .ff-modal-header {
+    height: 32px;
+    width: 448px;
+  }
+}
+.ff-modal-footer {
+  background-color: var(--expandable-menu-option-bg);
+  max-width: 549px;
+  width: 100%;
+  height: 32px;
+  border-radius: 0 0 12px 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 16px;
+}

package/src/components/Modal/types.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+
+  /*** label value for aria-label  */
+  contentLabel?: string;
+
+  /*** default header will be provided with title and close icon. */
+  isHeaderDisplayed: boolean;
+
+  /*** Title to be displayed in the header when defaultHeader is true*/
+  headerTitle?: string;
+
+  /*** Custom class names for the modal content */
+  contentClassName?: string;
+
+  /*** Custom class name for the overlay */
+  overlayClassName?: string;
+
+  /*** Whether the modal should close when the 'Escape' key is pressed */
+  shouldCloseOnEsc?: boolean;
+
+  /*** Whether to hide the app from screen readers when the modal is open */
+  ariaHideApp?: boolean; //for screen readers
+
+  /*** Whether the modal should close when clicking outside of it (on the overlay) */
+  shouldCloseOnOverlayClick?: boolean;
+  //   shouldFocusAfterRender?: boolean;
+  //   shouldReturnFocusAfterClose?: boolean;
+  headerContent?: string | ReactNode;
+  footerContent?: ReactNode;
+  /***Content to be displayed inside the modal */
+  children: ReactNode;
+  isFooterDisplayed: boolean;
+}

package/src/components/TableTree/TableTree.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable */
 // @ts-nocheck
-import './TableTree.scss';
 import React, { ReactNode, useLayoutEffect, useRef, useState } from 'react';
 import { prepareData } from '../../utils/TableCell/TableCell';
 import Icon from '../Icon';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
 import Checkbox from '../Checkbox';
+import './TableTree.scss';
 
 interface ColumnDataProps {
   name: string;

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,21 +1,24 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useState, useEffect } from 'react';
 import { ThemeContextType, ThemeProviderProps, Theme } from './types';
 import '../../assets/Themes/Theme.scss';
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, theme }) => {
-  const [currentTheme, setCurrentTheme] = useState<Theme>(
-    theme || 'ff-light-theme'
-  );
+  const [currentTheme, setCurrentTheme] = useState<Theme>(theme || 'ff-light-theme');
 
   const applyTheme = (newTheme: Theme) => setCurrentTheme(newTheme);
 
+  useEffect(() => {
+    document.body.className = currentTheme;
+    return () => {
+      document.body.className = '';
+    };
+  }, [currentTheme]);
+
   return (
-    <ThemeContext.Provider
-      value={{ currentTheme, setCurrentTheme, applyTheme }}
-    >
-      <div className={currentTheme}>{children}</div>
+    <ThemeContext.Provider value={{ currentTheme, setCurrentTheme, applyTheme }}>
+      {children}
     </ThemeContext.Provider>
   );
 };

package/src/index.ts

@@ -14,10 +14,8 @@ import ExpandableMenu from './components/ExpandableMenu';
 import Select from './components/Select/Select';
 import TextArea from './components/TextArea';
 import StatusButton from './components/StatusButton';
-
 import MenuOption from './components/MenuOption';
 import Table from './components/Table/Table';
-
 import AddResourceButton from './components/AddResourceButton';
 import DonutChart from './components/Charts/DonutChart';
 import FileDropzone from './components/FileDropzone';
@@ -26,7 +24,6 @@ import ThemeProvider from './components/ThemeProvider';
 import Typography from './components/Typography';
 import useTheme from './hooks/useTheme';
 import Form from './components/Form';
-
 import InputWithDropdown from './components/InputWithDropdown';
 import RadioButton from './components/RadioButton';
 import RadioGroup from './components/RadioGroup';
@@ -39,6 +36,7 @@ import Search from './components/Search/Search';
 import DatePicker from './components/DatePicker';
 import StateDropdown from './components/StateDropdown';
 import IconButton from './components/IconButton';
+import DragAndDrop from './components/DragAndDrop/DragAndDrop';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -47,7 +45,6 @@ import {
   getExtensionWithPeriod,
 } from './utils/getExtension/getExtension';
 
-
 export {
   Button,
   Tooltip,
@@ -89,7 +86,7 @@ export {
   StateDropdown,
   StatusButton,
   IconButton,
-
+  DragAndDrop,
 
   // utils exports
   checkEmpty,

package/lib/components/AddButton/AddButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './AddButton.scss';
-import { AddButtonProps } from './types';
-declare const AddButton: React.FC<AddButtonProps>;
-export default AddButton;

package/lib/components/AddButton/AddButton.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const PrimaryAddButton: Story;
-export default meta;

package/lib/components/AddButton/index.d.ts

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

package/lib/components/AddButton/types.d.ts

@@ -1,4 +0,0 @@
-export interface AddButtonProps {
-    name: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}