Merge pull request #189 from GizzZmo/copilot/fix-code-quality-check

fix: resolve Code Quality Check lint failures (set-state-in-effect, no-undef, no-unused-vars)

Author: GizzZmo

docs/widget-api/examples/weather.tsx

@@ -44,7 +44,7 @@ export const WeatherExampleWidget: React.FC = () => {
       if (!res.ok) throw new Error('API request failed');
       const data = await res.json();
       setWeather(data.current_weather);
-    } catch (e) {
+    } catch (_e) {
       setError('Could not fetch weather data');
     } finally {
       setLoading(false);

eslint.config.js

@@ -16,6 +16,20 @@ export default [
     ],
   },
   js.configs.recommended,
+  {
+    files: ['scripts/**/*.mjs', 'scripts/**/*.js'],
+    languageOptions: {
+      globals: {
+        console: 'readonly',
+        process: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+        exports: 'readonly',
+      },
+    },
+  },
   {
     files: ['public/sw.js'],
     languageOptions: {

hooks/useContainerWidth.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useLayoutEffect } from 'react';
 
 /**
  * Observe container width for ResponsiveGridLayout.
@@ -16,12 +16,21 @@ export function useContainerWidth(defaultWidth = 1200) {
     if (w > 0) setWidth(w);
   }, []);
 
-  useEffect(() => {
-    setMounted(true);
-    measure();
+  // Callback ref: setMounted is called outside an effect body, when the element attaches.
+  const containerRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      ref.current = el;
+      if (el) setMounted(true);
+    },
+    [],
+  );
+
+  useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
 
+    measure();
+
     if (typeof ResizeObserver !== 'undefined') {
       const ro = new ResizeObserver(() => measure());
       ro.observe(el);
@@ -32,5 +41,5 @@ export function useContainerWidth(defaultWidth = 1200) {
     return () => window.removeEventListener('resize', measure);
   }, [measure]);
 
-  return { width, containerRef: ref, mounted };
+  return { width, containerRef, mounted };
 }