pixel-react 1.7.1 → 1.7.2

package/src/hooks/usePortalPosition.tsx

@@ -1,53 +1,53 @@
-import { RefObject, useEffect } from 'react';
-
-export interface PortalPosition {
-  positionX: number;
-  positionY: number;
-  width: number;
-  fromBottom: number;
-}
-
-const portalPosition: PortalPosition = {
-  positionX: 0,
-  positionY: 0,
-  width: 0,
-  fromBottom: 0,
-};
-
-const calculatePosition = (portalRef: RefObject<HTMLElement>) => {
-  if (!portalRef?.current) {
-    return portalPosition;
-  }
-  const dropdownRect = portalRef.current.getBoundingClientRect();
-  const newPosition = {
-    positionX: dropdownRect.left + window.scrollX,
-    positionY: dropdownRect.top + window.scrollY,
-    width: portalRef.current.offsetWidth,
-    fromBottom: window.innerHeight - (dropdownRect.top + dropdownRect.height),
-  };
-  return newPosition;
-};
-
-const usePortalPosition = (
-  portalRef: RefObject<HTMLElement>,
-  isPortalOpen: Boolean
-) => {
-  useEffect(() => {
-    const handleUpdate = () => {
-      calculatePosition(portalRef);
-    };
-
-    if (isPortalOpen) {
-      window.addEventListener('resize', handleUpdate);
-      window.addEventListener('scroll', handleUpdate);
-    }
-    return () => {
-      window.removeEventListener('resize', handleUpdate);
-      window.removeEventListener('scroll', handleUpdate);
-    };
-  }, [isPortalOpen]);
-
-  return calculatePosition;
-};
-
-export default usePortalPosition;
+import { RefObject, useEffect } from 'react';
+
+export interface PortalPosition {
+  positionX: number;
+  positionY: number;
+  width: number;
+  fromBottom: number;
+}
+
+const portalPosition: PortalPosition = {
+  positionX: 0,
+  positionY: 0,
+  width: 0,
+  fromBottom: 0,
+};
+
+const calculatePosition = (portalRef: RefObject<HTMLElement>) => {
+  if (!portalRef?.current) {
+    return portalPosition;
+  }
+  const dropdownRect = portalRef.current.getBoundingClientRect();
+  const newPosition = {
+    positionX: dropdownRect.left + window.scrollX,
+    positionY: dropdownRect.top + window.scrollY,
+    width: portalRef.current.offsetWidth,
+    fromBottom: window.innerHeight - (dropdownRect.top + dropdownRect.height),
+  };
+  return newPosition;
+};
+
+const usePortalPosition = (
+  portalRef: RefObject<HTMLElement>,
+  isPortalOpen: Boolean
+) => {
+  useEffect(() => {
+    const handleUpdate = () => {
+      calculatePosition(portalRef);
+    };
+
+    if (isPortalOpen) {
+      window.addEventListener('resize', handleUpdate);
+      window.addEventListener('scroll', handleUpdate);
+    }
+    return () => {
+      window.removeEventListener('resize', handleUpdate);
+      window.removeEventListener('scroll', handleUpdate);
+    };
+  }, [isPortalOpen]);
+
+  return calculatePosition;
+};
+
+export default usePortalPosition;

package/src/hooks/useTheme.tsx

@@ -1,13 +1,13 @@
-import { useContext } from 'react';
-import { ThemeContextType } from '../components/ThemeProvider/types';
-import { ThemeContext } from '../components/ThemeProvider/ThemeProvider';
-
-const useTheme = (): ThemeContextType => {
-  const context = useContext(ThemeContext);
-  if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};
-
-export default useTheme;
+import { useContext } from 'react';
+import { ThemeContextType } from '../components/ThemeProvider/types';
+import { ThemeContext } from '../components/ThemeProvider/ThemeProvider';
+
+const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+export default useTheme;

package/src/index.ts

