Skip to content

Commit e2e452d

Browse files
SimekSimek
authored
add package release date, a11y and visual fixes (#1883)
1 parent f75e38e commit e2e452d

25 files changed

Lines changed: 13957 additions & 9829 deletions

‎assets/data.json‎

Lines changed: 13616 additions & 9522 deletions
Large diffs are not rendered by default.

‎bun.lock‎

Lines changed: 108 additions & 90 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/Button.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@ type Props = PropsWithChildren & {
1212
style?: TextStyle | TextStyle[];
1313
};
1414

15-
export function Button(props: Props) {
15+
export function Button({ children, href, onPress, style, openInNewTab, ...rest }: Props) {
1616
const { isDark } = useContext(CustomAppearanceContext);
17-
const { children, href, onPress, style, openInNewTab } = props;
1817

1918
const isLink = !!href;
2019
const linkStyle = [
@@ -33,13 +32,14 @@ export function Button(props: Props) {
3332
<A
3433
href={href}
3534
style={{ borderRadius: 4, fontFamily: 'inherit' }}
36-
{...(openInNewTab ? { target: '_blank' } : {})}>
35+
{...(openInNewTab ? { target: '_blank' } : {})}
36+
{...rest}>
3737
<Pressable focusable={false} style={linkStyle} accessible={false}>
3838
{content}
3939
</Pressable>
4040
</A>
4141
) : (
42-
<Pressable onPress={onPress} style={linkStyle}>
42+
<Pressable onPress={onPress} style={linkStyle} {...rest}>
4343
{content}
4444
</Pressable>
4545
)}

‎components/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function Platform({ name, pkgName, url, Icon, style }: PlatformProps) {
2929
const { isDark } = useContext(CustomAppearanceContext);
3030

3131
const packageHoverStyle = {
32-
backgroundColor: isDark ? darkColors.powder : colors.gray2,
32+
backgroundColor: isDark ? darkColors.background : colors.gray2,
3333
borderRadius: 8,
3434
};
3535

‎components/Icons/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -162,12 +162,12 @@ export function Issue({ width, height, fill = colors.black }: IconProps) {
162162
);
163163
}
164164

165-
export function Eye({ width = 22, height = 22, fill = colors.black }: IconProps) {
165+
export function Eye({ width = 22, height = 19, fill = colors.black }: IconProps) {
166166
return (
167-
<Svg width={width} height={height} viewBox="0 0 22 22" fill="none">
167+
<Svg width={width} height={height} viewBox="0 0 22 13" fill="none">
168168
<Path
169169
fill={fill}
170-
d="M10.9083 6.50831C15.125 6.50831 18.0583 9.16665 19.3417 10.6333C18.0583 12.2833 15.125 15.4 10.9083 15.4C6.96667 15.4 3.85 12.2833 2.475 10.5416C3.75833 9.16665 6.69167 6.50831 10.9083 6.50831ZM11 4.58331C4.03333 4.58331 0 10.6333 0 10.6333C0 10.6333 4.4 17.4166 11 17.4166C18.0583 17.4166 22 10.6333 22 10.6333C22 10.6333 18.0583 4.58331 11 4.58331ZM10.9083 7.79165C9.16667 7.79165 7.7 9.25831 7.7 11C7.7 12.7416 9.16667 14.2083 10.9083 14.2083C12.65 14.2083 14.1167 12.7416 14.1167 11C14.1167 9.25831 12.65 7.79165 10.9083 7.79165ZM10.9083 11C10.45 11.4583 9.71667 11.4583 9.25833 11C8.8 10.5416 8.8 9.80831 9.25833 9.34998C9.71667 8.89165 10.45 8.89165 10.9083 9.34998C11.3667 9.80831 11.3667 10.5416 10.9083 11Z"
170+
d="M10.9083 1.925C15.125 1.925 18.0583 4.58333 19.3417 6.05C18.0583 7.7 15.125 10.8167 10.9083 10.8167C6.96667 10.8167 3.85 7.7 2.475 5.95833C3.75833 4.58333 6.69167 1.925 10.9083 1.925ZM11 0C4.03333 0 0 6.05 0 6.05C0 6.05 4.4 12.8333 11 12.8333C18.0583 12.8333 22 6.05 22 6.05C22 6.05 18.0583 0 11 0ZM10.9083 3.20833C9.16667 3.20833 7.7 4.675 7.7 6.41667C7.7 8.15833 9.16667 9.625 10.9083 9.625C12.65 9.625 14.1167 8.15833 14.1167 6.41667C14.1167 4.675 12.65 3.20833 10.9083 3.20833ZM10.9083 6.41667C10.45 6.875 9.71667 6.875 9.25833 6.41667C8.8 5.95833 8.8 5.225 9.25833 4.76667C9.71667 4.30833 10.45 4.30833 10.9083 4.76667C11.3667 5.225 11.3667 5.95833 10.9083 6.41667Z"
171171
/>
172172
</Svg>
173173
);

‎components/Library/LoadingContent.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,17 @@ const LoadingContent = ({ width = '100%', height = 202, wrapperStyle = {} }: Pro
2424
borderWidth: 1,
2525
borderStyle: 'solid',
2626
borderColor: isDark ? darkColors.border : colors.gray2,
27-
borderRadius: 4,
27+
borderRadius: 6,
2828
marginBottom: 16,
2929
...wrapperStyle,
3030
}}>
31-
<rect x="20" y="20" rx="3" ry="3" width="251" height="25" />
32-
<rect x="20" y="56" rx="3" ry="3" width="62" height="16" />
33-
<rect x="20" y="88" rx="3" ry="3" width="410" height="10" />
34-
<rect x="20" y="106" rx="3" ry="3" width="380" height="10" />
35-
<rect x="20" y="124" rx="3" ry="3" width="194" height="10" />
36-
<rect x="94" y="56" rx="3" ry="3" width="62" height="16" />
37-
<rect x="168" y="56" rx="3" ry="3" width="62" height="16" />
38-
<rect x="20" y="170" rx="3" ry="3" width="306" height="14" />
31+
<rect x="20" y="20" rx="3" ry="3" width="288" height="25" />
32+
<rect x="20" y="56" rx="3" ry="3" width="88" height="20" />
33+
<rect x="20" y="88" rx="3" ry="3" width={isSmallScreen ? '320' : '410'} height="14" />
34+
<rect x="20" y="110" rx="3" ry="3" width={isSmallScreen ? '250' : '380'} height="14" />
35+
<rect x="118" y="56" rx="3" ry="3" width="60" height="20" />
36+
<rect x="192" y="56" rx="3" ry="3" width="72" height="20" />
37+
<rect x="20" y="170" rx="3" ry="3" width={isSmallScreen ? '220' : '306'} height="14" />
3938
</ContentLoader>
4039
);
4140
};

‎components/Library/MetaData.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { useContext } from 'react';
2-
import { Platform, StyleSheet, View } from 'react-native';
2+
import { Platform, StyleSheet, View, Text } from 'react-native';
33

44
import { colors, A, P, Caption, darkColors } from '~/common/styleguide';
55
import Tooltip from '~/components/Tooltip';
66
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
77
import { type LibraryType, MetadataEntryType } from '~/types';
88
import { partition } from '~/util/arrays';
99
import { formatBytes } from '~/util/formatBytes';
10+
import { pluralize } from '~/util/strings';
1011

1112
import { DirectoryScore } from './DirectoryScore';
1213
import {
@@ -74,7 +75,7 @@ function generateData(
7475
<A
7576
href={`https://www.npmjs.com/package/${npmPkg}?activeTab=dependencies`}
7677
style={styles.link}>
77-
{`${github.stats.dependencies} ${github.stats.dependencies === 1 ? 'dependency' : 'dependencies'}`}
78+
{`${github.stats.dependencies} ${pluralize('dependency', github.stats.dependencies)}`}
7879
</A>
7980
),
8081
},
@@ -94,7 +95,7 @@ function generateData(
9495
id: 'forks',
9596
icon: <Fork fill={iconColor} width={16} height={17} />,
9697
content: (
97-
<A href={`${github.urls.repo}/network/members`} style={styles.link}>
98+
<A href={`${github.urls.repo}/network/members`} style={styles.link} aria-label="Forks">
9899
{`${github.stats.forks.toLocaleString()}`}
99100
</A>
100101
),
@@ -106,7 +107,7 @@ function generateData(
106107
id: 'subscribers',
107108
icon: <Eye fill={iconColor} />,
108109
content: (
109-
<A href={`${github.urls.repo}/watchers`} style={styles.link}>
110+
<A href={`${github.urls.repo}/watchers`} style={styles.link} aria-label="Watchers">
110111
{`${github.stats.subscribers.toLocaleString()}`}
111112
</A>
112113
),
@@ -118,7 +119,7 @@ function generateData(
118119
id: 'issues',
119120
icon: <Issue fill={iconColor} />,
120121
content: (
121-
<A href={`${github.urls.repo}/issues`} style={styles.link}>
122+
<A href={`${github.urls.repo}/issues`} style={styles.link} aria-label="Issues">
122123
{`${github.stats.issues.toLocaleString()}`}
123124
</A>
124125
),
@@ -135,10 +136,10 @@ function generateSecondaryData({ github, examples }: LibraryType, isDark: boolea
135136
const iconColor = isDark ? darkColors.pewter : colors.secondary;
136137
const paragraphStyles = [styles.secondaryText, secondaryTextColor];
137138
const linkStyles = [...paragraphStyles, styles.mutedLink];
138-
const hoverStyle = [
139-
{ textDecorationColor: isDark ? colors.gray6 : colors.gray4 },
140-
isDark && { color: colors.primaryDark },
141-
];
139+
const hoverStyle = {
140+
textDecorationColor: colors.gray4,
141+
color: isDark ? colors.gray3 : colors.gray5,
142+
};
142143

143144
return [
144145
github.urls.homepage
@@ -246,7 +247,11 @@ export function MetaData({ library, secondary }: Props) {
246247
key={id}
247248
sideOffset={2}
248249
delayDuration={100}
249-
trigger={<View style={styles.iconContainer}>{icon}</View>}>
250+
trigger={
251+
<View style={styles.iconContainer}>
252+
{icon}
253+
</View>
254+
}>
250255
{tooltip}
251256
</Tooltip>
252257
{content}

‎components/Library/UpdateAtView.tsx‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -25,51 +25,53 @@ export default function UpdatedAtView({ library }: Props) {
2525

2626
const { branchName, packagePath } = parseGitHubUrl(library.githubUrl);
2727

28+
const tooltipContent = `
29+
Last update (based on Git activity)
30+
${
31+
library.npm.latestReleaseDate
32+
? ` Last npm release: ${getTimeSinceToday(library.npm.latestReleaseDate)}`
33+
: ''
34+
}`;
35+
2836
return (
29-
<View style={styles.updatedAtContainer}>
30-
<Tooltip
31-
sideOffset={2}
32-
trigger={
33-
<View style={{ cursor: 'pointer' }} aria-label="Last update (based on git activity)">
37+
<Tooltip
38+
sideOffset={2}
39+
trigger={
40+
<View style={styles.updatedAtContainer} aria-label={tooltipContent} role="tooltip">
41+
<View>
3442
<Calendar
3543
fill={library.unmaintained ? unmaintainedIconColor : iconColor}
3644
width={14}
3745
height={16}
3846
/>
3947
</View>
40-
}>
41-
Last update (based on git activity)
42-
</Tooltip>
43-
<A
44-
href={
45-
packagePath === '.'
46-
? `${library.github.urls.repo}/commits`
47-
: `${library.github.urls.repo}/commits/${branchName}/${packagePath}`
48-
}
49-
style={[
50-
styles.link,
51-
{
52-
color: library.unmaintained ? unmaintainedTextColor : textColor,
53-
textDecorationColor: decorationColor,
54-
},
55-
]}
56-
hoverStyle={[
57-
{
58-
color: library.unmaintained
59-
? unmaintainedTextColor
60-
: isDark
61-
? colors.primaryDark
62-
: textColor,
63-
textDecorationColor: library.unmaintained
64-
? unmaintainedTextColor
65-
: isDark
66-
? colors.gray6
67-
: colors.gray4,
68-
},
69-
]}>
70-
{getTimeSinceToday(library.github.stats.pushedAt)}
71-
</A>
72-
</View>
48+
<A
49+
href={
50+
packagePath === '.'
51+
? `${library.github.urls.repo}/commits`
52+
: `${library.github.urls.repo}/commits/${branchName}/${packagePath}`
53+
}
54+
style={[
55+
styles.link,
56+
{
57+
color: library.unmaintained ? unmaintainedTextColor : textColor,
58+
textDecorationColor: decorationColor,
59+
},
60+
]}
61+
hoverStyle={{
62+
color: library.unmaintained
63+
? unmaintainedTextColor
64+
: isDark
65+
? colors.gray3
66+
: colors.gray5,
67+
textDecorationColor: library.unmaintained ? unmaintainedTextColor : colors.gray4,
68+
}}>
69+
{getTimeSinceToday(library.github.stats.pushedAt)}
70+
</A>
71+
</View>
72+
}>
73+
{tooltipContent}
74+
</Tooltip>
7375
);
7476
}
7577

‎components/Library/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ const styles = StyleSheet.create({
146146
container: {
147147
marginBottom: 16,
148148
borderWidth: 1,
149-
borderRadius: 4,
149+
borderRadius: 6,
150150
flexDirection: 'row',
151151
overflow: 'hidden',
152152
},

‎components/NavigationTab.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function NavigationTab({ title, path = `/${title.toLowerCase()}` }: Props) {
2626
}),
2727
}}
2828
hoverStyle={{
29-
backgroundColor: isActive ? activeBackground : isDark ? darkColors.dark : colors.gray6,
29+
backgroundColor: isActive ? activeBackground : isDark ? darkColors.background : colors.gray6,
3030
color: colors.secondary,
3131
}}
3232
target="_self">

0 commit comments

Comments
 (0)