pixel-react 1.8.1 → 1.8.3

package/src/assets/utils/functionUtils.ts

@@ -1,96 +1,96 @@
-export const isFunction = (functionToCheck: any) => {
-  return (
-    functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
-  );
-};
-
-export const convertTo24Hour = (time12h: string): string => {
-  const [time, modifier] = time12h.split(' ');
-  if (!time || !modifier) return '00:00';
-
-  let [hours, minutes] = time.split(':');
-  if (!hours || !minutes) return '00:00';
-
-  if (hours === '12') {
-    hours = '00';
-  }
-
-  if (modifier.toUpperCase() === 'PM') {
-    hours = (parseInt(hours, 10) + 12).toString();
-  }
-
-  return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
-};
-
-export const convertTo12Hour = (time24: string): string => {
-  const [hoursStr, minutesStr] = time24.split(':');
-  const hours = parseInt(hoursStr ?? '0', 10);
-  const minutes = parseInt(minutesStr ?? '0', 10);
-
-  const ampm = hours >= 12 ? 'PM' : 'AM';
-  const hours12 = hours % 12 || 12;
-
-  return `${hours12.toString().padStart(2, '0')}:${minutes
-    .toString()
-    .padStart(2, '0')} ${ampm}`;
-};
-
-export const isValid12HourTime = (timeString: string): boolean => {
-  const regex = /^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i;
-  return regex.test(timeString);
-};
-
-// Utility to normalize memory values to bytes
-export const UNIT_MULTIPLIERS: Record<string, number> = {
-  B: 1,
-  KB: 1024,
-  MB: 1024 * 1024,
-  GB: 1024 * 1024 * 1024,
-};
-
-// Parses a storage value string and converts it into a normalized value in bytes along with its unit.
-export function normalizeStorageValue(value: string): {
-  normalizedValue: number;
-  unit: string;
-  value: number;
-} {
-  const match = value.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
-  if (!match) {
-    throw new Error(`Invalid storage value format: ${value}`);
-  }
-
-  const [, numericPart, unit] = match;
-  // Ensure numericPart and unit are defined
-  if (!numericPart || !unit) {
-    throw new Error(`Invalid storage value format: ${value}`);
-  }
-
-  const normalizedValue =
-    parseFloat(numericPart) * (UNIT_MULTIPLIERS[unit.toUpperCase()] || 1);
-
-  return {
-    normalizedValue,
-    unit: unit.toUpperCase(),
-    value: parseFloat(numericPart),
-  };
-}
-
-// Converts a byte value into a readable string with the largest appropriate unit (GB, MB, KB, B).
-export function formatMemoryValue(valueInBytes: number): string {
-  const units = ['GB', 'MB', 'KB', 'B'];
-
-  for (const unit of units) {
-    const factor = UNIT_MULTIPLIERS[unit];
-    if (factor === undefined) {
-      throw new Error(`Missing factor for unit: ${unit}`);
-    }
-
-    if (valueInBytes >= factor || unit === 'B') {
-      const normalizedValue = valueInBytes / factor;
-      const formattedValue = normalizedValue % 1 === 0 ? `${normalizedValue.toFixed(0)}` : `${normalizedValue.toFixed(2)}`;
-      return `${formattedValue} ${unit}`;
-    }
-  }
-  return `${valueInBytes} B`;
-}
-
+export const isFunction = (functionToCheck: any) => {
+  return (
+    functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
+  );
+};
+
+export const convertTo24Hour = (time12h: string): string => {
+  const [time, modifier] = time12h.split(' ');
+  if (!time || !modifier) return '00:00';
+
+  let [hours, minutes] = time.split(':');
+  if (!hours || !minutes) return '00:00';
+
+  if (hours === '12') {
+    hours = '00';
+  }
+
+  if (modifier.toUpperCase() === 'PM') {
+    hours = (parseInt(hours, 10) + 12).toString();
+  }
+
+  return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+};
+
+export const convertTo12Hour = (time24: string): string => {
+  const [hoursStr, minutesStr] = time24.split(':');
+  const hours = parseInt(hoursStr ?? '0', 10);
+  const minutes = parseInt(minutesStr ?? '0', 10);
+
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  const hours12 = hours % 12 || 12;
+
+  return `${hours12.toString().padStart(2, '0')}:${minutes
+    .toString()
+    .padStart(2, '0')} ${ampm}`;
+};
+
+export const isValid12HourTime = (timeString: string): boolean => {
+  const regex = /^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i;
+  return regex.test(timeString);
+};
+
+// Utility to normalize memory values to bytes
+export const UNIT_MULTIPLIERS: Record<string, number> = {
+  B: 1,
+  KB: 1024,
+  MB: 1024 * 1024,
+  GB: 1024 * 1024 * 1024,
+};
+
+// Parses a storage value string and converts it into a normalized value in bytes along with its unit.
+export function normalizeStorageValue(value: string): {
+  normalizedValue: number;
+  unit: string;
+  value: number;
+} {
+  const match = value.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
+  if (!match) {
+    throw new Error(`Invalid storage value format: ${value}`);
+  }
+
+  const [, numericPart, unit] = match;
+  // Ensure numericPart and unit are defined
+  if (!numericPart || !unit) {
+    throw new Error(`Invalid storage value format: ${value}`);
+  }
+
+  const normalizedValue =
+    parseFloat(numericPart) * (UNIT_MULTIPLIERS[unit.toUpperCase()] || 1);
+
+  return {
+    normalizedValue,
+    unit: unit.toUpperCase(),
+    value: parseFloat(numericPart),
+  };
+}
+
+// Converts a byte value into a readable string with the largest appropriate unit (GB, MB, KB, B).
+export function formatMemoryValue(valueInBytes: number): string {
+  const units = ['GB', 'MB', 'KB', 'B'];
+
+  for (const unit of units) {
+    const factor = UNIT_MULTIPLIERS[unit];
+    if (factor === undefined) {
+      throw new Error(`Missing factor for unit: ${unit}`);
+    }
+
+    if (valueInBytes >= factor || unit === 'B') {
+      const normalizedValue = valueInBytes / factor;
+      const formattedValue = normalizedValue % 1 === 0 ? `${normalizedValue.toFixed(0)}` : `${normalizedValue.toFixed(2)}`;
+      return `${formattedValue} ${unit}`;
+    }
+  }
+  return `${valueInBytes} B`;
+}
+

