refactor: use named exports & remove unused files

This commit is contained in:
Nicolas Meienberger 2022-12-07 18:46:13 +01:00 committed by Nicolas Meienberger
parent 59b12c2679
commit 8445c8adc7
16 changed files with 30 additions and 47 deletions

View file

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

View file

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

View file

@ -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>
);

View file

@ -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>

View file

@ -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"
/>
);
};

View file

@ -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>
);

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;