pixel-react 1.6.6 → 1.6.8

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,193 +1,204 @@
-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';
-// 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 useFileDropzone from './hooks/useFileDropzone';
-import PopUpModal from './components/PopUpModal/PopUpModal';
-import AddVariables from './components/AddVariables/AddVariables';
-import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
-
-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,
-  PopUpModal,
-  CreateVariableSlider,
-  AddVariables,
-
-  // utils exports
-  checkEmpty,
-  getExtension,
-  getExtensionWithPeriod,
-  findAndInsert,
-  ffid,
-  compareArrays,
-  compareObjects,
-  debounce,
-  throttle,
-  getEncryptedData,
-  truncateText,
-  getSequentialPayload,
-  saveFileFromBlob,
-  useFileDropzone,
-  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';
+
+// 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 AddVariables from './components/AddVariables/AddVariables';
+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,
+  AddVariables,
+  PhoneInputField,
+
+  TableWithAccordion,
+  // 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

@@ -0,0 +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>
+  );
+};

package/src/utils/FormatString/FormatString.tsx

@@ -0,0 +1,41 @@
+function formatCamelCaseString(
+  input: string,
+  removeSections: string[] = []
+): string {
+  // Removed specified sections from the string
+  const processedString = removeSections.reduce(
+    (str, section) => str.replace(new RegExp(section + '$', 'i'), ''),
+    input
+  );
+
+  // Add spaces before capital letters and capitalized the first letter
+  const formatted = processedString
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .replace(/^./, (str) => str.toUpperCase());
+
+  return formatted;
+}
+function formatSnakeOrUppercaseString(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/_/g, ' ')
+    .replace(/^./, (str) => str.toUpperCase());
+}
+
+export default function formatString(
+  input: string,
+  removeSections: string[] = []
+): string {
+  if (input.toUpperCase() === input) {
+    // Handled completely uppercase strings
+    input = input.toLowerCase();
+  }
+
+  if (input.includes('_')) {
+    // Handled snake case or uppercase strings
+    return formatSnakeOrUppercaseString(input);
+  }
+  // Handled camel case strings
+  return formatCamelCaseString(input, removeSections);
+}

package/src/utils/TableCell/TableCell.ts

@@ -1,16 +1,16 @@
-export const prepareData = (dataObj: any, columnObj: any) => {
-  let cellData = dataObj[columnObj.accessor];
-  if (columnObj.cell) {
-    return columnObj.cell({
-      value: cellData,
-      row: dataObj,
-      column: columnObj.accessor,
-    });
-  } else if (columnObj.accessor) {
-    return cellData;
-  } else if (cellData && typeof cellData !== 'object') {
-    return cellData;
-  } else {
-    return '--';
-  }
-};
+export const prepareData = (dataObj: any, columnObj: any) => {
+  let cellData = dataObj[columnObj.accessor];
+  if (columnObj.cell) {
+    return columnObj.cell({
+      value: cellData,
+      row: dataObj,
+      column: columnObj.accessor,
+    });
+  } else if (columnObj.accessor) {
+    return cellData;
+  } else if (cellData && typeof cellData !== 'object') {
+    return cellData;
+  } else {
+    return '--';
+  }
+};

package/src/utils/capitalize/capitalize.stories.tsx

@@ -1,44 +1,44 @@
-import React from 'react';
-import { capitalize } from './capitalize';
-
-export default {
-  title: 'Utils/Capitalize', // Organize under the "Utils" category
-  component: capitalize,
-};
-
-export const Default = () => {
-  const examples = [
-    { input: 'hello', output: capitalize('hello') },
-    { input: 'world', output: capitalize('world') },
-    { input: '', output: capitalize('') },
-    { input: 'capitalize', output: capitalize('capitalize') },
-  ];
-
-  return (
-    <div>
-      <h3>Capitalize 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' }}>
-              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.output}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};
+import React from 'react';
+import { capitalize } from './capitalize';
+
+export default {
+  title: 'Utils/Capitalize', // Organize under the "Utils" category
+  component: capitalize,
+};
+
+export const Default = () => {
+  const examples = [
+    { input: 'hello', output: capitalize('hello') },
+    { input: 'world', output: capitalize('world') },
+    { input: '', output: capitalize('') },
+    { input: 'capitalize', output: capitalize('capitalize') },
+  ];
+
+  return (
+    <div>
+      <h3>Capitalize 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' }}>
+              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.output}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};