pixel-react 1.6.9 → 1.7.0

package/src/components/GridLayout/types.ts

@@ -1,84 +1,84 @@
-import { ReactNode } from 'react';
-
-export interface ContainerProps {
-  /**
-   * The content to be displayed inside the container.
-   * Typically consists of rows and columns.
-   *
-   * @type {ReactNode}
-   */
-  children: ReactNode;
-
-  /**
-   * Determines if the container should be fluid (expand to 100% width) or fixed width.
-   *
-   * @default false
-   * @type {boolean}
-   */
-  fluid?: boolean;
-
-  /**
-   * Defines the gap (spacing) between the rows and columns inside the container.
-   * Accepts any valid CSS size value (e.g., '10px', '1rem', etc.).
-   *
-   * @default '0px'
-   * @type {string}
-   */
-  gap?: string;
-
-  /**
-   * Classname for Container
-   * @default ''
-   * @type {string}
-   */
-  className?:string
-}
-
-export interface RowProps {
-  /**
-   * The content to be displayed inside the row, usually consisting of columns (`<Col />`).
-   *
-   * @type {ReactNode}
-   */
-  children: ReactNode;
-
-  /**
-   * The gap (spacing) between columns within the row.
-   * Accepts any valid CSS size value.
-   *
-   * @default '0px'
-   * @type {string}
-   */
-  gap?: string;
-
-  /**
-   * @default ''
-   * @type string
-   */
-  className?:string
-}
-
-export interface ColProps {
-  /**
-   * The content to be displayed inside the column.
-   *
-   * @type {ReactNode}
-   */
-  children: ReactNode;
-
-  /**
-   * Defines the width of the column as a fraction of 12 (for a 12-column grid system).
-   * For example, `size={6}` would make the column take up half the width of the row.
-   *
-   * @default 12
-   * @type {number}
-   */
-  size?: number;
-
-  /**
-   * @default  ''
-   * @type string
-   * 
-   */
-  className?: string;
-}
+import { ReactNode } from 'react';
+
+export interface ContainerProps {
+  /**
+   * The content to be displayed inside the container.
+   * Typically consists of rows and columns.
+   *
+   * @type {ReactNode}
+   */
+  children: ReactNode;
+
+  /**
+   * Determines if the container should be fluid (expand to 100% width) or fixed width.
+   *
+   * @default false
+   * @type {boolean}
+   */
+  fluid?: boolean;
+
+  /**
+   * Defines the gap (spacing) between the rows and columns inside the container.
+   * Accepts any valid CSS size value (e.g., '10px', '1rem', etc.).
+   *
+   * @default '0px'
+   * @type {string}
+   */
+  gap?: string;
+
+  /**
+   * Classname for Container
+   * @default ''
+   * @type {string}
+   */
+  className?:string
+}
+
+export interface RowProps {
+  /**
+   * The content to be displayed inside the row, usually consisting of columns (`<Col />`).
+   *
+   * @type {ReactNode}
+   */
+  children: ReactNode;
+
+  /**
+   * The gap (spacing) between columns within the row.
+   * Accepts any valid CSS size value.
+   *
+   * @default '0px'
+   * @type {string}
+   */
+  gap?: string;
+
+  /**
+   * @default ''
+   * @type string
+   */
+  className?:string
+}
+
+export interface ColProps {
+  /**
+   * The content to be displayed inside the column.
+   *
+   * @type {ReactNode}
+   */
+  children: ReactNode;
+
+  /**
+   * Defines the width of the column as a fraction of 12 (for a 12-column grid system).
+   * For example, `size={6}` would make the column take up half the width of the row.
+   *
+   * @default 12
+   * @type {number}
+   */
+  size?: number;
+
+  /**
+   * @default  ''
+   * @type string
+   * 
+   */
+  className?: string;
+}

package/src/components/HighlightText/HighlightText.scss

@@ -1,3 +1,3 @@
-.ff-highlight-bg {
-  background-color: var(--text-bg-highlight);
-}
+.ff-highlight-bg {
+  background-color: var(--text-bg-highlight);
+}

package/src/components/HighlightText/HighlightText.stories.tsx

