Skip to content

Commit

Permalink
feat: more changes
Browse files Browse the repository at this point in the history
  • Loading branch information
janrtvld committed Nov 5, 2024
1 parent c2c1ea0 commit e4f455e
Show file tree
Hide file tree
Showing 14 changed files with 104 additions and 21 deletions.
12 changes: 11 additions & 1 deletion packages/app/src/components/ActivityRowItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,17 @@ export function ActivityRowItem({

return (
<Animated.View style={pressStyle}>
<XStack ai="center" gap="$4" w="100%" onPress={onLinkPress} onPressIn={handlePressIn} onPressOut={handlePressOut}>
<XStack
accessible={true}
accessibilityRole="button"
aria-label={`${Title} activity from ${subtitle}`}
ai="center"
gap="$4"
w="100%"
onPress={onLinkPress}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
>
<Stack pos="relative">
<Stack
jc="center"
Expand Down
3 changes: 3 additions & 0 deletions packages/app/src/components/CardWithAttributes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,9 @@ export function CardWithAttributes({
onPressOut={handlePressOut}
style={disableNavigation ? undefined : pressStyle}
onPress={disableNavigation ? undefined : onPress}
accessible={true}
accessibilityRole={disableNavigation ? undefined : 'button'}
aria-label={`Shared attributes from ${name.toLocaleUpperCase()}`}
>
<Stack px="$4" py="$3" pos="relative" bg={backgroundColor ?? '$grey-900'}>
{hasInternet && backgroundImage?.url && (
Expand Down
7 changes: 5 additions & 2 deletions packages/app/src/components/ConfirmationSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ import { DualResponseButtons } from './DualResponseButtons'

const DEFAULT_TITLE = 'Are you sure you want to stop?'
const DEFAULT_DESCRIPTION = 'This action cannot be undone.'
const DEFAULT_CONFIRM_TEXT = 'Yes, stop'

interface ConfirmationSheetProps {
type?: 'regular' | 'floating'
title?: string
description?: string
confirmText?: string
isOpen: boolean
setIsOpen: (open: boolean) => void
onConfirm: () => void
Expand All @@ -19,6 +21,7 @@ export function ConfirmationSheet({
type = 'regular',
title,
description,
confirmText,
isOpen,
setIsOpen,
onConfirm,
Expand All @@ -43,7 +46,7 @@ export function ConfirmationSheet({
<DualResponseButtons
align="horizontal"
variant="confirmation"
acceptText="Yes, stop"
acceptText={confirmText || DEFAULT_CONFIRM_TEXT}
declineText="No"
onAccept={onConfirm}
onDecline={onCancel || (() => setIsOpen(false))}
Expand All @@ -64,7 +67,7 @@ export function ConfirmationSheet({
<DualResponseButtons
align="horizontal"
variant="confirmation"
acceptText="Yes, stop"
acceptText={confirmText || DEFAULT_CONFIRM_TEXT}
declineText="No"
onAccept={onConfirm}
onDecline={onCancel || (() => setIsOpen(false))}
Expand Down
1 change: 1 addition & 0 deletions packages/app/src/components/DeleteCredentialSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export function DeleteCredentialSheet({ isSheetOpen, setIsSheetOpen, id, name }:
setIsOpen={setIsSheetOpen}
title="Archive card?"
description={`This will make '${name}' unusable and delete it from your wallet.`}
confirmText="Yes, archive"
onConfirm={onDeleteCredential}
onCancel={onCancel}
/>
Expand Down
13 changes: 8 additions & 5 deletions packages/app/src/components/FunkeCredentialCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import type { DisplayImage } from '@package/agent'
import {
AnimatedStack,
Card,
Heading,
HeroIcons,
IconContainer,
Image,
Loader,
LucideIcons,
Paragraph,
Spacer,
XStack,
YStack,
Expand Down Expand Up @@ -49,7 +49,7 @@ export function FunkeCredentialCard({
textColor = textColor ? textColor : getTextColorBasedOnBg(bgColor ?? '#000')

const icon = issuerImage?.url ? (
<Image src={issuerImage.url} alt={issuerImage.altText} width={36} height={36} />
<Image src={issuerImage.url} width={36} height={36} />
) : (
<XStack width={36} height={36} bg="$lightTranslucent" ai="center" jc="center" br="$12">
<LucideIcons.FileBadge size={20} strokeWidth={2.5} color="$grey-100" />
Expand Down Expand Up @@ -84,13 +84,16 @@ export function FunkeCredentialCard({
backgroundColor="transparent"
onPress={onPress}
overflow="hidden"
accessible={true}
accessibilityRole={onPress ? 'button' : undefined}
aria-label={`${name.toLocaleUpperCase()} credential`}
>
<Card.Header p={0}>
<XStack jc="space-between">
<YStack f={1}>
<Heading variant="sub2" fontSize={14} fontWeight="$bold" color={textColor} numberOfLines={1}>
<Paragraph fontSize={14} fontWeight="$bold" color={textColor} numberOfLines={1}>
{name.toLocaleUpperCase()}
</Heading>
</Paragraph>
</YStack>
<XStack>{icon}</XStack>
</XStack>
Expand All @@ -100,7 +103,7 @@ export function FunkeCredentialCard({
{onPress && <IconContainer onPress={onPress} icon={<HeroIcons.ArrowRight color={textColor} />} />}
</Card.Footer>
{backgroundImage?.url && (
<Card.Background>
<Card.Background accessible={false}>
{hasInternet ? (
<YStack width="100%" height="100%" bg={bgColor ?? '$grey-900'}>
<AnimatedStack width="100%" height="100%" style={fadeInStyle}>
Expand Down
3 changes: 1 addition & 2 deletions packages/app/src/features/scan/ScanScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import React, { useState } from 'react'
import { useRouter } from 'solito/router'

import { type CredentialDataHandlerOptions, useCredentialDataHandler } from '../../hooks'
import { isAndroid } from '../../utils'

const unsupportedUrlPrefixes = ['_oob=']

Expand Down Expand Up @@ -49,7 +48,7 @@ export function QrScannerScreen({ credentialDataHandlerOptions }: QrScannerScree
}

// Only show cancel button on Android
const onCancel = isAndroid() ? () => back() : undefined
const onCancel = () => back()

return (
<>
Expand Down
31 changes: 27 additions & 4 deletions packages/scanner/src/Scanner.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import type { StyleProp, ViewStyle } from 'react-native'

import { AnimatePresence, Button, Heading, LucideIcons, Page, Paragraph, Spacer, XStack, YStack } from '@package/ui'
import {
AnimatePresence,
Button,
Heading,
LucideIcons,
Page,
Paragraph,
Spacer,
Stack,
XStack,
YStack,
} from '@package/ui'
import MaskedView from '@react-native-masked-view/masked-view'
import { BarCodeScanner as ExpoBarCodeScanner } from 'expo-barcode-scanner'
import { useCallback, useEffect, useState } from 'react'
Expand Down Expand Up @@ -82,9 +93,21 @@ export const QrScanner = ({ onScan, onCancel, helpText }: BarcodeScannerProps) =
</MaskedView>
<YStack jc="center" ai="center" gap="$4">
{onCancel && (
<Button.Text bg="$darkTranslucent" h="$2" br="$12" onPress={onCancel}>
Cancel
</Button.Text>
<XStack>
<Button.Solid
h="$3.5"
px="$5"
br="$12"
bg="$grey-100"
color="$grey-900"
flexDirection="row"
onPress={onCancel}
scaleOnPress
alignSelf="center"
>
Cancel
</Button.Solid>
</XStack>
)}
<XStack maxHeight="$10">
<AnimatePresence>
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/src/base/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ import { useScaleAnimation } from '../hooks/useScaleAnimation'

const Btn = styled(TButton, {
name: 'Button',
tag: 'button',
accessible: true,
accessibilityRole: 'button',
userSelect: 'auto',
borderRadius: '$button',
fontFamily: '$default',
fontWeight: '$medium',
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/base/Paragraph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { SizableText, styled } from 'tamagui'
export const Paragraph = styled(SizableText, {
name: 'Paragraph',
tag: 'p',
accessibilityRole: 'text',
userSelect: 'auto',
color: '$grey-700',
fontFamily: '$default',
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/components/InfoButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@ export function InfoButton({
bg={isPressable ? '$grey-50' : '$white'}
p="$3.5"
bw="$0.5"
accessible={true}
accessibilityRole={onPress ? 'button' : undefined}
aria-label={`${title} ${description}`}
borderColor="$grey-100"
onPress={onPress}
>
Expand Down
5 changes: 4 additions & 1 deletion packages/ui/src/components/PinPad.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Text, useTheme } from 'tamagui'
import { Text } from 'tamagui'
import { Stack, XStack, YStack } from '../base'
import { HeroIcons } from '../content'

Expand Down Expand Up @@ -41,6 +41,9 @@ const PinNumber = ({ character, onPressPinNumber, disabled }: PinNumberProps) =>
fg={1}
jc="center"
ai="center"
accessible={true}
accessibilityRole="button"
aria-label={character === PinValues.Backspace ? 'Backspace' : `Pin number ${character}`}
backgroundColor={character === PinValues.Backspace ? '$grey-200' : '$white'}
pressStyle={{ opacity: 0.5, backgroundColor: '$grey-100' }}
opacity={character === PinValues.Empty ? 0 : 1}
Expand Down
5 changes: 3 additions & 2 deletions packages/ui/src/components/ProgressHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ export function ProgressHeader({
return (
<YStack gap="$4" {...props}>
<XStack mx="$-1" jc="space-between">
{onBack ? <IconContainer icon={<HeroIcons.ArrowLeft />} onPress={onBack} /> : <Stack />}
{onCancel ? <IconContainer icon={<HeroIcons.X />} onPress={onCancel} /> : <Stack />}
{onBack ? <IconContainer aria-label="Back" icon={<HeroIcons.ArrowLeft />} onPress={onBack} /> : <Stack />}
{onCancel ? <IconContainer aria-label="Cancel" icon={<HeroIcons.X />} onPress={onCancel} /> : <Stack />}
</XStack>
<Stack mb="$4" mx={variant === 'small' ? '$-4' : '$0'}>
{variant === 'small' ? (
Expand All @@ -52,6 +52,7 @@ export function ProgressHeader({
<Stack pos="absolute" h={12} w="100%" br={24} bg="$grey-200" />
)}
<AnimatedStack
accessibilityRole="progressbar"
layout={
isError
? LinearTransition.duration(1000).easing(Easing.out(Easing.ease))
Expand Down
15 changes: 13 additions & 2 deletions packages/ui/src/content/IconContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,24 @@ import { useScaleAnimation } from '../hooks'
interface IconContainerProps extends StackProps {
icon: React.ReactElement
scaleOnPress?: boolean
'aria-label'?: string
}

export function IconContainer({ icon, scaleOnPress = true, ...props }: IconContainerProps) {
export function IconContainer({ icon, scaleOnPress = true, 'aria-label': ariaLabel, ...props }: IconContainerProps) {
const { handlePressIn, handlePressOut, pressStyle } = useScaleAnimation({ scaleInValue: scaleOnPress ? 0.9 : 1 })

return (
<AnimatedStack p="$2" m="$-2" style={pressStyle} onPressIn={handlePressIn} onPressOut={handlePressOut} {...props}>
<AnimatedStack
accessible={true}
accessibilityRole="button"
p="$2"
m="$-2"
style={pressStyle}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
aria-label={ariaLabel}
{...props}
>
{cloneElement(icon, {
strokeWidth: icon.props.strokeWidth ?? 2,
size: icon.props.size ?? 24,
Expand Down
22 changes: 20 additions & 2 deletions packages/ui/src/panels/FloatingSheet.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,28 @@
import { useEffect, useRef } from 'react'
import { AccessibilityInfo, findNodeHandle } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Portal } from 'tamagui'
import { Portal, Text, VisuallyHidden } from 'tamagui'
import { Sheet as TamaguiSheet, type SheetProps as TamaguiSheetProps } from 'tamagui'
import { Stack } from '../base'

export interface FloatingSheetProps extends TamaguiSheetProps {
isOpen: boolean
setIsOpen: (open: boolean) => void
}

export function FloatingSheet({ children, isOpen, setIsOpen, ...props }: FloatingSheetProps) {
const { bottom } = useSafeAreaInsets()

const sheetRef = useRef(null)

useEffect(() => {
if (isOpen && sheetRef.current) {
const handle = findNodeHandle(sheetRef.current)
if (handle) {
AccessibilityInfo.setAccessibilityFocus(handle)
}
}
}, [isOpen])

return (
<Portal key="root">
<TamaguiSheet
Expand All @@ -24,6 +37,8 @@ export function FloatingSheet({ children, isOpen, setIsOpen, ...props }: Floatin
damping: 9,
mass: 0.22,
}}
modal
aria-modal={true}
{...props}
>
<TamaguiSheet.Overlay
Expand All @@ -36,6 +51,9 @@ export function FloatingSheet({ children, isOpen, setIsOpen, ...props }: Floatin
/>
<TamaguiSheet.Frame bg="transparent" px="$4" mb={bottom}>
<Stack bg="$white" br="$8" overflow="hidden">
<VisuallyHidden ref={sheetRef}>
<Text>Options opened</Text>
</VisuallyHidden>
{children}
</Stack>
</TamaguiSheet.Frame>
Expand Down

0 comments on commit e4f455e

Please sign in to comment.