pixel-react 1.5.1 → 1.5.3

package/src/components/AppHeader/AppHeader.tsx

@@ -27,152 +27,152 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   onMoreMenuOptionClick = () => {},
 }) => {
   return (
-    <div className='ff-app-header-main'>
-      <div className="ff-app-header">
-        <div className="ff-app-header-left-container">
-          <div className="ff-app-header-logo-icon">
-            <Icon color="" name={logoIconName} height={24} width={21} />
-          </div>
-          {leftContent && (
-            <div className="ff-app-header-left-content">{leftContent}</div>
-          )}
+    <div className="ff-app-header-main">
+    <div className="ff-app-header">
+      <div className="ff-app-header-left-container">
+        <div className="ff-app-header-logo-icon">
+          <Icon color="" name={logoIconName} height={24} width={21} />
         </div>
-        {!checkEmpty(appHeaderMenuItems) && (
-          <div className="ff-app-header-nav-bar">
-            {projectsList && !checkEmpty(projectsList) && (
-              <div>
-                {
-                  <AllProjectsDropdown
-                    onClick={onProjectMenuClick}
-                    options={projectsList}
-                    selectedOption={selectedProject}
-                    onMenuClick={onProjectDropdownLabelClick}
-                    selected={selectedMenu === 'Projects'}
-                  />
-                }
-              </div>
-            )}
-            <div className="ff-app-header-nav-bar-items fontSm">
-              {appHeaderMenuItems.map((menuItem) => {
-                return (
-                  <div
-                    className={classNames('ff-app-header-nav-bar-item', {
-                      ['ff-app-header-nav-bar-item--selected']:
-                        menuItem.label === selectedMenu,
-                    })}
-                    key={menuItem.label}
+        {leftContent && (
+          <div className="ff-app-header-left-content">{leftContent}</div>
+        )}
+      </div>
+      {!checkEmpty(appHeaderMenuItems) && (
+        <div className="ff-app-header-nav-bar">
+          {projectsList && !checkEmpty(projectsList) && (
+            <div>
+              {
+                <AllProjectsDropdown
+                  onClick={onProjectMenuClick}
+                  options={projectsList}
+                  selectedOption={selectedProject}
+                  onMenuClick={onProjectDropdownLabelClick}
+                  selected={selectedMenu === 'Projects'}
+                />
+              }
+            </div>
+          )}
+          <div className="ff-app-header-nav-bar-items fontSm">
+            {appHeaderMenuItems.map((menuItem) => {
+              return (
+                <div
+                  className={classNames('ff-app-header-nav-bar-item', {
+                    ['ff-app-header-nav-bar-item--selected']:
+                      menuItem.label === selectedMenu,
+                  })}
+                  key={menuItem.label}
+                >
+                  <Typography
+                    as="div"
+                    className="ff-app-header-nav-bar-item-label"
+                    lineHeight="18px"
+                    onClick={() => onMenuClick(menuItem)}
                   >
-                    <Typography
-                      as="div"
-                      className="ff-app-header-nav-bar-item-label"
-                      lineHeight="18px"
-                      onClick={() => onMenuClick(menuItem)}
-                    >
-                      {menuItem.label}
-                    </Typography>
-                    {menuItem.label === selectedMenu &&
-                      menuItem?.subMenuItems && (
-                        <>
-                          {menuItem.subMenuItems.map((subMenuItem) => {
-                            return (
-                              <div
-                                key={subMenuItem.label}
-                                className="ff-app-header-submenu-container"
+                    {menuItem.label}
+                  </Typography>
+                  {menuItem.label === selectedMenu &&
+                    menuItem?.subMenuItems && (
+                      <>
+                        {menuItem.subMenuItems.map((subMenuItem) => {
+                          return (
+                            <div
+                              key={subMenuItem.label}
+                              className="ff-app-header-submenu-container"
+                            >
+                              <Typography
+                                as="div"
+                                className={classNames(
+                                  'ff-app-header-nav-bar-submenu-item',
+                                  {
+                                    ['ff-app-header-nav-bar-submenu-item--selected']:
+                                      subMenuItem.label === selectedSubMenu,
+                                  }
+                                )}
+                                lineHeight="18px"
+                                onClick={() => onSubMenuClick(subMenuItem)}
                               >
-                                <Typography
-                                  as="div"
-                                  className={classNames(
-                                    'ff-app-header-nav-bar-submenu-item',
-                                    {
-                                      ['ff-app-header-nav-bar-submenu-item--selected']:
-                                        subMenuItem.label === selectedSubMenu,
-                                    }
-                                  )}
-                                  lineHeight="18px"
-                                  onClick={() => onSubMenuClick(subMenuItem)}
-                                >
-                                  {subMenuItem.label}
-                                </Typography>
-                              </div>
-                            );
-                          })}
-                          {menuItem.subMenuItems.map((subMenuItem) => {
-                            return (
-                              <div
-                                key={subMenuItem.label}
-                                className="ff-app-header-submenu-container"
-                              >
-                                {subMenuItem.label === selectedSubMenu &&
-                                  subMenuItem?.quickMenuItems && (
-                                    <div className="ff-app-header-quickmenu-container">
-                                      <div>
-                                        <Icon name="vertical_separator" />
-                                      </div>
-                                      {subMenuItem.quickMenuItems.map(
-                                        (quickMenuItem) => {
-                                          return (
-                                            <>
-                                              <div
-                                                key={quickMenuItem.iconName}
-                                                onClick={() =>
-                                                  onQuickMenuClick(
-                                                    quickMenuItem
-                                                  )
+                                {subMenuItem.label}
+                              </Typography>
+                            </div>
+                          );
+                        })}
+                        {menuItem.subMenuItems.map((subMenuItem) => {
+                          return (
+                            <div
+                              key={subMenuItem.label}
+                              className="ff-app-header-submenu-container"
+                            >
+                              {subMenuItem.label === selectedSubMenu &&
+                                subMenuItem?.quickMenuItems && (
+                                  <div className="ff-app-header-quickmenu-container">
+                                    <div>
+                                      <Icon name="vertical_separator" />
+                                    </div>
+                                    {subMenuItem.quickMenuItems.map(
+                                      (quickMenuItem) => {
+                                        return (
+                                          <>
+                                            <div
+                                              key={quickMenuItem.iconName}
+                                              onClick={() =>
+                                                onQuickMenuClick(quickMenuItem)
+                                              }
+                                              className={classNames(
+                                                'ff-app-header-nav-bar-quickmenu-item',
+                                                {
+                                                  ['ff-app-header-nav-bar-quickmenu-item--selected']:
+                                                    quickMenuItem.iconName ===
+                                                    selectedQuickMenu,
                                                 }
-                                                className={classNames(
-                                                  'ff-app-header-nav-bar-quickmenu-item',
-                                                  {
-                                                    ['ff-app-header-nav-bar-quickmenu-item--selected']:
-                                                      quickMenuItem.iconName ===
-                                                      selectedQuickMenu,
-                                                  }
-                                                )}
+                                              )}
+                                            >
+                                              <Tooltip
+                                                title={quickMenuItem?.label}
                                               >
-                                                <Tooltip title={quickMenuItem?.label}>
                                                 <Icon
                                                   name={quickMenuItem.iconName}
-                                                  height={24}
-                                                  width={24}
+                                                  height={16}
+                                                  width={16}
                                                   hoverEffect={true}
                                                 />
-                                                </Tooltip>
-                                              </div>
-                                            </>
-                                          );
-                                        }
-                                      )}
-                                    </div>
-                                  )}
-                              </div>
-                            );
-                          })}
-                        </>
-                      )}
-                  </div>
-                );
-              })}
-            </div>
-            {appHeaderHiddenMenuItems &&
-              !checkEmpty(appHeaderHiddenMenuItems) && (
-                <div className='more-menu'>
-                  <MenuOption
-                    iconName="more"
-                    options={appHeaderHiddenMenuItems}
-                    onOptionClick={onMoreMenuOptionClick}
-                    variant="dark"
-                    dropdownPlacement="down"
-                    zIndex={1001}
-                    tooltipTitle='More'
-                    optionCardVariant='primary'
-                  />
+                                              </Tooltip>
+                                            </div>
+                                          </>
+                                        );
+                                      }
+                                    )}
+                                  </div>
+                                )}
+                            </div>
+                          );
+                        })}
+                      </>
+                    )}
                 </div>
-              )}
+              );
+            })}
           </div>
-        )}
-        {rightContent && (
-          <div className="ff-app-header-right-content">{rightContent}</div>
-        )}
-      </div>
+          {appHeaderHiddenMenuItems &&
+            !checkEmpty(appHeaderHiddenMenuItems) && (
+              <div className="more-menu">
+                <MenuOption
+                  iconName="more"
+                  options={appHeaderHiddenMenuItems}
+                  onOptionClick={onMoreMenuOptionClick}
+                  variant="dark"
+                  dropdownPlacement="down"
+                  zIndex={1001}
+                  tooltipTitle="More"
+                  optionCardVariant="primary"
+                />
+              </div>
+            )}
+        </div>
+      )}
+      {rightContent && (
+        <div className="ff-app-header-right-content">{rightContent}</div>
+      )}
+    </div>
     </div>
   );
 };

package/src/components/AttachmentButton/AttachmentButton.stories.tsx

@@ -13,6 +13,8 @@ const meta: Meta<typeof AttachmentButton> = {
     maxFiles: { control: 'number' },
     buttonLabel: { control: 'text' },
     showSelectedFiles: { control: 'boolean' },
+    deleteButton: { control: 'boolean' },
+    addAttachmentButton:{control:'boolean'}
   },
 };
 

