0ct0pu5/runtipi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: update @tabler/core and replace @tabler/icons with @tabler/react-icons

Browse source
This commit is contained in:
Nicolas Meienberger 2023-03-24 08:42:18 +01:00
parent 60f15cbd49
commit 9b7107c7b1
10 changed files with 38 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -32,14 +32,14 @@
"@hookform/resolvers": "^2.9.10",
"@prisma/client": "^4.11.0",
"@runtipi/postgres-migrations": "^5.3.0",
"@tabler/core": "1.0.0-beta16",
"@tabler/icons": "^1.109.0",
"@tanstack/react-query": "^4.24.4",
"@trpc/client": "^10.11.1",
"@trpc/next": "^10.11.1",
"@trpc/react-query": "^10.11.1",
"@trpc/server": "^10.11.1",
"argon2": "^0.29.1",
"@tabler/core": "1.0.0-beta17",
"@tabler/icons-react": "^2.11.0",
"clsx": "^1.1.1",
"express": "^4.17.3",
"fs-extra": "^10.1.0",

2
src/client/components/AppTile/AppTile.tsx
View file

@ -1,6 +1,6 @@
import Link from 'next/link';
import React from 'react';
import { IconDownload } from '@tabler/icons';
import { IconDownload } from '@tabler/icons-react';
import { AppStatus } from '../AppStatus';
import { AppLogo } from '../AppLogo/AppLogo';
import { limitText } from '../../modules/AppStore/helpers/table.helpers';

2
src/client/components/ui/ErrorPage/ErrorPage.tsx
View file

@ -1,4 +1,4 @@
import { IconRotateClockwise } from '@tabler/icons';
import { IconRotateClockwise } from '@tabler/icons-react';
import clsx from 'clsx';
import Image from 'next/image';
import React from 'react';

2
src/client/components/ui/Header/Header.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { IconBrandGithub, IconHeart, IconLogout, IconMoon, IconSun } from '@tabler/icons';
import { IconBrandGithub, IconHeart, IconLogout, IconMoon, IconSun } from '@tabler/icons-react';
import Image from 'next/image';
import clsx from 'clsx';
import Link from 'next/link';

6
src/client/components/ui/NavBar/NavBar.tsx
View file