@@ -1,205 +1,205 @@
-import Button from './components/Button';
-import Drawer from './components/Drawer';
-import Icon from './components/Icon';
-import Accordion from './components/Accordion';
-import MultiSelect from './components/MultiSelect';
-import Toaster from './components/Toast/Toast';
-import { Container, Row, Col } from './components/GridLayout/GridLayout';
-import Toggle from './components/Toggle';
-import Chip from './components/Chip';
-import Tooltip from './components/Tooltip';
-import Input from './components/Input';
-import RadialChart from './components/Charts/RadialChart';
-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';
-import Dropzone from './components/FileDropzone/Dropzone';
-import FilePreview from './components/FileDropzone/FilePreview';
-import LazyLoad from './components/LazyLoad/LazyLoad';
-import ThemeProvider from './components/ThemeProvider';
-import Typography from './components/Typography';
-import useTheme from './hooks/useTheme';
-import Form from './components/Form/Forms';
-import InputWithDropdown from './components/InputWithDropdown';
-import RadioButton from './components/RadioButton';
-import RadioGroup from './components/RadioGroup';
-import MiniModal from './components/MiniModal';
-import TableTree from './components/TableTree';
-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 IconButton from './components/IconButton';
-import Modal from './components/Modal';
-import DragAndDrop from './components/DragAndDrop/DragAndDrop';
-import VariableInput from './components/VariableInput';
-import AllProjectsDropdown from './components/AllProjectsDropdown';
-import PieChart from './components/Charts/PieChart';
-import AppHeader from './components/AppHeader';
-import Paper from './components/Paper';
-import DashboardDonutChart from './components/Charts/DashboardDonutChart';
-import Recaptcha from './components/FF_Captcha/Recaptcha';
-import NLPInput from './components/NLPInput';
-import IconRadioGroup from './components/IconRadioGroup';
-import MachineInputField from './components/MachineInputField';
-import SequentialConnectingBranch from './components/SequentialConnectingBranch';
-import AttachmentButton from './components/AttachmentButton';
-import { Toastify, toast } from './components/Toastify/Toastify';
-import ToggleSwitch from './components/ToggleSwitch/ToggleSwitch';
-import Avatar from './components/Avatar';
-
-import LabelEditTextField from './components/LabelEditTextField';
-import EditTextField from './components/EditTextField';
-import Excel from './components/Excel';
-import ModuleChip from './components/ModulesChip/ModuleChip';
-import IconRadialChart from './components/Charts/IconRadialChart';
-import AttachImage from './components/AttachImage';
-import StatusCard from './components/StatusCard';
-import VariableDropdown from './components/Editor/VariableDropdown';
-
-import LineChart from './components/Charts/LineChart';
-import DownloadClient from './components/DownloadClient/DownloadClient';
-import FieldSet from './components/FieldSet';
-import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
-import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
-import ProgressBar from './components/ProgressBar';
-
-// Utils imports
-import { checkEmpty } from './utils/checkEmpty/checkEmpty';
-import {
-  getExtension,
-  getExtensionWithPeriod,
-} from './utils/getExtension/getExtension';
-import { findAndInsert } from './utils/findAndInsert/findAndInsert';
-import { ffid } from './utils/ffID/ffid';
-import { debounce } from './utils/debounce/debounce';
-import { compareArrays } from './utils/compareArrays/compareArrays';
-import { compareObjects } from './utils/compareObjects/compareObjects';
-import { getEncryptedData } from './utils/getEncryptedData/getEncryptedData';
-import { throttle } from './utils/throttle/throttle';
-import { truncateText } from './utils/truncateText/truncateText';
-import BarChart from './components/Charts/BarChart';
-import MultiRadialChart from './components/Charts/MultiRadialChart';
-import Editor from './components/Editor/Editor';
-import { getSequentialPayload } from './utils/getSequentialPayload/getSequentialPayload';
-import ConnectingBranch from './components/ConnectingBranch/ConnectingBranch';
-import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
-import { capitalize } from './utils/capitalize/capitalize';
-import Comments from './components/Comment/Comments';
-import useFileDropzone from './hooks/useFileDropzone';
-import PopUpModal from './components/PopUpModal/PopUpModal';
-import FormatString from './utils/FormatString/FormatString';
-import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
-import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
-import PhoneInputField from './components/PhoneInput';
-
-export {
-  Button,
-  Tooltip,
-  Icon,
-  Accordion,
-  MultiSelect,
-  Toaster,
-  Toggle,
-  Chip,
-  Drawer,
-  Input,
-  RadialChart,
-  ExpandableMenu,
-  Select,
-  TextArea,
-  MenuOption,
-  AddResourceButton,
-  DonutChart,
-  FileDropzone,
-  Dropzone,
-  FilePreview,
-  LazyLoad,
-  ThemeProvider,
-  Typography,
-  useTheme,
-  InputWithDropdown,
-  Table,
-  RadioButton,
-  RadioGroup,
-  Form,
-  MiniModal,
-  Container,
-  Row,
-  Col,
-  HighlightText,
-  TableTree,
-  Tabs,
-  Checkbox,
-  Search,
-  DatePicker,
-  StateDropdown,
-  StatusButton,
-  IconButton,
-  Modal,
-  PieChart,
-  DashboardDonutChart,
-  DragAndDrop,
-  AllProjectsDropdown,
-  AppHeader,
-  VariableInput,
-  Paper,
-  Recaptcha,
-  NLPInput,
-  MachineInputField,
-  SequentialConnectingBranch,
-  Editor,
-  AttachmentButton,
-  LabelEditTextField,
-  Excel,
-  IconRadioGroup,
-  Toastify,
-  toast,
-  ModuleChip,
-  IconRadialChart,
-  LineChart,
-  BarChart,
-  MultiRadialChart,
-  ConnectingBranch,
-  StatusCard,
-  EditTextField,
-  AttachImage,
-  ToggleSwitch,
-  Avatar,
-  VariableDropdown,
-  DownloadClient,
-  FieldSet,
-  Comments,
-  PopUpModal,
-  CreateVariableSlider,
-  ConditionalDropdown,
-  PhoneInputField,
-  TableWithAccordion,
-  ProgressBar,
-  // utils exports
-  checkEmpty,
-  getExtension,
-  getExtensionWithPeriod,
-  findAndInsert,
-  ffid,
-  compareArrays,
-  compareObjects,
-  debounce,
-  throttle,
-  getEncryptedData,
-  truncateText,
-  getSequentialPayload,
-  saveFileFromBlob,
-  capitalize,
-  useFileDropzone,
-  FormatString,
-  hasDuplicateFile,
-};
+import Button from './components/Button';
+import Drawer from './components/Drawer';
+import Icon from './components/Icon';
+import Accordion from './components/Accordion';
+import MultiSelect from './components/MultiSelect';
+import Toaster from './components/Toast/Toast';
+import { Container, Row, Col } from './components/GridLayout/GridLayout';
+import Toggle from './components/Toggle';
+import Chip from './components/Chip';
+import Tooltip from './components/Tooltip';
+import Input from './components/Input';
+import RadialChart from './components/Charts/RadialChart';
+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';
+import Dropzone from './components/FileDropzone/Dropzone';
+import FilePreview from './components/FileDropzone/FilePreview';
+import LazyLoad from './components/LazyLoad/LazyLoad';
+import ThemeProvider from './components/ThemeProvider';
+import Typography from './components/Typography';
+import useTheme from './hooks/useTheme';
+import Form from './components/Form/Forms';
+import InputWithDropdown from './components/InputWithDropdown';
+import RadioButton from './components/RadioButton';
+import RadioGroup from './components/RadioGroup';
+import MiniModal from './components/MiniModal';
+import TableTree from './components/TableTree';
+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 IconButton from './components/IconButton';
+import Modal from './components/Modal';
+import DragAndDrop from './components/DragAndDrop/DragAndDrop';
+import VariableInput from './components/VariableInput';
+import AllProjectsDropdown from './components/AllProjectsDropdown';
+import PieChart from './components/Charts/PieChart';
+import AppHeader from './components/AppHeader';
+import Paper from './components/Paper';
+import DashboardDonutChart from './components/Charts/DashboardDonutChart';
+import Recaptcha from './components/FF_Captcha/Recaptcha';
+import NLPInput from './components/NLPInput';
+import IconRadioGroup from './components/IconRadioGroup';
+import MachineInputField from './components/MachineInputField';
+import SequentialConnectingBranch from './components/SequentialConnectingBranch';
+import AttachmentButton from './components/AttachmentButton';
+import { Toastify, toast } from './components/Toastify/Toastify';
+import ToggleSwitch from './components/ToggleSwitch/ToggleSwitch';
+import Avatar from './components/Avatar';
+
+import LabelEditTextField from './components/LabelEditTextField';
+import EditTextField from './components/EditTextField';
+import Excel from './components/Excel';
+import ModuleChip from './components/ModulesChip/ModuleChip';
+import IconRadialChart from './components/Charts/IconRadialChart';
+import AttachImage from './components/AttachImage';
+import StatusCard from './components/StatusCard';
+import VariableDropdown from './components/Editor/VariableDropdown';
+
+import LineChart from './components/Charts/LineChart';
+import DownloadClient from './components/DownloadClient/DownloadClient';
+import FieldSet from './components/FieldSet';
+import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
+import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
+import ProgressBar from './components/ProgressBar';
+
+// Utils imports
+import { checkEmpty } from './utils/checkEmpty/checkEmpty';
+import {
+  getExtension,
+  getExtensionWithPeriod,
+} from './utils/getExtension/getExtension';
+import { findAndInsert } from './utils/findAndInsert/findAndInsert';
+import { ffid } from './utils/ffID/ffid';
+import { debounce } from './utils/debounce/debounce';
+import { compareArrays } from './utils/compareArrays/compareArrays';
+import { compareObjects } from './utils/compareObjects/compareObjects';
+import { getEncryptedData } from './utils/getEncryptedData/getEncryptedData';
+import { throttle } from './utils/throttle/throttle';
+import { truncateText } from './utils/truncateText/truncateText';
+import BarChart from './components/Charts/BarChart';
+import MultiRadialChart from './components/Charts/MultiRadialChart';
+import Editor from './components/Editor/Editor';
+import { getSequentialPayload } from './utils/getSequentialPayload/getSequentialPayload';
+import ConnectingBranch from './components/ConnectingBranch/ConnectingBranch';
+import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
+import { capitalize } from './utils/capitalize/capitalize';
+import Comments from './components/Comment/Comments';
+import useFileDropzone from './hooks/useFileDropzone';
+import PopUpModal from './components/PopUpModal/PopUpModal';
+import FormatString from './utils/FormatString/FormatString';
+import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
+import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
+import PhoneInputField from './components/PhoneInput';
+
+export {
+  Button,
+  Tooltip,
+  Icon,
+  Accordion,
+  MultiSelect,
+  Toaster,
+  Toggle,
+  Chip,
+  Drawer,
+  Input,
+  RadialChart,
+  ExpandableMenu,
+  Select,
+  TextArea,
+  MenuOption,
+  AddResourceButton,
+  DonutChart,
+  FileDropzone,
+  Dropzone,
+  FilePreview,
+  LazyLoad,
+  ThemeProvider,
+  Typography,
+  useTheme,
+  InputWithDropdown,
+  Table,
+  RadioButton,
+  RadioGroup,
+  Form,
+  MiniModal,
+  Container,
+  Row,
+  Col,
+  HighlightText,
+  TableTree,
+  Tabs,
+  Checkbox,
+  Search,
+  DatePicker,
+  StateDropdown,
+  StatusButton,
+  IconButton,
+  Modal,
+  PieChart,
+  DashboardDonutChart,
+  DragAndDrop,
+  AllProjectsDropdown,
+  AppHeader,
+  VariableInput,
+  Paper,
+  Recaptcha,
+  NLPInput,
+  MachineInputField,
+  SequentialConnectingBranch,
+  Editor,
+  AttachmentButton,
+  LabelEditTextField,
+  Excel,
+  IconRadioGroup,
+  Toastify,
+  toast,
+  ModuleChip,
+  IconRadialChart,
+  LineChart,
+  BarChart,
+  MultiRadialChart,
+  ConnectingBranch,
+  StatusCard,
+  EditTextField,
+  AttachImage,
+  ToggleSwitch,
+  Avatar,
+  VariableDropdown,
+  DownloadClient,
+  FieldSet,
+  Comments,
+  PopUpModal,
+  CreateVariableSlider,
+  ConditionalDropdown,
+  PhoneInputField,
+  TableWithAccordion,
+  ProgressBar,
+  // utils exports
+  checkEmpty,
+  getExtension,
+  getExtensionWithPeriod,
+  findAndInsert,
+  ffid,
+  compareArrays,
+  compareObjects,
+  debounce,
+  throttle,
+  getEncryptedData,
+  truncateText,
+  getSequentialPayload,
+  saveFileFromBlob,
+  capitalize,
+  useFileDropzone,
+  FormatString,
+  hasDuplicateFile,
+};

