Skip to content

Commit a314a77

Browse files
kmagierakmagiera
authored
[website] Small visual fixes to RN version selector on Supported libs page (#183)
This PR addresses the following issues: 1) Layout of versions blocks in "RN Versions" container was broken and the versions block were wrapped in weird way + the "show less" was always right-aligned. We are now using simple layout to display all the blocks along with the "show more/less" button 2) After changing RN versions, we need to recalculate library version wrapping. This is because some RN versions may yield less than 3 library versions for certain libraries while other can have more than 3 versions. We need to update library wrapping when RN version changes and when we display library versions for that particular RN version. We are also adding more RN versions to test data such that the described problems can be noticed in dev mode.
1 parent 4d9d572 commit a314a77

File tree

2 files changed

+222
-7
lines changed

2 files changed

+222
-7
lines changed

‎packages/website/src/components/SupportedLibraries.astro‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@ const supportedLibraryNames = await getSupportedLibraryNames();
5959
</div>
6060

6161
{/* React Native Versions Card */}
62-
<div class="rounded-lg border border-rnrGrey-80 bg-surface/40 p-6 mb-8">
62+
<div
63+
class="rounded-lg border border-rnrGrey-80 bg-surface/40 px-4 py-6 mb-8"
64+
>
6365
<div class="flex flex-col gap-4">
6466
<div>
6567
<h2 class="text-lg font-semibold text-rnrGrey-0">
@@ -94,11 +96,7 @@ const supportedLibraryNames = await getSupportedLibraryNames();
9496
</button>
9597
)
9698
}
97-
<div
98-
id="rn-versions-list"
99-
class="rn-versions-hidden flex flex-wrap gap-2 w-full items-center"
100-
hidden
101-
>
99+
<div id="rn-versions-list" class="rn-versions-hidden contents" hidden>
102100
{
103101
allRNVersions.slice(5).map((version) => (
104102
<button
@@ -113,7 +111,7 @@ const supportedLibraryNames = await getSupportedLibraryNames();
113111
}
114112
<button
115113
id="collapse-rn-versions"
116-
class="collapse-rn-btn px-3 py-1 inline-flex items-center justify-center rounded-sm text-xs font-medium text-rnrGrey-40 hover:text-brandSeaBlue-100 transition-colors cursor-pointer whitespace-nowrap ml-auto"
114+
class="collapse-rn-btn px-3 py-1 inline-flex items-center justify-center rounded-sm text-xs font-medium text-rnrGrey-40 hover:text-brandSeaBlue-100 transition-colors cursor-pointer whitespace-nowrap"
117115
>
118116
show less
119117
</button>
@@ -591,6 +589,12 @@ const supportedLibraryNames = await getSupportedLibraryNames();
591589
} else {
592590
noResults?.classList.add('hidden');
593591
}
592+
593+
// Recalculate version wrapping for visible libraries
594+
const visibleWrappers = document.querySelectorAll(
595+
'.library-row:not([style*="display: none"]) .android-versions-wrapper'
596+
);
597+
visibleWrappers.forEach((w) => applyAndroidVersionsCollapse(w));
594598
}
595599

596600
// Handle version button clicks

‎packages/website/src/data/fetch-supported-libraries.ts‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,119 @@ import {
55
} from '@rnrepo/database';
66

