pixel-react 1.0.5 → 1.0.7

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/RadioButton/RadioButton.scss

@@ -23,15 +23,15 @@
     display: none;
   }
   .ff-radio-custom {
-    box-sizing: border-box;
-    @include circle(16px, 1px solid var(--radio-button-border)); //todo
+    box-sizing: content-box;
+    @include circle(14px, 1px solid var(--radio-button-border)); //todo
     position: relative;
     margin-right: 8px;
     @include transition(border-color, background-color);
 
     &::before {
       content: '';
-      @include circle(14px);
+      @include circle(12px);
       background: #fbfdff; //todo
       position: absolute;
       top: 50%;

package/src/components/Select/Select.scss

@@ -112,7 +112,7 @@
       @include absolute-position(6px, auto, auto, auto);
       width: calc(100% - 38px);
       min-height: calc(100% - 8px);
-      padding: 0 28px 0 8px;
+      padding: 0 8px;
       border-radius: 4px;
       border: 1px solid transparent;
       z-index: 100;

package/src/components/TableTree/TableTree.tsx

@@ -1,11 +1,13 @@
 /* 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;
   accessor: string;
@@ -32,6 +34,7 @@ interface TableTreeProps {
 const TableTree = ({
   columnsData,
   treeData,
+  withCheckBox,
   onClick = () => {},
 }: TableTreeProps) => {
   const [expandedNodes, setExpandedNodes] = useState<Set<ObjectProps>>(
@@ -140,6 +143,7 @@ const TableTree = ({
                 style={{ fontWeight: node.folder ? 600 : 400 }}
                 onClick={(event) => onClick(event, node)}
               >
+                {withCheckBox && <Checkbox />}
                 {prepareData(node, column)}
               </div>
             </td>

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';
@@ -36,8 +33,10 @@ import Tabs from './components/Tabs';
 import HighlightText from './components/HighlightText';
 import Checkbox from './components/Checkbox';
 import Search from './components/Search/Search';
+import DatePicker from './components/DatePicker';
 import StateDropdown from './components/StateDropdown';
-import AddButton from './components/AddButton';
+import IconButton from './components/IconButton';
+import DragAndDrop from './components/DragAndDrop/DragAndDrop';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -83,10 +82,11 @@ export {
   Tabs,
   Checkbox,
   Search,
+  DatePicker,
   StateDropdown,
   StatusButton,
-  AddButton,
-
+  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/src/assets/icons/expired_license_icon.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.867 6.20329C15.873 6.44806 15.6805 6.65267 15.4358 6.65874C15.191 6.6648 14.9864 6.47232 14.9803 6.22754C14.9614 5.5887 14.7704 4.99913 14.4362 4.50352C14.1035 4.01018 13.6268 3.6093 13.0373 3.34938L9.25273 1.6784C8.81623 1.48592 8.37519 1.38891 7.93489 1.38891C7.49459 1.38891 7.05355 1.48516 6.61705 1.6784L2.8325 3.34938C2.22626 3.61688 1.73974 4.03216 1.4063 4.54368C1.07285 5.0552 0.890218 5.66903 0.890218 6.33212V10.8867C0.890218 12.5144 1.66622 13.9633 2.70367 15.1729C3.76613 16.4127 5.10752 17.4047 6.18965 18.0912C6.73527 18.4368 7.33242 18.6111 7.92579 18.6126C8.52294 18.6141 9.12087 18.4436 9.66801 18.1018C9.87489 17.9722 10.1485 18.0351 10.2788 18.2428C10.4084 18.4497 10.3455 18.7232 10.1378 18.8536C9.44672 19.2863 8.68663 19.5023 7.92663 19.5C7.16276 19.4977 6.40191 19.2787 5.71387 18.843C4.57715 18.1223 3.16452 17.075 2.02943 15.751C0.868459 14.3975 0 12.7591 0 10.8874V6.33289C0 5.49627 0.234914 4.71724 0.663091 4.06096C1.09049 3.4047 1.70887 2.87423 2.47579 2.53624L6.26033 0.865263C6.81203 0.62125 7.37356 0.5 7.93661 0.5C8.49965 0.5 9.06045 0.622008 9.61288 0.865263L13.3974 2.53624C14.1439 2.86588 14.7494 3.37589 15.1753 4.0079C15.6004 4.63916 15.8452 5.39166 15.8687 6.20553L15.867 6.20329ZM10.8191 12.7675C10.6448 12.5932 10.6448 12.312 10.8191 12.1377C10.9934 11.9634 11.2745 11.9634 11.4488 12.1377L12.5408 13.229L14.8242 10.9456C14.9985 10.7713 15.2797 10.7713 15.454 10.9456C15.6282 11.1199 15.6282 11.401 15.454 11.5753L12.8561 14.1732C12.6818 14.3475 12.4006 14.3475 12.2264 14.1732L10.8199 12.7667L10.8191 12.7675ZM13.1356 7.7159C14.4732 7.7159 15.6842 8.25775 16.5609 9.13453C17.4377 10.0113 17.9795 11.2224 17.9795 12.5598C17.9795 13.8972 17.4369 15.1084 16.5609 15.985C15.6841 16.8618 14.4731 17.4037 13.1356 17.4037C11.7981 17.4037 10.5871 16.8618 9.71038 15.985C8.83359 15.1083 8.29175 13.8972 8.29175 12.5598C8.29175 11.2224 8.83435 10.0112 9.71038 9.13453C10.5872 8.25775 11.7982 7.7159 13.1356 7.7159ZM15.9312 9.76435C15.2158 9.04897 14.2276 8.6064 13.1356 8.6064C12.0436 8.6064 11.0554 9.04895 10.3401 9.76435C9.62482 10.4797 9.18215 11.4679 9.18215 12.5599C9.18215 13.6519 9.62471 14.6401 10.3401 15.3554C11.0555 16.0707 12.0436 16.5134 13.1356 16.5134C14.2276 16.5134 15.2159 16.0708 15.9312 15.3554C16.6464 14.64 17.0891 13.6519 17.0891 12.5599C17.0891 11.4679 16.6466 10.4796 15.9312 9.76435Z" fill="currentColor"/>
-</svg>

package/src/assets/icons/expiringSoon_license_icon.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.867 6.20329C15.873 6.44806 15.6805 6.65267 15.4358 6.65874C15.191 6.6648 14.9864 6.47232 14.9803 6.22754C14.9614 5.5887 14.7704 4.99913 14.4362 4.50352C14.1035 4.01018 13.6268 3.6093 13.0373 3.34938L9.25273 1.6784C8.81623 1.48592 8.37519 1.38891 7.93489 1.38891C7.49459 1.38891 7.05355 1.48516 6.61705 1.6784L2.8325 3.34938C2.22626 3.61688 1.73974 4.03216 1.4063 4.54368C1.07285 5.0552 0.890218 5.66903 0.890218 6.33212V10.8867C0.890218 12.5144 1.66622 13.9633 2.70367 15.1729C3.76613 16.4127 5.10752 17.4047 6.18965 18.0912C6.73527 18.4368 7.33242 18.6111 7.92579 18.6126C8.52294 18.6141 9.12087 18.4436 9.66801 18.1018C9.87489 17.9722 10.1485 18.0351 10.2788 18.2428C10.4084 18.4497 10.3455 18.7232 10.1378 18.8536C9.44672 19.2863 8.68663 19.5023 7.92663 19.5C7.16276 19.4977 6.40191 19.2787 5.71387 18.843C4.57715 18.1223 3.16452 17.075 2.02943 15.751C0.868459 14.3975 0 12.7591 0 10.8874V6.33289C0 5.49627 0.234914 4.71724 0.663091 4.06096C1.09049 3.4047 1.70887 2.87423 2.47579 2.53624L6.26033 0.865263C6.81203 0.62125 7.37356 0.5 7.93661 0.5C8.49965 0.5 9.06045 0.622008 9.61288 0.865263L13.3974 2.53624C14.1439 2.86588 14.7494 3.37589 15.1753 4.0079C15.6004 4.63916 15.8452 5.39166 15.8687 6.20553L15.867 6.20329ZM10.8191 12.7675C10.6448 12.5932 10.6448 12.312 10.8191 12.1377C10.9934 11.9634 11.2745 11.9634 11.4488 12.1377L12.5408 13.229L14.8242 10.9456C14.9985 10.7713 15.2797 10.7713 15.454 10.9456C15.6282 11.1199 15.6282 11.401 15.454 11.5753L12.8561 14.1732C12.6818 14.3475 12.4006 14.3475 12.2264 14.1732L10.8199 12.7667L10.8191 12.7675ZM13.1356 7.7159C14.4732 7.7159 15.6842 8.25775 16.5609 9.13453C17.4377 10.0113 17.9795 11.2224 17.9795 12.5598C17.9795 13.8972 17.4369 15.1084 16.5609 15.985C15.6841 16.8618 14.4731 17.4037 13.1356 17.4037C11.7981 17.4037 10.5871 16.8618 9.71038 15.985C8.83359 15.1083 8.29175 13.8972 8.29175 12.5598C8.29175 11.2224 8.83435 10.0112 9.71038 9.13453C10.5872 8.25775 11.7982 7.7159 13.1356 7.7159ZM15.9312 9.76435C15.2158 9.04897 14.2276 8.6064 13.1356 8.6064C12.0436 8.6064 11.0554 9.04895 10.3401 9.76435C9.62482 10.4797 9.18215 11.4679 9.18215 12.5599C9.18215 13.6519 9.62471 14.6401 10.3401 15.3554C11.0555 16.0707 12.0436 16.5134 13.1356 16.5134C14.2276 16.5134 15.2159 16.0708 15.9312 15.3554C16.6464 14.64 17.0891 13.6519 17.0891 12.5599C17.0891 11.4679 16.6466 10.4796 15.9312 9.76435Z" fill="currentColor"/>
-</svg>

package/src/components/AddButton/AddButton.stories.tsx

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-
-const meta: Meta<typeof AddButton> = {
-  title: 'Components/AddButton',
-  component: AddButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof AddButton>;
-
-export const PrimaryAddButton: Story = {
-  render: () => {
-    const name = 'Project';
-    const onClick = () => {};
-
-    return <AddButton name={name} onClick={onClick} />;
-  },
-};
-
-export default meta;

package/src/components/AddButton/index.ts

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