TG 1087 Maintenance - Migrating from Styled-Components to CSS Modules

{{cookiecutter.project_dirname}}/__tests__/components/Navbar.test.tsx

@@ -1,13 +1,11 @@
 import { expect } from '@jest/globals'
 import { screen } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import React from 'react'
 
 import { Navbar } from '@/components/Navbar'
-import { renderWithWrappers } from '../functions'
-
-const setup = () => renderWithWrappers(<Navbar />)
 
 test('Navbar renders correctly', () => {
-  setup()
+  render(<Navbar />)
   expect(screen.getByRole('img')).toBeTruthy()
 })

{{cookiecutter.project_dirname}}/next.config.js

@@ -2,27 +2,22 @@
 
 const { withSentryConfig } = require('@sentry/nextjs')
 
-const {
-  SENTRY_AUTH_TOKEN,
-  SENTRY_ORG,
-  SENTRY_PROJECT_NAME,
-  SENTRY_URL,
-} = process.env
+const { SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT_NAME, SENTRY_URL } =
+  process.env
 
 const nextjsConfig = {
-  compiler: { styledComponents: true },
-  i18n:{
+  i18n: {
     defaultLocale: 'en-US',
-    locales: ['en-US', 'it-IT'],
+    locales: ['en-US', 'it-IT']
   },
   output: 'standalone',
   reactStrictMode: true,
   swcMinify: true,
   rewrites: async () => [
     {
-      source: '/{{ cookiecutter.service_slug }}/health',
+      source: '/frontend/health',
       destination: '/api/health'
-    },
+    }
   ]
 }
 
@@ -37,8 +32,9 @@ const SentryWebpackPluginOptions = {
 
 // Make sure adding Sentry options is the last code to run before exporting, to
 // ensure that your source maps include changes from all other Webpack plugins
-const config = SENTRY_AUTH_TOKEN && SENTRY_ORG && SENTRY_URL
-  ? withSentryConfig(nextjsConfig, SentryWebpackPluginOptions)
-  : nextjsConfig
+const config =
+  SENTRY_AUTH_TOKEN && SENTRY_ORG && SENTRY_URL
+    ? withSentryConfig(nextjsConfig, SentryWebpackPluginOptions)
+    : nextjsConfig
 
 module.exports = config

{{cookiecutter.project_dirname}}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "{{ cookiecutter.project_slug }}",
+  "name": "frontend",
   "version": "1.0.0",
   "private": true,
   "scripts": {
@@ -15,19 +15,13 @@
   },
   "dependencies": {
     "@next/font": "^13.4.19",
-    "@reduxjs/toolkit": "^1.9.5",
     "@sentry/nextjs": "^7.64.0",
     "basic-auth": "^2.0.1",
     "express": "^4.18.2",
     "next": "^13.4.19",
-    "nookies": "^2.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "react-redux": "^8.1.2",
-    "redux": "^4.2.1",
-    "styled-components": "^6.0.8",
-    "styled-normalize": "^8.0.7"
+    "react-is": "^18.2.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.4.19",
@@ -40,8 +34,6 @@
     "@types/node": "^20.5.3",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "@types/react-redux": "^7.1.26",
-    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
     "eslint": "^8.48.0",

{{cookiecutter.project_dirname}}/src/components/Navbar.tsx

@@ -1,34 +1,19 @@
 import React from 'react'
-import styled from 'styled-components'
+import styles from '@/styles/navbar.module.css'
 
-import { ThemeSwitch } from '@/components/ThemeSwitch'
 import Image from 'next/image'
-import { useAppSelector } from '@/store'
 
 const Navbar = () => {
-  const theme = useAppSelector(state => state.utils.theme)
-
   return (
-    <Nav>
+    <nav className={styles.navbar}>
       <Image
-        src={`/images/logo-${theme}.svg`}
+        src={`/images/logo-light.svg`}
         width='110'
         height='48'
         alt={'sito logo'}
       />
-      <ThemeSwitch />
-    </Nav>
+    </nav>
   )
 }
 
-const Nav = styled.nav`
-  width: 100%;
-  background-color: ${({ theme }) => theme.colors.neutrals[100]};
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 5px;
-`
-
 export { Navbar }