pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/TableWithAccordion/types.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from "react";
+
+export interface ColumnProps {
+    /**
+     * column name
+     */
+    header: string;
+    /**
+     * data key for particular column
+     */
+    accessor: string;
+    /**
+     * className for a column
+     */
+    className?: string;
+    /**
+     * width of a column
+     */
+    width?: number;
+    /**
+     * data for the column
+     */
+    cell?: (e: any) => JSX.Element | string | ReactNode;
+  }
+
+export interface DataProps {
+    /**
+     * data for each row
+     */
+    [key: string]: any;
+  }
+
+export interface TableProps {
+    /**
+     * Column details for table
+     */
+    tableMeta: Array<ColumnProps>;
+    /**
+     * Data for table
+     */
+    tableData: Array<DataProps>;
+    /**
+     * Table type
+     */
+    accordionType: 'row' | 'column';
+    /**
+     *  Specific sentence to be displayed data not found
+     */
+    noDataContent?: string | ReactNode;
+    /**
+     * withFixedHeader prop to have non-scrollable fixed accordion table header
+     */
+    withFixedHeader?: boolean;
+    /**
+     *  Height of the table in string
+     */
+    height?: string;
+    /**
+     * Header type to have different background color
+     */
+    headerType: 'default' | 'primary' | 'secondary';
+    /**
+     * Accordion collapse and expand Icon width
+     */
+    TableAccordionStateIconWidth:number,
+    /**
+     * Accordion collapse and expand Icon height
+     */
+    TableAccordionStateIconHeight:number,
+  }

package/src/components/Tabs/Tabs.scss

