Skip to content

Commit 0de0449

Browse files
tomast1337tomast1337
committed
chore: update dependencies and configuration for frontend application
- Upgraded various dependencies including Next.js, React, TypeScript, and Tailwind CSS to their latest versions for improved performance and features. - Added a new components.json file for component configuration. - Modified next.config.mjs to allow localhost variants for development. - Updated postcss.config.js to use the new Tailwind CSS plugin format. - Refactored global CSS styles to enhance scrollbar and animation settings. - Adjusted song page components to handle async parameters and token retrieval more effectively. - Enhanced the SongCardGroup component to support responsive sizing options.
1 parent 072f234 commit 0de0449

File tree

14 files changed

+507
-397
lines changed

14 files changed

+507
-397
lines changed

‎apps/frontend/components.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "src/app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"iconLibrary": "lucide",
14+
"aliases": {
15+
"components": "@web/components",
16+
"utils": "@web/lib/utils",
17+
"ui": "@web/components/ui",
18+
"lib": "@web/lib",
19+
"hooks": "@web/hooks"
20+
},
21+
"registries": {}
22+
}

‎apps/frontend/next.config.mjs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,17 @@ const nextConfig = {
3434
hostname: 'cdn.discordapp.com',
3535
port: '',
3636
},
37-
// localhost
37+
// localhost - allow all localhost variants
3838
{
3939
protocol: 'http',
4040
hostname: 'localhost',
4141
port: '9000',
4242
},
43+
{
44+
protocol: 'http',
45+
hostname: '127.0.0.1',
46+
port: '9000',
47+
},
4348
],
4449
},
4550
};

‎apps/frontend/package.json‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,52 +19,54 @@
1919
"@mdx-js/react": "^3.1.1",
2020
"@nbw/config": "workspace:*",
2121
"@nbw/database": "workspace:*",
22-
"@next/mdx": "^14.2.33",
23-
"@next/third-parties": "^14.2.33",
22+
"@next/mdx": "^16.0.8",
23+
"@next/third-parties": "^16.0.8",
2424
"@radix-ui/react-dialog": "^1.1.15",
2525
"@radix-ui/react-popover": "^1.1.15",
2626
"@radix-ui/react-slider": "^1.3.6",
2727
"@radix-ui/react-tooltip": "^1.2.8",
28-
"@types/node": "^20.19.25",
29-
"@types/react": "18.2.18",
30-
"@types/react-dom": "18.2.7",
31-
"autoprefixer": "10.4.14",
28+
"@types/node": "^24.10.2",
29+
"@types/react": "19.2.7",
30+
"@types/react-dom": "19.2.3",
31+
"autoprefixer": "10.4.22",
3232
"axios": "^1.13.2",
3333
"class-variance-authority": "^0.7.1",
3434
"clsx": "^2.1.1",
3535
"cmdk": "^1.1.1",
3636
"embla-carousel-react": "^8.6.0",
3737
"gray-matter": "^4.0.3",
3838
"i": "^0.3.7",
39-
"js-confetti": "^0.12.0",
40-
"next": "14.2.26",
39+
"js-confetti": "^0.13.1",
40+
"lucide-react": "^0.556.0",
41+
"next": "16.0.8",
4142
"next-recaptcha-v3": "^1.5.3",
42-
"nextjs-toploader": "^1.6.12",
43-
"npm": "^10.9.4",
44-
"postcss": "8.4.27",
45-
"react": "18.2.0",
46-
"react-dom": "18.2.0",
43+
"nextjs-toploader": "^3.9.17",
44+
"npm": "^11.7.0",
45+
"postcss": "8.5.6",
46+
"react": "19.2.1",
47+
"react-dom": "19.2.1",
4748
"react-dropzone": "^14.3.8",
4849
"react-hook-form": "^7.68.0",
4950
"react-hot-toast": "^2.6.0",
5051
"react-infinite-scroll-component": "^6.1.1",
5152
"react-loading-skeleton": "^3.5.0",
52-
"react-markdown": "^9.1.0",
53+
"react-markdown": "^10.1.0",
5354
"schema-dts": "^1.1.5",
54-
"sharp": "^0.33.5",
55-
"tailwind-merge": "^2.6.0",
56-
"tailwindcss": "3.4.1",
55+
"sharp": "^0.34.5",
56+
"tailwind-merge": "^3.4.0",
57+
"tailwindcss": "4.1.17",
5758
"tailwindcss-animate": "^1.0.7",
5859
"typescript": "^5.9.3",
59-
"zod": "^3.25.76",
60-
"zod-validation-error": "^3.5.4",
61-
"zustand": "^5.0.8"
60+
"zod": "^4.1.13",
61+
"zod-validation-error": "^5.0.0",
62+
"zustand": "^5.0.9"
6263
},
6364
"devDependencies": {
6465
"@shrutibalasa/tailwind-grid-auto-fit": "^1.1.0",
66+
"@tailwindcss/postcss": "^4.1.17",
6567
"@types/mdx": "^2.0.13",
6668
"@types/react-modal": "^3.16.3",
67-
"eslint-config-next": "13.4.12",
69+
"eslint-config-next": "16.0.8",
6870
"eslint-plugin-mdx": "^3.6.2"
6971
}
7072
}