@@ -1,22 +1,22 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import HighlightText from './HighlightText';
-
-const meta: Meta<typeof HighlightText> = {
-  title: 'Components/HighlightText',
-  component: HighlightText,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof HighlightText>;
-
-export const Primary: Story = {
-  args: {
-    text: 'Hello team do use Highlight component in Name column to highlight searched text',
-    highlight: 'hello',
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import HighlightText from './HighlightText';
+
+const meta: Meta<typeof HighlightText> = {
+  title: 'Components/HighlightText',
+  component: HighlightText,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof HighlightText>;
+
+export const Primary: Story = {
+  args: {
+    text: 'Hello team do use Highlight component in Name column to highlight searched text',
+    highlight: 'hello',
+  },
+};
+
+export default meta;

package/src/components/HighlightText/HighlightText.tsx

@@ -1,33 +1,33 @@
-import { HighlightTextProps } from './types';
-import './HighlightText.scss';
-
-// Function to escape special characters in the search term
-const escapeRegExp = (text: String): string => {
-  return text?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-};
-
-const HighlightText: React.FC<HighlightTextProps> = ({
-  text = '',
-  highlight = '',
-}) => {
-  if (!highlight) return <span>{text}</span>;
-
-  const escapedHighlight = escapeRegExp(highlight); // Escape special characters
-  const parts = text?.split(new RegExp(`(${escapedHighlight})`, 'gi')); // Use escaped string in the regex
-
-  return (
-    <>
-      {parts.map((part, index) =>
-        part?.toLowerCase() === highlight?.toLowerCase() ? (
-          <span key={index} className="ff-highlight-bg">
-            {part}
-          </span>
-        ) : (
-          part
-        )
-      )}
-    </>
-  );
-};
-
-export default HighlightText;
+import { HighlightTextProps } from './types';
+import './HighlightText.scss';
+
+// Function to escape special characters in the search term
+const escapeRegExp = (text: String): string => {
+  return text?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+};
+
+const HighlightText: React.FC<HighlightTextProps> = ({
+  text = '',
+  highlight = '',
+}) => {
+  if (!highlight) return <span>{text}</span>;
+
+  const escapedHighlight = escapeRegExp(highlight); // Escape special characters
+  const parts = text?.split(new RegExp(`(${escapedHighlight})`, 'gi')); // Use escaped string in the regex
+
+  return (
+    <>
+      {parts.map((part, index) =>
+        part?.toLowerCase() === highlight?.toLowerCase() ? (
+          <span key={index} className="ff-highlight-bg">
+            {part}
+          </span>
+        ) : (
+          part
+        )
+      )}
+    </>
+  );
+};
+
+export default HighlightText;

package/src/components/HighlightText/index.ts

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

package/src/components/HighlightText/types.ts

@@ -1,4 +1,4 @@
-export interface HighlightTextProps {
-  text?: string;
-  highlight?: String;
-}
+export interface HighlightTextProps {
+  text?: string;
+  highlight?: String;
+}

package/src/components/Icon/Icon.stories.tsx

@@ -1,65 +1,65 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Icon from './Icon';
-import Components from './iconList';
-
-const meta: Meta<typeof Icon> = {
-  title: 'Components/Icon',
-  component: Icon,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['light', 'dark'],
-    },
-  },
-};
-
-type Story = StoryObj<typeof Icon>;
-
-export const Icons: Story = {
-  args: {
-    name: 'more',
-    color: '',
-  },
-};
-
-export const AllIcons: Story = {
-  render: () => {
-    return (
-      <div className="group-icons">
-        {Object.keys(Components).map((iconName) => {
-          return (
-            <div key={iconName}>
-              <Icon name={iconName} height={40} width={40} />
-              <center title={iconName}>{iconName}</center>
-            </div>
-          );
-        })}
-      </div>
-    );
-  },
-};
-
-export const DarkVariantIcons: Story = {
-  args: {
-    name: 'hamburger_menu',
-    color: 'var(--ff-icon-color-dark-variant)',
-    variant: 'dark',
-    hoverEffect: true,
-  },
-  render: (args) => {
-    const backgroundColor = args.variant === 'dark' ? '#000' : '#fff';
-    const iconColor =
-      args.variant === 'dark'
-        ? 'var(--ff-icon-color-dark-variant)'
-        : 'var(--brand-color)';
-
-    return (
-      <div style={{ backgroundColor, padding: '20px' }}>
-        <Icon {...args} color={iconColor} height={16} width={16} />
-      </div>
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Icon from './Icon';
+import Components from './iconList';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Components/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['light', 'dark'],
+    },
+  },
+};
+
+type Story = StoryObj<typeof Icon>;
+
+export const Icons: Story = {
+  args: {
+    name: 'more',
+    color: '',
+  },
+};
+
+export const AllIcons: Story = {
+  render: () => {
+    return (
+      <div className="group-icons">
+        {Object.keys(Components).map((iconName) => {
+          return (
+            <div key={iconName}>
+              <Icon name={iconName} height={40} width={40} />
+              <center title={iconName}>{iconName}</center>
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+};
+
+export const DarkVariantIcons: Story = {
+  args: {
+    name: 'hamburger_menu',
+    color: 'var(--ff-icon-color-dark-variant)',
+    variant: 'dark',
+    hoverEffect: true,
+  },
+  render: (args) => {
+    const backgroundColor = args.variant === 'dark' ? '#000' : '#fff';
+    const iconColor =
+      args.variant === 'dark'
+        ? 'var(--ff-icon-color-dark-variant)'
+        : 'var(--brand-color)';
+
+    return (
+      <div style={{ backgroundColor, padding: '20px' }}>
+        <Icon {...args} color={iconColor} height={16} width={16} />
+      </div>
+    );
+  },
+};
+
+export default meta;

package/src/components/Icon/Icon.tsx

@@ -1,88 +1,88 @@
-import { forwardRef, useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import Components from './iconList';
-import './Icons.scss';
-import { IconProps } from './types';
-
-const Icon = forwardRef<HTMLSpanElement, IconProps>(
-  (
-    {
-      name,
-      height,
-      width,
-      onClick = () => {},
-      color = 'var(--brand-color)', // Default color
-      hoverEffect = false,
-      className = '',
-      disabled = false,
-      variant = 'light',
-      x,
-      y,
-      chartIcon = false,
-      ...props
-    },
-    ref
-  ) => {
-    const IconComponent = Components[name];
-
-    const iconHeight = height || 16;
-    const iconWidth = width || 16;
-
-    if (!IconComponent) {
-      return null;
-    }
-    const iconRef = useRef<SVGSVGElement | null>(null);
-
-    useEffect(() => {
-      if (iconRef.current) {
-        if (x !== undefined) {
-          iconRef.current.setAttribute('x', String(x));
-        }
-        if (y !== undefined) {
-          iconRef.current.setAttribute('y', String(y));
-        }
-      }
-    }, [x, y]);
-
-    const iconColor =
-      variant === 'dark' ? 'var(--ff-icon-color-dark-variant)' : color;
-
-    const baseProps = {
-      ref: iconRef,
-      onClick: disabled ? () => {} : onClick,
-      style: { height: `${iconHeight}px`, width: `${iconWidth}px` },
-      className: classNames('ff-icon-container', {
-        'ff-icon-click': hoverEffect,
-        'ff-icon-disabled': disabled,
-        'ff-icon-dark': variant === 'dark',
-        'ff-icon-danger': variant === 'danger',
-        [className]: !!className,
-      }),
-      ...props,
-    };
-
-    return (
-      <>
-        {chartIcon === false ? (
-          <span {...baseProps} ref={ref}>
-            <IconComponent
-              height="100%"
-              width="100%"
-              style={{ color: iconColor }}
-            />
-          </span>
-        ) : (
-          <svg {...baseProps}>
-            <IconComponent
-              style={{ color: color }}
-              height={height}
-              width={width}
-            />
-          </svg>
-        )}
-      </>
-    );
-  }
-);
-
-export default Icon;
+import { forwardRef, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import Components from './iconList';
+import './Icons.scss';
+import { IconProps } from './types';
+
+const Icon = forwardRef<HTMLSpanElement, IconProps>(
+  (
+    {
+      name,
+      height,
+      width,
+      onClick = () => {},
+      color = 'var(--brand-color)', // Default color
+      hoverEffect = false,
+      className = '',
+      disabled = false,
+      variant = 'light',
+      x,
+      y,
+      chartIcon = false,
+      ...props
+    },
+    ref
+  ) => {
+    const IconComponent = Components[name];
+
+    const iconHeight = height || 16;
+    const iconWidth = width || 16;
+
+    if (!IconComponent) {
+      return null;
+    }
+    const iconRef = useRef<SVGSVGElement | null>(null);
+
+    useEffect(() => {
+      if (iconRef.current) {
+        if (x !== undefined) {
+          iconRef.current.setAttribute('x', String(x));
+        }
+        if (y !== undefined) {
+          iconRef.current.setAttribute('y', String(y));
+        }
+      }
+    }, [x, y]);
+
+    const iconColor =
+      variant === 'dark' ? 'var(--ff-icon-color-dark-variant)' : color;
+
+    const baseProps = {
+      ref: iconRef,
+      onClick: disabled ? () => {} : onClick,
+      style: { height: `${iconHeight}px`, width: `${iconWidth}px` },
+      className: classNames('ff-icon-container', {
+        'ff-icon-click': hoverEffect,
+        'ff-icon-disabled': disabled,
+        'ff-icon-dark': variant === 'dark',
+        'ff-icon-danger': variant === 'danger',
+        [className]: !!className,
+      }),
+      ...props,
+    };
+
+    return (
+      <>
+        {chartIcon === false ? (
+          <span {...baseProps} ref={ref}>
+            <IconComponent
+              height="100%"
+              width="100%"
+              style={{ color: iconColor }}
+            />
+          </span>
+        ) : (
+          <svg {...baseProps}>
+            <IconComponent
+              style={{ color: color }}
+              height={height}
+              width={width}
+            />
+          </svg>
+        )}
+      </>
+    );
+  }
+);
+
+export default Icon;