pixel-react-excel-sheet 1.2.0 → 1.2.2

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import RadioGroup from './RadioGroup';
-import { useState } from 'react';
-import Icon from '../Icon';
-
-const meta: Meta<typeof RadioGroup> = {
-  title: 'Components/RadioGroup',
-  component: RadioGroup,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof RadioGroup>;
-
-export const Controlled: Story = {
-  render: () => {
-    const radioOptions = [
-      { value: 'men', label: 'Men' },
-      { value: 'women', label: 'Women' }, // Disabled option
-      { value: 'other', label: 'Other' },
-    ];
-    const [selectedOption, setSelectedOption] = useState('option2');
-    const handleOptionChange = (option: Option) => {
-      setSelectedOption(option.value);
-    };
-    return (
-      <RadioGroup
-        options={radioOptions}
-        onChange={handleOptionChange}
-        name="option"
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export const WithDisabledOption: Story = {
-  render: () => {
-    const radioOptions = [
-      { value: 'men', label: 'Men', disabled: true },
-      { value: 'women', label: 'Women' }, // Disabled option
-      { value: 'other', label: 'Other' },
-    ];
-    const [selectedOption, setSelectedOption] = useState('');
-    const handleOptionChange = (option: Option) => {
-      setSelectedOption(option.value);
-    };
-    return (
-      <RadioGroup
-        options={radioOptions}
-        onChange={handleOptionChange}
-        name="option"
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export const DisabledSelected: Story = {
-  render: () => {
-    const radioOptions = [
-      { value: 'men', label: 'Men' },
-      { value: 'women', label: 'Women', disabled: true }, // Disabled option
-      { value: 'other', label: 'Other' },
-    ];
-    const [selectedOption, setSelectedOption] = useState('women');
-    const handleOptionChange = (option: Option) => {
-      setSelectedOption(option.value);
-    };
-    return (
-      <RadioGroup
-        options={radioOptions}
-        onChange={handleOptionChange}
-        name="gender"
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export const WithToolTipIcon: Story = {
-  render: () => {
-    const radioOptions = [
-      {
-        value: 'men',
-        label: 'Men',
-        showTooltip: true,
-        tooltipChildren: <Icon name="info" />,
-        tooltipTitle: 'Info',
-      },
-      {
-        value: 'women',
-        label: 'Women',
-        showTooltip: true,
-        disabled: true,
-      },
-      {
-        value: 'other',
-        label: 'Other',
-        showTooltip: true,
-        tooltipChildren: <Icon name="info" />,
-        tooltipTitle: 'Info',
-      },
-    ];
-    const [selectedOption, setSelectedOption] = useState('women');
-    const handleOptionChange = (option: Option) => {
-      setSelectedOption(option.value);
-    };
-    return (
-      <RadioGroup
-        options={radioOptions}
-        onChange={handleOptionChange}
-        name="gender"
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export default meta;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import RadioButton from '../RadioButton/RadioButton'; // Adjust the import path as necessary
-import './RadioGroup.scss';
-import classNames from 'classnames';
-
-const RadioGroup: React.FC<RadioGroupProps> = ({
-  options,
-  name,
-  selectedValue,
-  onChange,
-  className,
-}) => {
-  return (
-    <div className={classNames('ff-radio-group', className)}>
-      {options.map((option) => (
-        <RadioButton
-          key={option.value}
-          label={option.label}
-          showTooltip={option?.showTooltip}
-          tooltipChildren={option?.tooltipChildren}
-          tooltipTitle={option?.tooltipTitle}
-          name={name}
-          value={option.value}
-          checked={selectedValue === option.value}
-          onChange={() => onChange?.(option)}
-          disabled={option.disabled}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default RadioGroup;

package/src/components/RadioGroup/index.ts

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

package/src/components/RadioGroup/radioGroupTypes.tsx

@@ -1,72 +0,0 @@
-/**
- * Represents a single option in the radio group.
- */
-interface Option {
-  /**
-   * The unique value of the option.
-   */
-  value: string;
-
-  /**
-   * The display label for the option.
-   */
-  label: string;
-
-  /**
-   * Indicates whether the option is disabled.
-   * Optional.
-   */
-  disabled?: boolean;
-
-  /**
-   * Indicates whether the radio button show the tooltip.
-   * Optional.
-   */
-  showTooltip?: boolean;
-
-  /**
-   * The content of the tooltip.
-   * Optional.
-   */
-  tooltipChildren?: React.ReactNode;
-
-  /**
-   * The content of the tooltip.
-   * Optional.
-   */
-  tooltipTitle?: React.ReactNode;
-}
-
-/**
- * Props for the RadioGroup component.
- */
-interface RadioGroupProps {
-  /**
-   * An array of options to be rendered in the radio group.
-   */
-  options: Option[];
-
-  /**
-   * The name attribute for the radio inputs, used for grouping.
-   */
-  name: string;
-
-  /**
-   * The currently selected value.
-   * Optional.
-   */
-  selectedValue?: string;
-
-  /**
-   * Callback function that is called when the selected option changes.
-   * It receives the selected option as an argument.
-   * Optional.
-   */
-  onChange?: (option: Option) => void;
-
-  /**
-   * Additional class names to apply to the radio group for custom styling.
-   * Optional.
-   */
-  className?: string;
-}

package/src/components/Search/Search.scss

@@ -1,85 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-search-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .ff-search-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 4px;
-    .ff-icon-container {
-      svg {
-        path {
-          fill: var(--brand-color);
-        }
-      }
-    }
-  }
-  .ff-search-input {
-    @extend .fontXs;
-    border: none;
-    color: var(--tooltip-bg-color);
-    line-height: 12px;
-    visibility: hidden;
-    transition: width 0.4s ease;
-    &:focus {
-      outline: none;
-      border: none;
-    }
-
-    &:hover {
-      border: none;
-    }
-  }
-  &.disabled {
-    opacity: 0.5;
-  }
-  &.expanded {
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    .ff-vertical-line {
-      height: 8px;
-      width: 1px;
-      position: relative;
-      right: 2px;
-      border-radius: 1px;
-      margin: 8px 0px;
-      background-color: var(--border-color);
-    }
-    .ff-search-input {
-      visibility: visible;
-
-      &::placeholder {
-        color: var(--ff-search-filed-placeholder-text);
-      }
-    }
-    .ff-search-icon {
-      padding: 4px;
-      border: none;
-      cursor: default;
-    }
-    .ff-search-clear-button {
-      display: grid;
-      place-items: center;
-      cursor: pointer;
-      width: 22px;
-    }
-    .ff-search-close-icon {
-      margin: 4px;
-      cursor: pointer;
-
-      .ff-icon-container {
-        svg {
-          path {
-            fill: var(--ff-search-filed-close-Icon);
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/Search/Search.stories.tsx

@@ -1,26 +0,0 @@
-
-import type { Meta, StoryObj } from '@storybook/react';
-import Search from './Search';
-const meta: Meta<typeof Search> = {
-  title: 'Components/Search',
-  component: Search,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Search>;
-const defaultArgs = {
-  placeholder: 'Search',
-  onSearch: (query: string) => alert(`Searching for: ${query}`),
-  disabled: false,
-  width: 200,
-};
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
-
-export default meta;

package/src/components/Search/Search.tsx

@@ -1,103 +0,0 @@
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import './Search.scss';
-import Icon from '../Icon';
-import { SearchProps } from './types';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import Typography from '../Typography';
-
-const Search = ({
-  placeholder = 'Search',
-  onSearch,
-  disabled = false,
-  width = 150,
-}: SearchProps) => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(false);
-  const [searchvalue, setSearchValue] = useState<string>('');
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && !checkEmpty(searchvalue)) {
-      onSearch(searchvalue.trim());
-    } else if (event?.key === 'Escape') {
-      handleSearchClearAndClose('Close');
-    }
-  };
-  const onChange = (value: string) => {
-    setSearchValue(value);
-    if (value === '') {
-      onSearch('');
-    }
-  };
-  const handleIconClick = () => {
-    setIsExpanded(!disabled);
-  };
-  const handleSearchClearAndClose = (label: string) => {
-    setSearchValue('');
-    onSearch('');
-    if (label === 'Close') {
-      setIsExpanded(false);
-    }
-  };
-
-  return (
-    <div
-      className={classNames('ff-search-container', {
-        expanded: isExpanded,
-        disabled: disabled,
-      })}
-    >
-      <div className="ff-search-icon" onClick={handleIconClick}>
-        <Icon name="search" height={14} width={14} />
-      </div>
-      <div
-        className={classNames('ff-vertical-line', {
-          expanded: isExpanded,
-        })}
-      ></div>
-      <input
-        className="ff-search-input"
-        name="input"
-        style={{ width: isExpanded ? `${width}px` : '0px' }}
-        placeholder={placeholder}
-        type="text"
-        value={searchvalue}
-        disabled={disabled}
-        autoComplete="off"
-        onChange={(e) => {
-          onChange(e.target.value);
-        }}
-        onKeyDown={handleKeyDown}
-      />
-
-      {isExpanded && (
-        <>
-          <div
-            className="ff-search-clear-button"
-            onClick={() => {
-              handleSearchClearAndClose('Clear');
-            }}
-          >
-            {searchvalue !== '' && (
-              <Typography
-                children={'clear'}
-                fontSize={8}
-                color={'var(--ff-search-filed-clear-text)'}
-              />
-            )}
-          </div>
-          <div className="ff-search-close-icon">
-            <Icon
-              height={6}
-              width={6}
-              name="close"
-              hoverEffect={true}
-              onClick={() => {
-                handleSearchClearAndClose('Close');
-              }}
-            />
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-export default Search;

package/src/components/Search/index.ts

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

package/src/components/Search/types.ts

@@ -1,15 +0,0 @@
-export interface SearchProps {
-  /**
-   * Placeholder for the input field
-   */
-  placeholder?: string;
-  /**
-   * Callback function to be called when the search button is clicked or enter key is pressed
-   */
-  onSearch: (query: string) => void;
-  /**
-   * Additional styles for the button
-   */
-  disabled?: boolean;
-  width?: number;
-}

package/src/components/Select/Select.scss

@@ -1,246 +0,0 @@
-@use '../../assets/styles/fonts';
-
-// todo color need to be add into style guide
-@mixin transition-all($time: 0.3s) {
-  transition: opacity $time ease-out, transform $time ease-out,
-    font-size $time ease-out, padding $time ease-out;
-}
-
-@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
-  position: absolute;
-  top: $top;
-  right: $right;
-  bottom: $bottom;
-  left: $left;
-}
-
-@mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
-  opacity: $opacity;
-
-  @if $color {
-    color: $color;
-  }
-
-  @if $border-color-arg {
-    border-color: $border-color-arg;
-  }
-}
-
-.ff-select-wrapper {
-  position: relative;
-
-  .ff-select {
-    @extend .fontSm;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    min-height: 32px;
-    min-width: 100px;
-    display: flex;
-    align-items: end;
-    position: relative;
-
-    &-fieldset {
-      margin: 0;
-      padding: 25px 0px 0px 8px;
-      border: 1px solid transparent;
-      box-sizing: border-box;
-      height: 100%;
-      width: 100%;
-      border-radius: 4px;
-      display: block;
-
-      &--border-radius {
-        border-radius: 0px 4px 4px 0px;
-      }
-
-      &--no-label {
-        padding: 30px 0px 0px 8px;
-      }
-
-      &--default {
-        @include opacity-style(0, null, var(--ff-select-border-color));
-      }
-
-      &--active {
-        @include opacity-style(1, null, var(--ff-select-brand-color));
-      }
-
-      &--option {
-        opacity: 1;
-      }
-
-      &--no-border {
-        border-color: transparent;
-      }
-
-      &--error {
-        border-color: var(--error-light);
-      }
-
-      .ff-select-legend {
-        @extend .font-size-8;
-        padding: 0 2px;
-        letter-spacing: 0.5px;
-
-        &--default {
-          @include transition-all(0.3s);
-          opacity: 0;
-        }
-
-        &--active {
-          @include transition-all(0.25s);
-          @include opacity-style(1, var(--ff-select-brand-color));
-        }
-
-        &--option {
-          @include opacity-style(1, var(--ff-select-default-color));
-        }
-
-        &--error {
-          color: var(--error-light);
-        }
-
-        &--required {
-          margin-right: 2px;
-        }
-      }
-    }
-
-    &-input {
-      @extend .fontSm;
-      @include absolute-position(6px, auto, auto, auto);
-      width: 100%;
-      min-height: calc(100% - 8px);
-      padding: 0 28px 0 8px;
-      border-radius: 4px;
-      border: 1px solid transparent;
-      z-index: 100;
-      background: transparent;
-      outline: none;
-
-      &:hover {
-        ~ .ff-select-label {
-          color: var(--ff-select-text-hover-color);
-        }
-      }
-
-      &--border-radius {
-        border-radius: 0px 4px 4px 0px;
-      }
-
-      &--default {
-        @include opacity-style(1, null, var(--ff-select-border-color));
-
-        &:hover {
-          border-color: var(--ff-select-text-color);
-
-          ~ .ff-select-fieldset--option {
-            border-color: var(--ff-select-text-color);
-
-            .ff-select-legend--option {
-              color: var(--ff-select-text-color);
-            }
-          }
-        }
-      }
-
-      &--no-label {
-        min-height: calc(100% - 2px);
-        margin-top: 0px;
-        top: 0px;
-      }
-
-      &--active {
-        border-color: transparent;
-
-        &:hover {
-          border-color: transparent;
-        }
-      }
-
-      &--no-border {
-        border: none;
-        border-color: transparent;
-
-        &:hover {
-          border-color: transparent;
-
-          ~ .ff-select-fieldset--no-border {
-            border-color: transparent;
-          }
-        }
-      }
-
-      &--disable {
-        border-color: var(--ff-select-border-color);
-
-        &:hover {
-          border-color: var(--ff-select-border-color);
-
-          ~ .ff-select-label--default {
-            color: var(--ff-select-default-color);
-          }
-        }
-      }
-
-      &--error {
-        border-color: var(--error-light);
-
-        &:hover {
-          border-color: var(--error-light);
-        }
-      }
-    }
-
-    &-label {
-      @include absolute-position(13px, auto, auto, 8px);
-      z-index: 1;
-      font-size: 12px;
-      top: 60%;
-      padding-left: 8px;
-
-      &--default {
-        @include transition-all;
-        @include opacity-style(1, var(--ff-select-default-color));
-
-        transform: translateY(-50%);
-      }
-
-      &--active {
-        @extend .font-size-8;
-        @include transition-all;
-        opacity: 0;
-        transform: translateY(-150%);
-        padding: 0 6px;
-      }
-
-      &--required {
-        margin-right: 2px;
-      }
-    }
-
-    &-arrow {
-      position: absolute;
-      top: 60%;
-      height: 100%;
-      right: 10px;
-      transform: rotateX(180deg) translateY(50%);
-      cursor: pointer;
-
-      &--no-label {
-        top: 50%;
-      }
-
-      &--down {
-        transform: rotateX(0deg) translateY(-50%);
-        z-index: 101;
-      }
-    }
-  }
-
-  &-error-text {
-    @include absolute-position(auto, auto, -14px, 12px);
-    white-space: nowrap;
-  }
-}