first part of porting libs/ code to typescript

biome.json

@@ -45,6 +45,9 @@
       "a11y": {
         "useKeyWithClickEvents": "warn",
         "useValidAnchor": "warn"
+      },
+      "style": {
+        "noNonNullAssertion": "off"
       }
     }
   },

components/gsap/scroll-trigger.js

@@ -2,7 +2,7 @@
 
 import gsap from 'gsap'
 import { ScrollTrigger } from 'gsap/all'
-import { useLenis } from 'libs/lenis'
+import { useLenis } from 'lenis/react'
 import { useEffect, useLayoutEffect } from 'react'
 
 export function ScrollTriggerConfig() {

components/link/index.js

@@ -1,13 +1,13 @@
 'use client'
 
-import { useLenis } from 'libs/lenis'
+import { useLenis } from 'lenis/react'
 import NextLink from 'next/link'
 import { usePathname } from 'next/navigation'
 import { forwardRef } from 'react'
 
 export const Link = forwardRef(function Link(
   { href, fallback = 'div', onClick, ...props },
-  ref,
+  ref
 ) {
   const lenis = useLenis() // eslint-disable-line
   const pathname = usePathname()

components/marquee/index.js

@@ -6,7 +6,7 @@ import {
   useResizeObserver,
 } from '@darkroom.engineering/hamo'
 import cn from 'clsx'
-import { useLenis } from 'libs/lenis'
+import { useLenis } from 'lenis/react'
 import { modulo } from 'libs/maths'
 import { useRef } from 'react'
 import s from './marquee.module.css'

components/scrollbar/index.js

@@ -1,7 +1,7 @@
 'use client'
 
 import { useRect } from '@darkroom.engineering/hamo'
-import { useLenis } from 'libs/lenis'
+import { useLenis } from 'lenis/react'
 import { mapRange } from 'libs/maths'
 import { useEffect, useRef } from 'react'
 import s from './scrollbar.module.css'

libs/augment.d.ts

@@ -0,0 +1,7 @@
+import 'react'
+
+declare module 'react' {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number
+  }
+}

libs/maths.ts

@@ -1,58 +1,32 @@
-// maths.ts
-
-// Function type declarations
-type ClampFunction = (min: number, input: number, max: number) => number
-type MapRangeFunction = (
-  in_min: number,
-  in_max: number,
-  input: number,
-  out_min: number,
-  out_max: number
-) => number
-type LerpFunction = (start: number, end: number, amt: number) => number
-type TruncateFunction = (value: number, decimals: number) => number
-type ModuloFunction = (n: number, d: number) => number
-
-// Interface for the Maths object
-interface Maths {
-  lerp: LerpFunction
-  clamp: ClampFunction
-  mapRange: MapRangeFunction
-  truncate: TruncateFunction
-  modulo: ModuloFunction
-}
-
-// Function implementations
-const clamp: ClampFunction = (min, input, max) => {
+function clamp(min: number, input: number, max: number) {
   return Math.max(min, Math.min(input, max))
 }
 
-const mapRange: MapRangeFunction = (
-  in_min,
-  in_max,
-  input,
-  out_min,
-  out_max
-) => {
-  return ((input - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
+function mapRange(
+  inMin: number,
+  inMax: number,
+  input: number,
+  outMin: number,
+  outMax: number
+) {
+  return ((input - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin
 }
 
-const lerp: LerpFunction = (start, end, amt) => {
-  return (1 - amt) * start + amt * end
+function lerp(start: number, end: number, amount: number) {
+  return (1 - amount) * start + amount * end
 }
 
-const truncate: TruncateFunction = (value, decimals) => {
+function truncate(value: number, decimals: number) {
   return Number.parseFloat(value.toFixed(decimals))
 }
 
-const modulo: ModuloFunction = (n, d) => {
+function modulo(n: number, d: number) {
   if (d === 0) return n
   if (d < 0) return Number.NaN
   return ((n % d) + d) % d
 }
 
-// Maths object
-const Maths: Maths = { lerp, clamp, mapRange, truncate, modulo }
+const Maths = { lerp, clamp, mapRange, truncate, modulo }
 
 export { clamp, lerp, mapRange, modulo, truncate }
 export default Maths

libs/orchestra/grid/index.js → libs/orchestra/grid/index.tsx

@@ -3,7 +3,13 @@ import cn from 'clsx'
 import { useMemo } from 'react'
 import s from './grid.module.css'
 
-export function GridDebugger({ gridClassName = 'layout-grid' }) {
+type GridDebuggerProps = {
+  gridClassName?: string
+}
+
+export function GridDebugger({
+  gridClassName = 'layout-grid',
+}: GridDebuggerProps) {
   const { width: windowWidth, height: windowHeight } = useWindowSize()
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: columns dependency is needed to adjust on size changes
@@ -21,7 +27,12 @@ export function GridDebugger({ gridClassName = 'layout-grid' }) {
     <div className={s.grid}>
       <div className={cn(gridClassName, s.debugger)}>
         {Array.from({ length: columns }).map((_, index) => (
-          <span key={`column-${columns.indexOf(index)}`} />
+          <span
+            key={`column-${
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              index
+            }`}
+          />
         ))}
       </div>
     </div>

libs/orchestra/index.js → libs/orchestra/index.ts

@@ -1,4 +1,3 @@
-// import { create } from 'zustand'
 import {
   createJSONStorage,
   persist,
@@ -7,14 +6,14 @@ import {
 import { createStore } from 'zustand/vanilla'
 
 const storageKey = 'orchestra'
-const store = createStore(
+const store = createStore<Record<string, boolean>>()(
   persist(
     subscribeWithSelector(() => ({})),
     {
       name: storageKey,
       storage: createJSONStorage(() => localStorage),
-    },
-  ),
+    }
+  )
 )
 
 if (typeof window !== 'undefined') {
@@ -26,9 +25,11 @@ if (typeof window !== 'undefined') {
 }
 
 class Toggle {
-  constructor(id, content) {
+  id: string
+  domElement: HTMLButtonElement
+  private unsubscribeStore: () => void
+  constructor(id: string, content: string) {
     this.id = id
-    this.content = content
     this.domElement = document.createElement('button')
     this.domElement.innerText = content
     this.domElement.title = id
@@ -37,11 +38,11 @@ class Toggle {
     this.unsubscribeStore = store.subscribe(
       ({ [this.id]: value }) => value,
       (value) => {
-        this.domElement.dataset.active = value
+        this.domElement.dataset.active = String(value)
       },
       {
         fireImmediately: true,
-      },
+      }
     )
   }
 
@@ -57,17 +58,19 @@ class Toggle {
 }
 
 class Orchestra {
+  private domElement: HTMLDivElement
+  toggles: Toggle[]
   constructor() {
     this.domElement = document.createElement('div')
 
     this.toggles = []
   }
 
-  subscribe(callback) {
-    return store.subscribe(callback, { fireImmediately: true })
+  subscribe(callback: (value: Record<string, boolean>) => void) {
+    return store.subscribe((s) => s, callback, { fireImmediately: true })
   }
 
-  add(id, content) {
+  add(id: string, content: string) {
     if (this.toggles.find((toggle) => toggle.id === id)) return this
 
     const toggle = new Toggle(id, content)
@@ -77,10 +80,10 @@ class Orchestra {
     return this
   }
 
-  remove(id) {
+  remove(id: string) {
     const toggle = this.toggles.find((toggle) => toggle.id === id)
     // this.domElement.removeChild(toggle.domElement)
-    toggle.destroy()
+    toggle?.destroy()
     this.toggles = this.toggles.filter((toggle) => toggle.id !== id)
 
     return this
@@ -89,7 +92,9 @@ class Orchestra {
 
 const isClient = typeof window !== 'undefined'
 
-export default isClient && new Orchestra()
+const orchestra = isClient ? new Orchestra() : null
+
+export default orchestra
 
 // To be added to debug page
 // Orchestra.add('studio', '⚙️').add('stats', '📈').add('grid', '🌐').add('dev', '🚧')

libs/orchestra/minimap/index.js → libs/orchestra/minimap/index.tsx

@@ -5,7 +5,16 @@ import { useCallback, useEffect, useId, useRef, useState } from 'react'
 import { create } from 'zustand'
 import s from './minimap.module.css'
 
-const useMinimapStore = create(() => ({
+type MinimapEntry = {
+  element: HTMLElement
+  color: string
+}
+
+type MinimapStore = {
+  list: Record<string, MinimapEntry>
+}
+
+const useMinimapStore = create<MinimapStore>(() => ({
   list: {},
 }))
 
@@ -38,7 +47,7 @@ export function useMinimap({ color = 'blue' } = {}) {
 }
 
 export function Minimap() {
-  const [aspectRatio, setAspectRatio] = useState(1)
+  const [aspectRatio, setAspectRatio] = useState('1')
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(([entry]) => {
@@ -54,14 +63,14 @@ export function Minimap() {
     }
   }, [])
 
-  const elementRef = useRef()
+  const elementRef = useRef<HTMLDivElement>(null!)
 
   const onScroll = useCallback(() => {
     const progress =
       window.scrollY /
       (document.documentElement.scrollHeight - window.innerHeight)
 
-    elementRef.current.style.setProperty('--progress', progress)
+    elementRef.current.style.setProperty('--progress', progress.toString())
   }, [])
 
   useEffect(() => {
@@ -95,8 +104,8 @@ export function Minimap() {
   )
 }
 
-function Marker({ element, color }) {
-  const markerRef = useRef()
+function Marker({ element, color }: MinimapEntry) {
+  const markerRef = useRef<HTMLDivElement>(null!)
 
   useFrame(() => {
     if (!element) return
@@ -108,7 +117,7 @@ function Marker({ element, color }) {
     const width = rect.width / window.innerWidth
 
     // markerRef.current.style.top = `${top * 100}%`
-    markerRef.current.style.setProperty('--top', top)
+    markerRef.current.style.setProperty('--top', top.toString())
     // markerRef.current.style.height = `${height * 100}%`
     markerRef.current.style.left = `${left * 100}%`
     markerRef.current.style.width = `${width * 100}%`