77
const MOCK_LIBRARIES: LibrariesData = {
8+
'0.76.0': {
9+
'react-native-reanimated': {
10+
name: 'react-native-reanimated',
11+
android_versions: ['3.16.0', '3.16.1'],
12+
},
13+
'react-native-gesture-handler': {
14+
name: 'react-native-gesture-handler',
15+
android_versions: ['2.20.0'],
16+
},
17+
'@react-native-firebase/app': {
18+
name: '@react-native-firebase/app',
19+
android_versions: ['21.10.0'],
20+
},
21+
},
22+
'0.75.8': {
23+
'react-native-reanimated': {
24+
name: 'react-native-reanimated',
25+
android_versions: ['3.15.0', '3.15.1', '3.15.2'],
26+
},
27+
'react-native-gesture-handler': {
28+
name: 'react-native-gesture-handler',
29+
android_versions: ['2.19.0'],
30+
},
31+
'@react-native-firebase/app': {
32+
name: '@react-native-firebase/app',
33+
android_versions: ['21.9.0'],
34+
},
35+
},
36+
'0.75.5': {
37+
'react-native-reanimated': {
38+
name: 'react-native-reanimated',
39+
android_versions: ['3.15.0'],
40+
},
41+
'react-native-gesture-handler': {
42+
name: 'react-native-gesture-handler',
43+
android_versions: ['2.18.1', '2.19.0'],
44+
},
45+
'@react-native-firebase/app': {
46+
name: '@react-native-firebase/app',
47+
android_versions: ['21.8.0'],
48+
},
49+
},
50+
'0.75.2': {
51+
'react-native-reanimated': {
52+
name: 'react-native-reanimated',
53+
android_versions: ['3.14.0'],
54+
},
55+
'react-native-gesture-handler': {
56+
name: 'react-native-gesture-handler',
57+
android_versions: ['2.18.0', '2.18.1'],
58+
},
59+
'@react-native-firebase/app': {
60+
name: '@react-native-firebase/app',
61+
android_versions: ['21.7.0', '21.8.0'],
62+
},
63+
},
64+
'0.75.0': {
65+
'react-native-reanimated': {
66+
name: 'react-native-reanimated',
67+
android_versions: ['3.13.0', '3.14.0'],
68+
},
69+
'react-native-gesture-handler': {
70+
name: 'react-native-gesture-handler',
71+
android_versions: ['2.17.0', '2.18.0'],
72+
},
73+
'@react-native-firebase/app': {
74+
name: '@react-native-firebase/app',
75+
android_versions: ['21.7.0'],
76+
},
77+
},
78+
'0.74.5': {
79+
'react-native-reanimated': {
80+
name: 'react-native-reanimated',
81+
android_versions: ['3.12.0', '3.12.1'],
82+
},
83+
'react-native-gesture-handler': {
84+
name: 'react-native-gesture-handler',
85+
android_versions: ['2.16.2', '2.17.0'],
86+
},
87+
'@react-native-firebase/app': {
88+
name: '@react-native-firebase/app',
89+
android_versions: ['21.6.0'],
90+
},
91+
'react-native-super-long-versions': {
92+
name: 'react-native-super-long-versions',
93+
android_versions: [
94+
'1.5.0',
95+
'1.5.1',
96+
'1.5.2',
97+
'1.5.3',
98+
'1.5.4',
99+
'1.5.5',
100+
'1.5.6',
101+
'1.5.7',
102+
'1.5.8',
103+
'1.5.9',
104+
],
105+
},
106+
},
107+
'0.74.3': {
108+
'react-native-reanimated': {
109+
name: 'react-native-reanimated',
110+
android_versions: ['3.11.0', '3.12.0'],
111+
},
112+
'react-native-gesture-handler': {
113+
name: 'react-native-gesture-handler',
114+
android_versions: ['2.16.0', '2.16.1', '2.16.2'],
115+
},
116+
'@react-native-firebase/app': {
117+
name: '@react-native-firebase/app',
118+
android_versions: ['21.6.0'],
119+
},
120+
},
8121
'0.74.0': {
9122
'react-native-reanimated': {
10123
name: 'react-native-reanimated',
@@ -37,6 +150,62 @@ const MOCK_LIBRARIES: LibrariesData = {
37150
],
38151
},
39152
},
153+
'0.73.9': {
154+
'react-native-reanimated': {
155+
name: 'react-native-reanimated',
156+
android_versions: ['3.10.0', '3.10.1'],
157+
},
158+
'react-native-gesture-handler': {
159+
name: 'react-native-gesture-handler',
160+
android_versions: ['2.15.0'],
161+
},
162+
'@react-native-firebase/app': {
163+
name: '@react-native-firebase/app',
164+
android_versions: ['21.5.0', '21.6.0'],
165+
},
166+
},
167+
'0.73.6': {
168+
'react-native-reanimated': {
169+
name: 'react-native-reanimated',
170+
android_versions: ['3.9.0', '3.10.0'],
171+
},
172+
'react-native-gesture-handler': {
173+
name: 'react-native-gesture-handler',
174+
android_versions: ['2.14.1', '2.15.0'],
175+
},
176+
'@react-native-firebase/app': {
177+
name: '@react-native-firebase/app',
178+
android_versions: ['21.5.0'],
179+
},
180+
},
181+
'0.73.4': {
182+
'react-native-reanimated': {
183+
name: 'react-native-reanimated',
184+
android_versions: ['3.8.0', '3.9.0'],
185+
},
186+
'react-native-gesture-handler': {
187+
name: 'react-native-gesture-handler',
188+
android_versions: ['2.14.0', '2.14.1'],
189+
},
190+
'@react-native-firebase/app': {
191+
name: '@react-native-firebase/app',
192+
android_versions: ['21.4.0', '21.5.0'],
193+
},
194+
},
195+
'0.73.2': {
196+
'react-native-reanimated': {
197+
name: 'react-native-reanimated',
198+
android_versions: ['3.7.0', '3.8.0'],
199+
},
200+
'react-native-gesture-handler': {
201+
name: 'react-native-gesture-handler',
202+
android_versions: ['2.13.4', '2.14.0'],
203+
},
204+
'@react-native-firebase/app': {
205+
name: '@react-native-firebase/app',
206+
android_versions: ['21.3.0', '21.4.0'],
207+
},
208+
},
40209
'0.73.0': {
41210
'react-native-reanimated': {
42211
name: 'react-native-reanimated',
@@ -69,6 +238,48 @@ const MOCK_LIBRARIES: LibrariesData = {
69238
],
70239
},
71240
},
241+
'0.72.10': {
242+
'react-native-reanimated': {
243+
name: 'react-native-reanimated',
244+
android_versions: ['3.5.0', '3.5.4'],
245+
},
246+
'react-native-gesture-handler': {
247+
name: 'react-native-gesture-handler',
248+
android_versions: ['2.12.0', '2.13.0'],
249+
},
250+
'@react-native-firebase/app': {
251+
name: '@react-native-firebase/app',
252+
android_versions: ['21.2.0'],
253+
},
254+
},
255+
'0.72.7': {
256+
'react-native-reanimated': {
257+
name: 'react-native-reanimated',
258+
android_versions: ['3.4.0', '3.5.0'],
259+
},
260+
'react-native-gesture-handler': {
261+
name: 'react-native-gesture-handler',
262+
android_versions: ['2.11.0', '2.12.0'],
263+
},
264+
'@react-native-firebase/app': {
265+
name: '@react-native-firebase/app',
266+
android_versions: ['21.1.0', '21.2.0'],
267+
},
268+
},
269+
'0.72.5': {
270+
'react-native-reanimated': {
271+
name: 'react-native-reanimated',
272+
android_versions: ['3.3.0', '3.4.0'],
273+
},
274+
'react-native-gesture-handler': {
275+
name: 'react-native-gesture-handler',
276+
android_versions: ['2.10.0', '2.11.0'],
277+
},
278+
'@react-native-firebase/app': {
279+
name: '@react-native-firebase/app',
280+
android_versions: ['21.0.0', '21.1.0'],
281+
},
282+
},
72283
};
73284

74285
function getMockSupportedLibraryNames(): string[] {

0 commit comments

Comments
 (0)