Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

feat(app): update router hierarchy #71

Merged
merged 4 commits into from
Jul 6, 2023
Merged

feat(app): update router hierarchy #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
53542f9
feat(app): redo content hierarchy
fuxingloh Jul 6, 2023
83379d7
fix tests
fuxingloh Jul 6, 2023
232dcc6
fix api/settings routing
fuxingloh Jul 6, 2023
95c594d
fix modal design
fuxingloh Jul 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions app/app/ExternalLinkProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,30 +42,30 @@ export function ExternalLinkProvider(props: PropsWithChildren): JSX.Element {
<BottomSheetModal
ref={modalRef}
index={0}
snapPoints={['30%']}
snapPoints={['33%', '50%']}
backdropComponent={(backdropProps) => (
<BottomSheetBackdrop
{...backdropProps}
disappearsOnIndex={-1}
appearsOnIndex={0}
opacity={0.75}
style={tailwind('bg-stone-900 top-0 bottom-0 left-0 right-0 absolute')}
opacity={0.9}
style={tailwind('bg-zinc-900 top-0 bottom-0 left-0 right-0 absolute')}
pressBehavior="close"
/>
)}
handleIndicatorStyle={tailwind('bg-stone-100')}
backgroundStyle={tailwind('bg-stone-800')}
handleIndicatorStyle={tailwind('bg-zinc-200')}
backgroundStyle={tailwind('bg-zinc-900')}
>
<View style={tailwind('bg-stone-800 p-4')}>
<View style={tailwind('bg-zinc-900 p-4')}>
<View style={tailwind('flex-row items-stretch')}>
<View style={tailwind('rounded bg-stone-700 p-2')}>
<IconSet name="link" size={16} style={tailwind('text-stone-100')} />
<View style={tailwind('rounded bg-zinc-800 p-2')}>
<IconSet name="link" size={20} style={tailwind('text-zinc-200')} />
</View>
<View style={tailwind('rounded bg-stone-700 flex-grow px-2 ml-2 flex-row items-center')}>
<Text style={tailwind('text-white text-base')}>{url}</Text>
<View style={tailwind('rounded bg-zinc-800 flex-grow px-3 ml-2 flex-row items-center')}>
<Text style={tailwind('text-base text-zinc-200')}>{url}</Text>
</View>
</View>
<Text style={tailwind('text-white py-2 text-base')}>
<Text style={tailwind('text-base text-zinc-200 py-2')}>
You're about to navigate to an external website. Please proceed with caution and avoid sharing sensitive
information.
</Text>
Expand All @@ -77,8 +77,8 @@ export function ExternalLinkProvider(props: PropsWithChildren): JSX.Element {
close();
}}
>
<View style={tailwind('rounded bg-stone-200 px-4 py-2')}>
<Text style={tailwind('text-stone-800 font-bold text-base')}>Continue</Text>
<View style={tailwind('rounded bg-zinc-200 px-4 py-2')}>
<Text style={tailwind('text-zinc-800 font-bold text-base')}>Continue</Text>
</View>
</TouchableOpacity>
</View>
Expand Down
11 changes: 8 additions & 3 deletions app/app/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function WebContainer(): JSX.Element {
const tailwind = useTailwind();
if (Platform.OS === 'web') {
return (
<View style={tailwind('flex-1 justify-center items-center bg-stone-800')}>
<View style={tailwind('flex-1 justify-center items-center bg-zinc-800')}>
<View style={tailwind('w-[390px] h-[800px]')}>
<AppContainer />
</View>
Expand Down Expand Up @@ -59,8 +59,13 @@ function AppContainer(): JSX.Element | null {
<HapticFeedbackProvider>
<ExternalLinkProvider>
<Stack>
<Stack.Screen name="keychain" options={{ headerShown: false }} />
<Stack.Screen name="signing" options={{ presentation: 'modal' }} />
<Stack.Screen name="tabs" options={{ headerShown: false }} />
<Stack.Screen name="sign" options={{ presentation: 'modal' }} />
<Stack.Screen name="about/design" options={{ presentation: 'modal' }} />
<Stack.Screen name="about/licenses" options={{ presentation: 'modal' }} />
<Stack.Screen name="api/settings" options={{ presentation: 'modal' }} />
<Stack.Screen name="keys/settings" options={{ presentation: 'modal' }} />
<Stack.Screen name="scan/settings" options={{ presentation: 'modal' }} />
</Stack>
</ExternalLinkProvider>
</HapticFeedbackProvider>
Expand Down
8 changes: 8 additions & 0 deletions app/app/about/design.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { expect, test } from '@playwright/test';

test('should go to Settings -> Design System ', async ({ page, baseURL }) => {
await page.goto('/');
await page.getByTestId('/tabs/settings').click();
await page.getByTestId('/about/design').click();
await expect(page).toHaveURL(`${baseURL}/about/design`);
});
114 changes: 61 additions & 53 deletions app/app/keychain/settings/about/design.tsx → app/app/about/design.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,98 +1,106 @@
import { Stack } from 'expo-router';
import { Stack, useRouter } from 'expo-router';
import { ComponentProps, ReactNode } from 'react';
import { SafeAreaView, ScrollView, Switch, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
import { StyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { useTailwind } from 'tailwind-rn';

import { useHaptic } from '../../../HapticFeedback';
import { IconSet } from '../../../IconSet';
import { useHaptic } from '../HapticFeedback';
import { IconSet } from '../IconSet';

export default function DesignSystemPage(): JSX.Element {
const tailwind = useTailwind();
const haptic = useHaptic();
const router = useRouter();

return (
<>
<Stack.Screen
options={{
title: 'Design System',
headerLargeTitle: true,
headerStyle: tailwind('bg-stone-900'),
headerLargeStyle: tailwind('bg-stone-900'),
headerLargeTitleStyle: tailwind('text-4xl font-bold text-white'),
headerStyle: tailwind('bg-zinc-900'),
headerRight: () => (
<TouchableOpacity
onPress={async () => {
await haptic.selectionAsync();
router.back();
}}
>
<IconSet name="close" size={24} style={tailwind('text-zinc-100')} />
</TouchableOpacity>
),
}}
/>
<SafeAreaView style={tailwind('flex-1 bg-stone-900')}>
<SafeAreaView style={tailwind('flex-1 bg-zinc-900')}>
<ScrollView>
<Section title="LEVAIN KEYCHAIN DESIGN SYSTEM">
<Text style={tailwind('text-base text-stone-200')}>
<Text style={tailwind('text-base text-zinc-200')}>
A collection of open source rules, principles, and constraints that govern how we design and build Levain
Keychain. It is a living document that will grow and evolve as we add more features and functionality to
Keychain. As a design system, it provides a common language and vocabulary to build cohesive, accessible,
responsive, and efficient experiences.
</Text>

<Text style={tailwind('text-base text-stone-200 mt-2')}>
<Text style={tailwind('text-base text-zinc-200 mt-2')}>
Utilizing a utility-first approach, we build complex components from a constrained set of primitive
utilities.
</Text>
</Section>

<Section title="COLOR PALETTE">
<View style={tailwind('flex-row items-center')}>
<View style={tailwind('rounded-full w-10 h-10 bg-stone-200')} />
<Text style={tailwind('text-lg font-bold text-stone-200 mx-6')}>Primary</Text>
<Code>stone-200</Code>
<View style={tailwind('rounded-full w-10 h-10 bg-zinc-200')} />
<Text style={tailwind('text-lg font-bold text-zinc-200 mx-6')}>Primary</Text>
<Code>zinc-200</Code>
</View>

<View style={tailwind('flex-row items-center mt-4')}>
<View style={tailwind('rounded-full w-10 h-10 bg-teal-500')} />
<Text style={tailwind('text-lg font-bold text-stone-200 mx-6')}>Accent</Text>
<Text style={tailwind('text-lg font-bold text-zinc-200 mx-6')}>Accent</Text>
<Code>teal-500</Code>
</View>

<View style={tailwind('flex-row items-center mt-4')}>
<View style={tailwind('rounded-full w-10 h-10 bg-stone-900')} />
<Text style={tailwind('text-lg font-bold text-stone-200 mx-6')}>Background</Text>
<Code>stone-900</Code>
<View style={tailwind('rounded-full w-10 h-10 bg-zinc-900')} />
<Text style={tailwind('text-lg font-bold text-zinc-200 mx-6')}>Background</Text>
<Code>zinc-900</Code>
</View>
</Section>

<Section title="TYPOGRAPHY">
<View>
<Text style={tailwind('text-2xl font-bold text-stone-200')}>Heading 1</Text>
<Code>text-2xl font-bold text-stone-200</Code>
<Text style={tailwind('text-2xl font-bold text-zinc-200')}>Heading 1</Text>
<Code>text-2xl font-bold text-zinc-200</Code>
</View>
<View style={tailwind('mt-2')}>
<Text style={tailwind('text-lg font-bold text-stone-200')}>Heading 2</Text>
<Code>text-lg font-bold text-stone-200</Code>
<Text style={tailwind('text-lg font-bold text-zinc-200')}>Heading 2</Text>
<Code>text-lg font-bold text-zinc-200</Code>
</View>
<View style={tailwind('mt-2')}>
<Text style={tailwind('text-base text-stone-200')}>Body</Text>
<Code>text-base text-stone-200</Code>
<Text style={tailwind('text-base text-zinc-200')}>Body</Text>
<Code>text-base text-zinc-200</Code>
</View>
<View style={tailwind('mt-2')}>
<Text style={tailwind('text-sm text-stone-200')}>Caption</Text>
<Code>text-sm text-stone-200</Code>
<Text style={tailwind('text-sm text-zinc-200')}>Caption</Text>
<Code>text-sm text-zinc-200</Code>
</View>
</Section>

<Section title="ICONS">
<View style={tailwind('flex-row items-center')}>
<Text style={tailwind('text-lg font-bold text-stone-200 mr-2 w-6')}>24</Text>
<IconSet name="key" size={24} style={tailwind('text-stone-100 mr-2')} />
<IconSet name="API" size={24} style={tailwind('text-stone-100 mr-2')} />
<IconSet name="scan1" size={24} style={tailwind('text-stone-100 mr-2')} />
<IconSet name="setting" size={24} style={tailwind('text-stone-100 mr-2')} />
<Text style={tailwind('text-lg font-bold text-zinc-200 mr-2 w-6')}>24</Text>
<IconSet name="key" size={24} style={tailwind('text-zinc-100 mr-2')} />
<IconSet name="API" size={24} style={tailwind('text-zinc-100 mr-2')} />
<IconSet name="scan1" size={24} style={tailwind('text-zinc-100 mr-2')} />
<IconSet name="setting" size={24} style={tailwind('text-zinc-100 mr-2')} />
</View>

<View style={tailwind('flex-row items-center mt-2')}>
<Text style={tailwind('text-lg font-bold text-stone-200 mr-2 w-6')}>16</Text>
<IconSet name="link" size={16} style={tailwind('text-stone-100 mr-2')} />
<IconSet name="up" size={16} style={tailwind('text-stone-100 mr-2')} />
<IconSet name="down" size={16} style={tailwind('text-stone-100 mr-2')} />
<IconSet name="left" size={16} style={tailwind('text-stone-100 mr-2')} />
<IconSet name="right" size={16} style={tailwind('text-stone-100 mr-2')} />
<Text style={tailwind('text-lg font-bold text-zinc-200 mr-2 w-6')}>16</Text>
<IconSet name="link" size={16} style={tailwind('text-zinc-100 mr-2')} />
<IconSet name="up" size={16} style={tailwind('text-zinc-100 mr-2')} />
<IconSet name="down" size={16} style={tailwind('text-zinc-100 mr-2')} />
<IconSet name="left" size={16} style={tailwind('text-zinc-100 mr-2')} />
<IconSet name="right" size={16} style={tailwind('text-zinc-100 mr-2')} />
</View>
</Section>

Expand All @@ -103,8 +111,8 @@ export default function DesignSystemPage(): JSX.Element {
await haptic.selectionAsync();
}}
>
<View style={tailwind('rounded bg-stone-200 px-4 py-2')}>
<Text style={tailwind('text-stone-800 font-bold text-base')}>Primary</Text>
<View style={tailwind('rounded bg-zinc-200 px-4 py-2')}>
<Text style={tailwind('text-zinc-800 font-bold text-base')}>Primary</Text>
</View>
</TouchableOpacity>
</View>
Expand All @@ -115,16 +123,16 @@ export default function DesignSystemPage(): JSX.Element {
await haptic.selectionAsync();
}}
>
<View style={tailwind('rounded bg-stone-200 px-3 py-1.5')}>
<Text style={tailwind('text-stone-700 text-sm font-medium')}>Secondary</Text>
<View style={tailwind('rounded bg-zinc-200 px-3 py-1.5')}>
<Text style={tailwind('text-zinc-700 text-sm font-medium')}>Secondary</Text>
</View>
</TouchableOpacity>
</View>
</Section>
<Section title="TOGGLE">
<View style={tailwind('flex-row items-center')}>
<Switch
thumbColor={tailwind('text-stone-200').color as any}
thumbColor={tailwind('text-zinc-200').color as any}
trackColor={{
false: tailwind('text-teal-500').color as any,
true: tailwind('text-teal-500').color as any,
Expand All @@ -137,20 +145,20 @@ export default function DesignSystemPage(): JSX.Element {

<Switch
style={tailwind('ml-4')}
thumbColor={tailwind('text-stone-200').color as any}
thumbColor={tailwind('text-zinc-200').color as any}
trackColor={{
false: tailwind('text-teal-500').color as any,
true: tailwind('text-teal-500').color as any,
}}
ios_backgroundColor={tailwind('text-stone-800').color as any}
ios_backgroundColor={tailwind('text-zinc-800').color as any}
onValueChange={async (value: boolean) => {
await haptic.setEnabled(value);
}}
value={false}
/>
</View>
</Section>
<Section title="LIST VIEW" innerStyle={tailwind('p-4 bg-stone-950')}>
<Section title="LIST VIEW" innerStyle={tailwind('p-4 bg-zinc-700')}>
{(() => {
function ListViewItem(props: {
title: string;
Expand All @@ -163,13 +171,13 @@ export default function DesignSystemPage(): JSX.Element {
await haptic.selectionAsync();
}}
>
<View style={tailwind('px-6 bg-stone-800 flex-row items-center justify-between')}>
<View style={tailwind('px-6 bg-zinc-800 flex-row items-center justify-between')}>
<View style={tailwind('py-3 flex-row items-center justify-between')}>
<IconSet name={props.icon} size={20} style={tailwind('text-white')}></IconSet>
<Text style={tailwind('text-white text-base ml-2')}>{props.title}</Text>
</View>
<View>
<IconSet name="right" size={16} style={tailwind('text-stone-500')} />
<IconSet name="right" size={16} style={tailwind('text-zinc-500')} />
</View>
</View>
</TouchableOpacity>
Expand All @@ -179,11 +187,11 @@ export default function DesignSystemPage(): JSX.Element {
return (
<View style={tailwind('')}>
<ListViewItem title="Item 1" subtitle="" icon="filetext1" />
<View style={tailwind('pl-12 bg-stone-800')}>
<View style={tailwind('bg-stone-900 opacity-40 w-full h-px')} />
<View style={tailwind('pl-12 bg-zinc-800')}>
<View style={tailwind('bg-zinc-900 opacity-40 w-full h-px')} />
</View>
<ListViewItem title="Item 2" subtitle="" icon="infocirlceo" />
<Text style={tailwind('pt-8 pb-2 px-6 text-white bg-stone-900')}>SECTION</Text>
<Text style={tailwind('pt-8 pb-2 px-6 text-white bg-zinc-900')}>SECTION</Text>
<ListViewItem title="Item 3" subtitle="" icon="retweet" />
</View>
);
Expand All @@ -200,9 +208,9 @@ function Section(props: { title: string; children?: ReactNode; innerStyle?: Styl

return (
<View style={tailwind('px-4 py-2')}>
<View style={tailwind('bg-stone-800 rounded')}>
<View style={tailwind('py-3 px-4 border-b border-stone-700')}>
<Text style={tailwind('text-xs text-stone-200')}>{props.title}</Text>
<View style={tailwind('bg-zinc-800 rounded')}>
<View style={tailwind('py-3 px-4 border-b border-zinc-700')}>
<Text style={tailwind('text-xs text-zinc-200')}>{props.title}</Text>
</View>
<View style={props.innerStyle ?? tailwind('p-4')}>{props.children}</View>
</View>
Expand All @@ -215,7 +223,7 @@ function Code(props: { children: string }): JSX.Element {

return (
<View>
<Text style={tailwind('text-sm text-stone-100')}>{props.children}</Text>
<Text style={tailwind('text-sm text-zinc-100')}>{props.children}</Text>
</View>
);
}
36 changes: 36 additions & 0 deletions app/app/about/licenses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Stack, useRouter } from 'expo-router';
import { Text, TouchableOpacity, View } from 'react-native';
import { useTailwind } from 'tailwind-rn';

import { useHaptic } from '../HapticFeedback';
import { IconSet } from '../IconSet';

export default function LicensesPage(): JSX.Element {
const tailwind = useTailwind();
const haptic = useHaptic();
const router = useRouter();

return (
<>
<Stack.Screen
options={{
title: 'Licenses',
headerStyle: tailwind('bg-zinc-900'),
headerRight: () => (
<TouchableOpacity
onPress={async () => {
await haptic.selectionAsync();
router.back();
}}
>
<IconSet name="close" size={24} style={tailwind('text-zinc-100')} />
</TouchableOpacity>
),
}}
/>
<View style={tailwind('flex-1 items-center justify-center bg-zinc-900')}>
<Text style={tailwind('text-center text-xl text-white')}>Licenses</Text>
</View>
</>
);
}
Loading
Loading