@ -1,4 +1,4 @@
import { IconApps, IconBrandAppstore, IconHome, IconSettings, TablerIcon } from '@tabler/icons';
import { IconApps, IconBrandAppstore, IconHome, IconSettings, Icon } from '@tabler/icons-react';
import clsx from 'clsx';
import Link from 'next/link';
import { useRouter } from 'next/router';
@ -12,7 +12,7 @@ export const NavBar: React.FC<IProps> = ({ isUpdateAvailable }) => {
const router = useRouter();
const path = router.pathname.split('/')[1];
const renderItem = (title: string, name: string, Icon: TablerIcon) => {
const renderItem = (title: string, name: string, IconComponent: Icon) => {
const isActive = path === name;
const itemClass = clsx('nav-item', { active: isActive, 'border-primary': isActive, 'border-bottom-wide': isActive });
@ -20,7 +20,7 @@ export const NavBar: React.FC<IProps> = ({ isUpdateAvailable }) => {
<li data-testid={`nav-item-${name}`} className={itemClass}>
<Link href={`/${name}`} className="nav-link" passHref>
<span className="nav-link-icon d-md-none d-lg-inline-block">
<Icon size={24} />
<IconComponent size={24} />
</span>
<span className="nav-link-title">{title}</span>
</Link>

22
src/client/modules/Apps/components/AppActions/AppActions.tsx
View file

@ -1,4 +1,4 @@
import { IconDownload, IconExternalLink, IconPlayerPause, IconPlayerPlay, IconSettings, IconTrash, IconX, TablerIcon } from '@tabler/icons';
import { Icon, IconDownload, IconExternalLink, IconPlayerPause, IconPlayerPlay, IconSettings, IconTrash, IconX } from '@tabler/icons-react';
import clsx from 'clsx';
import React from 'react';
import type { AppStatus } from '../../../../../server/services/apps/apps.types';
@ -21,7 +21,7 @@ interface IProps {
}
interface BtnProps {
Icon?: TablerIcon;
IconComponent?: Icon;
onClick: () => void;
width?: number | null;
title?: string;
@ -30,12 +30,12 @@ interface BtnProps {
}
const ActionButton: React.FC<BtnProps> = (props) => {
const { Icon, onClick, title, loading, color, width = 140 } = props;
const { IconComponent, onClick, title, loading, color, width = 140 } = props;
return (
<Button loading={loading} data-testid={`action-button-${title?.toLowerCase()}`} onClick={onClick} width={width} className={clsx('me-2 px-4 mt-2', [`btn-${color}`])}>
{title}
{Icon && <Icon className="ms-1" size={14} />}
{IconComponent && <IconComponent className="ms-1" size={14} />}
</Button>
);
};
@ -45,15 +45,15 @@ export const AppActions: React.FC<IProps> = ({ info, status, onInstall, onUninst
const buttons: JSX.Element[] = [];
const StartButton = <ActionButton key="start" Icon={IconPlayerPlay} onClick={onStart} title="Start" color="success" />;
const RemoveButton = <ActionButton key="remove" Icon={IconTrash} onClick={onUninstall} title="Remove" color="danger" />;
const SettingsButton = <ActionButton key="settings" Icon={IconSettings} onClick={onUpdateSettings} title="Settings" />;
const StopButton = <ActionButton key="stop" Icon={IconPlayerPause} onClick={onStop} title="Stop" color="danger" />;
const OpenButton = <ActionButton key="open" Icon={IconExternalLink} onClick={onOpen} title="Open" />;
const StartButton = <ActionButton key="start" IconComponent={IconPlayerPlay} onClick={onStart} title="Start" color="success" />;
const RemoveButton = <ActionButton key="remove" IconComponent={IconTrash} onClick={onUninstall} title="Remove" color="danger" />;
const SettingsButton = <ActionButton key="settings" IconComponent={IconSettings} onClick={onUpdateSettings} title="Settings" />;
const StopButton = <ActionButton key="stop" IconComponent={IconPlayerPause} onClick={onStop} title="Stop" color="danger" />;
const OpenButton = <ActionButton key="open" IconComponent={IconExternalLink} onClick={onOpen} title="Open" />;
const LoadingButtion = <ActionButton key="loading" loading onClick={() => null} color="success" title="Loading" />;
const CancelButton = <ActionButton key="cancel" Icon={IconX} onClick={onCancel} title="Cancel" />;
const CancelButton = <ActionButton key="cancel" IconComponent={IconX} onClick={onCancel} title="Cancel" />;
const InstallButton = <ActionButton key="install" onClick={onInstall} title="Install" color="success" />;
const UpdateButton = <ActionButton key="update" Icon={IconDownload} onClick={onUpdate} width={null} title="Update" color="success" />;
const UpdateButton = <ActionButton key="update" IconComponent={IconDownload} onClick={onUpdate} width={null} title="Update" color="success" />;
switch (status) {
case 'stopped':

22
src/client/modules/Apps/components/AppDetailsTabs.tsx
View file

@ -1,4 +1,4 @@
import { IconExternalLink } from '@tabler/icons';
import { IconExternalLink } from '@tabler/icons-react';
import React from 'react';
import { DataGrid, DataGridItem } from '../../../components/ui/DataGrid';
import Markdown from '../../../components/Markdown/Markdown';
@ -38,7 +38,9 @@ export const AppDetailsTabs: React.FC<IProps> = ({ info }) => (
</a>
</DataGridItem>
<DataGridItem title="Author">{info.author}</DataGridItem>
<DataGridItem title="Port"><b>{info.port}</b></DataGridItem>
<DataGridItem title="Port">
<b>{info.port}</b>
</DataGridItem>
<DataGridItem title="Categories">
{info.categories.map((c) => (
<div key={c} className="badge bg-green me-1">
@ -47,13 +49,15 @@ export const AppDetailsTabs: React.FC<IProps> = ({ info }) => (
))}
</DataGridItem>
<DataGridItem title="Version">{info.version}</DataGridItem>
{info.supported_architectures && <DataGridItem title="Supported architectures">{info.supported_architectures.map(
(a) => (
<div key={a} className="badge bg-red me-1">
{a.toLowerCase()}
</div>
),
)}</DataGridItem>}
{info.supported_architectures && (
<DataGridItem title="Supported architectures">
{info.supported_architectures.map((a) => (
<div key={a} className="badge bg-red me-1">
{a.toLowerCase()}
</div>
))}
</DataGridItem>
)}
</DataGrid>
</div>
</div>

2
src/client/modules/Apps/components/UninstallModal.tsx
View file

@ -1,4 +1,4 @@
import { IconAlertTriangle } from '@tabler/icons';
import { IconAlertTriangle } from '@tabler/icons-react';
import React from 'react';
import { Button } from '../../../components/ui/Button';
import { Modal, ModalBody, ModalFooter, ModalHeader } from '../../../components/ui/Modal';

8
src/client/modules/Dashboard/components/SystemStat.tsx
View file

@ -1,21 +1,21 @@
import { TablerIcon } from '@tabler/icons';
import { Icon } from '@tabler/icons-react';
import React from 'react';
interface IProps {
icon: TablerIcon;
icon: Icon;
progress: number;
title: string;
subtitle: string;
metric: string;
}
const SystemStat: React.FC<IProps> = ({ icon: Icon, progress, title, subtitle, metric }) => (
const SystemStat: React.FC<IProps> = ({ icon: IconComponent, progress, title, subtitle, metric }) => (
<div className="col-sm-6 col-lg-4">
<div className="card">
<div className="card-body">
<div className="d-flex justify-content-between align-items-start">
<div className="h2 mb-3 font-weight-bold">{title}</div>
<Icon />
<IconComponent />
</div>
<div className="h2">{metric}</div>
<div className="mb-3 text-muted">{subtitle}</div>

2
src/client/modules/Dashboard/containers/DashboardContainer.tsx
View file

@ -1,4 +1,4 @@
import { IconCircuitResistor, IconCpu, IconDatabase } from '@tabler/icons';
import { IconCircuitResistor, IconCpu, IconDatabase } from '@tabler/icons-react';
import React from 'react';
import { SystemRouterOutput } from '../../../../server/routers/system/system.router';
import SystemStat from '../components/SystemStat';