@plutonhq/core-frontend 0.0.1

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

@@ -0,0 +1,193 @@
+.selectField {
+   .search {
+      border: 1px solid;
+      border-color: var(--field-line-color);
+      border-radius: 4px 4px 0 0;
+      border-bottom: 0;
+      position: relative;
+      top: -1px;
+      color: var(--icon-color);
+      span {
+         position: absolute;
+         margin: 5px;
+      }
+      button {
+         position: absolute;
+         right: 0;
+         margin: 5px;
+         color: var(--icon-color);
+         span {
+            position: relative;
+            margin: 0;
+         }
+      }
+      input {
+         padding: 8px 12px;
+         padding-left: 24px;
+         width: 100%;
+         border: none;
+         box-sizing: border-box;
+         background-color: var(--content-background-color);
+         &:focus {
+            outline: none;
+            background-color: var(--field-line-color);
+         }
+      }
+   }
+
+   .dropdown {
+      min-width: 150px;
+      width: 50%;
+      position: relative;
+      margin-top: 0px;
+
+      .selected {
+         padding: 8px 10px;
+         border: 1px solid;
+         background: var(--field-bg);
+         border-color: var(--field-line-color);
+         border-radius: 6px;
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         cursor: pointer;
+         span {
+            user-select: none;
+            font-size: 0.75rem;
+         }
+         img {
+            margin-right: 5px;
+            max-height: 16px;
+            width: auto;
+            vertical-align: top;
+         }
+
+         .dropBtn {
+            background: transparent;
+            color: var(--icon-color);
+         }
+      }
+
+      .lists {
+         border: 1px solid var(--line-color);
+         margin-top: -1px;
+         position: absolute;
+         z-index: 9999;
+         background: var(--field-bg);
+         width: calc(100% - 2px);
+         border-radius: 0 0 4px 4px;
+         max-height: 210px;
+         overflow: auto;
+         font-size: 0.75rem;
+         ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+
+            li {
+               padding: 8px 10px;
+               cursor: pointer;
+
+               img {
+                  margin-right: 5px;
+                  max-height: 16px;
+                  width: auto;
+                  vertical-align: top;
+               }
+               :global(.icon) {
+                  margin-right: 5px;
+                  opacity: 0.7;
+               }
+
+               &.disabledItem {
+                  opacity: 0.6;
+                  user-select: none;
+                  cursor: not-allowed;
+               }
+
+               &.selectedItem {
+                  color: var(--field-bg);
+                  background: var(--primary-color);
+               }
+
+               &:hover {
+                  background: var(--background-color);
+                  color: inherit;
+               }
+            }
+         }
+      }
+      &.dropdownDisabled .selected {
+         background-color: var(--line-color);
+         cursor: default;
+      }
+   }
+
+   &.selectFieldFull {
+      .dropdown {
+         width: 100%;
+      }
+   }
+
+   &.selectFieldLarge {
+      .selected {
+         padding: 12px;
+      }
+   }
+   &.selectFieldDisabled {
+      .selected {
+         background-color: var(--line-color);
+      }
+   }
+
+   &.fieldHasError {
+      .selected {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+   &.selectFieldOpen {
+      .selected {
+         border-radius: 6px 6px 0 0;
+      }
+   }
+
+   &.selectFieldInline {
+      .fieldInner {
+         justify-content: space-between;
+      }
+   }
+   &.selectFieldMini {
+      margin-top: -3px;
+      .dropdown {
+         width: auto;
+         min-width: unset;
+         .selected {
+            padding: 2px 4px 2px 8px;
+            border-radius: 4px;
+            span {
+               font-size: 0.7rem;
+            }
+         }
+         .lists {
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            border-radius: 6px;
+            font-size: 0.9em;
+            margin-top: 4px;
+            width: max-content;
+            li {
+               padding: 6px 10px;
+            }
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .selectField {
+      .dropdown {
+         width: 100%;
+      }
+   }
+}

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

@@ -0,0 +1,123 @@
+import { useState } from 'react';
+import classes from './Select.module.scss';
+import Icon from '../../Icon/Icon';
+import FormField from '../FormField/FormField';
+
+type SelectOptionType = {
+   id?: string;
+   icon?: string;
+   pro?: boolean;
+   image?: JSX.Element;
+   label: string;
+   value: string;
+   disabled?: boolean;
+};
+
+type SelectProps = {
+   label?: string;
+   size?: 'large' | 'medium' | 'small' | 'mini';
+   full?: boolean;
+   inline?: boolean;
+   description?: string;
+   customClasses?: string;
+   disabled?: boolean;
+   hint?: string;
+   error?: string;
+   search?: boolean;
+   fieldValue: string;
+   options: SelectOptionType[];
+   onUpdate: (f: string) => void;
+};
+
+const Select = ({
+   label = '',
+   options = [],
+   description,
+   customClasses = '',
+   fieldValue = '',
+   size = 'medium',
+   full = false,
+   inline = false,
+   disabled = false,
+   hint = '',
+   error = '',
+   search = false,
+   onUpdate,
+}: SelectProps) => {
+   const [showDropDown, setShowDropDown] = useState(false);
+   const [searchText, setSearchText] = useState('');
+
+   const selectedItemIndex = options.length > 0 && fieldValue ? options.findIndex((x) => x.value === fieldValue) : null;
+   const selectedItem = selectedItemIndex === -1 ? options[0] : options[selectedItemIndex || 0];
+   const selectedItemLabel = selectedItem && selectedItem.label ? selectedItem.label : (options[0] && options[0].label) || 'Select Item..';
+   const selectedItemValue = selectedItem && selectedItem.value ? selectedItem.value : (options[0] && options[0].value) || '';
+   const selectedItemImage = selectedItem && selectedItem.image ? selectedItem.image : '';
+   const selectedItemIcon = selectedItem && selectedItem.icon ? selectedItem.icon : '';
+
+   const updateOption = (val: string) => {
+      onUpdate(val);
+      setShowDropDown(false);
+   };
+
+   const optionsItems = searchText ? options.filter((s) => s.label.toLowerCase().includes(searchText.toLowerCase())) : options;
+
+   return (
+      <FormField
+         type="select"
+         label={label}
+         description={description}
+         hint={hint}
+         error={error}
+         required={false}
+         inline={inline}
+         classes={`${classes.selectField} ${classes[size]} ${full ? classes.selectFieldFull : ''} ${customClasses} ${error ? classes.fieldHasError : ''}`}
+      >
+         <div className={`${classes.dropdown} ${disabled ? classes.dropdownDisabled : ''}`}>
+            <div className={classes.selected} onClick={() => setShowDropDown(!disabled ? !showDropDown : false)}>
+               <span>
+                  {selectedItemImage} {selectedItemIcon && <Icon type={selectedItemIcon} size={13} />} {selectedItemLabel}
+               </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 && !item.disabled && updateOption(item.value)}
+                                    className={`${item.value === selectedItemValue ? classes.selectedItem : ''} ${item.disabled ? classes.disabledItem : ''}`}
+                                 >
+                                    {item.icon && <Icon type={item.icon} size={13} />}
+                                    {item.image && item.image}
+                                    {item.label}
+                                 </li>
+                              );
+                           })}
+                     </ul>
+                     {searchText && !optionsItems && <div>No Providers Found</div>}
+                  </div>
+               </div>
+            )}
+         </div>
+      </FormField>
+   );
+};
+
+export default Select;

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

