pixel-react 1.0.0

package/src/components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,260 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import './MultiSelect.scss';
+import Dropdown from './Dropdown';
+import Icon from '../Icon';
+import { MultiSelectProps, Option } from './MultiSelectTypes';
+
+const ChipElement = ({
+  label,
+  onChipCloseClick,
+}: {
+  label: string;
+  onChipCloseClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}) => {
+  if (label) {
+    return (
+      <div className="ff-multiselect-chip">
+        <span className="ff-multiselect-chip-label"> {label}</span>
+        <Icon
+          color="#71347b"
+          className="ff-multiselect-chip-close-icon"
+          onClick={onChipCloseClick}
+          name="close_pill"
+        />
+      </div>
+    );
+  }
+  return null;
+};
+const MultiSelect = ({
+  options,
+  selectedOptions = [],
+  onChange = () => {},
+  zIndex = 100,
+  label = '',
+  onSearch = () => {},
+  required = false,
+  disabled = false,
+  errorMessage = 'Fill this field',
+}: MultiSelectProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [allOptions, setAllOptions] = useState(options);
+
+  const [searchedKeyword, setSearchedKeyword] = useState('');
+  const [isSelectFocusedOnce, setIsSelectFocusedOnce] =
+    useState<boolean>(false);
+
+  const [dropdownPosition, setDropdownPosition] = useState<{
+    top: number;
+    left: number;
+    width: number;
+    fromBottom: number;
+    selectHeight: number;
+  }>({
+    top: 0,
+    left: 0,
+    width: 0,
+    fromBottom: 0,
+    selectHeight: 0,
+  });
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownWrapper = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLInputElement>(null);
+  const selectWrapper = useRef<HTMLInputElement>(null);
+  let isFieldSkipped = isSelectFocusedOnce && selectedOptions.length === 0;
+
+  const handleClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  };
+
+  const toggleDropdown = () => {
+    inputRef.current?.focus();
+    setIsOpen((prev) => !prev);
+    if (!isSelectFocusedOnce && isOpen) {
+      setIsSelectFocusedOnce(true);
+    }
+  };
+  const handleOptionChange = (selectedOption: Option, isChecked: boolean) => {
+    inputRef.current?.focus();
+    const updatedOptions = allOptions.map((option) =>
+      option.value === selectedOption.value ? { ...option, isChecked } : option
+    );
+
+    setAllOptions(updatedOptions);
+    const tempCheckedOptions = updatedOptions
+      .filter((option) => option.isChecked)
+      .map(({ isChecked, ...rest }) => rest);
+    if (!isSelectFocusedOnce) {
+      setIsSelectFocusedOnce(true);
+    }
+    onChange && onChange(tempCheckedOptions);
+  };
+  const handleChipCloseClick = (
+    option: Option,
+    e: React.MouseEvent<HTMLDivElement>
+  ) => {
+    e.stopPropagation();
+    handleOptionChange(option, false);
+  };
+  const calculatePosition = () => {
+    if (dropdownWrapper.current && selectWrapper.current) {
+      const rect = dropdownWrapper.current?.getBoundingClientRect();
+      const rect2 = selectWrapper.current?.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+        fromBottom: document.documentElement.clientHeight - (rect.bottom - 4),
+        selectHeight: rect2.height,
+      });
+    }
+  };
+  useEffect(() => {
+    if (isOpen) {
+      calculatePosition();
+    }
+  }, [isOpen, allOptions]);
+  const onSelectToggleScroll = (isEnabled: boolean) => {
+    const bodyScrollWidth = window.innerWidth - document.body.clientWidth;
+    document.body.style.paddingRight = isEnabled ? '' : `${bodyScrollWidth}px`;
+    document.body.style.overflow = isEnabled ? '' : 'hidden';
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      onSelectToggleScroll(!isOpen);
+    }
+
+    if (dropdownRef?.current) {
+      inputRef?.current?.focus();
+    }
+    return () => {
+      onSelectToggleScroll(true);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (options?.length > 0) {
+      const initializeOptions = options.map((option) => ({
+        ...option,
+        isChecked: selectedOptions.some(
+          (selectedOption) => selectedOption.value === option.value
+        ),
+      }));
+      setAllOptions(initializeOptions);
+    }
+    const handleClickAnywhere = (event: MouseEvent) => {
+      if (
+        dropdownWrapper.current &&
+        inputRef.current &&
+        selectWrapper.current &&
+        dropdownRef.current &&
+        !inputRef.current.contains(event?.target as Node) &&
+        !dropdownRef.current.contains(event?.target as Node) &&
+        !selectWrapper.current.contains(event?.target as Node)
+      ) {
+        setIsOpen(false);
+        if (!isSelectFocusedOnce) {
+          setIsSelectFocusedOnce(true);
+        }
+      }
+    };
+    window.addEventListener('resize', calculatePosition);
+    window.addEventListener('click', handleClickAnywhere);
+    return () => {
+      window.removeEventListener('resize', calculatePosition);
+      window.removeEventListener('click', handleClickAnywhere);
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
+  return (
+    <div
+      ref={selectWrapper}
+      className={classNames('ff-multiselect-wrapper', {
+        'ff-multiselect-wrapper--with-options': selectedOptions?.length,
+        'ff-multiselect-wrapper--opened-dropdown': isOpen,
+        'ff-multiselect-wrapper--error': isFieldSkipped && required,
+        'ff-multiselect-wrapper--disabled': disabled,
+      })}
+    >
+      <div className="ff-multiselect" onClick={handleClick}>
+        <div className="ff-multiselect__main">
+          <span
+            className={classNames({
+              'active-default-label':
+                isOpen ||
+                selectedOptions?.length ||
+                (isFieldSkipped && required),
+              'default-label': !isOpen && !selectedOptions?.length,
+            })}
+          >
+            {label}
+          </span>
+          <div className="ff-multiselect-chip-container">
+            {selectedOptions.map((option) => (
+              <ChipElement
+                key={option?.label}
+                label={option?.label || ''}
+                onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+              />
+            ))}
+            <div className="ff-multiselect-input-container">
+              <input
+                autoComplete="off"
+                placeholder="search..."
+                ref={inputRef}
+                onChange={(e) => {
+                  if (!isOpen) {
+                    setIsOpen(true);
+                  }
+                  setSearchedKeyword(e.target.value);
+                  onSearch?.(e.target.value);
+                }}
+                id="input-ele"
+                className="ff-select-input"
+                style={{
+                  display:
+                    isOpen || selectedOptions.length ? 'inherit' : 'none',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+        <div onClick={toggleDropdown} className="ff-multiselect__toggle">
+          <Icon
+            name="arrow_down"
+            className={classNames({
+              'ff-select-arrow--opened-dropdown': isOpen,
+              'ff-select-arrow': !isOpen,
+            })}
+            color={isOpen ? '#71347b' : '#a3a3a3'}
+          />
+        </div>
+      </div>
+      <div ref={dropdownWrapper}>
+        {isFieldSkipped && required && errorMessage && (
+          <div className="error-text">{errorMessage}</div>
+        )}
+        {isOpen &&
+          createPortal(
+            <Dropdown
+              ref={dropdownRef}
+              searchedKeyword={searchedKeyword}
+              checkedOptions={selectedOptions}
+              handleOptionChange={handleOptionChange}
+              options={allOptions}
+              dropdownPosition={dropdownPosition}
+              zIndex={zIndex}
+            />,
+            document.body
+          )}
+      </div>
+    </div>
+  );
+};
+
+export default MultiSelect;

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -0,0 +1,19 @@
+interface Option {
+  label?: string;
+  value?: string;
+  accessor?: string;
+  isChecked?: boolean;
+}
+interface MultiSelectProps {
+  options: Option[];
+  label: string;
+  selectedOptions?: Option[];
+  disabled?: boolean;
+  onSearch?: (searchedKeyword: string) => void;
+  onChange?: (selectedOptions: Option[]) => void;
+  zIndex?: number;
+  required?: boolean;
+  errorMessage?: string;
+}
+
+export { Option, MultiSelectProps };

package/src/components/MultiSelect/dropdownTypes.ts

@@ -0,0 +1,15 @@
+import { Option } from './MultiSelectTypes';
+export const dropdownDefaultCSSData = {
+  verticalMargin: 4,
+  optionHeight: 32,
+  maxDropdownHeight: 160,
+};
+export interface DropdownProps {
+  options: Option[];
+  style?: React.CSSProperties;
+  handleOptionChange: (option: Option, isChecked: boolean) => void;
+  checkedOptions: Option[];
+  searchedKeyword: undefined | string;
+  dropdownPosition: any;
+  zIndex: number;
+}

package/src/components/MultiSelect/index.ts

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

package/src/components/RadioButton/RadioButton.scss

@@ -0,0 +1,99 @@
+@import '../../assets/styles/_colors';
+@import '../../assets/styles/_fonts';
+
+@mixin circle($size, $border: none) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  @if $border != none {
+    border: $border;
+  }
+}
+@mixin transition($properties, $duration: 0.3s) {
+  transition: $properties $duration;
+}
+
+.ff-radio {
+  @extend .fontSm;
+  position: relative;
+  color: $text-color;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .ff-radio-input {
+    display: none;
+  }
+  .ff-radio-custom {
+    box-sizing: border-box;
+    @include circle(16px, 1px solid var(--radio-button-border)); //todo
+    position: relative;
+    margin-right: 8px;
+    @include transition(border-color, background-color);
+
+    &::before {
+      content: '';
+      @include circle(14px);
+      background: #fbfdff; //todo
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      @include transition(background-color);
+    }
+
+    &::after {
+      content: '';
+      @include circle(16px, 4px solid #f7edff); //todo
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      @include transition(opacity);
+    }
+  }
+
+  &:hover .ff-radio-custom {
+    border: 1px solid var(--brand-color);
+    &::before {
+      background-color: var(--drawer-footer-bg);
+    }
+    &::after {
+      opacity: 1;
+      @include transition(opacity);
+    }
+  }
+  .ff-radio-input:checked + .ff-radio-custom {
+    border-color: var(--brand-color);
+
+    &::before {
+      background: var(--brand-color);
+      height: 12px;
+      width: 12px;
+    }
+  }
+  .ff-radio-input:disabled + .ff-radio-custom {
+    border: 1px solid var(--radio-button-border);
+    &::before {
+      background: var(--drawer-footer-bg);
+    }
+
+    &::after {
+      border: 4px solid var(--radio-button-hover);
+      opacity: 0;
+      @include transition(opacity);
+    }
+  }
+
+  .ff-radio-input:checked:disabled + .ff-radio-custom {
+    border-color: var(--brand-color);
+    background-color: var(--drawer-footer-bg);
+    &::before {
+      background: var(--brand-color);
+    }
+  }
+  &--disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+}

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioButton from './RadioButton';
+
+const meta: Meta<typeof RadioButton> = {
+  title: 'Components/RadioButton',
+  component: RadioButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof RadioButton>;
+
+export const Default: Story = {
+  args: {
+    label: 'men',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    label: 'women',
+    checked: true,
+  },
+};
+export const UncheckedDisabled: Story = {
+  args: {
+    label: 'women',
+    disabled: true,
+  },
+};
+export const CheckedDisabled: Story = {
+  args: {
+    label: 'women',
+    disabled: true,
+    checked: true,
+  },
+};
+
+export const WithoutLabel: Story = {};
+
+export default meta;

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import './RadioButton.scss';
+import classNames from 'classnames';
+
+const RadioButton: React.FC<RadioButtonProps> = ({
+  label,
+  name,
+  checked,
+  onChange,
+  value,
+  disabled = false,
+}) => {
+  return (
+    <label
+      className={classNames('ff-radio', { 'ff-radio--disabled': disabled })}
+    >
+      <input
+        disabled={disabled}
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={onChange}
+        className="ff-radio-input"
+      />
+      <span className="ff-radio-custom" />
+      {label}
+    </label>
+  );
+};
+
+export default RadioButton;

package/src/components/RadioButton/index.ts

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

package/src/components/RadioButton/radioButtonTypes.tsx

@@ -0,0 +1,40 @@
+/**
+ * Props for the RadioButton component.
+ */
+interface RadioButtonProps {
+  /**
+   * The display label for the radio button.
+   * Optional.
+   */
+  label?: string;
+
+  /**
+   * The name attribute for the radio button, used for grouping.
+   */
+  name: string;
+
+  /**
+   * The unique value of the radio button.
+   * Optional.
+   */
+  value?: string;
+
+  /**
+   * Indicates whether the radio button is checked.
+   * Optional.
+   */
+  checked?: boolean;
+
+  /**
+   * Callback function that is called when the radio button's value changes.
+   * Receives the change event as an argument.
+   * Optional.
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   * Indicates whether the radio button is disabled.
+   * Optional.
+   */
+  disabled?: boolean;
+}

package/src/components/RadioGroup/RadioGroup.scss

@@ -0,0 +1,5 @@
+.ff-radio-group {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioGroup from './RadioGroup';
+import { useState } from 'react';
+
+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 DisabledSelcted: 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 default meta;

package/src/components/RadioGroup/RadioGroup.tsx

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

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

package/src/components/RadioGroup/radioGroupTypes.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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;
+}
+
+/**
+ * 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;
+}