tried implementing corrections, so that ci/cd, lint etc. checks get passed

Author: AfreenInnovates

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package.json

@@ -15,7 +15,8 @@
     "lint:md": "markdownlint '**/*.md' --ignore-path .prettierignore",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,md}'",
     "format:file": "prettier --write",
-    "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,md}'"
+    "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,md}'",
+    "install:legacy": "npm install --legacy-peer-deps"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.14",

src/components/Onboarding.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import {
-  OnboardingProvider,
-  useOnboarding,
-} from '@/contexts/OnboardingContext';
+import { OnboardingProvider } from '@/contexts/OnboardingContext';
+import { OnboardingStep as OnboardingStepType } from '@/contexts/OnboardingContextDefinition';
+import { useOnboarding } from '@/hooks/useOnboarding';
 import { getOnboardingStepsForPage } from '@/constants/OnboardingSteps';
 
 interface OnboardingProps {
   children: React.ReactNode;
   pageType?: 'homepage' | 'try' | 'about' | 'news';
   showProgressIndicator?: boolean;
-  customSteps?: any[];
+  customSteps?: OnboardingStepType[];
 }
 
 export const Onboarding: React.FC<OnboardingProps> = ({
@@ -72,34 +71,6 @@ const OnboardingContent: React.FC<{
 
 // useOnboarding hook is imported above
 
-// Add data attributes to elements for targeting
-export const addOnboardingIds = {
-  sugarLabsLogo: () => ({
-    'data-onboarding-id': 'sugar-labs-logo',
-    className: 'sugar-labs-logo',
-  }),
-  mainNavigation: () => ({
-    'data-onboarding-id': 'main-navigation',
-    className: 'main-navigation',
-  }),
-  trySugarButton: () => ({
-    'data-onboarding-id': 'try-sugar-button',
-    className: 'try-sugar-button',
-  }),
-  activitiesSection: () => ({
-    'data-onboarding-id': 'activities-section',
-    className: 'activities-section',
-  }),
-  statsSection: () => ({
-    'data-onboarding-id': 'stats-section',
-    className: 'stats-section',
-  }),
-  donationSection: () => ({
-    'data-onboarding-id': 'donation-section',
-    className: 'donation-section',
-  }),
-};
-
 // Component to add onboarding trigger button
 export const OnboardingTrigger: React.FC<{
   className?: string;

src/components/OnboardingTrigger.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useOnboarding } from '@/contexts/OnboardingContext';
+import { useOnboarding } from '@/hooks/useOnboarding';
 
 interface OnboardingTriggerProps {
   className?: string;

src/contexts/OnboardingContext.tsx

@@ -1,49 +1,10 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  ReactNode,
-} from 'react';
+import React, { useState, useEffect, ReactNode } from 'react';
 import Joyride, { CallBackProps, STATUS, EVENTS } from 'react-joyride';
-
-export interface OnboardingStep {
-  target: string;
-  content: ReactNode;
-  placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'center';
-  disableBeacon?: boolean;
-  spotlightClicks?: boolean;
-  hideCloseButton?: boolean;
-  hideBackButton?: boolean;
-  hideSkipButton?: boolean;
-  title?: string;
-  disableOverlayClose?: boolean;
-  hideFooter?: boolean;
-}
-
-export interface OnboardingContextType {
-  isOnboardingActive: boolean;
-  currentStep: number;
-  totalSteps: number;
-  startOnboarding: () => void;
-  stopOnboarding: () => void;
-  skipOnboarding: () => void;
-  resetOnboarding: () => void;
-  goToStep: (stepIndex: number) => void;
-  goToNextStep: () => void;
-  goToPreviousStep: () => void;
-  onboardingCompleted: boolean;
-  onboardingProgress: number;
-  shouldShowTrigger: () => boolean;
-  setRun: (run: boolean) => void;
-  getRun: () => boolean;
-  stepIndex: number;
-  lifecycle: string | null;
-}
-
-const OnboardingContext = createContext<OnboardingContextType | undefined>(
-  undefined,
-);
+import {
+  OnboardingContext,
+  OnboardingStep,
+  OnboardingContextType,
+} from './OnboardingContextDefinition';
 
 const LOCAL_STORAGE_KEY = 'sugar-labs-onboarding';
 const ONBOARDING_STEPS_KEY = 'onboarding-steps';
@@ -329,11 +290,3 @@ export const OnboardingProvider: React.FC<OnboardingProviderProps> = ({
     </OnboardingContext.Provider>
   );
 };
-
-export const useOnboarding = (): OnboardingContextType => {
-  const context = useContext(OnboardingContext);
-  if (!context) {
-    throw new Error('useOnboarding must be used within an OnboardingProvider');
-  }
-  return context;
-};

src/contexts/OnboardingContextDefinition.ts

@@ -0,0 +1,39 @@
+import { createContext, ReactNode } from 'react';
+
+export interface OnboardingStep {
+  target: string;
+  content: ReactNode;
+  placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'center';
+  disableBeacon?: boolean;
+  spotlightClicks?: boolean;
+  hideCloseButton?: boolean;
+  hideBackButton?: boolean;
+  hideSkipButton?: boolean;
+  title?: string;
+  disableOverlayClose?: boolean;
+  hideFooter?: boolean;
+}
+
+export interface OnboardingContextType {
+  isOnboardingActive: boolean;
+  currentStep: number;
+  totalSteps: number;
+  startOnboarding: () => void;
+  stopOnboarding: () => void;
+  skipOnboarding: () => void;
+  resetOnboarding: () => void;
+  goToStep: (stepIndex: number) => void;
+  goToNextStep: () => void;
+  goToPreviousStep: () => void;
+  onboardingCompleted: boolean;
+  onboardingProgress: number;
+  shouldShowTrigger: () => boolean;
+  setRun: (run: boolean) => void;
+  getRun: () => boolean;
+  stepIndex: number;
+  lifecycle: string | null;
+}
+
+export const OnboardingContext = createContext<OnboardingContextType | undefined>(
+  undefined,
+);

src/hooks/useOnboarding.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { OnboardingContext, OnboardingContextType } from '@/contexts/OnboardingContextDefinition';
+
+export const useOnboarding = (): OnboardingContextType => {
+  const context = useContext(OnboardingContext);
+  if (!context) {
+    throw new Error('useOnboarding must be used within an OnboardingProvider');
+  }
+  return context;
+};

src/utils/onboardingHelpers.ts

@@ -0,0 +1,27 @@
+// Helper functions for onboarding data attributes
+export const addOnboardingIds = {
+  sugarLabsLogo: () => ({
+    'data-onboarding-id': 'sugar-labs-logo',
+    className: 'sugar-labs-logo',
+  }),
+  mainNavigation: () => ({
+    'data-onboarding-id': 'main-navigation',
+    className: 'main-navigation',
+  }),
+  trySugarButton: () => ({
+    'data-onboarding-id': 'try-sugar-button',
+    className: 'try-sugar-button',
+  }),
+  activitiesSection: () => ({
+    'data-onboarding-id': 'activities-section',
+    className: 'activities-section',
+  }),
+  statsSection: () => ({
+    'data-onboarding-id': 'stats-section',
+    className: 'stats-section',
+  }),
+  donationSection: () => ({
+    'data-onboarding-id': 'donation-section',
+    className: 'donation-section',
+  }),
+};