package/src/components/AttachmentButton/AttachmentButton.tsx

@@ -17,12 +17,15 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
   buttonLabel = 'Select Files',
   showSelectedFiles = true,
   buttonVariant = 'primary',
+  deleteButton = true,
+  addAttachmentButton = true,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [fileError, setFileError] = useState<string>('');
   const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
 
   const handleAttachmentClick = () => {
+    setFileError('');
     fileInputRef.current?.click();
   };
 
@@ -82,7 +85,7 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
         multiple
         accept="*"
       />
-      {/* {fileError && ( */}
+      {fileError && (
         <Toaster
           isOpen={!!fileError}
           variant="info"
@@ -90,27 +93,31 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
           toastMessage={fileError}
           zIndex={10000000}
         />
-      {/* )} */}
+      )}
       {showSelectedFiles &&
         selectedFiles.map((file, index) => (
           <div key={file.name} className="ff-attachment-files">
             <Typography color="var(--brand-color)">{file.name}</Typography>
-            <Tooltip title="delete">
-            <Icon
-              name="delete"
-              hoverEffect={true}
-              color="var(--ff-delete-button-attachment)"
-              onClick={() => handleDeleteFile(index)}
-            />
-            </Tooltip>
-            {index === selectedFiles.length - 1 &&
-              selectedFiles.length < maxFiles && (
-              <Tooltip title="add attachment">
+            {deleteButton && (
+              <Tooltip title="Delete">
                 <Icon
-                name="add_file"
-                hoverEffect={true}
-                  onClick={handleAttachmentClick}
+                  name="delete"
+                  hoverEffect={true}
+                  color="var(--ff-delete-button-attachment)"
+                  variant="danger"
+                  onClick={() => handleDeleteFile(index)}
                 />
+              </Tooltip>
+            )}
+            {index === selectedFiles.length - 1 &&
+              selectedFiles.length < maxFiles &&
+              addAttachmentButton && (
+                <Tooltip title="Add Attachment">
+                  <Icon
+                    name="add_file"
+                    hoverEffect={true}
+                    onClick={handleAttachmentClick}
+                  />
                 </Tooltip>
               )}
           </div>

package/src/components/AttachmentButton/types.ts

@@ -8,4 +8,6 @@ export interface AttachmentUploaderProps {
   buttonLabel?: string;
   showSelectedFiles?: boolean;
   buttonVariant?: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
+  deleteButton: boolean;
+  addAttachmentButton: boolean;
 }

package/src/components/Icon/Icon.tsx

@@ -54,7 +54,8 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       className: classNames('ff-icon-container', {
         'ff-icon-click': hoverEffect,
         'ff-icon-disabled': disabled,
-        'ff-icon-dark': variant === "dark",
+        'ff-icon-dark': variant === 'dark',
+        'ff-icon-danger': variant === 'danger',
         [className]: !!className,
       }),
       ...props,

package/src/components/Icon/Icons.scss

@@ -5,6 +5,11 @@
   padding: 4px;
   box-sizing: content-box;
 
+  &.ff-icon-danger {
+    &:hover {
+      background-color: var(--ff-icon-color-danger-variant);
+    }
+  }
   &.ff-icon-dark {
     background-color: var(--brand-color);
     &.ff-icon-click {

package/src/components/Icon/types.ts

@@ -7,7 +7,7 @@ export interface IconProps {
   onClick?: (data?: any) => void;
   hoverEffect?: boolean;
   disabled?: boolean;
-  variant?: "dark" | "light";
+  variant?: "dark" | "light" | 'danger';
   x?:string;
   y?:string;
   chartIcon?:boolean

package/src/components/MenuOption/MenuOption.scss

@@ -51,7 +51,7 @@
   background: var(--option-card-bg-color);
   overflow: hidden;
   min-height: 32px;
-  min-width: 112px;
+  min-width: 110px;
   width: max-content;
   border-radius: 4px;
   &--primary{
@@ -77,7 +77,7 @@
     border-radius: 3px;
     display: flex;
     align-items: center;
-    padding: 8px;
+    padding: 4px;
     gap: 8px;
     &:hover {
       background-color: var(--hover-color);

package/src/components/MenuOption/MenuOption.tsx

@@ -31,6 +31,7 @@ const Option = ({ option, onClick }: OptionProps) => (
     )}
     <Typography
       as="label"
+      lineHeight='18px'
       color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
     >
       {option.label}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import RadioGroup from './RadioGroup';
 import { useState } from 'react';
 import Icon from '../Icon';
+import React from 'react';
+import { Option } from '../MultiSelect/MultiSelectTypes';
 
 const meta: Meta<typeof RadioGroup> = {
   title: 'Components/RadioGroup',

package/src/components/Tooltip/Tooltip.scss

@@ -16,7 +16,7 @@
   color: var(--tooltip-text-color);
   text-align: center;
   border-radius: 5px;
-  padding: 6px 12px;
+  padding: 4px 8px;
   opacity: 0;
   z-index: 10000;
 

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import Tooltip from './Tooltip';
 import Icon from '../Icon';
+import React from 'react';
 
 const meta: Meta<typeof Tooltip> = {
   title: 'Components/Tooltip',
@@ -20,7 +21,7 @@ export const Default: Story = {
   args: {
     title: 'Default',
     placement: 'bottom',
-    children: 'Hover on me to check tooltip',
+    children: <Icon name="delete" hoverEffect={true} />,
   },
 };
 
@@ -88,9 +89,9 @@ export const BottomEnd: Story = {
 };
 export const TooltipWithIcon: Story = {
   args: {
-    title: <Icon name="logo" />,
+    title: 'icon',
     placement: 'bottom',
-    children: 'Hover on me to check jsx',
+    children: <Icon name="delete" />,
   },
 };
 

package/src/components/Tooltip/Tooltip.tsx

@@ -39,11 +39,11 @@ const Tooltip: React.FC<TooltipProps> = ({
   const currentTheme = themeContext?.currentTheme;
   const styles: Position = {
     left: {
-      top: posY,
+      top: posY- 1,
       left: posX - titleWidth - 5,
     },
     right: {
-      top: posY,
+      top: posY -1,
       left: fromRight + 5,
     },
     top: {

package/src/components/Typography/Typography.scss

@@ -3,37 +3,40 @@
   font-size: $size;
 }
 
+/* poppins-latin-400-normal */
 @font-face {
   font-family: 'Poppins';
+  font-style: normal;
+  font-display: swap;
   font-weight: 400;
-  src:
-    local('Poppins-Regular'),
-    url(../../assets/fonts/Poppins-Regular.woff2) format('woff2');
+  src: url(@fontsource/poppins/files/poppins-latin-400-normal.woff2) format('woff2'), url(@fontsource/poppins/files/poppins-latin-400-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 500;
-  src:
-    local('Poppins-Medium'),
-    url(../../assets/fonts/Poppins-Medium.woff2) format('woff2');
-}
 
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 600;
-  src:
-    local('Poppins-SemiBold'),
-    url(../../assets/fonts/Poppins-SemiBold.woff2) format('woff2');
-}
+// @font-face {
+//   font-family: 'Poppins';
+//   font-weight: 500;
+//   src:
+//     local('Poppins-Medium'),
+//     url(../../assets/fonts/Poppins-Medium.woff2) format('woff2');
+// }
 
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 700;
-  src:
-    local('Poppins-Bold'),
-    url(../../assets/fonts/Poppins-Bold.woff2) format('woff2');
-}
+// @font-face {
+//   font-family: 'Poppins';
+//   font-weight: 600;
+//   src:
+//     local('Poppins-SemiBold'),
+//     url(../../assets/fonts/Poppins-SemiBold.woff2) format('woff2');
+// }
+
+// @font-face {
+//   font-family: 'Poppins';
+//   font-weight: 700;
+//   src:
+//     local('Poppins-Bold'),
+//     url(../../assets/fonts/Poppins-Bold.woff2) format('woff2');
+// }
 
 .ff-text {
   @include fontPoppins();

package/lib/components/AddButton/AddButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './AddButton.scss';
-import { AddButtonProps } from './types';
-declare const AddButton: React.FC<AddButtonProps>;
-export default AddButton;

package/lib/components/AddButton/AddButton.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const PrimaryAddButton: Story;
-export default meta;

package/lib/components/AddButton/index.d.ts

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

package/lib/components/AddButton/types.d.ts

@@ -1,4 +0,0 @@
-export interface AddButtonProps {
-    name: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}

package/lib/components/AttachImage/AttachImage.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AttachImage from './AttachImage';
-import { AttachImageProps } from './types';
-declare const meta: Meta<typeof AttachImage>;
-export default meta;
-type Story = StoryObj<AttachImageProps>;
-export declare const Default: Story;

package/lib/components/Charts/BarChart/BarChart.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import BarChart from './BarChart';
-declare const meta: Meta<typeof BarChart>;
-export default meta;
-type Story = StoryObj<typeof BarChart>;
-export declare const BarChartDashboard: Story;

package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import IconRadialChart from './IconRadialChart';
-declare const meta: Meta<typeof IconRadialChart>;
-export default meta;
-type Story = StoryObj<typeof IconRadialChart>;
-export declare const Default: Story;
-export declare const Mobile: Story;
-export declare const WithoutIcon: Story;

package/lib/components/Charts/LineChart/LineChart.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import LineChart from './LineChart';
-import { LineChartProps } from './types';
-declare const meta: Meta<typeof LineChart>;
-export default meta;
-export declare const DefaultLineChart: StoryObj<LineChartProps>;
-export declare const StatusLineChart: StoryObj<LineChartProps>;