package/src/utils/FormatString/FormatString.stories.tsx

@@ -1,58 +1,58 @@
-import React from 'react';
-import formatString from './FormatString';
-
-export default {
-  title: 'Utils/FormatString',
-  component: formatString,
-};
-
-export const Default = () => {
-  const examples = [
-    {
-      input: 'webserviceCount',
-      output: formatString('webserviceCount', ['count']),
-      removeSections: 'count',
-    },
-    { input: 'PARTIAL_PUBLIC', output: formatString('PARTIAL_PUBLIC') },
-    { input: 'assignedMemory', output: formatString('assignedMemory') },
-    {
-      input: 'webAndMobileCount',
-      output: formatString('webAndMobileCount', ['count']),
-      removeSections: 'count',
-    },
-  ];
-
-  return (
-    <div>
-      <h3>FormatString Function Examples</h3>
-      <table style={{ borderCollapse: 'collapse', width: '100%' }}>
-        <thead>
-          <tr>
-            <th style={{ border: '1px solid black', padding: '8px' }}>Input</th>
-            <th style={{ border: '1px solid black', padding: '8px' }}>
-              Remove Section
-            </th>
-            <th style={{ border: '1px solid black', padding: '8px' }}>
-              Output
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {examples.map((example, index) => (
-            <tr key={index}>
-              <td style={{ border: '1px solid black', padding: '8px' }}>
-                {example.input}
-              </td>
-              <td style={{ border: '1px solid black', padding: '8px' }}>
-                {example?.removeSections}
-              </td>
-              <td style={{ border: '1px solid black', padding: '8px' }}>
-                {example.output}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};
+import React from 'react';
+import formatString from './FormatString';
+
+export default {
+  title: 'Utils/FormatString',
+  component: formatString,
+};
+
+export const Default = () => {
+  const examples = [
+    {
+      input: 'webserviceCount',
+      output: formatString('webserviceCount', ['count']),
+      removeSections: 'count',
+    },
+    { input: 'PARTIAL_PUBLIC', output: formatString('PARTIAL_PUBLIC') },
+    { input: 'assignedMemory', output: formatString('assignedMemory') },
+    {
+      input: 'webAndMobileCount',
+      output: formatString('webAndMobileCount', ['count']),
+      removeSections: 'count',
+    },
+  ];
+
+  return (
+    <div>
+      <h3>FormatString Function Examples</h3>
+      <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+        <thead>
+          <tr>
+            <th style={{ border: '1px solid black', padding: '8px' }}>Input</th>
+            <th style={{ border: '1px solid black', padding: '8px' }}>
+              Remove Section
+            </th>
+            <th style={{ border: '1px solid black', padding: '8px' }}>
+              Output
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {examples.map((example, index) => (
+            <tr key={index}>
+              <td style={{ border: '1px solid black', padding: '8px' }}>
+                {example.input}
+              </td>
+              <td style={{ border: '1px solid black', padding: '8px' }}>
+                {example?.removeSections}
+              </td>
+              <td style={{ border: '1px solid black', padding: '8px' }}>
+                {example.output}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};