2024 and beyond (#50)

* so many updates, so much sauce

---------

Co-authored-by: feledori <[email protected]>

.gitignore

@@ -42,4 +42,7 @@ yarn-error.log*
 
 .npmrc
 
-*storybook.log
+*storybook.log
+certificates
+
+next-env.d.ts

.husky/_/post-merge

@@ -13,25 +13,22 @@ call_lefthook()
   if test -n "$LEFTHOOK_BIN"
   then
     "$LEFTHOOK_BIN" "$@"
-  elif lefthook.exe -h >/dev/null 2>&1
+  elif lefthook -h >/dev/null 2>&1
   then
-    lefthook.exe "$@"
-  elif lefthook.bat -h >/dev/null 2>&1
-  then
-    lefthook.bat "$@"
+    lefthook "$@"
   else
     dir="$(git rev-parse --show-toplevel)"
     osArch=$(uname | tr '[:upper:]' '[:lower:]')
     cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
-    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe"
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
     then
-      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe" "$@"
-    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe"
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
     then
-      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe" "$@"
-    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe"
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
     then
-      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe" "$@"
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
     elif test -f "$dir/node_modules/lefthook/bin/index.js"
     then
       "$dir/node_modules/lefthook/bin/index.js" "$@"

.husky/_/pre-commit

@@ -13,25 +13,22 @@ call_lefthook()
   if test -n "$LEFTHOOK_BIN"
   then
     "$LEFTHOOK_BIN" "$@"
-  elif lefthook.exe -h >/dev/null 2>&1
+  elif lefthook -h >/dev/null 2>&1
   then
-    lefthook.exe "$@"
-  elif lefthook.bat -h >/dev/null 2>&1
-  then
-    lefthook.bat "$@"
+    lefthook "$@"
   else
     dir="$(git rev-parse --show-toplevel)"
     osArch=$(uname | tr '[:upper:]' '[:lower:]')
     cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
-    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe"
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
     then
-      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe" "$@"
-    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe"
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
     then
-      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe" "$@"
-    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe"
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
     then
-      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe" "$@"
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
     elif test -f "$dir/node_modules/lefthook/bin/index.js"
     then
       "$dir/node_modules/lefthook/bin/index.js" "$@"

.husky/_/prepare-commit-msg

@@ -13,25 +13,22 @@ call_lefthook()
   if test -n "$LEFTHOOK_BIN"
   then
     "$LEFTHOOK_BIN" "$@"
-  elif lefthook.exe -h >/dev/null 2>&1
+  elif lefthook -h >/dev/null 2>&1
   then
-    lefthook.exe "$@"
-  elif lefthook.bat -h >/dev/null 2>&1
-  then
-    lefthook.bat "$@"
+    lefthook "$@"
   else
     dir="$(git rev-parse --show-toplevel)"
     osArch=$(uname | tr '[:upper:]' '[:lower:]')
     cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
-    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe"
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
     then
-      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe" "$@"
-    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe"
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
     then
-      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe" "$@"
-    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe"
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
     then
-      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe" "$@"
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
     elif test -f "$dir/node_modules/lefthook/bin/index.js"
     then
       "$dir/node_modules/lefthook/bin/index.js" "$@"

.storybook/preview.js

@@ -1,8 +1,8 @@
 import { fonts } from 'app/fonts'
 import cn from 'clsx'
-import { StyleVariables } from 'libs/style-variables'
-import { colors, themes } from 'styles/config'
-import 'styles/global.scss'
+import { StyleVariables } from '~/libs/style-variables'
+import { colors, themes } from '~/styles/config.mjs'
+import '~/styles/global.css'
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "biomejs.biome",
+    "waderyan.gitblame",
+    "csstools.postcss",
+    "graphql.vscode-graphql-syntax"
+  ]
+}

.vscode/settings.json

@@ -1,20 +1,20 @@
 {
-  "eslint.format.enable": true,
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.organizeImports": "explicit",
-    "source.fixAll.eslint": "explicit"
+    "source.organizeImports": "explicit"
   },
-  "files.associations": {
-    "*.js": "javascriptreact"
-  },
-  "prettier.enable": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "biomejs.biome",
+  "typescript.suggest.autoImports": true,
+  "javascript.suggest.autoImports": true,
   "workbench.editor.customLabels.patterns": {
     "**/app/**/page.js": "${dirname(1)}/${dirname} <page>",
     "**/app/**/layout.js": "${dirname(1)}/${dirname} <layout>",
     "**/app/api/**/route.js": "${dirname(1)}/${dirname} <route>"
   },
