@plutonhq/core-frontend 0.0.1

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

@@ -0,0 +1,106 @@
+import { useEffect, useMemo, useState } from 'react';
+import classes from './StoragePicker.module.scss';
+import Select from '../Select/Select';
+import { useGetStorages } from '../../../../services/storage';
+import Input from '../Input/Input';
+import FolderPicker from '../../FolderPicker/FolderPicker';
+import Icon from '../../Icon/Icon';
+
+type storageItem = { name: string; id: string; type: string };
+
+interface StoragePickerProps {
+   storagePath?: string;
+   storageId?: string;
+   disabled?: boolean;
+   deviceId?: string;
+   onUpdate: (val: { storage: storageItem; path: string }) => void;
+}
+
+const StoragePicker = ({ onUpdate, storagePath = '', storageId, disabled = false, deviceId }: StoragePickerProps) => {
+   const [slectedStorage, setSelectedStorage] = useState<null | storageItem>();
+   const [showFolderPicker, setShowFolderPicker] = useState(false);
+   const [path, setPath] = useState(() => storagePath);
+
+   const { data: allStorageData } = useGetStorages();
+   const allUserStorages = (allStorageData?.result as storageItem[]) || [];
+   const allStorages = [...allUserStorages];
+
+   const storageOptions = useMemo(() => {
+      const storageOpts = allStorages.map(({ name, id, type }) => ({
+         label: name,
+         value: id.toString(),
+         image: <img src={`/providers/${type}.png`} />,
+      }));
+      return storageOpts;
+   }, [allStorages]);
+
+   const selectStorage = (storageID: string) => {
+      console.log('storageID :', storageID);
+      const theStorage = allStorages.find((s) => s.id == storageID);
+      if (theStorage || storageID === 'local') {
+         setSelectedStorage(theStorage);
+      }
+   };
+
+   useEffect(() => {
+      if (allStorages.length > 0 && storageId) {
+         const currentStorage = allStorages.find((s) => s.id === storageId);
+         setSelectedStorage(currentStorage);
+      }
+   }, [allStorageData]);
+
+   useEffect(() => {
+      if (slectedStorage) {
+         onUpdate({ storage: slectedStorage, path });
+      }
+   }, [slectedStorage, path]);
+
+   return (
+      <div className={classes.storagePicker}>
+         <div className={classes.storagePickerInput}>
+            <div>
+               <div className={classes.storage}>
+                  <Select
+                     fieldValue={slectedStorage?.id ? slectedStorage.id : ''}
+                     options={[{ label: 'Select Storage', value: '', icon: 'storages' }, ...storageOptions]}
+                     onUpdate={selectStorage}
+                     full={true}
+                     disabled={disabled}
+                  />
+               </div>
+               <div className={classes.path}>
+                  <Input
+                     disabled={disabled}
+                     fieldValue={path}
+                     onUpdate={(val) => setPath(val)}
+                     placeholder="folder-or-bucket/subfolder"
+                     full={true}
+                  />
+                  {slectedStorage?.type && !disabled && slectedStorage.type === 'local' && (
+                     <button
+                        className={classes.fileManagerBtn}
+                        data-tooltip-id="appTooltip"
+                        data-tooltip-content="Open FileManager to Select Directory"
+                        data-tooltip-place="top"
+                        onClick={() => setShowFolderPicker(true)}
+                     >
+                        <Icon type="folders" size={16} />
+                     </button>
+                  )}
+               </div>
+            </div>
+         </div>
+         {showFolderPicker && !disabled && (
+            <FolderPicker
+               deviceId={deviceId || 'main'}
+               title="Select Path"
+               selected={path}
+               close={() => setShowFolderPicker(false)}
+               onSelect={(newVal) => setPath(newVal)}
+            />
+         )}
+      </div>
+   );
+};
+
+export default StoragePicker;

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

@@ -0,0 +1,54 @@
+.tagField {
+   width: 100%;
+
+   .tagBox {
+      width: 100%;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      padding: 7px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      box-sizing: border-box;
+   }
+
+   .tag {
+      background: var(--background-color);
+      border: 1px solid var(--line-color);
+      font-size: 0.75rem;
+      padding: 0px 10px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+      span {
+         position: relative;
+         top: 2px;
+         opacity: 0.5;
+      }
+      i {
+         font-style: normal;
+         padding: 2px;
+         cursor: pointer;
+         opacity: 0.5;
+         &:hover {
+            opacity: 0.8;
+         }
+      }
+   }
+
+   .textInput {
+      input {
+         border: none;
+         font-size: 0.75rem;
+         font-family: inherit;
+         padding: 5px;
+         background-color: var(--content-background-color);
+         &:focus {
+            outline: none;
+            border: none;
+         }
+      }
+   }
+}

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