@@ -8,9 +8,8 @@
     &--default {
       display: flex;
       gap: 8px;
-      border: 1px solid var(--tabs-border-color);
       border-radius: 8px 8px 0 0;
-      padding: 7px 8px 0;
+      padding: 6px 8px 0;
 
       .ff-tab-button {
         &--default {
@@ -19,21 +18,64 @@
           padding: 0 4px;
           display: flex;
           flex-direction: column;
+          gap: 4px;
           cursor: pointer;
 
-          .ff-tab-label {
-            padding-bottom: 4px;
-          }
+          .label-count-section {
+            display: flex;
+            align-items: center;
+            gap: 5px;
 
+            .tab-count {
+              background-color: var(--input-default-label-color);
+              color: var(--tab-bg-color);
+              height: 12px;
+              border-radius: 4px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 8px;
+              font-weight: 600;
+              padding: 0 2px;
+              &--active {
+                background-color: var(--tabs-label-active-color);
+              }
+            }
+          }
           .ff-tab-bar {
             width: 100%;
             border-radius: 2px 2px 0 0;
+            border-color: var(--input-default-label-color);
 
             &--active {
               border-top: 2px solid var(--tabs-label-active-color);
             }
           }
 
+          &:hover {
+            .ff-tab-bar {
+              border-top: 2px solid var(--input-hover-border-color);
+
+              &--active {
+                border-top: 2px solid var(--tabs-label-active-color);
+              }
+            }
+
+            .ff-tab-label {
+              color: var(--input-hover-border-color) !important;
+
+              &--active {
+                color: var(--tabs-label-active-color) !important;
+              }
+            }
+            .tab-count {
+              background-color: var(--input-hover-border-color);
+              &--active {
+                background-color: var(--tabs-label-active-color);
+              }
+            }
+          }
+
           &.disabled {
             opacity: 0.5;
             cursor: not-allowed;
@@ -58,6 +100,16 @@
           border-radius: 4px;
           cursor: pointer;
 
+          &:hover {
+            .ff-tab-label {
+              color: var(--input-hover-border-color) !important;
+
+              &--active {
+                color: var(--tabs-label-active-color) !important;
+              }
+            }
+          }
+
           &.active {
             background-color: var(--tab-bg-color);
           }
@@ -68,6 +120,7 @@
         }
       }
     }
+
     &--no-border {
       border: none;
     }

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Tabs from './Tabs';
 import Typography from '../Typography';
@@ -40,14 +40,15 @@ const TabContentFour = () => (
 );
 
 const tabsData = [
-  { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
-  { id: 'tab-2', label: 'Tab--2', component: <TabContentTwo /> },
-  { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
+  { id: 'tab-1', label: 'Tab--1', component: <TabContentOne />, count: '02' },
+  { id: 'tab-2', label: 'Tab--2', component: <TabContentTwo />, count: 35 },
+  { id: 'tab-3', label: 'Tab--3', component: <TabContentThree />, count: 205 },
 ];
 
 export const DefaultTabs: Story = {
   render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
+    const [activeTabIdDefault, setActiveTabIdDefault] =
+      useState<string>('tab-1');
 
     return (
       <Tabs
@@ -60,13 +61,30 @@ export const DefaultTabs: Story = {
 };
 export const CapsuleTabs: Story = {
   render: () => {
-    const [activeTabIdCapsule, setActiveTabIdCapsule] = useState<string>('tab-1');
+    const [activeTabIdCapsule, setActiveTabIdCapsule] =
+      useState<string>('tab-1');
 
     const tabsDataForCapsule = [
-      { id: 'tab-1', label: 'Loremipsum_1', component: <TabContentOne /> },
-      { id: 'tab-2', label: 'Loremipsum_2', component: <TabContentTwo /> },
-      { id: 'tab-3', label: 'Loremipsum_3', component: <TabContentThree /> },
-      { id: 'tab-4', label: 'Loremipsum_4', component: <TabContentFour /> },
+      {
+        id: 'tab-1',
+        label: 'Loremipsum_1',
+        component: <TabContentOne />,
+      },
+      {
+        id: 'tab-2',
+        label: 'Loremipsum_2',
+        component: <TabContentTwo />,
+      },
+      {
+        id: 'tab-3',
+        label: 'Loremipsum_3',
+        component: <TabContentThree />,
+      },
+      {
+        id: 'tab-4',
+        label: 'Loremipsum_4',
+        component: <TabContentFour />,
+      },
       { id: 'tab-5', label: 'Loremipsum_5', component: <TabContentFour /> },
     ];
 
@@ -108,7 +126,8 @@ export const TabsWithDisabledTab: Story = {
 
 export const WithoutBorder: Story = {
   render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
+    const [activeTabIdDefault, setActiveTabIdDefault] =
+      useState<string>('tab-1');
 
     return (
       <div style={{ display: 'flex', gap: '10px' }}>
@@ -131,4 +150,4 @@ export const WithoutBorder: Story = {
   },
 };
 
-export default meta;
+export default meta;

package/src/components/Tabs/Tabs.tsx

@@ -28,27 +28,36 @@ const Tabs = ({
               active: activeTabId === tab.id,
             })}
           >
-            <Typography
-              children={tab.label}
-              lineHeight="18px"
-              fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
-              color={
-                activeTabId === tab.id
-                  ? 'var(--tabs-label-active-color)'
-                  : 'var(--tabs-label-default-color)'
-              }
-              className={classNames('ff-tab-label', {
-                'ff-tab-label--active': activeTabId === tab.id,
-              })}
-            />
+            <div className="label-count-section">
+              <Typography
+                children={tab.label}
+                lineHeight="18px"
+                fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
+                color={
+                  activeTabId === tab.id
+                    ? 'var(--tabs-label-active-color)'
+                    : 'var(--tabs-label-default-color)'
+                }
+                className={classNames('ff-tab-label', {
+                  'ff-tab-label--active': activeTabId === tab.id,
+                })}
+              />
+              {variant === 'default' && tab.count && (
+                <span
+                  className={classNames('tab-count', {
+                    'tab-count--active': activeTabId === tab.id,
+                  })}
+                >
+                  {tab.count}
+                </span>
+              )}
+            </div>
 
-            <Typography
-              children=""
-              color=""
+            <div
               className={classNames('ff-tab-bar', {
                 'ff-tab-bar--active': activeTabId === tab.id,
               })}
-            />
+            ></div>
           </button>
         ))}
       </div>
@@ -59,4 +68,4 @@ const Tabs = ({
   );
 };
 
-export default Tabs;
+export default Tabs;

package/src/components/Tabs/types.ts

@@ -26,6 +26,7 @@ export interface TabsProps {
     label: string;
     component?: JSX.Element;
     disabled?: boolean;
+    count?: number | string;
   }[];
   /**
    * Defines the styling variant of the tabs.
@@ -45,4 +46,3 @@ export interface TabsProps {
    */
   noBorder?: boolean;
 }
-

package/src/components/TextArea/Textarea.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Textarea from './Textarea';
-import { ChangeEvent, useState } from 'react';
+import React ,{ ChangeEvent, useState } from 'react';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 const meta: Meta<typeof Textarea> = {
   title: 'Components/Textarea',

package/src/hooks/useFileDropzone.tsx

@@ -21,6 +21,7 @@ const useFileDropzone = (options: DropzoneOptions): DropzoneState => {
     invalidFileMessage,
     fileExistMessage,
     validateMIMEType = false,
+    isApiResponseError,
   } = options;
 
   const [files, setFiles] = useState<FileState>({ accepted: [], rejected: [] });
@@ -56,7 +57,7 @@ const useFileDropzone = (options: DropzoneOptions): DropzoneState => {
       const extensionWithPeriod = getExtensionWithPeriod(file).toLowerCase();
 
       if (validateMIMEType) {
-        if (!validateFileMIMEType(file, extensionWithPeriod)) {
+        if (!validateFileMIMEType(file, extensionWithPeriod) || isApiResponseError ) {
           errors.push({
             message: invalidFileMessage
               ? invalidFileMessage

package/src/index.ts

@@ -54,7 +54,7 @@ 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/Avatar';
+import Avatar from './components/Avatar';
 
 import LabelEditTextField from './components/LabelEditTextField';
 import EditTextField from './components/EditTextField';
@@ -68,6 +68,9 @@ 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 {
@@ -88,8 +91,14 @@ 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,
@@ -167,8 +176,13 @@ export {
   VariableDropdown,
   DownloadClient,
   FieldSet,
+  Comments,
   PopUpModal,
+  CreateVariableSlider,
+  AddVariables,
+  PhoneInputField,
 
+  TableWithAccordion,
   // utils exports
   checkEmpty,
   getExtension,
@@ -183,5 +197,8 @@ export {
   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/checkDuplicates/CheckDuplicates.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { hasDuplicateFile } from './checkDuplicates';
+
+export default {
+  title: 'Utils/HasDuplicateFile',
+  argTypes: {
+    array: {
+      control: 'object',
+      description: 'Array of objects to check for duplicates.',
+    },
+    property: {
+      control: 'text',
+      description: 'Optional property to check for duplicates.',
+    },
+  },
+} satisfies Meta;
+
+export const Default: StoryObj = {
+  args: {
+    array: [
+      { id: 1, name: 'file1' },
+      { id: 2, name: 'file2' },
+      { id: 1, name: 'file1' },
+    ],
+    property: 'id',
+  },
+  render: (args) => {
+    const result = hasDuplicateFile(args.array, args.property);
+    return (
+      <div>
+        <h3>
+          Duplicate Check Result:{' '}
+          {result ? 'Duplicates Found' : 'No Duplicates'}
+        </h3>
+        <pre>{JSON.stringify(args.array, null, 2)}</pre>
+      </div>
+    );
+  },
+};

package/src/utils/checkDuplicates/checkDuplicates.ts

@@ -0,0 +1,13 @@
+// Will be used to find duplicate key-value pair in an array of objects.
+
+export const hasDuplicateFile = (array: any[], property: string): boolean => {
+  const seen = new Set();
+  for (const obj of array) {
+    const key = property ? obj[property] : JSON.stringify(obj);
+    if (seen.has(key)) {
+      return true;
+    }
+    seen.add(key);
+  }
+  return false;
+};