pixel-react 1.1.0 → 1.1.2

package/src/components/FF_Captcha/Recaptcha.tsx

@@ -0,0 +1,41 @@
+import { useState, forwardRef } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { RecaptchaProps } from './types';
+import './Recaptcha.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+
+const Recaptcha = forwardRef<ReCAPTCHA, RecaptchaProps>(
+  ({ onVerify, className = '', error: externalError, sitekey, ...props }, ref) => {
+    const [internalError, setInternalError] = useState<string | null>(null);
+    
+    const handleChange = (token: string | null) => {
+      if (token) {
+        setInternalError(null);
+        onVerify(token);
+      } else {
+        setInternalError('Please complete the CAPTCHA');
+      }
+    };
+
+    const error = externalError || internalError;
+
+    return (
+      <div className={classNames('ff-recaptcha-wrapper', className)}>
+        <ReCAPTCHA
+          ref={ref}
+          sitekey={sitekey}
+          onChange={handleChange}
+          {...props}
+        />
+        {error && (
+          <div className="ff-recaptcha-error">
+            <Typography fontSize={12}>{error}</Typography>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+export default Recaptcha;

package/src/components/FF_Captcha/captcha.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Recaptcha from './Recaptcha';
+
+const meta: Meta<typeof Recaptcha> = {
+  title: 'Components/Recaptcha',
+  component: Recaptcha,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Recaptcha>;
+
+const defaultArgs = {
+  sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', // Test key
+  onVerify: () => {},
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    ...defaultArgs,
+    error: 'Custom error message',
+  },
+};
+
+export const WithCustomTheme: Story = {
+  args: {
+    ...defaultArgs,
+    theme: 'dark',
+  },
+};
+
+export default meta;

package/src/components/FF_Captcha/types.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+
+export interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, 'onChange'> {
+  /**
+   * Callback function that receives the verification token
+   */
+  onVerify: (token: string | null) => void;
+  /**
+   * Optional CSS class name
+   */
+  className?: string;
+  /**
+   * Optional error message to display
+   */
+  error?: string | null;
+  /**
+   * reCAPTCHA site key
+   */
+  sitekey: string;
+}
+

package/src/components/Icon/iconList.ts

@@ -65,6 +65,10 @@ import AndroidIcon from '../../assets/icons/android_icon.svg?react';
 
 import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
 import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
+import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react'
+import WSWBPlusIcon from '../../assets/icons/wswb_plus_icon.svg?react'
+
+
 //icons
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -130,5 +134,7 @@ Components['android_icon'] = AndroidIcon;
 
 Components['select_license'] = SwitchLicenseIcon;
 Components['fireflink-logo'] = FireflinkLogo;
+Components['wswb_delete_icon'] = WSWBDeleteIcon;
+Components['wswb_plus_icon'] = WSWBPlusIcon;
 
 export default Components;

package/src/components/Modal/modal.scss

@@ -15,7 +15,7 @@
   background: var(--ff-mini-modal-border);
   position: relative;
   max-width: 100%;
-  border-radius: 12px 12px 0 0;
+  border-radius: 12px;
   padding: 16px;
   
   .ff-modal-header {

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

@@ -60,14 +60,14 @@ export const EmailGroup: Story = {
     ]);
     const [selectedOptions, setSelectedOptions] = useState<
       { label?: string; value?: string }[]
-    >([{ label: 'Sample1@gmail.com', value: 'sample1@gmail.com'}]);
+    >([{ label: 'Sample1@gmail.com', value: 'sample1@gmail.com' }]);
     const onChange = (options: { label?: string; value?: string }[]) => {
       setSelectedOptions(options);
     };
     return (
       <MultiSelect
         label={'Enter Email'}
-        type='email'
+        type="email"
         required
         options={options}
         selectedOptions={selectedOptions}
@@ -101,7 +101,6 @@ export const Controlled: Story = {
     };
     return (
       <MultiSelect
-        // disabled
         label={'Fruits'}
         required
         options={options}

package/src/components/MultiSelect/MultiSelect.tsx

@@ -29,8 +29,8 @@ const ChipElement = ({
   return null;
 };
 const MultiSelect = ({
-  options,
-  type = "text",
+  options = [],
+  type = 'text',
   selectedOptions = [],
   onChange = () => {},
   acceptNewOption = false,
@@ -42,7 +42,7 @@ const MultiSelect = ({
   errorMessage = 'Fill this field',
   withSelectButton = false,
   onSelect = () => {},
-  displayCount = false
+  displayCount = false,
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -50,7 +50,7 @@ const MultiSelect = ({
   const [searchedKeyword, setSearchedKeyword] = useState('');
   const [isSelectFocusedOnce, setIsSelectFocusedOnce] =
     useState<boolean>(false);
-  const [inputError, setInputError] = useState<string>('')
+  const [inputError, setInputError] = useState<string>('');
 
   const [dropdownPosition, setDropdownPosition] = useState<{
     top: number;
@@ -110,13 +110,13 @@ const MultiSelect = ({
     handleOptionChange(option, false);
   };
   const handleKeyEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (acceptNewOption && e.key === "Enter") {
+    if (acceptNewOption && e.key === 'Enter') {
       setInputError('');
-      if (type === "email") {
+      if (type === 'email') {
         const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         if (!emailPattern.test(searchedKeyword)) {
           setIsOpen(false);
-          setInputError("Please enter a valid email address.");
+          setInputError('Please enter a valid email address.');
           return;
         }
       }
@@ -126,11 +126,16 @@ const MultiSelect = ({
         value: searchedKeyword.toLowerCase(),
         isChecked: true,
       };
-      const filteredOptions = [...allOptions].filter(option => option.isChecked === true);
+      const filteredOptions = [...allOptions].filter(
+        (option) => option.isChecked === true
+      );
 
       setAllOptions([...allOptions, newOption]);
       setSearchedKeyword('');
-      onChange?.([...filteredOptions, { label: searchedKeyword, value: searchedKeyword.toLocaleLowerCase() }]);
+      onChange?.([
+        ...filteredOptions,
+        { label: searchedKeyword, value: searchedKeyword.toLocaleLowerCase() },
+      ]);
       setIsOpen(false);
     }
   };
@@ -148,6 +153,17 @@ const MultiSelect = ({
       });
     }
   };
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    const input = e.target.value;
+    setSearchedKeyword(input);
+    const filteredOptions = options.filter((option) =>
+      option.value?.toLowerCase().includes(input.toLowerCase())
+    );
+    onSearch?.(input, filteredOptions.length);
+  };
   useEffect(() => {
     if (isOpen) {
       calculatePosition();
@@ -192,7 +208,7 @@ const MultiSelect = ({
         !dropdownRef.current.contains(event?.target as Node) &&
         !selectWrapper.current.contains(event?.target as Node)
       ) {
-        setInputError('')
+        setInputError('');
         setIsOpen(false);
         if (!isSelectFocusedOnce) {
           setIsSelectFocusedOnce(true);
@@ -213,7 +229,8 @@ const MultiSelect = ({
       className={classNames('ff-multiselect-wrapper', {
         'ff-multiselect-wrapper--with-options': selectedOptions?.length,
         'ff-multiselect-wrapper--opened-dropdown': isOpen,
-        'ff-multiselect-wrapper--error': (isFieldSkipped && required) || inputError,
+        'ff-multiselect-wrapper--error':
+          (isFieldSkipped && required) || inputError,
         'ff-multiselect-wrapper--disabled': disabled,
       })}
     >
@@ -231,7 +248,7 @@ const MultiSelect = ({
             {label}
           </span>
           <div className="ff-multiselect-chip-container">
-            {displayCount ?
+            {displayCount ? (
               <>
                 {selectedOptions.slice(0, maxVisibleChips).map((option) => (
                   <ChipElement
@@ -240,7 +257,8 @@ const MultiSelect = ({
                     onChipCloseClick={(e) => handleChipCloseClick(option, e)}
                   />
                 ))}
-              </> :
+              </>
+            ) : (
               selectedOptions.map((option) => (
                 <ChipElement
                   key={option?.label}
@@ -248,7 +266,7 @@ const MultiSelect = ({
                   onChipCloseClick={(e) => handleChipCloseClick(option, e)}
                 />
               ))
-            }
+            )}
             <div className="ff-multiselect-input-container">
               <input
                 value={searchedKeyword}
@@ -256,13 +274,7 @@ const MultiSelect = ({
                 autoComplete="off"
                 placeholder="search..."
                 ref={inputRef}
-                onChange={(e) => {
-                  if (!isOpen) {
-                    setIsOpen(true);
-                  }
-                  setSearchedKeyword(e.target.value);
-                  onSearch?.(e.target.value);
-                }}
+                onChange={handleSearch}
                 onKeyDown={handleKeyEnter}
                 id="input-ele"
                 className="ff-select-input"
@@ -295,7 +307,7 @@ const MultiSelect = ({
       </div>
       <div ref={dropdownWrapper}>
         {(inputError || (isFieldSkipped && required && errorMessage)) && (
-          <div className="error-text">{inputError || errorMessage }</div>
+          <div className="error-text">{inputError || errorMessage}</div>
         )}
         {isOpen &&
           createPortal(
@@ -317,4 +329,4 @@ const MultiSelect = ({
   );
 };
 
-export default MultiSelect;
+export default MultiSelect;

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -10,7 +10,7 @@ interface MultiSelectProps {
   label: string;
   selectedOptions?: Option[];
   disabled?: boolean;
-  onSearch?: (searchedKeyword: string) => void;
+  onSearch?: (searchedKeyword: string, resultsLength: number) => void;
   onChange?: (selectedOptions: Option[]) => void;
   acceptNewOption?: boolean;
   zIndex?: number;

package/src/components/NLPInput/NLPInput.scss

@@ -0,0 +1,246 @@
+@use '../../assets/styles/fonts';
+
+@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-nlp-input-wrapper {
+  position: relative;
+
+  .ff-nlp-input {
+    @extend .fontSm;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    min-height: 32px;
+    min-width: 489px;
+    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-nlp-input-border-color));
+      }
+
+      &--active {
+        @include opacity-style(1, null, var(--ff-nlp-input-brand-color));
+      }
+
+      &--option {
+        opacity: 1;
+      }
+
+      &--no-border {
+        border-color: transparent;
+      }
+
+      &--error {
+        border-color: var(--error-light);
+      }
+
+      .ff-nlp-input-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-nlp-input-brand-color));
+        }
+
+        &--option {
+          @include opacity-style(1, var(--ff-nlp-input-default-color));
+        }
+
+        &--error {
+          color: var(--error-light);
+        }
+
+        &--required {
+          margin-right: 2px;
+        }
+      }
+    }
+
+    &-input {
+      @extend .fontSm;
+      @include absolute-position(6px, auto, auto, auto);
+      width: calc(100% - 38px);
+      min-height: calc(100% - 8px);
+      padding: 0 28px 0 8px;
+      border-radius: 4px;
+      border: 1px solid transparent;
+      z-index: 100;
+      background: transparent;
+      outline: none;
+      color: var(--ff-nlp-input-text-color);
+
+      &:hover {
+        ~ .ff-nlp-input-label {
+          color: var(--ff-nlp-input-text-hover-color);
+        }
+      }
+
+      &--border-radius {
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      &--default {
+        @include opacity-style(1, null, var(--ff-nlp-input-border-color));
+
+        &:hover {
+          border-color: var(--ff-nlp-input-text-color);
+
+          ~ .ff-nlp-input-fieldset--option {
+            border-color: var(--ff-nlp-input-text-color);
+
+            .ff-nlp-input-legend--option {
+              color: var(--ff-nlp-input-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-nlp-input-fieldset--no-border {
+            border-color: transparent;
+          }
+        }
+      }
+
+      &--disable {
+        border-color: var(--ff-nlp-input-border-color);
+
+        &:hover {
+          border-color: var(--ff-nlp-input-border-color);
+
+          ~ .ff-nlp-input-label--default {
+            color: var(--ff-nlp-input-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-nlp-input-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;
+  }
+}