‎apps/frontend/postcss.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
3+
'@tailwindcss/postcss': {},
44
autoprefixer: {},
55
},
66
};

‎apps/frontend/src/app/(content)/song/[id]/edit/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { redirect } from 'next/navigation';
33
import { checkLogin } from '@web/modules/auth/features/auth.utils';
44
import { EditSongPage } from '@web/modules/song-edit/components/client/EditSongPage';
55

6-
async function Page({ params }: { params: { id: string } }) {
6+
async function Page({ params }: { params: Promise<{ id: string }> }) {
77
const isLogged = await checkLogin();
88
if (!isLogged) redirect('/login?redirect=/upload');
99

10-
const { id } = params;
10+
const { id } = await params;
1111

1212
return <EditSongPage id={id} />;
1313
}

‎apps/frontend/src/app/(content)/song/[id]/page.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import axios from '@web/lib/axios';
66
import { SongPage } from '@web/modules/song/components/SongPage';
77

88
interface SongPage {
9-
params: {
9+
params: Promise<{
1010
id: string;
11-
};
11+
}>;
1212
}
1313

1414
export async function generateMetadata({
@@ -17,6 +17,7 @@ export async function generateMetadata({
1717
let song;
1818
const publicUrl = process.env.NEXT_PUBLIC_URL;
1919

20+
const { id } = await params;
2021
const cookieStore = await cookies();
2122
const token = cookieStore.get('token')?.value || null;
2223

@@ -27,7 +28,7 @@ export async function generateMetadata({
2728
}
2829

2930
try {
30-
const response = await axios.get<SongViewDtoType>(`/song/${params.id}`, {
31+
const response = await axios.get<SongViewDtoType>(`/song/${id}`, {
3132
headers,
3233
});
3334

@@ -55,8 +56,8 @@ export async function generateMetadata({
5556
};
5657
}
5758

58-
function Page({ params }: SongPage) {
59-
const { id } = params;
59+
async function Page({ params }: SongPage) {
60+
const { id } = await params;
6061

6162
return <SongPage id={id} />;
6263
}

‎apps/frontend/src/app/globals.css‎

Lines changed: 135 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
/*---break---*/
3+
@plugin "tailwindcss-animate";
4+
/*---break---*/
5+
@custom-variant dark (&:is(.dark *));
46

57
/************** Scrollbar **************/
68

@@ -14,27 +16,32 @@ body {
1416
}
1517

1618
::-webkit-scrollbar {
17-
@apply w-4;
19+
width: 1rem; /* w-4 */
1820
}
1921

2022
/* Track */
2123
::-webkit-scrollbar-track {
22-
@apply bg-zinc-800/50 rounded-full;
24+
background-color: rgb(39 39 42 / 0.5); /* bg-zinc-800/50 */
25+
border-radius: 9999px; /* rounded-full */
2326
}
2427

2528
/* Handle */
2629
::-webkit-scrollbar-thumb {
27-
@apply bg-zinc-500 w-2 rounded-full border-4 border-solid border-transparent bg-clip-content;
30+
background-color: rgb(113 113 122); /* bg-zinc-500 */
31+
width: 0.5rem; /* w-2 */
32+
border-radius: 9999px; /* rounded-full */
33+
border: 1rem solid transparent; /* border-4 */
34+
background-clip: content-box; /* bg-clip-content */
2835
}
2936

3037
/* Handle on hover */
3138
::-webkit-scrollbar-thumb:hover {
32-
@apply bg-zinc-600;
39+
background-color: rgb(82 82 91); /* bg-zinc-600 */
3340
}
3441

3542
/* Handle on active */
3643
::-webkit-scrollbar-thumb:active {
37-
@apply bg-zinc-700;
44+
background-color: rgb(63 63 70); /* bg-zinc-700 */
3845
}
3946

4047
/************** Animations **************/
@@ -175,3 +182,123 @@ body {
175182
ins.adsbygoogle[data-ad-status='unfilled'] {
176183
display: none !important;
177184
}
185+
/*---break---*/
186+
@theme inline {
187+
--transition-timing-function-out-back: cubic-bezier(0.34, 1.56, 0.51, 1.2);
188+
--radius-sm: calc(var(--radius) - 4px);
189+
--radius-md: calc(var(--radius) - 2px);
190+
--radius-lg: var(--radius);
191+
--radius-xl: calc(var(--radius) + 4px);
192+
--color-background: var(--background);
193+
--color-foreground: var(--foreground);
194+
--color-card: var(--card);
195+
--color-card-foreground: var(--card-foreground);
196+
--color-popover: var(--popover);
197+
--color-popover-foreground: var(--popover-foreground);
198+
--color-primary: var(--primary);
199+
--color-primary-foreground: var(--primary-foreground);
200+
--color-secondary: var(--secondary);
201+
--color-secondary-foreground: var(--secondary-foreground);
202+
--color-muted: var(--muted);
203+
--color-muted-foreground: var(--muted-foreground);
204+
--color-accent: var(--accent);
205+
--color-accent-foreground: var(--accent-foreground);
206+
--color-destructive: var(--destructive);
207+
--color-border: var(--border);
208+
--color-input: var(--input);
209+
--color-ring: var(--ring);
210+
--color-chart-1: var(--chart-1);
211+
--color-chart-2: var(--chart-2);
212+
--color-chart-3: var(--chart-3);
213+
--color-chart-4: var(--chart-4);
214+
--color-chart-5: var(--chart-5);
215+
--color-sidebar: var(--sidebar);
216+
--color-sidebar-foreground: var(--sidebar-foreground);
217+
--color-sidebar-primary: var(--sidebar-primary);
218+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
219+
--color-sidebar-accent: var(--sidebar-accent);
220+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
221+
--color-sidebar-border: var(--sidebar-border);
222+
--color-sidebar-ring: var(--sidebar-ring);
223+
}
224+
/*---break---*/
225+
:root {
226+
--radius: 0.625rem;
227+
--background: oklch(1 0 0);
228+
--foreground: oklch(0.145 0 0);
229+
--card: oklch(1 0 0);
230+
--card-foreground: oklch(0.145 0 0);
231+
--popover: oklch(1 0 0);
232+
--popover-foreground: oklch(0.145 0 0);
233+
--primary: oklch(0.205 0 0);
234+
--primary-foreground: oklch(0.985 0 0);
235+
--secondary: oklch(0.97 0 0);
236+
--secondary-foreground: oklch(0.205 0 0);
237+
--muted: oklch(0.97 0 0);
238+
--muted-foreground: oklch(0.556 0 0);
239+
--accent: oklch(0.97 0 0);
240+
--accent-foreground: oklch(0.205 0 0);
241+
--destructive: oklch(0.577 0.245 27.325);
242+
--border: oklch(0.922 0 0);
243+
--input: oklch(0.922 0 0);
244+
--ring: oklch(0.708 0 0);
245+
--chart-1: oklch(0.646 0.222 41.116);
246+
--chart-2: oklch(0.6 0.118 184.704);
247+
--chart-3: oklch(0.398 0.07 227.392);
248+
--chart-4: oklch(0.828 0.189 84.429);
249+
--chart-5: oklch(0.769 0.188 70.08);
250+
--sidebar: oklch(0.985 0 0);
251+
--sidebar-foreground: oklch(0.145 0 0);
252+
--sidebar-primary: oklch(0.205 0 0);
253+
--sidebar-primary-foreground: oklch(0.985 0 0);
254+
--sidebar-accent: oklch(0.97 0 0);
255+
--sidebar-accent-foreground: oklch(0.205 0 0);
256+
--sidebar-border: oklch(0.922 0 0);
257+
--sidebar-ring: oklch(0.708 0 0);
258+
}
259+
/*---break---*/
260+
.dark {
261+
--background: oklch(0.145 0 0);
262+
--foreground: oklch(0.985 0 0);
263+
--card: oklch(0.205 0 0);
264+
--card-foreground: oklch(0.985 0 0);
265+
--popover: oklch(0.205 0 0);
266+
--popover-foreground: oklch(0.985 0 0);
267+
--primary: oklch(0.922 0 0);
268+
--primary-foreground: oklch(0.205 0 0);
269+
--secondary: oklch(0.269 0 0);
270+
--secondary-foreground: oklch(0.985 0 0);
271+
--muted: oklch(0.269 0 0);
272+
--muted-foreground: oklch(0.708 0 0);
273+
--accent: oklch(0.269 0 0);
274+
--accent-foreground: oklch(0.985 0 0);
275+
--destructive: oklch(0.704 0.191 22.216);
276+
--border: oklch(1 0 0 / 10%);
277+
--input: oklch(1 0 0 / 15%);
278+
--ring: oklch(0.556 0 0);
279+
--chart-1: oklch(0.488 0.243 264.376);
280+
--chart-2: oklch(0.696 0.17 162.48);
281+
--chart-3: oklch(0.769 0.188 70.08);
282+
--chart-4: oklch(0.627 0.265 303.9);
283+
--chart-5: oklch(0.645 0.246 16.439);
284+
--sidebar: oklch(0.205 0 0);
285+
--sidebar-foreground: oklch(0.985 0 0);
286+
--sidebar-primary: oklch(0.488 0.243 264.376);
287+
--sidebar-primary-foreground: oklch(0.985 0 0);
288+
--sidebar-accent: oklch(0.269 0 0);
289+
--sidebar-accent-foreground: oklch(0.985 0 0);
290+
--sidebar-border: oklch(1 0 0 / 10%);
291+
--sidebar-ring: oklch(0.556 0 0);
292+
}
293+
/*---break---*/
294+
@layer base {
295+
* {
296+
border-color: var(--color-border);
297+
outline-color: var(--color-ring);
298+
outline-opacity: 0.5;
299+
}
300+
body {
301+
background-color: var(--color-background);
302+
color: var(--color-foreground);
303+
}
304+
}

‎apps/frontend/src/modules/auth/features/auth.utils.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import { cookies } from 'next/headers';
33
import axiosInstance from '../../../lib/axios';
44
import { LoggedUserData } from '../types/User';
55

6-
export function getTokenServer(): { value: string } | null {
7-
const cookieStore = cookies();
6+
export async function getTokenServer(): Promise<{ value: string } | null> {
7+
const cookieStore = await cookies();
88
const token = cookieStore.get('token');
99

1010
return token as { value: string } | null;
1111
}
1212

1313
export const checkLogin = async () => {
1414
// get token from cookies
15-
const token = getTokenServer();
15+
const token = await getTokenServer();
1616
// if token is not null, redirect to home page
1717
if (!token) return false;
1818
if (!token.value) return false;
@@ -35,7 +35,7 @@ export const checkLogin = async () => {
3535

3636
export const getUserData = async (): Promise<LoggedUserData | never> => {
3737
// get token from cookies
38-
const token = getTokenServer();
38+
const token = await getTokenServer();
3939
// if token is not null, redirect to home page
4040
if (!token) throw new Error('No token found');
4141
if (!token.value) throw new Error('No token found');

‎apps/frontend/src/modules/browse/WelcomeBanner.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@ export const WelcomeBanner = () => {
1212
backgroundAttachment: 'fixed',
1313
}}
1414
></div>
15-
<Image src='/nbw-color.png' alt='' width={100} height={100} />
15+
<Image
16+
src='/nbw-color.png'
17+
quality={75}
18+
alt='Note Block World logo'
19+
width={100}
20+
height={100}
21+
/>
1622
<div className='flex-1 leading-tight max-w-screen-md'>
1723
<h1 className='text-lg font-bold mb-1 text-green-400'>
1824
Welcome to <strong className='text-teal-300'>Note Block World</strong>

0 commit comments

Comments
 (0)