mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-05-05 05:46:24 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix hot reload + move navigate() to <Link />

Browse Source
This commit is contained in:
Oscar Beaumont
2022-10-15 03:56:55 +08:00
parent 4cd2dde35c
commit bea74aede4
12 changed files with 142 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/landing/src/components/NavBar.tsx
View File

@@ -142,6 +142,7 @@ export default function NavBar() {
buttonIcon={<DotsThreeVertical weight="bold" className="w-6 h-6 " />}
buttonProps={{ className: '!p-1 ml-[140px] hover:!bg-transparent' }}
/>
<div className="absolute flex-row hidden space-x-5 right-3 lg:flex">
<a href="https://discord.gg/gTaF2Z44f5" target="_blank" rel="noreferrer">
<Discord className="text-white" />

1
packages/client/package.json
View File

@@ -20,7 +20,6 @@
"@rspc/client": "^0.1.2",
"@rspc/react": "^0.1.2",
"@sd/config": "workspace:*",
"@sd/interface": "workspace:*",
"@tanstack/react-query": "^4.10.1",
"eventemitter3": "^4.0.7",
"immer": "^9.0.15",

2
packages/interface/package.json
View File

@@ -18,6 +18,7 @@
"@fontsource/inter": "^4.5.13",
"@headlessui/react": "^1.7.3",
"@heroicons/react": "^2.0.12",
"@loadable/component": "^5.15.2",
"@radix-ui/react-dialog": "^1.0.0",
"@radix-ui/react-dropdown-menu": "^1.0.0",
"@radix-ui/react-icons": "^1.1.1",
@@ -77,6 +78,7 @@
"@sd/config": "workspace:*",
"@types/babel-core": "^6.25.7",
"@types/byte-size": "^8.1.0",
"@types/loadable__component": "^5.13.4",
"@types/lodash": "^4.14.186",
"@types/node": "^18.8.2",
"@types/pretty-bytes": "^5.2.0",

62
packages/interface/src/AppRouter.tsx
View File

@@ -1,42 +1,44 @@
import loadable from '@loadable/component';
import { useCurrentLibrary, useInvalidateQuery } from '@sd/client';
import { Suspense, lazy } from 'react';
import { Suspense } from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import { AppLayout } from './AppLayout';
import { useKeybindHandler } from './hooks/useKeyboardHandler';
const DebugScreen = lazy(() => import('./screens/Debug'));
const SettingsScreen = lazy(() => import('./screens/settings/Settings'));
const TagExplorer = lazy(() => import('./screens/TagExplorer'));
const PhotosScreen = lazy(() => import('./screens/Photos'));
const OverviewScreen = lazy(() => import('./screens/Overview'));
const ContentScreen = lazy(() => import('./screens/Content'));
const LocationExplorer = lazy(() => import('./screens/LocationExplorer'));
const OnboardingScreen = lazy(() => import('./components/onboarding/Onboarding'));
const NotFound = lazy(() => import('./NotFound'));
// Using React.lazy breaks hot reload so we don't use it.
const DebugScreen = loadable(() => import('./screens/Debug'));
const SettingsScreen = loadable(() => import('./screens/settings/Settings'));
const TagExplorer = loadable(() => import('./screens/TagExplorer'));
const PhotosScreen = loadable(() => import('./screens/Photos'));
const OverviewScreen = loadable(() => import('./screens/Overview'));
const ContentScreen = loadable(() => import('./screens/Content'));
const LocationExplorer = loadable(() => import('./screens/LocationExplorer'));
const OnboardingScreen = loadable(() => import('./components/onboarding/Onboarding'));
const NotFound = loadable(() => import('./NotFound'));
const AppearanceSettings = lazy(() => import('./screens/settings/client/AppearanceSettings'));
const ExtensionSettings = lazy(() => import('./screens/settings/client/ExtensionsSettings'));
const GeneralSettings = lazy(() => import('./screens/settings/client/GeneralSettings'));
const KeybindingSettings = lazy(() => import('./screens/settings/client/KeybindingSettings'));
const PrivacySettings = lazy(() => import('./screens/settings/client/PrivacySettings'));
const AboutSpacedrive = lazy(() => import('./screens/settings/info/AboutSpacedrive'));
const Changelog = lazy(() => import('./screens/settings/info/Changelog'));
const Support = lazy(() => import('./screens/settings/info/Support'));
const ContactsSettings = lazy(() => import('./screens/settings/library/ContactsSettings'));
const KeysSettings = lazy(() => import('./screens/settings/library/KeysSetting'));
const LibraryGeneralSettings = lazy(
const AppearanceSettings = loadable(() => import('./screens/settings/client/AppearanceSettings'));
const ExtensionSettings = loadable(() => import('./screens/settings/client/ExtensionsSettings'));
const GeneralSettings = loadable(() => import('./screens/settings/client/GeneralSettings'));
const KeybindingSettings = loadable(() => import('./screens/settings/client/KeybindingSettings'));
const PrivacySettings = loadable(() => import('./screens/settings/client/PrivacySettings'));
const AboutSpacedrive = loadable(() => import('./screens/settings/info/AboutSpacedrive'));
const Changelog = loadable(() => import('./screens/settings/info/Changelog'));
const Support = loadable(() => import('./screens/settings/info/Support'));
const ContactsSettings = loadable(() => import('./screens/settings/library/ContactsSettings'));
const KeysSettings = loadable(() => import('./screens/settings/library/KeysSetting'));
const LibraryGeneralSettings = loadable(
() => import('./screens/settings/library/LibraryGeneralSettings')
);
const LocationSettings = lazy(() => import('./screens/settings/library/LocationSettings'));
const NodesSettings = lazy(() => import('./screens/settings/library/NodesSettings'));
const SecuritySettings = lazy(() => import('./screens/settings/library/SecuritySettings'));
const SharingSettings = lazy(() => import('./screens/settings/library/SharingSettings'));
const SyncSettings = lazy(() => import('./screens/settings/library/SyncSettings'));
const TagsSettings = lazy(() => import('./screens/settings/library/TagsSettings'));
const ExperimentalSettings = lazy(() => import('./screens/settings/node/ExperimentalSettings'));
const LibrarySettings = lazy(() => import('./screens/settings/node/LibrariesSettings'));
const P2PSettings = lazy(() => import('./screens/settings/node/P2PSettings'));
const LocationSettings = loadable(() => import('./screens/settings/library/LocationSettings'));
const NodesSettings = loadable(() => import('./screens/settings/library/NodesSettings'));
const SecuritySettings = loadable(() => import('./screens/settings/library/SecuritySettings'));
const SharingSettings = loadable(() => import('./screens/settings/library/SharingSettings'));
const SyncSettings = loadable(() => import('./screens/settings/library/SyncSettings'));
const TagsSettings = loadable(() => import('./screens/settings/library/TagsSettings'));
const ExperimentalSettings = loadable(() => import('./screens/settings/node/ExperimentalSettings'));
const LibrarySettings = loadable(() => import('./screens/settings/node/LibrariesSettings'));
const P2PSettings = loadable(() => import('./screens/settings/node/P2PSettings'));
export function AppRouter() {
const { library } = useCurrentLibrary();

2
packages/interface/src/components/dialog/CreateLibraryDialog.tsx
View File

@@ -17,8 +17,6 @@ export default function CreateLibraryDialog({
'library.create',
{
onSuccess: (library: any) => {
console.log('SUBMITTING');
setOpenCreateModal(false);
queryClient.setQueryData(['library.list'], (libraries: any) => [

13
packages/interface/src/components/layout/Modal.tsx
View File

@@ -1,8 +1,7 @@
import { Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/solid';
import { Button } from '@sd/ui';
import { ButtonLink } from '@sd/ui';
import clsx from 'clsx';
import { useNavigate } from 'react-router-dom';
export interface ModalProps {
full?: boolean;
@@ -10,7 +9,6 @@ export interface ModalProps {
}
export const Modal: React.FC<ModalProps> = (props) => {
const navigate = useNavigate();
return (
<div
className={clsx('absolute w-screen h-screen z-30', {
@@ -29,17 +27,12 @@ export const Modal: React.FC<ModalProps> = (props) => {
>
<div
data-tauri-drag-region
onClick={() => navigate('/')}
className="absolute top-0 left-0 w-screen h-screen bg-white -z-50 rounded-2xl dark:bg-gray-800 bg-opacity-90"
/>
</Transition>
<Button
onClick={() => navigate('/')}
variant="gray"
className="!px-1.5 absolute top-2 right-2"
>
<ButtonLink to="/" variant="gray" className="!px-1.5 absolute top-2 right-2">
<XMarkIcon className="w-4 h-4" />
</Button>
</ButtonLink>
<Transition
show
className="flex flex-grow"

2
packages/interface/src/components/layout/Sidebar.tsx
View File

@@ -197,7 +197,7 @@ export function Sidebar() {
{
name: 'Library Settings',
icon: CogIcon,
onPress: () => navigate('settings/library')
to: 'settings/library'
},
{
name: 'Add Library',

16
packages/interface/src/screens/settings/node/LibrariesSettings.tsx
View File

@@ -1,10 +1,9 @@
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import { useBridgeMutation, useBridgeQuery } from '@sd/client';
import { LibraryConfigWrapped } from '@sd/client';
import { Button } from '@sd/ui';
import { Button, ButtonLink } from '@sd/ui';
import { DotsSixVertical } from 'phosphor-react';
import { useState } from 'react';
import { useNavigate } from 'react-router';
import CreateLibraryDialog from '../../../components/dialog/CreateLibraryDialog';
import DeleteLibraryDialog from '../../../components/dialog/DeleteLibraryDialog';
@@ -13,7 +12,6 @@ import { SettingsContainer } from '../../../components/settings/SettingsContaine
import { SettingsHeader } from '../../../components/settings/SettingsHeader';
function LibraryListItem(props: { library: LibraryConfigWrapped }) {
const navigate = useNavigate();
const [openDeleteModal, setOpenDeleteModal] = useState(false);
const { mutate: deleteLib, isLoading: libDeletePending } = useBridgeMutation('library.delete', {
@@ -22,14 +20,6 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) {
}
});
function handleEditLibrary() {
// switch library if requesting to edit non-current library
navigate('/settings/library');
// if (props.library.uuid !== store.currentLibraryUuid) {
// switchLibrary(props.library.uuid);
// }
}
return (
<Card>
<DotsSixVertical weight="bold" className="mt-[15px] mr-3 opacity-30" />
@@ -38,9 +28,9 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) {
<p className="mt-0.5 text-xs text-gray-200">{props.library.uuid}</p>
</div>
<div className="mt-2 space-x-2">
<Button variant="gray" className="!p-1.5" onClick={handleEditLibrary}>
<ButtonLink to="/settings/library" variant="gray" className="!p-1.5">
<PencilIcon className="w-4 h-4" />
</Button>
</ButtonLink>
<DeleteLibraryDialog libraryUuid={props.library.uuid}>
<Button variant="gray" className="!p-1.5">
<TrashIcon className="w-4 h-4" />

1
packages/ui/package.json
View File

@@ -28,6 +28,7 @@
"postcss": "^8.4.17",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "6.4.2",
"storybook": "^6.5.12",
"tailwindcss": "^3.1.8"
},

32
packages/ui/src/Button.tsx
View File

@@ -1,5 +1,6 @@
import clsx from 'clsx';
import { forwardRef } from 'react';
import { Link, LinkProps } from 'react-router-dom';
const sizes = {
default: 'py-1 px-3 text-md font-medium',
@@ -145,3 +146,34 @@ export const Button = forwardRef<
);
}
);
export const ButtonLink = forwardRef<
HTMLLinkElement,
ButtonBaseProps & LinkProps & React.RefAttributes<HTMLAnchorElement>
>(
(
{ loading, justifyLeft, className, pressEffect, noBorder, noPadding, size, variant, ...props },
ref
) => {
className = clsx(
'border rounded-md items-center transition-colors duration-100 cursor-default',
{ 'opacity-70': loading, '!p-1': noPadding },
{ 'justify-center': !justifyLeft },
sizes[size || 'default'],
variants[variant || 'default'],
{ 'active:translate-y-[1px]': pressEffect },
{ 'border-0': noBorder },
'disabled:opacity-50 disabled:cursor-not-allowed',
className
);
return (
<Link {...props} ref={ref as any} className={clsx(className, 'no-underline')}>
<>
{props.icon}
{props.children}
</>
</Link>
);
}
);

97
packages/ui/src/Dropdown.tsx
View File

@@ -2,17 +2,28 @@ import { Menu, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/24/solid';
import clsx from 'clsx';
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from './Button';
export type DropdownItem = {
name: string;
icon?: any;
disabled?: boolean;
selected?: boolean;
onPress?: () => any;
wrapItemComponent?: React.FC<{ children: React.ReactNode }>;
}[];
export type DropdownItem = (
| {
name: string;
icon?: any;
selected?: boolean;
to?: string;
wrapItemComponent?: React.FC<{ children: React.ReactNode }>;
}
| {
name: string;
icon?: any;
disabled?: boolean;
selected?: boolean;
onPress?: () => any;
to?: string;
wrapItemComponent?: React.FC<{ children: React.ReactNode }>;
}
)[];
export interface DropdownProps {
items: DropdownItem[];
@@ -81,28 +92,54 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
return (
<WrappedItem>
<button
onClick={button.onPress}
disabled={button?.disabled === true}
className={clsx(
'text-sm group flex grow shrink-0 rounded items-center w-full whitespace-nowrap px-2 py-1 mb-[2px] dark:hover:bg-gray-650 disabled:opacity-50 disabled:cursor-not-allowed',
{
'bg-gray-300 dark:bg-primary dark:hover:bg-primary': button.selected
// 'text-gray-900 dark:text-gray-200': !active
},
props.itemButtonClassName
)}
>
{button.icon && (
<button.icon
className={clsx('mr-2 w-4 h-4', {
'dark:text-gray-100': active,
'text-gray-600 dark:text-gray-200': !active
})}
/>
)}
<span className="text-left">{button.name}</span>
</button>
{button.to ? (
<Link
to={button.to}
className={clsx(
'text-sm group flex grow shrink-0 rounded items-center w-full whitespace-nowrap px-2 py-1 mb-[2px] dark:hover:bg-gray-650 disabled:opacity-50 disabled:cursor-not-allowed',
{
'bg-gray-300 dark:bg-primary dark:hover:bg-primary':
button.selected
// 'text-gray-900 dark:text-gray-200': !active
},
props.itemButtonClassName
)}
>
{button.icon && (
<button.icon
className={clsx('mr-2 w-4 h-4', {
'dark:text-gray-100': active,
'text-gray-600 dark:text-gray-200': !active
})}
/>
)}
<span className="text-left">{button.name}</span>
</Link>
) : (
<button
onClick={(button as any).onPress}
disabled={(button as any)?.disabled === true}
className={clsx(
'text-sm group flex grow shrink-0 rounded items-center w-full whitespace-nowrap px-2 py-1 mb-[2px] dark:hover:bg-gray-650 disabled:opacity-50 disabled:cursor-not-allowed',
{
'bg-gray-300 dark:bg-primary dark:hover:bg-primary':
button.selected
// 'text-gray-900 dark:text-gray-200': !active
},
props.itemButtonClassName
)}
>
{button.icon && (
<button.icon
className={clsx('mr-2 w-4 h-4', {
'dark:text-gray-100': active,
'text-gray-600 dark:text-gray-200': !active
})}
/>
)}
<span className="text-left">{button.name}</span>
</button>
)}
</WrappedItem>
);
}}

BIN
pnpm-lock.yaml generated
View File

Binary file not shown.