pixel-react 1.5.3 → 1.5.5

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -1,8 +1,17 @@
 import React, { useState } from 'react';
-import { DashboardDonutChartProps, ChartItem, LegendType } from './types';
+import {
+  DashboardDonutChartProps,
+  ChartItem,
+  LegendType,
+  NormalizedChartItem,
+} from './types';
 import Typography from '../../Typography';
 import './DashBoardDonutChart.scss';
 import classNames from 'classnames';
+import {
+  normalizeStorageValue,
+  formatMemoryValue,
+} from '../../../assets/utils/functionUtils';
 
 const calculateArc = (
   x: number,
@@ -24,7 +33,7 @@ const colorMapping = [
   'var(--status-success-text-color)',
   'var(--status-rejected-text-color)',
   'var(--status-warning-text-color)',
-  'var(--status-skipped-text-color)',
+  'var(--status-button-text-skipped)',
   'var(--brand-color)',
 ];
 
@@ -39,12 +48,58 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
   showOnlyLabel = false,
   unit,
   showUnit = true,
+  labelFontSize = 24,
+  subLabelFontSize = 14,
 }) => {
   const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
-  const total = statusValues?.reduce((acc, { value }) => acc + value, 0);
-  const nonZeroValues = statusValues?.filter(({ value }) => value > 0);
+
+  // Normalize data if legendType is 'memoryLegend'
+  const normalizedStatusValues: NormalizedChartItem[] =
+    legendType === 'memoryLegend'
+      ? statusValues.map((item) => {
+          if (typeof item.value === 'string') {
+            const { normalizedValue, unit, value } = normalizeStorageValue(
+              item.value
+            );
+            return { ...item, normalizedValue, unit, labelValue: value };
+          }
+          return {
+            ...item,
+            normalizedValue: item.value as number,
+            labelValue: item.value,
+            unit: 'B',
+          }; // Default to bytes
+        })
+      : statusValues.map((item) => {
+          if (typeof item.value === 'string') {
+            console.warn(
+              `String value "${item.value}" is not supported for legendType "${legendType}". Defaulting to 0.`
+            );
+            return { ...item, normalizedValue: 0, unit: '', labelValue: 0 };
+          }
+          return {
+            ...item,
+            normalizedValue: item.value as number,
+            unit: '',
+            labelValue: item.value,
+          };
+        });
+
+  // Use normalized values for chart calculations
+  const chartValues = normalizedStatusValues.map((item) => ({
+    key: item.key,
+    value: item.normalizedValue ?? (item.value as number),
+    color: item.color,
+    unit: item.unit,
+    labelValue: item.labelValue,
+  }));
+
+  const total = chartValues?.reduce((acc, { value }) => acc + value, 0);
+  const nonZeroValues = chartValues?.filter(({ value }) => value > 0);
+
+  const totalMemory = formatMemoryValue(total);
 
   // Calculate angles and gaps
   const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
@@ -79,8 +134,9 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
     });
   };
 
-  const SVG_PADDING = 4;
-  const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
+  const SVG_PADDING = 3;
+  const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
+  const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING;
 
   const renderArc = (chartItem: ChartItem, endAngle: number, i: number) => {
     const isFullCircle = nonZeroValues.length === 1;
@@ -127,13 +183,19 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             `${nonZeroValues[hoveredItemIndex]?.key} : `}
         </Typography>
         <Typography fontSize={12}>
-          {hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex]?.value}
+          {hoveredItemIndex !== null &&
+            (legendType === 'memoryLegend'
+              ? `${nonZeroValues[hoveredItemIndex]?.labelValue} ${nonZeroValues[hoveredItemIndex]?.unit}`
+              : nonZeroValues[hoveredItemIndex]?.value)}
         </Typography>
       </div>
     );
   };
 
