pixel-react 1.6.7 → 1.6.8

package/src/components/Tabs/Tabs.scss

@@ -9,7 +9,7 @@
       display: flex;
       gap: 8px;
       border-radius: 8px 8px 0 0;
-      padding: 7px 8px 0;
+      padding: 6px 8px 0;
 
       .ff-tab-button {
         &--default {
@@ -18,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;
@@ -57,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);
           }
@@ -67,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

@@ -91,9 +91,11 @@ 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';
@@ -195,6 +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);
+}