Skip to content

Commit 516f535

Browse files
SimekSimek
authored
add package sections counters, fix metadata labels (#2080)
1 parent 3f9f108 commit 516f535

6 files changed

Lines changed: 97 additions & 34 deletions

File tree

‎.github/workflows/data-test-and-validate.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,7 @@ jobs:
2222
run: bun data:test
2323
- name: Check new entries in react-native-libraries.json
2424
run: bun ci:validate
25+
- name: Lint data
26+
run: bun eslint react-native-libraries.json
2527
env:
2628
CI_CHECKS_TOKEN: ${{ github.token }}

‎components/Library/MetaData.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -70,25 +70,27 @@ function generateData(
7070
icon: <Star fill={iconColor} />,
7171
content: (
7272
<A href={`${github.urls.repo}/stargazers`} style={styles.link}>
73-
{github.stats.stars.toLocaleString()} stars
74-
</A>
75-
),
76-
},
77-
{
78-
id: 'dependencies',
79-
icon: <Dependency fill={iconColor} />,
80-
content: template ? (
81-
<P style={styles.link}>
82-
{`${github.stats.dependencies} ${pluralize('dependency', github.stats?.dependencies ?? 0)}`}
83-
</P>
84-
) : (
85-
<A
86-
href={`https://www.npmjs.com/package/${npmPkg}?activeTab=dependencies`}
87-
style={styles.link}>
88-
{`${github.stats.dependencies} ${pluralize('dependency', github.stats?.dependencies ?? 0)}`}
73+
{github.stats.stars.toLocaleString()} {pluralize('star', github.stats.stars)}
8974
</A>
9075
),
9176
},
77+
github.stats?.dependencies !== undefined
78+
? {
79+
id: 'dependencies',
80+
icon: <Dependency fill={iconColor} />,
81+
content: template ? (
82+
<P style={styles.link}>
83+
{`${github.stats.dependencies} ${pluralize('dependency', github.stats.dependencies)}`}
84+
</P>
85+
) : (
86+
<A
87+
href={`https://www.npmjs.com/package/${npmPkg}?activeTab=dependencies`}
88+
style={styles.link}>
89+
{`${github.stats.dependencies} ${pluralize('dependency', github.stats.dependencies)}`}
90+
</A>
91+
),
92+
}
93+
: null,
9294
npm?.size
9395
? {
9496
id: 'size',

‎components/NavigationTab.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { useRouter } from 'next/router';
22
import { useContext } from 'react';
33
import { StyleSheet, View } from 'react-native';
44

5-
import { A, colors, darkColors, Label, P } from '~/common/styleguide';
5+
import { A, colors, darkColors, P } from '~/common/styleguide';
6+
import EntityCounter from '~/components/Package/EntityCounter';
67
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
78

89
type Props = {
@@ -39,18 +40,17 @@ function NavigationTab({ title, counter, path = `/${title.toLowerCase()}` }: Pro
3940
<View style={styles.tabContainer}>
4041
<P style={[styles.tabTitle, isActive && styles.tabActiveTitle]}>{title}</P>
4142
{!!counter && (
42-
<Label
43-
style={[
44-
styles.tabCounter,
43+
<EntityCounter
44+
count={counter}
45+
style={
4546
isActive
4647
? {
4748
color: isDark ? colors.white : colors.black,
4849
backgroundColor: isDark ? darkColors.primaryDark : colors.primaryDark,
4950
}
50-
: { backgroundColor: isDark ? darkColors.border : colors.gray5 },
51-
]}>
52-
{counter}
53-
</Label>
51+
: { backgroundColor: isDark ? darkColors.border : colors.gray5 }
52+
}
53+
/>
5454
)}
5555
</View>
5656
</A>

‎components/Package/EntityCounter.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useContext } from 'react';
2+
import { type StyleProp, StyleSheet, type TextStyle } from 'react-native';
3+
4+
import { colors, darkColors, Label } from '~/common/styleguide';
5+
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
6+
7+
type Props = {
8+
count: number;
9+
style?: StyleProp<TextStyle>;
10+
};
11+
12+
export default function EntityCounter({ count, style }: Props) {
13+
const { isDark } = useContext(CustomAppearanceContext);
14+
return (
15+
<Label
16+
style={[
17+
styles.tabCounter,
18+
{ backgroundColor: isDark ? darkColors.border : colors.gray2 },
19+
style,
20+
]}>
21+
{count}
22+
</Label>
23+
);
24+
}
25+
26+
const styles = StyleSheet.create({
27+
tabCounter: {
28+
color: 'inherit',
29+
marginTop: 3,
30+
fontSize: 11,
31+
borderRadius: 12,
32+
paddingVertical: 2,
33+
paddingHorizontal: 6,
34+
},
35+
});

‎react-native-libraries.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18850,9 +18850,7 @@
1885018850
},
1885118851
{
1885218852
"githubUrl": "https://github.com/tlow92/expo-skia-charts",
18853-
"examples": [
18854-
"https://github.com/tlow92/expo-skia-charts/tree/main/example"
18855-
],
18853+
"examples": ["https://github.com/tlow92/expo-skia-charts/tree/main/example"],
1885618854
"images": [
1885718855
"https://raw.githubusercontent.com/tlow92/expo-skia-charts/refs/heads/main/preview-small.gif"
1885818856
],

‎scenes/PackageOverviewScene.tsx‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import TrendingMark from '~/components/Library/TrendingMark';
1010
import UpdatedAtView from '~/components/Library/UpdateAtView';
1111
import DependencyRow from '~/components/Package/DependencyRow';
1212
import DetailsNavigation from '~/components/Package/DetailsNavigation';
13+
import EntityCounter from '~/components/Package/EntityCounter';
1314
import ExampleBox from '~/components/Package/ExampleBox';
1415
import NotFound from '~/components/Package/NotFound';
1516
import PackageAuthor from '~/components/Package/PackageAuthor';
@@ -73,7 +74,10 @@ export default function PackageOverviewScene({
7374
/>
7475
{library.examples && library.examples.length > 0 && (
7576
<>
76-
<H6 style={[styles.mainContentHeader, headerColorStyle]}>Code examples</H6>
77+
<H6 style={[styles.mainContentHeader, headerColorStyle]}>
78+
Code examples
79+
<EntityCounter count={library.examples.length} />
80+
</H6>
7781
<UL style={styles.examplesWrapper}>
7882
{library.examples.map((example, index) => (
7983
<ExampleBox example={example} key={example} index={index} />
@@ -97,7 +101,10 @@ export default function PackageOverviewScene({
97101
)}
98102
{!isSmallScreen && maintainers && (
99103
<>
100-
<H6 style={[styles.mainContentHeader, headerColorStyle]}>Contributors</H6>
104+
<H6 style={[styles.mainContentHeader, headerColorStyle]}>
105+
Contributors
106+
<EntityCounter count={maintainers.length} />
107+
</H6>
101108
<View style={styles.maintainersList}>
102109
{maintainers
103110
.sort((a: NpmUser, b: NpmUser) => a.name.localeCompare(b.name))
@@ -124,7 +131,10 @@ export default function PackageOverviewScene({
124131
)}
125132
{library.github.topics && library.github.topics.length > 0 && (
126133
<>
127-
<H6 style={[styles.contentHeader, headerColorStyle]}>Topics</H6>
134+
<H6 style={[styles.contentHeader, headerColorStyle]}>
135+
Topics
136+
<EntityCounter count={library.github.topics.length} />
137+
</H6>
128138
<View style={styles.topicsContainer}>
129139
{library.github.topics.map(topic => (
130140
<A
@@ -153,7 +163,10 @@ export default function PackageOverviewScene({
153163
)}
154164
{isSmallScreen && maintainers && (
155165
<>
156-
<H6 style={[styles.contentHeader, headerColorStyle]}>Contributors</H6>
166+
<H6 style={[styles.contentHeader, headerColorStyle]}>
167+
Contributors
168+
<EntityCounter count={maintainers.length} />
169+
</H6>
157170
<View style={styles.maintainersList}>
158171
{maintainers
159172
.sort((a: NpmUser, b: NpmUser) => a.name.localeCompare(b.name))
@@ -198,7 +211,10 @@ export default function PackageOverviewScene({
198211
)}
199212
{dependencies && Object.keys(dependencies).length > 0 && (
200213
<>
201-
<H6 style={[styles.contentHeader, headerColorStyle]}>Dependencies</H6>
214+
<H6 style={[styles.contentHeader, headerColorStyle]}>
215+
Dependencies
216+
<EntityCounter count={Object.keys(dependencies).length} />
217+
</H6>
202218
<View>
203219
{mapDependencies(dependencies, ([name, version]: [string, string]) => (
204220
<DependencyRow key={`dep-${name}`} name={name} version={version} />
@@ -208,7 +224,10 @@ export default function PackageOverviewScene({
208224
)}
209225
{peerDependencies && Object.keys(peerDependencies).length > 0 && (
210226
<>
211-
<H6 style={[styles.contentHeader, headerColorStyle]}>Peer dependencies</H6>
227+
<H6 style={[styles.contentHeader, headerColorStyle]}>
228+
Peer dependencies
229+
<EntityCounter count={Object.keys(peerDependencies).length} />
230+
</H6>
212231
<View>
213232
{mapDependencies(peerDependencies, ([name, version]: [string, string]) => (
214233
<DependencyRow key={`peer-dep-${name}`} name={name} version={version} />
@@ -218,7 +237,10 @@ export default function PackageOverviewScene({
218237
)}
219238
{devDependencies && Object.keys(devDependencies).length > 0 && (
220239
<>
221-
<H6 style={[styles.contentHeader, headerColorStyle]}>Development dependencies</H6>
240+
<H6 style={[styles.contentHeader, headerColorStyle]}>
241+
Development dependencies
242+
<EntityCounter count={Object.keys(devDependencies).length} />
243+
</H6>
222244
<View>
223245
{mapDependencies(devDependencies, ([name, version]: [string, string]) => (
224246
<DependencyRow key={`dev-dep-${name}`} name={name} version={version} />
@@ -280,10 +302,14 @@ const styles = StyleSheet.create({
280302
},
281303
contentHeader: {
282304
fontSize: 16,
305+
display: 'flex',
306+
gap: 6,
283307
},
284308
mainContentHeader: {
285309
fontSize: 16,
286310
marginTop: 12,
311+
display: 'flex',
312+
gap: 6,
287313
},
288314
mutedLink: {
289315
fontWeight: 300,

0 commit comments

Comments
 (0)