pixel-react 1.0.6 → 1.0.8

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/GridLayout/GridLayout.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Container, Row, Col } from './GridLayout';
-import './GridLayoutStory.scss'
+import './GridLayoutStory.scss';
 
 const meta: Meta<typeof Container> = {
   title: 'Components/GridLayout',
@@ -27,31 +27,21 @@ export const Grid: ContainerStory = {
       <Container {...args}>
         <Row>
           <Col size={4}>
-            <div className='one'>
-              Column 1
-            </div>
+            <div className="one">Column 1</div>
           </Col>
           <Col size={4}>
-            <div className='two'>
-              Column 2
-            </div>
+            <div className="two">Column 2</div>
           </Col>
           <Col size={4}>
-            <div className='three'>
-              Column 3
-            </div>
+            <div className="three">Column 3</div>
           </Col>
         </Row>
         <Row>
           <Col size={6}>
-            <div className='four'>
-              Column 4
-            </div>
+            <div className="four">Column 4</div>
           </Col>
           <Col size={6}>
-            <div className='five'>
-              Column 5
-            </div>
+            <div className="five">Column 5</div>
           </Col>
         </Row>
       </Container>
@@ -67,57 +57,29 @@ export const Grid2: ContainerStory = {
       <Container {...args}>
         <Row gap="20px">
           <Col size={3}>
-            <div
-              className='one'
-            >
-              Column 1 (size 3)
-            </div>
+            <div className="one">Column 1 (size 3)</div>
           </Col>
           <Col size={6}>
-            <div
-              className='two'
-            >
-              Column 2 (size 6)
-            </div>
+            <div className="two">Column 2 (size 6)</div>
           </Col>
           <Col size={3}>
-            <div
-              className='three'
-            >
-              Column 3 (size 3)
-            </div>
+            <div className="three">Column 3 (size 3)</div>
           </Col>
         </Row>
         <Row gap="10px">
           <Col size={4}>
-            <div
-              className='four'
-            >
-              Column 4 (size 4)
-            </div>
+            <div className="four">Column 4 (size 4)</div>
           </Col>
           <Col size={4}>
-            <div
-              className='five'
-            >
-              Column 5 (size 4)
-            </div>
+            <div className="five">Column 5 (size 4)</div>
           </Col>
           <Col size={4}>
-            <div
-              className='one'
-            >
-              Column 6 (size 4)
-            </div>
+            <div className="one">Column 6 (size 4)</div>
           </Col>
         </Row>
         <Row gap="15px">
           <Col size={12}>
-            <div
-              className='two'
-            >
-              Full-width column (size 12)
-            </div>
+            <div className="two">Full-width column (size 12)</div>
           </Col>
         </Row>
       </Container>

package/src/components/GridLayout/GridLayout.tsx

@@ -2,29 +2,31 @@
 import React from 'react';
 import './GridLayout.scss';
 import { ContainerProps, RowProps, ColProps } from './types';
+import cx from 'classnames'
 
 export const Container: React.FC<ContainerProps> = ({
   children,
   fluid = false,
   gap = '0px',
+  className=''
 }) => {
-  const className = fluid ? 'ff-container-fluid' : 'ff-container';
+  const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
   return (
-    <div className={className} style={{ gap }}>
+    <div className={cx(containerClassName,className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Row: React.FC<RowProps> = ({ children, gap = '0px' }) => {
+export const Row: React.FC<RowProps> = ({ children, gap = '0px',className='' }) => {
   return (
-    <div className="ff-row" style={{ gap }}>
+    <div className={cx("ff-row",className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Col: React.FC<ColProps> = ({ children, size = 12 }) => {
-  const className = `ff-col-${size}`;
-  return <div className={className}>{children}</div>;
+export const Col: React.FC<ColProps> = ({ children, size = 12,className='' }) => {
+  const colClassName = `ff-col-${size}`;
+  return <div className={cx(colClassName,className)}>{children}</div>;
 };

package/src/components/GridLayout/types.ts

@@ -25,6 +25,13 @@ export interface ContainerProps {
    * @type {string}
    */
   gap?: string;
+
+  /**
+   * Classname for Container
+   * @default ''
+   * @type {string}
+   */
+  className?:string
 }
 
 export interface RowProps {
@@ -43,6 +50,12 @@ export interface RowProps {
    * @type {string}
    */
   gap?: string;
+
+  /**
+   * @default ''
+   * @type string
+   */
+  className?:string
 }
 
 export interface ColProps {
@@ -61,4 +74,11 @@ export interface ColProps {
    * @type {number}
    */
   size?: number;
+
+  /**
+   * @default  ''
+   * @type string
+   * 
+   */
+  className?: string;
 }

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>
   );
 };