pixel-react 1.10.3 → 1.10.5

package/src/components/BrowserTabs/BrowserTabs.stories.tsx

@@ -0,0 +1,366 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import BrowserTabs from './BrowserTabs';
+import Typography from '../Typography';
+
+const meta: Meta<typeof BrowserTabs> = {
+  title: 'Components/BrowserTabs',
+  component: BrowserTabs,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof BrowserTabs>;
+
+const TabContentOne = () => (
+  <div>
+    <Typography as="h1" fontSize={32} fontWeight="bold">
+      Google
+    </Typography>
+    <Typography as="p">Search anything</Typography>
+  </div>
+);
+
+const TabContentTwo = () => (
+  <div>
+    <Typography as="h1" fontSize={32} fontWeight="bold">
+      Flipkart
+    </Typography>
+    <Typography as="p">Shop Now!</Typography>
+  </div>
+);
+
+const TabContentThree = () => (
+  <div>
+    <Typography as="h1" fontSize={32} fontWeight="bold">
+      Fireflink
+    </Typography>
+    <Typography as="p">Automate your scripts</Typography>
+  </div>
+);
+
+const TabContentFour = () => (
+  <div>
+    <Typography as="h1" fontSize={32} fontWeight="bold">
+      Tab--4
+    </Typography>
+    <Typography as="p">This is the content for Tab - 4</Typography>
+  </div>
+);
+
+const tabsData = [
+  {
+    id: 'tab-11',
+    label: 'Google',
+    component: <TabContentOne />,
+    tabIcon: 'manage_apps',
+  },
+  {
+    id: 'tab-2',
+    label: 'gitlab',
+    component: <TabContentTwo />,
+    tabIcon: 'gitlab',
+  },
+  {
+    id: 'tab-3',
+    label: 'Fireflink',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+];
+
+export const DefaultTabs: Story = {
+  render: () => {
+    const [activeTabIdDefault, setActiveTabIdDefault] =
+      useState<string>('tab-11');
+
+    return (
+      <div>
+        <BrowserTabs
+          tabsData={tabsData}
+          activeTabId={activeTabIdDefault}
+          onTabClick={setActiveTabIdDefault}
+        />
+      </div>
+    );
+  },
+};
+
+const multipleData = [
+  {
+    id: 'tab-1',
+    label: 'Google',
+    component: <TabContentOne />,
+    tabIcon: 'manage_apps',
+  },
+  {
+    id: 'tab-2',
+    label: 'Flipkart',
+    component: <TabContentTwo />,
+    tabIcon: 'web_service_icon',
+  },
+  {
+    id: 'tab-3',
+    label: 'Fireflink',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+  {
+    id: 'tab-4',
+    label: 'javascript',
+    component: <TabContentOne />,
+    tabIcon: 'javascript',
+  },
+  {
+    id: 'tab-5',
+    label: 'slack',
+    component: <TabContentTwo />,
+    tabIcon: 'slack',
+  },
+  {
+    id: 'tab-6',
+    label: 'Fireflink',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+  {
+    id: 'tab-7',
+    label: 'Yahoo',
+    component: <TabContentOne />,
+    tabIcon: 'manage_apps',
+  },
+  {
+    id: 'tab-8',
+    label: 'Chrome',
+    component: <TabContentTwo />,
+    tabIcon: 'chrome_icon',
+  },
+  {
+    id: 'tab-9',
+    label: 'jenkins',
+    component: <TabContentThree />,
+    tabIcon: 'jenkins',
+  },
+  {
+    id: 'tab-10',
+    label: 'java',
+    component: <TabContentOne />,
+    tabIcon: 'java',
+  },
+  {
+    id: 'tab-11',
+    label: 'github',
+    component: <TabContentTwo />,
+    tabIcon: 'github',
+  },
+  {
+    id: 'tab-12',
+    label: 'Fireflink',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+  {
+    id: 'tab-13',
+    label: 'Yahoo',
+    component: <TabContentOne />,
+    tabIcon: 'manage_apps',
+  },
+  {
+    id: 'tab-14',
+    label: 'slack',
+    component: <TabContentTwo />,
+    tabIcon: 'slack',
+  },
+  {
+    id: 'tab-15',
+    label: 'jenkins',
+    component: <TabContentThree />,
+    tabIcon: 'jenkins',
+  },
+  {
+    id: 'tab-16',
+    label: 'csharp',
+    component: <TabContentOne />,
+    tabIcon: 'csharp',
+  },
+  {
+    id: 'tab-17',
+    label: 'gitlab',
+    component: <TabContentTwo />,
+    tabIcon: 'gitlab',
+  },
+  {
+    id: 'tab-18',
+    label: 'Fireflink',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+  {
+    id: 'tab-19',
+    label: 'Google',
+    component: <TabContentOne />,
+    tabIcon: 'manage_apps',
+  },
+  {
+    id: 'tab-20',
+    label: 'Chrome',
+    component: <TabContentTwo />,
+    tabIcon: 'chrome_icon',
+  },
+  {
+    id: 'tab-21',
+    label: 'jira',
+    component: <TabContentThree />,
+    tabIcon: 'jira_logo',
+  },
+  {
+    id: 'tab-22',
+    label: 'bitbucket',
+    component: <TabContentOne />,
+    tabIcon: 'bitbucket',
+  },
+  {
+    id: 'tab-23',
+    label: 'slack',
+    component: <TabContentTwo />,
+    tabIcon: 'slack',
+  },
+  {
+    id: 'tab-24',
+    label: 'Amazon',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+  {
+    id: 'tab-25',
+    label: 'Google',
+    component: <TabContentOne />,
+    tabIcon: 'manage_apps',
+  },
+  {
+    id: 'tab-26',
+    label: 'Chrome',
+    component: <TabContentTwo />,
+    tabIcon: 'chrome_icon',
+  },
+  {
+    id: 'tab-27',
+    label: 'jira',
+    component: <TabContentThree />,
+    tabIcon: 'jira_logo',
+  },
+  {
+    id: 'tab-28',
+    label: 'azure',
+    component: <TabContentOne />,
+    tabIcon: 'azure',
+  },
+  {
+    id: 'tab-29',
+    label: 'gitlab',
+    component: <TabContentTwo />,
+    tabIcon: 'gitlab',
+  },
+  {
+    id: 'tab-30',
+    label: 'jira',
+    component: <TabContentThree />,
+    tabIcon: 'jira_logo',
+  },
+  {
+    id: 'tab-31',
+    label: 'Yahoo',
+    component: <TabContentOne />,
+    tabIcon: 'manage_apps',
+  },
+  {
+    id: 'tab-32',
+    label: 'slack',
+    component: <TabContentTwo />,
+    tabIcon: 'slack',
+  },
+  {
+    id: 'tab-33',
+    label: 'python',
+    component: <TabContentThree />,
+    tabIcon: 'python',
+  },
+  {
+    id: 'tab-24',
+    label: 'Amazon',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+  {
+    id: 'tab-25',
+    label: 'linux',
+    component: <TabContentOne />,
+    tabIcon: 'linux',
+  },
+  {
+    id: 'tab-26',
+    label: 'github',
+    component: <TabContentTwo />,
+    tabIcon: 'github',
+  },
+  {
+    id: 'tab-27',
+    label: 'fire',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+  {
+    id: 'tab-28',
+    label: 'Amazon',
+    component: <TabContentOne />,
+    tabIcon: 'manage_apps',
+  },
+  {
+    id: 'tab-29',
+    label: 'Chrome',
+    component: <TabContentTwo />,
+    tabIcon: 'chrome_icon',
+  },
+  {
+    id: 'tab-30',
+    label: 'Amazon',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+  {
+    id: 'tab-31',
+    label: 'browserstack',
+    component: <TabContentOne />,
+    tabIcon: 'browserstack_icon',
+  },
+  {
+    id: 'tab-32',
+    label: 'gitlab',
+    component: <TabContentTwo />,
+    tabIcon: 'gitlab',
+  },
+  {
+    id: 'tab-33',
+    label: 'vikas',
+    component: <TabContentThree />,
+    tabIcon: 'moon_stars_icon',
+  },
+];
+
+export const MultipleTabs: Story = {
+  render: () => {
+    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-11');
+
+    return (
+      <BrowserTabs
+        tabsData={multipleData}
+        activeTabId={activeTabIdDefault}
+        onTabClick={setActiveTabIdDefault}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/BrowserTabs/BrowserTabs.tsx

@@ -0,0 +1,128 @@
+import { useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { BrowserTabsProps } from './types';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import Tooltip from '../Tooltip';
+import './BrowserTabs.scss';
+import '../../assets/styles/_colors.scss';
+
+const BrowserTabs = ({
+  tabsData,
+  activeTabId,
+  onTabClick,
+  onTabClose,
+  onTabAdd,
+  maxTabWidth = 132,
+  showCloseOnActive = true,
+}: BrowserTabsProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [tabWidth, setTabWidth] = useState<number>();
+
+  useEffect(() => {
+    const updateTabWidth = () => {
+      if (containerRef.current) {
+        const containerWidth =
+          containerRef.current.getBoundingClientRect().width;
+        const calculatedWidth = containerWidth / tabsData.length;
+        setTabWidth(Math.min(maxTabWidth, calculatedWidth));
+      }
+    };
+
+    updateTabWidth();
+    window.addEventListener('resize', updateTabWidth);
+
+    return () => window.removeEventListener('resize', updateTabWidth);
+  }, [tabsData.length, maxTabWidth]);
+
+  return (
+    <div className="ff-browser-tabs-container" ref={containerRef}>
+      <div className="ff-browser-tab-row">
+        <div className="ff-tab-button-container">
+          {tabsData.map((tab, index) => {
+            const isActive = activeTabId === tab.id;
+            const isTabTooSmall = tabWidth && tabWidth < 80;
+            return (
+              <div
+                key={tab.id}
+                className={classNames('ff-tab-wrapper', { active: isActive })}
+              >
+                <Tooltip title={isTabTooSmall ? tab.label : ''}>
+                  <button
+                    onClick={() => onTabClick(tab.id)}
+                    className="ff-tab-button"
+                    style={{
+                      width: tabWidth ? `${tabWidth}px` : 'auto',
+                      padding: tabWidth && tabWidth < 80 ? ' 0px' : '0px 8px',
+                    }}
+                  >
+                    <div className="ff-tab-content">
+                      {tabWidth &&
+                        tabWidth >= 20 &&
+                        (!isActive || tabWidth >= 80) && (
+                          <Icon
+                            name={tab.tabIcon}
+                            hoverEffect={false}
+                            color="inherit"
+                          />
+                        )}
+
+                      {tabWidth && tabWidth > 40 && (
+                        <div className="ff-tab-label-container">
+                          <Typography
+                            children={tab.label}
+                            lineHeight="18px"
+                            fontWeight={isActive ? 'semi-bold' : 'regular'}
+                            color={
+                              isActive
+                                ? 'var(--tabs-label-active-color)'
+                                : 'var(--tabs-label-default-color)'
+                            }
+                            className="ff-tab-label"
+                          />
+                        </div>
+                      )}
+
+                      {((tabWidth && tabWidth >= 80) || isActive) &&
+                        showCloseOnActive && (
+                          <Icon
+                            name="close"
+                            className="ff-close-icon"
+                            hoverEffect={false}
+                            height={10}
+                            width={10}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              if (onTabClose) {
+                                onTabClose(Number(tab.id));
+                              }
+                            }}
+                          />
+                        )}
+                    </div>
+                  </button>
+                </Tooltip>
+                {isActive ||
+                index === tabsData.length - 1 ||
+                (activeTabId === tabsData[0]?.id && index === 0) ||
+                activeTabId === tabsData[index + 1]?.id ? null : (
+                  <span
+                    className="ff-tab-separator"
+                    style={{
+                      margin: tabWidth && tabWidth > 80 ? '0 4px' : '0 1px',
+                    }}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className="ff-tab-plus-icon" onClick={onTabAdd}>
+          <Icon name="add_file" color="#71347B" width={10} height={10} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BrowserTabs;

package/src/components/BrowserTabs/index.ts

@@ -0,0 +1 @@
+export { default } from "./BrowserTabs"

package/src/components/BrowserTabs/types.ts

@@ -0,0 +1,73 @@
+/**
+ * Represents a single tab in the BrowserTabs component.
+ */
+export interface BrowserTab {
+  /**
+   * Unique identifier for the tab.
+   */
+  id: string;
+
+  /**
+   * Label text displayed on the tab.
+   */
+  label: string;
+
+  /**
+   * Optional component to be rendered when the tab is active.
+   */
+  component?: JSX.Element;
+
+  /**
+   * Name of the tab icon.
+   */
+  tabIcon: string;
+}
+
+/**
+ * Props for the BrowserTabs component.
+ */
+export interface BrowserTabsProps {
+  /**
+   * An array of tab objects containing label, icon, and an optional component.
+   */
+  tabsData: BrowserTab[];
+
+  /**
+   * The ID of the currently active tab.
+   */
+  activeTabId: string;
+
+  /**
+   * Function to update the active tab state when a user clicks on a tab.
+   * @param id - The unique identifier of the clicked tab.
+   */
+  onTabClick: (id: string) => void;
+    /**
+   * Function to add a new tab.
+   */
+    onTabAdd?: () => void;
+  /**
+   * Function to close a specific tab.
+   * @param index - The index of the tab to be closed.
+   */
+  onTabClose?: (index: number) => void;
+   /**
+   * Minimum width for each tab (in pixels).
+   */
+   minTabWidth?: number;
+
+   /**
+    * Maximum width for each tab (in pixels).
+    */
+   maxTabWidth?: number;
+ 
+   /**
+    * Show the close button only for the active tab.
+    */
+   showCloseOnActive?: boolean;
+ 
+   /**
+    * Custom CSS class name to override default styles.
+    */
+   className?: string;
+}