pixel-react 1.0.0

package/src/components/MiniModal/types.ts

@@ -0,0 +1,88 @@
+import { ReactNode, RefObject } from 'react';
+interface ButtonProps {
+  text: string;
+  onClick: () => void;
+}
+interface ModalDimensions {
+  width?: number;
+  height?: number;
+}
+export interface MiniEditModalProps {
+  /**
+   * A reference to the button element that triggers the modal.
+   */
+  anchorRef: RefObject<HTMLButtonElement>;
+  /**
+   * Optional properties for configuring the modal header.
+   */
+  headerProps?: ReactNode;
+  /**
+   * The main content to be displayed inside the modal
+   */
+  childContent: ReactNode;
+  /**
+   * Props for the cancel button inside the modal
+   */
+  cancelButtonProps: ButtonProps;
+  /**
+   * Props for the proceed button inside the modal.
+   */
+  proceedButtonProps: ButtonProps;
+  /**
+   * Optional content for the footer of the modal.
+   */
+  footerContent?: ReactNode;
+  /**
+   * Determines if the modal should be wrapped inside a container element.
+   */
+  isWrapped?: boolean;
+  /**
+   * Determines if the modal should have an animation when displayed.
+   */
+  isAnimated?: boolean;
+  /**
+   * Specifies if the modal should behave as a popover with an arrow.
+   */
+  isPopOver?: boolean;
+  /**
+   * Sets the position of the modal relative to its anchor.
+   * bottom: The modal appears below the anchor.
+   * right: The modal appears to the right of the anchor.
+   */
+  modalPosition?: 'bottom' | 'right' | 'top' | 'left';
+  /**
+   * Adds a top-left aligned arrow to the modal when its position is set to `'right'`.
+   */
+  leftTopArrow?: boolean;
+  /**
+   * A reference to an additional anchor element for positioning the modal.
+   */
+  firstAnchorRef?: RefObject<HTMLButtonElement>;
+  /**
+   * A numeric value representing the left position of the anchor element, used to calculate the modal's left position.
+   */
+  anchorRefLeftNum?: number;
+  /**
+   * Optional properties for configuring the modal's dimensions.
+   * width: The width of the modal.
+   * height: The height of the modal.
+   */
+  modalProperties?: ModalDimensions;
+  /**distance for the wrapper model from align alignments */
+  anchorLeftDistanceForWrapper?: number;
+  /**extra top space added from anchor */
+  extraTopSpace?: {
+    wrappedModal?: number;
+    normalModal?: number;
+  };
+  /**extra right space added from anchor */
+  extraRightSpace?: {
+    leftTopArrow?: number;
+    middleLeftArrow?: number;
+  };
+  /**extra left space added from anchor */
+  extraLeftSpace?: {
+    normal?: number;
+    rightAlignModal?: number;
+  };
+}

package/src/components/MultiSelect/Dropdown.scss

