@plutonhq/core-frontend 0.0.1

package/src/components/common/PageHeader/PageHeader.module.scss

@@ -0,0 +1,61 @@
+.header {
+   width: 100%;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+}
+
+.headerTitle {
+   display: flex;
+   align-items: center;
+   font-size: 1.125rem;
+   :global(.icon) {
+      margin-right: 5px;
+      position: relative;
+      top: 3px;
+      color: var(--primary-color);
+   }
+}
+
+.rightSection {
+   display: flex;
+   align-items: center;
+   position: relative;
+   button {
+      padding: 10px;
+      cursor: pointer;
+      color: var(--background-text-color);
+      transition: all 0.2s linear;
+
+      &:hover {
+         opacity: 1;
+      }
+   }
+   & > b {
+      font-weight: normal;
+      font-size: 0.5rem;
+      margin: 0 8px;
+      color: var(--line-active-color);
+   }
+}
+
+.button {
+   font-size: 0.75rem;
+   font-weight: 600;
+   padding: 4px 15px;
+   margin-left: 8px;
+   border-radius: 20px;
+   font-family: inherit;
+   background-color: var(--primary-color);
+   color: var(--primary-text-color);
+   transition: all 0.2s linear;
+   &:hover {
+      background-color: var(--primary-hover-color);
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .headerTitle {
+      font-size: 1rem;
+   }
+}

package/src/components/common/PageHeader/PageHeader.tsx

@@ -0,0 +1,36 @@
+import PageTitle from '../../App/PageTitle/PageTitle';
+import Icon from '../Icon/Icon';
+import classes from './PageHeader.module.scss';
+
+interface PageHeaderProps {
+   title: string | React.ReactNode;
+   pageTitle?: string;
+   icon: string;
+   stat?: number;
+   buttonTitle?: string;
+   buttonAction?: Function;
+   rightSection?: React.ReactNode;
+}
+
+const PageHeader = ({ title, pageTitle, icon, stat, buttonTitle, buttonAction, rightSection }: PageHeaderProps) => {
+   return (
+      <>
+         <PageTitle title={pageTitle ? pageTitle : typeof title === 'string' ? title : ''} />
+         <div className={classes.header}>
+            <div>
+               <h2 className={classes.headerTitle}>
+                  {icon && <Icon size={24} type={icon} />} {title && title} {stat && <span>{stat}</span>}
+                  {buttonTitle && buttonAction && (
+                     <button className={classes.button} onClick={() => buttonAction()}>
+                        {buttonTitle}
+                     </button>
+                  )}
+               </h2>
+            </div>
+            <div className={classes.rightSection}>{rightSection && rightSection}</div>
+         </div>
+      </>
+   );
+};
+
+export default PageHeader;

package/src/components/common/PathPicker/PathPicker.module.scss

@@ -0,0 +1,278 @@
+.pathPicker {
+   width: 100%;
+}
+.paths {
+   width: 100%;
+   border: 1px solid var(--field-line-color);
+   border-radius: 6px;
+   padding: 10px;
+   display: flex;
+   flex-wrap: wrap;
+   gap: 10px;
+   box-sizing: border-box;
+   .path {
+      background: var(--background-color);
+      border: 1px solid var(--line-color);
+      font-size: 0.75rem;
+      padding: 3px 10px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      cursor: pointer;
+      transition: all 0.12s linear;
+
+      :global(.icon) {
+         position: relative;
+         top: 2px;
+         opacity: 0.5;
+      }
+
+      i {
+         font-style: normal;
+         padding: 2px;
+         cursor: pointer;
+         opacity: 0.5;
+         &:hover {
+            opacity: 0.8;
+         }
+      }
+      .excludeCount {
+         font-size: 0.75rem;
+         opacity: 1;
+         background: #0000000f;
+         padding: 1px 6px;
+         border-radius: 4px;
+      }
+      &:hover {
+         border-color: var(--line-active-color);
+      }
+   }
+}
+.pathAdd {
+   font-size: 1.125rem;
+   font-weight: 600;
+   padding: 0px 10px;
+   color: var(--content-text-color-light);
+   user-select: none;
+   cursor: pointer;
+   position: relative;
+   span {
+      font-size: 0.75rem;
+   }
+   &:hover {
+      color: var(--primary-color);
+   }
+}
+
+.addDropDown {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   width: max-content;
+   background-color: var(--content-background-color);
+   border: 1px solid var(--line-color);
+   position: absolute;
+   z-index: 2;
+   border-radius: 4px;
+   right: -45px;
+   top: -65px;
+   box-shadow: 0 0 15px var(--modal-shadow-color);
+
+   button {
+      padding: 8px 10px;
+      cursor: pointer;
+      font-size: 0.75rem;
+      width: 100%;
+      color: var(--content-text-color);
+      text-align: right;
+      &:hover {
+         background-color: var(--primary-color);
+         color: var(--primary-text-color);
+      }
+   }
+}
+
+.patternPickerContent {
+   display: flex;
+   flex-direction: row;
+   gap: 10px;
+   div[class*='_selectField_'] {
+      max-width: 100px;
+   }
+   div[class*='_dropdown_'] {
+      min-width: unset;
+   }
+}
+
+.patternPickerHint {
+   margin: 20px 0;
+
+   table {
+      border: 1px solid var(--primary-color-light);
+      border-radius: 8px;
+      border-spacing: 0;
+      width: 100%;
+      font-size: 0.75rem;
+
+      th {
+         background: var(--primary-color-light);
+         padding: 6px;
+         text-align: left;
+      }
+
+      td {
+         padding: 6px;
+         border-bottom: 1px solid var(--primary-color-light);
+      }
+
+      tr:last-child td {
+         border-bottom: none;
+      }
+   }
+}
+
+.patternModalFooter {
+   display: flex;
+   justify-content: space-between;
+   button {
+      color: var(--content-text-color-light);
+      &.hintBtnActive {
+         color: var(--primary-color);
+      }
+   }
+}
+
+.pathPickerModal {
+   position: fixed;
+   width: 100%;
+   height: 100vh;
+   top: 0;
+   left: 0;
+   z-index: 99999999;
+   background: var(--modal-shadow-color-light);
+   .pathPickerModalInner {
+      position: absolute;
+      width: 70%;
+      max-width: 1000px;
+      background: var(--content-background-color);
+      color: var(--content-text-color);
+      border-radius: 8px;
+      border: 1px solid var(--content-shadow-color);
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      top: 10%;
+      box-sizing: border-box;
+      box-shadow: 0 0 20px var(--modal-shadow-color);
+      .pathPickerHeader {
+         display: flex;
+         align-items: center;
+         justify-content: space-between;
+         padding: 10px 15px;
+         border-bottom: 1px solid var(--line-color);
+         h4 {
+            margin: 0;
+         }
+         button {
+            padding: 10px;
+            cursor: pointer;
+            background: transparent;
+            opacity: 0.5;
+            color: var(--content-text-color);
+            transition: all 0.2s linear;
+            &:hover {
+               opacity: 1;
+               transform: rotate(90deg);
+            }
+         }
+      }
+      .pathPickerFooter {
+         display: flex;
+         align-items: center;
+         justify-content: flex-end;
+         padding: 10px 15px;
+         border-top: 1px solid var(--line-color);
+         button {
+            background-color: var(--primary-color);
+            color: var(--primary-text-color);
+            padding: 10px 12px;
+            cursor: pointer;
+            border-radius: 6px;
+         }
+      }
+      .pathPickerContent {
+         padding: 20px;
+         max-height: 500px;
+         overflow: auto;
+      }
+   }
+}
+
+.dirItem {
+   cursor: pointer;
+   margin: 3px 0;
+}
+.selectedDirItem {
+   background-color: var(--primary-color);
+   color: var(--primary-text-color);
+   border-radius: 3px;
+   :global(.icon) {
+      color: var(--primary-text-color);
+   }
+}
+
+.file {
+   padding-left: 7px;
+}
+
+.isSingle {
+   .paths {
+      .path {
+         width: 100%;
+         padding: 6px 10px;
+      }
+   }
+}
+.disabled {
+   .paths {
+      .path {
+         background-color: var(--line-color);
+         cursor: default;
+         &:hover {
+            border-color: var(--line-color);
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .pathPickerModal .pathPickerModalInner {
+      width: 100%;
+      height: 100%;
+      top: 0;
+   }
+   .patternPickerContent {
+      flex-direction: column;
+      :global([class*='_input_']) {
+         width: 100%;
+      }
+   }
+
+   .patternModalFooter {
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      & > button {
+         margin-bottom: 15px;
+         text-align: left;
+      }
+      & > div {
+         width: 100%;
+         display: flex;
+         button {
+            width: 100%;
+         }
+      }
+   }
+}

package/src/components/common/PathPicker/PathPicker.tsx

@@ -0,0 +1,270 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import Icon from '../Icon/Icon';
+import classes from './PathPicker.module.scss';
+import { FileManager } from '../FileManager/FileManager';
+import Modal from '../Modal/Modal';
+import Select from '../form/Select/Select';
+import Input from '../form/Input/Input';
+
+type PathPickerProps = {
+   onUpdate: (paths: { includes: string[]; excludes: string[] }) => void;
+   paths: { includes: string[]; excludes: string[] };
+   deviceId: string;
+   single?: boolean;
+   disallowChange?: boolean;
+};
+
+const PathPicker = ({ onUpdate, single = false, disallowChange = false, paths = { includes: [], excludes: [] }, deviceId }: PathPickerProps) => {
+   const [showAddPicker, setShowAddPicker] = useState(false);
+   const [showPatternPicker, setShowPatternPicker] = useState(false);
+   const [showPicker, setShowPicker] = useState(false);
+   const [showPatternHint, setShowPatternHint] = useState(false);
+   const [patternInput, setPatternInput] = useState('');
+   const [patternInputType, setPatternInputType] = useState<'includes' | 'excludes'>('includes');
+   const [openPath, setOpenPath] = useState<string | undefined>();
+   const [selectedPaths, setSelectedPaths] = useState<{ includes: string[]; excludes: string[] }>(() => paths);
+
+   useEffect(() => {
+      const closeModalOnEsc = (event: KeyboardEvent) => {
+         if (event.key === 'Escape') {
+            setShowPicker(false);
+         }
+      };
+      window.addEventListener('keydown', closeModalOnEsc, false);
+      return () => {
+         window.removeEventListener('keydown', closeModalOnEsc, false);
+      };
+   }, []);
+
+   const closeOnBGClick = (e: React.SyntheticEvent) => {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      if (e.target === e.currentTarget) {
+         setShowPicker(false);
+      }
+   };
+
+   const removePath = (path: string) => {
+      const updatedPaths = {
+         ...selectedPaths,
+         includes: selectedPaths.includes.filter((p) => p !== path),
+         excludes: selectedPaths.excludes.filter((p) => p !== path && !p.startsWith(path + '/') && !p.startsWith(path + '#')),
+      };
+      setSelectedPaths(updatedPaths);
+      onUpdate(updatedPaths);
+   };
+
+   const addPattern = () => {
+      const patternPath = (patternInputType === 'includes' ? 'ip#' : 'ep#') + patternInput;
+      const updatedPaths = {
+         ...selectedPaths,
+         [patternInputType]: [...selectedPaths[patternInputType], patternPath],
+      };
+      console.log('updatedPaths :', selectedPaths, updatedPaths);
+      setSelectedPaths(updatedPaths);
+      onUpdate(updatedPaths);
+      setShowPatternPicker(false);
+   };
+
+   const addPath = (path: string) => {
+      const isParentSelected = selectedPaths.includes.some((p) => path.startsWith(p + '/'));
+
+      if (!isParentSelected) {
+         // Handle inclusion of new paths
+         setSelectedPaths({
+            ...selectedPaths,
+            includes: selectedPaths.includes.includes(path) ? selectedPaths.includes.filter((p) => p !== path) : [...selectedPaths.includes, path],
+         });
+      } else {
+         // Handle exclusion of child paths
+         setSelectedPaths({
+            ...selectedPaths,
+            excludes: selectedPaths.excludes.includes(path) ? selectedPaths.excludes.filter((p) => p !== path) : [...selectedPaths.excludes, path],
+         });
+      }
+   };
+
+   const getExcludedCount = (path: string) => {
+      return selectedPaths.excludes.filter((p) => p.startsWith(path + '/')).length;
+   };
+
+   return (
+      <div className={`${classes.pathPicker} ${disallowChange ? classes.disabled : ''} ${single ? classes.isSingle : ''} `}>
+         <div className={classes.paths}>
+            {[...paths.includes, ...paths.excludes.filter((p) => p.startsWith('ep#'))].map((p, i) => {
+               const pathSlice = p.slice(0, 3);
+               const isPattern = pathSlice === 'ep#' || pathSlice === 'ip#';
+               const pathName = isPattern ? p.replace('ep#', '').replace('ip#', '') : p;
+               return (
+                  <div
+                     className={classes.path}
+                     key={p + i}
+                     onClick={() => {
+                        if (disallowChange) return;
+                        !isPattern && setOpenPath(p);
+                        !isPattern && setShowPicker(true);
+                     }}
+                  >
+                     <Icon type={isPattern ? 'pattern' : 'folders'} />
+
+                     {pathName}
+                     {getExcludedCount(p) > 0 && <span className={classes.excludeCount}>{getExcludedCount(p)} Excluded</span>}
+                     {pathSlice === 'ep#' && <span className={classes.excludeCount}>Exclude</span>}
+                     {!disallowChange && (
+                        <button
+                           onClick={(e) => {
+                              e.stopPropagation();
+                              removePath(p);
+                           }}
+                        >
+                           <Icon type="close" />
+                        </button>
+                     )}
+                  </div>
+               );
+            })}
+            {(!single || (single && paths.includes.length === 0)) && (
+               <div title="Add Path" onClick={() => setShowAddPicker(!showAddPicker)} className={classes.pathAdd}>
+                  + <span>Add</span>
+                  {showAddPicker && (
+                     <div className={classes.addDropDown}>
+                        <button
+                           onClick={() => {
+                              setOpenPath(undefined);
+                              setShowPicker(true);
+                              setShowAddPicker(false);
+                           }}
+                        >
+                           <Icon type="folders" size={13} /> Add Files/Folders
+                        </button>
+                        <button
+                           onClick={() => {
+                              setOpenPath(undefined);
+                              setShowPatternPicker(true);
+                              setShowAddPicker(false);
+                           }}
+                        >
+                           <Icon type="pattern" size={13} /> Add Pattern
+                        </button>
+                     </div>
+                  )}
+               </div>
+            )}
+         </div>
+         {showPatternPicker && (
+            <Modal title={`Add Source Pattern`} closeModal={() => setShowPatternPicker(false)} width="500px">
+               <div className={classes.patternPickerModal}>
+                  <div className={classes.patternPickerContent}>
+                     <Select
+                        fieldValue={patternInputType}
+                        options={[
+                           { label: 'Include', value: 'includes' },
+                           { label: 'Exclude', value: 'excludes' },
+                        ]}
+                        onUpdate={(val) => setPatternInputType(val as 'includes' | 'excludes')}
+                        full={true}
+                     />
+                     <Input fieldValue={patternInput} onUpdate={(val) => setPatternInput(val)} placeholder={'**/node_modules/**'} full={true} />
+                  </div>
+                  {showPatternHint && (
+                     <div className={classes.patternPickerHint}>
+                        <table>
+                           <thead>
+                              <tr>
+                                 <th>Pattern</th>
+                                 <th>Description</th>
+                              </tr>
+                           </thead>
+                           <tbody>
+                              <tr>
+                                 <td>**/folder</td>
+                                 <td>Match folder in any subdirectory recursively</td>
+                              </tr>
+                              <tr>
+                                 <td>*.ext</td>
+                                 <td>Match all files with specific extension</td>
+                              </tr>
+                              <tr>
+                                 <td>path/to/folder/*</td>
+                                 <td>Match everything in specific folder</td>
+                              </tr>
+                              <tr>
+                                 <td>path/*/folder</td>
+                                 <td>Match folder in any immediate subdirectory</td>
+                              </tr>
+                              <tr>
+                                 <td>path/to/file?</td>
+                                 <td>Match single character wildcard</td>
+                              </tr>
+                              <tr>
+                                 <td>{`path/to/{folder1,folder2}`}</td>
+                                 <td>Match multiple specific paths</td>
+                              </tr>
+                              <tr>
+                                 <td>[abc]</td>
+                                 <td>Match any character in brackets</td>
+                              </tr>
+                              <tr>
+                                 <td>[a-z]</td>
+                                 <td>Match any character in range</td>
+                              </tr>
+                              <tr>
+                                 <td>/absolute/path/*</td>
+                                 <td>Match from absolute path</td>
+                              </tr>
+                              <tr>
+                                 <td>./relative/path/*</td>
+                                 <td>Match from relative path</td>
+                              </tr>
+                           </tbody>
+                        </table>
+                     </div>
+                  )}
+                  <div className={`${classes.patternModalFooter} modalActions`}>
+                     <button className={showPatternHint ? classes.hintBtnActive : ''} onClick={() => setShowPatternHint(!showPatternHint)}>
+                        <Icon type="help" size={12} /> {showPatternHint ? 'Hide' : 'Show'} Pattern Hint
+                     </button>
+                     <div>
+                        <button className="modalButton" onClick={() => setShowPatternPicker(false)}>
+                           Cancel
+                        </button>
+                        <button className="modalButton modalButton--ok" onClick={addPattern}>
+                           Add Pattern
+                        </button>
+                     </div>
+                  </div>
+               </div>
+            </Modal>
+         )}
+         {showPicker &&
+            createPortal(
+               <div className={classes.pathPickerModal} onClick={closeOnBGClick}>
+                  <div className={classes.pathPickerModalInner}>
+                     <div className={classes.pathPickerHeader}>
+                        <h4>Choose Paths/Files to Backup</h4>
+                        <button onClick={() => setShowPicker(false)}>
+                           <Icon type="close" size={20} />
+                        </button>
+                     </div>
+                     <FileManager deviceId={deviceId} onSelect={addPath} selectedPaths={selectedPaths} defaultPath={openPath || undefined} />
+                     <div className={classes.pathPickerFooter}>
+                        {/* <div>{`${selectedPaths.includes.length} sources Included`}</div> */}
+                        <button
+                           onClick={() => {
+                              onUpdate(selectedPaths);
+                              setShowPicker(false);
+                           }}
+                        >
+                           <Icon type="check" size={12} /> Update Sources
+                        </button>
+                     </div>
+                  </div>
+               </div>,
+               document.body,
+            )}
+      </div>
+   );
+};
+
+export default PathPicker;

package/src/components/common/SearchItems/SearchItems.module.scss

@@ -0,0 +1,48 @@
+.searchItems {
+   display: flex;
+   position: relative;
+   button {
+      padding: 10px 12px;
+      border-radius: 50%;
+      span {
+         opacity: 1;
+      }
+   }
+}
+
+.searchBox {
+   width: 0;
+   visibility: hidden;
+   opacity: 0;
+   transition: all 0.12s linear;
+   border-radius: 20px;
+   display: flex;
+   gap: 5px;
+   position: absolute;
+   right: 45px;
+   padding: 5px;
+   overflow: hidden;
+   input {
+      border: 1px solid var(--line-color);
+      background-color: var(--content-background-color);
+      padding: 8px 12px;
+      border-radius: 20px;
+      box-sizing: border-box;
+      width: 100%;
+      outline: none;
+      &:focus {
+         border-color: var(--line-active-color);
+      }
+   }
+   &.searchBoxShow {
+      width: 200px;
+      visibility: visible;
+      opacity: 1;
+   }
+}
+
+.buttonActive {
+   background-color: var(--content-background-color);
+   position: relative;
+   z-index: 22;
+}