pixel-react 1.0.0

package/src/components/GridLayout/GridLayout.scss

@@ -0,0 +1,71 @@
+
+
+/* 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

@@ -0,0 +1,128 @@
+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

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

package/src/components/GridLayout/GridLayoutStory.scss

@@ -0,0 +1,25 @@
+
+@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

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

package/src/components/GridLayout/types.ts

@@ -0,0 +1,64 @@
+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;
+}
+
+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;
+}
+
+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;
+}

package/src/components/HighlightText/HighlightText.scss

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

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

@@ -0,0 +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;

package/src/components/HighlightText/HighlightText.tsx

@@ -0,0 +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;

package/src/components/HighlightText/index.ts

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

package/src/components/HighlightText/types.ts

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

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

@@ -0,0 +1,37 @@
+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: 'delete_black',
+    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

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import Components from './iconList';
+import './Icons.scss';
+import { IconProps } from './types';
+
+const Icon = ({
+  name,
+  height,
+  width,
+  onClick = () => {},
+  color = '#808080',
+  hoverEffect = false,
+  className = '',
+  disabled = false,
+  ...props
+}: IconProps) => {
+  const IconComponent = Components[name];
+
+  const iconHeight = height ? height : 16;
+  const iconWidth = width ? width : 16;
+
+  if (!IconComponent) {
+    return null;
+  }
+
+
+  return (
+    <span
+      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

@@ -0,0 +1,34 @@
+@import '../../assets/styles/colors';
+
+.ff-icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ff-icon-click {
+  cursor: pointer;
+  padding: 5px;
+  box-sizing: content-box;
+  &:hover {
+    border-radius: 50%;
+    background-color: $drawer-footer-bg;
+    box-shadow: 0px 0px 16px $toggle-strip-shadow;
+    & > svg {
+      color: $brand-color;
+    }
+  }
+}
+
+.ff-icon-disabled {
+  cursor: no-drop;
+  & > svg {
+    color: $toggle-strip-color;
+  }
+  &:hover {
+    box-shadow: none;
+    & > svg {
+      color: $toggle-strip-color;
+    }
+  }
+}

package/src/components/Icon/iconList.ts

@@ -0,0 +1,62 @@
+let Components: any = {};
+
+import ManageApps from '../../assets/Icons/manage_apps.svg?react';
+import Logo from '../../assets/icons/logo.svg?react';
+import ArrowUp from '../../assets/icons/arrow_up.svg?react';
+import ArrowRight from '../../assets/icons/arrow_right.svg?react';
+import AccordionHeaderIcon from '../../assets/icons/accordion_header_icon.svg?react';
+import DeleteIcon from '../../assets/icons/delete.svg?react';
+import WarningIcon from '../../assets/icons/warning.svg?react';
+import ToastInfoIcon from '../../assets/icons/info.svg?react';
+import ToastErrorIcon from '../../assets/icons/error.svg?react';
+import ToastCloseIcon from '../../assets/icons/toast_close.svg?react';
+import ToastSuccessIcon from '../../assets/icons/success.svg?react';
+import MoreIcon from '../../assets/icons/more.svg?react';
+import DropZoneIcon from '../../assets/icons/dropzone_icon.svg?react';
+import File from '../../assets/icons/file.svg?react';
+import Replace from '../../assets/icons/replace.svg?react';
+import Remove from '../../assets/icons/remove.svg?react';
+import PlusIcon from '../../assets/icons/plus_icon.svg?react';
+import ArrowsTopIcon from '../../assets/icons/arrows_top_icon.svg?react';
+import ArrowsRightIcon from '../../assets/icons/arrows_right_icon.svg?react';
+import ArrowsDownIcon from '../../assets/icons/arrows_down_icon.svg?react'; // import ArrowUp from '../../assets/Icons/arrow_up.svg?react';
+import ArrowDown from '../../assets/Icons/arrow_down.svg?react';
+import ClosePill from '../../assets/Icons/close_pill.svg?react';
+import MoonStarsIcon from '../../assets/icons/moon_stars.svg?react';
+import SunIcon from '../../assets/icons/sun_icon.svg?react';
+import CheckMarkIcon from '../../assets/icons/check_mark.svg?react';
+import WrongMarkIcon from '../../assets/icons/wrong_mark.svg?react';
+import Tick from '../../assets/Icons/tick_icon.svg?react';
+import Search from '../../assets/icons/search.svg?react';
+
+//icons
+Components['delete'] = DeleteIcon;
+Components['success'] = ToastSuccessIcon;
+Components['warning'] = WarningIcon;
+Components['info'] = ToastInfoIcon;
+Components['error'] = ToastErrorIcon;
+Components['close'] = ToastCloseIcon;
+Components['more'] = MoreIcon;
+Components['logo'] = Logo;
+Components['manage_apps'] = ManageApps;
+Components['arrow_up'] = ArrowUp;
+Components['accordion_header_icon'] = AccordionHeaderIcon;
+Components['dropzone_icon'] = DropZoneIcon;
+Components['file'] = File;
+Components['replace'] = Replace;
+Components['remove'] = Remove;
+Components['plus_icon'] = PlusIcon;
+Components['arrows_top_icon'] = ArrowsTopIcon;
+Components['arrows_right_icon'] = ArrowsRightIcon;
+Components['arrows_down_icon'] = ArrowsDownIcon;
+Components['arrow_down'] = ArrowDown;
+Components['close_pill'] = ClosePill;
+Components['moon_stars_icon'] = MoonStarsIcon;
+Components['sun_icon'] = SunIcon;
+Components['check_mark'] = CheckMarkIcon;
+Components['wrong_mark'] = WrongMarkIcon;
+Components['tick'] = Tick;
+Components['arrow_right'] = ArrowRight;
+Components['search'] = Search;
+
+export default Components;

package/src/components/Icon/index.ts

@@ -0,0 +1 @@
+export { default } from './Icon';

package/src/components/Icon/types.ts

@@ -0,0 +1,10 @@
+export interface IconProps {
+  name: string;
+  className?: string;
+  height?: number;
+  width?: number;
+  color?: string;
+  onClick?: (data?: any) => void;
+  hoverEffect?: boolean;
+  disabled?: boolean;
+}