🌟 feat(examples/with-redux): remove tests and sass

examples/with-redux/package.json

@@ -4,36 +4,24 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "typecheck": "tsc",
-    "test": "jest --silent=false",
-    "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch"
+    "lint": "next lint",
+    "typecheck": "tsc"
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.9.5",
     "classnames": "2.3.2",
-    "next": "13.4.4",
+    "next": "13.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-redux": "8.0.7",
-    "sass": "1.62.1",
+    "react-redux": "8.1.0",
     "waait": "1.0.5"
   },
   "devDependencies": {
-    "@swc/core": "1.3.55",
-    "@swc/jest": "0.2.26",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/node": "20.2.5",
-    "@types/react": "18.2.8",
-    "@types/react-dom": "18.2.4",
+    "@types/node": "20.3.1",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
     "@types/redux-logger": "3.0.9",
-    "jest": "29.5.0",
-    "jest-css-modules-transform": "4.4.2",
-    "jest-environment-jsdom": "29.5.0",
-    "jest-watch-typeahead": "2.2.2",
     "redux-logger": "3.0.6",
-    "ts-node": "10.9.1",
     "typescript": "5.1.3"
   }
 }

examples/with-redux/src/app/components/Counter/Counter.tsx

@@ -12,7 +12,7 @@ import {
   incrementAsync,
   incrementIfOddAsync,
 } from '@/lib/redux'
-import styles from './counter.module.scss'
+import styles from './counter.module.css'
 
 export const Counter = () => {
   const dispatch = useDispatch()

examples/with-redux/src/app/components/Nav.tsx

@@ -5,15 +5,26 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import cx from 'classnames'
 
+/* Instruments */
+import styles from '../styles/layout.module.css'
+
 export const Nav = () => {
   const pathname = usePathname()
 
   return (
-    <nav>
-      <Link className={cx({ active: pathname === '/' })} href="/">
+    <nav className={styles.nav}>
+      <Link
+        className={cx(styles.link, { [styles.active]: pathname === '/' })}
+        href="/"
+      >
         Home
       </Link>
-      <Link className={cx({ active: pathname === '/verify' })} href="/verify">
+      <Link
+        className={cx(styles.link, {
+          [styles.active]: pathname === '/verify',
+        })}
+        href="/verify"
+      >
         Verify
       </Link>
     </nav>

examples/with-redux/src/app/layout.tsx

@@ -3,8 +3,8 @@ import { Providers } from '@/lib/providers'
 import { Nav } from './components'
 
 /* Instruments */
-import styles from './styles/main.module.scss'
-import './styles/globals.scss'
+import styles from './styles/layout.module.css'
+import './styles/globals.css'
 
 export default function RootLayout(props: React.PropsWithChildren) {
   return (
@@ -14,13 +14,13 @@ export default function RootLayout(props: React.PropsWithChildren) {
           <section className={styles.container}>
             <Nav />
 
-            <header>
+            <header className={styles.header}>
               <img src="/logo.svg" className={styles.logo} alt="logo" />
             </header>
 
-            <main>{props.children}</main>
+            <main className={styles.main}>{props.children}</main>
 
-            <footer>
+            <footer className={styles.footer}>
               <span>Learn </span>
               <a
                 className={styles.link}

examples/with-redux/src/app/styles/layout.module.css

@@ -0,0 +1,77 @@
+.container {
+  display: grid;
+  grid-template-areas:
+    'nav'
+    'header'
+    'main'
+    'footer';
+  grid-template-rows: auto auto 1fr 36px;
+  align-items: center;
+  min-height: 100vh;
+}
+
+.logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.header {
+  grid-area: header;
+}
+
+.main {
+  grid-area: main;
+}
+
+.header,
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer {
+  grid-area: footer;
+  justify-self: center;
+}
+
+.nav {
+  grid-area: nav;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px;
+  font-size: calc(10px + 2vmin);
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.link {
+  color: #704cb6;
+}
+
+.link.active {
+  text-decoration: underline;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo {
+    animation: logo-float infinite 3s ease-in-out;
+  }
+}
+
+@keyframes logo-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}

examples/with-redux/src/lib/providers.tsx

@@ -7,6 +7,5 @@ import { Provider } from 'react-redux'
 import { reduxStore } from '@/lib/redux'
 
 export const Providers = (props: React.PropsWithChildren) => {
-  // @ts-expect-error reason: react-redux and next.js type mismatch https://github.com/vercel/next.js/issues/37421
   return <Provider store={reduxStore}>{props.children}</Provider>
 }