@plutonhq/core-frontend 0.0.1

package/src/components/common/SearchItems/SearchItems.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import Icon from '../Icon/Icon';
+import classes from './SearchItems.module.scss';
+
+type SearchItemsProps = {
+   onSearch: (s: string) => void;
+   itemName: string;
+};
+
+const SearchItems = ({ onSearch, itemName = 'Plan' }: SearchItemsProps) => {
+   const [showSearchField, setShowSearchField] = useState(false);
+   const [searchText, setSearchText] = useState('');
+   return (
+      <div className={classes.searchItems}>
+         <button
+            className={showSearchField ? classes.buttonActive : ''}
+            data-tooltip-id="appTooltip"
+            data-tooltip-content={`Search ${itemName}`}
+            aria-label={`Search ${itemName}`}
+            data-tooltip-place="top"
+            data-tooltip-delay-show={500}
+            onClick={() => {
+               setShowSearchField(!showSearchField);
+               if (showSearchField) {
+                  onSearch('');
+               }
+            }}
+         >
+            <Icon type={showSearchField ? 'close' : 'search'} size={18} />
+         </button>
+         <div className={`${classes.searchBox} ${showSearchField ? classes.searchBoxShow : ''}`}>
+            <input
+               value={searchText}
+               onChange={(e) => {
+                  setSearchText(e.target.value);
+                  onSearch(e.target.value);
+               }}
+               placeholder="Search..."
+            />
+         </div>
+      </div>
+   );
+};
+
+export default SearchItems;

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

@@ -0,0 +1,217 @@
+.sidePanel {
+   width: 100%;
+   height: 100vh;
+   background-color: var(--modal-bg);
+   position: fixed;
+   left: 0;
+   top: 0;
+   z-index: 999;
+   display: flex;
+   align-items: flex-start;
+   justify-content: center;
+   transition: all 0.12s linear;
+}
+
+.wrapper {
+   width: 50rem;
+   height: 100vh;
+   position: fixed;
+   background: var(--content-background-color);
+   color: var(--content-text-color);
+   border: 1px solid var(--content-shadow-color);
+   right: 0;
+   top: 0;
+   box-sizing: border-box;
+   box-shadow: 0 0 20px var(--modal-shadow-color);
+   transform: translateX(100%);
+   transition: transform 0.2s ease-out;
+
+   &.active {
+      transform: translateX(0);
+   }
+   &.noPadding .content {
+      padding: 0;
+   }
+}
+
+.header {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   padding: 20px;
+   border-bottom: 1px solid var(--content-shadow-color);
+   h3 {
+      font-size: 1rem;
+      margin: 0;
+   }
+   img {
+      max-height: 18px;
+      vertical-align: text-top;
+      margin-right: 4px;
+   }
+}
+
+.content {
+   display: flex;
+   flex-direction: column;
+   padding: 30px;
+   overflow: auto;
+   height: calc(100vh - 130px);
+
+   &.hasFooter {
+      height: calc(100vh - 205px);
+   }
+}
+
+.close {
+   background: transparent;
+   opacity: 0.5;
+   color: var(--content-text-color);
+   transition: all 0.2s linear;
+   &:hover {
+      opacity: 1;
+      transform: rotate(90deg);
+   }
+}
+
+//Fields
+
+.field {
+   margin-bottom: 20px;
+   width: 100%;
+}
+
+.label {
+   font-weight: 600;
+   display: block;
+   margin-bottom: 8px;
+   font-size: 0.75rem;
+}
+
+.titleInput {
+   width: 100%;
+   border: 1px solid var(--line-color);
+   background-color: var(--content-background-color);
+   color: var(--content-text-color);
+   padding: 15px;
+   font-size: 0.75rem;
+   border-radius: 6px;
+   box-sizing: border-box;
+   &:focus {
+      outline: none;
+      border-color: var(--line-active-color);
+   }
+}
+
+.typeFieldOptions {
+   display: flex;
+   gap: 12px;
+}
+
+.typeFieldOption {
+   display: flex;
+   align-items: center;
+   border: 1px solid var(--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;
+   }
+}
+
+.typeFieldActive {
+   background-color: var(--background-color);
+   border-color: var(--primary-color);
+}
+
+.typeFieldIcon {
+   margin-right: 10px;
+   opacity: 0.4;
+}
+
+.typeFieldContent {
+   h4 {
+      margin: 0;
+      margin-bottom: 5px;
+   }
+   p {
+      margin: 0;
+   }
+}
+
+.intervalField {
+   display: flex;
+   gap: 15px;
+}
+
+.pathPickerField {
+   display: flex;
+   div[class*='_paths_'] {
+      border-radius: 0 4px 4px 4px;
+   }
+}
+
+.pathPickerFieldTabs {
+   display: flex;
+   margin: 0;
+   padding: 0;
+   li {
+      list-style-type: none;
+      cursor: pointer;
+      padding: 4px 12px;
+      border: 1px solid var(--content-background-color);
+      border-bottom-color: transparent;
+      border-radius: 4px 4px 0 0;
+      position: relative;
+      bottom: -1px;
+      &.pathPickerFieldActive {
+         border-color: var(--line-color);
+         border-bottom-color: var(--content-background-color);
+      }
+   }
+}
+
+// Footer
+.footer {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   padding: 15px;
+   padding-left: 30px;
+   border-top: 1px solid var(--content-shadow-color);
+   min-height: 40px;
+}
+
+.summary {
+   font-size: 0.75rem;
+}
+
+.createButton {
+   border-radius: 6px;
+   font-size: 0.75rem;
+   padding: 12px 20px;
+   color: var(--primary-text-color);
+   background-color: var(--primary-color);
+   cursor: pointer;
+}
+
+@media only screen and (max-width: 768px) {
+   .wrapper {
+      width: 100% !important;
+      .content {
+         padding: 20px;
+         height: calc(100vh - 110px);
+         &.noFooter {
+            height: calc(100vh - 90px);
+         }
+      }
+   }
+}

