@plutonhq/core-frontend 0.0.1

package/src/components/common/ActionModal/ActionModal.tsx

@@ -0,0 +1,71 @@
+import Icon from '../Icon/Icon';
+import Modal from '../Modal/Modal';
+import classes from './ActionModal.module.scss';
+
+interface ActionModalProps {
+   width?: string;
+   title?: string;
+   classNames?: string;
+   disablePortal?: boolean;
+   closeModal: () => void;
+   message: React.ReactNode;
+   successMessage?: React.ReactNode;
+   errorMessage?: React.ReactNode;
+   primaryAction?: {
+      type: 'default' | 'danger';
+      isPending: boolean;
+      action: (params: any) => void;
+      title: string;
+      icon?: string;
+   };
+   secondaryAction?: {
+      action: (params: any) => void;
+      title: string;
+      icon?: string;
+   };
+}
+
+const ActionModal = ({
+   title,
+   closeModal,
+   message,
+   successMessage,
+   errorMessage,
+   primaryAction,
+   secondaryAction,
+   classNames,
+   disablePortal = false,
+   width = '400px',
+}: ActionModalProps) => {
+   return (
+      <Modal title={title} closeModal={closeModal} classNames={classNames} disablePortal={disablePortal} width={width}>
+         <div>
+            {primaryAction?.isPending && (
+               <div className={classes.loader}>
+                  <Icon type="loading" size={24} />
+               </div>
+            )}
+         </div>
+         <div>{message}</div>
+         {successMessage && <div className={classes.success}>{successMessage}</div>}
+         {errorMessage && <div className={classes.error}>{errorMessage}</div>}
+         <div className={classes.actions}>
+            <button disabled={primaryAction?.isPending} onClick={secondaryAction?.action || closeModal} type="button">
+               {secondaryAction?.title || 'Cancel'}
+            </button>
+            {primaryAction?.title && (
+               <button
+                  className={primaryAction.type === 'danger' ? classes.dangerBtn : ''}
+                  disabled={primaryAction.isPending}
+                  onClick={primaryAction.action}
+                  type="button"
+               >
+                  {primaryAction.icon && <Icon type={primaryAction.icon} size={13} />} {primaryAction.title}
+               </button>
+            )}
+         </div>
+      </Modal>
+   );
+};
+
+export default ActionModal;

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

@@ -0,0 +1,88 @@
+.animatedWrapper {
+   transition: all var(--animation-duration, 300ms) ease-in-out;
+   will-change: opacity, transform;
+}
+
+.absolute {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   padding: inherit;
+   box-sizing: border-box;
+}
+
+// Fade animation
+.fade {
+   opacity: 0;
+
+   &.active {
+      opacity: 1;
+   }
+}
+
+// Slide up animation
+.slide-up {
+   opacity: 0;
+   transform: translateY(20px);
+
+   &.active {
+      opacity: 1;
+      transform: translateY(0);
+   }
+}
+
+// Slide down animation
+.slide-down {
+   opacity: 0;
+   transform: translateY(-20px);
+
+   &.active {
+      opacity: 1;
+      transform: translateY(0);
+   }
+}
+
+// Slide left animation
+.slide-left {
+   opacity: 0;
+   transform: translateX(20px);
+
+   &.active {
+      opacity: 1;
+      transform: translateX(0);
+   }
+}
+
+// Slide right animation
+.slide-right {
+   opacity: 0;
+   transform: translateX(-20px);
+
+   &.active {
+      opacity: 1;
+      transform: translateX(0);
+   }
+}
+
+// Scale animation
+.scale {
+   opacity: 0;
+   transform: scale(0.9);
+
+   &.active {
+      opacity: 1;
+      transform: scale(1);
+   }
+}
+
+// Rotate animation
+.rotate {
+   opacity: 0;
+   transform: rotate(-10deg) scale(0.95);
+
+   &.active {
+      opacity: 1;
+      transform: rotate(0) scale(1);
+   }
+}

