Skip to content

Commit

Permalink
Refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
TheUltDev committed Jun 29, 2024
1 parent 58911cc commit 66f6e21
Show file tree
Hide file tree
Showing 40 changed files with 808 additions and 451 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/publish.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ jobs:
run: pnpm install
# Docs
- name: Build Docs
run: pnpm docs-build
run: pnpm docs:build
- name: Upload to GitHub Pages
uses: actions/upload-pages-artifact@v1
with:
Expand Down
10 changes: 7 additions & 3 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"material-icon-theme.activeIconPack": "react_redux",
"material-icon-theme.folders.associations": {
"output": "dist",
"dev": "shared",
"bundler": "container",
"client": "mobile",
"guides": "content",
Expand All @@ -14,11 +15,14 @@
"rive": "animation",
},
"material-icon-theme.files.associations": {
"app/layout.tsx": "renovate",
"app/provider.tsx": "dll",
"app/index.tsx": "tree",
"layout.tsx": "renovate",
"provider.tsx": "dll",
"store.tsx": "redux-action",
"routes/index.tsx": "routing",
"routes/index.native.tsx": "routing",
"store.ts": "redux-reducer",
"store/app.ts": "redux-reducer",
"store/index.tsx": "redux-action",
},
"typescript.tsserver.watchOptions": {
"watchDirectory": "useFsEvents",
Expand Down
123 changes: 123 additions & 0 deletions client/src/app/base/Menu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import {t} from '@lingui/macro';
import {Icon} from 'react-exo/icon';
import {useLingui} from '@lingui/react';
import {useStyles, createStyleSheet} from 'design/styles';
import {View, StyleSheet} from 'react-native';
import {useLists} from 'tasks/hooks/useLists';
import {MenuItem} from './MenuItem';
import config from 'config';

interface MenuProps {
tabs?: boolean,
}

export function Menu(props: MenuProps) {
const {styles} = useStyles(stylesheet);
const taskLists = useLists();
const hasDevMenu = __DEV__ || config.LIB_NAME === 'react-exo';

useLingui();

return (
<View style={[styles.root, props.tabs && styles.rootTabs]}>
<MenuItem
path="/"
label={t`Dashboard`}
icon={<Icon name="ph:squares-four"/>}
tab={props.tabs}
/>
<MenuItem
path="/calendar"
label={t`Calendar`}
icon={<Icon name="ph:calendar"/>}
tab={props.tabs}
/>
<MenuItem
path="/tasks"
label={t`Tasks`}
icon={<Icon name="ph:list-checks"/>}
tab={props.tabs}
/>
{props.tabs ? null : taskLists.map(({id, complete}) =>
<MenuItem
sub
key={id}
path={`/tasks/${id}`}
label={`• ${id}`}
striked={complete}
/>
)}
<View style={styles.fill}/>
{false &&
<>
<MenuItem
path="/media/files"
label={t`Files`}
icon={<Icon name="ph:file-text"/>}
tab={props.tabs}
/>
<MenuItem
path="/media/photos"
label={t`Photos`}
icon={<Icon name="ph:image"/>}
tab={props.tabs}
/>
<MenuItem
path="/media/videos"
label={t`Videos`}
icon={<Icon name="ph:video"/>}
tab={props.tabs}
/>
<MenuItem
path="/media/audio"
label={t`Audio`}
icon={<Icon name="ph:music-notes-simple"/>}
tab={props.tabs}
/>
</>
}
<View style={styles.fill}/>
{hasDevMenu &&
<>
<MenuItem
path="/design"
label={t`Design`}
icon={<Icon name="ph:palette"/>}
tab={props.tabs}
/>
<MenuItem
path="/library"
label={t`Library`}
icon={<Icon name="ph:package"/>}
tab={props.tabs}
/>
</>
}
<MenuItem
path="/settings"
label={t`Settings`}
icon={<Icon name="ph:gear"/>}
tab={props.tabs}
/>
</View>
);
}

const stylesheet = createStyleSheet(theme => ({
root: {
flex: 1,
padding: 10,
borderRightWidth: StyleSheet.hairlineWidth,
borderColor: theme.colors.border,
backgroundColor: theme.colors.secondary,
},
rootTabs: {
flexDirection: 'row',
gap: theme.display.space2,
borderTopWidth: StyleSheet.hairlineWidth,
borderRightWidth: 0,
},
fill: {
flex: 1,
},
}));
Original file line number Diff line number Diff line change
@@ -1,48 +1,47 @@
import {cloneElement} from 'react';
import {View, Text} from 'react-native';
import {useStyles, createStyleSheet} from 'design/styles';
import {useLocation, Link} from 'react-exo/navigation';
import {useMemo, cloneElement} from 'react';
import {useScheme} from 'settings/hooks/useScheme';
import {useStyles, createStyleSheet} from 'design/styles';
import {isTouch} from 'core/utils/platform';
import {isTouch} from 'app/utils/platform';

interface MenuItemProps extends React.PropsWithChildren {
label: string,
path: string,
icon?: JSX.Element,
tab?: boolean,
sub?: boolean,
striked?: boolean,
}

export function MenuItem(props: MenuItemProps) {
const {path, icon, tab, sub} = props;
const {styles, theme} = useStyles(stylesheet);
const [scheme] = useScheme();
const {pathname} = useLocation();

const active = path === decodeURIComponent(pathname);
const vstyles = useMemo(() => ({
root: [
styles.item,
tab && styles.tab,
sub && styles.sub,
active && {
backgroundColor:
scheme === 'dark'
? 'rgba(255, 255, 255, 0.15)'
: 'rgba(0, 0, 0, 0.07)',
},
],
}), [tab, sub, active, scheme]);
const {styles, theme} = useStyles(stylesheet);
const itemActive = props.path === decodeURIComponent(pathname);
const isDarkMode = scheme === 'dark';
const backgroundColor = isDarkMode
? 'rgba(255, 255, 255, 0.15)'
: 'rgba(0, 0, 0, 0.07)';

return (
<Link to={path}>
<View style={vstyles.root}>
{icon && cloneElement(icon, {
<Link to={props.path}>
<View style={[
styles.item,
props.tab && styles.itemTab,
props.sub && styles.itemSub,
itemActive && {backgroundColor},
]}>
{props.icon && cloneElement(props.icon, {
size: props.tab ? 20 : 16,
color: theme.colors.primary,
size: tab ? 20 : 16,
})}
{tab ? null : (
<Text style={styles.link}>
{props.children}
{props.tab ? null : (
<Text style={[
styles.tab,
props.striked && styles.tabStriked,
]}>
{props.label}
</Text>
)}
</View>
Expand All @@ -59,35 +58,35 @@ const stylesheet = createStyleSheet(theme => ({
rootTabs: {
flexDirection: 'row',
},
fill: {
flex: 1,
},
item: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 8,
paddingVertical: 1,
paddingHorizontal: 8,
alignItems: 'center',
flexDirection: 'row',
borderRadius: 5,
},
sub: {
marginLeft: 8,
},
tab: {
itemTab: {
width: 40,
paddingVertical: 12,
justifyContent: 'center',
alignItems: 'center',
width: 40,
},
link: {
fontSize: 11,
lineHeight: 24,
itemSub: {
marginLeft: 8,
},
tab: {
marginLeft: 4,
lineHeight: 24,
fontSize: 11,
color: theme.colors.secondaryForeground,
...isTouch() && {
fontSize: 12,
marginLeft: 8,
lineHeight: 36,
fontSize: 12,
},
},
tabStriked: {
textDecorationLine: 'line-through',
},
}));

13 changes: 13 additions & 0 deletions client/src/core/base/Page.tsx → client/src/app/base/Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {useStyles, createStyleSheet} from 'design/styles';

export interface PageProps {
title?: string | React.ReactNode,
message?: string | React.ReactNode,
children?: React.ReactNode,
}

Expand All @@ -16,6 +17,11 @@ export function Page(props: PageProps) {
{props.title}
</Text>
}
{props.message &&
<Text style={styles.message}>
{props.message}
</Text>
}
<View>
{props.children}
</View>
Expand All @@ -39,4 +45,11 @@ const stylesheet = createStyleSheet(theme => ({
letterSpacing: theme.font.headerSpacing,
color: theme.colors.foreground,
},
message: {
fontSize: theme.font.contentSize,
fontWeight: theme.font.contentWeight,
lineHeight: theme.font.contentHeight,
letterSpacing: theme.font.contentSpacing,
color: theme.colors.mutedForeground,
},
}));
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export function PageLoading(props: PageLoadingProps) {
return (
<View style={styles.root} {...props.container}>
<ActivityIndicator
color={theme.colors.primary}
size="large"
color={theme.colors.primary}
{...props.indicator}
/>
</View>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {Suspense} from 'react';
import {PageLoading} from 'core/base/PageLoading';
import {PageLoading} from 'app/base/PageLoading';

export function LazyLoad(props: React.PropsWithChildren) {
export function PageSuspense(props: React.PropsWithChildren) {
return (
<Suspense fallback={<PageLoading/>}>
{props.children}
Expand Down
47 changes: 47 additions & 0 deletions client/src/app/base/PageTeaser.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import {Trans} from '@lingui/macro';
import {View, Text} from 'react-native';
import {useStyles, createStyleSheet} from 'design/styles';

export interface PageTeaserProps {
title?: string | React.ReactNode,
}

export function PageTeaser(props: PageTeaserProps) {
const {styles} = useStyles(stylesheet);
return (
<View style={styles.root}>
{props.title &&
<Text style={styles.header}>
{props.title}
</Text>
}
<Text style={styles.message}>
<Trans>Coming Soon</Trans>
</Text>
</View>
);
}

const stylesheet = createStyleSheet(theme => ({
root: {
flex: 1,
maxWidth: 980,
gap: theme.display.space5,
padding: theme.display.space5,
backgroundColor: theme.colors.background,
},
header: {
fontSize: theme.font.headerSize,
fontWeight: theme.font.headerWeight,
lineHeight: theme.font.headerHeight,
letterSpacing: theme.font.headerSpacing,
color: theme.colors.foreground,
},
message: {
fontSize: theme.font.contentSize,
fontWeight: theme.font.contentWeight,
lineHeight: theme.font.contentHeight,
letterSpacing: theme.font.contentSpacing,
color: theme.colors.mutedForeground,
},
}));
Loading

0 comments on commit 66f6e21

Please sign in to comment.