@@ -0,0 +1,66 @@
+@use '../../assets/styles/fonts';
+
+.ff-multiselect-dropdown-container {
+  position: absolute;
+  background: var(--drawer-footer-bg);
+  z-index: 1000;
+  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+  border: 0.5px solid var(--ff-select-option-border-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  margin-block: 4px;
+  max-height: 160px;
+  overflow-y: auto; // Change from scroll to auto to avoid arrow buttons
+
+  // WebKit scrollbar styles
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 40px;
+    border-radius: 12px 0px 0px 0px;
+    background: var(--description-text);
+
+    &-track {
+      background: var(--ff-select-scroll-track-bg);
+    }
+
+    &-thumb {
+      background: var(--description-text);
+      border-radius: 10px;
+
+      &:hover {
+        background: var(--ff-select-scroll-thumb-hove);
+      }
+    }
+  }
+
+  .no-options {
+    @extend .fontMd;
+    color: var(--pop-up-background-blur);
+    text-align: center;
+    margin: 0;
+    padding: 10px;
+    line-height: 12px;
+  }
+  .dropdown-option-container {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    padding: 4px 8px;
+    gap: 4px;
+    border-radius: 4px 0px 0px 0px;
+    background-color: white;
+
+    .dropdown-option-label {
+      @extend .fontMd;
+      color: var(--pop-up-background-blur);
+    }
+    &:hover {
+      background-color: var(--hover-color);
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/src/components/MultiSelect/Dropdown.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, useContext } from 'react';
+import { dropdownDefaultCSSData, DropdownProps } from './dropdownTypes';
+
+import './Dropdown.scss';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
+
+const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      options,
+      handleOptionChange,
+      searchedKeyword = '',
+      dropdownPosition = {},
+      zIndex,
+    },
+    ref
+  ) => {
+    const filteredOptions = options
+      ? options.filter((option) =>
+          option.label?.toLowerCase().includes(searchedKeyword.toLowerCase())
+        )
+      : [];
+    const { verticalMargin, optionHeight, maxDropdownHeight } =
+      dropdownDefaultCSSData;
+    const dropdownHeight = Math.min(
+      filteredOptions.length * optionHeight,
+      maxDropdownHeight
+    );
+    const isEnoughBottomSpaceAvailable =
+      dropdownPosition.fromBottom >= dropdownHeight + verticalMargin;
+
+    const topPosition = isEnoughBottomSpaceAvailable
+      ? dropdownPosition.top
+      : dropdownPosition.top -
+        dropdownHeight -
+        dropdownPosition.selectHeight -
+        2 * verticalMargin;
+    const themeContext = useContext(ThemeContext);
+    const currentTheme = themeContext?.currentTheme;
+    return (
+      <div
+        role="listbox"
+        ref={ref}
+        className={classNames('ff-multiselect-dropdown-container', {
+          [currentTheme || '']: true,
+        })}
+        style={{
+          left: dropdownPosition.left,
+          top: topPosition,
+          width: dropdownPosition.width,
+          zIndex,
+        }}
+      >
+        {filteredOptions.length === 0 ? (
+          <div className="dropdown-option-container">
+            <p className="no-options">No Option</p>
+          </div>
+        ) : (
+          filteredOptions.map((info) => (
+            <div
+              role="option"
+              className={`dropdown-option-container`}
+              key={info.label}
+              onClick={() => handleOptionChange(info, !info.isChecked)}
+            >
+              <input type="checkbox" checked={info.isChecked} readOnly />
+              <span className="dropdown-option-label">{info.label}</span>
+            </div>
+          ))
+        )}
+      </div>
+    );
+  }
+);
+
+export default Dropdown;

package/src/components/MultiSelect/MultiSelect.scss