package/src/components/common/AnimatedWrapper/AnimatedWrapper.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import classes from './AnimatedWrapper.module.scss';
+
+export interface AnimatedWrapperProps {
+   children: React.ReactNode;
+   isVisible: boolean;
+   animationDuration?: number;
+   animationType?: 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'rotate';
+   className?: string;
+   onAnimationComplete?: () => void;
+   absolute?: boolean;
+}
+
+const AnimatedWrapper: React.FC<AnimatedWrapperProps> = ({
+   children,
+   isVisible,
+   animationDuration = 300,
+   animationType = 'fade',
+   className = '',
+   absolute = false, // Default to false for backward compatibility
+   onAnimationComplete,
+}) => {
+   const [isActive, setIsActive] = useState(false);
+   const [shouldRender, setShouldRender] = useState(isVisible);
+
+   useEffect(() => {
+      if (isVisible) {
+         setShouldRender(true);
+         // Small delay to ensure DOM is ready before animation starts
+         setTimeout(() => {
+            setIsActive(true);
+         }, 10);
+      } else {
+         setIsActive(false);
+         // Wait for animation to complete before unmounting
+         const timer = setTimeout(() => {
+            setShouldRender(false);
+            onAnimationComplete?.();
+         }, animationDuration);
+         return () => clearTimeout(timer);
+      }
+   }, [isVisible, animationDuration, onAnimationComplete]);
+
+   if (!shouldRender) return null;
+
+   return (
+      <div
+         className={`
+        ${classes.animatedWrapper} 
+        ${classes[animationType]} 
+        ${isActive ? classes.active : ''} 
+        ${absolute ? classes.absolute : ''}
+        ${className}
+      `}
+         style={
+            {
+               '--animation-duration': `${animationDuration}ms`,
+            } as React.CSSProperties
+         }
+      >
+         {children}
+      </div>
+   );
+};
+
+export default AnimatedWrapper;

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

@@ -0,0 +1,56 @@
+.button {
+   padding: 12px 20px;
+   font-weight: 600;
+   font-size: 0.9em;
+   border-radius: 6px;
+   cursor: pointer;
+   transition: all 0.12s linear;
+   :global(.icon) {
+      margin-right: 5px;
+   }
+}
+
+.button--sm {
+   font-size: 0.75em;
+   border-radius: 4px;
+   padding: 8px 16px;
+}
+
+.button--lg {
+   font-size: 1.1em;
+   padding: 16px 24px;
+}
+
+.button--primary {
+   background-color: var(--primary-color);
+   color: var(--primary-text-color);
+   &:hover {
+      background-color: var(--primary-hover-color);
+   }
+}
+
+.button--secondary {
+   background-color: var(--primary-color-light);
+   color: var(--primary-color);
+   &:hover {
+      color: var(--primary-color-light);
+      background-color: var(--primary-color);
+   }
+}
+
+.button--tertiary {
+   background-color: var(--line-color);
+   color: var(--content-text-color-light);
+   &:hover {
+      filter: brightness(0.95);
+      color: var(--content-text-color);
+   }
+}
+
+.button--danger {
+   background-color: var(--error-button-color);
+   color: var(--primary-text-color);
+   &:hover {
+      background-color: var(--error-text-color);
+   }
+}

package/src/components/common/Button/Button.tsx

@@ -0,0 +1,36 @@
+import Icon from '../Icon/Icon';
+import classes from './Button.module.scss';
+
+interface ButtonProps {
+   text: string;
+   onClick: () => void;
+   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+   customClass?: string;
+   disabled?: boolean;
+   icon?: React.ReactNode | string;
+   size?: 'sm' | 'md' | 'lg';
+   minWidth?: string;
+   padding?: string;
+   fillWidth?: boolean;
+}
+
+const Button = ({ text, size = 'md', customClass, disabled = false, variant, onClick, minWidth, padding, fillWidth, icon }: ButtonProps) => {
+   return (
+      <button
+         style={{ minWidth, padding, width: fillWidth ? '100%' : undefined }}
+         onClick={onClick}
+         className={`
+            ${classes.button} 
+            ${customClass} 
+            ${size ? classes[`button--${size}`] : ''} 
+            ${variant ? classes[`button--${variant}`] : ''}`}
+         disabled={disabled}
+         type="button"
+      >
+         {icon && typeof icon === 'string' ? <Icon type={icon} size={13} /> : icon}
+         {text}
+      </button>
+   );
+};
+
+export default Button;

package/src/components/common/FileIcon/FileIcon.tsx

@@ -0,0 +1,20 @@
+import { getIconNameForFile } from '../../../utils/getIconNameforFile';
+
+interface FileIconProps {
+   filename: string;
+   customClass?: string;
+   size?: 'sm' | 'md' | 'lg';
+}
+
+const FileIcon = ({ filename, size = 'md', customClass, ...props }: FileIconProps) => {
+   const iconName = getIconNameForFile(filename);
+   const cssClass = `pfi-icon pfi-${iconName}${customClass ? ` ${customClass}` : ''} ${size ? ` pfi-${size}` : ''}`;
+
+   const actualExtension = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
+   const title = `File: ${filename}${iconName !== 'file' ? ` (Type: ${iconName} / ${actualExtension})` : ''}`;
+   // ^ Ensure 'file' matches your actual DEFAULT_ICON_NAME if it's different
+
+   return <i className={cssClass} title={title} aria-label={title} {...props}></i>;
+};
+
+export default FileIcon;

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