@@ -0,0 +1,83 @@
+import { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react';
+import classes from './TagsInput.module.scss';
+import Icon from '../../Icon/Icon';
+import FormField from '../FormField/FormField';
+
+type TagsInputProps = {
+   label?: string;
+   description?: string;
+   customClasses?: string;
+   icon?: string;
+   type?: string;
+   inline?: boolean;
+   fieldValue: string[];
+   onUpdate: (f: string[]) => void;
+};
+
+const TagsInput = ({ label, description, customClasses = '', fieldValue = [], onUpdate, icon, type = 'tag', inline }: TagsInputProps) => {
+   const [tags, setTags] = useState<string[]>(() => (Array.isArray(fieldValue) ? fieldValue : []));
+   const [newTag, setNewTag] = useState('');
+
+   useEffect(() => {
+      if (Array.isArray(fieldValue)) {
+         setTags(fieldValue);
+      }
+   }, [fieldValue]);
+
+   const addTag = (tag: string) => {
+      if (tag.length > 1) {
+         const updated = [...tags, tag];
+         setTags(updated);
+         setNewTag('');
+         onUpdate(updated);
+      }
+   };
+
+   const removeTag = (t: string) => {
+      const updatedTags = tags.filter((tag) => t !== tag);
+      setTags(updatedTags);
+      onUpdate(updatedTags);
+   };
+
+   const updateTag = (e: ChangeEvent<HTMLInputElement>) => {
+      if (e.target.value.includes(',')) {
+         const tagValue = e.target.value.replace(',', '');
+         addTag(tagValue);
+      } else {
+         setNewTag(e.target.value);
+      }
+   };
+
+   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+         e.preventDefault();
+         addTag(newTag);
+      }
+   };
+
+   return (
+      <FormField type={'tags'} label={label} description={description} inline={inline} classes={`${classes.tagField} ${customClasses}`}>
+         <div className={classes.tagBox}>
+            {tags.map((t, i) => (
+               <div className={classes.tag} key={t + i}>
+                  <Icon size={13} type={icon || 'tags'} /> {t}{' '}
+                  <i title="Remove" onClick={() => removeTag(t)}>
+                     ✖
+                  </i>
+               </div>
+            ))}
+            <div className={classes.textInput}>
+               <input
+                  type="text"
+                  value={newTag}
+                  onChange={(e) => updateTag(e)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={`${type}${tags.length + 1}, ${type}${tags.length + 2}`}
+               />
+            </div>
+         </div>
+      </FormField>
+   );
+};
+
+export default TagsInput;

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

@@ -0,0 +1,73 @@
+@use '../../../../styles/fields.scss';
+
+.timePickerField {
+   width: 130px;
+}
+
+.fieldInner {
+   width: auto;
+   position: relative;
+}
+
+.fieldLabel {
+   @extend %fieldLabel;
+}
+
+.currentTime {
+   border: 1px solid var(--field-line-color);
+   padding: 8px 10px;
+   border-radius: 6px;
+   display: flex;
+   justify-content: space-between;
+   cursor: pointer;
+   .dropBtn {
+      background: transparent;
+      color: var(--icon-color);
+   }
+}
+
+.timeSelect {
+   position: absolute;
+   background-color: var(--field-bg);
+   border: 1px solid var(--field-line-color);
+   padding: 10px;
+   border-radius: 0 0 6px 6px;
+   margin-top: -3px;
+}
+
+.times {
+   display: flex;
+
+   & > span {
+      padding: 5px;
+   }
+}
+
+.timeInput {
+   border: 1px solid var(--field-line-color);
+   padding: 5px;
+   border-radius: 6px;
+   width: 35px;
+   text-align: left;
+   color: inherit;
+}
+
+.ampm {
+   background-color: transparent;
+   border: none;
+   margin-top: 8px;
+   text-align: center;
+   button {
+      padding: 8px 15px;
+   }
+}
+
+.ampmActive {
+   background-color: var(--primary-color);
+   color: var(--primary-text-color);
+   border-radius: 4px;
+}
+
+.description {
+   @extend %fieldDescription;
+}

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

