@plutonhq/core-frontend 0.0.1

package/src/components/common/form/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import classes from './MultiSelect.module.scss';
+import Icon from '../../Icon/Icon';
+import FormField from '../FormField/FormField';
+
+type MultiMultiSelectOptionType = {
+   id?: string;
+   icon?: string;
+   pro?: boolean;
+   image?: JSX.Element;
+   label: string;
+   value: string;
+};
+
+type MultiSelectProps = {
+   label?: string;
+   title?: string;
+   size?: 'large' | 'medium' | 'small';
+   full?: boolean;
+   description?: string;
+   customClasses?: string;
+   disabled?: boolean;
+   hint?: string;
+   error?: string;
+   search?: boolean;
+   fieldValue: string[];
+   options: MultiMultiSelectOptionType[];
+   onUpdate: (f: string[]) => void;
+};
+
+const MultiSelect = ({
+   label = '',
+   title = '',
+   options = [],
+   description,
+   customClasses = '',
+   fieldValue = [],
+   size = 'medium',
+   full = false,
+   disabled = false,
+   hint = '',
+   error = '',
+   search = false,
+   onUpdate,
+}: MultiSelectProps) => {
+   const [showDropDown, setShowDropDown] = useState(false);
+   const [searchText, setSearchText] = useState('');
+
+   const selectedItems = options.filter((item) => fieldValue.includes(item.value));
+
+   const toggleOption = (val: string) => {
+      let newValues;
+      if (fieldValue.includes(val)) {
+         newValues = fieldValue.filter((v) => v !== val);
+      } else {
+         newValues = [...fieldValue, val];
+      }
+      console.log('newValues :', newValues);
+      onUpdate(newValues);
+   };
+
+   const optionsItems = searchText ? options.filter((s) => s.label.toLowerCase().includes(searchText.toLowerCase())) : options;
+
+   return (
+      <FormField
+         type="multiSelect"
+         label={label}
+         description={description}
+         hint={hint}
+         error={error}
+         inline={false}
+         classes={`${classes.multiSelectField} ${customClasses} ${size === 'large' ? classes.multiSelectFieldLarge : ''} ${showDropDown ? classes.multiSelectFieldOpen : ''} ${error ? classes.fieldHasError : ''} ${full ? classes.multiSelectFieldFull : ''} ${disabled ? classes.multiSelectFieldDisabled : ''}`}
+      >
+         <div className={classes.dropdown}>
+            <div className={classes.selected} onClick={() => setShowDropDown(!disabled ? !showDropDown : false)}>
+               <span>
+                  {title ? (
+                     <>
+                        {title}
+                        <i>
+                           {fieldValue.length}/{options.length}
+                        </i>
+                     </>
+                  ) : selectedItems.length > 0 ? (
+                     `${selectedItems.length} items selected`
+                  ) : (
+                     'Select items...'
+                  )}
+               </span>
+               <button className={classes.dropBtn}>
+                  <Icon type={showDropDown ? 'caret-up' : 'caret-down'} size={12} />
+               </button>
+            </div>
+            {showDropDown && (
+               <div>
+                  {search && (
+                     <div className={classes.search}>
+                        <Icon type="search" size={15} />
+                        <input placeholder="Search Providers..." value={searchText} onChange={(e) => setSearchText(e.target.value)} />
+                        {searchText && (
+                           <button onClick={() => setSearchText('')}>
+                              <Icon type="close" size={15} />
+                           </button>
+                        )}
+                     </div>
+                  )}
+                  <div className={`${classes.lists} styled__scrollbar`}>
+                     <ul>
+                        {optionsItems.length > 0 &&
+                           optionsItems.map((item, indx) => {
+                              return (
+                                 <li
+                                    key={indx}
+                                    onClick={() => !item.pro && toggleOption(item.value)}
+                                    className={`${fieldValue.includes(item.value) ? classes.selectedItem : ''}`}
+                                 >
+                                    <Icon type={'check-circle-filled'} size={13} />
+                                    {item.label}
+                                 </li>
+                              );
+                           })}
+                     </ul>
+                     {searchText && !optionsItems.length && <div>No Providers Found</div>}
+                  </div>
+               </div>
+            )}
+         </div>
+      </FormField>
+   );
+};
+
+export default MultiSelect;

