pixel-react 1.10.15 → 1.10.16

package/src/components/GridLayout/GridLayout.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import './GridLayout.scss';
-import { ContainerProps, RowProps, ColProps } from './types';
-import cx from 'classnames';
-
-export const Container: React.FC<ContainerProps> = ({
-  children,
-  fluid = false,
-  gap = '0px',
-  className = '',
-}) => {
-  const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
-  return (
-    <div className={cx(containerClassName, className)} style={{ gap }}>
-      {children}
-    </div>
-  );
-};
-
-export const Row: React.FC<RowProps> = ({
-  children,
-  gap = '0px',
-  className = '',
-}) => {
-  return (
-    <div className={cx('ff-row', className)} style={{ gap }}>
-      {children}
-    </div>
-  );
-};
-
-export const Col: React.FC<ColProps> = ({
-  children,
-  size = 12,
-  className = '',
-}) => {
-  const colClassName = `ff-col-${size}`;
-  return <div className={cx(colClassName, className)}>{children}</div>;
-};

package/src/components/GridLayout/index.ts

@@ -1 +0,0 @@
-export default './GridLayout.tsx'

package/src/components/GridLayout/types.ts

@@ -1,84 +0,0 @@
-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.stories.tsx

@@ -1,22 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-export { default } from './HighlightText';

package/src/components/HighlightText/types.ts

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

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

@@ -1,113 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Icon from './Icon';
-import Components from './iconList';
-import React, { useState } from 'react';
-
-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: () => {
-    const [searchTerm, setSearchTerm] = useState('');
-
-    const filteredIcons = Object.keys(Components).filter((iconName) =>
-      iconName.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-
-    return (
-      <div>
-        <input
-          type="text"
-          placeholder="Search icons..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          style={{
-            marginBottom: '16px',
-            padding: '8px',
-            width: '100%',
-            boxSizing: 'border-box',
-          }}
-        />
-        <div
-          className="group-icons"
-          style={{
-            display: 'flex',
-            gap: 8,
-            flexWrap: 'wrap',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          {filteredIcons.map((iconName) => (
-            <div
-              key={iconName}
-              style={{
-                border: '1px solid var(--brand-color)',
-                width: '30%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexDirection: 'column',
-              }}
-            >
-              <Icon name={iconName} height={40} width={40} />
-              <p
-                style={{
-                  whiteSpace: 'nowrap',
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden',
-                  width: '160px',
-                }}
-                title={iconName}
-              >
-                {iconName}
-              </p>
-            </div>
-          ))}
-        </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 +0,0 @@
-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;