-  const renderLegend = (legendData: ChartItem[], legendType: LegendType) => {
+  const renderLegend = (
+    legendData: NormalizedChartItem[],
+    legendType: LegendType
+  ) => {
     switch (legendType) {
       case 'numberLegend':
         return (
@@ -197,7 +259,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                         : colorMapping[index % colorMapping.length]
                     }
                   >
-                    {item.value} {showUnit && unit?.toUpperCase()}
+                    {item.labelValue} {item.unit}
                   </Typography>
                   <Typography className="ff-legend-key">{item.key}</Typography>
                 </div>
@@ -239,7 +301,9 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                       <Typography fontSize={10}>{item.key}</Typography>
                     </td>
                     <td className="ff-legend-percentage">
-                      {((item.value / total) * 100).toFixed(1)}
+                      {typeof item.value === 'string'
+                        ? ((parseFloat(item.value) / total) * 100).toFixed(1)
+                        : ((item.value / total) * 100).toFixed(1)}
                     </td>
                     <td className="ff-legend-count">{item.value}</td>
                   </tr>
@@ -254,6 +318,45 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
     }
   };
 
+  function wrapText(
+    text: string,
+    maxWidth: number,
+    fontSize: number
+  ): string[] {
+    const words: string[] = text.split(' ');
+    const lines: string[] = [];
+    let currentLine: string = '';
+
+    words.forEach((word) => {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+
+      if (measureTextWidth(testLine, fontSize) <= maxWidth) {
+        currentLine = testLine;
+      } else {
+        if (currentLine) {
+          lines.push(currentLine);
+        }
+        currentLine = word;
+      }
+    });
+
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+
+    return lines;
+  }
+
+  function measureTextWidth(text: string, fontSize: number): number {
+    const canvas: HTMLCanvasElement = document.createElement('canvas');
+    const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
+    if (!context) {
+      throw new Error('Unable to get canvas context');
+    }
+    context.font = `${fontSize}px Poppins`; // Font size and family of SVG font
+    return context.measureText(text).width;
+  }
+
   return (
     <div
       className={classNames('ff-dashboard-donut-chart-section', {
@@ -268,8 +371,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
           viewBox={`0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`}
         >
           <g
-            transform={`translate(${radius + lineWidth + SVG_PADDING}, ${
-              radius + lineWidth + SVG_PADDING
+            transform={`translate(${radius + lineWidth / 2 + SVG_PADDING}, ${
+              radius + lineWidth / 2 + SVG_PADDING
             })`}
           >
             {nonZeroValues?.map((status, i) => {
@@ -280,6 +383,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
 
               return renderArc(status, endAngle, i);
             })}
+
             {showOnlyLabel ? (
               <text
                 x="0"
@@ -287,23 +391,52 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                 className="ff-svg-label-text"
                 textAnchor="middle"
                 fill={colorMapping[3]}
+                style={{ fontSize: `${labelFontSize}px` }}
               >
-                {legendDetailsType}
+                {wrapText(
+                  legendDetailsType,
+                  LABEL_MAX_WIDTH,
+                  labelFontSize
+                ).map((line, index, lines) => (
+                  <tspan
+                    x="0"
+                    dy={index === 0 ? (lines.length > 1 ? -8 : 0) : 24}
+                    key={index}
+                  >
+                    {line}
+                  </tspan>
+                ))}
               </text>
             ) : (
               (legendType !== 'tableLegend' || hoveredItemIndex !== null) && (
                 <>
-                  <text x="0" y="5" textAnchor="middle" fill={colorMapping[3]}>
-                    {legendType === 'tableLegend' &&
-                    hoveredItemIndex !== null &&
-                    nonZeroValues[hoveredItemIndex]
-                      ? `${(
-                          (nonZeroValues[hoveredItemIndex].value / total) *
-                          100
-                        ).toFixed(1)}%`
-                      : `${total} ${
-                          showUnit && unit ? `${unit.toUpperCase()}` : ''
-                        }`}
+                  <text
+                    x="0"
+                    y="5"
+                    textAnchor="middle"
+                    fill={colorMapping[3]}
+                    style={{ fontSize: `${labelFontSize}px` }}
+                  >
+                    {wrapText(
+                      legendType === 'tableLegend' &&
+                        hoveredItemIndex !== null &&
+                        nonZeroValues[hoveredItemIndex]
+                        ? `${(
+                            (nonZeroValues[hoveredItemIndex].value / total) *
+                            100
+                          ).toFixed(1)}%`
+                        : legendType === 'memoryLegend'
+                        ? `${totalMemory}`
+                        : `${total} ${
+                            showUnit && unit ? `${unit.toUpperCase()}` : ''
+                          }`,
+                      LABEL_MAX_WIDTH,
+                      labelFontSize
+                    ).map((line, index) => (
+                      <tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
+                        {line}
+                      </tspan>
+                    ))}
                   </text>
 
                   <text
@@ -311,18 +444,28 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                     y="26"
                     textAnchor="middle"
                     fill="var(--text-color)"
+                    style={{ fontSize: `${subLabelFontSize}px` }}
                   >
-                    {legendType === 'tableLegend' &&
-                    hoveredItemIndex !== null &&
-                    nonZeroValues[hoveredItemIndex]
-                      ? nonZeroValues[hoveredItemIndex].key
-                      : legendDetailsType}
+                    {wrapText(
+                      legendType === 'tableLegend' &&
+                        hoveredItemIndex !== null &&
+                        nonZeroValues[hoveredItemIndex]
+                        ? nonZeroValues[hoveredItemIndex].key
+                        : legendDetailsType,
+                      LABEL_MAX_WIDTH,
+                      subLabelFontSize
+                    ).map((line, index) => (
+                      <tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
+                        {line}
+                      </tspan>
+                    ))}
                   </text>
                 </>
               )
             )}
           </g>
         </svg>
+
         {legendType === 'tableLegend' && (
           <div>
             <Typography fontWeight="semi-bold">{legendDetailsType} </Typography>

package/src/components/Charts/DashboardDonutChart/types.ts

@@ -15,8 +15,17 @@ export type StatusValue = {
 
 export type ChartItem = {
   key: string;
-  value: number;
+  value: string | number;
+  color?: string;
+};
+
+export type NormalizedChartItem = {
+  key: string;
+  value: number | string;
   color?: string;
+  normalizedValue?: number;
+  unit?: string;
+  labelValue?: number;
 };
 
 export type LegendType =
@@ -33,7 +42,9 @@ export type DashboardDonutChartProps = {
   isLegendDetails: boolean;
   gapAngle?: number;
   legendType: LegendType;
-  showOnlyLabel: boolean;
+  showOnlyLabel?: boolean;
   unit?: string;
-  showUnit: boolean;
+  showUnit?: boolean;
+  labelFontSize?: number;
+  subLabelFontSize?: number;
 };

package/src/components/Chip/Chip.scss

@@ -48,7 +48,6 @@
     &--error {
       @include chip-variant-background(var(--ff-error-light));
     }
-
     &--warning {
       @include chip-variant-background(var(--ff-warning));
     }
@@ -67,5 +66,20 @@
         color: #fdfaff; //TODO: add color code name
       }
     }
+    &--public {
+      @include chip-variant-background(var(--public-chip-bg-color));
+    }
+
+    &--partial-public {
+      @include chip-variant-background(var(--partial-public-chip-bg-color));
+    }
+
+    &--private {
+      @include chip-variant-background(var(--private-chip-bg-color));
+    }
+
+    &--disabled {
+      @include chip-variant-background(var(--disabled-chip-bg-color));
+    }
   }
 }

package/src/components/Chip/Chip.stories.tsx

@@ -85,4 +85,33 @@ export const Warning: Story = {
     fullText: 'Sub Modules 0',
   },
 };
-export default meta;
+export const Public: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'public',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const PartialPublic: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'partial-public',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Private: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'private',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Disabled: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'disabled',
+    fullText: 'Sub Modules 0',
+  },  
+};
+
+export default meta;

package/src/components/Chip/types.ts

@@ -10,7 +10,7 @@ export interface ChipsProps {
   /**
    * The variant of the Chip.
    */
-  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom';
+  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled';
 
   /**
    * The callback function to be executed when the Chip is clicked.

package/src/components/DownloadClient/DownloadClient.scss

@@ -0,0 +1,80 @@
+@use '../../assets/styles/colors' as *;
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins' as *;
+
+.ff-download-client-overlay {
+  width: 378px;
+  height: 217px;  
+  position: absolute;
+  @include center-content;
+  z-index: 9999;
+
+  .ff-download-client-container {
+    width: 370px;
+    @include center-content;
+    flex-direction: column;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--download-client-border-color);
+    margin-left: 5px;
+
+    .ff-download-client-header {
+      width: 100%;
+      @include center-content;
+      justify-content: space-between;
+      padding: 7px 4px;
+      margin-bottom: 8px;
+      border-radius: 4px 4px 0 0;
+      background-color: var(--download-client-header-bg-color);
+      box-sizing: border-box;
+
+      .ff-header-arrow {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 10px;
+        right: 70px;
+        width: 10px;
+        height: 10px;
+        background-color: var(--download-client-icon-container-bg-color) ;
+        transform: translateY(-50%) rotate(-45deg);
+        z-index: -999;
+        border: 1px solid var(--download-client-header-bg-color); 
+      }
+
+    }
+
+    .ff-download-client-content {
+      width: 100%;
+      @include center-content;
+      flex-direction: column;
+      padding-left: 8px;
+      padding-right: 24px;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--popup-text-color);
+      .ff-download-install,
+      .ff-choose-os {
+        padding: 4px 0;
+      }
+    }
+
+    .ff-download-client-actions {
+      width: 240px;
+      @include center-content;
+      gap: 12px;
+      margin-bottom: 17px;
+      .ff-icons-container {
+        @include center-content;
+        width: 64px;
+        height: 64px;
+        border-radius: 8px;
+        border: 1px solid var(--download-client-icon-container-border-color);
+        background-color: var(--download-client-icon-container-bg-color);
+        cursor: pointer;
+        box-shadow: 0px 0px 10px 0px
+          var(--download-client-icon-container-box-shadow-color);
+      }
+    }
+  }
+}

package/src/components/DownloadClient/DownloadClient.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DownloadClient from './DownloadClient';
+
+const meta: Meta<typeof DownloadClient> = {
+  title: 'Components/DownloadClient',
+  component: DownloadClient,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof DownloadClient>;
+
+export const Default: Story = {
+  args: {
+    onClose: () =>{},
+    onClickWindows: () =>{},
+    onClickLinux: () =>{},
+    onClickMac: () =>{},
+    top: '100px',  
+    left: '50px',
+  },
+};
+
+export default meta;

package/src/components/DownloadClient/DownloadClient.tsx

@@ -0,0 +1,81 @@
+import { useEffect } from 'react';
+import './DownloadClient.scss';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import { DownloadClientProps } from './type';
+
+const DownloadClient: React.FC<DownloadClientProps> = ({
+  onClose,
+  onClickWindows,
+  onClickLinux,
+  onClickMac,
+  top = '10px',
+  left = '10px',
+}) => {
+  const title = 'Download Client';
+  const description =
+    'Download and Install the fireflink client to run the script';
+  const chooseOSText = 'Choose OS';
+
+  useEffect(() => {
+    const handleCloseDownloadClient = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose?.();
+      }
+    };
+    document.addEventListener('keydown', handleCloseDownloadClient);
+    return () => {
+      document.removeEventListener('keydown', handleCloseDownloadClient);
+    };
+  }, [onClose]);
+
+  return (
+    <div className="ff-download-client-overlay" style={{ top, left }}>
+      <div className="ff-download-client-container">
+        <div className="ff-download-client-header">
+          <div className="ff-header-arrow"></div>
+          <Typography
+            color="var(--table-header-text-color)"
+            fontWeight="semi-bold"
+          >
+            {title}
+          </Typography>
+          <div onClick={onClose}>
+            <Icon name="close" width={12} height={12} />
+          </div>
+        </div>
+        <div className="ff-download-client-content">
+          <div className="ff-download-install">
+            <Typography
+              fontWeight="semi-bold"
+              color="var(--download-client-content-text-color)"
+            >
+              {description}
+            </Typography>
+          </div>
+          <div className="ff-choose-os">
+            <Typography
+              fontWeight="semi-bold"
+              color="var(--download-client-choose-os-text-color)"
+            >
+              {chooseOSText}
+            </Typography>
+          </div>
+        </div>
+        <div className="ff-download-client-actions">
+          <div className="ff-icons-container" onClick={onClickWindows}>
+            <Icon name="windows" width={32} height={38} />
+          </div>
+          <div className="ff-icons-container" onClick={onClickLinux}>
+            <Icon name="linux" width={32} height={38} />
+          </div>
+          <div className="ff-icons-container" onClick={onClickMac}>
+            <Icon name="mac_icon" width={32} height={38} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DownloadClient;

package/src/components/DownloadClient/index.ts

@@ -0,0 +1 @@
+export * from './DownloadClient';

package/src/components/DownloadClient/type.ts

@@ -0,0 +1,41 @@
+export interface DownloadClientProps {
+    /**
+     * Title of the popup.
+     */
+    title: string;
+  
+    /**
+     * Description or body text of the popup.
+     */
+    description: string;
+  
+    /**
+     * Callback for when the "Cancel" icon is clicked.
+     */
+    onCancel: () => void;
+  
+    /**
+     * Callback for when the "Download for Windows" icon is clicked.
+     */
+    onDownloadWindows: () => void;
+  
+    /**
+     * Callback for when the "Download for macOS" icon is clicked.
+     */
+    onDownloadMac: () => void;
+  
+    /**
+     * Optional flag to control whether to display icons for download actions instead of buttons.
+     * Defaults to `false` for buttons.
+     */
+    showIcons?: boolean;
+  }
+  
+export interface DownloadClientProps {
+    onClose?: () => void;
+    onClickWindows: () => void;
+    onClickLinux: () => void;
+    onClickMac: () => void;
+    top?: string;
+    left?: string;
+  }  

package/src/components/Editor/Editor.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import Editor from './Editor';
 import { EditorProps } from './types';
 import { varibaleList } from './constants';
+import { useState } from 'react';
 
 const meta: Meta<EditorProps> = {
   title: 'Components/Editor',
@@ -27,13 +28,27 @@ export default meta;
 type Story = StoryObj<EditorProps>;
 
 export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState('// Start typing your code here');
+
+    const handleChange = (newValue: string | undefined): void => {
+      setValue(newValue || '');
+    };
+
+    return (
+      <Editor
+        {...args}
+        value={value}
+        setValue={setValue}
+        handleChange={handleChange}
+      />
+    );
+  },
   args: {
     language: 'javascript',
     width: '100%',
     height: '90vh',
-    showToolbar: false,
     readOnly: false,
     variableOptionsList: varibaleList,
-    // theme: 'vs',
   },
 };

package/src/components/Editor/VariableDropdown.scss

@@ -7,6 +7,7 @@
   background-color: var(--variable-dropdown-bg);
   border: 1px solid var(--border-color);
   border-radius: 3px;
+  z-index: 9999;
 }
 .ff-variable-option {
   display: flex;