-  "typescript.suggest.autoImports": true,
-  "javascript.suggest.autoImports": true
+  "files.associations": {
+    "*.json": "jsonc",
+    "*.css": "css"
+  },
+  "css.lint.validProperties": ["user-drag"],
+  "css.lint.unknownAtRules": "ignore"
 }

PROD-README.md

@@ -29,22 +29,15 @@ The usual process for Next.js based apps/websites:
 - [@react-three/drei](https://github.com/pmndrs/drei)
 - [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)
 - [GSAP](https://greensock.com/gsap/)
-- Sass (Modules)
+- CSS with PostCSS custom settings (check `postcss.config.mjs`)
 - [Zustand](https://github.com/pmndrs/zustand)
 - GraphQL (CMS API)
-- [@svgr/webpack](https://github.com/gregberge/svgr/tree/main) (SVG Imports in `next.config.js`)
+- [@svgr/webpack](https://github.com/gregberge/svgr/tree/main) (SVG Imports in `next.config.ts`)
+- [pnpm](https://pnpm.io/)
 
 ## Code Style & Linting:
 
-- Eslint ([Next](https://nextjs.org/docs/basic-features/eslint#eslint-config) and [Prettier](https://github.com/prettier/eslint-config-prettier) plugins)
-- [Prettier](https://prettier.io/) with the following settings available in `.pretierrc`:
-  ```json
-  {
-    "endOfLine": "auto",
-    "semi": false,
-    "singleQuote": true
-  }
-  ```
+- [Biome](https://github.com/biomejs/biome)
 - [Lefthook](https://github.com/evilmartians/lefthook)
 
 ## Third Party (optional tools):
@@ -59,8 +52,15 @@ The usual process for Next.js based apps/websites:
 
 Alongside the usual Next.js App Router folder structure (`/public`, `/app`, etc.) We've added a few other folders to keep the code easier to read:
 
-- **/components:** Reusable components with their respective Sass file
+- **/components:** Reusable components with their respective CSS file
 - **/docs:** Readmes on how to use third party tools at darkroom
 - **/hooks:** Reusable Custom Hooks
-- **/libs:** Reusable Scripts and State Storing, hubspot integration, sass utils, etc.
-- **/styles:** Global styles and Sass partials
+- **/libs:** 
+  - Core form functionality
+  - Hubspot integration
+  - Shopify integration
+  - Storyblok integration
+  - Style variables
+  - Theatre.js integration
+  - general purpose functions
+- **/styles:** Style theme configurations, Global styles and CSS partials.

README.md

@@ -20,12 +20,7 @@ This starter kit has an opinionated setting using the following:
 - [Shopify](https://www.shopify.com/)
 - [SERVER MONO](https://github.com/internet-development/www-server-mono) Open Source font
 - SVG import through [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)
-- Sass architecture and tooling:
-  - Config file
-  - Viewport based sizes
-  - Reset
-  - Easings
-  - Themes
+- PostCSS architecture and tooling:
 - Debug tools:
   - Theatre.js Studio [@theatre/studio](https://www.npmjs.com/package/@theatre/studio)
   - FPS Meter

app/(pages)/(components)/footer/footer.module.scss → app/(pages)/(components)/footer/footer.module.css

@@ -2,8 +2,10 @@
   display: flex;
   justify-content: space-between;
   padding: var(--layout-margin);
+  text-transform: uppercase;
+  font-family: var(--font-mono);
 
-  @include mobile {
+  @include-media ('mobile') {
     flex-direction: column;
     align-items: center;
   }

app/(pages)/(components)/footer/index.js → app/(pages)/(components)/footer/index.jsx

@@ -1,5 +1,5 @@
-import { Link } from 'components/link'
-import s from './footer.module.scss'
+import { Link } from '~/components/link'
+import s from './footer.module.css'
 
 export function Footer() {
   return (

app/(pages)/(components)/navigation/index.js → app/(pages)/(components)/navigation/index.jsx

@@ -1,9 +1,9 @@
 'use client'
 
 import cn from 'clsx'
-import { Link } from 'components/link'
 import { usePathname } from 'next/navigation'
-import s from './navigation.module.scss'
+import { Link } from '~/components/link'
+import s from './navigation.module.css'
 
 const LINKS = [
   { href: '/', label: 'home' },

app/(pages)/(components)/navigation/navigation.module.scss → app/(pages)/(components)/navigation/navigation.module.css

@@ -5,6 +5,8 @@
   z-index: 2;
   top: var(--layout-margin);
   left: var(--layout-margin);
+  text-transform: uppercase;
+  font-family: var(--font-mono);
 
   .title {
     display: inline-flex;
@@ -19,7 +21,7 @@
 
     .active {
       &::before {
-        content: '■';
+        content: "■";
         position: absolute;
         left: -16px;
       }