package/src/components/common/form/NumberInput/NumberInput.module.scss

@@ -0,0 +1,102 @@
+.numberInputField {
+   .numberInputWrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex: 1;
+      max-width: 150px;
+
+      .input {
+         padding: 8px 12px;
+         padding-left: 40px;
+         padding-right: 40px;
+         text-align: center;
+         border: 1px solid var(--field-line-color);
+         border-radius: 6px;
+         background: transparent;
+         color: var(--content-text-color);
+         font-size: 0.75rem;
+         width: 100%;
+         box-sizing: border-box;
+         transition: all 0.2s ease;
+
+         &:focus {
+            outline: none;
+            border-color: var(--line-active-color);
+         }
+
+         &::placeholder {
+            color: var(--content-text-color-light);
+         }
+
+         &::-webkit-inner-spin-button,
+         &::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+         }
+      }
+
+      .numberControl {
+         position: absolute;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         width: 24px;
+         height: 24px;
+         background: transparent;
+         border-radius: 4px;
+         cursor: pointer;
+         color: var(--content-text-color-light);
+         font-size: 1.125rem;
+         font-weight: 600;
+         transition: all 0.2s ease;
+
+         &:hover {
+            color: var(--primary-color);
+         }
+
+         &:first-of-type {
+            left: 7px;
+            font-size: 0.625rem;
+         }
+
+         &:last-of-type {
+            right: 7px;
+         }
+      }
+   }
+
+   &.numberFieldLarge {
+      .input {
+         height: 42px;
+         font-size: 1rem;
+      }
+   }
+
+   &.numberFieldInline {
+      .fieldInner {
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+         gap: 8px;
+         .fieldLabel {
+            min-width: unset;
+         }
+         .numberInputWrapper {
+            max-width: 50%;
+         }
+      }
+   }
+
+   &.numberFieldFull {
+      width: 100%;
+      .input {
+         width: 100%;
+      }
+   }
+   &.fieldHasError {
+      input {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+}

package/src/components/common/form/NumberInput/NumberInput.tsx

@@ -0,0 +1,90 @@
+import FormField from '../FormField/FormField';
+import classes from './NumberInput.module.scss';
+
+type NumberInputProps = {
+   label?: string;
+   size?: 'large' | 'medium' | 'small';
+   full?: boolean;
+   inline?: boolean;
+   description?: string;
+   placeholder?: string;
+   customClasses?: string;
+   fieldValue: number | '';
+   required?: boolean;
+   min?: number;
+   max?: number;
+   hint?: string;
+   error?: string;
+   onUpdate: (value: number) => void;
+};
+
+const NumberInput = ({
+   label,
+   size = 'medium',
+   inline = true,
+   full = false,
+   description,
+   placeholder,
+   customClasses = '',
+   fieldValue = '',
+   hint = '',
+   required = false,
+   min,
+   max,
+   error,
+   onUpdate,
+}: NumberInputProps) => {
+   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onUpdate(Number(event.target.value));
+   };
+
+   const handleIncrement = () => {
+      const newValue = (fieldValue || 0) + 1;
+      if (max === undefined || newValue <= max) {
+         onUpdate(newValue);
+      }
+   };
+
+   const handleDecrement = () => {
+      const newValue = (fieldValue || 0) - 1;
+      if (min === undefined || newValue >= min) {
+         onUpdate(newValue);
+      }
+   };
+
+   return (
+      <FormField
+         type="number"
+         label={label}
+         description={description}
+         hint={hint}
+         error={error}
+         required={required}
+         inline={inline}
+         classes={`${classes.numberInputField} ${classes.numberField} ${customClasses} ${inline ? classes.numberFieldInline : ''} ${error ? classes.fieldHasError : ''} ${
+            size === 'large' ? classes.numberFieldLarge : ''
+         } ${full ? classes.numberFieldFull : ''}`}
+      >
+         <div className={classes.numberInputWrapper}>
+            <button className={classes.numberControl} onClick={handleDecrement}>
+               —
+            </button>
+            <input
+               type="number"
+               className={classes.input}
+               value={fieldValue}
+               onChange={handleChange}
+               placeholder={placeholder}
+               required={required}
+               min={min}
+               max={max}
+            />
+            <button className={classes.numberControl} onClick={handleIncrement}>
+               +
+            </button>
+         </div>
+      </FormField>
+   );
+};
+
+export default NumberInput;