@@ -0,0 +1,82 @@
+@use '../../../../styles/fields.scss';
+
+.sizePicker {
+   .inputGroup {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+   }
+
+   .numberInput {
+      width: 70px;
+      padding: 8px 12px;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--content-text-color);
+      font-size: 0.75rem;
+      text-align: center;
+
+      &:focus {
+         outline: none;
+         border-color: var(--line-active-color);
+      }
+   }
+
+   .unitSelector {
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      overflow: hidden;
+   }
+
+   .unit {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      justify-content: center;
+      gap: 4px;
+      padding: 6px 12px;
+      font-size: 0.75rem;
+      width: 34px;
+      cursor: pointer;
+      color: var(--content-text-color);
+      background: transparent;
+      border-right: 1px solid var(--line-color);
+      transition: all 0.2s ease;
+
+      &:last-child {
+         border-right: none;
+      }
+
+      &:hover {
+         background: var(--background-color);
+      }
+
+      &.selected {
+         color: var(--primary-color);
+         background-color: var(--primary-color-light);
+      }
+   }
+
+   &.sizePickerInline {
+      .fieldInner {
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+         gap: 8px;
+      }
+      .input {
+         width: 50%;
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .sizePicker .unit {
+      padding: 6px;
+   }
+}

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

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import Icon from '../../Icon/Icon';
+import classes from './SizePicker.module.scss';
+import FormField from '../FormField/FormField';
+
+type SizeUnit = 'ki' | 'mi' | 'gi' | 'ti' | 'K' | 'M' | 'G' | 'T';
+
+type SizePickerProps = {
+   label?: string;
+   description?: string;
+   customClasses?: string;
+   fieldValue: string;
+   inline?: boolean;
+   hint?: string;
+   type?: 'restic' | 'rclone';
+   onUpdate: (value: string) => void;
+};
+
+const SizePicker = ({
+   label,
+   description,
+   customClasses = '',
+   inline = false,
+   fieldValue = '',
+   type = 'restic',
+   hint = '',
+   onUpdate,
+}: SizePickerProps) => {
+   const [size, setSize] = useState<number | undefined>(() => (fieldValue ? parseInt(fieldValue, 10) : undefined));
+   const [unit, setUnit] = useState<SizeUnit>(() => {
+      const lastTwoChars = fieldValue.slice(-2) as SizeUnit;
+      return lastTwoChars === 'ki' ||
+         lastTwoChars === 'mi' ||
+         lastTwoChars === 'gi' ||
+         lastTwoChars === 'ti' ||
+         lastTwoChars === 'K' ||
+         lastTwoChars === 'M' ||
+         lastTwoChars === 'G' ||
+         lastTwoChars === 'T'
+         ? lastTwoChars
+         : type === 'rclone'
+           ? 'M'
+           : 'mi';
+   });
+
+   const handleSizeChange = (value: string) => {
+      const numValue = value === '' ? undefined : Number(value);
+      setSize(numValue);
+      if (numValue) {
+         onUpdate(`${numValue}${unit}`);
+      } else {
+         onUpdate('');
+      }
+   };
+
+   const handleUnitChange = (newUnit: SizeUnit) => {
+      setUnit(newUnit);
+      if (size) {
+         onUpdate(`${size}${newUnit}`);
+      }
+   };
+
+   const units: { label: string; value: SizeUnit }[] = [
+      { label: 'KB', value: type === 'rclone' ? 'K' : 'ki' },
+      { label: 'MB', value: type === 'rclone' ? 'M' : 'mi' },
+      { label: 'GB', value: type === 'rclone' ? 'G' : 'gi' },
+      { label: 'TB', value: type === 'rclone' ? 'T' : 'ti' },
+   ];
+
+   return (
+      <FormField
+         type="sizePicker"
+         label={label}
+         description={description}
+         hint={hint}
+         inline={inline}
+         classes={`${classes.sizePicker} ${inline ? classes.sizePickerInline : ''} ${customClasses}`}
+      >
+         <div className={classes.inputGroup}>
+            <input type="number" min={0} value={size ?? ''} onChange={(e) => handleSizeChange(e.target.value)} className={classes.numberInput} />
+            <ul className={classes.unitSelector}>
+               {units.map((unitOption) => (
+                  <li
+                     key={unitOption.value}
+                     className={`${classes.unit} ${unit === unitOption.value ? classes.selected : ''}`}
+                     onClick={() => handleUnitChange(unitOption.value)}
+                  >
+                     {unit === unitOption.value && <Icon type="check" size={10} />}
+                     {unitOption.label}
+                  </li>
+               ))}
+            </ul>
+         </div>
+      </FormField>
+   );
+};
+
+export default SizePicker;

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

@@ -0,0 +1,114 @@
+.storagePicker {
+   width: 100%;
+
+   .storagePickerInput {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      box-sizing: border-box;
+      .storage {
+         width: 35%;
+         cursor: pointer;
+         img {
+            height: 18px;
+            width: auto;
+            margin-right: 5px;
+            vertical-align: top;
+         }
+         :global([class*='_dropdown_']) {
+            width: 100%;
+         }
+      }
+      .path {
+         width: calc(65% - 10px);
+         margin-left: 10px;
+         position: relative;
+         .fileManagerBtn {
+            position: absolute;
+            right: 1px;
+            top: 1px;
+            padding: 8px;
+            cursor: pointer;
+            color: var(--icon-color);
+            &:hover {
+               color: var(--primary-color);
+            }
+         }
+         div[class*='_inputField_'] input {
+            padding: 10px 12px;
+         }
+      }
+      & > div {
+         border-radius: 4px;
+         box-sizing: border-box;
+         font-size: 0.75rem;
+         display: flex;
+
+         button {
+            padding: 3px 8px;
+            background-color: var(--background-color);
+            color: var(--content-text-color);
+            font-size: 0.75rem;
+            border-radius: 4px;
+            margin-left: 5px;
+         }
+      }
+   }
+}
+
+.pickerContent {
+   .field {
+      margin-bottom: 20px;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+   }
+
+   label {
+      font-weight: 600;
+      margin-bottom: 8px;
+      font-size: 0.75rem;
+      width: 55%;
+   }
+   .pickerFooter {
+      margin-top: 20px;
+      justify-content: right;
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+      button {
+         background-color: var(--line-color);
+         color: var(--content-text-color);
+         padding: 8px 16px;
+         border-radius: 4px;
+         font-size: 0.75rem;
+         transition: all 0.12s linear;
+         &:nth-child(2) {
+            background-color: var(--primary-color);
+            color: var(--primary-text-color);
+            &:hover {
+               background-color: var(--primary-hover-color);
+            }
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .storagePicker {
+      .storagePickerInput > div {
+         display: flex;
+         flex-direction: column;
+         .storage {
+            width: 100%;
+            margin-bottom: 10px;
+         }
+         .path {
+            width: 100%;
+            margin-left: 0px;
+         }
+      }
+   }
+}