pixel-react-excel-sheet 1.2.0 → 1.2.1

package/src/components/GridLayout/GridLayout.scss

@@ -1,69 +0,0 @@
-/* Container */
-.ff-container {
-  margin-right: auto;
-  margin-left: auto;
-  width: 90%;
-  display: grid;
-}
-
-.ff-container-fluid {
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  display: grid;
-}
-
-/* Row */
-.ff-row {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-}
-
-/* Column sizes based on a 12-column layout */
-.ff-col {
-  grid-column: span 12;
-}
-
-.ff-col-1 {
-  grid-column: span 1;
-}
-.ff-col-2 {
-  grid-column: span 2;
-}
-.ff-col-3 {
-  grid-column: span 3;
-}
-.ff-col-4 {
-  grid-column: span 4;
-}
-.ff-col-5 {
-  grid-column: span 5;
-}
-.ff-col-6 {
-  grid-column: span 6;
-}
-.ff-col-7 {
-  grid-column: span 7;
-}
-.ff-col-8 {
-  grid-column: span 8;
-}
-.ff-col-9 {
-  grid-column: span 9;
-}
-.ff-col-10 {
-  grid-column: span 10;
-}
-.ff-col-11 {
-  grid-column: span 11;
-}
-.ff-col-12 {
-  grid-column: span 12;
-}
-
-@media (max-width: 768px) {
-  /* Stacking columns on small screens */
-  .ff-col {
-    grid-column: span 12;
-  }
-}

package/src/components/GridLayout/GridLayout.stories.tsx

@@ -1,90 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Container, Row, Col } from './GridLayout';
-import './GridLayoutStory.scss';
-
-const meta: Meta<typeof Container> = {
-  title: 'Components/GridLayout',
-  component: Container,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type ContainerStory = StoryObj<typeof Container>;
-
-const defaultContainerArgs = {
-  fluid: false,
-  gap: '20px',
-};
-
-export const Grid: ContainerStory = {
-  args: {
-    ...defaultContainerArgs,
-  },
-  render: (args) => (
-    <>
-      <Container {...args}>
-        <Row>
-          <Col size={4}>
-            <div className="one">Column 1</div>
-          </Col>
-          <Col size={4}>
-            <div className="two">Column 2</div>
-          </Col>
-          <Col size={4}>
-            <div className="three">Column 3</div>
-          </Col>
-        </Row>
-        <Row>
-          <Col size={6}>
-            <div className="four">Column 4</div>
-          </Col>
-          <Col size={6}>
-            <div className="five">Column 5</div>
-          </Col>
-        </Row>
-      </Container>
-    </>
-  ),
-};
-export const Grid2: ContainerStory = {
-  args: {
-    ...defaultContainerArgs,
-  },
-  render: (args) => (
-    <>
-      <Container {...args}>
-        <Row gap="20px">
-          <Col size={3}>
-            <div className="one">Column 1 (size 3)</div>
-          </Col>
-          <Col size={6}>
-            <div className="two">Column 2 (size 6)</div>
-          </Col>
-          <Col size={3}>
-            <div className="three">Column 3 (size 3)</div>
-          </Col>
-        </Row>
-        <Row gap="10px">
-          <Col size={4}>
-            <div className="four">Column 4 (size 4)</div>
-          </Col>
-          <Col size={4}>
-            <div className="five">Column 5 (size 4)</div>
-          </Col>
-          <Col size={4}>
-            <div className="one">Column 6 (size 4)</div>
-          </Col>
-        </Row>
-        <Row gap="15px">
-          <Col size={12}>
-            <div className="two">Full-width column (size 12)</div>
-          </Col>
-        </Row>
-      </Container>
-    </>
-  ),
-};
-
-export default meta;

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/GridLayoutStory.scss

@@ -1,25 +0,0 @@
-
-@mixin p-20(){
-    padding: 20px;
-}
-
-.one{
-    background-color: var(--brand-color);
-    @include p-20;
-}
-.two{
-    background-color: var(--status-warning-text-color);
-    @include p-20;
-}
-.three{
-    background-color: var(--status-rejected-text-color);
-    @include p-20;
-}
-.four{
-    background-color: var(--status-rejected-bg-color);
-    @include p-20;
-}
-.five{
-    background-color: var(--status-skipped-bg-color);
-    @include p-20;
-}

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.scss

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

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,37 +0,0 @@
-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'],
-};
-
-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 default meta;

package/src/components/Icon/Icon.tsx

@@ -1,49 +0,0 @@
-import { forwardRef } 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,
-      ...props
-    },
-    ref
-  ) => {
-    const IconComponent = Components[name];
-
-    const iconHeight = height || 16;
-    const iconWidth = width || 16;
-
-    if (!IconComponent) {
-      return null;
-    }
-
-    return (
-      <span
-        ref={ref}
-        onClick={disabled ? () => {} : onClick}
-        style={{ height: `${iconHeight}px`, width: `${iconWidth}px` }}
-        className={classNames('ff-icon-container', {
-          'ff-icon-click': !!hoverEffect,
-          'ff-icon-disabled': disabled,
-          [className]: !!className,
-        })}
-        {...props}
-      >
-        <IconComponent height="100%" width="100%" style={{ color: color }} />
-      </span>
-    );
-  }
-);
-
-export default Icon;

package/src/components/Icon/Icons.scss

@@ -1,32 +0,0 @@
-
-.ff-icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.ff-icon-click {
-  cursor: pointer;
-  padding: 4px;
-  box-sizing: content-box;
-  &:hover {
-    border-radius: 4px;
-    background-color: var(--ff-icon-hover-fill-color);
-    & > svg {
-      color: var(--brand-color);
-    }
-  }
-}
-
-.ff-icon-disabled {
-  cursor: no-drop;
-  & > svg {
-    color: var(--toggle-strip-color);
-  }
-  &:hover {
-    box-shadow: none;
-    & > svg {
-      color: var(--toggle-strip-color);
-    }
-  }
-}