package/src/components/common/form/PasswordField/PasswordField.module.scss

@@ -0,0 +1,78 @@
+.inputField {
+   .input {
+      padding: 8px 12px;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--content-text-color);
+      font-size: 0.75rem;
+      width: 200px;
+      box-sizing: border-box;
+      transition: all 0.2s ease;
+
+      &:focus {
+         outline: none;
+         border-color: var(--line-active-color);
+      }
+
+      &::placeholder {
+         color: var(--content-text-color-light);
+      }
+      &.disabled {
+         background-color: var(--line-color);
+      }
+   }
+
+   .viewPassBtn {
+      position: absolute;
+      right: 5px;
+      z-index: 2;
+      opacity: 0.3;
+   }
+
+   &.inputFieldLarge {
+      .input {
+         padding: 15px;
+         font-size: 0.8rem;
+      }
+   }
+
+   &.inputFieldInline {
+      .fieldInner {
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+         gap: 8px;
+      }
+      .input {
+         width: 50%;
+      }
+   }
+
+   &.inputFieldFull {
+      width: 100%;
+      .fieldInner {
+         display: flex;
+         flex-direction: column;
+         gap: 8px;
+         align-items: flex-start;
+      }
+      .input {
+         width: 100%;
+      }
+   }
+
+   &.fieldHasError {
+      input {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .inputField {
+      .input {
+         width: 100%;
+      }
+   }
+}

package/src/components/common/form/PasswordField/PasswordField.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import Icon from '../../Icon/Icon';
+import FormField from '../FormField/FormField';
+import classes from './PasswordField.module.scss';
+
+type PasswordFieldProps = {
+   label?: string;
+   type?: 'text' | 'password' | 'email' | 'number' | 'date';
+   size?: 'large' | 'medium' | 'small';
+   full?: boolean;
+   inline?: boolean;
+   description?: string;
+   placeholder?: string;
+   customClasses?: string;
+   fieldValue: string | number;
+   required?: boolean;
+   disabled?: boolean;
+   hint?: string;
+   error?: string;
+   onUpdate: (value: string) => void;
+};
+
+const PasswordField = ({
+   label,
+   size = 'medium',
+   inline = true,
+   full = false,
+   description,
+   placeholder,
+   customClasses = '',
+   fieldValue = '',
+   hint = '',
+   error = '',
+   required = false,
+   disabled = false,
+   onUpdate,
+}: PasswordFieldProps) => {
+   const [showPassword, setShowPassword] = useState(false);
+
+   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onUpdate(event.target.value);
+   };
+
+   return (
+      <FormField
+         type="input"
+         label={label}
+         description={description}
+         hint={hint}
+         error={error}
+         required={required}
+         inline={inline}
+         classes={`${classes.inputField} ${classes[size]} ${full ? classes.inputFieldFull : ''} 
+         ${full ? classes.inputFieldInline : ''} ${size === 'large' ? classes.inputFieldLarge : ''} ${customClasses}`}
+      >
+         <input
+            type={showPassword ? 'text' : 'password'}
+            className={`${classes.input} ${disabled ? classes.disabled : ''}`}
+            value={fieldValue}
+            onChange={handleChange}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled}
+         />
+
+         <button className={classes.viewPassBtn} onClick={() => setShowPassword(!showPassword)} type="button">
+            <Icon type={showPassword ? 'eye-hide' : 'eye'} />
+         </button>
+      </FormField>
+   );
+};
+
+export default PasswordField;

package/src/components/common/form/RadioIconSelect/RadioIconSelect.module.scss

