pixel-react 1.10.15 → 1.10.16

package/src/components/Avatar/Avatar.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import Icon from '../Icon';
-import './Avatar.scss';
-import { AvatarProps } from './types';
-
-const Avatar: React.FC<AvatarProps> = ({
-  variant="small",
-  iconName,
-  iconColor= 'var(--avatar-icon-color)',
-  customAvatarSize,
-  customIconSize,
-  backgroundColor,
-  label,
-  labelFontSize,
-}) => {
-  const truncatedLabel = label?.slice(0, 2);
-  return (
-    <div
-      className={`ff-avatar ff-avatar--${variant}`}
-      style={{ height: `${customAvatarSize}px`, width: `${customAvatarSize}px`, backgroundColor }}
-    >
-     {label ? (
-        <span
-          className="ff-avatar-label"
-          style={{ fontSize: labelFontSize || '14px', color: iconColor }}
-        >
-          {truncatedLabel}
-        </span>
-      ) : (
-        <Icon
-          name={iconName!}
-          height={customIconSize}
-          width={customIconSize}
-          color={iconColor}
-        />
-      )}
-    </div>
-  );
-};
-
-export default Avatar;

package/src/components/Avatar/index.ts

@@ -1 +0,0 @@
-export { default } from './Avatar';

package/src/components/Avatar/types.ts

@@ -1,35 +0,0 @@
-export interface AvatarProps {
-    /**
-   * This property determines the size of the avatar. It can be set to 'small', 'medium', or 'large'.
-   */
-  variant?: 'small' | 'medium' | 'large';
-  /**
-   * This property allows you to customize the background color of the avatar.
-   */
-  backgroundColor?: string;
-  /**
-   * This property specifies the name of the icon to be displayed within the avatar.
-   */
-  iconName?: string;
-  /**
-   * This property allows you to customize the color of the icon within the avatar.
-   */
-  iconColor?: string;
-  /**
-   * This property allows you to set a custom size for the avatar, overriding the default size specified by the variant property.
-   */
-  
-  customAvatarSize?: number;
-  /**
-   * This property allows you to set a custom size for the icon within the avatar.
-   */
-  customIconSize?: number;
-   /**
-   * This property specifies the label to display inside the avatar, used as an alternative to the icon.
-   */
-   label?: string;
-   /**
-    * This property allows you to customize the font size of the label inside the avatar.
-    */
-   labelFontSize?: string;
-}

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

@@ -1,366 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

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

package/src/components/BrowserTabs/types.ts

@@ -1,73 +0,0 @@
-/**
- * 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;
-}