@@ -0,0 +1,196 @@
+.fileManager {
+   background: var(--content-background-color);
+   border-radius: 4px;
+   width: 100%;
+   max-height: 65vh;
+   display: flex;
+   flex-direction: column;
+}
+
+.navigationBar {
+   display: flex;
+   align-items: center;
+   padding: 12px;
+   border-bottom: 1px solid var(--line-color);
+   gap: 12px;
+
+   button {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 5px 10px;
+      border-radius: 4px;
+      border: 1px solid var(--line-color);
+      background: transparent;
+      cursor: pointer;
+      color: var(--icon-color);
+
+      &:hover {
+         background: var(--light-grey);
+         color: var(--content-color);
+      }
+
+      &:disabled {
+         opacity: 0.5;
+         cursor: not-allowed;
+      }
+   }
+}
+
+.currentPath {
+   flex: 1;
+   padding: 6px 12px;
+   background: var(--light-grey);
+   border-radius: 4px;
+   font-family: inherit;
+   height: 21px;
+   color: inherit;
+   cursor: text;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+   &:hover {
+      background: var(--line-color);
+      color: var(--content-text-color);
+   }
+   input {
+      background-color: transparent;
+      border: none;
+      width: 100%;
+      outline: none;
+      color: var(--content-text-color);
+   }
+   button {
+      background: none;
+      border: none;
+      padding: 2px 0px;
+      cursor: pointer;
+      font-family: inherit;
+      display: inline-block;
+      border-radius: 0;
+      color: inherit;
+      &:hover {
+         color: var(--primary-color);
+         text-decoration: underline;
+      }
+   }
+}
+
+.fileList {
+   flex: 1;
+   overflow-y: auto;
+   min-height: 300px;
+}
+
+.empty {
+   text-align: center;
+   width: 100%;
+   height: 100%;
+   padding: 10%;
+   box-sizing: border-box;
+}
+
+.fileHeader {
+   display: grid;
+   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
+   padding: 8px 12px;
+   background: var(--light-grey);
+   border-bottom: 1px solid var(--line-color);
+   font-weight: 500;
+   position: sticky;
+   top: 0;
+   z-index: 3;
+   text-align: center;
+   div {
+      cursor: pointer;
+      user-select: none;
+   }
+}
+
+.fileListContainer {
+   display: flex;
+   flex-direction: column;
+   flex: 1;
+   overflow: hidden;
+}
+
+.fileRow {
+   display: grid;
+   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
+   padding: 8px 12px;
+   border-bottom: 1px solid var(--line-color);
+   box-sizing: border-box;
+   cursor: pointer;
+   text-align: center;
+   color: var(--content-text-color-light);
+
+   &:hover {
+      background: var(--light-grey);
+   }
+   &.selected {
+      background-color: var(--background-color);
+      .fileName button {
+         color: var(--primary-color);
+         opacity: 1;
+      }
+   }
+   &:last-child {
+      border-bottom: none;
+   }
+}
+
+.fileName {
+   display: flex;
+   align-items: center;
+   text-align: left;
+   word-break: break-all;
+   gap: 6px;
+   color: var(--content-text-color);
+   button {
+      opacity: 0.3;
+      color: var(--icon-color);
+   }
+}
+
+.selected {
+   background: #e6f7ff;
+}
+
+.loading {
+   padding: 24px;
+   text-align: center;
+   color: #666;
+}
+
+@media only screen and (max-width: 768px) {
+   .fileHeader {
+      display: none;
+   }
+   .fileList {
+      height: 100% !important;
+   }
+   .fileRow {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      .fileName {
+         width: 100%;
+         margin-bottom: 5px;
+      }
+      .mobileFileInfo {
+         display: flex;
+         flex-direction: row;
+         justify-content: flex-start;
+         width: 100%;
+         padding-left: 30px;
+         box-sizing: border-box;
+         & > div {
+            padding: 0 10px;
+         }
+      }
+   }
+   .fileManager {
+      height: calc(100vh - 120px);
+      max-height: unset;
+   }
+}