Skip to content

Commit 2472d44

Browse files
fityannugrohofityannugroho
authored
chore: upgrade deps (React 19, etc.) and refactoring (#59)
1 parent 1b68ee0 commit 2472d44

38 files changed

+3078
-2911
lines changed

‎.github/workflows/main.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ jobs:
1616
runs-on: ubuntu-latest
1717
strategy:
1818
matrix:
19-
node-version: [18.17, 20.x]
19+
node-version: [18.18, 20.x]
2020
steps:
2121
- name: Checkout repository
2222
uses: actions/checkout@v4

‎app/(main)/[code]/page.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import type { Metadata, ResolvingMetadata } from 'next'
77
import { notFound } from 'next/navigation'
88

99
type Props = {
10-
params: {
10+
params: Promise<{
1111
code: string
12-
}
12+
}>
1313
}
1414

1515
async function getAreaData(
@@ -29,9 +29,13 @@ async function getAreaData(
2929
}
3030

3131
export async function generateMetadata(
32-
{ params: { code } }: Props,
32+
props: Props,
3333
parent: ResolvingMetadata,
3434
): Promise<Metadata> {
35+
const params = await props.params
36+
37+
const { code } = params
38+
3539
let area: Area
3640
let areaData: Awaited<ReturnType<typeof getAreaData>>
3741

@@ -80,7 +84,8 @@ export async function generateMetadata(
8084
}
8185
}
8286

83-
export default async function DetailAreaPage({ params }: Props) {
87+
export default async function DetailAreaPage(props: Props) {
88+
const params = await props.params
8489
let area: Area
8590
let areaData: Awaited<ReturnType<typeof getAreaData>>
8691

‎app/api/og-image/area/[code]/route.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,12 @@ const maxPolygon = 30
1818

1919
export async function GET(
2020
request: Request,
21-
{ params: { code } }: { params: { code: string } },
21+
props: { params: Promise<{ code: string }> },
2222
) {
23+
const params = await props.params
24+
25+
const { code } = params
26+
2327
let area: Area
2428
try {
2529
area = determineAreaByCode(code)

‎app/globals.css‎

Lines changed: 142 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,151 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
42

5-
@layer base {
6-
:root {
7-
--background: 0 0% 100%;
8-
--foreground: 222.2 84% 4.9%;
9-
--card: 0 0% 100%;
10-
--card-foreground: 222.2 84% 4.9%;
11-
--popover: 0 0% 100%;
12-
--popover-foreground: 222.2 84% 4.9%;
13-
--primary: 221.2 83.2% 53.3%;
14-
--primary-foreground: 210 40% 98%;
15-
--secondary: 210 40% 96.1%;
16-
--secondary-foreground: 222.2 47.4% 11.2%;
17-
--muted: 210 40% 96.1%;
18-
--muted-foreground: 215.4 16.3% 46.9%;
19-
--accent: 210 40% 96.1%;
20-
--accent-foreground: 222.2 47.4% 11.2%;
21-
--destructive: 0 84.2% 60.2%;
22-
--destructive-foreground: 210 40% 98%;
23-
--border: 214.3 31.8% 91.4%;
24-
--input: 214.3 31.8% 91.4%;
25-
--ring: 221.2 83.2% 53.3%;
26-
--radius: 0.5rem;
27-
28-
--chart-1: 12 76% 61%;
29-
--chart-2: 173 58% 39%;
30-
--chart-3: 197 37% 24%;
31-
--chart-4: 43 74% 66%;
32-
--chart-5: 27 87% 67%;
3+
@plugin 'tailwindcss-animate';
4+
5+
@custom-variant dark (&:is(.dark *));
6+
7+
@theme inline {
8+
--font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
9+
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
10+
11+
--color-border: var(--border);
12+
--color-input: var(--input);
13+
--color-ring: var(--ring);
14+
--color-background: var(--background);
15+
--color-foreground: var(--foreground);
16+
17+
--color-primary: var(--primary);
18+
--color-primary-foreground: var(--primary-foreground);
19+
20+
--color-secondary: var(--secondary);
21+
--color-secondary-foreground: var(--secondary-foreground);
22+
23+
--color-destructive: var(--destructive);
24+
--color-destructive-foreground: var(--destructive-foreground);
25+
26+
--color-muted: var(--muted);
27+
--color-muted-foreground: var(--muted-foreground);
28+
29+
--color-accent: var(--accent);
30+
--color-accent-foreground: var(--accent-foreground);
31+
32+
--color-popover: var(--popover);
33+
--color-popover-foreground: var(--popover-foreground);
34+
35+
--color-card: var(--card);
36+
--color-card-foreground: var(--card-foreground);
37+
38+
--radius-lg: var(--radius);
39+
--radius-md: calc(var(--radius) - 2px);
40+
--radius-sm: calc(var(--radius) - 4px);
41+
42+
--animate-accordion-down: accordion-down 0.2s ease-out;
43+
--animate-accordion-up: accordion-up 0.2s ease-out;
44+
45+
@keyframes accordion-down {
46+
from {
47+
height: 0;
48+
}
49+
to {
50+
height: var(--radix-accordion-content-height);
51+
}
3352
}
53+
@keyframes accordion-up {
54+
from {
55+
height: var(--radix-accordion-content-height);
56+
}
57+
to {
58+
height: 0;
59+
}
60+
}
61+
}
62+
63+
@utility container {
64+
margin-inline: auto;
65+
padding-inline: 2rem;
66+
@media (width >= --theme(--breakpoint-sm)) {
67+
max-width: none;
68+
}
69+
@media (width >= 1400px) {
70+
max-width: 1400px;
71+
}
72+
}
3473

35-
.dark {
36-
--background: 222.2 84% 4.9%;
37-
--foreground: 210 40% 98%;
38-
--card: 222.2 84% 4.9%;
39-
--card-foreground: 210 40% 98%;
40-
--popover: 222.2 84% 4.9%;
41-
--popover-foreground: 210 40% 98%;
42-
--primary: 217.2 91.2% 59.8%;
43-
--primary-foreground: 222.2 47.4% 11.2%;
44-
--secondary: 217.2 32.6% 17.5%;
45-
--secondary-foreground: 210 40% 98%;
46-
--muted: 217.2 32.6% 17.5%;
47-
--muted-foreground: 215 20.2% 65.1%;
48-
--accent: 217.2 32.6% 17.5%;
49-
--accent-foreground: 210 40% 98%;
50-
--destructive: 0 62.8% 30.6%;
51-
--destructive-foreground: 210 40% 98%;
52-
--border: 217.2 32.6% 17.5%;
53-
--input: 217.2 32.6% 17.5%;
54-
--ring: 224.3 76.3% 48%;
55-
56-
--chart-1: 220 70% 50%;
57-
--chart-2: 160 60% 45%;
58-
--chart-3: 30 80% 55%;
59-
--chart-4: 280 65% 60%;
60-
--chart-5: 340 75% 55%;
74+
/*
75+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
76+
so we've added these compatibility styles to make sure everything still
77+
looks the same as it did with Tailwind CSS v3.
78+
79+
If we ever want to remove these styles, we need to add an explicit border
80+
color utility to any element that depends on these defaults.
81+
*/
82+
@layer base {
83+
*,
84+
::after,
85+
::before,
86+
::backdrop,
87+
::file-selector-button {
88+
border-color: var(--color-gray-200, currentcolor);
6189
}
6290
}
6391

92+
:root {
93+
--background: hsl(0 0% 100%);
94+
--foreground: hsl(222.2 84% 4.9%);
95+
--card: hsl(0 0% 100%);
96+
--card-foreground: hsl(222.2 84% 4.9%);
97+
--popover: hsl(0 0% 100%);
98+
--popover-foreground: hsl(222.2 84% 4.9%);
99+
--primary: hsl(221.2 83.2% 53.3%);
100+
--primary-foreground: hsl(210 40% 98%);
101+
--secondary: hsl(210 40% 96.1%);
102+
--secondary-foreground: hsl(222.2 47.4% 11.2%);
103+
--muted: hsl(210 40% 96.1%);
104+
--muted-foreground: hsl(215.4 16.3% 46.9%);
105+
--accent: hsl(210 40% 96.1%);
106+
--accent-foreground: hsl(222.2 47.4% 11.2%);
107+
--destructive: hsl(0 84.2% 60.2%);
108+
--destructive-foreground: hsl(210 40% 98%);
109+
--border: hsl(214.3 31.8% 91.4%);
110+
--input: hsl(214.3 31.8% 91.4%);
111+
--ring: hsl(221.2 83.2% 53.3%);
112+
--radius: 0.5rem;
113+
114+
--chart-1: hsl(12 76% 61%);
115+
--chart-2: hsl(173 58% 39%);
116+
--chart-3: hsl(197 37% 24%);
117+
--chart-4: hsl(43 74% 66%);
118+
--chart-5: hsl(27 87% 67%);
119+
}
120+
121+
.dark {
122+
--background: hsl(222.2 84% 4.9%);
123+
--foreground: hsl(210 40% 98%);
124+
--card: hsl(222.2 84% 4.9%);
125+
--card-foreground: hsl(210 40% 98%);
126+
--popover: hsl(222.2 84% 4.9%);
127+
--popover-foreground: hsl(210 40% 98%);
128+
--primary: hsl(217.2 91.2% 59.8%);
129+
--primary-foreground: hsl(222.2 47.4% 11.2%);
130+
--secondary: hsl(217.2 32.6% 17.5%);
131+
--secondary-foreground: hsl(210 40% 98%);
132+
--muted: hsl(217.2 32.6% 17.5%);
133+
--muted-foreground: hsl(215 20.2% 65.1%);
134+
--accent: hsl(217.2 32.6% 17.5%);
135+
--accent-foreground: hsl(210 40% 98%);
136+
--destructive: hsl(0 62.8% 30.6%);
137+
--destructive-foreground: hsl(210 40% 98%);
138+
--border: hsl(217.2 32.6% 17.5%);
139+
--input: hsl(217.2 32.6% 17.5%);
140+
--ring: hsl(224.3 76.3% 48%);
141+
142+
--chart-1: hsl(220 70% 50%);
143+
--chart-2: hsl(160 60% 45%);
144+
--chart-3: hsl(30 80% 55%);
145+
--chart-4: hsl(280 65% 60%);
146+
--chart-5: hsl(340 75% 55%);
147+
}
148+
64149
@layer base {
65150
* {
66151
@apply border-border;

‎components/DashboardLayout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ import {
77
} from '@/components/ui/resizable'
88
import { useDashboardLayout } from '@/hooks/useDashboardLayout'
99
import type { Map as LeafletMap } from 'leaflet'
10-
import type { ForwardRefExoticComponent, RefAttributes } from 'react'
10+
import type { RefAttributes } from 'react'
1111

1212
export default function DashboardLayout({
1313
Sidebar,
1414
MapView,
1515
}: {
1616
Sidebar: React.FC
17-
MapView: ForwardRefExoticComponent<RefAttributes<LeafletMap>>
17+
MapView: React.FC<RefAttributes<LeafletMap>>
1818
}) {
1919
const {
2020
orientation,

‎components/Map.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
'use client'
22

33
import 'leaflet/dist/leaflet.css'
4-
import type { PropsWithChildren } from 'react'
5-
import { MapContainer, type MapContainerProps } from 'react-leaflet'
4+
import { MapContainer } from 'react-leaflet'
65
import TileLayer from './TileLayer'
76

8-
export type MapProps = MapContainerProps & PropsWithChildren
9-
107
export default function Map({
118
center = [-3.028137, 119.764063],
129
className = 'w-full h-full',
1310
zoom = 5,
1411
children,
12+
ref,
1513
...mapProps
16-
}: MapProps) {
14+
}: React.ComponentPropsWithRef<typeof MapContainer>) {
1715
return (
1816
<MapContainer
1917
{...mapProps}

‎components/MapFlyToBounds.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { LatLngBounds } from 'leaflet'
2+
import { useEffect } from 'react'
3+
import { useMap } from 'react-leaflet'
4+
5+
export default function MapFlyToBounds({ bounds }: { bounds: LatLngBounds }) {
6+
const map = useMap()
7+
8+
useEffect(() => {
9+
map.flyToBounds(bounds)
10+
}, [map, bounds])
11+
12+
return null
13+
}

‎components/Navbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const menuItems: MenuItem[] = [
3838
href: 'https://idn-area.up.railway.app',
3939
label: 'idn-area API',
4040
target: '_blank',
41-
accessories: <ExternalLinkIcon className="h-4 w-4" />,
41+
accessories: <ExternalLinkIcon className="size-4" />,
4242
},
4343
{
4444
href: 'https://trakteer.id/fityannugroho/tip',
@@ -64,7 +64,7 @@ export function Navbar({ className }: NavbarProps) {
6464
<Link href="/" className="text-lg font-semibold">
6565
{appName}
6666
</Link>
67-
<ul className="hidden md:flex gap-4 lg:gap-6 text-sm *:text-foreground/60 hover:*:text-foreground">
67+
<ul className="hidden md:flex gap-4 lg:gap-6 text-sm *:text-foreground/60 *:hover:text-foreground">
6868
{menuItems.map((item) => (
6969
<li key={item.href}>
7070
<Link

‎components/icons/GitHubIcon.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
import { cn } from '@/lib/utils'
2-
import { forwardRef } from 'react'
32

4-
const GithubIcon = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
5-
({ className, ...props }, ref) => {
6-
return (
7-
<svg
8-
{...props}
9-
ref={ref}
10-
role="img"
11-
viewBox="0 0 24 24"
12-
xmlns="http://www.w3.org/2000/svg"
13-
className={cn('fill-current', className)}
14-
>
15-
<title>GitHub</title>
16-
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
17-
</svg>
18-
)
19-
},
20-
)
21-
GithubIcon.displayName = 'GithubIcon'
3+
function GithubIcon({
4+
ref,
5+
className,
6+
...props
7+
}: React.SVGProps<SVGSVGElement>) {
8+
return (
9+
<svg
10+
{...props}
11+
ref={ref}
12+
role="img"
13+
viewBox="0 0 24 24"
14+
xmlns="http://www.w3.org/2000/svg"
15+
className={cn('fill-current', className)}
16+
>
17+
<title>GitHub</title>
18+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
19+
</svg>
20+
)
21+
}
2222

2323
export default GithubIcon

0 commit comments

Comments
 (0)