smol updates

PROD-README.md

@@ -1,6 +1,6 @@
 # [PROJECT]
 
-## Setup
+## Setup:
 
 The usual process for Next.js based apps/websites:
 
@@ -18,7 +18,7 @@ The usual process for Next.js based apps/websites:
 
    `$ pnpm dev`
 
-## Stack
+## Stack:
 
 - [Lenis](https://github.com/darkroomengineering/lenis)
 - [Tempus](https://github.com/darkroomengineering/tempus)
@@ -29,15 +29,13 @@ 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/)
-- [Embla Carousel](https://github.com/davidcetinkaya/embla-carousel)
 - Sass (Modules)
 - [Zustand](https://github.com/pmndrs/zustand)
-- [React Hook Form](https://react-hook-form.com/)
 - GraphQL (CMS API)
 - [Next-Sitemap](https://github.com/iamvishnusankar/next-sitemap) (postbuild script)
 - [@svgr/webpack](https://github.com/gregberge/svgr/tree/main) (SVG Imports in `next.config.js`)
 
-## Code Style & Linting
+## 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`:
@@ -50,21 +48,20 @@ The usual process for Next.js based apps/websites:
   ```
 - [Husky + lint-staged precommit hooks](https://github.com/okonet/lint-staged)
 
-## Third Party
+## Third Party (optional tools):
 
+- [Storyblok CMS](https://storyblok.com/)
 - [Mailchimp CRM](https://mailchimp.com/)
 - [Hubspot CRM](https://hubspot.com/)
 - [Vercel (Hosting & Continuous Deployment)](https://vercel.com/home)
 - [GitHub Versioning](https://github.com/)
 
-## Folder Structure
+## Folder Structure:
 
-Alongside the usual Next.js folder structure (`/public`, `/pages`, etc.) We've added a few other folders to keep the code easier to read:
+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:
 
-- **/assets:** General Images/Videos and SVGs
 - **/components:** Reusable components with their respective Sass file
-- **/config:** General settings (mostly Leva for now)
+- **/docs:** Readmes on how to use third party tools at darkroom
 - **/hooks:** Reusable Custom Hooks
-- **/layouts:** High level layout component
-- **/lib:** Reusable Scripts and State Store
+- **/libs:** Reusable Scripts and State Storing, hubspot integration, sass utils, etc.
 - **/styles:** Global styles and Sass partials

README.md

@@ -2,13 +2,13 @@
 
 ## Introduction
 
-Satūs means start, beginning, planting, it's a set of tools we use as a template when starting a new project.
+Satūs means start, beginning, planting, to be used as a template when starting a new project.
 
 <br/>
 
 ## Composition
 
-This starter kit is composed of:
+This starter kit has an opinionated setting using the following:
 
 - [Next.js](https://nextjs.org) App router
 - [react-three-fiber](https://github.com/pmndrs/react-three-fiber)
@@ -26,14 +26,27 @@ This starter kit is composed of:
   - Easings
   - Themes
 - Debug tools:
-  - Theatre.js Studio
+  - Theatre.js Studio [@theatre/studio](https://www.npmjs.com/package/@theatre/studio)
   - FPS Meter
   - Grid Debugger
 - Github workflow to display lighthouse report on slack:
   make sure you update the `vercel_project_id` in `.github/workflows/lighthouse-on-vercel-preview-url.yml` to your Vercel project id.
 
 <br/>
 
+## Docs
+
+There is a `docs` folder with documentation on how to use tools such as GSAP and Storyblok at Darkroom. There is also a HOW-TO.md file serving as a catch-all file for any other tools or processes that are too straigthforward to warrant a full documentation file.
+
+<br/>
+
+## Going Live
+
+To deploy your project you can use Vercel, Netlify, or any other service that supports Next.js.
+there is a PROD-README.md file expanding on the specifics of the deployed project, when going live don't forget to replace this README with the Production one.
+
+<br/>
+
 ## Debug
 
 To toggle debug modes you need to access the page `/debug/orchestra`.
@@ -49,6 +62,8 @@ This set of hooks is curated and maintained by the darkroom.engineering team:
 - Clément Roche ([@clementroche\_](https://twitter.com/clementroche_)) – [darkroom.engineering](https://darkroom.engineering)
 - Guido Fier ([@uido15](https://twitter.com/uido15)) – [darkroom.engineering](https://darkroom.engineering)
 - Leandro Soengas ([@lsoengas](https://twitter.com/lsoengas)) - [darkroom.engineering](https://darkroom.engineering)
+- Fermin Fernandez ([@Fermin_FerBridd](https://twitter.com/Fermin_FerBridd)) - [darkroom.engineering](https://darkroom.engineering)
+- Felix Mayr ([@feledori](https://twitter.com/feledori)) - [darkroom.engineering](https://darkroom.engineering)
 - Franco Arza ([@arzafran](https://twitter.com/arzafran)) - [darkroom.engineering](https://darkroom.engineering)
 
 <br/>

components/scrollbar/index.js

@@ -8,6 +8,7 @@ import s from './scrollbar.module.scss'
 
 export function Scrollbar() {
   const thumbRef = useRef()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const lenis = useLenis()
   const [innerMeasureRef, { height: innerHeight }] = useRect()
   const [thumbMeasureRef, { height: thumbHeight }] = useRect()
@@ -57,7 +58,7 @@ export function Scrollbar() {
       window.removeEventListener('pointermove', onPointerMove, false)
       window.removeEventListener('pointerup', onPointerUp, false)
     }
-  }, [lenis, innerHeight])
+  }, [lenis, innerHeight, thumbHeight])
 
   return (
     <div className={s.scrollbar}>

package.json

@@ -17,18 +17,18 @@
     "npmrc": "npx npmrc-replace-env -w"
   },
   "dependencies": {
-    "@darkroom.engineering/hamo": "0.6.36",
+    "@darkroom.engineering/hamo": "0.6.42",
     "@darkroom.engineering/tempus": "0.0.46",
     "@next/third-parties": "^14.2.3",
     "@radix-ui/react-select": "^2.0.0",
-    "@react-three/drei": "^9.105.5",
-    "@react-three/fiber": "^8.16.3",
+    "@react-three/drei": "^9.105.6",
+    "@react-three/fiber": "^8.16.6",
     "@serwist/next": "9.0.2",
     "@serwist/precaching": "9.0.2",
     "@serwist/sw": "9.0.2",
     "@storyblok/js": "^3.0.8",
-    "@theatre/core": "^0.7.1",
-    "@theatre/studio": "^0.7.1",
+    "@theatre/core": "^0.7.2",
+    "@theatre/studio": "^0.7.2",
     "clsx": "^2.1.1",
     "gsap": "^3.12.5",
     "lenis": "^1.0.45",
@@ -38,7 +38,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-use": "^17.5.0",
-    "sass": "^1.76.0",
+    "sass": "^1.77.2",
     "serwist": "9.0.2",
     "stats-gl": "^2.2.8",
     "stats.js": "^0.17.0",
@@ -52,25 +52,22 @@
     "@builder.io/partytown": "^0.10.2",
     "@cerner/duplicate-package-checker-webpack-plugin": "^2.6.0",
     "@next/bundle-analyzer": "^14.2.3",
+    "@next/eslint-plugin-next": "^14.2.3",
     "@svgr/webpack": "^8.1.0",
     "critters": "^0.0.22",
     "cross-env": "^7.0.3",
-    "eslint": "8.57.0",
     "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "local-ssl-proxy": "^2.0.5",
     "npm-run-all": "^4.1.5",
     "npmrc-replace-env": "^1.1.3",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0"
+    "prettier": "^3.2.5"
   },
   "pnpm": {
     "overrides": {
-      "eslint": "8.57.0",
       "scheduler": "0.23.0",
-      "@darkroom.engineering/tempus": "0.0.46",
-      "@darkroom.engineering/hamo": "0.6.36"
+      "@darkroom.engineering/tempus": "0.0.46"
     }
   },
   "lint-staged": {