From 9cc916e8bccde41d84130889408e70646f53586d Mon Sep 17 00:00:00 2001
From: Sylvain Duchesne <pro@sylvainduchesne.com>
Date: Sun, 18 Jan 2026 21:16:21 +0100
Subject: [PATCH] Fix TypeScript strict null check errors

Add optional chaining and null checks in build scripts to handle
potentially undefined array elements. Add style prop to Card, Badge,
and Placeholder components, and onClick prop to Text component to
support inline styling in screen components.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 build.ts                               | 12 +++++++-----
 scripts/extract-step-definitions.ts    |  4 ++--
 scripts/parse-features.ts              |  2 +-
 src/components/sketchy/Badge.tsx       |  5 +++--
 src/components/sketchy/Card.tsx        |  5 +++--
 src/components/sketchy/Placeholder.tsx |  6 ++++--
 src/components/sketchy/Text.tsx        |  5 +++--
 7 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/build.ts b/build.ts
index f3c5cd4..edd61f3 100644
--- a/build.ts
+++ b/build.ts
@@ -33,7 +33,7 @@ Example:
   process.exit(0);
 }
 
-const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, g => g[1]!.toUpperCase());
 
 const parseValue = (value: string): any => {
   if (value === "true") return true;
@@ -48,7 +48,7 @@ const parseValue = (value: string): any => {
 };
 
 function parseArgs(): Partial<Bun.BuildConfig> {
-  const config: Partial<Bun.BuildConfig> = {};
+  const config: Record<string, unknown> = {};
   const args = process.argv.slice(2);
 
   for (let i = 0; i < args.length; i++) {
@@ -82,14 +82,16 @@ function parseArgs(): Partial<Bun.BuildConfig> {
 
     if (key.includes(".")) {
       const [parentKey, childKey] = key.split(".");
-      config[parentKey] = config[parentKey] || {};
-      config[parentKey][childKey] = parseValue(value);
+      if (parentKey && childKey) {
+        config[parentKey] = config[parentKey] || {};
+        (config[parentKey] as Record<string, unknown>)[childKey] = parseValue(value);
+      }
     } else {
       config[key] = parseValue(value);
     }
   }
 
-  return config;
+  return config as Partial<Bun.BuildConfig>;
 }
 
 const formatFileSize = (bytes: number): string => {
diff --git a/scripts/extract-step-definitions.ts b/scripts/extract-step-definitions.ts
index 76d0fea..52e15a5 100644
--- a/scripts/extract-step-definitions.ts
+++ b/scripts/extract-step-definitions.ts
@@ -60,8 +60,8 @@ function extractStepDefinitions(): StepDefinition[] {
 function extractFunctionBody(lines: string[], startLine: number): string {
   // Look for the closing }); which marks the end of a step definition
   for (let i = startLine; i < lines.length; i++) {
-    const line = lines[i].trim();
-    if (line === '});' || line.endsWith('});')) {
+    const line = lines[i]?.trim();
+    if (line === '});' || line?.endsWith('});')) {
       const extracted = lines.slice(startLine, i + 1);
       return extracted.join('\n');
     }
diff --git a/scripts/parse-features.ts b/scripts/parse-features.ts
index 4a91774..ad46258 100644
--- a/scripts/parse-features.ts
+++ b/scripts/parse-features.ts
@@ -58,7 +58,7 @@ function parseGherkinContent(content: string, filePath: string): ParsedFeature |
   let contentStartIndex = 0;
 
   for (let i = 0; i < lines.length; i++) {
-    const line = lines[i].trim();
+    const line = lines[i]?.trim() ?? '';
     if (line.startsWith('#')) {
       contentStartIndex = i + 1;
       continue;
diff --git a/src/components/sketchy/Badge.tsx b/src/components/sketchy/Badge.tsx
index fe7a167..36f9ebd 100644
--- a/src/components/sketchy/Badge.tsx
+++ b/src/components/sketchy/Badge.tsx
@@ -3,11 +3,12 @@ import React from 'react';
 interface BadgeProps {
   children: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }
 
-export function Badge({ children, className = '' }: BadgeProps) {
+export function Badge({ children, className = '', style }: BadgeProps) {
   return (
-    <span className={`sketchy-badge ${className}`}>
+    <span className={`sketchy-badge ${className}`} style={style}>
       {children}
     </span>
   );
diff --git a/src/components/sketchy/Card.tsx b/src/components/sketchy/Card.tsx
index 89d7c4c..1c8f66c 100644
--- a/src/components/sketchy/Card.tsx
+++ b/src/components/sketchy/Card.tsx
@@ -4,14 +4,15 @@ interface CardProps {
   children: React.ReactNode;
   className?: string;
   onClick?: () => void;
+  style?: React.CSSProperties;
 }
 
-export function Card({ children, className = '', onClick }: CardProps) {
+export function Card({ children, className = '', onClick, style }: CardProps) {
   return (
     <div
       className={`sketchy-card ${className}`}
       onClick={onClick}
-      style={onClick ? { cursor: 'pointer' } : undefined}
+      style={{ ...(onClick ? { cursor: 'pointer' } : {}), ...style }}
     >
       {children}
     </div>
diff --git a/src/components/sketchy/Placeholder.tsx b/src/components/sketchy/Placeholder.tsx
index e1c8fe1..ad919b3 100644
--- a/src/components/sketchy/Placeholder.tsx
+++ b/src/components/sketchy/Placeholder.tsx
@@ -5,18 +5,20 @@ interface PlaceholderProps {
   height?: string | number;
   label?: string;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export function Placeholder({
   width = '100%',
   height = 100,
   label = 'Image',
-  className = ''
+  className = '',
+  style
 }: PlaceholderProps) {
   return (
     <div
       className={`sketchy-placeholder ${className}`}
-      style={{ width, height }}
+      style={{ width, height, ...style }}
     >
       {label}
     </div>
diff --git a/src/components/sketchy/Text.tsx b/src/components/sketchy/Text.tsx
index 6105687..0aaf33c 100644
--- a/src/components/sketchy/Text.tsx
+++ b/src/components/sketchy/Text.tsx
@@ -4,6 +4,7 @@ interface TextProps {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  onClick?: () => void;
 }
 
 export function Title({ children, className = '', style }: TextProps) {
@@ -14,6 +15,6 @@ export function Subtitle({ children, className = '', style }: TextProps) {
   return <h2 className={`sketchy-subtitle ${className}`} style={style}>{children}</h2>;
 }
 
-export function Text({ children, className = '', style }: TextProps) {
-  return <p className={`sketchy-text ${className}`} style={style}>{children}</p>;
+export function Text({ children, className = '', style, onClick }: TextProps) {
+  return <p className={`sketchy-text ${className}`} style={style} onClick={onClick}>{children}</p>;
 }