@@ -0,0 +1,190 @@
+@import '../../assets/styles/fonts';
+
+@mixin flex-center($justify: space-between) {
+  display: flex;
+  align-items: center;
+  justify-content: $justify;
+}
+@mixin label-styles {
+  font-family: Poppins;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+}
+@mixin hovered-styles($color) {
+  &:hover {
+    border: 1px solid $color;
+    .ff-multiselect .ff-multiselect__main {
+      .default-label,
+      .active-default-label {
+        color: $color;
+      }
+    }
+  }
+}
+@mixin arrow_fill($color) {
+  .ff-select-arrow {
+    svg {
+      path {
+        fill: $color;
+        transition: all 0.3s ease;
+      }
+    }
+  }
+}
+.ff-multiselect-wrapper {
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  border: 1px solid var(--default-icon-color);
+  border-radius: 8px;
+  background: var(--drawer-footer-bg);
+  min-width: 150px;
+  width: 100%;
+  height: 32px;
+  .ff-multiselect {
+    position: relative;
+    padding: 6px;
+    border: none;
+    border-radius: 8px;
+    @include flex-center;
+    &__main {
+      display: flex;
+      flex: 1;
+      .default-label {
+        @extend .fontSm;
+        @include label-styles;
+        color: var(--default-icon-color);
+        line-height: 18px;
+      }
+
+      .active-default-label {
+        @extend .font-size-8;
+        @include label-styles;
+        background-color: var(--multi-select-label-bg);
+        line-height: 12px;
+        color: var(--default-icon-color);
+        padding: 0 4px;
+        position: absolute;
+        left: 8px;
+        top: -6px;
+        pointer-events: none;
+      }
+      .ff-multiselect-chip-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 5px;
+        .ff-multiselect-chip {
+          @include flex-center;
+          box-sizing: border-box;
+          border: 0.5px solid #f1ebf2;
+          padding: 0 1px 0 4px;
+          gap: 4px;
+          border-radius: 15px;
+          .ff-multiselect-chip-label {
+            @extend .fontXs;
+            line-height: 14px;
+            color: var(--tooltip-bg-color);
+          }
+          .ff-multiselect-chip-close-icon {
+            cursor: pointer;
+          }
+        }
+        .ff-multiselect-input-container {
+          flex: 1;
+          min-width: 20px;
+          input {
+            width: 100%;
+            min-width: 30px;
+            max-width: calc(100% - 0px);
+            padding: 2px;
+            box-sizing: border-box;
+            border: none;
+            font-size: 12px;
+            &:focus {
+              outline: none;
+            }
+          }
+        }
+      }
+    }
+    &__toggle {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      .ff-select-arrow {
+        transition: transform 0.3s ease;
+        transform: rotate(360deg);
+
+        svg {
+          path {
+            transition: all 0.3s ease;
+          }
+        }
+
+        &--opened-dropdown {
+          transform: rotate(180deg);
+          transition: transform 0.3s ease;
+        }
+      }
+    }
+  }
+
+  @include hovered-styles(var(--tooltip-bg-color));
+  &:hover {
+    @include arrow_fill(var(--tooltip-bg-color));
+  }
+  &--with-options {
+    height: fit-content;
+  }
+  &--opened-dropdown {
+    border: 1px solid var(--brand-color);
+    height: fit-content;
+    cursor: default;
+    .ff-multiselect .ff-multiselect__main .active-default-label {
+      color: var(--brand-color);
+    }
+    @include hovered-styles(var(--brand-color));
+  }
+  &--error {
+    border: 1px solid var(--error-light);
+    .ff-multiselect .ff-multiselect__main .active-default-label {
+      color: var(--error-light);
+    }
+    @include hovered-styles(var(--error-light));
+  }
+  &--disabled {
+    pointer-events: none;
+
+    border: 1px solid var(--multi-select-border);
+    .ff-multiselect .ff-multiselect__main .active-default-label {
+      color: var(--multi-select-border);
+    }
+    @include hovered-styles(var(--multi-select-border));
+    @include arrow_fill(var(--multi-select-border));
+    &:hover {
+      @include arrow_fill(var(--multi-select-border));
+    }
+    .ff-multiselect {
+      &__main {
+        .ff-multiselect-chip-container {
+          .ff-multiselect-chip {
+            .ff-multiselect-chip-label {
+              color: var(--text-color-light);
+            }
+          }
+        }
+      }
+    }
+  }
+  .error-text {
+    @extend .font-size-8;
+    position: absolute;
+    top: 36px;
+    left: 12px;
+    color: var(--error-light);
+    letter-spacing: 0.5px;
+  }
+}

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MultiSelect from './MultiSelect';
+import { useState } from 'react';
+
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/MultiSelect',
+  component: MultiSelect,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MultiSelect>;
+
+const defaultArgs = {
+  label: 'Fruits',
+  disabled: false,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    required: true,
+    options: [
+      { label: 'Apple', value: 'apple' },
+      { label: 'Banana', value: 'banana' },
+      { label: 'Cherry', value: 'cherry' },
+      { label: 'Date', value: 'date' },
+      { label: 'Grape', value: 'grape' },
+      { label: 'Kiwi', value: 'kiwi' },
+      { label: 'Mango', value: 'mango' },
+      { label: 'Orange', value: 'orange' },
+      { label: 'Peach', value: 'peach' },
+      { label: 'Strawberry', value: 'strawberry' },
+    ],
+    // selectedOptions: [{ label: 'Apple', value: 'apple' }],
+  },
+};
+
+export const Default2: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+export const Default3: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [options] = useState([
+      { label: 'Apple', value: 'apple' },
+      { label: 'Banana', value: 'banana' },
+      { label: 'Cherry', value: 'cherry' },
+      { label: 'Date', value: 'date' },
+      { label: 'Grape', value: 'grape' },
+      { label: 'Kiwi', value: 'kiwi' },
+      { label: 'Mango', value: 'mango' },
+      { label: 'Orange', value: 'orange' },
+      { label: 'Peach', value: 'peach' },
+      { label: 'Strawberry', value: 'strawberry' },
+    ]);
+    const [selectedOptions, setSelectedOptions] = useState<
+      { label?: string; value?: string }[]
+    >([{ label: 'Apple', value: 'apple' }]);
+    const onChange = (options: { label?: string; value?: string }[]) => {
+      setSelectedOptions(options);
+    };
+    return (
+      <MultiSelect
+        // disabled
+        label={'Fruits'}
+        required
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+      />
+    );
+  },
+};
+
+export default meta;