package/src/components/common/SidePanel/SidePanel.tsx

@@ -0,0 +1,68 @@
+import { createPortal } from 'react-dom';
+import Icon from '../Icon/Icon';
+import classes from './SidePanel.module.scss';
+import { useEffect, useState } from 'react';
+
+type SidePanelProps = {
+   title: string;
+   icon: React.ReactNode;
+   children: React.ReactNode;
+   width?: string;
+   withTabs?: boolean;
+   footer?: React.ReactNode;
+   close: () => void;
+};
+
+const SidePanel = ({ close, children, title, icon, footer, width, withTabs }: SidePanelProps) => {
+   const [isActive, setIsActive] = useState(false);
+
+   useEffect(() => {
+      const body = document.querySelector('body');
+      if (body) {
+         body.style.overflow = 'hidden';
+      }
+
+      // Trigger the animation after component mounts
+      setTimeout(() => {
+         setIsActive(true);
+      }, 10);
+
+      return () => {
+         if (body) {
+            body.style.overflow = 'auto';
+         }
+      };
+   }, []);
+
+   const handleClose = () => {
+      setIsActive(false);
+      // Wait for animation to complete before actually closing
+      setTimeout(() => {
+         close();
+      }, 300); // Match this with your CSS transition duration
+   };
+
+   return createPortal(
+      <div className={classes.sidePanel}>
+         <div className={`${classes.wrapper} ${isActive ? classes.active : ''} ${withTabs ? classes.noPadding : ''}`} style={{ width: width }}>
+            <div className={classes.header}>
+               <h3>
+                  {icon && icon} {title}
+               </h3>
+               <button className={classes.close} onClick={handleClose}>
+                  <Icon type="close" size={24} />
+               </button>
+            </div>
+            {!withTabs ? (
+               <div className={`${classes.content} styled__scrollbar ${footer ? classes.hasFooter : classes.noFooter}`}>{children}</div>
+            ) : (
+               <div>{children}</div>
+            )}
+            {footer && <div className={classes.footer}>{footer}</div>}
+         </div>
+      </div>,
+      document.body,
+   );
+};
+
+export default SidePanel;

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