@@ -0,0 +1,104 @@
+.radioIconField {
+   width: 100%;
+   position: relative;
+   .fieldLabel {
+      font-weight: 600;
+   }
+}
+
+.radioIconFieldOptions {
+   display: flex;
+   gap: 12px;
+   width: 100%;
+   &.radioIconFieldList {
+      flex-direction: column;
+   }
+}
+
+.radioIconFieldIcon {
+   color: var(--icon-color);
+}
+
+.radioIconFieldContent {
+   margin-top: 6px;
+   h4 {
+      margin: 0;
+      font-weight: 600;
+   }
+}
+
+.radioIconFieldOptionsDisabled {
+   .radioIconFieldOption {
+      opacity: 0.7;
+      cursor: not-allowed;
+      user-select: none;
+   }
+}
+
+.radioIconFieldOption {
+   display: flex;
+   flex-direction: column;
+   flex: 1 1 0px;
+   align-items: center;
+   text-align: center;
+   border: 1px solid var(--field-line-color);
+   padding: 15px;
+   padding-right: 25px;
+   border-radius: 6px;
+   cursor: pointer;
+   font-size: 0.75rem;
+   position: relative;
+
+   :global(.checkMark) {
+      color: var(--primary-color);
+      position: absolute;
+      top: 5px;
+      right: 5px;
+   }
+
+   &.radioIconFieldActive {
+      background-color: var(--background-color);
+      border-color: var(--primary-color);
+   }
+   &.radioIconFieldDisabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      user-select: none;
+   }
+}
+
+.radioIconFieldOptionsDesc {
+   display: flex;
+   gap: 12px;
+
+   .radioIconFieldOption {
+      flex-direction: row;
+      text-align: left;
+      gap: 15px;
+
+      .radioIconFieldContent {
+         h4 {
+            margin-bottom: 5px;
+            font-weight: 600;
+         }
+         p {
+            margin: 0;
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .radioIconFieldOptions {
+      flex-direction: column;
+      align-items: flex-start;
+      width: 100%;
+      .radioIconFieldOption {
+         width: 100%;
+         box-sizing: border-box;
+         align-items: flex-start;
+         flex-direction: row;
+         gap: 10px;
+      }
+   }
+}

package/src/components/common/form/RadioIconSelect/RadioIconSelect.tsx

@@ -0,0 +1,68 @@
+import Icon from '../../Icon/Icon';
+import FormField from '../FormField/FormField';
+import classes from './RadioIconSelect.module.scss';
+
+interface RadioIconSelectProps {
+   label: string;
+   options: { label: string; description: string; value: string; icon: string; disabled?: boolean }[];
+   fieldValue: string;
+   layout?: 'grid' | 'list';
+   disabled?: boolean;
+   showDescription?: boolean;
+   hint?: string;
+   inline?: boolean;
+   onUpdate: (type: string) => void;
+}
+
+const RadioIconSelect = ({
+   label,
+   options,
+   fieldValue,
+   showDescription = false,
+   disabled = false,
+   hint,
+   inline = false,
+   layout = 'grid',
+   onUpdate,
+}: RadioIconSelectProps) => {
+   const radioDisabled = disabled;
+   return (
+      <FormField type="radioIconSelect" label={label} classes={classes.radioIconField} hint={hint} inline={inline}>
+         <div
+            className={`${classes.radioIconFieldOptions} ${disabled ? classes.radioIconFieldOptionsDisabled : ''} ${showDescription ? classes.radioIconFieldOptionsDesc : ''} ${layout === 'list' ? classes.radioIconFieldList : ''}`}
+         >
+            {options.map((option) => {
+               const { label, value, icon, description, disabled = false } = option;
+               return (
+                  <div
+                     key={value}
+                     className={`${classes.radioIconFieldOption} ${disabled ? classes.radioIconFieldDisabled : ''} ${fieldValue === value ? classes.radioIconFieldActive : ''}`}
+                     onClick={() => !disabled && !radioDisabled && onUpdate(value)}
+                     data-tooltip-id="appTooltip"
+                     data-tooltip-content={description}
+                     data-tooltip-place="top"
+                     data-tooltip-delay-show={300}
+                  >
+                     {fieldValue === value && <Icon classes="checkMark" type="check-circle-filled" size={14} />}
+                     <div className={classes.radioIconFieldIcon}>
+                        <Icon type={icon} size={30} />
+                     </div>
+                     <div className={classes.radioIconFieldContent}>
+                        {showDescription ? (
+                           <>
+                              <h4>{label}</h4>
+                              <p>{description}</p>
+                           </>
+                        ) : (
+                           <h4>{label}</h4>
+                        )}
+                     </div>
+                  </div>
+               );
+            })}
+         </div>
+      </FormField>
+   );
+};
+
+export default RadioIconSelect;