refactor: use named exports & remove unused files

packages/dashboard/src/components/ui/Header/Header.module.scss

@@ -1,4 +0,0 @@
-.logo {
-  //   filter: hue-rotate(290deg);
-  //   filter: invert(100%);
-}

packages/dashboard/src/components/ui/Modal/Modal.module.scss

@@ -1,6 +1,6 @@
 @keyframes zoomIn {
   0% {
-    transform: scale(0.7);
+    transform: scale(0.8);
   }
   50% {
     transform: scale(1.05);

packages/dashboard/src/components/ui/NavBar/NavBar.tsx

@@ -38,7 +38,7 @@ export const NavBar: React.FC = () => {
           {renderItem('App Store', 'app-store', IconBrandAppstore)}
           {renderItem('Settings', 'settings', IconSettings)}
         </ul>
-        {isLatest && <span className="ms-2 badge bg-green d-none d-lg-block">Update available</span>}
+        {!isLatest && <span className="ms-2 badge bg-green d-none d-lg-block">Update available</span>}
       </div>
     </div>
   );

packages/dashboard/src/components/ui/Switch/Switch.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 
 interface IProps {
   label?: string;
@@ -11,7 +10,7 @@ interface IProps {
 }
 
 export const Switch = React.forwardRef<HTMLInputElement, IProps>(({ onChange, onBlur, name, label, checked, className }, ref) => (
-  <div className={clsx('', className)}>
+  <div className={className}>
     <label htmlFor={`switch-${name}`} className="form-check form-switch">
       <input name={name} ref={ref} onChange={onChange} onBlur={onBlur} className="form-check-input" type="checkbox" checked={checked} />
       <span className="form-check-label">{label}</span>

packages/dashboard/src/modules/AppStore/components/CategorySelector/CategorySelector.tsx

@@ -55,13 +55,19 @@ const CategorySelector: React.FC<IProps> = ({ onSelect, className, initialValue
         singleValue: (provided: any) => ({
           ...provided,
           color,
+          fontSize: '0.8rem',
+        }),
+        placeholder: (provided: any) => ({
+          ...provided,
+          color: '#a5a9b1',
+          fontSize: '0.8rem',
         }),
       }}
       onChange={handleChange}
       defaultValue={[]}
       name="categories"
       options={options as any}
-      placeholder="Category..."
+      placeholder="Category"
     />
   );
 };

packages/dashboard/src/modules/AppStore/pages/AppStorePage/AppStorePage.tsx

@@ -17,7 +17,7 @@ export const AppStorePage: NextPage = () => {
 
   const actions = (
     <div className="d-flex align-items-stretch align-items-md-center flex-column flex-md-row justify-content-end">
-      <Input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="search" className={clsx('flex-fill mt-2 mt-md-0 me-md-2', styles.selector)} />
+      <Input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search" className={clsx('flex-fill mt-2 mt-md-0 me-md-2', styles.selector)} />
       <CategorySelector initialValue={category} className={clsx('flex-fill mt-2 mt-md-0', styles.selector)} onSelect={setCategory} />
     </div>
   );

packages/dashboard/src/modules/Apps/components/AppActions.tsx

@@ -39,7 +39,7 @@ const ActionButton: React.FC<BtnProps> = (props) => {
   );
 };
 
-const AppActions: React.FC<IProps> = ({ app, status, onInstall, onUninstall, onStart, onStop, onOpen, onUpdate, onCancel, updateAvailable, onUpdateSettings }) => {
+export const AppActions: React.FC<IProps> = ({ app, status, onInstall, onUninstall, onStart, onStop, onOpen, onUpdate, onCancel, updateAvailable, onUpdateSettings }) => {
   const hasSettings = Object.keys(app.form_fields).length > 0 || app.exposable;
 
   const buttons: JSX.Element[] = [];
@@ -95,5 +95,3 @@ const AppActions: React.FC<IProps> = ({ app, status, onInstall, onUninstall, onS
 
   return <div className="d-flex justify-content-center flex-wrap">{buttons.map((button) => button)}</div>;
 };
-
-export default AppActions;

packages/dashboard/src/modules/Apps/components/AppDetailsTabs.tsx

@@ -8,7 +8,7 @@ interface IProps {
   info: AppInfo;
 }
 
-const AppDetailsTabs: React.FC<IProps> = ({ info }) => (
+export const AppDetailsTabs: React.FC<IProps> = ({ info }) => (
   <div className="card">
     <div style={{ marginTop: -1, marginBottom: -3 }} className="card-header">
       <ul className="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist">
@@ -54,5 +54,3 @@ const AppDetailsTabs: React.FC<IProps> = ({ info }) => (
     </div>
   </div>
 );
-
-export default AppDetailsTabs;

packages/dashboard/src/modules/Apps/components/InstallForm.tsx

@@ -24,7 +24,7 @@ export type FormValues = {
 const hiddenTypes = ['random'];
 const typeFilter = (field: FormField) => !hiddenTypes.includes(field.type);
 
-const InstallForm: React.FC<IProps> = ({ formFields, onSubmit, initalValues, exposable, loading }) => {
+export const InstallForm: React.FC<IProps> = ({ formFields, onSubmit, initalValues, exposable, loading }) => {
   const {
     register,
     handleSubmit,
@@ -85,5 +85,3 @@ const InstallForm: React.FC<IProps> = ({ formFields, onSubmit, initalValues, exp
     </form>
   );
 };
-
-export default InstallForm;

packages/dashboard/src/modules/Apps/components/InstallModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import InstallForm from './InstallForm';
+import { InstallForm } from './InstallForm';
 import { AppInfo } from '../../../generated/graphql';
 import { Modal, ModalBody, ModalHeader } from '../../../components/ui/Modal';
 
@@ -10,7 +10,7 @@ interface IProps {
   onSubmit: (values: Record<string, any>) => void;
 }
 
-const InstallModal: React.FC<IProps> = ({ app, isOpen, onClose, onSubmit }) => (
+export const InstallModal: React.FC<IProps> = ({ app, isOpen, onClose, onSubmit }) => (
   <Modal onClose={onClose} isOpen={isOpen}>
     <ModalHeader>
       <h5 className="modal-title">Install {app.name}</h5>
@@ -20,5 +20,3 @@ const InstallModal: React.FC<IProps> = ({ app, isOpen, onClose, onSubmit }) => (
     </ModalBody>
   </Modal>
 );
-
-export default InstallModal;

packages/dashboard/src/modules/Apps/components/StopModal.tsx

@@ -10,7 +10,7 @@ interface IProps {
   onConfirm: () => void;
 }
 
-const StopModal: React.FC<IProps> = ({ app, isOpen, onClose, onConfirm }) => (
+export const StopModal: React.FC<IProps> = ({ app, isOpen, onClose, onConfirm }) => (
   <Modal size="sm" onClose={onClose} isOpen={isOpen}>
     <ModalHeader>
       <h5 className="modal-title">Stop {app.name} ?</h5>
@@ -25,5 +25,3 @@ const StopModal: React.FC<IProps> = ({ app, isOpen, onClose, onConfirm }) => (
     </ModalFooter>
   </Modal>
 );
-
-export default StopModal;

packages/dashboard/src/modules/Apps/components/UninstallModal.tsx

@@ -12,7 +12,7 @@ interface IProps {
   onConfirm: () => void;
 }
 
-const UninstallModal: React.FC<IProps> = ({ app, isOpen, onClose, onConfirm }) => (
+export const UninstallModal: React.FC<IProps> = ({ app, isOpen, onClose, onConfirm }) => (
   <Modal size="sm" type="danger" onClose={onClose} isOpen={isOpen}>
     <ModalHeader>
       <h5 className="modal-title">Uninstall {app.name} ?</h5>
@@ -29,5 +29,3 @@ const UninstallModal: React.FC<IProps> = ({ app, isOpen, onClose, onConfirm }) =
     </ModalFooter>
   </Modal>
 );
-
-export default UninstallModal;

packages/dashboard/src/modules/Apps/components/UpdateModal.tsx

@@ -12,7 +12,7 @@ interface IProps {
   onConfirm: () => void;
 }
 
-const UpdateModal: React.FC<IProps> = ({ app, newVersion, isOpen, onClose, onConfirm }) => (
+export const UpdateModal: React.FC<IProps> = ({ app, newVersion, isOpen, onClose, onConfirm }) => (
   <Modal size="sm" onClose={onClose} isOpen={isOpen}>
     <ModalHeader>
       <h5 className="modal-title">Update {app.name} ?</h5>
@@ -30,5 +30,3 @@ const UpdateModal: React.FC<IProps> = ({ app, newVersion, isOpen, onClose, onCon
     </ModalFooter>
   </Modal>
 );
-
-export default UpdateModal;

packages/dashboard/src/modules/Apps/components/UpdateSettingsModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import InstallForm from './InstallForm';
+import { InstallForm } from './InstallForm';
 import { App, AppInfo } from '../../../generated/graphql';
 import { Modal, ModalBody, ModalHeader } from '../../../components/ui/Modal';
 
@@ -13,7 +13,7 @@ interface IProps {
   onSubmit: (values: Record<string, any>) => void;
 }
 
-const UpdateSettingsModal: React.FC<IProps> = ({ app, config, isOpen, onClose, onSubmit, exposed, domain }) => (
+export const UpdateSettingsModal: React.FC<IProps> = ({ app, config, isOpen, onClose, onSubmit, exposed, domain }) => (
   <Modal onClose={onClose} isOpen={isOpen}>
     <ModalHeader>
       <h5 className="modal-title">Update {app.name} config</h5>
@@ -23,5 +23,3 @@ const UpdateSettingsModal: React.FC<IProps> = ({ app, config, isOpen, onClose, o
     </ModalBody>
   </Modal>
 );
-
-export default UpdateSettingsModal;

packages/dashboard/src/modules/Apps/containers/AppDetailsContainer/AppDetailsContainer.tsx

@@ -16,21 +16,21 @@ import {
   useUpdateAppConfigMutation,
   useUpdateAppMutation,
 } from '../../../../generated/graphql';
-import AppActions from '../../components/AppActions';
-import AppDetailsTabs from '../../components/AppDetailsTabs';
+import { AppActions } from '../../components/AppActions';
+import { AppDetailsTabs } from '../../components/AppDetailsTabs';
 import { FormValues } from '../../components/InstallForm';
-import InstallModal from '../../components/InstallModal';
-import StopModal from '../../components/StopModal';
-import UninstallModal from '../../components/UninstallModal';
-import UpdateModal from '../../components/UpdateModal';
-import UpdateSettingsModal from '../../components/UpdateSettingsModal';
+import { InstallModal } from '../../components/InstallModal';
+import { StopModal } from '../../components/StopModal';
+import { UninstallModal } from '../../components/UninstallModal';
+import { UpdateModal } from '../../components/UpdateModal';
+import { UpdateSettingsModal } from '../../components/UpdateSettingsModal';
 
 interface IProps {
   app: Pick<App, 'id' | 'updateInfo' | 'config' | 'exposed' | 'domain' | 'status'>;
   info: AppInfo;
 }
 
-const AppDetailsContainer: React.FC<IProps> = ({ app, info }) => {
+export const AppDetailsContainer: React.FC<IProps> = ({ app, info }) => {
   const { addToast } = useToastStore();
   const installDisclosure = useDisclosure();
   const uninstallDisclosure = useDisclosure();
@@ -189,5 +189,3 @@ const AppDetailsContainer: React.FC<IProps> = ({ app, info }) => {
     </div>
   );
 };
-
-export default AppDetailsContainer;

packages/dashboard/src/modules/Apps/pages/AppDetailsPage/AppDetailsPage.tsx

@@ -2,7 +2,7 @@ import { NextPage } from 'next';
 import React from 'react';
 import { Layout } from '../../../../components/Layout';
 import { useGetAppQuery } from '../../../../generated/graphql';
-import AppDetailsContainer from '../../containers/AppDetailsContainer/AppDetailsContainer';
+import { AppDetailsContainer } from '../../containers/AppDetailsContainer/AppDetailsContainer';
 
 interface IProps {
   appId: string;