@@ -0,0 +1,53 @@
+.sortItems {
+   position: relative;
+}
+
+.sortActive {
+   color: var(--primary-color) !important;
+   span {
+      opacity: 1;
+      color: inherit;
+   }
+}
+
+.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: 200px;
+   overflow: auto;
+   font-size: 0.75rem;
+   right: 0;
+   width: 200px;
+   border-radius: 6px;
+   ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+
+      li {
+         padding: 8px 10px;
+         cursor: pointer;
+
+         &.selectedItem {
+            color: var(--field-bg);
+            background: var(--primary-color);
+         }
+
+         &:hover {
+            background: var(--background-color);
+            color: inherit;
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .sortItemLabel {
+      display: none;
+   }
+}

package/src/components/common/SortItems/SortItems.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import Icon from '../Icon/Icon';
+import classes from './SortItems.module.scss';
+type SortItemsProps = {
+   onSort: (s: string) => void;
+   options: { label: string; value: string }[];
+};
+
+const SortItems = ({ options, onSort }: SortItemsProps) => {
+   const [showDropDown, setshowDropDown] = useState(false);
+   const [selected, setsSelected] = useState('');
+   const selectedLabel = options.find((item) => item.value === selected);
+   return (
+      <div className={classes.sortItems}>
+         <button
+            className={selected ? classes.sortActive : ''}
+            onClick={() => setshowDropDown(!showDropDown)}
+            data-tooltip-id="appTooltip"
+            data-tooltip-content="Sort"
+            aria-label="Sort Plans"
+            data-tooltip-place="top"
+            data-tooltip-delay-show={500}
+         >
+            {selectedLabel && <span className={classes.sortItemLabel}>{selectedLabel.label}</span>} <Icon type="sort" size={18} />
+         </button>
+         {showDropDown && (
+            <div className={`${classes.lists} styled__scrollbar`}>
+               <ul>
+                  {options.length > 0 &&
+                     options.map((item, indx) => {
+                        return (
+                           <li
+                              key={item.value + indx}
+                              onClick={() => {
+                                 setsSelected(item.value);
+                                 onSort(item.value);
+                                 setshowDropDown(false);
+                              }}
+                              className={`${selected && item.value === selected ? classes.selectedItem : ''}`}
+                           >
+                              {item.label}
+                           </li>
+                        );
+                     })}
+                  <li
+                     onClick={() => {
+                        setsSelected('');
+                        onSort('');
+                        setshowDropDown(false);
+                     }}
+                  >
+                     Clear Sort
+                  </li>
+               </ul>
+            </div>
+         )}
+      </div>
+   );
+};
+
+export default SortItems;

package/src/components/common/StatusLabel/StatusLabel.tsx

@@ -0,0 +1,36 @@
+import Icon from '../Icon/Icon';
+
+interface StatusLabelProps {
+   status: 'completed' | 'cancelled' | 'failed' | 'started';
+   hasError: boolean;
+}
+
+const StatusLabel = ({ status, hasError }: StatusLabelProps) => {
+   if (status === 'completed') {
+      return (
+         <div>
+            <Icon type={'check-circle-filled'} size={15} color="#06ba9f" /> Complete{hasError && '*'}
+         </div>
+      );
+   } else if (status === 'cancelled') {
+      return (
+         <div>
+            <Icon type={'close-circle'} size={15} color="#bbb" /> Cancelled
+         </div>
+      );
+   } else if (status === 'failed') {
+      return (
+         <div>
+            <Icon type={'error-circle-filled'} size={15} color="#ff7070" /> Failed
+         </div>
+      );
+   } else if (status === 'started' || status === 'retrying') {
+      return (
+         <div>
+            <Icon type={'loading'} size={15} /> In Progress
+         </div>
+      );
+   }
+};
+
+export default StatusLabel;

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

@@ -0,0 +1,43 @@
+.tabs {
+   padding: 10px;
+   border: 1px solid var(--line-color);
+   border-radius: 6px 6px 0 0;
+   ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      display: flex;
+      gap: 10px;
+      li {
+         padding: 3px 12px;
+         border-radius: 20px;
+         cursor: pointer;
+         span {
+            color: var(--icon-color);
+         }
+         &.tabActive {
+            color: var(--primary-color);
+            background-color: var(--primary-color-light);
+            span {
+               color: var(--primary-color);
+            }
+         }
+      }
+   }
+}
+.tabContent {
+   padding: 20px;
+   border: 1px solid var(--line-color);
+   border-top: 0;
+   border-radius: 0 0 6px 6px;
+}
+
+.tabs--inline {
+   .tabs {
+      padding: 0;
+      border: none;
+   }
+   .tabContent {
+      border: none;
+   }
+}