@@ -0,0 +1,99 @@
+import { useEffect, useMemo, useState } from 'react';
+import classes from './TimePicker.module.scss';
+import Icon from '../../Icon/Icon';
+
+interface TimePickerProps {
+   label?: string;
+   description?: string;
+   customClasses?: string;
+   fieldValue: string;
+   onUpdate: (s: string) => void;
+}
+
+const TimePicker = ({ label, description, customClasses, fieldValue, onUpdate }: TimePickerProps) => {
+   const [showPicker, setShowPicker] = useState(false);
+   const [hour, setHour] = useState(() => {
+      const timeMatch = fieldValue.match(/(\d+):(\d+)(AM|PM)/i);
+      return timeMatch ? parseInt(timeMatch[1]) : 10;
+   });
+   const [minutes, setMinutes] = useState(() => {
+      const timeMatch = fieldValue.match(/(\d+):(\d+)(AM|PM)/i);
+      return timeMatch ? parseInt(timeMatch[2]) : 0;
+   });
+   const [ampm, setAmpm] = useState(() => {
+      const timeMatch = fieldValue.match(/(\d+):(\d+)(AM|PM)/i);
+      return timeMatch ? timeMatch[3].toUpperCase() : 'AM';
+   });
+
+   useEffect(() => {
+      const formattedMinutes = minutes.toString().padStart(2, '0');
+      const formattedHour = hour.toString().padStart(2, '0');
+      const newTimeValue = `${formattedHour}:${formattedMinutes}${ampm}`;
+      console.log('newTimeValue :', newTimeValue, fieldValue, newTimeValue !== fieldValue);
+      if (newTimeValue !== fieldValue) {
+         console.log('Value Updated!');
+         onUpdate(newTimeValue);
+      }
+   }, [hour, minutes, ampm]);
+
+   const timeString = useMemo(() => {
+      const formattedMinutes = minutes.toString().padStart(2, '0');
+      const formattedHour = hour.toString().padStart(2, '0');
+      const newTimeValue = `${formattedHour}:${formattedMinutes}${ampm}`;
+
+      return newTimeValue;
+   }, [minutes, hour, ampm]);
+
+   return (
+      <div className={`${classes.timePickerField} ${customClasses}`}>
+         <div className={classes.fieldInner}>
+            {label && <div className={classes.fieldLabel}>{label}</div>}
+            <div className={classes.currentTime} onClick={() => setShowPicker(!showPicker)}>
+               <span>{timeString}</span>
+               <button className={classes.dropBtn}>
+                  <Icon type={showPicker ? 'caret-up' : 'caret-down'} size={13} />
+               </button>
+            </div>
+            {showPicker && (
+               <div className={classes.timeSelect}>
+                  <div className={classes.times}>
+                     <div>
+                        <input
+                           className={classes.timeInput}
+                           type="number"
+                           placeholder="10"
+                           value={hour}
+                           max={12}
+                           min={0}
+                           onChange={(e) => setHour(parseInt(e.target.value))}
+                        />
+                     </div>
+                     <span>:</span>
+                     <div>
+                        <input
+                           className={classes.timeInput}
+                           type="number"
+                           placeholder="20"
+                           value={minutes}
+                           max={59}
+                           min={0}
+                           onChange={(e) => setMinutes(parseInt(e.target.value))}
+                        />
+                     </div>
+                  </div>
+                  <div className={classes.ampm}>
+                     <button onClick={() => setAmpm('AM')} className={ampm === 'AM' ? classes.ampmActive : ''}>
+                        AM
+                     </button>
+                     <button onClick={() => setAmpm('PM')} className={ampm === 'PM' ? classes.ampmActive : ''}>
+                        PM
+                     </button>
+                  </div>
+               </div>
+            )}
+            {description && <span className={classes.description}>{description}</span>}
+         </div>
+      </div>
+   );
+};
+export default TimePicker;

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