package/src/components/Accordion/Accordion.scss

@@ -1,46 +1,46 @@
-@use '../../assets/styles/fonts';
-
-.ff-accordion {
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  min-width: fit-content;
-  .accordion-header {
-    display: flex;
-    justify-content: space-between;
-    min-height: 32px;
-    align-items: center;
-    cursor: pointer;
-    .header-title {
-      padding: 8px;
-    }
-
-    .accordion-arrow {
-      display: flex;
-      padding: 8px;
-      align-items: center;
-      transition: transform 0.3s ease;
-      &.expanded {
-        transform: rotate(180deg);
-      }
-      &:hover {
-        color: var(--tooltip-bg-color);
-      }
-    }
-
-    &.expanded {
-      background-color: var(
-        --hover-color
-      ); //todo need to replace this color once it is available in the design system
-      border-bottom: 1px solid var(--hover-color);
-    }
-  }
-  .accordion-header:hover {
-    background-color: var(
-      --hover-color
-    ); //todo need to replace this color once it is available in the design system
-  }
-
-  .accordion-content {
-    padding: 8px;
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-accordion {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  min-width: fit-content;
+  .accordion-header {
+    display: flex;
+    justify-content: space-between;
+    min-height: 32px;
+    align-items: center;
+    cursor: pointer;
+    .header-title {
+      padding: 8px;
+    }
+
+    .accordion-arrow {
+      display: flex;
+      padding: 8px;
+      align-items: center;
+      transition: transform 0.3s ease;
+      &.expanded {
+        transform: rotate(180deg);
+      }
+      &:hover {
+        color: var(--tooltip-bg-color);
+      }
+    }
+
+    &.expanded {
+      background-color: var(
+        --hover-color
+      ); //todo need to replace this color once it is available in the design system
+      border-bottom: 1px solid var(--hover-color);
+    }
+  }
+  .accordion-header:hover {
+    background-color: var(
+      --hover-color
+    ); //todo need to replace this color once it is available in the design system
+  }
+
+  .accordion-content {
+    padding: 8px;
+  }
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,35 +1,48 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Accordion from './Accordion';
-import Icon from '../Icon';
-import React from 'react';
-
-const meta: Meta<typeof Accordion> = {
-  title: 'Components/Accordion',
-  component: Accordion,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Accordion>;
-const defaultArgs = {
-  headerTitle: 'Accordion',
-  accordionStateIconName : 'arrow_down',
-  AccordionStateIconWidth:4,
-  AccordionStateIconHeight:8,
-};
-
-export const SampleAccordion: Story = {
-  args: {
-    ...defaultArgs,
-    headerTitle: (
-      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-        <Icon name="accordion_header_icon" />
-        <span>Home and Web</span>
-      </div>
-    ),
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+import Icon from '../Icon';
+import React from 'react';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Accordion>;
+const defaultArgs = {
+  headerTitle: 'Accordion',
+  accordionStateIconName : 'arrow_down',
+  AccordionStateIconWidth:4,
+  AccordionStateIconHeight:8,
+};
+
+export const SampleAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    headerTitle: (
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <Icon name="accordion_header_icon" />
+        <span>Home and Web</span>
+      </div>
+    ),
+  },
+};
+
+export const closedAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    headerTitle: (
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <Icon name="accordion_header_icon" />
+        <span>Home and Web</span>
+      </div>
+    ),
+    isExpand : false
+  },
+};
+
+export default meta;

package/src/components/Accordion/Accordion.tsx

@@ -1,68 +1,69 @@
-import { useState } from 'react';
-import './Accordion.scss';
-import Icon from '../Icon';
-import '../../../index.scss';
-import { AccordionProps } from './types';
-import Tooltip from '../Tooltip';
-import Typography from '../Typography';
-
-/**
- * Accordion UI component
- */
-const Accordion = ({
-  headerTitle = '',
-  color,
-  minHeight = '32px', // Default min-height for accordion content
-  accordionContent = <>This is accordion content</>,
-  disable = false,
-  disableInfoMessage = '',
-  accordionStateIconName = 'arrow_down',
-  AccordionStateIconWidth=12,
-  AccordionStateIconHeight=8,
-}: AccordionProps) => {
-  const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);
-
-  const onAccordionClick = () => {
-    setIsAccordionExpanded(!isAccordionExpanded);
-  };
-  return (
-    <div className="ff-accordion">
-      <div
-        className={`accordion-header ${disable && 'ff-disabled'} ${
-          isAccordionExpanded && 'expanded'
-        }`}
-        style={{ color: color || '--tooltip-bg-color' }}
-        onClick={() => {
-          !disable && onAccordionClick();
-        }}
-      >
-        <Tooltip title={disableInfoMessage}>
-          <Typography
-            as="div"
-            className="header-title"
-            fontWeight="semi-bold"
-            lineHeight="18px"
-          >
-            {headerTitle}
-          </Typography>
-        </Tooltip>
-
-        <Icon
-          name={accordionStateIconName}
-          hoverEffect={false}
-          className={`accordion-arrow  ${isAccordionExpanded && 'expanded'}`}
-          width={AccordionStateIconWidth}
-          height={AccordionStateIconHeight}
-          color='var(--table-with-accordion-icon-color)'
-        />
-      </div>
-      {!disable && isAccordionExpanded && (
-        <div style={{ minHeight }} className="accordion-content">
-          {accordionContent}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Accordion;
+import { useState } from 'react';
+import './Accordion.scss';
+import Icon from '../Icon';
+import '../../../index.scss';
+import { AccordionProps } from './types';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+
+/**
+ * Accordion UI component
+ */
+const Accordion = ({
+  headerTitle = '',
+  color,
+  minHeight = '32px', // Default min-height for accordion content
+  accordionContent = <>This is accordion content</>,
+  disable = false,
+  disableInfoMessage = '',
+  accordionStateIconName = 'arrow_down',
+  AccordionStateIconWidth=12,
+  AccordionStateIconHeight=8,
+  isExpand,
+}: AccordionProps) => {
+  const [isAccordionExpanded, setIsAccordionExpanded] = useState(isExpand ?? true);
+
+  const onAccordionClick = () => {
+    setIsAccordionExpanded(!isAccordionExpanded);
+  };
+  return (
+    <div className="ff-accordion">
+      <div
+        className={`accordion-header ${disable && 'ff-disabled'} ${
+          isAccordionExpanded && 'expanded'
+        }`}
+        style={{ color: color || '--tooltip-bg-color' }}
+        onClick={() => {
+          !disable && onAccordionClick();
+        }}
+      >
+        <Tooltip title={disableInfoMessage}>
+          <Typography
+            as="div"
+            className="header-title"
+            fontWeight="semi-bold"
+            lineHeight="18px"
+          >
+            {headerTitle}
+          </Typography>
+        </Tooltip>
+
+        <Icon
+          name={accordionStateIconName}
+          hoverEffect={false}
+          className={`accordion-arrow  ${isAccordionExpanded && 'expanded'}`}
+          width={AccordionStateIconWidth}
+          height={AccordionStateIconHeight}
+          color='var(--table-with-accordion-icon-color)'
+        />
+      </div>
+      {!disable && isAccordionExpanded && (
+        <div style={{ minHeight }} className="accordion-content">
+          {accordionContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/index.ts

@@ -1 +1 @@
-export { default } from './Accordion';
+export { default } from './Accordion';

package/src/components/Accordion/types.ts

@@ -1,40 +1,44 @@
-import { ReactNode } from 'react';
-
-export interface AccordionProps {
-  /**
-   * Accordion Header Title
-   */
-  headerTitle: string | JSX.Element;
-  /**
-   * Content that to be shown while Accordion is expanded
-   */
-  accordionContent: ReactNode;
-  /**
-   * Custom color for the Accordion header
-   */
-  color?: string;
-  /**
-   * Minimum height for the Accordion
-   */
-  minHeight?: string;
-  /**
-   * Property to disable accordion
-   */
-  disable?: boolean;
-  /**
-   * Info message to user for disabling accordion
-   */
-  disableInfoMessage?: string;
-  /**
-   * Icon name for the Accordion state like expand and collapse
-   */
-  accordionStateIconName?: string; 
-  /**
-     * Accordion collapse and expand Icon width
-     */
-  AccordionStateIconWidth:number,
-  /**
-   * Accordion collapse and expand Icon height
-   */
-  AccordionStateIconHeight:number,
-}
+import { ReactNode } from 'react';
+
+export interface AccordionProps {
+  /**
+   * Accordion Header Title
+   */
+  headerTitle: string | JSX.Element;
+  /**
+   * Content that to be shown while Accordion is expanded
+   */
+  accordionContent: ReactNode;
+  /**
+   * Custom color for the Accordion header
+   */
+  color?: string;
+  /**
+   * Minimum height for the Accordion
+   */
+  minHeight?: string;
+  /**
+   * Property to disable accordion
+   */
+  disable?: boolean;
+  /**
+   * Info message to user for disabling accordion
+   */
+  disableInfoMessage?: string;
+  /**
+   * Icon name for the Accordion state like expand and collapse
+   */
+  accordionStateIconName?: string; 
+  /**
+     * Accordion collapse and expand Icon width
+     */
+  AccordionStateIconWidth:number,
+  /**
+   * Accordion collapse and expand Icon height
+   */
+  AccordionStateIconHeight:number,
+  /**
+   * Optional props for initial state of Accordion
+   */
+  isExpand? : boolean,
+}

package/src/components/AddResourceButton/AddButton.scss

@@ -1,36 +1,36 @@
-.ff-add-button-container {
-  position: relative;
-  border: none;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  background-color: transparent;
-  &.ff-hovered-add-button--primary {
-    background-color: var(--hover-color);
-  }
-  .ff-hovered-add-icon--primary {
-    svg {
-      path {
-        fill: var(--add-icon-hover-color);
-      }
-    }
-  }
-  .ff-add-icon--primary {
-    svg {
-      path {
-        fill: var(--brand-color);
-      }
-    }
-  }
-  .ff-add-button {
-    position: absolute;
-    border: none;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    background: none;
-  }
-}
+.ff-add-button-container {
+  position: relative;
+  border: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: transparent;
+  &.ff-hovered-add-button--primary {
+    background-color: var(--hover-color);
+  }
+  .ff-hovered-add-icon--primary {
+    svg {
+      path {
+        fill: var(--add-icon-hover-color);
+      }
+    }
+  }
+  .ff-add-icon--primary {
+    svg {
+      path {
+        fill: var(--brand-color);
+      }
+    }
+  }
+  .ff-add-button {
+    position: absolute;
+    border: none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    background: none;
+  }
+}