package/src/components/common/Tabs/Tabs.tsx

@@ -0,0 +1,101 @@
+import React, { createContext, useContext, useState } from 'react';
+import Icon from '../Icon/Icon';
+import classes from './Tabs.module.scss';
+
+interface TabsContextType {
+   activeTab: string;
+   setActiveTab: (tab: string) => void;
+}
+
+const TabsContext = createContext<TabsContextType | undefined>(undefined);
+
+interface TabsProps {
+   children: React.ReactNode;
+   defaultValue: string;
+   value?: string;
+   variant?: 'default' | 'inline' | 'underline';
+   onChange?: (value: string) => void;
+   customClasses?: string;
+}
+
+const Tabs = ({ children, defaultValue, value, variant = 'default', onChange, customClasses = '' }: TabsProps) => {
+   const [internalValue, setInternalValue] = useState(defaultValue);
+   const activeTab = value !== undefined ? value : internalValue;
+
+   const setActiveTab = (tab: string) => {
+      if (value === undefined) {
+         setInternalValue(tab);
+      }
+      onChange?.(tab);
+   };
+
+   return (
+      <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+         <div className={`${customClasses}  ${variant ? classes[`tabs--${variant}`] : ''}`}>{children}</div>
+      </TabsContext.Provider>
+   );
+};
+
+interface TabListProps {
+   children: React.ReactNode;
+   customClasses?: string;
+}
+
+const TabList = ({ children, customClasses }: TabListProps) => {
+   return (
+      <div className={`${classes.tabs} ${customClasses || ''}`}>
+         <ul>{children}</ul>
+      </div>
+   );
+};
+
+interface TabProps {
+   value: string;
+   label: string | React.ReactNode;
+   icon?: string;
+   customClasses?: string;
+}
+
+const Tab = ({ value, label, icon, customClasses }: TabProps) => {
+   const context = useContext(TabsContext);
+   if (!context) throw new Error('Tab must be used within Tabs');
+
+   const { activeTab, setActiveTab } = context;
+   const isActive = activeTab === value;
+
+   return (
+      <li onClick={() => setActiveTab(value)} className={`${isActive ? classes.tabActive : ''} ${customClasses || ''}`}>
+         {icon && (
+            <>
+               <Icon type={icon} size={13} />{' '}
+            </>
+         )}
+         <span>{label}</span>
+      </li>
+   );
+};
+
+interface TabPanelProps {
+   value: string;
+   children: React.ReactNode;
+   customClasses?: string;
+   minHeight?: string;
+}
+
+const TabPanel = ({ value, children, customClasses, minHeight }: TabPanelProps) => {
+   const context = useContext(TabsContext);
+   if (!context) throw new Error('TabPanel must be used within Tabs');
+
+   const { activeTab } = context;
+
+   if (activeTab !== value) return null;
+
+   return (
+      <div className={`${classes.tabContent} ${customClasses || ''}`} style={{ minHeight }}>
+         {children}
+      </div>
+   );
+};
+
+export { Tab, TabList, TabPanel };
+export default Tabs;

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

@@ -0,0 +1,59 @@
+.tagFilter {
+   display: flex;
+   position: relative;
+   button {
+      padding: 8px 10px;
+      border-radius: 50%;
+      span {
+         opacity: 1;
+      }
+   }
+}
+
+.tagsList {
+   width: 0;
+   visibility: hidden;
+   opacity: 0;
+   transition: all 0.12s linear;
+   background-color: var(--content-background-color);
+   border-radius: 20px;
+   display: flex;
+   gap: 5px;
+   position: absolute;
+   right: 45px;
+   padding: 8px;
+   overflow: hidden;
+   &.tagsListShow {
+      width: 400px;
+      visibility: visible;
+      opacity: 1;
+   }
+}
+
+.buttonActive {
+   background-color: var(--content-background-color);
+   position: relative;
+   z-index: 22;
+}
+
+.tag {
+   padding: 3px 10px;
+   border-radius: 20px;
+   background: var(--line-color);
+   font-size: 0.9em;
+   cursor: pointer;
+
+   &.tagActive {
+      background-color: var(--background-color);
+      color: var(--primary-color);
+      font-weight: 600;
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .tagsList {
+      &.tagsListShow {
+         width: 200px;
+      }
+   }
+}