8000 web: migrate to nextjs · brpapa/recursion-tree-visualizer@ac07890 · GitHub
[go: up one dir, main page]
Skip to content

Commit ac07890

Browse files
brpapabrpapa
committed
web: migrate to nextjs
1 parent b661e4f commit ac07890

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+845
-698
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ npm-debug.log*
1111
yarn-debug.log*
1212
yarn-error.log*
1313
**/_*
14+
**/.next

‎packages/web/.eslintrc.js

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎packages/web/.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next"
3+
}

‎packages/web/app/layout.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react'
2+
import StyledJsxRegistry from './registry'
3+
import { SpeedInsights } from '@vercel/speed-insights/next'
4+
import { GoogleAnalytics } from '../src/lib/google-analytics'
5+
6+
export default function Layout({ children }: { children: React.ReactNode }) {
7+
return (
8+
<html lang='en' suppressHydrationWarning>
9+
<head>
10+
<title>Recursion Tree Visualizer</title>
11+
<meta charSet='utf-8' />
12+
<meta name='viewport' content='width=device-width, initial-scale=1' />
13+
<meta
14+
name='description'
15+
content='Input the source code of any recursive function in javascript, python or golang and visualize its recursion tree'
16+
/>
17+
<link
18+
rel='stylesheet'
19+
type='text/css'
20+
href='https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'
21+
/>
22+
<FavIcon />
23+
</head>
24+
<body>
25+
<StyledJsxRegistry>{children}</StyledJsxRegistry>
26+
<SpeedInsights />
27+
<GoogleAnalytics gaId='UA-172363386-2' />
28+
</body>
29+
</html>
30+
)
31+
}
32+
33+
const FavIcon = () => (
34+
<>
35+
<meta name='msapplication-TileColor' content='#da532c' />
36+
<meta name='theme-color' content='#fff' />
37+
<link
38+
rel='apple-touch-icon'
39+
sizes='180x180'
40+
href='/icon/apple-touch-icon.png'
41+
/>
42+
<link
43+
rel='icon'
44+
type='image/png'
45+
sizes='32x32'
46+
href='/icon/favicon-32x32.png'
47+
/>
48+
<link
49+
rel='icon'
50+
type='image/png'
51+
sizes='16x16'
52+
href='/icon/favicon-16x16.png'
53+
/>
54+
<link rel='manifest' href='/icon/site.webmanifest'></link>
55+
</>
56+
)

‎packages/web/app/page.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use client'
2+
import React, { useState } from 'react'
3+
import App from '../src/components/app'
4+
import { ThemeProvider } from 'styled-components'
5+
import themes, { ThemeName } from '../src/styles/themes'
6+
import GlobalStyle from '../src/styles/global'
7+
import { DEFAULT_THEME_TYPE } from '../src/config/consts'
8+
import { Toaster } from 'react-hot-toast'
9+
10+
export default function Page() {
11+
const [themeName, setThemeName] = useState<ThemeName>(DEFAULT_THEME_TYPE)
12+
const theme = themes[themeName]
13+
14+
return (
15+
<ThemeProvider theme={theme}>
16+
<GlobalStyle />
17+
<Toaster
18+
position='top-left'
19+
reverseOrder={false}
20+
toastOptions={{
21+
duration: 5000,
22+
style: {
23+
background: theme.colors.foreground,
24+
border: `1px solid ${theme.colors.border}`,
25+
color: theme.colors.contrast,
26+
boxShadow: 'none',
27+
},
28+
}}
29+
/>
30+
<App onThemeChange={setThemeName} />
31+
</ThemeProvider>
32+
)
33+
}

‎packages/web/app/registry.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use client'
2+
3+
import React, { useState } from 'react'
4+
import { useServerInsertedHTML } from 'next/navigation'
5+
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
6+
7+
export default function StyledComponentsRegistry({
8+
children,
9+
}: {
10+
children: React.ReactNode
11+
}) {
12+
// Only create stylesheet once with lazy initial state
13+
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
14+
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
15+
16+
useServerInsertedHTML(() => {
17+
const styles = styledComponentsStyleSheet.getStyleElement()
18+
styledComponentsStyleSheet.instance.clearTag()
19+
return <>{styles}</>
20+
})
21+
22+
if (typeof window !== 'undefined') return <>{children}</>
23+
24+
return (
25+
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
26+
{children}
27+
</StyleSheetManager>
28+
)
29+
}

‎packages/web/next-env.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

‎packages/web/next.config.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = function () {
2+
/** @type {import('next').NextConfig} */
3+
const config = {
4+
compiler: {
5+
styledComponents: true
6+
},
7+
experimental: {
8+
typedRoutes: true,
9+
scrollRestoration: true,
10+
},
11+
}
12+
13+
return config
14+
}

‎packages/web/package.json

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,17 @@
99
},
1010
"packageManager": "yarn@1.22.22",
1111
"scripts": {
12-
"local": "BROWSER=none PORT=3003 react-scripts start",
13-
"build": "react-scripts build",
14-
"lint": "eslint 'src/**/*.ts'",
12+
"dev": "next dev --port 3003",
13+
"build": "next build",
14+
"start": "next start",
15+
"lint": "next lint",
1516
"test": "npx jest --config jest.config.js",
1617
"test:cov": "npx jest --config jest.config.js --coverage",
1718
"typesync": "npx typesync"
1819
},
1920
"dependencies": {
20-
"@vercel/analytics": "^1.3.1",
21+
"@vercel/speed-insights": "^1.0.12",
22+
"next": "^14.2.15",
2123
"prism-react-renderer": "^2.4.0",
2224
"react": "^18.3.1",
2325
"react-dom": "^18.3.1",
@@ -27,7 +29,6 @@
2729
"styled-components": "^6.1.13"
2830
},
2931
"devDependencies": {
30-
"@types/eslint": "^9.6.1",
3132
"@types/jest": "^29.5.13",
3233
"@types/node": "^22.7.5",
3334
"@types/prismjs": "^1.26.4",
@@ -37,9 +38,7 @@
3738
"@types/styled-components": "^5.1.34",
3839
"@typescript-eslint/eslint-plugin": "^8.8.1",
3940
"@typescript-eslint/parser": "^8.8.1",
40-
"eslint": "^9.12.0",
41-
"eslint-plugin-react": "^7.37.1",
42-
"eslint-plugin-react-hooks": "^4.6.2",
41+
"eslint-config-next": "14.2.15",
4342
"jest": "^29.7.0",
4443
"react-scripts": "^5.0.1",
4544
"ts-jest": "^29.2.5",
@@ -57,4 +56,4 @@
5756
"last 1 safari version"
5857
]
5958
}
60-
}
59+
}

‎packages/web/public/index.html

Lines changed: 0 additions & 35 deletions
This file was deleted.

0 commit comments

Comments
 (0)
0