@@ -0,0 +1,68 @@
+.toggleField {
+   &.toggleFieldInline {
+      .fieldInner {
+         width: 100%;
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+         gap: 12px;
+      }
+   }
+}
+
+.toggleCheckbox {
+   display: flex;
+   span {
+      // width: 250px;
+      display: inline-block;
+      font-size: 0.75rem;
+   }
+
+   input[type='checkbox'] {
+      height: 0;
+      width: 0;
+      margin: 0;
+      min-width: 0;
+      visibility: hidden;
+   }
+
+   label {
+      cursor: pointer;
+      text-indent: -9999px;
+      width: 32px;
+      height: 18px;
+      background: var(--line-active-color);
+      display: inline-block;
+      border-radius: 30px;
+      position: relative;
+   }
+
+   label:after {
+      content: '';
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 12px;
+      height: 12px;
+      background: var(--content-background-color);
+      border-radius: 30px;
+      transition: 0.3s;
+   }
+
+   input:checked + label {
+      background: linear-gradient(135deg, #8778ff 0%, #526ec7 100%);
+   }
+
+   input:checked + label:after {
+      left: calc(100% - 3px);
+      transform: translateX(-100%);
+   }
+
+   label:active:after {
+      width: 30px;
+   }
+}
+
+.description {
+   padding-left: 10px;
+}

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

@@ -0,0 +1,34 @@
+import { nanoid } from 'nanoid';
+import classes from './Toggle.module.scss';
+import FormField from '../FormField/FormField';
+
+type ToggleProps = {
+   label?: string;
+   description?: string;
+   customClasses?: string;
+   inline?: boolean;
+   hint?: string;
+   error?: string;
+   fieldValue: boolean;
+   onUpdate: (f: boolean) => void;
+};
+
+const Toggle = ({ label, description, customClasses = '', fieldValue = false, inline = false, hint = '', error, onUpdate }: ToggleProps) => {
+   const toggleID = nanoid();
+   const updateField = (event: React.FormEvent<HTMLInputElement>) => {
+      const inputVal = event.currentTarget.value === 'true';
+      onUpdate(!inputVal);
+   };
+
+   return (
+      <FormField type="toggle" label={label} hint={hint} error={error} inline={inline} classes={`${classes.toggleField} ${customClasses}`}>
+         <div className={classes.toggleCheckbox}>
+            <input type="checkbox" id={toggleID} value={fieldValue.toString()} onChange={updateField} checked={fieldValue} />
+            <label htmlFor={toggleID}>{label}</label>
+            {description && <span className={classes.description}>{description}</span>}
+         </div>
+      </FormField>
+   );
+};
+
+export default Toggle;

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

@@ -0,0 +1,67 @@
+@use '../../../../styles/fields.scss';
+
+.tristateField {
+   .fieldInner {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+   }
+
+   .inputGroup {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+   }
+
+   .optionSelector {
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      overflow: hidden;
+   }
+
+   .option {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 5px 12px;
+      font-size: 0.75rem;
+      cursor: pointer;
+      color: var(--content-text-color);
+      background: transparent;
+      border-right: 1px solid var(--field-line-color);
+      transition: all 0.2s ease;
+
+      &:last-child {
+         border-right: none;
+      }
+
+      &:hover {
+         background: var(--background-color);
+      }
+
+      &.selected {
+         background: var(--primary-color);
+         color: var(--primary-text-color);
+      }
+
+      &.optionDisabled {
+         opacity: 0.6;
+         user-select: none;
+         cursor: not-allowed;
+      }
+   }
+
+   &.tristateInline {
+      .fieldInner {
+         display: flex;
+         flex-direction: row;
+         gap: 1.25rem;
+         align-items: center;
+      }
+   }
+}

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

@@ -0,0 +1,48 @@
+import Icon from '../../Icon/Icon';
+import FormField from '../FormField/FormField';
+import classes from './Tristate.module.scss';
+
+type TristateProps = {
+   label?: string;
+   description?: string;
+   customClasses?: string;
+   inline?: boolean;
+   hint?: string;
+   fieldValue: string;
+   options: { label: string; value: string; disabled?: boolean }[];
+   onUpdate: (value: string) => void;
+};
+
+const Tristate = ({ label, description, customClasses = '', fieldValue = '', hint = '', inline = false, options, onUpdate }: TristateProps) => {
+   const sortedOptions = [...options].sort((a, b) => {
+      if (a.disabled === b.disabled) return 0;
+      return a.disabled ? 1 : -1;
+   });
+   return (
+      <FormField
+         type="tristate"
+         label={label}
+         description={description}
+         hint={hint}
+         inline={inline}
+         classes={`${classes.tristateField} ${customClasses}`}
+      >
+         <div className={classes.inputGroup}>
+            <ul className={classes.optionSelector}>
+               {sortedOptions.map((option) => (
+                  <li
+                     key={option.value}
+                     className={`${classes.option} ${fieldValue === option.value ? classes.selected : ''} ${option.disabled ? classes.optionDisabled : ''}`}
+                     onClick={() => !option.disabled && onUpdate(option.value)}
+                  >
+                     {fieldValue === option.value && <Icon type="check" size={12} />}
+                     {option.label}
+                  </li>
+               ))}
+            </ul>
+         </div>
+      </FormField>
+   );
+};
+
+export default Tristate;